npm - @seeqdev/qomponents - Versions diffs - 0.0.154 → 0.0.155-react-19 - Mend

@seeqdev/qomponents 0.0.154 → 0.0.155-react-19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/README.md +135 -135
package/dist/Accordion/Accordion.stories.d.ts +2 -1
package/dist/Alert/Alert.stories.d.ts +2 -1
package/dist/Alert/Alert.types.d.ts +1 -0
package/dist/Button/Button.stories.d.ts +5 -4
package/dist/Button/Button.types.d.ts +1 -1
package/dist/ButtonGroup/ButtonGroup.stories.d.ts +2 -1
package/dist/ButtonGroup/ButtonGroup.types.d.ts +1 -0
package/dist/ButtonWithDropdown/ButtonWithDropdown.stories.d.ts +2 -1
package/dist/ButtonWithDropdown/ButtonWithDropdown.types.d.ts +1 -0
package/dist/ButtonWithPopover/ButtonWithPopover.stories.d.ts +2 -1
package/dist/Carousel/Carousel.stories.d.ts +2 -1
package/dist/Carousel/Carousel.types.d.ts +1 -0
package/dist/Checkbox/Checkbox.stories.d.ts +2 -1
package/dist/Checkbox/Checkbox.types.d.ts +1 -0
package/dist/Collapse/Collapse.stories.d.ts +2 -1
package/dist/Collapse/Collapse.types.d.ts +1 -0
package/dist/Icon/Icon.stories.d.ts +2 -1
package/dist/Icon/Icon.types.d.ts +1 -0
package/dist/InputGroup/InputGroup.stories.d.ts +2 -1
package/dist/InputGroup/InputGroup.types.d.ts +1 -0
package/dist/ProgressBar/ProgressBar.stories.d.ts +2 -1
package/dist/SeeqActionDropdown/SeeqActionDropdown.stories.d.ts +2 -1
package/dist/SeeqActionDropdown/SeeqActionDropdown.types.d.ts +1 -0
package/dist/Select/Select.stories.d.ts +2 -1
package/dist/Slider/Slider.stories.d.ts +2 -1
package/dist/Slider/Slider.types.d.ts +1 -0
package/dist/SvgIcon/SvgIcon.stories.d.ts +2 -1
package/dist/SvgIcon/SvgIcon.types.d.ts +1 -0
package/dist/Tabs/Tabs.stories.d.ts +2 -1
package/dist/Tabs/Tabs.types.d.ts +2 -1
package/dist/TextArea/TextArea.stories.d.ts +2 -1
package/dist/TextArea/TextArea.types.d.ts +1 -0
package/dist/TextField/TextField.stories.d.ts +2 -1
package/dist/TextField/TextField.types.d.ts +1 -0
package/dist/ToolbarButton/ToolbarButton.stories.d.ts +2 -1
package/dist/Tooltip/QTip.stories.d.ts +2 -1
package/dist/Tooltip/QTipPerformance.stories.d.ts +2 -1
package/dist/Tooltip/Tooltip.stories.d.ts +2 -1
package/dist/Tooltip/Tooltip.types.d.ts +3 -2
package/dist/Tooltip/TooltipPerformance.stories.d.ts +2 -1
package/dist/example/.eslintrc.cjs +14 -14
package/dist/example/README.md +33 -33
package/dist/example/index.html +13 -13
package/dist/example/package.json +30 -30
package/dist/example/src/ComplexSelectExample.tsx +81 -81
package/dist/example/src/Example.tsx +408 -408
package/dist/example/src/index.css +102 -102
package/dist/example/src/main.tsx +10 -10
package/dist/example/src/vite-env.d.ts +1 -1
package/dist/example/tsconfig.json +33 -33
package/dist/example/tsconfig.node.json +12 -12
package/dist/example/vite.config.ts +12 -12
package/dist/index.esm.js +14409 -7954
package/dist/index.esm.js.map +1 -1
package/dist/index.js +14449 -7994
package/dist/index.js.map +1 -1
package/dist/styles.css +3819 -3819
package/package.json +89 -88

package/dist/example/.eslintrc.cjs CHANGED Viewed

