@loadsmart/loadsmart-ui 7.6.0 → 7.7.0-beta.1

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

@@ -1,780 +0,0 @@
-import React, { useCallback, useState } from 'react'
-import type { Story, Meta } from '@storybook/react'
-import { omit } from 'lodash'
-
-import { Label } from 'components/Label'
-import { Text } from 'components/Text'
-import { HighlightMatch } from 'components/HighlightMatch'
-import { Select } from 'components/Select'
-
-import {
-  useSyncFruits,
-  useAsyncUsers,
-  useAsyncCustomers,
-  FRUITS,
-  USERS,
-  CUSTOMERS,
-  Fruit,
-  User,
-} from './Select.fixtures'
-
-import type {
-  Option,
-  SelectComponentsOptionProps as SelectOptionProps,
-  SelectProps,
-} from './Select.types'
-import { useSelect } from '.'
-import generators from '../../tests/generator'
-
-export default {
-  title: 'Components/Select',
-  component: Select,
-  argTypes: {},
-} as Meta
-
-const OMITTED_PROPS = ['onCreate']
-
-export const Playground: Story<SelectProps> = (args: SelectProps) => {
-  return (
-    <div className="flex flex-col space-y-4">
-      <div className="flex flex-row space-x-4" style={{ width: 720 }}>
-        <div className="flex-1">
-          <Label htmlFor="select-playground">Select your favorite fruit</Label>
-          <Select
-            options={[...FRUITS]}
-            placeholder="Select sync"
-            {...omit(args, OMITTED_PROPS)}
-            id="select-playground"
-            name="select-playground"
-          />
-        </div>
-      </div>
-      <div className="text-sm" style={{ width: 720 }}>
-        <p>Available options:</p>
-        <code>{FRUITS.map(({ label }) => label).join(', ')}</code>
-      </div>
-    </div>
-  )
-}
-
-Playground.args = {
-  multiple: false,
-  autoFocus: true,
-}
-
-const SINGLE_SYNC_DATASOURCES = [useSyncFruits]
-export const SingleSyncDatasource: Story<SelectProps> = (args: SelectProps) => {
-  return (
-    <div className="flex flex-col space-y-4">
-      <div className="flex flex-row space-x-4" style={{ width: 720 }}>
-        <div className="flex-1">
-          <Label htmlFor="select-single-sync">Select your favorite fruit</Label>
-          <Select
-            placeholder="Select sync"
-            {...omit(args, OMITTED_PROPS)}
-            id="select-single-sync"
-            name="select-single-sync"
-            datasources={SINGLE_SYNC_DATASOURCES}
-          />
-        </div>
-      </div>
-      <div className="text-sm" style={{ width: 720 }}>
-        <p>Available options:</p>
-        <code>{FRUITS.map(({ label }) => label).join(', ')}</code>
-      </div>
-    </div>
-  )
-}
-
-SingleSyncDatasource.args = {
-  multiple: false,
-}
-
-const CustomOption = ({ value }: SelectOptionProps) => {
-  const select = useSelect()
-  const option = select.getOption(value)
-  const query = select.query
-  const { label, family } = option as Fruit
-
-  return (
-    <Select.Option value={value} data-testid="custom-option">
-      <div>
-        <HighlightMatch text={label} match={query} />
-        <Text as="div" color="color-neutral-dark" variant="caption">
-          family: {family}
-        </Text>
-      </div>
-    </Select.Option>
-  )
-}
-
-export const SingleCustomOptionRendering: Story<SelectProps> = (args: SelectProps) => {
-  return (
-    <div className="flex flex-col space-y-4">
-      <div className="flex flex-row space-x-4" style={{ width: 720 }}>
-        <div className="flex-1">
-          <Label htmlFor="select-custom-option">Select your favorite fruit</Label>
-          <Select
-            placeholder="Select with custom option"
-            {...args}
-            id="select-custom-option"
-            name="select-custom-option"
-            datasources={SINGLE_SYNC_DATASOURCES}
-          />
-        </div>
-      </div>
-      <div className="text-sm" style={{ width: 720 }}>
-        <p>Available options:</p>
-        <code>{FRUITS.map(({ label }) => label).join(', ')}</code>
-      </div>
-    </div>
-  )
-}
-
-SingleCustomOptionRendering.args = {
-  multiple: false,
-  components: { Option: CustomOption },
-}
-
-SingleCustomOptionRendering.parameters = {
-  docs: {
-    description: {
-      story: `
-\`\`\`jsx
-const Option = ({ value }: SelectOptionProps) => {
-  const select = useSelect()
-  const option = select.getOption(value)
-  const query = select.query
-  const { label, family } = option as Fruit
-
-  return (
-    <Select.Option value={value}>
-      <div>
-        <HighlightMatch text={label} match={query} />
-        <Text as="div" color="color-neutral-dark" variant="caption">
-          family: {family}
-        </Text>
-      </div>
-    </Select.Option>
-  )
-}
-\`\`\`
-      `,
-    },
-  },
-}
-
-const Empty = () => {
-  return <Select.Empty>No fruit found.</Select.Empty>
-}
-
-export const SingleCustomEmptyRendering: Story<SelectProps> = (args: SelectProps) => {
-  return (
-    <div className="flex flex-col space-y-4">
-      <div className="flex flex-row space-x-4" style={{ width: 720 }}>
-        <div className="flex-1">
-          <Label htmlFor="select-custom-empty">Select your favorite fruit</Label>
-          <Select
-            placeholder="Select with custom empty"
-            {...omit(args, OMITTED_PROPS)}
-            id="select-custom-empty"
-            name="select-custom-empyy"
-            datasources={SINGLE_SYNC_DATASOURCES}
-            components={{ Empty }}
-          />
-        </div>
-      </div>
-      <div className="text-sm" style={{ width: 720 }}>
-        <p>Available options:</p>
-        <code>{FRUITS.map(({ label }) => label).join(', ')}</code>
-      </div>
-    </div>
-  )
-}
-
-SingleCustomEmptyRendering.args = {
-  multiple: false,
-}
-
-SingleCustomEmptyRendering.parameters = {
-  docs: {
-    description: {
-      story: `
-\`\`\`jsx
-const Empty = () => {
-  return <Select.Empty>No fruit found.</Select.Empty>
-}
-\`\`\`
-      `,
-    },
-  },
-}
-
-const SINGLE_ASYNC_DATASOURCES = [useAsyncUsers]
-export const SingleAsyncDatasource: Story<SelectProps> = (args: SelectProps) => {
-  return (
-    <div className="flex flex-col space-y-4">
-      <div className="flex flex-row space-x-4" style={{ width: 720 }}>
-        <div className="flex-1">
-          <Label htmlFor="select-single-async">Select the project manager</Label>
-          <Select
-            placeholder="Select async"
-            {...omit(args, OMITTED_PROPS)}
-            id="select-single-async"
-            name="select-single-async"
-            datasources={SINGLE_ASYNC_DATASOURCES}
-          />
-        </div>
-      </div>
-      <div className="text-sm" style={{ width: 720 }}>
-        <p>Available options:</p>
-        <code>{USERS.map(({ name }) => name).join(', ')}</code>
-      </div>
-    </div>
-  )
-}
-
-SingleAsyncDatasource.args = {
-  multiple: false,
-}
-
-const SINGLE_MIXED_DATASOURCES = [useSyncFruits, useAsyncUsers]
-export const SingleMixedDatasources: Story<SelectProps> = (args: SelectProps) => {
-  return (
-    <div className="flex flex-col space-y-4">
-      <div className="flex flex-row space-x-4" style={{ width: 720 }}>
-        <div className="flex-1">
-          <Label htmlFor="select-mixed">Select your favorite fruit or the project manager</Label>
-          <Select
-            placeholder="Select mixed"
-            {...omit(args, OMITTED_PROPS)}
-            id="select-mixed"
-            name="select-mixed"
-            datasources={SINGLE_MIXED_DATASOURCES}
-          />
-        </div>
-      </div>
-      <div className="text-sm" style={{ width: 720 }}>
-        <p>Available options:</p>
-        <code>{FRUITS.map(({ label }) => label).join(', ')}</code>
-        <code>{USERS.map(({ name }) => name).join(', ')}</code>
-      </div>
-    </div>
-  )
-}
-
-SingleMixedDatasources.args = {
-  multiple: false,
-}
-
-const MULTI_SYNC_DATASOURCES = [useSyncFruits]
-export const MultiSyncDatasource: Story<SelectProps> = (args: SelectProps) => {
-  return (
-    <div className="flex flex-col space-y-4">
-      <div className="flex flex-row space-x-4" style={{ width: 720 }}>
-        <div className="flex-1">
-          <Label htmlFor="select-multi-sync">Select your favorite fruit</Label>
-          <Select
-            placeholder="Select multiple sync"
-            {...omit(args, OMITTED_PROPS)}
-            id="select-multi-sync"
-            name="select-multi-sync"
-            datasources={MULTI_SYNC_DATASOURCES}
-          />
-        </div>
-      </div>
-      <div className="text-sm" style={{ width: 720 }}>
-        <p>Available options:</p>
-        <code>{FRUITS.map(({ label }) => label).join(', ')}</code>
-      </div>
-    </div>
-  )
-}
-
-MultiSyncDatasource.args = {
-  multiple: true,
-}
-
-const MULTI_ASYNC_DATASOURCES = [useAsyncUsers]
-export const MultiAsyncDatasource: Story<SelectProps> = (args: SelectProps) => {
-  return (
-    <div className="flex flex-col space-y-4">
-      <div className="flex flex-row space-x-4" style={{ width: 720 }}>
-        <div className="flex-1">
-          <Label htmlFor="select-multi-async">Select the project manager</Label>
-          <Select
-            placeholder="Select multiple async"
-            {...omit(args, OMITTED_PROPS)}
-            id="select-multi-async"
-            name="select-multi-async"
-            datasources={MULTI_ASYNC_DATASOURCES}
-          />
-        </div>
-      </div>
-      <div className="text-sm" style={{ width: 720 }}>
-        <p>Available options:</p>
-        <code>{USERS.map(({ name }) => name).join(', ')}</code>
-      </div>
-    </div>
-  )
-}
-
-MultiAsyncDatasource.args = {
-  multiple: true,
-}
-
-const MULTI_MIXED_DATASOURCES = [useSyncFruits, useAsyncUsers]
-export const MultiMixedDatasource: Story<SelectProps> = (args: SelectProps) => {
-  return (
-    <div className="flex flex-col space-y-4">
-      <div className="flex flex-row space-x-4" style={{ width: 720 }}>
-        <div className="flex-1">
-          <Label htmlFor="select-multi-mixed">
-            Select your favorite fruit or the project manager
-          </Label>
-          <Select
-            placeholder="Select multiple mixed"
-            {...omit(args, OMITTED_PROPS)}
-            id="select-multi-mixed"
-            name="select-multi-mixed"
-            datasources={MULTI_MIXED_DATASOURCES}
-          />
-        </div>
-      </div>
-      <div className="text-sm" style={{ width: 720 }}>
-        <p>Available options:</p>
-        <code>{FRUITS.map(({ label }) => label).join(', ')}</code>
-        <code>{USERS.map(({ name }) => name).join(', ')}</code>
-      </div>
-    </div>
-  )
-}
-
-MultiMixedDatasource.args = {
-  multiple: true,
-}
-
-const VARIOUS_ASYNC_DATASOURCES = [useAsyncUsers, useAsyncCustomers]
-export const VariousAsyncDatasources: Story<SelectProps> = (args: SelectProps) => {
-  return (
-    <div className="flex flex-col space-y-4">
-      <div className="flex flex-row space-x-4" style={{ width: 720 }}>
-        <div className="flex-1">
-          <Label htmlFor="select-multi-async">Select the beneficiary</Label>
-          <Select
-            placeholder="Select async datasources"
-            {...omit(args, OMITTED_PROPS)}
-            id="select-multi-async"
-            name="select-multi-async"
-            datasources={VARIOUS_ASYNC_DATASOURCES}
-          />
-        </div>
-      </div>
-      <div className="text-sm" style={{ width: 720 }}>
-        <p>Available options:</p>
-        <code>{[...USERS, ...CUSTOMERS].map(({ name }) => name).join(', ')}</code>
-      </div>
-    </div>
-  )
-}
-
-VariousAsyncDatasources.args = {
-  multiple: false,
-}
-
-const MixedCustomOption = ({ value }: SelectOptionProps) => {
-  const select = useSelect()
-  const option = select.getOption(value) || {}
-  const query = select.query
-
-  let label
-  if (option._type === 'user') {
-    label = (option as User).name
-  } else {
-    label = (option as Fruit).label
-  }
-
-  return (
-    <Select.Option value={value} trailing={option._type === 'user' ? '🙂' : '🍑'}>
-      <div>
-        <HighlightMatch text={label} match={query} />
-        <Text as="div" color="color-neutral-dark" variant="caption">
-          {option._type}
-        </Text>
-      </div>
-    </Select.Option>
-  )
-}
-
-const value = [
-  { _type: 'fruit', ...FRUITS[0] },
-  { _type: 'user', ...USERS[0] },
-] as Option[]
-
-export const MultiCustomOptionRendering: Story<SelectProps> = (args: SelectProps) => {
-  return (
-    <div className="flex flex-col space-y-4">
-      <div className="flex flex-row space-x-4" style={{ width: 720 }}>
-        <div className="flex-1">
-          <Label htmlFor="select-multi-mixed">
-            Select your favorite fruit or the project manager
-          </Label>
-          <Select
-            placeholder="Select multiple mixed"
-            {...omit(args, OMITTED_PROPS)}
-            id="select-multi-mixed"
-            name="select-multi-mixed"
-            datasources={MULTI_MIXED_DATASOURCES}
-            components={{ Option: MixedCustomOption }}
-            value={value}
-          />
-        </div>
-      </div>
-      <div className="text-sm" style={{ width: 720 }}>
-        <p>Available options:</p>
-        <code>{FRUITS.map(({ label }) => label).join(', ')}</code>
-        <code>{USERS.map(({ name }) => name).join(', ')}</code>
-      </div>
-    </div>
-  )
-}
-
-MultiCustomOptionRendering.args = {
-  multiple: true,
-}
-
-MultiCustomOptionRendering.parameters = {
-  docs: {
-    description: {
-      story: `
-\`\`\`jsx
-const MixedCustomOption = ({ value }: SelectOptionProps) => {
-  const select = useSelect()
-  const option = select.getOption(value) || {}
-  const query = select.query
-
-  let label
-  if (option._type === 'user') {
-    label = (option as User).name
-  } else {
-    label = (option as Fruit).label
-  }
-
-  return (
-    <Select.Option value={value} trailing={option._type === 'user' ? '🙂' : '🍑'}>
-      <div>
-        <HighlightMatch text={label} match={query} />
-        <Text as="div" color="color-neutral-dark" variant="caption">
-          {option._type}
-        </Text>
-      </div>
-    </Select.Option>
-  )
-}
-
-\`\`\`
-      `,
-    },
-  },
-}
-
-const fruits = [...FRUITS]
-
-export const CreatableSync: Story<SelectProps> = (args: SelectProps) => {
-  const handleCreate = useCallback(function handleCreate(query: string) {
-    const item: Option = { label: query, value: query } as Option
-
-    fruits.push(item as Fruit)
-    return item
-  }, [])
-
-  return (
-    <div className="flex flex-col space-y-4">
-      <div className="flex flex-row space-x-4" style={{ width: 720 }}>
-        <div className="flex-1">
-          <Label htmlFor="select-creatable-sync">Select your favorite fruit</Label>
-          <Select
-            onCreate={handleCreate}
-            datasources={SINGLE_SYNC_DATASOURCES}
-            placeholder="Select creatable sync"
-            {...args}
-            id="select-creatable-sync"
-            name="select-creatable-sync"
-          />
-        </div>
-      </div>
-      <div className="text-sm" style={{ width: 720 }}>
-        <p>Available options:</p>
-        <code>{fruits.map(({ label }) => label).join(', ')}</code>
-      </div>
-    </div>
-  )
-}
-
-CreatableSync.parameters = {
-  actions: { argTypesRegex: 'onClick' },
-  docs: {
-    description: {
-      story: `
-
-Creatable Select allows users to add new items to the options list when the query they typed doesn't match the available options.
-When the \`onCreate\` prop is provided, if the entered query does not match any of the available options, a new item can be created based on that query
-
-\`\`\`jsx
-function handleCreate(query: string): Promise<void | Option> | void | Option {
-  // Create the new item
-  const item: Option = { label: query, value: query.toLowerCase() }
-
-  // Update options
-  FRUITS = [...FRUITS, item]
-
-  // When the option is returned it will be selected. onChange will be fired with the new value
-  return item
-}
-\`\`\`
-      `,
-    },
-  },
-}
-
-export const CreatableAsync: Story<SelectProps> = (args: SelectProps) => {
-  const [disabled, setDisabled] = useState(false)
-
-  const handleCreate = useCallback(function handleCreate(query: string) {
-    return new Promise<Option>((resolve) => {
-      const item: Option = {
-        uuid: generators.id(),
-        name: query,
-        _type: 'user',
-      } as Option
-      setDisabled(true)
-
-      setTimeout(() => {
-        USERS.push(item as User)
-
-        setDisabled(false)
-        resolve(item)
-      }, 2000)
-    })
-  }, [])
-
-  return (
-    <div className="flex flex-col space-y-4">
-      <div className="flex flex-row space-x-4" style={{ width: 720 }}>
-        <div className="flex-1">
-          <Label htmlFor="select-creatable-async">Select the project manager</Label>
-          <Select
-            datasources={SINGLE_ASYNC_DATASOURCES}
-            onCreate={handleCreate}
-            multiple
-            placeholder="Select creatable async"
-            {...args}
-            id="select-creatable-async"
-            name="select-creatable-async"
-            disabled={disabled}
-          />
-        </div>
-      </div>
-      <div className="text-sm" style={{ width: 720 }}>
-        <p>Available options:</p>
-        <code>{USERS.map(({ name }) => name).join(', ')}</code>
-      </div>
-    </div>
-  )
-}
-
-CreatableAsync.parameters = {
-  actions: { argTypesRegex: 'onClick' },
-  docs: {
-    description: {
-      story: `
-
-
-> The asynchronous version is useful when the new item needs to be created in a backend service.
-
-The callback handler must return a \`Promise\`.
-
-
-\`\`\`jsx
-function handleCreate(query: string): Promise<void | Option> | void | Option {
-  return new Promise<void>((resolve) => {
-    // Create the new item
-    const item: Option = {
-      uuid: generators.id(),
-      name: query,
-      _type: 'user',
-    }
-
-    // Disable the Select to wait until the new item is created. (optional)
-    setDisabled(true)
-
-    // Run "asynchronous" code
-    setTimeout(() => {
-      // Update options
-      USERS = [...USERS, item]
-
-      // Enable the component
-      setDisabled(false)
-
-      // When the promise resolves with the new option, it will be selected. onChange will fire with the new value
-      resolve(item)
-    }, 2000)
-  })
-}
-\`\`\`
-      `,
-    },
-  },
-}
-
-const CreatableOption = () => {
-  const select = useSelect()
-
-  return <Select.CreatableOption leading="➕">{`Add "${select.query}"`}</Select.CreatableOption>
-}
-
-export const CustomCreatableOption: Story<SelectProps> = ({ onCreate, ...args }: SelectProps) => {
-  const [value, setValue] = useState<Option | null>(null)
-
-  const handleCreate = useCallback(
-    function handleCreate(query: string) {
-      void onCreate?.(query)
-
-      const item: Option = { label: query, value: query } as Option
-
-      setValue(item)
-      fruits.push(item as Fruit)
-    },
-    [onCreate]
-  )
-
-  return (
-    <div className="flex flex-col space-y-4">
-      <div className="flex flex-row space-x-4" style={{ width: 720 }}>
-        <div className="flex-1">
-          <Label htmlFor="select-custom-creatable-option">Select your favorite fruit</Label>
-          <Select
-            placeholder="Select with custom creatable option"
-            {...args}
-            id="select-custom-creatable-option"
-            name="select-custom-creatable-option"
-            datasources={SINGLE_SYNC_DATASOURCES}
-            onChange={(event) => setValue(event.target.value as Option)}
-            onCreate={handleCreate}
-            value={value as Option}
-            components={{
-              CreatableOption,
-            }}
-          />
-        </div>
-      </div>
-      <div className="text-sm" style={{ width: 720 }}>
-        <p>Available options:</p>
-        <code>{fruits.map(({ label }) => label).join(', ')}</code>
-      </div>
-    </div>
-  )
-}
-
-CustomCreatableOption.parameters = {
-  docs: {
-    description: {
-      story: `
-\`\`\`jsx
-const CreatableOption = () => {
-  const select = useSelect()
-
-  return (
-    <Select.CreatableOption leading="➕">
-      Add "{select.query}"
-    </Select.CreatableOption>
-  )
-}
-\`\`\`
-      `,
-    },
-  },
-}
-
-const FixedCreatableOption = () => {
-  return (
-    <Select.CreatableOption>
-      <Text variant="body-bold" color="color-accent">
-        Add new...
-      </Text>
-    </Select.CreatableOption>
-  )
-}
-
-export const SelectWithFixedCreatableOption: Story<SelectProps> = ({
-  onCreate,
-  ...args
-}: SelectProps) => {
-  const [value, setValue] = useState<Option | null>(null)
-
-  const handleCreate = useCallback(
-    function handleCreate(query: string) {
-      void onCreate?.(query)
-    },
-    [onCreate]
-  )
-
-  return (
-    <div className="flex flex-col space-y-4">
-      <div className="flex flex-row space-x-4" style={{ width: 720 }}>
-        <div className="flex-1">
-          <Label htmlFor="select-custom-creatable-option">Select your favorite fruit</Label>
-          <Select
-            {...args}
-            id="select-custom-creatable-option"
-            name="select-custom-creatable-option"
-            placeholder="Select with custom creatable option"
-            datasources={SINGLE_SYNC_DATASOURCES}
-            onChange={(event) => setValue(event.target.value as Option)}
-            onCreate={handleCreate}
-            value={value as Option}
-            components={{
-              CreatableOption: FixedCreatableOption,
-            }}
-          />
-        </div>
-      </div>
-      <div className="text-sm" style={{ width: 720 }}>
-        <p>Available options:</p>
-        <code>{FRUITS.map(({ label }) => label).join(', ')}</code>
-      </div>
-    </div>
-  )
-}
-
-SelectWithFixedCreatableOption.args = {
-  createOptionPosition: 'first',
-  isValidNewOption: true,
-}
-
-SelectWithFixedCreatableOption.parameters = {
-  docs: {
-    description: {
-      story: `
-\`\`\`jsx
-const CreatableOption = () => {
-  return (
-    <Select.CreatableOption>
-      Add new...
-    </Select.CreatableOption>
-  )
-}
-
-<Select
-  {...args}
-  createOptionPosition="first"
-  isValidNewOption={true}
-  components={{
-    CreatableOption,
-  }}
-/>
-\`\`\`
-      `,
-    },
-  },
-}