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

package/lib/components/Typeahead/SimpleTypeahead.stories.tsx

@@ -1,567 +0,0 @@
-import * as React from 'react';
-
-import {useDebounce} from '../../hooks/useDebounce';
-import type {MenuOption} from '../Menu';
-import {MenuFooter, MenuHeader} from '../Menu/Menu.stories';
-import {ELEVATION_TYPES} from '../Tooltip';
-
-import type {SimpleTypeaheadProps} from './SimpleTypeahead';
-import {SimpleTypeahead} from './SimpleTypeahead';
-
-import css from './Typeahead.stories.module.css';
-
-
-const DEFAULT_LIMIT = 10;
-const DEFAULT_OFFSET = 0;
-const elevationOptions: Array<unknown> = [...Object.values(ELEVATION_TYPES)];
-
-export default {
-  tags: ['autodocs'],
-  title: 'Form Components/Typeahead/Simple Typeahead',
-  component: SimpleTypeahead,
-  argTypes: {
-    size: {
-      description:
-        'Typeahead supports only two size variants namely small and medium. `small` < `medium`',
-      options: ['medium', 'small'],
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    onSearch: {
-      description:
-        '**onSearch** handler is triggered when there change in the input value',
-      action: 'Searched',
-      table: {
-        type: {
-          summary: '(evt: SyntheticInputEvent<HTMLInputElement>) => mixed',
-        },
-      },
-    },
-    options: {
-      description: 'Options to be displayed in typeahead',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: 'Array<MenuOption>'},
-      },
-    },
-    elevation: {
-      description:
-        'This is passed to Typeahead. 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'},
-      },
-    },
-    name: {
-      description: 'Name of the Typeahead',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    disabled: {
-      description: 'if **true**, the component is disabled',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-    placeholder: {
-      description:
-        'Placeholder of typeahead. 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 typeahead',
-      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 typeahead. This appears on top of typeahead input',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    helperText: {
-      description:
-        'Secondary label of the typeahead. This appears on bottom of typeahead input, if the typeahead 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'},
-      },
-    },
-    classNames: {
-      description: 'External classnames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: '{wrapper?: string, box?: string}'},
-      },
-    },
-    menuClassNames: {
-      description:
-        'External classnames to be applied to the menu. Wrapper gets applied to Menu wrapper and option gets applied to each option in the menu.',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary:
-            '{wrapper?: string, option?: string, groupTitle?: string, optionTextContainer?: string, optionTextLabel?: string}',
-        },
-      },
-    },
-    onSelect: {
-      description:
-        '**onSelect** handler is triggered when there is a selection of an option from typeahead',
-      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'},
-      },
-    },
-    menuOpenOffset: {
-      description:
-        'A number indicating how many characters are needed to open menu',
-      control: {
-        type: 'number',
-      },
-      table: {
-        type: {summary: 'number'},
-        defaultValue: {summary: 1},
-      },
-    },
-    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 typeahead is focussed',
-      action: 'focussed',
-      table: {
-        type: {summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'},
-      },
-    },
-    onBlur: {
-      description: '**onBlur** handler is triggered when typeahead is blurred',
-      action: 'blurred',
-      table: {
-        type: {summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'},
-      },
-    },
-    onClear: {
-      description: '**onClear** handler is triggered when typeahead is cleared',
-      action: 'blurred',
-      table: {
-        type: {summary: '() => mixed'},
-      },
-    },
-    selectedKeys: {
-      description:
-        'Selected keys corresponding to options. These options are shown as selected in UI',
-      control: {
-        type: 'array',
-      },
-      table: {
-        type: {summary: 'Array<string>'},
-      },
-    },
-    resolveLabel: {
-      description:
-        'A function that resolves the label for a MenuOption. This is useful when you want to customize the label of an option based on some condition',
-      table: {
-        type: {
-          summary: '(option: MenuOption) => string | React.ReactNode',
-        },
-      },
-    },
-    resolveSecondaryLabel: {
-      description:
-        'A function that resolves the secondary label for a MenuOption. This is useful when you want to customize the secondary label of an option based on some condition',
-      table: {
-        type: {
-          summary: '(option: MenuOption) => string | React.ReactNode',
-        },
-      },
-    },
-    menuVirtualization: {
-      description: `If **Enabled**, the options will only be rendered when they are within the component's viewport. **menuHeight and itemHeight** accept numerical input, interpreted as pixel values.`,
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary:
-            '{enable: boolean, menuHeight?: number, itemHeight?: number}',
-        },
-      },
-    },
-    header: {
-      description: 'Custom Header For the Menu',
-      table: {
-        type: {
-          summary: 'React.ReactNode',
-        },
-      },
-    },
-    footer: {
-      description: 'Custom Header For the Menu',
-      table: {
-        type: {
-          summary: 'React.ReactNode',
-        },
-      },
-    },
-    clickAwayRef: {
-      type: {optional: true},
-      description: 'ref that contains the functions to open or close the child',
-      table: {
-        type: {
-          summary: 'ClickAwayRefType',
-        },
-      },
-    },
-    allowInternalFilter: {
-      description:
-        'Allows the **MenuOptions** to be filtered internally based on the **label** of each option. When this is set to false, the internal filtering mechanism that matches options against the search text is skipped. This means it assumes that the **MenuOptions** has already been filtered externally and will display the provided options as they are without any further processing.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: true},
-      },
-    },
-    showLabelTooltip: {
-      description: 'Show Tooltip on the label of the menu option if truncated',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: 'MenuLabelTooltip'},
-      },
-    },
-    allowWrap: {
-      description:
-        'Allows the label to wrap up to 3 lines. If truncated, a tooltip will display up to 10 lines.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: false},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a Typeahead component',
-      description: {
-        component: `
-\`\`\`js
-import { SimpleTypeahead } from "@spaced-out/ui-design-system/lib/components/Typeahead";
-\`\`\`
-**SimpleTypeahead** 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.
-
-- **SimpleTypeahead** serially spreads out BaseMenuProps, meaning it would accept options as a prop instead of whole Menu.
-- **SimpleTypeahead** would have implicit label selection behavior built in, meaning if you select an option the
-label would get auto populated for the component itself.
-- The component maintains an internal state for selections. You can always override it with explicit **selectedKeys**
-prop which changes on **onSelect** callback.
-- You can always get the most recent instance of selected options from ref by using \`ref.current?.selectedKeys\`. This might be useful when you have
-options which are multi-select.
-- The component also supports custom **header** as \`React Component\` and this is then passed in
-the **<a href="../?path=/docs/components-menu--docs">Menu</a>** Component.
-- The component also supports custom **footer** as \`React Component\` and this is then passed in
-the **<a href="../?path=/docs/components-menu--docs">Menu</a>** Component. This might be useful when you need
-to save some state in the parent component.
-
-- Supports passing a \`clickAwayRef\` prop to the component.
-- You can always force Open the dropdown 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 dropdown from ref by using \`clickAwayRef.current?.forceClose()\`. This might be useful when want to force Close as per you needs.
-
-**Purpose:** The Typeahead component is designed to enhance performance and user experience by initially displaying a limited set of menu options (e.g., most popular or recently used items). Once the user begins typing into the input field, the component dynamically queries the API and displays all matching results based on the input text. This approach minimizes initial load time while ensuring that users can still access the full range of options through search-driven filtering.
-
-For checkbox type options you can get the latest instance of selected Keys from the component itself.
-
-\`\`\`jsx
-export const _BasicSimpleTypeahead = (args: SimpleTypeaheadProps): React.ReactNode => {
-  const clickAwayRef = React.useRef(null);
-  const [inputText, setInputText] = React.useState('');
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [menuOptions, setMenuOptions] = React.useState([]);
-
-  const debouncedInputText = useDebounce(inputText, 500);
-
-  const fetchData = async () => {
-    setIsLoading(true);
-    const newOptions = await getPaginatedData(
-      debouncedInputText,
-      DEFAULT_OFFSET,
-      DEFAULT_LIMIT,
-    );
-    setMenuOptions(newOptions);
-    setIsLoading(false);
-  };
-
-  React.useEffect(() => {
-    fetchData();
-  }, [debouncedInputText]);
-
-  return (
-    <div className={css.typeaheadWrapper}>
-      <SimpleTypeahead
-        {...args}
-        options={menuOptions}
-        onClear={() => setInputText('')}
-        onSearch={(e) => setInputText(e.target.value)}
-        onSelect={({label}) => setInputText(label || '')}
-        isLoading={isLoading}
-        clickAwayRef={clickAwayRef}
-        menuVirtualization={{enable: true}}
-        typeaheadInputText={inputText}
-        allowInternalFilter={false}
-      />
-    </div>
-  );
-}
-\`\`\`
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/Typeahead/Typeahead.jsx',
-    },
-  },
-};
-
-const options: MenuOption[] = [
-  {
-    key: '1',
-    label: 'Option one',
-    iconLeft: 'coffee',
-  },
-  {key: '2', label: 'Option two', iconLeft: 'user'},
-  {
-    key: '4',
-    label:
-      'Option three this is a very long option that would truncate, and it continues even further to demonstrate how the text will behave when it exceeds the typical display width of the dropdown or typeahead component, ensuring that truncation, ellipsis, or wrapping is handled gracefully by the UI.',
-    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',
-  },
-];
-
-export const _BasicTypeahead = (args: SimpleTypeaheadProps) => (<div className={css.typeaheadWrapper}>
-  <div className={css.content}>
-    <SimpleTypeahead {...args} />
-  </div>
-</div>);
-
-_BasicTypeahead.args = {
-  label: 'Form Label',
-  options,
-};
-
-export const _TypeaheadWithTooltipOptions = (args: SimpleTypeaheadProps) => (<div className={css.typeaheadWrapper}>
-  <div className={css.content}>
-    <SimpleTypeahead {...args} />
-  </div>
-</div>);
-
-_TypeaheadWithTooltipOptions.args = {
-  label: 'Form Label',
-  options,
-  showLabelTooltip: {maxLines: 10},
-};
-
-export const _WithHeaderAndFooter = (args: SimpleTypeaheadProps) => {
-  const clickAwayRef = React.useRef(null);
-
-  const onSave = () => {
-    if (clickAwayRef.current) {
-// @ts-ignore - TS2339 - Property 'forceClose' does not exist on type 'never'.
-      clickAwayRef.current.forceClose();
-    }
-  };
-  return (
-    <div className={css.typeaheadWrapper}>
-      <div className={css.content}>
-        <SimpleTypeahead
-          {...args}
-          header={<MenuHeader />}
-          footer={<MenuFooter onSave={onSave} />}
-          clickAwayRef={clickAwayRef}
-        />
-      </div>
-    </div>
-  );
-};
-
-_WithHeaderAndFooter.args = {
-  label: 'Form Label',
-  options,
-  isFluid: false,
-};
-
-const getPaginatedData = ({
-  limit,
-  offset,
-  searchText,
-}: {
-  limit: number;
-  offset: number;
-  searchText: string;
-}) =>
-  new Promise((resolve: (result: Promise<Array<MenuOption>> | Array<MenuOption>) => void) =>
-    setTimeout(() => {
-      const filteredOptions = options.filter((option) =>
-        option.label
-          ? option.label.toLowerCase().includes(searchText.toLowerCase())
-          : true,
-      );
-
-      resolve(filteredOptions.slice(offset, offset + limit));
-    }, 1000),
-  );
-
-export const _WithPaginationAndVirtualization = (args: SimpleTypeaheadProps) => {
-  const clickAwayRef = React.useRef(null);
-  const [inputText, setInputText] = React.useState('');
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [menuOptions, setMenuOptions] = React.useState([]);
-
-  const debouncedInputText = useDebounce(inputText, 500);
-
-  const fetchData = async () => {
-    setIsLoading(true);
-    const newOptions = await getPaginatedData({
-      limit: DEFAULT_LIMIT,
-      offset: DEFAULT_OFFSET,
-      searchText: debouncedInputText,
-    });
-// @ts-ignore - TS2345 - Argument of type 'MenuOption[]' is not assignable to parameter of type 'SetStateAction<never[]>'.
-    setMenuOptions(newOptions);
-    setIsLoading(false);
-  };
-
-  React.useEffect(() => {
-    fetchData();
-  }, [debouncedInputText]);
-
-  return (
-    <div className={css.typeaheadWrapper}>
-      <SimpleTypeahead
-        {...args}
-        options={menuOptions}
-        onClear={() => setInputText('')}
-        onSearch={(e) => setInputText(e.target.value)}
-        onSelect={({label}) => setInputText(label || '')}
-        isLoading={isLoading}
-        clickAwayRef={clickAwayRef}
-        menuVirtualization={{enable: true}}
-// @ts-ignore - TS2769 - No overload matches this call.
-        typeaheadInputText={inputText}
-        allowInternalFilter={false}
-      />
-    </div>
-  );
-};
-
-_WithPaginationAndVirtualization.args = {
-  label: 'Search a name',
-  menuOpenOffset: 0,
-};