@@ -1,14 +1,14 @@
-module.exports = {
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': 'warn',
-  },
-}
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': 'warn',
+  },
+}

package/dist/example/README.md CHANGED Viewed

@@ -1,33 +1,33 @@
-<!-- markdownlint-disable-next-line -->
-<p align="center">
-  <img width="150" src="https://seeq.com/sites/default/files/seeq-content/seeq-logo-blue-web-33h.svg" alt="Seeq logo">
-</p>
-<h1 align="center">qomponents-form example</h1>
-Time to see qomponents in action!
-This is a simple form example that showcases Seeq's qomponents library.
-This application is built using [vite](https://vitejs.dev/).
-## Installation
-First, be sure to install all dependencies (React, and qomponents):
-```sh
-npm install
-```
-Once you've installed all dependencies you can start up a dev server and observer any changes you make in real-time:
-```sh
-npm run dev
-```
-## Tip
-All application code can be found in Example.tsx. Check out the source code to learn how to ensure your
-components display using the correct theme (green, blue, orange) as well as the correct mode (light or dark).
+<!-- markdownlint-disable-next-line -->
+<p align="center">
+  <img width="150" src="https://seeq.com/sites/default/files/seeq-content/seeq-logo-blue-web-33h.svg" alt="Seeq logo">
+</p>
+<h1 align="center">qomponents-form example</h1>
+Time to see qomponents in action!
+This is a simple form example that showcases Seeq's qomponents library.
+This application is built using [vite](https://vitejs.dev/).
+## Installation
+First, be sure to install all dependencies (React, and qomponents):
+```sh
+npm install
+```
+Once you've installed all dependencies you can start up a dev server and observer any changes you make in real-time:
+```sh
+npm run dev
+```
+## Tip
+All application code can be found in Example.tsx. Check out the source code to learn how to ensure your
+components display using the correct theme (green, blue, orange) as well as the correct mode (light or dark).

package/dist/example/index.html CHANGED Viewed

@@ -1,13 +1,13 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>qomponents form example</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>qomponents form example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/dist/example/package.json CHANGED Viewed

@@ -1,30 +1,30 @@
-{
-  "name": "example",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.4.0",
-    "@seeqdev/qomponents": "0.0.72",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.0.37",
-    "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
-    "@vitejs/plugin-react": "^4.0.0",
-    "eslint": "^8.38.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
-    "typescript": "^5.0.2",
-    "vite": "^4.3.9"
-  }
-}
+{
+  "name": "example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.4.0",
+    "@seeqdev/qomponents": "0.0.72",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9"
+  }
+}

package/dist/example/src/ComplexSelectExample.tsx CHANGED Viewed

