@seeqdev/qomponents 0.0.15 → 0.0.17

package/dist/example/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.4.0",
-    "@seeqdev/qomponents": "latest",
+    "@seeqdev/qomponents": "0.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/dist/example/src/ComplexSelectExample.tsx

@@ -0,0 +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;

package/dist/example/src/Example.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Button, Checkbox, Icon, Select, TextArea, TextField, Tooltip } from '@seeqdev/qomponents';
+import ComplexSelectExample, { SelectOption } from './ComplexSelectExample';
 
 const availableThemes = [
   { display: 'Analysis', value: 'color_analysis' },
@@ -23,7 +24,7 @@ function Example() {
    */
   const [theme, setTheme] = React.useState('color_analysis');
   /**
-   * qomponents also support dark-mode. To reder qomponents using dark-mode wrap your addOn in a div and assign the
+   * qomponents also support dark-mode. To render qomponents using dark-mode wrap your addOn in a div and assign the
    * class "tw-dark" for dark-mode or "tw-light" for light mode.
    */
   const [mode, setMode] = React.useState('tw-light');
@@ -34,6 +35,7 @@ function Example() {
   const [textFieldValue, setTextFieldValue] = React.useState('');
   const [textAreaValue, setTextAreaValue] = React.useState('');
   const [selectValue, setSelectValue] = React.useState();
+  const [complexSelectedValue, setComplexSelectedValue] = React.useState<SelectOption>();
   const [display, setDisplay] = React.useState('');
   const [easeOfUse, setEaseOfUse] = React.useState(false);
   const [lookAndFeel, setLookAndFeel] = React.useState(false);
@@ -91,7 +93,7 @@ function Example() {
           <div className="labelWidth">Description</div>
           <TextArea
             value={textAreaValue}
-            onChange={(e) => setTextAreaValue(e.target.value)}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTextAreaValue(e.target.value)}
             extraClassNames="formElementWidth"
             placeholder="provide some text here"
           />
@@ -120,6 +122,13 @@ function Example() {
             placeholder="please choose"
           />
         </div>
+        <div className="formRow">
+          <div className="labelWidth">Advanced</div>
+          <ComplexSelectExample
+            value={complexSelectedValue}
+            onChange={(selectedOption: SelectOption) => setComplexSelectedValue(selectedOption)}
+          />
+        </div>
         <div className="buttonRow">
           <Button
             label="Cancel"

package/dist/example/src/index.css

@@ -71,3 +71,23 @@
     margin-left: 10px;
 }
 
+/* styles for complexSelect*/
+.selectOptionWrapperDiv {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 34px;
+}
+
+.selectOptionDiv {
+    display: flex;
+    flex-direction: column;
+}
+
+.selectOptionSubText {
+    font-size: smaller;
+    padding: 0;
+    margin-top: -6px;
+}
+
+/* end styles for complexSelect*/

package/dist/example/src/main.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import Example from './Example.tsx';
+import Example from './Example';
 import './index.css';
 
 ReactDOM.createRoot(document.body as HTMLElement).render(

package/dist/example/tsconfig.node.json

@@ -3,8 +3,10 @@
     "composite": true,
     "skipLibCheck": true,
     "module": "ESNext",
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": [
+    "vite.config.ts"
+  ]
 }

package/dist/index.esm.js

@@ -114,13 +114,13 @@ const Icon = ({ onClick, icon, type = 'theme', extraClassNames, id, large, small
  *  - use "variant" to achieve the desired style
  *  - include tooltips and/or icons
  */
-const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, }) => {
+const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, preventBlur = false, }) => {
     const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
     const baseClassesByVariant = {
         'outline': 'tw-border-solid tw-border',
-        'theme': 'disabled:tw-bg-opacity-50',
-        'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-bg-opacity-50',
-        'theme-light': 'disabled:tw-bg-opacity-50',
+        'theme': 'disabled:tw-opacity-50',
+        'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-opacity-50',
+        'theme-light': 'disabled:tw-opacity-50',
         'no-border': '',
         'warning': 'tw-bg-sq-warning-color',
     };
@@ -167,9 +167,12 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
     const button = (React__default.createElement("button", { id: id, disabled: disabled, "data-testid": testId, type: type === 'link' || (type === 'submit' && browserIsFirefox) ? 'button' : type, onClick: (e) => {
             stopPropagation && e.stopPropagation();
             onClick && onClick();
+        }, onMouseDown: (e) => {
+            if (preventBlur) {
+                e.preventDefault();
+            }
         }, className: appliedClasses },
-        icon && (React__default.createElement(Icon, { icon: icon, type: iconStyle, color: iconColor, extraClassNames: label ?
-                `tw-mr-1 ${textClassesByVariantLightTheme[variant]}  ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` })),
+        icon && (React__default.createElement(Icon, { icon: icon, type: iconStyle, color: iconColor, extraClassNames: label ? `tw-mr-1 ${textClassesByVariantLightTheme[variant]}  ${textClassesByVariantDarkTheme[variant]}` : '', testId: `${id}_spinner` })),
         label));
     return tooltip ? (React__default.createElement(Tooltip, { text: tooltip, ...tooltipOptions }, button)) : (button);
 };