docs(fractal): add documentation for all sub components

packages/fractal/src/components/Autocomplete/Autocomplete.types.ts

@@ -124,8 +124,8 @@ export interface AutocompleteLoadingProps
   /**
    * Indicates if you want to display an icon.
    *
-   * You can pass either a boolean to use the default icon or an icon of your
-   * choice.
+   * You can pass either a boolean to use/disable the default icon or an icon of
+   * your choice.
    */
   icon?: ReactNode | boolean
   /** Indicates if you want the icon to spin. */

packages/fractal/src/components/Autocomplete/AutocompleteEmpty.mdx

@@ -0,0 +1,34 @@
+import {
+  ArgTypes,
+  Controls,
+  Description,
+  Meta,
+  Primary,
+  Subtitle,
+  Title,
+} from '@storybook/blocks'
+
+import * as AutocompleteEmptyStories from './AutocompleteEmpty.stories'
+
+<Meta of={AutocompleteEmptyStories} />
+
+<Title />
+
+<Subtitle />
+
+<Description />
+
+---
+
+## Props
+
+On top of all the props, attributes and event handler you can set on a
+`<div />` element, the component accepts the following props:
+
+<ArgTypes />
+
+## Playground
+
+<Primary />
+
+<Controls />

packages/fractal/src/components/Autocomplete/AutocompleteEmpty.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { ComponentProps } from 'react'
+
+import Autocomplete from './Autocomplete'
+import AutocompleteEmpty from './AutocompleteEmpty'
+
+type AutocompleteEmptyProps = ComponentProps<typeof AutocompleteEmpty>
+
+const meta: Meta<AutocompleteEmptyProps> = {
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+  },
+  args: {
+    children: 'No results! Sorry about that!',
+  },
+  component: AutocompleteEmpty,
+
+  title: 'Molecules/Autocomplete/AutocompleteEmpty',
+} satisfies Meta<AutocompleteEmptyProps>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  render: ({ children }) => (
+    <Autocomplete placeholder="Start typing to autocomplete">
+      <AutocompleteEmpty>{children}</AutocompleteEmpty>
+    </Autocomplete>
+  ),
+}

packages/fractal/src/components/Autocomplete/AutocompleteItem.mdx

@@ -0,0 +1,34 @@
+import {
+  ArgTypes,
+  Controls,
+  Description,
+  Meta,
+  Primary,
+  Subtitle,
+  Title,
+} from '@storybook/blocks'
+
+import * as AutocompleteItemStories from './AutocompleteItem.stories'
+
+<Meta of={AutocompleteItemStories} />
+
+<Title />
+
+<Subtitle />
+
+<Description />
+
+---
+
+## Props
+
+On top of all the props, attributes and event handler you can set on a
+`<div />` element, the component accepts the following props:
+
+<ArgTypes />
+
+## Playground
+
+<Primary />
+
+<Controls />

packages/fractal/src/components/Autocomplete/AutocompleteItem.stories.tsx

@@ -0,0 +1,39 @@
+import { action } from '@storybook/addon-actions'
+import type { Meta, StoryObj } from '@storybook/react'
+import type { ComponentProps } from 'react'
+
+import Autocomplete from './Autocomplete'
+import AutocompleteItem from './AutocompleteItem'
+
+type AutocompleteItemProps = ComponentProps<typeof AutocompleteItem>
+
+const meta: Meta<AutocompleteItemProps> = {
+  argTypes: {
+    asChild: { table: { disable: true } },
+    children: { control: 'text' },
+  },
+  args: {
+    children: 'Jar Jar Binks',
+    disabled: false,
+    value: 'jar-jar-binks',
+  },
+  component: AutocompleteItem,
+
+  title: 'Molecules/Autocomplete/AutocompleteItem',
+} satisfies Meta<AutocompleteItemProps>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  render: ({ children, disabled = false, value = '' }) => (
+    <Autocomplete
+      placeholder="Start typing to autocomplete"
+      onChange={action('onChange')}
+    >
+      <AutocompleteItem disabled={disabled} value={value}>
+        {children}
+      </AutocompleteItem>
+    </Autocomplete>
+  ),
+}

packages/fractal/src/components/Autocomplete/AutocompleteItemGroup.mdx

@@ -0,0 +1,34 @@
+import {
+  ArgTypes,
+  Controls,
+  Description,
+  Meta,
+  Primary,
+  Subtitle,
+  Title,
+} from '@storybook/blocks'
+
+import * as AutocompleteItemGroupStories from './AutocompleteItemGroup.stories'
+
+<Meta of={AutocompleteItemGroupStories} />
+
+<Title />
+
+<Subtitle />
+
+<Description />
+
+---
+
+## Props
+
+On top of all the props, attributes and event handler you can set on a
+`<div />` element, the component accepts the following props:
+
+<ArgTypes />
+
+## Playground
+
+<Primary />
+
+<Controls />

packages/fractal/src/components/Autocomplete/AutocompleteItemGroup.stories.tsx