@@ -1,81 +1,81 @@
-import React from 'react';
-import { Icon, Select } from '@seeqdev/qomponents';
-export interface SelectOption {
-  id: string;
-  label: string;
-  color: string;
-  asset: string;
-  type: 'SCALAR' | 'STRING' | 'NUMERIC';
-}
-const options: SelectOption[] = [
-  { id: '1', label: 'Label for the first entry', color: 'pink', asset: 'Asset 1', type: 'NUMERIC' },
-  { id: '2', label: 'Label for the second entry', color: 'green', asset: 'Asset 2', type: 'SCALAR' },
-  { id: '3', label: 'Label for the third entry', color: 'orange', asset: 'Asset 3', type: 'STRING' },
-];
-interface ComplexSelectExampleProps {
-  onChange: (selectedOption: SelectOption) => void;
-  value: SelectOption | undefined;
-}
-function ComplexSelectExample({ onChange, value }: ComplexSelectExampleProps) {
-  const getIcon = (type: string) => {
-    switch (type) {
-      case 'STRING':
-        return 'fa fa-font';
-      case 'SCALAR':
-        return 'fc-scalar';
-      default:
-        return 'fc-series';
-    }
-  };
-  /**
-   * This function formats the select option as desired. You can apply css styling here or use additional qomponents
-   * to style the select option display.
-   *
-   * You can use the same function to format the selected value or use a different one (sometimes having a separate
-   * function is helpful if you want to limit the space that is taken up by the selected option).
-   *
-   * This example shows how to use an additional Icon component (styled in color based on the select option) as well
-   * as how to display the properties of the select option
-   */
-  const getOptionLabel = (optionValue: SelectOption): React.ReactNode => {
-    return (
-      <div className="selectOptionWrapperDiv">
-        <Icon icon={getIcon(optionValue.type)} type="color" color={optionValue.color} extraClassNames="mr-10" />
-        <div className="selectOptionDiv">
-          <div className="selectOption">
-            <strong>{optionValue.label}</strong>
-          </div>
-          <div className="selectOptionSubText">{optionValue.asset}</div>
-        </div>
-      </div>
-    );
-  };
-  const getOptionValue = (option: SelectOption) => {
-    return option.id;
-  };
-  return (
-    // use the getOptionLabel function to provide a custom render function that determines how the select options
-    // are displayed
-    // use the getSelectedValueLabel function to provide a custom render function that determines how the selected
-    // option is displayed
-    <Select
-      placeholder="formatted select options"
-      extraClassNames="formElementWidth"
-      options={options}
-      value={value}
-      getOptionLabel={getOptionLabel}
-      getOptionValue={getOptionValue}
-      getSelectedValueLabel={getOptionLabel}
-      onChange={(selectedOption: SelectOption) => {
-        onChange(selectedOption);
-      }}
-    />
-  );
-}
-export default ComplexSelectExample;
+import React from 'react';
+import { Icon, Select } from '@seeqdev/qomponents';
+export interface SelectOption {
+  id: string;
+  label: string;
+  color: string;
+  asset: string;
+  type: 'SCALAR' | 'STRING' | 'NUMERIC';
+}
+const options: SelectOption[] = [
+  { id: '1', label: 'Label for the first entry', color: 'pink', asset: 'Asset 1', type: 'NUMERIC' },
+  { id: '2', label: 'Label for the second entry', color: 'green', asset: 'Asset 2', type: 'SCALAR' },
+  { id: '3', label: 'Label for the third entry', color: 'orange', asset: 'Asset 3', type: 'STRING' },
+];
+interface ComplexSelectExampleProps {
+  onChange: (selectedOption: SelectOption) => void;
+  value: SelectOption | undefined;
+}
+function ComplexSelectExample({ onChange, value }: ComplexSelectExampleProps) {
+  const getIcon = (type: string) => {
+    switch (type) {
+      case 'STRING':
+        return 'fa fa-font';
+      case 'SCALAR':
+        return 'fc-scalar';
+      default:
+        return 'fc-series';
+    }
+  };
+  /**
+   * This function formats the select option as desired. You can apply css styling here or use additional qomponents
+   * to style the select option display.
+   *
+   * You can use the same function to format the selected value or use a different one (sometimes having a separate
+   * function is helpful if you want to limit the space that is taken up by the selected option).
+   *
+   * This example shows how to use an additional Icon component (styled in color based on the select option) as well
+   * as how to display the properties of the select option
+   */
+  const getOptionLabel = (optionValue: SelectOption): React.ReactNode => {
+    return (
+      <div className="selectOptionWrapperDiv">
+        <Icon icon={getIcon(optionValue.type)} type="color" color={optionValue.color} extraClassNames="mr-10" />
+        <div className="selectOptionDiv">
+          <div className="selectOption">
+            <strong>{optionValue.label}</strong>
+          </div>
+          <div className="selectOptionSubText">{optionValue.asset}</div>
+        </div>
+      </div>
+    );
+  };
+  const getOptionValue = (option: SelectOption) => {
+    return option.id;
+  };
+  return (
+    // use the getOptionLabel function to provide a custom render function that determines how the select options
+    // are displayed
+    // use the getSelectedValueLabel function to provide a custom render function that determines how the selected
+    // option is displayed
+    <Select
+      placeholder="formatted select options"
+      extraClassNames="formElementWidth"
+      options={options}
+      value={value}
+      getOptionLabel={getOptionLabel}
+      getOptionValue={getOptionValue}
+      getSelectedValueLabel={getOptionLabel}
+      onChange={(selectedOption: SelectOption) => {
+        onChange(selectedOption);
+      }}
+    />
+  );
+}
+export default ComplexSelectExample;