cal.pub0.org/packages/ui/components/form/select/select.stories.mdx

import { Canvas, Meta, Story } from "@storybook/addon-docs";

import {
  Examples,
  Example,
  Title,
  CustomArgsTable,
  VariantRow,
  VariantsTable,
} from "@calcom/storybook/components";

import { Plus } from "../../icon";
import { SelectField } from "./Select";

<Meta title="UI/Form/Select Field" component={SelectField} />

<Title title="Select" suffix="Brief" subtitle="Version 2.0 — Last Update: 29 Aug 2022" />

## Definition

Dropdown fields allow users to input existing options that is preset by the deisgner/ developer. It can be just one choice per field, or they might be multiple choices depends on the circumstances.

## Structure

<CustomArgsTable of={SelectField} />

export const options = [
  { value: 0, label: "Option One" },
  { value: 1, label: "Option Two" },
  { value: 3, label: "Option Three" },
  { value: 4, label: "Option Four" },
];

## Examples

<Examples
  title=" Single Selected / Unselected"
  footnote={
    <ul>
      <li>The difference between the types are when they are filled. </li>
    </ul>
  }>
  <Example title="Single Select [Unselected]" isFullWidth>
    <SelectField label={"Single Select"} options={options} />
  </Example>
  <Example title="Single Select [Selected]" isFullWidth>
    <SelectField label={"Single Select"} options={options} defaultValue={options[0]} />
  </Example>
  <Example title="Multi Select [Unselected]" isFullWidth>
    <SelectField label={"Multi Select"} options={options} isMulti={true} />
  </Example>
  <Example title="Multi Select [Selected]" isFullWidth>
    <SelectField label={"Multi Select"} options={options} isMulti={true} defaultValue={options[0]} />
  </Example>
</Examples>

<Examples title="Variants">
  <Example title="Default">
    <SelectField label={"Default Select"} options={options} />
  </Example>
  <Example title="Icon Left">
    WIP
    {/* <SelectField options={options} components={{ Control }}/> */}
  </Example>
</Examples>

## Variant Caviats (WIP) - To be updated

Using Icons is a bit of a strange one cause you can't simpily pass in an icon as a prop. You have to pass in a component. To the select field.

```js
// Bad: Inline declaration will cause remounting issues
const BadSelect = (props) => (
  <Select
    {...props}
    components={{
      Control: ({ children, ...rest }) => <components.Control {...rest}>👎 {children}</components.Control>,
    }}
  />
);

// Good: Custom component declared outside of the Select scope
const Control = <IconLeading icon={Plus} />;

const GoodSelect = (props) => <Select {...props} components={{ Control }} />;
```

<Examples title="States ">
  <Example title="Default">
    <SelectField options={options} label={"Default Select"} />
  </Example>
  {/* <Example title="Hover">
    <SelectField options={options} className="sb-pseudo--hover"/>
  </Example>
  <Example title="Focus">
    <SelectField options={options} className="sb-pseudo--focus"/>
  </Example> */}
</Examples>

## Select Story

<Canvas>
  <Story
    name="Default"
    args={{
      required: false,
      name: "select-field",
      error: "Some error",
      variant: "default",
      label: "Select an item",
      isMulti: false,
      options,
    }}
    argTypes={{
      variant: {
        control: {
          type: "select",
          options: ["default", "checkbox"],
        },
      },
    }}>
    {(args) => (
      <VariantsTable titles={["Default"]} columnMinWidth={300}>
        <VariantRow>
          <SelectField {...args} />
        </VariantRow>
      </VariantsTable>
    )}
  </Story>
</Canvas>