diff --git a/canon-docs/src/app/(docs)/components/box/page.mdx b/canon-docs/src/app/(docs)/components/box/page.mdx index 1a96ffc621..25ce3b6cd8 100644 --- a/canon-docs/src/app/(docs)/components/box/page.mdx +++ b/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 { BoxSnippet } from '@/snippets/box'; +import { BoxSnippet } from '@/snippets/stories-snippets'; import { boxPropDefs } from './props'; import { spacingPropDefs } from '../../../../utils/propDefs'; diff --git a/canon-docs/src/app/(docs)/components/button/page.mdx b/canon-docs/src/app/(docs)/components/button/page.mdx index 38eb819d4d..e1ecee8920 100644 --- a/canon-docs/src/app/(docs)/components/button/page.mdx +++ b/canon-docs/src/app/(docs)/components/button/page.mdx @@ -2,8 +2,8 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { Tabs } from '@/components/Tabs'; import { CodeBlock } from '@/components/CodeBlock'; -import { ButtonSnippet } from '@/snippets/button'; -import { buttonVariants } from '@/snippets/_snippets'; +import { ButtonSnippet } from '@/snippets/stories-snippets'; +import { buttonVariants } from '@/snippets/code-snippets'; import { buttonPropDefs } from './props'; # Button diff --git a/canon-docs/src/app/(docs)/components/checkbox/page.mdx b/canon-docs/src/app/(docs)/components/checkbox/page.mdx index 42d67c7857..413636dc9a 100644 --- a/canon-docs/src/app/(docs)/components/checkbox/page.mdx +++ b/canon-docs/src/app/(docs)/components/checkbox/page.mdx @@ -1,5 +1,5 @@ import { PropsTable } from '@/components/PropsTable'; -import { CheckboxSnippet } from '@/snippets/checkbox'; +import { CheckboxSnippet } from '@/snippets/stories-snippets'; import { Snippet } from '@/components/Snippet'; import { Tabs } from '@/components/Tabs'; import { CodeBlock } from '@/components/CodeBlock'; diff --git a/canon-docs/src/app/(docs)/components/container/page.mdx b/canon-docs/src/app/(docs)/components/container/page.mdx index cd6b2d738d..40f0321624 100644 --- a/canon-docs/src/app/(docs)/components/container/page.mdx +++ b/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 { ContainerSnippet } from '@/snippets/container'; +import { ContainerSnippet } from '@/snippets/stories-snippets'; import { containerPropDefs } from './props'; # Container diff --git a/canon-docs/src/app/(docs)/components/field/page.mdx b/canon-docs/src/app/(docs)/components/field/page.mdx index ceaddcaac5..1526ce8c9f 100644 --- a/canon-docs/src/app/(docs)/components/field/page.mdx +++ b/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 { FieldSnippet } from '@/snippets/field'; +import { FieldSnippet } from '@/snippets/stories-snippets'; import { BaseUI } from '@/components/HeadlessBanners/BaseUI'; import { fieldRootPropDefs, diff --git a/canon-docs/src/app/(docs)/components/flex/page.mdx b/canon-docs/src/app/(docs)/components/flex/page.mdx index 3d0c22a90b..8150f3e3c5 100644 --- a/canon-docs/src/app/(docs)/components/flex/page.mdx +++ b/canon-docs/src/app/(docs)/components/flex/page.mdx @@ -6,9 +6,9 @@ import { flexSimple, flexResponsive, flexAlign, -} from '@/snippets/_snippets'; +} from '@/snippets/code-snippets'; import { Snippet } from '@/components/Snippet'; -import { FlexSnippet } from '@/snippets/flex'; +import { FlexSnippet } from '@/snippets/stories-snippets'; import { flexPropDefs } from './props'; import { spacingPropDefs } from '../../../../utils/propDefs'; diff --git a/canon-docs/src/app/(docs)/components/grid/page.mdx b/canon-docs/src/app/(docs)/components/grid/page.mdx index 94f3eaec08..c8604076eb 100644 --- a/canon-docs/src/app/(docs)/components/grid/page.mdx +++ b/canon-docs/src/app/(docs)/components/grid/page.mdx @@ -1,9 +1,9 @@ import { CodeBlock } from '@/components/CodeBlock'; import { PropsTable } from '@/components/PropsTable'; import { Tabs } from '@/components/Tabs'; -import { grid } from '@/snippets/_snippets'; +import { grid } from '@/snippets/code-snippets'; import { Snippet } from '@/components/Snippet'; -import { GridSnippet } from '@/snippets/grid'; +import { GridSnippet } from '@/snippets/stories-snippets'; import { spacingPropDefs } from '../../../../utils/propDefs'; import { gridPropDefs, gridItemPropDefs } from './props'; diff --git a/canon-docs/src/app/(docs)/components/heading/page.mdx b/canon-docs/src/app/(docs)/components/heading/page.mdx index af4ea94648..10fd60bef1 100644 --- a/canon-docs/src/app/(docs)/components/heading/page.mdx +++ b/canon-docs/src/app/(docs)/components/heading/page.mdx @@ -1,5 +1,5 @@ import { PropsTable } from '@/components/PropsTable'; -import { HeadingSnippet } from '@/snippets/heading'; +import { HeadingSnippet } from '@/snippets/stories-snippets'; import { Snippet } from '@/components/Snippet'; import { Tabs } from '@/components/Tabs'; import { CodeBlock } from '@/components/CodeBlock'; diff --git a/canon-docs/src/app/(docs)/components/icon-button/page.mdx b/canon-docs/src/app/(docs)/components/icon-button/page.mdx index 12eb8c61ce..60530ec9ea 100644 --- a/canon-docs/src/app/(docs)/components/icon-button/page.mdx +++ b/canon-docs/src/app/(docs)/components/icon-button/page.mdx @@ -2,8 +2,8 @@ import { PropsTable } from '@/components/PropsTable'; import { Snippet } from '@/components/Snippet'; import { Tabs } from '@/components/Tabs'; import { CodeBlock } from '@/components/CodeBlock'; -import { IconButtonSnippet } from '@/snippets/icon-button'; -import { iconButtonVariants } from '@/snippets/_snippets'; +import { IconButtonSnippet } from '@/snippets/stories-snippets'; +import { iconButtonVariants } from '@/snippets/code-snippets'; import { iconButtonPropDefs } from './props'; # Icon Button diff --git a/canon-docs/src/app/(docs)/components/icon/page.mdx b/canon-docs/src/app/(docs)/components/icon/page.mdx index 78d8c85d01..66be460d13 100644 --- a/canon-docs/src/app/(docs)/components/icon/page.mdx +++ b/canon-docs/src/app/(docs)/components/icon/page.mdx @@ -1,5 +1,5 @@ import { PropsTable } from '@/components/PropsTable'; -import { IconSnippet } from '@/snippets/icon'; +import { IconSnippet } from '@/snippets/stories-snippets'; import { Snippet } from '@/components/Snippet'; import { Tabs } from '@/components/Tabs'; import { CodeBlock } from '@/components/CodeBlock'; diff --git a/canon-docs/src/app/(docs)/components/input/page.mdx b/canon-docs/src/app/(docs)/components/input/page.mdx index a74862a62e..0ecaaa5409 100644 --- a/canon-docs/src/app/(docs)/components/input/page.mdx +++ b/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 { InputSnippet } from '@/snippets/input'; +import { InputSnippet } from '@/snippets/stories-snippets'; import { BaseUI } from '@/components/HeadlessBanners/BaseUI'; import { inputPropDefs } from './props'; diff --git a/canon-docs/src/app/(docs)/components/text/page.mdx b/canon-docs/src/app/(docs)/components/text/page.mdx index 877f953c43..70d5de5504 100644 --- a/canon-docs/src/app/(docs)/components/text/page.mdx +++ b/canon-docs/src/app/(docs)/components/text/page.mdx @@ -1,5 +1,5 @@ import { PropsTable } from '@/components/PropsTable'; -import { TextSnippet } from '@/snippets/text'; +import { TextSnippet } from '@/snippets/stories-snippets'; import { Snippet } from '@/components/Snippet'; import { Tabs } from '@/components/Tabs'; import { CodeBlock } from '@/components/CodeBlock'; diff --git a/canon-docs/src/app/(docs)/theme/theming/page.mdx b/canon-docs/src/app/(docs)/theme/theming/page.mdx index cab9480a14..e3fc42da44 100644 --- a/canon-docs/src/app/(docs)/theme/theming/page.mdx +++ b/canon-docs/src/app/(docs)/theme/theming/page.mdx @@ -1,7 +1,7 @@ import { CodeBlock } from '@/components/CodeBlock'; import * as Table from '@/components/Table'; import { Chip } from '@/components/Chip'; -import { customTheme } from '@/snippets/_snippets'; +import { customTheme } from '@/snippets/code-snippets'; # Theming diff --git a/canon-docs/src/app/(docs)/theme/typography/page.mdx b/canon-docs/src/app/(docs)/theme/typography/page.mdx index 9ec36d6e8b..98a342bc91 100644 --- a/canon-docs/src/app/(docs)/theme/typography/page.mdx +++ b/canon-docs/src/app/(docs)/theme/typography/page.mdx @@ -1,5 +1,4 @@ -import { HeadingSnippet } from '@/snippets/heading'; -import { TextSnippet } from '@/snippets/text'; +import { HeadingSnippet, TextSnippet } from '@/snippets/stories-snippets'; import { Snippet } from '@/components/Snippet'; # Typography diff --git a/canon-docs/src/app/(playground)/playground/page.tsx b/canon-docs/src/app/(playground)/playground/page.tsx index 7184227a0a..3f1675551e 100644 --- a/canon-docs/src/app/(playground)/playground/page.tsx +++ b/canon-docs/src/app/(playground)/playground/page.tsx @@ -5,10 +5,12 @@ import { Grid, Flex, Text } from '../../../../../packages/canon'; import { screenSizes } from '@/utils/data'; import { Frame } from '@/components/Frame'; import { usePlayground } from '@/utils/playground-context'; -import { ButtonSnippet } from '@/snippets/button'; -import { CheckboxSnippet } from '@/snippets/checkbox'; -import { HeadingSnippet } from '@/snippets/heading'; -import { TextSnippet } from '@/snippets/text'; +import { + ButtonSnippet, + CheckboxSnippet, + HeadingSnippet, + TextSnippet, +} from '@/snippets/stories-snippets'; import styles from './styles.module.css'; diff --git a/canon-docs/src/snippets/box.tsx b/canon-docs/src/snippets/box.tsx deleted file mode 100644 index df254b9f7e..0000000000 --- a/canon-docs/src/snippets/box.tsx +++ /dev/null @@ -1,12 +0,0 @@ -'use client'; - -import { composeStories } from '@storybook/react'; -import * as BoxStories from '../../../packages/canon/src/components/Box/Box.stories'; - -export const BoxSnippet = ({ story }: { story: string }) => { - const stories = composeStories(BoxStories); - - if (story === 'Preview') return ; - - return null; -}; diff --git a/canon-docs/src/snippets/button.tsx b/canon-docs/src/snippets/button.tsx deleted file mode 100644 index eaf87c7dce..0000000000 --- a/canon-docs/src/snippets/button.tsx +++ /dev/null @@ -1,18 +0,0 @@ -'use client'; - -import { composeStories } from '@storybook/react'; -import * as ButtonStories from '../../../packages/canon/src/components/Button/Button.stories'; - -export const ButtonSnippet = ({ story }: { story: string }) => { - const stories = composeStories(ButtonStories); - - if (story === 'Variants') return ; - if (story === 'Sizes') return ; - if (story === 'WithIcons') return ; - if (story === 'FullWidth') return ; - if (story === 'Disabled') return ; - if (story === 'Responsive') return ; - if (story === 'Playground') return ; - - return null; -}; diff --git a/canon-docs/src/snippets/checkbox.tsx b/canon-docs/src/snippets/checkbox.tsx deleted file mode 100644 index 888f24c228..0000000000 --- a/canon-docs/src/snippets/checkbox.tsx +++ /dev/null @@ -1,14 +0,0 @@ -'use client'; - -import { composeStories } from '@storybook/react'; -import * as CheckboxStories from '../../../packages/canon/src/components/Checkbox/Checkbox.stories'; - -export const CheckboxSnippet = ({ story }: { story: string }) => { - const stories = composeStories(CheckboxStories); - - if (story === 'Default') return ; - if (story === 'AllVariants') return ; - if (story === 'Playground') return ; - - return null; -}; diff --git a/canon-docs/src/snippets/_snippets.ts b/canon-docs/src/snippets/code-snippets.ts similarity index 100% rename from canon-docs/src/snippets/_snippets.ts rename to canon-docs/src/snippets/code-snippets.ts diff --git a/canon-docs/src/snippets/container.tsx b/canon-docs/src/snippets/container.tsx deleted file mode 100644 index 9faa6e06e2..0000000000 --- a/canon-docs/src/snippets/container.tsx +++ /dev/null @@ -1,12 +0,0 @@ -'use client'; - -import { composeStories } from '@storybook/react'; -import * as ContainerStories from '../../../packages/canon/src/components/Container/Container.stories'; - -export const ContainerSnippet = ({ story }: { story: string }) => { - const stories = composeStories(ContainerStories); - - if (story === 'Preview') return ; - - return null; -}; diff --git a/canon-docs/src/snippets/field.tsx b/canon-docs/src/snippets/field.tsx deleted file mode 100644 index 2c913472d7..0000000000 --- a/canon-docs/src/snippets/field.tsx +++ /dev/null @@ -1,13 +0,0 @@ -'use client'; - -import { composeStories } from '@storybook/react'; -import * as FieldStories from '../../../packages/canon/src/components/Field/Field.stories'; - -export const FieldSnippet = ({ story }: { story: string }) => { - const stories = composeStories(FieldStories); - - if (story === 'Default') return ; - if (story === 'WithLabelAndDescription') - return ; - return null; -}; diff --git a/canon-docs/src/snippets/flex.tsx b/canon-docs/src/snippets/flex.tsx deleted file mode 100644 index c4fc40926e..0000000000 --- a/canon-docs/src/snippets/flex.tsx +++ /dev/null @@ -1,12 +0,0 @@ -'use client'; - -import { composeStories } from '@storybook/react'; -import * as FlexStories from '../../../packages/canon/src/components/Flex/Flex.stories'; - -export const FlexSnippet = ({ story }: { story: string }) => { - const stories = composeStories(FlexStories); - - if (story === 'Default') return ; - - return null; -}; diff --git a/canon-docs/src/snippets/grid.tsx b/canon-docs/src/snippets/grid.tsx deleted file mode 100644 index 1a41fe8ee6..0000000000 --- a/canon-docs/src/snippets/grid.tsx +++ /dev/null @@ -1,12 +0,0 @@ -'use client'; - -import { composeStories } from '@storybook/react'; -import * as GridStories from '../../../packages/canon/src/components/Grid/Grid.stories'; - -export const GridSnippet = ({ story }: { story: string }) => { - const stories = composeStories(GridStories); - - if (story === 'Default') return ; - - return null; -}; diff --git a/canon-docs/src/snippets/heading.tsx b/canon-docs/src/snippets/heading.tsx deleted file mode 100644 index b4e3ac9997..0000000000 --- a/canon-docs/src/snippets/heading.tsx +++ /dev/null @@ -1,16 +0,0 @@ -'use client'; - -import { composeStories } from '@storybook/react'; -import * as HeadingStories from '../../../packages/canon/src/components/Heading/Heading.stories'; - -export const HeadingSnippet = ({ story }: { story: string }) => { - const stories = composeStories(HeadingStories); - - if (story === 'Default') return ; - if (story === 'Title1') return ; - if (story === 'AllVariants') return ; - if (story === 'Responsive') return ; - if (story === 'Playground') return ; - - return null; -}; diff --git a/canon-docs/src/snippets/icon-button.tsx b/canon-docs/src/snippets/icon-button.tsx deleted file mode 100644 index b346d0be4f..0000000000 --- a/canon-docs/src/snippets/icon-button.tsx +++ /dev/null @@ -1,16 +0,0 @@ -'use client'; - -import { composeStories } from '@storybook/react'; -import * as IconButtonStories from '../../../packages/canon/src/components/IconButton/IconButton.stories'; - -export const IconButtonSnippet = ({ story }: { story: string }) => { - const stories = composeStories(IconButtonStories); - - if (story === 'Variants') return ; - if (story === 'Sizes') return ; - if (story === 'Disabled') return ; - if (story === 'Responsive') return ; - if (story === 'Playground') return ; - - return null; -}; diff --git a/canon-docs/src/snippets/icon.tsx b/canon-docs/src/snippets/icon.tsx deleted file mode 100644 index 978af55204..0000000000 --- a/canon-docs/src/snippets/icon.tsx +++ /dev/null @@ -1,12 +0,0 @@ -'use client'; - -import { composeStories } from '@storybook/react'; -import * as IconStories from '../../../packages/canon/src/components/Icon/Icon.stories'; - -export const IconSnippet = ({ story }: { story: string }) => { - const stories = composeStories(IconStories); - - if (story === 'Default') return ; - - return null; -}; diff --git a/canon-docs/src/snippets/input.tsx b/canon-docs/src/snippets/input.tsx deleted file mode 100644 index 00f5dc5a01..0000000000 --- a/canon-docs/src/snippets/input.tsx +++ /dev/null @@ -1,13 +0,0 @@ -'use client'; - -import { composeStories } from '@storybook/react'; -import * as InputStories from '../../../packages/canon/src/components/Input/Input.stories'; - -export const InputSnippet = ({ story }: { story: string }) => { - const stories = composeStories(InputStories); - - if (story === 'Primary') return ; - if (story === 'Sizes') return ; - - return null; -}; diff --git a/canon-docs/src/snippets/stories-snippets.tsx b/canon-docs/src/snippets/stories-snippets.tsx new file mode 100644 index 0000000000..e7cc92811d --- /dev/null +++ b/canon-docs/src/snippets/stories-snippets.tsx @@ -0,0 +1,126 @@ +'use client'; + +import { composeStories } from '@storybook/react'; +import * as BoxStories from '../../../packages/canon/src/components/Box/Box.stories'; +import * as ButtonStories from '../../../packages/canon/src/components/Button/Button.stories'; +import * as CheckboxStories from '../../../packages/canon/src/components/Checkbox/Checkbox.stories'; +import * as ContainerStories from '../../../packages/canon/src/components/Container/Container.stories'; +import * as FieldStories from '../../../packages/canon/src/components/Field/Field.stories'; +import * as GridStories from '../../../packages/canon/src/components/Grid/Grid.stories'; +import * as HeadingStories from '../../../packages/canon/src/components/Heading/Heading.stories'; +import * as IconButtonStories from '../../../packages/canon/src/components/IconButton/IconButton.stories'; +import * as IconStories from '../../../packages/canon/src/components/Icon/Icon.stories'; +import * as InputStories from '../../../packages/canon/src/components/Input/Input.stories'; +import * as TextStories from '../../../packages/canon/src/components/Text/Text.stories'; +import * as FlexStories from '../../../packages/canon/src/components/Flex/Flex.stories'; +export const BoxSnippet = ({ story }: { story: keyof typeof BoxStories }) => { + const stories = composeStories(BoxStories); + const StoryComponent = stories[story as keyof typeof stories]; + + return StoryComponent ? : null; +}; + +export const ButtonSnippet = ({ + story, +}: { + story: keyof typeof ButtonStories; +}) => { + const stories = composeStories(ButtonStories); + const StoryComponent = stories[story as keyof typeof stories]; + + return StoryComponent ? : null; +}; + +export const CheckboxSnippet = ({ + story, +}: { + story: keyof typeof CheckboxStories; +}) => { + const stories = composeStories(CheckboxStories); + const StoryComponent = stories[story as keyof typeof stories]; + + return StoryComponent ? : null; +}; + +export const ContainerSnippet = ({ + story, +}: { + story: keyof typeof ContainerStories; +}) => { + const stories = composeStories(ContainerStories); + const StoryComponent = stories[story as keyof typeof stories]; + + return StoryComponent ? : null; +}; + +export const FlexSnippet = ({ story }: { story: keyof typeof FlexStories }) => { + const stories = composeStories(FlexStories); + const StoryComponent = stories[story as keyof typeof stories]; + + return StoryComponent ? : null; +}; + +export const FieldSnippet = ({ + story, +}: { + story: keyof typeof FieldStories; +}) => { + const stories = composeStories(FieldStories); + const StoryComponent = stories[story as keyof typeof stories]; + + return StoryComponent ? : null; +}; + +export const GridSnippet = ({ story }: { story: keyof typeof GridStories }) => { + const stories = composeStories(GridStories); + const StoryComponent = stories[story as keyof typeof stories]; + + return StoryComponent ? : null; +}; + +export const HeadingSnippet = ({ + story, +}: { + story: keyof typeof HeadingStories; +}) => { + const stories = composeStories(HeadingStories); + const StoryComponent = stories[story as keyof typeof stories]; + + return StoryComponent ? : null; +}; + +export const IconButtonSnippet = ({ + story, +}: { + story: keyof typeof IconButtonStories; +}) => { + const stories = composeStories(IconButtonStories); + const StoryComponent = stories[story as keyof typeof stories]; + + return StoryComponent ? : null; +}; + +export const IconSnippet = ({ story }: { story: keyof typeof IconStories }) => { + const stories = composeStories(IconStories); + const StoryComponent = stories[story as keyof typeof stories]; + + return StoryComponent ? : null; +}; + +export const InputSnippet = ({ + story, +}: { + story: keyof typeof InputStories; +}) => { + const stories = composeStories(InputStories); + const StoryComponent = stories[story as keyof typeof stories]; + + return StoryComponent ? : null; +}; + +export const TextSnippet = ({ story }: { story: keyof typeof TextStories }) => { + const stories = composeStories(TextStories); + const StoryComponent = stories[story as keyof typeof stories]; + + return StoryComponent ? : null; +}; diff --git a/canon-docs/src/snippets/text.tsx b/canon-docs/src/snippets/text.tsx deleted file mode 100644 index b42f58b877..0000000000 --- a/canon-docs/src/snippets/text.tsx +++ /dev/null @@ -1,16 +0,0 @@ -'use client'; - -import { composeStories } from '@storybook/react'; -import * as TextStories from '../../../packages/canon/src/components/Text/Text.stories'; - -export const TextSnippet = ({ story }: { story: string }) => { - const stories = composeStories(TextStories); - - if (story === 'Default') return ; - if (story === 'AllVariants') return ; - if (story === 'AllWeights') return ; - if (story === 'Responsive') return ; - if (story === 'Playground') return ; - - return null; -};