Update snippets

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

canon-docs/src/app/(docs)/components/box/page.mdx

@@ -2,7 +2,7 @@ import { CodeBlock } from '@/components/CodeBlock';
 import { PropsTable } from '@/components/PropsTable';
 import { Tabs } from '@/components/Tabs';
 import { Snippet } from '@/components/Snippet';
-import { BoxPreview } from '@/snippets/box';
+import { BoxSnippet } from '@/snippets/box';
 import { boxPropDefs } from './props';
 import { spacingPropDefs } from '../../../../utils/propDefs';
 
@@ -12,7 +12,7 @@ Box is the lowest-level component in Canon. It provides a consistent API for sty
 
 <Snippet
   py={4}
-  preview={<BoxPreview />}
+  preview={<BoxSnippet story="Preview" />}
   code={`<Box>
     <DecorativeBox />
 </Box>`}

canon-docs/src/app/(docs)/components/checkbox/page.mdx

@@ -1,5 +1,5 @@
 import { PropsTable } from '@/components/PropsTable';
-import { CheckboxPreview, CheckboxAllVariants } from '@/snippets/checkbox';
+import { CheckboxSnippet } from '@/snippets/checkbox';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
@@ -11,8 +11,9 @@ import { checkboxPropDefs } from './props';
 A checkbox component that can be used to trigger actions.
 
 <Snippet
+  align="center"
   py={4}
-  preview={<CheckboxPreview />}
+  preview={<CheckboxSnippet story="Default" />}
   code={`<Checkbox label="Accept terms and conditions" />`}
 />
 
@@ -55,7 +56,7 @@ Here's a view when checkboxes have different variants.
   align="center"
   py={4}
   open
