[6.x] Feature/slideouts

.github/workflows/storybook-tests.yml

@@ -0,0 +1,42 @@
+name: 'ci / Storybook Tests'
+
+on:
+  pull_request:
+    paths:
+      - 'resources/js/**'
+      - 'resources/css/**'
+      - 'packages/craftcms-cp/**'
+      - '.storybook/**'
+      - 'vitest.config.ts'
+      - 'package.json'
+      - 'package-lock.json'
+
+concurrency:
+  group: storybook-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  storybook-tests:
+    name: 'Tests / Storybook'
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.58.0-noble
+    timeout-minutes: 10
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
+
+      - name: Build @craftcms/cp
+        run: npm run build:cp
+
+      - name: Run Storybook tests
+        run: npm run test:storybook

.storybook/main.ts

@@ -0,0 +1,42 @@
+import type {StorybookConfig} from '@storybook/vue3-vite';
+import {mergeConfig} from 'vite';
+import {resolve} from 'path';
+import remarkGfm from 'remark-gfm';
+
+const config: StorybookConfig = {
+  stories: [
+    '../resources/js/components/**/*.mdx',
+    '../resources/js/components/**/*.stories.@(js|jsx|mjs|ts|tsx|vue)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-a11y',
+    '@storybook/addon-vitest',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  viteFinal(config) {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          '@': resolve(__dirname, '../resources/js'),
+          '@actions': resolve(__dirname, '../resources/js/actions'),
+        },
+      },
+    });
+  },
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,30 @@
+import type {Preview} from '@storybook/vue3';
+
+// Import global styles
+import '../resources/css/cp.css';
+
+// Import craftcms-cp web components
+import '@craftcms/cp';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      expanded: true,
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    options: {
+      storySort: {
+        method: 'alphabetical',
+      },
+    },
+    a11y: {
+      test: 'todo',
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default preview;

.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+import {setProjectAnnotations} from '@storybook/vue3-vite';
+import * as projectAnnotations from './preview.js';
+
+// Apply the right configuration when testing stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);