diff --git a/packages/design-system/.storybook/main.ts b/packages/design-system/.storybook/main.ts new file mode 100644 index 0000000..d64c4bb --- /dev/null +++ b/packages/design-system/.storybook/main.ts @@ -0,0 +1,9 @@ +import type { StorybookConfig } from '@storybook/react-vite'; + +const config: StorybookConfig = { + framework: '@storybook/react-vite', + stories: ['../src/**/*.stories.@(ts|tsx)'], + addons: ['@storybook/addon-a11y', '@storybook/addon-vitest'], +}; + +export default config; diff --git a/packages/design-system/.storybook/preview.tsx b/packages/design-system/.storybook/preview.tsx new file mode 100644 index 0000000..7335a73 --- /dev/null +++ b/packages/design-system/.storybook/preview.tsx @@ -0,0 +1,24 @@ +import type { Preview } from '@storybook/react'; +import { MoexVibeThemeProvider } from '../src/theme'; + +const preview: Preview = { + decorators: [ + (Story) => ( + + + + ), + ], + parameters: { + a11y: { + test: 'error', + }, + layout: 'centered', + backgrounds: { + default: 'canvas', + values: [{ name: 'canvas', value: '#f5f5f5' }], + }, + }, +}; + +export default preview; diff --git a/packages/design-system/.storybook/vitest.setup.ts b/packages/design-system/.storybook/vitest.setup.ts new file mode 100644 index 0000000..7ea17dc --- /dev/null +++ b/packages/design-system/.storybook/vitest.setup.ts @@ -0,0 +1,5 @@ +import '@storybook/addon-a11y/preview'; +import { setProjectAnnotations } from '@storybook/react'; +import preview from './preview'; + +setProjectAnnotations(preview); diff --git a/packages/design-system/vitest.workspace.ts b/packages/design-system/vitest.workspace.ts new file mode 100644 index 0000000..4cc23c2 --- /dev/null +++ b/packages/design-system/vitest.workspace.ts @@ -0,0 +1,19 @@ +import { defineWorkspace } from 'vitest/config'; + +export default defineWorkspace([ + 'vitest.config.ts', + { + test: { + name: 'storybook', + browser: { + enabled: true, + name: 'chromium', + provider: 'playwright', + headless: true, + }, + setupFiles: ['./.storybook/vitest.setup.ts'], + include: ['src/**/*.stories.test.{ts,tsx}'], + passWithNoTests: true, + }, + }, +]);