Add a storybook for the Vue side

Author: brianjhanson

.storybook/main.ts

@@ -0,0 +1,49 @@
+import type {StorybookConfig} from '@storybook/vue3-vite';
+import {dirname, join} from 'path';
+import {mergeConfig} from 'vite';
+import vue from '@vitejs/plugin-vue';
+import tailwindcss from '@tailwindcss/vite';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): string {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const config: StorybookConfig = {
+  stories: ['../resources/js/**/*.mdx', '../resources/js/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-themes'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-a11y'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/vue3-vite') as '@storybook/vue3-vite',
+    options: {},
+  },
+  viteFinal(config) {
+    return mergeConfig(config, {
+      plugins: [
+        tailwindcss(),
+        vue({
+          template: {
+            compilerOptions: {
+              // Treat craft-* tags as custom elements (web components from @craftcms/cp)
+              isCustomElement: (tag) => tag.startsWith('craft-'),
+            },
+          },
+        }),
+      ],
+      resolve: {
+        alias: {
+          '@': join(__dirname, '../resources/js'),
+          vue: 'vue/dist/vue.esm-bundler.js',
+        },
+      },
+    });
+  },
+};
+
+export default config;

.storybook/preview.css

@@ -0,0 +1,57 @@
+/* Storybook preview utilities */
+
+/* Layout helpers for stories */
+.sb-flex {
+  display: flex;
+}
+
+.sb-flex-col {
+  flex-direction: column;
+}
+
+.sb-items-center {
+  align-items: center;
+}
+
+.sb-justify-center {
+  justify-content: center;
+}
+
+.sb-gap-2 {
+  gap: 0.5rem;
+}
+
+.sb-gap-4 {
+  gap: 1rem;
+}
+
+.sb-p-4 {
+  padding: 1rem;
+}
+
+/* Grid utilities */
+.sb-grid {
+  display: grid;
+}
+
+.sb-grid-cols-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.sb-grid-cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+/* Stack layout */
+.sb-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.sb-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}

.storybook/preview.ts

@@ -0,0 +1,40 @@
+import type {Preview} from '@storybook/vue3';
+import {withThemeByDataAttribute} from '@storybook/addon-themes';
+import '../resources/css/cp.css';
+import './preview.css';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      expanded: true,
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    options: {
+      storySort: {
+        method: 'alphabetical',
+      },
+    },
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo',
+    },
+  },
+  decorators: [
+    withThemeByDataAttribute({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+      attributeName: 'data-theme',
+    }),
+  ],
+  tags: ['autodocs'],
+};
+
+export default preview;