paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 51 Packages Projects Releases Wiki Activity

Code update

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-03-25 13:32:12 +00:00
parent e0dcdf687f
commit b6e92d8925
29 changed files with 150 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
canon-docs/src/app/(docs)/components/box/page.mdx
+1 -1
View File
@@ -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';
canon-docs/src/app/(docs)/components/button/page.mdx
+2 -2
View File
@@ -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
canon-docs/src/app/(docs)/components/checkbox/page.mdx
+1 -1
View File
@@ -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';
canon-docs/src/app/(docs)/components/container/page.mdx
+1 -1
View File
@@ -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
canon-docs/src/app/(docs)/components/field/page.mdx
+1 -1
View File
@@ -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,
canon-docs/src/app/(docs)/components/flex/page.mdx
+2 -2
View File
@@ -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';
canon-docs/src/app/(docs)/components/grid/page.mdx
+2 -2
View File
@@ -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';
canon-docs/src/app/(docs)/components/heading/page.mdx
+1 -1
View File
@@ -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';
canon-docs/src/app/(docs)/components/icon-button/page.mdx
+2 -2
View File
@@ -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
canon-docs/src/app/(docs)/components/icon/page.mdx
+1 -1
View File
@@ -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';
canon-docs/src/app/(docs)/components/input/page.mdx
+1 -1
View File
@@ -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';
canon-docs/src/app/(docs)/components/text/page.mdx
+1 -1
View File
@@ -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';
canon-docs/src/app/(docs)/theme/theming/page.mdx
+1 -1
View File
@@ -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
canon-docs/src/app/(docs)/theme/typography/page.mdx
+1 -2
View File
@@ -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
canon-docs/src/app/(playground)/playground/page.tsx
+6 -4
View File
@@ -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';
canon-docs/src/snippets/box.tsx
-12
View File
@@ -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 <stories.Preview />;
return null;
};
canon-docs/src/snippets/button.tsx
-18
View File
@@ -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 <stories.Variants />;
if (story === 'Sizes') return <stories.Sizes />;
if (story === 'WithIcons') return <stories.WithIcons />;
if (story === 'FullWidth') return <stories.FullWidth />;
if (story === 'Disabled') return <stories.Disabled />;
if (story === 'Responsive') return <stories.Responsive />;
if (story === 'Playground') return <stories.Playground />;
return null;
};
canon-docs/src/snippets/checkbox.tsx
-14
View File
@@ -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 <stories.Default />;
if (story === 'AllVariants') return <stories.AllVariants />;
if (story === 'Playground') return <stories.Playground />;
return null;
};
canon-docs/src/snippets/_snippets.ts → canon-docs/src/snippets/code-snippets.ts
View File
canon-docs/src/snippets/container.tsx
-12
View File
@@ -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 <stories.Preview />;
return null;
};
canon-docs/src/snippets/field.tsx
-13
View File
@@ -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 <stories.Default />;
if (story === 'WithLabelAndDescription')
return <stories.WithLabelAndDescription />;
return null;
};
canon-docs/src/snippets/flex.tsx
-12
View File
@@ -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 <stories.Default />;
return null;
};
canon-docs/src/snippets/grid.tsx
-12
View File
@@ -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 <stories.Default />;
return null;
};
canon-docs/src/snippets/heading.tsx
-16
View File
@@ -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 <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
-16
View File
@@ -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 <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
-12
View File
@@ -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 <stories.Default />;
return null;
};
canon-docs/src/snippets/input.tsx
-13
View File
@@ -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 <stories.Primary />;
if (story === 'Sizes') return <stories.Sizes />;
return null;
};
canon-docs/src/snippets/stories-snippets.tsx
+126
View File
@@ -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 ? <StoryComponent /> : null;
};
export const ButtonSnippet = ({
story,
}: {
story: keyof typeof ButtonStories;
}) => {
const stories = composeStories(ButtonStories);
const StoryComponent = stories[story as keyof typeof stories];
return StoryComponent ? <StoryComponent /> : null;
};
export const CheckboxSnippet = ({
story,
}: {
story: keyof typeof CheckboxStories;
}) => {
const stories = composeStories(CheckboxStories);
const StoryComponent = stories[story as keyof typeof stories];
return StoryComponent ? <StoryComponent /> : null;
};
export const ContainerSnippet = ({
story,
}: {
story: keyof typeof ContainerStories;
}) => {
const stories = composeStories(ContainerStories);
const StoryComponent = stories[story as keyof typeof stories];
return StoryComponent ? <StoryComponent /> : null;
};
export const FlexSnippet = ({ story }: { story: keyof typeof FlexStories }) => {
const stories = composeStories(FlexStories);
const StoryComponent = stories[story as keyof typeof stories];
return StoryComponent ? <StoryComponent /> : null;
};
export const FieldSnippet = ({
story,
}: {
story: keyof typeof FieldStories;
}) => {
const stories = composeStories(FieldStories);
const StoryComponent = stories[story as keyof typeof stories];
return StoryComponent ? <StoryComponent /> : null;
};
export const GridSnippet = ({ story }: { story: keyof typeof GridStories }) => {
const stories = composeStories(GridStories);
const StoryComponent = stories[story as keyof typeof stories];
return StoryComponent ? <StoryComponent /> : null;
};
export const HeadingSnippet = ({
story,
}: {
story: keyof typeof HeadingStories;
}) => {
const stories = composeStories(HeadingStories);
const StoryComponent = stories[story as keyof typeof stories];
return StoryComponent ? <StoryComponent /> : null;
};
export const IconButtonSnippet = ({
story,
}: {
story: keyof typeof IconButtonStories;
}) => {
const stories = composeStories(IconButtonStories);
const StoryComponent = stories[story as keyof typeof stories];
return StoryComponent ? <StoryComponent /> : null;
};
export const IconSnippet = ({ story }: { story: keyof typeof IconStories }) => {
const stories = composeStories(IconStories);
const StoryComponent = stories[story as keyof typeof stories];
return StoryComponent ? <StoryComponent /> : null;
};
export const InputSnippet = ({
story,
}: {
story: keyof typeof InputStories;
}) => {
const stories = composeStories(InputStories);
const StoryComponent = stories[story as keyof typeof stories];
return StoryComponent ? <StoryComponent /> : null;
};
export const TextSnippet = ({ story }: { story: keyof typeof TextStories }) => {
const stories = composeStories(TextStories);
const StoryComponent = stories[story as keyof typeof stories];
return StoryComponent ? <StoryComponent /> : null;
};
canon-docs/src/snippets/text.tsx
-16
View File
@@ -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 <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 />;
return null;
};