@spaced-out/ui-design-system 0.4.13-beta.0 → 0.4.13-beta.1

package/lib/components/TokenListInput/TokenListInput.stories.tsx

@@ -1,678 +0,0 @@
-import * as React from 'react';
-
-import {useArbitraryOptionAddition} from '../../hooks/useArbitraryOptionAddition';
-import {useFilteredOptions} from '../../hooks/useFilteredOptions';
-import {classify} from '../../utils/classify';
-import {Icon} from '../Icon';
-import type {MenuOption} from '../Menu';
-import {
-  ButtonTextExtraSmallUnderline,
-  FormLabelSmall,
-  TEXT_COLORS,
-} from '../Text';
-import {ELEVATION_TYPES, Tooltip} from '../Tooltip';
-
-import {TokenListInput} from './TokenListInput';
-import type {Props} from './TokenListInput';
-
-import css from './TokenListInput.stories.module.css';
-
-
-const elevationOptions: Array<unknown> = [...Object.values(ELEVATION_TYPES)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Form Components/Token List Input',
-  component: TokenListInput,
-  argTypes: {
-    classNames: {
-      description:
-        'Custom class names for styling the wrapper, box, and input.',
-      control: {type: 'object'},
-      table: {
-        type: {summary: '{ wrapper?: string, box?: string, input?: string }'},
-      },
-    },
-    clickAwayRef: {
-      description:
-        'Ref for the click-away handler, used to detect clicks outside the component.',
-      control: false,
-      table: {type: {summary: 'ClickAwayRefType'}},
-    },
-    disabled: {
-      description: 'Disables user interaction with the input and menu.',
-      control: {type: 'boolean'},
-      table: {type: {summary: 'boolean'}, defaultValue: {summary: 'false'}},
-    },
-    elevation: {
-      description:
-        'This is passed to TokenListInput. Elevation level for the dropdown menu controls the z-index stacking order. Default is set to "modal" elevation. Use higher elevation levels when rendering the dropdown above other elevated elements like Modal, Toast, etc.',
-      control: {
-        type: 'select',
-      },
-      options: elevationOptions,
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'modal'},
-      },
-    },
-    error: {
-      description:
-        'if **true**, the component is moved to error state, Error state displays a red border surrounding input',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    errorText: {
-      description:
-        'Error text to be displayed on the bottom of the input. This uses `colorTextDanger`',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    focusOnMount: {
-      description:
-        'If true, the input will be focused automatically when the component mounts.',
-      control: {type: 'boolean'},
-      table: {type: {summary: 'boolean'}},
-    },
-    helperText: {
-      description:
-        'Additional information or guidance displayed below the input. Hidden if errorText is present.',
-      control: {type: 'text'},
-      table: {type: {summary: 'string'}},
-    },
-    placeholder: {
-      description:
-        'Placeholder text for the input field. Used if values are empty.',
-      control: {type: 'text'},
-      table: {type: {summary: 'string'}},
-    },
-    inputValue: {
-      description: 'The current value of the input field.',
-      control: {type: 'text'},
-      table: {type: {summary: 'string'}},
-    },
-    inputPlaceholder: {
-      description:
-        'Placeholder text for the input field. Used if provided, otherwise falls back to `placeholder`.',
-      control: {type: 'text'},
-      table: {type: {summary: 'string'}},
-    },
-    limit: {
-      description:
-        'Maximum number of tokens that can be added. When the limit is reached, the input is disabled.',
-      control: {type: 'number'},
-      table: {type: {summary: 'number'}, defaultValue: {summary: '100'}},
-    },
-    isLoading: {
-      description: 'if **true**, the component would add a loader.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    locked: {
-      description:
-        'If true, the input and tokens are locked and cannot be changed.',
-      control: {type: 'boolean'},
-      table: {type: {summary: 'boolean'}},
-    },
-    onChange: {
-      description: 'Callback fired when the list of selected tokens changes.',
-      control: false,
-      table: {type: {summary: '(values: Array<T>) => mixed'}},
-    },
-    onInputBlur: {
-      description: 'Callback fired when the input loses focus.',
-      control: false,
-      table: {
-        type: {summary: '(e: SyntheticEvent<HTMLInputElement>) => mixed'},
-      },
-    },
-    onInputChange: {
-      description: 'Callback fired when the input value changes.',
-      control: false,
-      table: {type: {summary: '(value: string) => mixed'}},
-    },
-    onInputFocus: {
-      description: 'Callback fired when the input gains focus.',
-      control: false,
-      table: {
-        type: {summary: '(e: SyntheticEvent<HTMLInputElement>) => mixed'},
-      },
-    },
-
-    size: {
-      description:
-        'Controls the overall size of the input field. Choose between "medium" (default) and "small".',
-      options: ['medium', 'small'],
-      control: {type: 'select'},
-      table: {
-        type: {summary: '"medium" | "small"'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    tabIndex: {
-      description: 'Tab index for the input field.',
-      control: {type: 'number'},
-      table: {type: {summary: 'number'}},
-    },
-    values: {
-      description: 'The current list of selected tokens.',
-      control: {type: 'object'},
-      table: {type: {summary: 'Array<T>'}},
-    },
-    menu: {
-      description:
-        'Props for the dropdown menu, including options, grouped options, and custom label resolver.',
-      control: {type: 'object'},
-      table: {type: {summary: 'TokenListMenuProps<T>'}},
-    },
-    onMenuOpen: {
-      description: 'Callback fired when the menu is opened.',
-      control: false,
-      table: {type: {summary: '() => mixed'}},
-    },
-    onMenuClose: {
-      description: 'Callback fired when the menu is closed.',
-      control: false,
-      table: {type: {summary: '() => mixed'}},
-    },
-    resolveTokenValue: {
-      description: 'Custom render function for displaying a token value.',
-      control: false,
-      table: {type: {summary: '(ResolveTokenValueProps<T>) => React.ReactNode'}},
-    },
-    inputProps: {
-      description: 'Additional props to spread onto the input element.',
-      control: {type: 'object'},
-      table: {type: {summary: 'InputProps'}},
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle:
-        'A flexible input for managing a list of tokens, supporting both selection from a dropdown and free-form entry.',
-      description: {
-        component: `
-\`\`\`js
-import { TokenListInput } from '@spaced-out/ui-design-system/lib/components/TokenListInput';
-\`\`\`
-
-**TokenListInput** provides a user-friendly interface for entering and managing multiple values as tokens. Users can select from a dropdown menu or add their own custom entries (if enabled). This component is ideal for tagging, multi-select, and similar use cases.
-
-**Features:**
-- Add, remove, and manage tokens with ease
-- Supports both predefined and user-defined (arbitrary) options
-- Customizable option rendering (icons, custom components, etc.)
-- Configurable maximum token limit
-- Disabled and locked states for controlled usage
-- Helper and error text for enhanced user feedback
-
-**Props Overview:**
-- \`classNames\`: Custom class names for styling
-- \`clickAwayRef\`: Ref for click-away detection
-- \`disabled\`: Disables the input and menu
-- \`errorText\`: Error message below the input
-- \`focusOnMount\`: Auto-focus input on mount
-- \`helperText\`: Guidance below the input
-- \`inputValue\`: Current input value
-- \`inputPlaceholder\`: Placeholder for the input field
-- \`limit\`: Maximum number of tokens
-- \`locked\`: Locks the input and tokens
-- \`onChange\`: Callback for token changes
-- \`onInputBlur\`: Callback for input blur
-- \`onInputChange\`: Callback for input value change
-- \`onInputFocus\`: Callback for input focus
-- \`placeholder\`: Fallback placeholder for the input
-- \`size\`: Input size ("medium" or "small")
-- \`tabIndex\`: Tab index for the input
-- \`values\`: Selected tokens
-- \`menu\`: Dropdown menu props
-- \`onMenuOpen\`: Callback for menu open
-- \`onMenuClose\`: Callback for menu close
-- \`resolveTokenValue\`: Custom token renderer
-- \`inputProps\`: Additional input props
-
-**Usage Example:**
-
-\`\`\`jsx
-<TokenListInput
-  values={[{ key: 'react', label: 'React' }]}
-  onChange={setValues}
-  inputValue={input}
-  onInputChange={setInput}
-  inputPlaceholder="Add a tag"
-  limit={5}
-  helperText="Add up to 5 tags"
-  errorText=""
-  size="medium"
-  disabled={false}
-  locked={false}
-  menu={{
-    options: [
-      { key: 'react', label: 'React' },
-      { key: 'vue', label: 'Vue' },
-      { key: 'angular', label: 'Angular' },
-    ],
-  }}
-/>
-\`\`\`
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/TokenListInput/TokenListInput.jsx',
-    },
-  },
-};
-
-type TokenListOption = ((MenuOption) & {
-  arbitrary?: boolean;
-});
-
-export const _TokenListInput = (args: Props<TokenListOption>) => {
-  const options: Array<TokenListOption> = [
-    {key: '1', label: 'Option 1'},
-    {key: '2', label: 'Option 2'},
-    {key: '3', label: 'Option 3'},
-    {key: '4', label: 'Option 4'},
-  ];
-
-  const [values, setValues] = React.useState<Array<TokenListOption>>([
-    {label: 'apple', key: 'ap'},
-    {label: 'b', key: 'b'},
-  ]);
-
-  const [input, setInput] = React.useState('');
-  return (
-    <div className={css.tokenListWrapper}>
-      <TokenListInput
-        {...args}
-        values={values}
-        onChange={setValues}
-        inputValue={input}
-        onInputChange={setInput}
-        menu={{options}}
-      />
-    </div>
-  );
-};
-
-_TokenListInput.args = {
-  classNames: {wrapper: ''},
-};
-
-export const _TokenListInputWithError = (args: Props<TokenListOption>) => {
-  const options: Array<TokenListOption> = [
-    {key: '1', label: 'Eden Porter', iconLeft: 'user'},
-    {key: '2', label: 'Verda Rodgers', iconLeft: 'user'},
-    {key: '3', label: 'Paisley Badman', iconLeft: 'user'},
-    {key: '4', label: 'Miranda Black', iconLeft: 'user'},
-    {key: '5', label: 'Pamela Fennimore', iconLeft: 'user'},
-    {key: '6', label: 'Geneva Rhodes', iconLeft: 'user'},
-    {key: '7', label: 'Rolf Kim', iconLeft: 'user'},
-    {key: '8', label: 'Marsh Saunders', iconLeft: 'user'},
-    {key: '9', label: 'Prunella Webb', iconLeft: 'user'},
-    {key: '10', label: 'Andy Mullins', iconLeft: 'user'},
-    {key: '11', label: 'Jade Watkins', iconLeft: 'user'},
-    {key: '12', label: 'Wally Wolfe', iconLeft: 'user'},
-    {key: '13', label: 'Misty Lipsey', iconLeft: 'user'},
-    {key: '14', label: 'Dwight Gibbs', iconLeft: 'user'},
-    {key: '15', label: 'Ronald Rhodes', iconLeft: 'user'},
-  ];
-
-  const [values, setValues] = React.useState<Array<TokenListOption>>([]);
-  const [input, setInput] = React.useState('');
-  const onChangeHandler = (newValues: Array<TokenListOption>) => {
-    setValues(newValues);
-  };
-
-  return (
-    <div className={css.tokenListWrapper}>
-      <TokenListInput
-        {...args}
-        menu={{options}}
-        values={values}
-        onChange={onChangeHandler}
-        errorText={'This is an error'}
-        helperText="Hint text for the users"
-        inputValue={input}
-        onInputChange={setInput}
-      />
-    </div>
-  );
-};
-
-export const _TokenListInputLocked = (args: Props<TokenListOption>) => {
-  const values: Array<TokenListOption> = [
-    {key: '1', label: 'Eden Porter', iconLeft: 'user'},
-    {key: '2', label: 'Verda Rodgers', iconLeft: 'user'},
-    {key: '3', label: 'Paisley Badman', iconLeft: 'user'},
-    {key: '4', label: 'Miranda Black', iconLeft: 'user'},
-    {key: '5', label: 'Pamela Fennimore', iconLeft: 'user'},
-    {key: '6', label: 'Geneva Rhodes', iconLeft: 'user'},
-    {key: '7', label: 'Rolf Kim', iconLeft: 'user'},
-    {key: '8', label: 'Marsh Saunders', iconLeft: 'user'},
-  ];
-  const [input, setInput] = React.useState('');
-  return (
-    <div className={css.tokenListWrapper}>
-      <TokenListInput
-        {...args}
-        values={values}
-        inputValue={input}
-        onInputChange={setInput}
-      />
-    </div>
-  );
-};
-
-_TokenListInputLocked.args = {
-  locked: true,
-};
-
-export const _TokenListInputDisabled = (args: Props<TokenListOption>) => {
-  const values: Array<TokenListOption> = [
-    {key: '1', label: 'Eden Porter', iconLeft: 'user'},
-    {key: '2', label: 'Verda Rodgers', iconLeft: 'user'},
-    {key: '3', label: 'Paisley Badman', iconLeft: 'user'},
-    {key: '4', label: 'Miranda Black', iconLeft: 'user'},
-    {key: '5', label: 'Pamela Fennimore', iconLeft: 'user'},
-    {key: '6', label: 'Geneva Rhodes', iconLeft: 'user'},
-    {key: '7', label: 'Rolf Kim', iconLeft: 'user'},
-    {key: '8', label: 'Marsh Saunders', iconLeft: 'user'},
-  ];
-  const [input, setInput] = React.useState('');
-  return (
-    <div className={css.tokenListWrapper}>
-      <TokenListInput
-        {...args}
-        values={values}
-        inputValue={input}
-        onInputChange={setInput}
-      />
-    </div>
-  );
-};
-
-_TokenListInputDisabled.args = {
-  classNames: {wrapper: css.tokenListInputWrapper},
-  disabled: true,
-};
-
-const TokenListInputGroupWrap = (args: Props<TokenListOption>) => {
-  const [values, setValues] = React.useState<Array<TokenListOption>>([
-    {label: 'apple', key: 'app'},
-    {label: 'banana', key: 'ban'},
-  ]);
-  const [inputValue, setInputValue] = React.useState('');
-  const { filteredGroupTitleOptions } = useFilteredOptions({
-    searchTerm: inputValue,
-// @ts-ignore - TS2322 - Type 'TokenGroupTitleOption<TokenListOption>[] | undefined' is not assignable to type 'GroupTitleOption<TokenListOption>[] | undefined'.
-    groupTitleOptions: args.menu?.groupTitleOptions,
-    excludedKeys: values.map((value) => value.key),
-  });
-  const { groupTitleOptionsWithArbitrary } = useArbitraryOptionAddition({
-    searchTerm: inputValue,
-    groupTitleOptions: filteredGroupTitleOptions,
-    excludedKeys: values.map((value) => value.key),
-    makeArbitraryValue: (value) => ({
-      key: value,
-      label: value,
-      arbitrary: true,
-    }),
-  });
-  return (
-    <div className={css.tokenListWrapper}>
-      <TokenListInput
-        {...args}
-        inputValue={inputValue}
-        onInputChange={setInputValue}
-        values={values}
-        onChange={setValues}
-        menu={{
-          groupTitleOptions: groupTitleOptionsWithArbitrary,
-          resolveLabel: (option: TokenListOption) => {
-            if (option.arbitrary && option.label) {
-              return `Create New "${option.label}"`;
-            }
-            return option.label || '';
-          },
-        }}
-      />
-    </div>
-  );
-};
-
-export const _TokenListInputGroup = (args: Props<TokenListOption>) => <TokenListInputGroupWrap {...args} />;
-
-_TokenListInputGroup.args = {
-  menu: {
-    groupTitleOptions: [
-      {
-        groupTitle: () => (<div className={css.titleWrapper}>
-          <FormLabelSmall color="tertiary">Fast Food</FormLabelSmall>
-          <div className={css.infoContainer}>
-            <Tooltip title="Hello!" elevation="menu">
-              <Icon name="circle-info" size="small" color="tertiary" />
-            </Tooltip>
-          </div>
-        </div>),
-        options: [
-          {
-            key: 'burger',
-            iconLeft: 'burger',
-            label: 'Burger',
-          },
-          {
-            key: 'pizza',
-            iconLeft: 'pizza',
-            label: 'Pizza',
-          },
-          {
-            key: 'fries',
-            iconLeft: 'french-fries',
-            label: 'Fries',
-          },
-        ],
-      },
-      {
-        showLineDivider: true,
-        groupTitle: ((<div className={css.titleWrapper}>
-          <FormLabelSmall color="tertiary">Fruits</FormLabelSmall>
-          <div className={css.infoContainer}>
-            <Tooltip title="Hello!" elevation="menu">
-              <Icon name="circle-info" size="small" color="tertiary" />
-            </Tooltip>
-          </div>
-        </div>) as React.ReactNode),
-        options: [
-          {
-            key: 'banana',
-            iconLeft: 'banana',
-            label: 'Banana',
-          },
-          {
-            key: 'pear',
-            iconLeft: 'pear',
-            label: 'Pear',
-          },
-          {
-            key: 'lemon',
-            iconLeft: 'lemon',
-            label: 'Lemon',
-          },
-        ],
-      },
-    ],
-  },
-};
-
-const CustomOptionTokenListInput = (args: Props<TokenListOption>) => {
-  const options = [
-    {
-      key: '1',
-      label: 'Mango',
-      customComponent: (
-        <div className={css.titleWrapper}>
-          <FormLabelSmall color="tertiary">Mango</FormLabelSmall>
-          <div className={css.infoContainer}>
-            <Tooltip title="Hello!" elevation="menu">
-              <Icon
-                name="circle-info"
-                size="large"
-                color="success"
-                type="duotone"
-              />
-            </Tooltip>
-          </div>
-        </div>
-      ),
-    },
-    {
-      key: '2',
-      label: 'Watermelon',
-      customComponent: (
-        <div className={css.titleWrapper}>
-          <FormLabelSmall color="tertiary">Watermelon</FormLabelSmall>
-          <div className={css.infoContainer}>
-            <Tooltip title="Hello!" elevation="menu">
-              <Icon
-                name="circle-info"
-                size="large"
-                color="danger"
-                type="duotone"
-              />
-            </Tooltip>
-          </div>
-        </div>
-      ),
-    },
-    {key: '3', label: 'Option 3'},
-    {key: '4', label: 'Option 4'},
-  ];
-
-  const [values, setValues] = React.useState([
-    {label: 'apple', key: 'a'},
-    {label: 'b', key: 'b'},
-  ]);
-
-  const [input, setInput] = React.useState('');
-
-  return (
-    <div className={css.tokenListWrapper}>
-{ /* @ts-ignore - TS2322 - Type '{ inputValue: string; onInputChange: Dispatch<SetStateAction<string>>; values: { label: string; key: string; }[]; onChange: Dispatch<SetStateAction<{ label: string; key: string; }[]>>; ... 21 more ...; elevation?: string | undefined; }' is not assignable to type 'Props<{ label: string; key: string; }>'. */}
-      <TokenListInput
-        {...args}
-        inputValue={input}
-        onInputChange={setInput}
-        values={values}
-        onChange={setValues}
-        menu={{options}}
-      />
-    </div>
-  );
-};
-
-export const _CustomOptionTokenListInput = (args: Props<TokenListOption>) => <CustomOptionTokenListInput {...args} />;
-
-export const _AllowArbitraryValues = (args: Props<TokenListOption>) => {
-  const [values, setValues] = React.useState<Array<TokenListOption>>([]);
-  const [inputValue, setInputValue] = React.useState('');
-  const { filteredOptions } = useFilteredOptions({
-    searchTerm: inputValue,
-    options: args.menu?.options,
-    excludedKeys: values.map((value) => value.key),
-  });
-  const { optionsWithArbitrary } = useArbitraryOptionAddition({
-    searchTerm: inputValue,
-    options: filteredOptions,
-    excludedKeys: values.map((value) => value.key),
-    makeArbitraryValue: (value) => ({
-      key: value,
-      label: value,
-      arbitrary: true,
-    }),
-  });
-  const clearHandler = () => {
-    setValues([]);
-    setInputValue('');
-  };
-  return (
-    <div className={css.tokenListWrapper}>
-      <div className={css.tokenListHeader}>
-{ /* @ts-ignore - TS2322 - Type '{ children: Element; for: string; }' is not assignable to type 'DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>'. */}
-        <label for="token-list-input">
-          <FormLabelSmall color={TEXT_COLORS.secondary}>
-            Select Tokens
-          </FormLabelSmall>
-        </label>
-        {!args.disabled && !args.locked && values.length > 0 && (
-          <ButtonTextExtraSmallUnderline
-            color={TEXT_COLORS.clickable}
-            className={classify(css.clearAllButton, {})}
-// @ts-ignore - TS2769 - No overload matches this call.
-            onClick={() => {
-              clearHandler();
-            }}
-// @ts-ignore - TS7006 - Parameter 'e' implicitly has an 'any' type.
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                clearHandler();
-              }
-            }}
-            tabIndex={0}
-          >
-            Clear all
-          </ButtonTextExtraSmallUnderline>
-        )}
-      </div>
-      <TokenListInput
-        {...args}
-        values={values}
-        inputValue={inputValue}
-        onInputChange={setInputValue}
-        onChange={(newValues: Array<TokenListOption>) => {
-          setValues(newValues);
-          setInputValue('');
-        }}
-        menu={{
-          options: (optionsWithArbitrary as Array<TokenListOption>),
-          resolveLabel: (option: TokenListOption) => {
-            if (option.arbitrary && option.label) {
-              return `Create New \"${option.label}\"`;
-            }
-            return option.label || '';
-          },
-        }}
-        inputProps={{
-// @ts-ignore - TS2322 - Type '{ id: string; }' is not assignable to type 'InputProps'.
-          id: 'token-list-input',
-        }}
-      />
-    </div>
-  );
-};
-_AllowArbitraryValues.args = {
-  menu: {
-    options: [
-      {key: '1', label: 'Option 1'},
-      {key: '2', label: 'Option 2'},
-      {key: '3', label: 'Option 3'},
-    ],
-  },
-  disabled: false,
-  locked: false,
-};