story foo

.storybook/StoryWrapper.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-app :theme="themeName" :full-height="false">
+    <v-main>
+      <slot name="story"></slot>
+    </v-main>
+  </v-app>
+</template>
+
+
+<script>
+export default {
+  props: {
+    themeName: String,
+  },
+};
+</script>

.storybook/main.ts

@@ -1,7 +1,7 @@
 import type { StorybookConfig } from '@storybook/vue3-vite'
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',

.storybook/preview.ts

@@ -1,4 +1,6 @@
-import type { Preview } from '@storybook/vue3'
+import { setup, type Preview } from '@storybook/vue3'
+import { registerPlugins } from '../src/plugins'
+import { withVuetifyTheme } from './withVuetifyTheme.decorator';
 
 // import type { StoryIdentifier } from "@storybook/types"
 
@@ -14,7 +16,6 @@ const preview: Preview = {
     options: {
       // The `a` and `b` arguments in this function have a type of `import('@storybook/types').IndexEntry`. Remember that the function is executed in a JavaScript environment, so use JSDoc for IntelliSense to introspect it.
       storySort: (a /*: StoryIdentifier*/, b /*: StoryIdentifier*/) => {
-        console.log('a', a, 'b', b)
         if (a.id === b.id) {
           return 0
         } else {
@@ -25,4 +26,28 @@ const preview: Preview = {
   }
 }
 
+setup((app) => {
+  // Registers your app's plugins into Storybook
+  registerPlugins(app);
+});
+
 export default preview
+
+export const decorators = [withVuetifyTheme];
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    toolbar: {
+      icon: 'paintbrush',
+      // Array of plain string values or MenuItem shape
+      items: [
+        { value: 'customLightTheme', title: 'Light', left: '🌞' },
+        { value: 'dark', title: 'Dark', left: '🌛' },
+      ],
+      // Change title based on selected value
+      dynamicTitle: true,
+    },
+  },
+};

.storybook/withVuetifyTheme.decorator.js

@@ -0,0 +1,20 @@
+import { h } from 'vue';
+import StoryWrapper from './StoryWrapper.vue';
+
+export const DEFAULT_THEME = 'customLightTheme';
+
+export const withVuetifyTheme = (storyFn, context) => {
+  // Pull our global theme variable, fallback to DEFAULT_THEME
+  const themeName = context.globals.theme || DEFAULT_THEME;
+  const story = storyFn();
+
+  return () => {
+    return h(
+      StoryWrapper,
+      { themeName },
+      {
+        story: () => h(story, { ...context.args }),
+      }
+    );
+  };
+};