[6.x] Storybook

.gitignore

@@ -16,3 +16,4 @@ composer.lock
 .env
 bundle-stats.html
 .claude
+storybook-static

.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/vue3-vite';
+
+const config: StorybookConfig = {
+    stories: [
+        '../resources/js/stories/**/*.mdx',
+        '../resources/js/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'
+    ],
+    addons: [
+        '@storybook/addon-docs',
+        '@storybook/addon-a11y'
+    ],
+    staticDirs: ['./public'],
+    framework: {
+        name: '@storybook/vue3-vite',
+        options: {
+            docgen: 'vue-component-meta'
+        }
+    },
+};
+
+export default config;

.storybook/manager-head.html

@@ -0,0 +1,3 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">

.storybook/manager.css

@@ -0,0 +1,3 @@
+.sidebar-container {
+    background: linear-gradient(225deg, #e6f8ff, #f9e6ff, hsl(35deg 100% 95%)) !important;
+}

.storybook/manager.ts

@@ -0,0 +1,16 @@
+import { addons } from 'storybook/manager-api';
+import { create } from 'storybook/theming';
+import './manager.css';
+
+const theme = create({
+  base: 'light',
+  brandTitle: 'Statamic UI Components',
+  brandUrl: 'https://statamic.dev',
+  brandImage: '/logo.png',
+  fontBase: '"Lexend", sans-serif',
+  fontCode: '"Source Code Pro", monospace'
+});
+
+addons.setConfig({
+  theme,
+});

.storybook/preview-head.html

@@ -0,0 +1,7 @@
+<link rel="preconnect" href="https://use.typekit.net" crossorigin>
+<link rel="preconnect" href="https://p.typekit.net" crossorigin>
+<link rel="stylesheet" href="https://use.typekit.net/wyy0pka.css"/>
+
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Lexend:[email protected]&family=Source+Code+Pro:ital,wght@0,200..800;1,200..900&display=swap" rel="stylesheet">

.storybook/preview.ts

@@ -0,0 +1,59 @@
+import type { Preview } from '@storybook/vue3-vite';
+import { setup } from '@storybook/vue3';
+import { create as createTheme } from 'storybook/theming';
+import { router } from '@inertiajs/vue3';
+import { action } from 'storybook/actions';
+import './storybook.css';
+import './theme.css';
+import { translate } from '@/translations/translator';
+import registerUiComponents from '@/bootstrap/ui';
+import DateFormatter from '@/components/DateFormatter';
+
+// Intercept Inertia navigation and log to Actions tab.
+router.on('before', (event) => {
+  action('inertia navigate')(event.detail.visit.url);
+  return false;
+});
+
+setup(async (app) => {
+  app.config.globalProperties.__ = translate;
+  app.config.globalProperties.$date = new DateFormatter;
+  await registerUiComponents(app);
+});
+
+const preview: Preview = {
+    parameters: {
+        layout: 'centered',
+
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+
+        docs: {
+            theme: createTheme({
+                base: 'light',
+                fontBase: '"Lexend", sans-serif',
+                fontCode: '"Source Code Pro", monospace',
+            }),
+        },
+
+        a11y: {
+            test: "todo",
+        },
+
+        backgrounds: {
+            disable: true
+        },
+
+        options: {
+            storySort: {
+                order: ['Getting Started', 'Installation', '*', 'Components'],
+            },
+        },
+    },
+};
+
+export default preview;

.storybook/storybook.css

@@ -0,0 +1,40 @@
+@import 'tailwindcss';
+@import '../resources/css/ui.css';
+@custom-variant dark (&:where(.dark, .dark *));
+
+.sbdocs h1,
+.sbdocs h2,
+.sbdocs h3,
+.sbdocs h4,
+.sbdocs h5,
+.sbdocs h6 {
+    font-family: p22-mackinac-pro, serif;
+}
+
+.sbdocs h1 {
+    font-size: 2.5rem;
+}
+
+.sbdocs h2 {
+    font-size: 1.75rem;
+    font-weight: 600;
+}
+
+.sbdocs h3 {
+    font-size: 1.25rem;
+}
+
+.sbdocs p,
+.sbdocs li {
+    font-size: 1rem;
+    line-height: 1.6;
+    font-weight: 350;
+}
+
+.prismjs {
+    font-size: 1rem;
+}
+
+.sbdocs.sbdocs-wrapper {
+    padding: 2rem 4rem;
+}

.storybook/theme.css

@@ -0,0 +1,42 @@
+/*
+These variables are copied from what gets output into the <head>
+of the control panel. Since they are defined in PHP we have to
+manually copy them here.
+*/
+:root {
+    --theme-color-primary: oklch(0.457 0.24 277.023);
+    --theme-color-gray-50: oklch(0.985 0 0);
+    --theme-color-gray-100: oklch(0.967 0.001 286.375);
+    --theme-color-gray-150: oklch(0.956 0.0022 286.32);
+    --theme-color-gray-200: oklch(0.92 0.004 286.32);
+    --theme-color-gray-300: oklch(0.871 0.006 286.286);
+    --theme-color-gray-400: oklch(0.705 0.015 286.067);
+    --theme-color-gray-500: oklch(0.552 0.016 285.938);
+    --theme-color-gray-600: oklch(0.442 0.017 285.786);
+    --theme-color-gray-700: oklch(0.37 0.013 285.805);
+    --theme-color-gray-800: oklch(0.274 0.006 286.033);
+    --theme-color-gray-850: oklch(0.236 0.006 286.015);
+    --theme-color-gray-900: oklch(0.21 0.006 285.885);
+    --theme-color-gray-925: oklch(0.1982 0.0042 285.73);
+    --theme-color-gray-950: oklch(0.141 0.005 285.823);
+    --theme-color-success: oklch(0.792 0.209 151.711);
+    --theme-color-danger: oklch(0.577 0.245 27.325);
+    --theme-color-body-bg: oklch(0.967 0.001 286.375);
+    --theme-color-body-border: transparent;
+    --theme-color-content-bg: white;
+    --theme-color-content-border: oklch(0.92 0.004 286.32);
+    --theme-color-global-header-bg: oklch(0.274 0.006 286.033);
+    --theme-color-progress-bar: oklch(0.457 0.24 277.023);
+    --theme-color-focus-outline: oklch(0.707 0.165 254.624);
+    --theme-color-ui-accent-bg: oklch(0.457 0.24 277.023);
+    --theme-color-ui-accent-text: var(--theme-color-ui-accent-bg);
+    --theme-color-switch-bg: var(--theme-color-ui-accent-bg);
+
+    &.dark {
+        --theme-color-body-bg: oklch(0.21 0.006 285.885);
+        --theme-color-body-border: oklch(0.141 0.005 285.823);
+        --theme-color-content-bg: oklch(0.21 0.006 285.885);
+        --theme-color-content-border: oklch(0.141 0.005 285.823);
+        --theme-color-ui-accent-text: oklch(0.673 0.182 276.935);
+    }
+}

.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';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);