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

package/lib/components/Dropdown/Dropdown.stories.tsx

@@ -1,785 +0,0 @@
-import * as React from 'react';
-
-import {
-  getSelectedKeysFromSelectedOption,
-  getTextLabelFromSelectedKeys,
-} from '../../utils/menu';
-import {Button} from '../Button';
-import {Icon} from '../Icon';
-import type {MenuGroupTitleOption, MenuOption, MenuProps} from '../Menu';
-import {MenuFooter, MenuHeader} from '../Menu/Menu.stories';
-import {FormLabelSmall} from '../Text';
-import {ELEVATION_TYPES, Tooltip} from '../Tooltip';
-
-import type {DropdownProps} from './Dropdown';
-import {Dropdown} from './Dropdown';
-
-import css from './Dropdown.stories.module.css';
-
-
-const options: MenuOption[] = [
-  {
-    key: '1',
-    label: 'Option one',
-    iconLeft: 'coffee',
-  },
-  {key: '2', label: 'Option two', iconLeft: 'user'},
-  {
-    key: '4',
-    label:
-      'Option three is a very long option that would truncate and keep going to make it even longer than before. You can hover over the label to see the full text. ShowLabelTooltip maxLines is used to define the number of lines to show in the tooltip.',
-    iconLeft: 'face-party',
-  },
-  {
-    key: '5',
-    label: 'Option five(disabled)',
-    disabled: true,
-    iconLeft: 'flag',
-  },
-  {
-    key: '6',
-    label: 'Option six(disabled) very long option that would truncate',
-    disabled: true,
-    iconLeft: 'camera',
-  },
-  {
-    key: '7',
-    label: 'Option seven',
-    iconLeft: 'coffee',
-  },
-  {key: '8', label: 'Option eight', iconLeft: 'user'},
-  {
-    key: '9',
-    label: 'Option nine',
-    iconLeft: 'face-party',
-  },
-];
-
-const elevationOptions: Array<unknown> = [...Object.values(ELEVATION_TYPES)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Form Components/Dropdown/Generic Dropdown',
-  component: Dropdown,
-  argTypes: {
-    size: {
-      description:
-        'Dropdown supports only two size variants namely small and medium. `small` < `medium`',
-      options: ['medium', 'small'],
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    menu: {
-      description: 'Menu props to use',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: 'MenuProps'},
-      },
-    },
-    name: {
-      description: 'Name of the Dropdown',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    elevation: {
-      description:
-        'Elevation level for the dropdown menu. This 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'},
-      },
-    },
-    disabled: {
-      description: 'if **true**, the component is disabled',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    placeholder: {
-      description: 'Placeholder of dropdown. This appears inside the input box',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    locked: {
-      description:
-        'if **true**, the component is locked, Locked state is the readonly state of the dropdown',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    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'},
-      },
-    },
-    label: {
-      description:
-        'Primary label of the dropdown. This appears on top of dropdown input',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    helperText: {
-      description:
-        'Secondary label of the dropdown. This appears on bottom of dropdown input, if the dropdown is in `error` state the priority is given to `errorText`, in such cases secondary label wont be displayed',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    dropdownInputText: {
-      description:
-        'Text that appears inside the top input. Since Dropdown is a controlled component, this has to be set by caller',
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    classNames: {
-      description: 'External classnames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: '{wrapper?: string, box?: string}'},
-      },
-    },
-    required: {
-      description: 'if **true**, a red star would be added to the label',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    onChange: {
-      description:
-        '**onChange** handler is triggered when there is a selection of an option from dropdown',
-      action: 'changed',
-      table: {
-        type: {
-          summary:
-            '(option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed',
-        },
-      },
-    },
-    onMenuOpen: {
-      description:
-        '**onMenuOpen** handler is triggered when menu is opened. This should be helpful in cases where you want to change Button icon / text on this trigger.',
-      action: 'clicked',
-      table: {
-        type: {summary: '() => mixed'},
-      },
-    },
-    onMenuClose: {
-      description:
-        '**onMenuClose** handler is triggered when menu is closed. This should be helpful in cases where you want to change Button icon / text on this trigger.',
-      action: 'clicked',
-      table: {
-        type: {summary: '() => mixed'},
-      },
-    },
-    onFocus: {
-      description: '**onFocus** handler is triggered when dropdown is focussed',
-      action: 'focussed',
-      table: {
-        type: {summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'},
-      },
-    },
-    onBlur: {
-      description: '**onBlur** handler is triggered when dropdown is blurred',
-      action: 'blurred',
-      table: {
-        type: {summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'},
-      },
-    },
-    clickAwayRef: {
-      type: {optional: true},
-      description: 'ref that contains the functions to open or close the child',
-      table: {
-        type: {
-          summary: 'ClickAwayRefType',
-        },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Dropdown component',
-      description: {
-        component: `
-\`\`\`js
-import { Dropdown } from "@spaced-out/ui-design-system/lib/components/Dropdown";
-\`\`\`
-**Dropdown** is implemented as a combination of **<a href="../?path=/docs/form-components-input--docs">Input</a>** and **<a href="../?path=/docs/components-menu--docs">Menu</a>**
-components. It internally uses **Floating UI** to
-position itself in context of DOM. Supports a bunch of callbacks listed below.
-This is a controlled component. You would need to pass and set \`selectedKeys\` and \`dropdownInputText\`  by handling \`onChange\` in order to set/reset the selection state
-of menu item and input value respectively.
-
-- Supports passing a \`clickAwayRef\` prop to the component.
-- You can always force Open the instance from ref by using \`clickAwayRef.current?.forceOpen()\`. This might be useful when want to force Open as per you needs.
-- You can always force Close the instance from ref by using \`clickAwayRef.current?.forceClose()\`. This might be useful when want to force Close as per you needs.
-
-**Note: ** For **checkbox** type option set you can make use of \`getSelectedKeysFromSelectedOption\` and \`getTextLabelFromSelectedKeys\` from \`utils/menu\`
-to populate \`selectedKeys\` and \`dropdownInputText\` respectively.
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Dropdown/Dropdown.jsx',
-    },
-  },
-};
-
-const menuProps: MenuProps = {
-  options,
-};
-
-export const _WithSimpleMenu = (args: DropdownProps) => {
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    args.menu?.selectedKeys || [],
-  );
-  const [dropDownText, setDropdownText] = React.useState(
-    args.dropdownInputText,
-  );
-
-  const handleChange = (option: MenuOption) => {
-    setSelectedKeys([option.key]);
-    setDropdownText(option.label);
-  };
-
-  const onClear = () => {
-    setSelectedKeys([]);
-    setDropdownText('');
-  };
-  return (
-    <div className={css.dropdownWrapper}>
-      <div className={css.content}>
-        <Dropdown
-          {...args}
-          dropdownInputText={dropDownText}
-          menu={{...args.menu, selectedKeys}}
-// @ts-ignore - TS2769 - No overload matches this call.
-          onChange={handleChange}
-        />
-        <Button type="secondary" onClick={onClear}>
-          Clear
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-_WithSimpleMenu.args = {
-  label: 'Form Label',
-  menu: menuProps,
-};
-
-export const _WithSimpleMenuTooltip = (args: DropdownProps) => {
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    args.menu?.selectedKeys || [],
-  );
-  const [dropDownText, setDropdownText] = React.useState(
-    args.dropdownInputText,
-  );
-
-  const handleChange = (option: MenuOption) => {
-    setSelectedKeys([option.key]);
-    setDropdownText(option.label);
-  };
-
-  const onClear = () => {
-    setSelectedKeys([]);
-    setDropdownText('');
-  };
-  return (
-    <div className={css.dropdownWrapper}>
-      <div className={css.content}>
-        <Dropdown
-          {...args}
-          dropdownInputText={dropDownText}
-          menu={{...args.menu, selectedKeys}}
-// @ts-ignore - TS2769 - No overload matches this call.
-          onChange={handleChange}
-        />
-        <Button type="secondary" onClick={onClear}>
-          Clear
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-_WithSimpleMenuTooltip.args = {
-  label: 'Form Label',
-  menu: {...menuProps, showLabelTooltip: {maxLines: 6}},
-};
-
-export const _WithSearch = (args: DropdownProps) => {
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    args.menu?.selectedKeys || [],
-  );
-  const [dropDownText, setDropdownText] = React.useState(
-    args.dropdownInputText,
-  );
-
-  const handleChange = (option: MenuOption) => {
-    setSelectedKeys([option.key]);
-    setDropdownText(option.label);
-  };
-
-  const onClear = () => {
-    setSelectedKeys([]);
-    setDropdownText('');
-  };
-  return (
-    <div className={css.dropdownWrapper}>
-      <div className={css.content}>
-        <Dropdown
-          {...args}
-          dropdownInputText={dropDownText}
-          menu={{...args.menu, selectedKeys}}
-// @ts-ignore - TS2769 - No overload matches this call.
-          onChange={handleChange}
-        />
-        <Button type="secondary" onClick={onClear}>
-          Clear
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-_WithSearch.args = {
-  label: 'Form Label',
-
-  menu: {...menuProps, allowSearch: true},
-};
-
-const checkboxMenuProps: MenuProps = {
-  options,
-  optionsVariant: 'checkbox',
-  selectedKeys: ['4'],
-};
-
-export const _WithCheckboxMenu = (args: DropdownProps) => {
-  const [dropDownText, setDropdownText] = React.useState(
-    args.dropdownInputText,
-  );
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    args.menu?.selectedKeys || [],
-  );
-
-  React.useEffect(() => {
-    setSelectedKeys(args.menu?.selectedKeys || []);
-    const newDropdownText = getTextLabelFromSelectedKeys(
-      args.menu?.selectedKeys,
-      args.menu?.options,
-    );
-    setDropdownText(newDropdownText);
-  }, [args.menu?.selectedKeys]);
-
-  const handleChange = (option: MenuOption) => {
-    const newSelectedKeys = getSelectedKeysFromSelectedOption(
-      option,
-      selectedKeys,
-    );
-    const newDropdownText = getTextLabelFromSelectedKeys(
-      newSelectedKeys,
-      args.menu?.options,
-    );
-    setSelectedKeys(newSelectedKeys);
-    setDropdownText(newDropdownText);
-  };
-
-  const onClear = () => {
-    setSelectedKeys([]);
-    setDropdownText('');
-  };
-
-  return (
-    <div className={css.dropdownWrapper}>
-      <div className={css.content}>
-        <Dropdown
-          {...args}
-          dropdownInputText={dropDownText}
-          menu={{...args.menu, selectedKeys}}
-// @ts-ignore - TS2769 - No overload matches this call.
-          onChange={handleChange}
-        />
-        <Button type="secondary" onClick={onClear}>
-          Clear
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-_WithCheckboxMenu.args = {
-  label: 'Form Label',
-
-  menu: checkboxMenuProps,
-};
-
-const radioMenuProps: MenuProps = {
-  options,
-  optionsVariant: 'radio',
-  selectedKeys: ['2'],
-};
-
-export const _WithRadioMenu = (args: DropdownProps) => {
-  const [dropDownText, setDropdownText] = React.useState(
-    args.dropdownInputText,
-  );
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    args.menu?.selectedKeys || [],
-  );
-
-  React.useEffect(() => {
-    setSelectedKeys(args.menu?.selectedKeys || []);
-  }, [args.menu?.selectedKeys]);
-
-  const handleChange = (option: MenuOption) => {
-    setSelectedKeys([option.key]);
-    setDropdownText(option.label);
-  };
-
-  const onClear = () => {
-    setSelectedKeys([]);
-    setDropdownText('');
-  };
-  return (
-    <div className={css.dropdownWrapper}>
-      <div className={css.content}>
-        <Dropdown
-          {...args}
-          dropdownInputText={dropDownText}
-          menu={{...args.menu, selectedKeys}}
-// @ts-ignore - TS2769 - No overload matches this call.
-          onChange={handleChange}
-        />
-        <Button type="secondary" onClick={onClear}>
-          Clear
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-_WithRadioMenu.args = {
-  label: 'Form Label',
-  menu: radioMenuProps,
-};
-
-const composeOptions: Array<Array<MenuOption>> = [
-  [
-    {
-      key: '1',
-      label: 'Option one',
-      secondaryLabel: 'Sub Text',
-    },
-    {
-      key: '2',
-      label: 'Option two',
-      secondaryLabel: 'Sub Text',
-    },
-    {
-      key: '3',
-      label: 'Option three',
-      secondaryLabel: 'Sub Text',
-    },
-  ],
-  [
-    {
-      iconLeft: 'coffee',
-      key: '4',
-      label: 'Option one',
-    },
-  ],
-  [
-    {
-      iconLeft: 'coffee',
-      key: '5',
-      label: 'Option one',
-    },
-  ],
-];
-
-const composeMenuProps: MenuProps = {
-  composeOptions,
-};
-
-export const _WithComposeMenu = (args: DropdownProps) => {
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    args.menu?.selectedKeys || [],
-  );
-  const [dropDownText, setDropdownText] = React.useState(
-    args.dropdownInputText,
-  );
-
-  const handleChange = (option: MenuOption) => {
-    setSelectedKeys([option.key]);
-    setDropdownText(option.label);
-  };
-
-  const onClear = () => {
-    setSelectedKeys([]);
-    setDropdownText('');
-  };
-  return (
-    <div className={css.dropdownWrapper}>
-      <div className={css.content}>
-        <Dropdown
-          {...args}
-          dropdownInputText={dropDownText}
-          menu={{...args.menu, selectedKeys}}
-// @ts-ignore - TS2769 - No overload matches this call.
-          onChange={handleChange}
-        />
-        <Button type="secondary" onClick={onClear}>
-          Clear
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-_WithComposeMenu.args = {
-  label: 'Form Label',
-  menu: composeMenuProps,
-};
-
-const groupTitleOptions: Array<MenuGroupTitleOption> = [
-  {
-    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: '1',
-        iconLeft: 'burger',
-        label: 'Burger',
-      },
-      {
-        key: '2',
-        iconLeft: 'pizza',
-        label: 'Pizza',
-      },
-      {
-        key: '3',
-        iconLeft: 'french-fries',
-        label: 'Fries',
-      },
-    ],
-  },
-  {
-    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>
-    ),
-    options: [
-      {
-        key: '7',
-        iconLeft: 'banana',
-        label: 'Banana',
-      },
-      {
-        key: '8',
-        iconLeft: 'pear',
-        label: 'Pear',
-      },
-      {
-        key: '9',
-        iconLeft: 'lemon',
-        label: 'Lemon',
-      },
-    ],
-  },
-];
-
-const groupTitleMenuProps: MenuProps = {
-  groupTitleOptions,
-};
-
-export const _WithGroupTitleMenu = (args: DropdownProps) => {
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    args.menu?.selectedKeys || [],
-  );
-  const [dropDownText, setDropdownText] = React.useState(
-    args.dropdownInputText,
-  );
-
-  const handleChange = (option: MenuOption) => {
-    setSelectedKeys([option.key]);
-    setDropdownText(option.label);
-  };
-
-  const onClear = () => {
-    setSelectedKeys([]);
-    setDropdownText('');
-  };
-  return (
-    <div className={css.dropdownWrapper}>
-      <div className={css.content}>
-        <Dropdown
-          {...args}
-          dropdownInputText={dropDownText}
-          menu={{...args.menu, selectedKeys}}
-// @ts-ignore - TS2769 - No overload matches this call.
-          onChange={handleChange}
-        />
-        <Button type="secondary" onClick={onClear}>
-          Clear
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-_WithGroupTitleMenu.args = {
-  label: 'Form Label',
-
-  menu: {...groupTitleMenuProps},
-};
-
-export const _WithHeaderAndFooter = (args: DropdownProps) => (<WithHeaderAndFooter {...args} />);
-
-export const WithHeaderAndFooter = (args: DropdownProps) => {
-  const clickAwayRef = React.useRef(null);
-  const [dropDownText, setDropdownText] = React.useState(
-    args.dropdownInputText,
-  );
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    args.menu?.selectedKeys || [],
-  );
-
-  React.useEffect(() => {
-    setSelectedKeys(args.menu?.selectedKeys || []);
-    const newDropdownText = getTextLabelFromSelectedKeys(
-      args.menu?.selectedKeys,
-      args.menu?.options,
-    );
-    setDropdownText(newDropdownText);
-  }, [args.menu?.selectedKeys]);
-
-  const handleChange = (option: MenuOption) => {
-    const newSelectedKeys = getSelectedKeysFromSelectedOption(
-      option,
-      selectedKeys,
-    );
-    const newDropdownText = getTextLabelFromSelectedKeys(
-      newSelectedKeys,
-      args.menu?.options,
-    );
-    setSelectedKeys(newSelectedKeys);
-    setDropdownText(newDropdownText);
-  };
-
-  const onClear = () => {
-    setSelectedKeys([]);
-    setDropdownText('');
-  };
-
-  const onSave = () => {
-    if (clickAwayRef.current) {
-// @ts-ignore - TS2339 - Property 'forceClose' does not exist on type 'never'.
-      clickAwayRef.current.forceClose();
-    }
-  };
-
-  return (
-    <div className={css.dropdownWrapper}>
-      <div className={css.content}>
-        <Dropdown
-          {...args}
-          dropdownInputText={dropDownText}
-          menu={{
-            ...args.menu,
-            selectedKeys,
-            header: <MenuHeader />,
-            footer: <MenuFooter onSave={onSave} />,
-          }}
-// @ts-ignore - TS2769 - No overload matches this call.
-          onChange={handleChange}
-          clickAwayRef={clickAwayRef}
-        />
-        <Button type="secondary" onClick={onClear}>
-          Clear
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-const menuPropsWithHeaderAndFooter: MenuProps = {
-  options,
-  optionsVariant: 'checkbox',
-};
-
-_WithHeaderAndFooter.args = {
-  label: 'Form Label',
-  menu: menuPropsWithHeaderAndFooter,
-};