@@ -0,0 +1,51 @@
+import { action } from '@storybook/addon-actions'
+import type { Meta, StoryObj } from '@storybook/react'
+import type { ComponentProps } from 'react'
+
+import Autocomplete from './Autocomplete'
+import AutocompleteItem from './AutocompleteItem'
+import AutocompleteItemGroup from './AutocompleteItemGroup'
+
+type AutocompleteItemGroupProps = ComponentProps<typeof AutocompleteItemGroup>
+
+const meta: Meta<AutocompleteItemGroupProps> = {
+  argTypes: {
+    children: {
+      control: false,
+      table: {
+        type: {
+          summary:
+            'SelectItem | SelectItemSeparator | Array<SelectItem | SelectItemSeparator>',
+        },
+      },
+    },
+  },
+  args: {
+    label: 'Jedis',
+  },
+  component: AutocompleteItemGroup,
+
+  title: 'Molecules/Autocomplete/AutocompleteItemGroup',
+} satisfies Meta<AutocompleteItemGroupProps>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  render: ({ label }) => (
+    <Autocomplete
+      placeholder="Start typing to autocomplete"
+      onChange={action('onChange')}
+    >
+      <AutocompleteItemGroup label={label}>
+        <AutocompleteItem value="luke-skywalker">
+          Luke Skywalker
+        </AutocompleteItem>
+        <AutocompleteItem value="obi-wan-kenobi">
+          Obi-Wan Kenobi
+        </AutocompleteItem>
+        <AutocompleteItem value="yoda">Yoda</AutocompleteItem>
+      </AutocompleteItemGroup>
+    </Autocomplete>
+  ),
+}

packages/fractal/src/components/Autocomplete/AutocompleteItemSeparator.mdx

@@ -0,0 +1,22 @@
+import { Description, Meta, Primary, Subtitle, Title } from '@storybook/blocks'
+
+import * as AutocompleteItemSeparatortories from './AutocompleteItemSeparator.stories'
+
+<Meta of={AutocompleteItemSeparatortories} />
+
+<Title />
+
+<Subtitle />
+
+<Description />
+
+---
+
+## Props
+
+You can pass any props, attributes and event handler you can set on a
+`<div />` element.
+
+## Playground
+
+<Primary />

packages/fractal/src/components/Autocomplete/AutocompleteItemSeparator.stories.tsx

@@ -0,0 +1,33 @@
+import { action } from '@storybook/addon-actions'
+import type { Meta, StoryObj } from '@storybook/react'
+import type { ComponentProps } from 'react'
+
+import Autocomplete from './Autocomplete'
+import AutocompleteItem from './AutocompleteItem'
+import AutocompleteItemSeparator from './AutocompleteItemSeparator'
+
+type AutocompleteItemSeparatorProps = ComponentProps<
+  typeof AutocompleteItemSeparator
+>
+
+const meta: Meta<AutocompleteItemSeparatorProps> = {
+  component: AutocompleteItemSeparator,
+
+  title: 'Molecules/Autocomplete/AutocompleteItemSeparator',
+} satisfies Meta<AutocompleteItemSeparatorProps>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  render: () => (
+    <Autocomplete
+      placeholder="Start typing to autocomplete"
+      onChange={action('onChange')}
+    >
+      <AutocompleteItem value="yoda">Yoda</AutocompleteItem>
+      <AutocompleteItemSeparator />
+      <AutocompleteItem value="darth-sidious">Darth Sidious</AutocompleteItem>
+    </Autocomplete>
+  ),
+}

packages/fractal/src/components/Autocomplete/AutocompleteLoading.mdx

@@ -0,0 +1,34 @@
+import {
+  ArgTypes,
+  Controls,
+  Description,
+  Meta,
+  Primary,
+  Subtitle,
+  Title,
+} from '@storybook/blocks'
+
+import * as AutocompleteLoadingStories from './AutocompleteLoading.stories'
+
+<Meta of={AutocompleteLoadingStories} />
+
+<Title />
+
+<Subtitle />
+
+<Description />
+
+---
+
+## Props
+
+On top of all the props, attributes and event handler you can set on a
+`<div />` element, the component accepts the following props:
+
+<ArgTypes />
+
+## Playground
+
+<Primary />
+
+<Controls />

packages/fractal/src/components/Autocomplete/AutocompleteLoading.stories.tsx

@@ -0,0 +1,50 @@
+import {
+  UilMessage as SendIcon,
+  UilEnvelopeStar as StarIcon,
+} from '@iconscout/react-unicons'
+import type { Meta, StoryObj } from '@storybook/react'
+import type { ComponentProps } from 'react'
+
+import Autocomplete from './Autocomplete'
+import AutocompleteLoading from './AutocompleteLoading'
+
+type AutocompleteLoadingProps = ComponentProps<typeof AutocompleteLoading>
+
+const meta: Meta<AutocompleteLoadingProps> = {
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    icon: {
+      mapping: {
+        Default: true,
+        None: false,
+        Send: <SendIcon />,
+        Star: <StarIcon />,
+      },
+      options: ['Default', 'None', 'Send', 'Star'],
+      table: { type: { summary: 'ReactNode | boolean' } },
+    },
+  },
+  args: {
+    children: 'Loading... please wait!',
+    icon: 'Default',
+    spin: true,
+  },
+  component: AutocompleteLoading,
+
+  title: 'Molecules/Autocomplete/AutocompleteLoading',
+} satisfies Meta<AutocompleteLoadingProps>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  render: ({ children, icon, spin = false }) => (
+    <Autocomplete placeholder="Start typing to autocomplete">
+      <AutocompleteLoading icon={icon} spin={spin}>
+        {children}
+      </AutocompleteLoading>
+    </Autocomplete>
+  ),
+}