@seeqdev/qomponents 0.0.169 → 0.0.171

package/dist/example/package.json

@@ -1,32 +1,32 @@
-{
-  "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.153",
-    "@tailwindcss/vite": "4.1.8",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "tailwindcss": "4.1.8"
-  },
-  "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.5.1",
-    "eslint": "8.38.0",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-react-refresh": "0.3.4",
-    "typescript": "5.0.2",
-    "vite": "6.3.5"
-  }
-}
+{
+  "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.153",
+    "@tailwindcss/vite": "4.1.8",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "4.1.8"
+  },
+  "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.5.1",
+    "eslint": "8.38.0",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-refresh": "0.3.4",
+    "typescript": "5.0.2",
+    "vite": "6.3.5"
+  }
+}

package/dist/example/src/ComplexSelectExample.tsx

@@ -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;