-  preview={<CheckboxAllVariants />}
+  preview={<CheckboxSnippet story="AllVariants" />}
   code={`<Inline alignY="center">
     <Checkbox />
     <Checkbox checked />

canon-docs/src/app/(docs)/components/container/page.mdx

@@ -2,7 +2,7 @@ import { CodeBlock } from '@/components/CodeBlock';
 import { PropsTable } from '@/components/PropsTable';
 import { Tabs } from '@/components/Tabs';
 import { Snippet } from '@/components/Snippet';
-import { ContainerPreview } from '@/snippets/container';
+import { ContainerSnippet } from '@/snippets/container';
 import { containerPropDefs } from './props';
 
 # Container
@@ -12,7 +12,7 @@ content on the page.
 
 <Snippet
   py={4}
-  preview={<ContainerPreview />}
+  preview={<ContainerSnippet story="Preview" />}
   code={`<Container>
     <DecorativeBox />
 </Container>`}

canon-docs/src/app/(docs)/components/field/page.mdx

@@ -2,7 +2,7 @@ import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
-import { FieldPreview } from '@/snippets/field';
+import { FieldSnippet } from '@/snippets/field';
 import { BaseUI } from '@/components/HeadlessBanners/BaseUI';
 import {
   fieldRootPropDefs,
@@ -15,7 +15,12 @@ import {
 
 A wrapper around `Input` or `Select` component to add label, description and error messages..
 
-<Snippet align="center" py={4} preview={<FieldPreview />} code={`<Field />`} />
+<Snippet
+  align="center"
+  py={4}
+  preview={<FieldSnippet story="Default" />}
+  code={`<Field />`}
+/>
 
 <Tabs.Root>
   <Tabs.List>
@@ -85,7 +90,7 @@ Here's a simple input with a label and description.
   align="center"
   py={4}
   open
-  preview={<FieldPreview />}
+  preview={<FieldSnippet story="WithLabelAndDescription" />}
   code={`<Field>
     <Field.Label>Name</Field.Label>
     <Field.Description>Visible on your profile</Field.Description>

canon-docs/src/app/(docs)/components/flex/page.mdx

@@ -8,7 +8,7 @@ import {
   flexAlign,
 } from '@/snippets/_snippets';
 import { Snippet } from '@/components/Snippet';
-import { FlexPreview } from '@/snippets/flex';
+import { FlexSnippet } from '@/snippets/flex';
 import { flexPropDefs } from './props';
 import { spacingPropDefs } from '../../../../utils/propDefs';
 
@@ -21,7 +21,7 @@ columns. All values are responsive.
 <Snippet
   py={4}
   align="center"
-  preview={<FlexPreview />}
+  preview={<FlexSnippet story="Default" />}
   code={`<Flex>
     <DecorativeBox />
     <DecorativeBox />

canon-docs/src/app/(docs)/components/grid/page.mdx

@@ -3,7 +3,7 @@ import { PropsTable } from '@/components/PropsTable';
 import { Tabs } from '@/components/Tabs';
 import { grid } from '@/snippets/_snippets';
 import { Snippet } from '@/components/Snippet';
-import { GridPreview } from '@/snippets/grid';
+import { GridSnippet } from '@/snippets/grid';
 import { spacingPropDefs } from '../../../../utils/propDefs';
 import { gridPropDefs, gridItemPropDefs } from './props';
 
@@ -14,7 +14,7 @@ more complex ones.
 
 <Snippet
   py={4}
-  preview={<GridPreview />}
+  preview={<GridSnippet story="Default" />}
   code={`<Grid>
     <DecorativeBox />
     <DecorativeBox />

canon-docs/src/app/(docs)/components/heading/page.mdx

@@ -1,9 +1,5 @@
 import { PropsTable } from '@/components/PropsTable';
-import {
-  HeadingPreview,
-  HeadingAllVariants,
-  HeadingResponsive,
-} from '@/snippets/heading';
+import { HeadingSnippet } from '@/snippets/heading';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
@@ -15,7 +11,7 @@ Headings are used to structure the content of your page.
 
 <Snippet
   py={4}
-  preview={<HeadingPreview />}
+  preview={<HeadingSnippet story="Title1" />}
   code={`<Heading variant="title1">Hello World!</Heading>`}
 />
 
@@ -56,7 +52,7 @@ appearance of the heading.
 <Snippet
   py={2}
   open
-  preview={<HeadingAllVariants />}
+  preview={<HeadingSnippet story="AllVariants" />}
   code={`<Flex direction="column" gap="4">
     <Heading variant="display">Display</Heading>
     <Heading variant="title1">Title 1</Heading>
@@ -74,7 +70,7 @@ on the screen size.
 <Snippet
   py={4}
   open
-  preview={<HeadingResponsive />}
+  preview={<HeadingSnippet story="Responsive" />}
   code={`<Heading variant={{ initial: 'title2', lg: 'title1' }}>
     Responsive heading
   </Heading>`}

canon-docs/src/app/(docs)/components/icon-button/page.mdx

@@ -2,12 +2,7 @@ import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
-import {
-  IconButtonPreview,
-  IconButtonSizes,
-  IconButtonDisabled,
-  IconButtonResponsive,
-} from '@/snippets/icon-button';
+import { IconButtonSnippet } from '@/snippets/icon-button';
 import { iconButtonVariants } from '@/snippets/_snippets';
 import { iconButtonPropDefs } from './props';
 
@@ -18,11 +13,11 @@ A button component with a single icon that can be used to trigger actions.
 <Snippet
   align="center"
   py={4}
-  preview={<IconButtonPreview />}
+  preview={<IconButtonSnippet story="Variants" />}
   code={`<Flex align="center">
     <IconButton icon="cloud" variant="primary" />
     <IconButton icon="cloud" variant="secondary" />
-</Flex>`}
+  </Flex>`}
 />
 
 <Tabs.Root>
@@ -62,7 +57,7 @@ Here's a view when buttons have different variants.
   align="center"
   py={4}
   open
-  preview={<IconButtonPreview />}
+  preview={<IconButtonSnippet story="Variants" />}
   code={iconButtonVariants}
 />
 
@@ -74,7 +69,7 @@ Here's a view when buttons have different sizes.
   align="center"
   py={4}
   open
-  preview={<IconButtonSizes />}
+  preview={<IconButtonSnippet story="Sizes" />}
   code={`<Flex align="center">
     <IconButton icon="cloud" size="small" />
     <IconButton icon="cloud" size="medium" />
@@ -89,7 +84,7 @@ Here's a view when buttons are disabled.
   align="center"
   py={4}
   open
-  preview={<IconButtonDisabled />}
+  preview={<IconButtonSnippet story="Disabled" />}
   code={`<IconButton icon="cloud" disabled />`}
 />
 
@@ -101,6 +96,6 @@ Here's a view when buttons are responsive.
   align="center"
   py={4}
   open
-  preview={<IconButtonResponsive />}
+  preview={<IconButtonSnippet story="Responsive" />}
   code={`<IconButton icon="cloud" variant={{ initial: 'primary', lg: 'secondary' }} />`}
 />

canon-docs/src/app/(docs)/components/icon/page.mdx

@@ -1,5 +1,5 @@
 import { PropsTable } from '@/components/PropsTable';
-import { IconPreview } from '@/snippets/icon';
+import { IconSnippet } from '@/snippets/icon';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
@@ -12,7 +12,7 @@ Icons are used to represent an action or a state.
 <Snippet
   py={4}
   align="center"
-  preview={<IconPreview />}
+  preview={<IconSnippet story="Default" />}
   code={`<Icon name="heart" />`}
 />
 

canon-docs/src/app/(docs)/components/input/page.mdx

@@ -2,7 +2,7 @@ import { PropsTable } from '@/components/PropsTable';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
-import { InputPreview, InputSizes } from '@/snippets/input';
+import { InputSnippet } from '@/snippets/input';
 import { BaseUI } from '@/components/HeadlessBanners/BaseUI';
 import { inputPropDefs } from './props';
 
@@ -13,7 +13,7 @@ A input component tfor your forms.
 <Snippet
   align="center"
   py={4}
-  preview={<InputPreview />}
+  preview={<InputSnippet story="Primary" />}
   code={`<Input label="Name" placeholder="Enter your name" />`}
 />
 
@@ -55,7 +55,7 @@ Here's a simple input with a label and description.
   align="center"
   py={4}
   open
-  preview={<InputSizes />}
+  preview={<InputSnippet story="Sizes" />}
   code={`<Grid>
     <Input size="sm" placeholder="Small" />
     <Input size="md" placeholder="Medium" />

canon-docs/src/app/(docs)/components/text/page.mdx

@@ -1,10 +1,5 @@
 import { PropsTable } from '@/components/PropsTable';
-import {
-  TextPreview,
-  TextAllVariants,
-  TextResponsive,
-  TextAllWeights,
-} from '@/snippets/text';
+import { TextSnippet } from '@/snippets/text';
 import { Snippet } from '@/components/Snippet';
 import { Tabs } from '@/components/Tabs';
 import { CodeBlock } from '@/components/CodeBlock';
@@ -16,7 +11,7 @@ The `Text` component is used to display content on your page.
 
 <Snippet
   py={4}
-  preview={<TextPreview />}
+  preview={<TextSnippet story="Default" />}
   code={`<Text style={{ maxWidth: '600px' }}>
     A man looks at a painting in a museum and says, “Brothers and sisters I
     have none, but that man&apos;s father is my father&apos;s son.” Who is in
@@ -60,7 +55,7 @@ appearance of the text.
 
 <Snippet
   open
-  preview={<TextAllVariants />}
+  preview={<TextSnippet story="AllVariants" />}
   code={`<Flex direction="column" gap="4">
     <Text variant="subtitle" style={{ maxWidth: '600px' }}>
       A man looks at a painting in a museum and says, “Brothers and sisters I
@@ -92,7 +87,7 @@ appearance of the text.
 
 <Snippet
   open
-  preview={<TextAllWeights />}
+  preview={<TextSnippet story="AllWeights" />}
   code={`<Flex direction="column" gap="4">
     <Text weight="regular" style={{ maxWidth: '600px' }}>
       A man looks at a painting in a museum and says, “Brothers and sisters I
@@ -114,7 +109,7 @@ on the screen size.
 
 <Snippet
   open
-  preview={<TextResponsive />}
+  preview={<TextSnippet story="Responsive" />}
   code={`<Text variant={{ initial: 'body', lg: 'subtitle' }}>
     Responsive text
   </Text>`}

canon-docs/src/app/(docs)/theme/typography/page.mdx

@@ -1,5 +1,5 @@
-import { HeadingAllVariants } from '@/snippets/heading';
-import { TextAllVariants } from '@/snippets/text';
+import { HeadingSnippet } from '@/snippets/heading';
+import { TextSnippet } from '@/snippets/text';
 import { Snippet } from '@/components/Snippet';
 
 # Typography
@@ -20,7 +20,7 @@ component](?path=/docs/components-heading--docs).
 <Snippet
   py={2}
   open
-  preview={<HeadingAllVariants />}
+  preview={<HeadingSnippet story="AllVariants" />}
   code={`<Flex direction="column" gap="4">
     <Heading variant="display">Display</Heading>
     <Heading variant="title1">Title 1</Heading>
@@ -40,7 +40,7 @@ page.
 
 <Snippet
   open
-  preview={<TextAllVariants />}
+  preview={<TextSnippet story="AllVariants" />}
   code={`<Flex direction="column" gap="4">
     <Text variant="subtitle" style={{ maxWidth: '600px' }}>
       A man looks at a painting in a museum and says, “Brothers and sisters I

canon-docs/src/app/(playground)/playground/page.tsx

@@ -5,10 +5,10 @@ import { Grid, Flex, Text } from '../../../../../packages/canon';
 import { screenSizes } from '@/utils/data';
 import { Frame } from '@/components/Frame';
 import { usePlayground } from '@/utils/playground-context';
-import { ButtonPlayground } from '@/snippets/button';
-import { CheckboxPlayground } from '@/snippets/checkbox';
-import { HeadingPlayground } from '@/snippets/heading';
-import { TextPlayground } from '@/snippets/text';
+import { ButtonSnippet } from '@/snippets/button';
+import { CheckboxSnippet } from '@/snippets/checkbox';
+import { HeadingSnippet } from '@/snippets/heading';
+import { TextSnippet } from '@/snippets/text';
 
 import styles from './styles.module.css';
 
@@ -55,16 +55,19 @@ const Content = () => {
   return (
     <Flex direction="column" gap="4">
       {selectedComponents.find(c => c === 'button') && (
-        <Line content={<ButtonPlayground />} title="Button" />
+        <Line content={<ButtonSnippet story="Playground" />} title="Button" />
       )}
       {selectedComponents.find(c => c === 'checkbox') && (
-        <Line content={<CheckboxPlayground />} title="Checkbox" />
+        <Line
+          content={<CheckboxSnippet story="Playground" />}
+          title="Checkbox"
+        />
       )}
       {selectedComponents.find(c => c === 'heading') && (
-        <Line content={<HeadingPlayground />} title="Heading" />
+        <Line content={<HeadingSnippet story="Playground" />} title="Heading" />
       )}
       {selectedComponents.find(c => c === 'text') && (
-        <Line content={<TextPlayground />} title="Text" />
+        <Line content={<TextSnippet story="Playground" />} title="Text" />
       )}
       {/* {selectedComponents.find(c => c === 'input') && (
         <Line content={<InputPlayground />} title="Input" />

canon-docs/src/snippets/box.tsx

@@ -1,20 +1,20 @@
 'use client';
 
-import { Box } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as BoxStories from '../../../packages/canon/src/components/Box/Box.stories';
 
-export const BoxPreview = () => {
-  return (
-    <Box
-      style={{
-        width: '64px',
-        height: '64px',
-        background: '#eaf2fd',
-        borderRadius: '4px',
-        border: '1px solid #2563eb',
-        color: '#2563eb',
-        backgroundImage:
-          'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
-      }}
-    />
-  );
+export const BoxSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(BoxStories);
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
+
+  if (!isReady) return null;
+
+  if (story === 'Preview') return <stories.Preview />;
+
+  return null;
 };

canon-docs/src/snippets/checkbox.tsx

@@ -1,32 +1,22 @@
 'use client';
 
-import { Checkbox, Flex, Text } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as CheckboxStories from '../../../packages/canon/src/components/Checkbox/Checkbox.stories';
 
-export const CheckboxPreview = () => {
-  return <Checkbox label="Accept terms and conditions" />;
-};
+export const CheckboxSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(CheckboxStories);
+  const [isReady, setIsReady] = useState(false);
 
-export const CheckboxAllVariants = () => {
-  return (
-    <Flex align="center">
-      <Checkbox />
-      <Checkbox checked />
-      <Checkbox label="Checkbox" />
-      <Checkbox label="Checkbox" checked />
-    </Flex>
-  );
-};
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
 
-export const CheckboxPlayground = () => {
-  return (
-    <Flex direction="column">
-      <Text>All variants</Text>
-      <Flex align="center">
-        <Checkbox />
-        <Checkbox checked />
-        <Checkbox label="Checkbox" />
-        <Checkbox label="Checkbox" checked />
-      </Flex>
-    </Flex>
-  );
+  if (!isReady) return null;
+
+  if (story === 'Default') return <stories.Default />;
+  if (story === 'AllVariants') return <stories.AllVariants />;
+  if (story === 'Playground') return <stories.Playground />;
+
+  return null;
 };

canon-docs/src/snippets/container.tsx

@@ -1,24 +1,20 @@
 'use client';
 
-import { Box, Container } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as ContainerStories from '../../../packages/canon/src/components/Container/Container.stories';
 
-const DecorativeBox = () => (
-  <Box
-    style={{
-      height: '64px',
-      background: '#eaf2fd',
-      borderRadius: '4px',
-      border: '1px solid #2563eb',
-      backgroundImage:
-        'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
-    }}
-  />
-);
+export const ContainerSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(ContainerStories);
+  const [isReady, setIsReady] = useState(false);
 
-export const ContainerPreview = () => {
-  return (
-    <Container>
-      <DecorativeBox />
-    </Container>
-  );
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
+
+  if (!isReady) return null;
+
+  if (story === 'Preview') return <stories.Preview />;
+
+  return null;
 };

canon-docs/src/snippets/field.tsx

@@ -1,23 +1,21 @@
 'use client';
 
-import { Input, Field } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as FieldStories from '../../../packages/canon/src/components/Field/Field.stories';
 
-export const FieldPreview = () => {
-  return (
-    <div style={{ width: '300px' }}>
-      <Field.Root>
-        <Field.Label>Name</Field.Label>
-        <Input placeholder="Enter your name" />
-        <Field.Description>Visible on your profile</Field.Description>
-      </Field.Root>
-    </div>
-  );
-};
+export const FieldSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(FieldStories);
+  const [isReady, setIsReady] = useState(false);
 
-export const InputPlayground = () => {
-  return (
-    <div style={{ maxWidth: '300px' }}>
-      <Input placeholder="Enter your name" />
-    </div>
-  );
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
+
+  if (!isReady) return null;
+
+  if (story === 'Default') return <stories.Default />;
+  if (story === 'WithLabelAndDescription')
+    return <stories.WithLabelAndDescription />;
+  return null;
 };

canon-docs/src/snippets/flex.tsx

@@ -1,31 +1,20 @@
 'use client';
 
-import { Flex } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as FlexStories from '../../../packages/canon/src/components/Flex/Flex.stories';
 
-const DecorativeBox = () => {
-  return (
-    <div
-      style={{
-        background: '#eaf2fd',
-        borderRadius: '4px',
-        boxShadow: '0 0 0 1px #2563eb',
-        height: '32px',
-        minWidth: '100px',
-        backgroundImage:
-          'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
-      }}
-    />
-  );
-};
+export const FlexSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(FlexStories);
+  const [isReady, setIsReady] = useState(false);
 
-export const FlexPreview = () => {
-  return (
-    <div style={{ width: '320px' }}>
-      <Flex>
-        <DecorativeBox />
-        <DecorativeBox />
-        <DecorativeBox />
-      </Flex>
-    </div>
-  );
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
+
+  if (!isReady) return null;
+
+  if (story === 'Default') return <stories.Default />;
+
+  return null;
 };

canon-docs/src/snippets/grid.tsx

@@ -1,26 +1,20 @@
 'use client';
 
-import { Box, Grid } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as GridStories from '../../../packages/canon/src/components/Grid/Grid.stories';
 
-const FakeBox = () => (
-  <Box
-    style={{
-      background: '#eaf2fd',
-      borderRadius: '4px',
-      boxShadow: '0 0 0 1px #2563eb',
-      height: '64px',
-      backgroundImage:
-        'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
-    }}
-  />
-);
+export const GridSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(GridStories);
+  const [isReady, setIsReady] = useState(false);
 
-export const GridPreview = () => {
-  return (
-    <Grid>
-      <FakeBox />
-      <FakeBox />
-      <FakeBox />
-    </Grid>
-  );
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
+
+  if (!isReady) return null;
+
+  if (story === 'Default') return <stories.Default />;
+
+  return null;
 };

canon-docs/src/snippets/heading.tsx

@@ -1,42 +1,24 @@
 'use client';
 
-import { Heading, Flex, Text } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as HeadingStories from '../../../packages/canon/src/components/Heading/Heading.stories';
 
-export const HeadingPreview = () => {
-  return <Heading>Look mum, no hands!</Heading>;
-};
+export const HeadingSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(HeadingStories);
+  const [isReady, setIsReady] = useState(false);
 
-export const HeadingAllVariants = () => {
-  return (
-    <Flex direction="column">
-      <Heading variant="display">Display</Heading>
-      <Heading variant="title1">Title 1</Heading>
-      <Heading variant="title2">Title 2</Heading>
-      <Heading variant="title3">Title 3</Heading>
-      <Heading variant="title4">Title 4</Heading>
-    </Flex>
-  );
-};
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
 
-export const HeadingResponsive = () => {
-  return (
-    <Flex direction="column">
-      <Heading variant={{ initial: 'title2', lg: 'title1' }}>
-        Responsive heading
-      </Heading>
-    </Flex>
-  );
-};
+  if (!isReady) return null;
 
-export const HeadingPlayground = () => {
-  return (
-    <Flex direction="column">
-      <Text>All variants</Text>
-      <Heading variant="display">Display</Heading>
-      <Heading variant="title1">Title 1</Heading>
-      <Heading variant="title2">Title 2</Heading>
-      <Heading variant="title3">Title 3</Heading>
-      <Heading variant="title4">Title 4</Heading>
-    </Flex>
-  );
+  if (story === 'Default') return <stories.Default />;
+  if (story === 'Title1') return <stories.Title1 />;
+  if (story === 'AllVariants') return <stories.AllVariants />;
+  if (story === 'Responsive') return <stories.Responsive />;
+  if (story === 'Playground') return <stories.Playground />;
+
+  return null;
 };

canon-docs/src/snippets/icon-button.tsx

@@ -1,57 +1,24 @@
 'use client';
 
-import { IconButton, Flex, ButtonProps, Text } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as IconButtonStories from '../../../packages/canon/src/components/IconButton/IconButton.stories';
 
-export const IconButtonPreview = () => {
-  return (
-    <Flex align="center">
-      <IconButton icon="cloud" variant="primary" />
-      <IconButton icon="cloud" variant="secondary" />
-    </Flex>
-  );
-};
-
-export const IconButtonSizes = () => {
-  return (
-    <Flex align="center">
-      <IconButton icon="cloud" size="medium" />
-      <IconButton icon="cloud" size="small" />
-    </Flex>
-  );
-};
-
-export const IconButtonDisabled = () => {
-  return <IconButton icon="cloud" disabled />;
-};
-
-export const IconButtonResponsive = () => {
-  return (
-    <IconButton
-      icon="cloud"
-      variant={{ initial: 'primary', lg: 'secondary' }}
-    />
-  );
-};
-
-export const IconButtonPlayground = () => {
-  const variants: string[] = ['primary', 'secondary'];
-
-  return (
-    <Flex direction="column">
-      {variants.map(variant => (
-        <Flex direction="column" key={variant}>
-          <Text>{variant}</Text>
-          {['small', 'medium'].map(size => (
-            <Flex align="center" key={size}>
-              <IconButton
-                icon="cloud"
-                variant={variant as ButtonProps['variant']}
-                size={size as ButtonProps['size']}
-              />
-            </Flex>
-          ))}
-        </Flex>
-      ))}
-    </Flex>
-  );
+export const IconButtonSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(IconButtonStories);
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
+
+  if (!isReady) return null;
+
+  if (story === 'Variants') return <stories.Variants />;
+  if (story === 'Sizes') return <stories.Sizes />;
+  if (story === 'Disabled') return <stories.Disabled />;
+  if (story === 'Responsive') return <stories.Responsive />;
+  if (story === 'Playground') return <stories.Playground />;
+
+  return null;
 };

canon-docs/src/snippets/icon.tsx

@@ -1,7 +1,20 @@
 'use client';
 
-import { Icon } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as IconStories from '../../../packages/canon/src/components/Icon/Icon.stories';
 
-export const IconPreview = () => {
-  return <Icon name="heart" />;
+export const IconSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(IconStories);
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
+
+  if (!isReady) return null;
+
+  if (story === 'Default') return <stories.Default />;
+
+  return null;
 };

canon-docs/src/snippets/inline.tsx

@@ -1,47 +0,0 @@
-'use client';
-
-import { Box, Flex } from '../../../packages/canon';
-
-const fakeBlockList = [
-  { width: 45, height: 60 },
-  { width: 150, height: 75 },
-  { width: 80, height: 50 },
-  { width: 120, height: 70 },
-  { width: 95, height: 65 },
-  { width: 80, height: 32 },
-  { width: 130, height: 60 },
-  { width: 100, height: 80 },
-  { width: 140, height: 45 },
-  { width: 85, height: 70 },
-  { width: 125, height: 50 },
-];
-
-const FakeBox = ({
-  width = 120,
-  height = 80,
-}: {
-  width?: number;
-  height?: number;
-}) => (
-  <Box
-    style={{
-      background: '#eaf2fd',
-      borderRadius: '4px',
-      boxShadow: '0 0 0 1px #2563eb',
-      width,
-      height,
-      backgroundImage:
-        'url("data:image/svg+xml,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%232563eb%22%20fill-opacity%3D%220.3%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%200h1L0%206V5zM6%205v1H5z%22/%3E%3C/g%3E%3C/svg%3E")',
-    }}
-  />
-);
-
-export const InlinePreview = () => {
-  return (
-    <Flex>
-      {fakeBlockList.map((block, index) => (
-        <FakeBox key={index} width={block.width} height={block.height} />
-      ))}
-    </Flex>
-  );
-};

canon-docs/src/snippets/input.tsx

@@ -1,36 +1,21 @@
 'use client';
 
-import { Input, Grid } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as InputStories from '../../../packages/canon/src/components/Input/Input.stories';
 
-export const InputPreview = () => {
-  return (
-    <div style={{ width: '300px' }}>
-      <Input placeholder="Enter your name" />
-    </div>
-  );
-};
+export const InputSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(InputStories);
+  const [isReady, setIsReady] = useState(false);
 
-export const InputSizes = () => {
-  return (
-    <Grid style={{ width: '300px' }}>
-      <Input size="sm" placeholder="Small" />
-      <Input size="md" placeholder="Medium" />
-    </Grid>
-  );
-};
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
 
-export const InputError = () => {
-  return (
-    <div style={{ width: '300px' }}>
-      <Input required />
-    </div>
-  );
-};
+  if (!isReady) return null;
 
-export const InputPlayground = () => {
-  return (
-    <div style={{ maxWidth: '300px' }}>
-      <Input placeholder="Enter your name" />
-    </div>
-  );
+  if (story === 'Primary') return <stories.Primary />;
+  if (story === 'Sizes') return <stories.Sizes />;
+
+  return null;
 };

canon-docs/src/snippets/text.tsx

@@ -1,94 +1,24 @@
 'use client';
 
-import { Flex, Text } from '../../../packages/canon';
+import { useEffect, useState } from 'react';
+import { composeStories } from '@storybook/react';
+import * as TextStories from '../../../packages/canon/src/components/Text/Text.stories';
 
-export const TextPreview = () => {
-  return (
-    <Text style={{ maxWidth: '600px' }}>
-      A man looks at a painting in a museum and says, “Brothers and sisters I
-      have none, but that man&apos;s father is my father&apos;s son.” Who is in
-      the painting?
-    </Text>
-  );
-};
+export const TextSnippet = ({ story }: { story: string }) => {
+  const stories = composeStories(TextStories);
+  const [isReady, setIsReady] = useState(false);
 
-export const TextAllVariants = () => {
-  return (
-    <Flex direction="column">
-      <Text variant="subtitle" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-      <Text variant="body" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-      <Text variant="caption" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-      <Text variant="label" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-    </Flex>
-  );
-};
+  useEffect(() => {
+    setIsReady(true);
+  }, [story]);
 
-export const TextAllWeights = () => {
-  return (
-    <Flex direction="column">
-      <Text weight="regular" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-      <Text weight="bold" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-    </Flex>
-  );
-};
+  if (!isReady) return null;
 
-export const TextResponsive = () => {
-  return (
-    <Text variant={{ initial: 'body', lg: 'subtitle' }}>Responsive text</Text>
-  );
-};
+  if (story === 'Default') return <stories.Default />;
+  if (story === 'AllVariants') return <stories.AllVariants />;
+  if (story === 'AllWeights') return <stories.AllWeights />;
+  if (story === 'Responsive') return <stories.Responsive />;
+  if (story === 'Playground') return <stories.Playground />;
 
-export const TextPlayground = () => {
-  return (
-    <Flex direction="column">
-      <Text>Subtitle</Text>
-      <Text variant="subtitle" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-      <Text>Body</Text>
-      <Text variant="body" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-      <Text>Caption</Text>
-      <Text variant="caption" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-      <Text>Label</Text>
-      <Text variant="label" style={{ maxWidth: '600px' }}>
-        A man looks at a painting in a museum and says, “Brothers and sisters I
-        have none, but that man&apos;s father is my father&apos;s son.” Who is
-        in the painting?
-      </Text>
-    </Flex>
-  );
+  return null;
 };

packages/canon/src/components/Heading/Heading.stories.tsx

@@ -42,7 +42,7 @@ export const Title1: Story = {
 
 export const AllVariants: Story = {
   render: () => (
-    <Flex>
+    <Flex direction="column" gap="4">
       <Heading variant="display">Display</Heading>
       <Heading variant="title1">Title 1</Heading>
       <Heading variant="title2">Title 2</Heading>
@@ -70,8 +70,7 @@ export const CustomTag: Story = {
 
 export const Playground: Story = {
   render: () => (
-    <Flex>
-      <Text>All variants</Text>
+    <Flex direction="column" gap="4">
       <Heading variant="display">Display</Heading>
       <Heading variant="title1">Title 1</Heading>
       <Heading variant="title2">Title 2</Heading>

packages/canon/src/components/Icon/icons.ts

@@ -130,4 +130,4 @@ export const icons: IconMap = {
   youtube: RiYoutubeLine,
   'zoom-in': RiZoomInLine,
   'zoom-out': RiZoomOutLine,
-};
+} as const;

packages/canon/src/components/Icon/types.ts

@@ -15,6 +15,7 @@
  */
 
 import { ReactNode } from 'react';
+import type { RemixiconComponentType } from '@remixicon/react';
 
 /** @public */
 export type IconNames =
@@ -74,7 +75,7 @@ export type IconNames =
   | 'zoom-out';
 
 /** @public */
-export type IconMap = Partial<Record<IconNames, React.ComponentType>>;
+export type IconMap = Partial<Record<IconNames, RemixiconComponentType>>;
 
 /** @public */
 export type IconProps = {
@@ -92,5 +93,5 @@ export interface IconContextProps {
 /** @public */
 export interface IconProviderProps {
   children?: ReactNode;
-  overrides?: Partial<Record<IconNames, React.ComponentType>>;
+  overrides?: Partial<Record<IconNames, RemixiconComponentType>>;
 }