lint .storybook

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 build/
 coverage/
+!.storybook/

.storybook/StoryWrapper.vue

@@ -8,11 +8,15 @@
 </template>
 
 <script>
+export const DEFAULT_THEME = 'light'
 export default {
   props: {
-    themeName: String,
+    themeName: {
+      default: DEFAULT_THEME,
+      type: String,
+    },
   },
-};
+}
 </script>
 
 <style>

.storybook/main.ts

@@ -1,21 +1,22 @@
-import type { StorybookConfig } from "@storybook/vue3-vite";
+import type { StorybookConfig } from '@storybook/vue3-vite'
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
   ],
   framework: {
-    name: "@storybook/vue3-vite",
+    name: '@storybook/vue3-vite',
     options: {},
   },
   docs: {
-    autodocs: "tag",
+    autodocs: 'tag',
   },
   core: {
     disableTelemetry: true, // 👈 Disables telemetry
   },
-};
-export default config;
+}
+
+export default config

.storybook/preview.ts

@@ -1,12 +1,14 @@
-import type { Preview } from "@storybook/vue3";
+import { setup } from '@storybook/vue3'
 import { createPinia } from 'pinia'
 
-import { withVuetifyTheme } from './withVuetifyTheme.decorator';
+// eslint-disable-next-line  import/no-relative-parent-imports
 import i18n from '../renderer/i18n'
+// eslint-disable-next-line  import/no-relative-parent-imports
 import CreateVuetify from '../renderer/vuetify'
-// .storybook/preview.js
 
-import { setup } from '@storybook/vue3';
+import { withVuetifyTheme } from './withVuetifyTheme.decorator'
+
+import type { Preview } from '@storybook/vue3'
 
 setup((app) => {
   // Registers your app's plugins into Storybook
@@ -15,9 +17,9 @@ setup((app) => {
   app.use(pinia)
   app.use(i18n)
   app.use(CreateVuetify(i18n))
-});
+})
 
-export const decorators = [withVuetifyTheme];
+export const decorators = [withVuetifyTheme]
 
 export const globalTypes = {
   theme: {
@@ -35,11 +37,11 @@ export const globalTypes = {
       dynamicTitle: true,
     },
   },
-};
+}
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -47,6 +49,6 @@ const preview: Preview = {
       },
     },
   },
-};
+}
 
-export default preview;
+export default preview

.storybook/withVuetifyTheme.decorator.ts

@@ -1,13 +1,11 @@
-// .storybook/withVeutifyTheme.decorator.js
-import { h } from 'vue';
-import StoryWrapper from './StoryWrapper.vue';
+import { h } from 'vue'
 
-export const DEFAULT_THEME = 'light';
+import StoryWrapper, { DEFAULT_THEME } from './StoryWrapper.vue'
 
 export const withVuetifyTheme = (storyFn, context) => {
   // Pull our global theme variable, fallback to DEFAULT_THEME
-  const themeName = context.globals.theme || DEFAULT_THEME;
-  const story = storyFn();
+  const themeName = context.globals.theme || DEFAULT_THEME
+  const story = storyFn()
 
   return () => {
     return h(
@@ -16,7 +14,7 @@ export const withVuetifyTheme = (storyFn, context) => {
       {
         // Puts your story into StoryWrapper's "story" slot with your story args
         story: () => h(story, { ...context.args }),
-      }
-    );
-  };
-};
+      },
+    )
+  }
+}

README.md

@@ -77,10 +77,10 @@ The following endpoints are provided given the right command is executed:
 - [x] eslint
 - [x] vitest
 - [x] vue-i18n
+- [x] docker
 - [ ] figma
 - [ ] chromatic
 - [ ] documentation?
-- [ ] docker
 - [ ] github actions
 
 ## Known Problems