build(design-system): configure Storybook workbench

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;

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) => (
+      <MoexVibeThemeProvider>
+        <Story />
+      </MoexVibeThemeProvider>
+    ),
+  ],
+  parameters: {
+    a11y: {
+      test: 'error',
+    },
+    layout: 'centered',
+    backgrounds: {
+      default: 'canvas',
+      values: [{ name: 'canvas', value: '#f5f5f5' }],
+    },
+  },
+};
+
+export default preview;

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);

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,
+    },
+  },
+]);