Adding storybook files

src/dispatch/static/dispatch/.storybook/StoryWrapper.vue

@@ -0,0 +1,9 @@
+<template>
+  <v-app>
+    <v-main>
+      <slot name="story"></slot>
+    </v-main>
+  </v-app>
+</template>
+
+<script></script>

src/dispatch/static/dispatch/.storybook/main.js

@@ -0,0 +1,18 @@
+/** @type { import('@storybook/vue3-vite').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "storybook-addon-vuetify3",
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+}
+export default config

src/dispatch/static/dispatch/.storybook/preview.js

@@ -0,0 +1,3 @@
+import { withVuetify } from "storybook-addon-vuetify3/dist/decorators"
+
+export const decorators = [withVuetify]

src/dispatch/static/dispatch/.storybook/withVuetifyTheme.decorator.js

@@ -0,0 +1,18 @@
+// .storybook/withVeutifyTheme.decorator.js
+import { h } from "vue"
+import StoryWrapper from "./StoryWrapper.vue"
+
+export const withVuetifyTheme = (storyFn, context) => {
+  const story = storyFn()
+
+  return () => {
+    return h(
+      StoryWrapper,
+      {}, // Props for StoryWrapper
+      {
+        // Puts your story into StoryWrapper's "story" slot with your story args
+        story: () => h(story, { ...context.args }),
+      }
+    )
+  }
+}

src/dispatch/static/dispatch/src/stories/Button.stories.js

@@ -0,0 +1,48 @@
+import MyButton from './Button.vue';
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+export default {
+  title: 'Example/Button',
+  component: MyButton,
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: {
+      control: 'color',
+    },
+    onClick: {},
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/vue/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

src/dispatch/static/dispatch/src/stories/Button.vue

@@ -0,0 +1,52 @@
+<template>
+  <v-btn type="button" :class="classes" @click="onClick" :style="style">{{ label }}</v-btn>
+</template>
+
+<script>
+import "./button.css"
+import { reactive, computed } from "vue"
+
+export default {
+  name: "my-button",
+
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    primary: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      validator: function (value) {
+        return ["small", "medium", "large"].indexOf(value) !== -1
+      },
+    },
+    backgroundColor: {
+      type: String,
+    },
+  },
+
+  emits: ["click"],
+
+  setup(props, { emit }) {
+    props = reactive(props)
+    return {
+      classes: computed(() => ({
+        "storybook-button": true,
+        "storybook-button--primary": props.primary,
+        "storybook-button--secondary": !props.primary,
+        [`storybook-button--${props.size || "medium"}`]: true,
+      })),
+      style: computed(() => ({
+        backgroundColor: props.backgroundColor,
+      })),
+      onClick() {
+        emit("click")
+      },
+    }
+  },
+}
+</script>