[6.x] Inertia UI

.storybook/main.ts

@@ -0,0 +1,67 @@
+import type {StorybookConfig} from '@storybook/vue3-vite';
+import {dirname, join} from 'path';
+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: {
+      docgen: 'vue-component-meta',
+    },
+  },
+  viteFinal(config) {
+    // Storybook's vue3-vite framework adds its own Vue plugin with default options.
+    // We need to configure `isCustomElement` so Vue treats `craft-*` tags as web
+    // components (from @craftcms/cp) rather than trying to resolve them as Vue
+    // components. Since Vite's mergeConfig doesn't deep-merge plugin options,
+    // we remove Storybook's Vue plugin and add our own with the correct config.
+    const filteredPlugins = (config.plugins || []).flat().filter((plugin) => {
+      if (plugin && typeof plugin === 'object' && 'name' in plugin) {
+        return plugin.name !== 'vite:vue';
+      }
+      return true;
+    });
+
+    return {
+      ...config,
+      plugins: [
+        ...filteredPlugins,
+        tailwindcss(),
+        vue({
+          template: {
+            compilerOptions: {
+              isCustomElement: (tag) => tag.startsWith('craft-'),
+            },
+          },
+        }),
+      ],
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...(config.resolve?.alias || {}),
+          '@': join(__dirname, '../resources/js'),
+          vue: 'vue/dist/vue.esm-bundler.js',
+          // Mock Inertia for Storybook
+          '@inertiajs/vue3': join(__dirname, 'inertia-mock.ts'),
+        },
+      },
+    };
+  },
+};
+
+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,62 @@
+import type {Preview} from '@storybook/vue3';
+import {setup} from '@storybook/vue3';
+import {withThemeByDataAttribute} from '@storybook/addon-themes';
+import '@craftcms/cp';
+import '../resources/css/cp.css';
+import './preview.css';
+import {installInertiaMock, type PageProps, setPageProps} from './inertia-mock';
+
+// Install the Inertia mock globally
+setup((app) => {
+  installInertiaMock(app);
+});
+
+// Declare module augmentation for Storybook parameters
+declare module '@storybook/vue3' {
+  interface Parameters {
+    inertia?: Partial<PageProps>;
+  }
+}
+
+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: [
+    // Inertia page props decorator - must come before theme decorator
+    (story, context) => {
+      // Reset and apply any story-specific page props
+      const inertiaProps = context.parameters.inertia || {};
+      setPageProps(inertiaProps);
+      return story();
+    },
+    withThemeByDataAttribute({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+      attributeName: 'data-theme',
+    }),
+  ],
+  tags: ['autodocs'],
+};
+
+export default preview;