@true-engineering/true-react-common-ui-kit 3.8.1 → 3.9.0

package/src/components/Select/CustomSelect.stories.tsx

@@ -1,217 +1,217 @@
-import { useState } from 'react';
-import { createUseStyles } from 'react-jss';
-import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { type ComponentMeta, type ComponentStory } from '@storybook/react';
-import { Button, type IButtonStyles } from '../Button';
-import { Input, type IInputStyles } from '../Input';
-import { TextButton } from '../TextButton';
-import { Select, type ISelectProps } from './Select';
-
-interface ISelectWithCustomProps<T> extends ISelectProps<T> {
-  shouldUsePopper?: boolean;
-  shouldRenderInBody?: boolean;
-  shouldHideOnScroll?: boolean;
-  canBeFlipped?: boolean;
-  scrollParent?: 'document' | 'auto';
-}
-
-const useSelectStyles = createUseStyles({
-  option: {
-    width: '100%',
-    gap: 10,
-    display: 'grid',
-    gridTemplateColumns: 'minmax(0, 1fr) max-content',
-    alignItems: 'center',
-  },
-});
-
-const useDefaultOptionStyles = createUseStyles({
-  customDefaultOption: {
-    width: '100%',
-    padding: [10, 20],
-    justifySelf: 'stretch',
-    alignSelf: 'stretch',
-    backgroundColor: '#ffffff',
-    cursor: 'default',
-  },
-
-  defaultView: {
-    display: 'grid',
-    placeItems: 'center',
-  },
-
-  inputView: {
-    gap: 10,
-    display: 'grid',
-    gridTemplateColumns: '1fr max-content',
-  },
-});
-
-const inputTweakStyles: IInputStyles = {
-  inputWrapper: {
-    height: 24,
-  },
-
-  input: {
-    padding: [0, 4],
-  },
-};
-
-const buttonTweakStyles: IButtonStyles = {
-  s: {
-    height: 24,
-
-    '&$onlyIcon': {
-      width: 24,
-    },
-  },
-};
-
-interface ICustomDefaultOptionProps {
-  onAdd?: (option?: string) => void;
-}
-
-function CustomDefaultOption({ onAdd }: ICustomDefaultOptionProps) {
-  const classes = useDefaultOptionStyles();
-
-  const [isAdding, setIsAdding] = useState(false);
-  const [inputValue, setInputValue] = useState('');
-
-  const onAddClick = () => {
-    onAdd?.(inputValue);
-    setIsAdding(false);
-    setInputValue('');
-  };
-
-  return (
-    <div className={classes.customDefaultOption} onClick={(event) => event.stopPropagation()}>
-      {!isAdding && (
-        <div className={classes.defaultView}>
-          <TextButton icon="plus" hasCircleUnderIcon isBold onClick={() => setIsAdding(true)}>
-            Add Option
-          </TextButton>
-        </div>
-      )}
-      {isAdding && (
-        <div className={classes.inputView}>
-          <Input
-            value={inputValue}
-            border="bottom"
-            placeholder="Option Value"
-            tweakStyles={inputTweakStyles}
-            shouldFocusOnMount
-            onChange={setInputValue}
-          />
-          <Button size="s" icon="plus" tweakStyles={buttonTweakStyles} onClick={onAddClick} />
-        </div>
-      )}
-    </div>
-  );
-}
-
-function SelectWithCustomProps({
-  noMatchesLabel,
-  shouldUsePopper,
-  shouldRenderInBody,
-  shouldHideOnScroll,
-  canBeFlipped,
-  scrollParent,
-  ...restProps
-}: ISelectWithCustomProps<string>) {
-  const classes = useSelectStyles();
-  const [inputValue, setInputValue] = useState<string>();
-  const [options, setOptions] = useState<string[]>([]);
-
-  const onAdd = (option?: string) => {
-    if (isStringNotEmpty(option)) {
-      setOptions((prevOptions) => [...prevOptions, option]);
-    }
-  };
-
-  const onRemove = (option: string) => {
-    setOptions((prevOptions) => prevOptions.filter((entry) => entry !== option));
-  };
-
-  const renderOption = (value: string) => (
-    <div className={classes.option}>
-      <span>{value}</span>
-      <Button
-        size="s"
-        icon="trash-can"
-        tweakStyles={buttonTweakStyles}
-        onClick={(event) => {
-          event.stopPropagation();
-
-          onRemove(value);
-        }}
-      />
-    </div>
-  );
-
-  const props = {
-    ...restProps,
-    onChange: setInputValue,
-    value: inputValue,
-    options,
-    convertValueToReactNode: renderOption,
-  };
-
-  return (
-    <Select
-      {...props}
-      defaultOptionLabel={<CustomDefaultOption onAdd={onAdd} />}
-      noMatchesLabel={isStringNotEmpty(noMatchesLabel) ? noMatchesLabel : undefined}
-      tweakStyles={{
-        tweakSelectList: {
-          defaultCell: {
-            padding: 0,
-          },
-        },
-      }}
-      dropdownOptions={{
-        shouldUsePopper,
-        shouldRenderInBody,
-        shouldHideOnScroll,
-        canBeFlipped,
-        scrollParent,
-      }}
-    />
-  );
-}
-
-export default {
-  title: 'Select',
-  component: SelectWithCustomProps,
-  argTypes: {
-    scrollParent: {
-      options: ['document', 'auto'],
-      control: { type: 'select' },
-    },
-  },
-} as ComponentMeta<typeof SelectWithCustomProps>;
-
-const Template: ComponentStory<typeof SelectWithCustomProps> = (args) => (
-  <SelectWithCustomProps {...args} />
-);
-
-export const CustomSelect = Template.bind({});
-
-CustomSelect.args = {
-  label: 'Dropdown',
-  noMatchesLabel: 'No matches',
-  isInvalid: false,
-  errorMessage: '',
-  errorPosition: 'bottom',
-  hasFloatingLabel: true,
-  hasRequiredLabel: false,
-  isDisabled: false,
-  isRequired: false,
-  isClearable: false,
-
-  shouldUsePopper: false,
-  shouldRenderInBody: false,
-  shouldHideOnScroll: false,
-  shouldScrollToList: true,
-  canBeFlipped: false,
-  scrollParent: 'document',
-};
+import { useState } from 'react';
+import { createUseStyles } from 'react-jss';
+import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { type ComponentMeta, type ComponentStory } from '@storybook/react';
+import { Button, type IButtonStyles } from '../Button';
+import { Input, type IInputStyles } from '../Input';
+import { TextButton } from '../TextButton';
+import { Select, type ISelectProps } from './Select';
+
+interface ISelectWithCustomProps<T> extends ISelectProps<T> {
+  shouldUsePopper?: boolean;
+  shouldRenderInBody?: boolean;
+  shouldHideOnScroll?: boolean;
+  canBeFlipped?: boolean;
+  scrollParent?: 'document' | 'auto';
+}
+
+const useSelectStyles = createUseStyles({
+  option: {
+    width: '100%',
+    gap: 10,
+    display: 'grid',
+    gridTemplateColumns: 'minmax(0, 1fr) max-content',
+    alignItems: 'center',
+  },
+});
+
+const useDefaultOptionStyles = createUseStyles({
+  customDefaultOption: {
+    width: '100%',
+    padding: [10, 20],
+    justifySelf: 'stretch',
+    alignSelf: 'stretch',
+    backgroundColor: '#ffffff',
+    cursor: 'default',
+  },
+
+  defaultView: {
+    display: 'grid',
+    placeItems: 'center',
+  },
+
+  inputView: {
+    gap: 10,
+    display: 'grid',
+    gridTemplateColumns: '1fr max-content',
+  },
+});
+
+const inputTweakStyles: IInputStyles = {
+  inputWrapper: {
+    height: 24,
+  },
+
+  input: {
+    padding: [0, 4],
+  },
+};
+
+const buttonTweakStyles: IButtonStyles = {
+  s: {
+    height: 24,
+
+    '&$onlyIcon': {
+      width: 24,
+    },
+  },
+};
+
+interface ICustomDefaultOptionProps {
+  onAdd?: (option?: string) => void;
+}
+
+function CustomDefaultOption({ onAdd }: ICustomDefaultOptionProps) {
+  const classes = useDefaultOptionStyles();
+
+  const [isAdding, setIsAdding] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+
+  const onAddClick = () => {
+    onAdd?.(inputValue);
+    setIsAdding(false);
+    setInputValue('');
+  };
+
+  return (
+    <div className={classes.customDefaultOption} onClick={(event) => event.stopPropagation()}>
+      {!isAdding && (
+        <div className={classes.defaultView}>
+          <TextButton icon="plus" hasCircleUnderIcon isBold onClick={() => setIsAdding(true)}>
+            Add Option
+          </TextButton>
+        </div>
+      )}
+      {isAdding && (
+        <div className={classes.inputView}>
+          <Input
+            value={inputValue}
+            border="bottom"
+            placeholder="Option Value"
+            tweakStyles={inputTweakStyles}
+            shouldFocusOnMount
+            onChange={setInputValue}
+          />
+          <Button size="s" icon="plus" tweakStyles={buttonTweakStyles} onClick={onAddClick} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SelectWithCustomProps({
+  noMatchesLabel,
+  shouldUsePopper,
+  shouldRenderInBody,
+  shouldHideOnScroll,
+  canBeFlipped,
+  scrollParent,
+  ...restProps
+}: ISelectWithCustomProps<string>) {
+  const classes = useSelectStyles();
+  const [inputValue, setInputValue] = useState<string>();
+  const [options, setOptions] = useState<string[]>([]);
+
+  const onAdd = (option?: string) => {
+    if (isStringNotEmpty(option)) {
+      setOptions((prevOptions) => [...prevOptions, option]);
+    }
+  };
+
+  const onRemove = (option: string) => {
+    setOptions((prevOptions) => prevOptions.filter((entry) => entry !== option));
+  };
+
+  const renderOption = (value: string) => (
+    <div className={classes.option}>
+      <span>{value}</span>
+      <Button
+        size="s"
+        icon="trash-can"
+        tweakStyles={buttonTweakStyles}
+        onClick={(event) => {
+          event.stopPropagation();
+
+          onRemove(value);
+        }}
+      />
+    </div>
+  );
+
+  const props = {
+    ...restProps,
+    onChange: setInputValue,
+    value: inputValue,
+    options,
+    convertValueToReactNode: renderOption,
+  };
+
+  return (
+    <Select
+      {...props}
+      defaultOptionLabel={<CustomDefaultOption onAdd={onAdd} />}
+      noMatchesLabel={isStringNotEmpty(noMatchesLabel) ? noMatchesLabel : undefined}
+      tweakStyles={{
+        tweakSelectList: {
+          defaultCell: {
+            padding: 0,
+          },
+        },
+      }}
+      dropdownOptions={{
+        shouldUsePopper,
+        shouldRenderInBody,
+        shouldHideOnScroll,
+        canBeFlipped,
+        scrollParent,
+      }}
+    />
+  );
+}
+
+export default {
+  title: 'Select',
+  component: SelectWithCustomProps,
+  argTypes: {
+    scrollParent: {
+      options: ['document', 'auto'],
+      control: { type: 'select' },
+    },
+  },
+} as ComponentMeta<typeof SelectWithCustomProps>;
+
+const Template: ComponentStory<typeof SelectWithCustomProps> = (args) => (
+  <SelectWithCustomProps {...args} />
+);
+
+export const CustomSelect = Template.bind({});
+
+CustomSelect.args = {
+  label: 'Dropdown',
+  noMatchesLabel: 'No matches',
+  isInvalid: false,
+  errorMessage: '',
+  errorPosition: 'bottom',
+  hasFloatingLabel: true,
+  hasRequiredLabel: false,
+  isDisabled: false,
+  isRequired: false,
+  isClearable: false,
+
+  shouldUsePopper: false,
+  shouldRenderInBody: false,
+  shouldHideOnScroll: false,
+  shouldScrollToList: true,
+  canBeFlipped: false,
+  scrollParent: 'document',
+};