Merge pull request #181 from buggregator/dx/update-storybook

update storybook varsion

.storybook/preview.ts

@@ -5,31 +5,52 @@ import "../src/assets/vendor";
 import "./stories.css"
 import SfdumpWrap from "../src/shared/lib/vendor/dumper";
 import 'tailwindcss/tailwind.css'
+import type { Preview } from '@storybook/vue3'
 
-export const parameters = {
-  actions: {argTypesRegex: "^on[A-Z].*"},
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  themes: {
-    clearable: false,
-    target: 'html',
-    default: 'dark',
-    list: [
-      {
-        name: 'light',
-        class: [],
-        color: '#ffffff',
-      },
-      {
-        name: 'dark',
-        class: ['dark'],
-        color: '#333333'
+const preview: Preview = {
+  decorators: [
+    (_, { parameters, globals }) => {
+      const html = window?.document?.querySelector('html');
+
+      if (html) {
+        const oldClass = html.classList.value
+        const newClass = parameters?.backgrounds.values.find(({ value }) => globals.backgrounds.value === value)?.class
+
+        if (newClass) {
+          if (oldClass) {
+            html.classList.remove(oldClass)
+          }
+
+          html.classList.add(newClass)
+        }
       }
-    ]
+
+      return { template: '<story/>' };
+    }
+  ],
+  parameters: {
+    actions: {argTypesRegex: "^on[A-Z].*"},
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    backgrounds: {
+      default: 'dark',
+      values: [
+        {
+          name: 'light',
+          value: '#ffffff',
+          class: 'light'
+        },
+        {
+          name: 'dark',
+          value: '#333333',
+          class: 'dark'
+        },
+      ],
+    },
   },
 };
 
@@ -46,3 +67,5 @@ declare global {
   }
 }
 window.Sfdump = SfdumpWrap(window.document)
+
+export default preview;

.storybook/stories.css

@@ -14,5 +14,10 @@ html:before {
   background-repeat: repeat;
   background-position: 0 0;
   opacity: 0.2;
-  z-index: -1;
+  z-index: 1;
+}
+
+body {
+  position: relative;
+  z-index: 1;
 }

nuxt.config.ts

@@ -3,6 +3,7 @@ import pkg from './package.json';
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  devtools: { enabled: true },
   ssr: false,
   router: {
     options: {
@@ -42,6 +43,7 @@ export default defineNuxtConfig({
   modules: [
     '@nuxtjs/tailwindcss',
     '@pinia/nuxt',
+    '@nuxtjs/storybook'
   ],
   typescript: {
     strict: true,

package.json

@@ -4,7 +4,6 @@
   "scripts": {
     "dev": "nuxi dev",
     "build": "nuxi build",
-    "sb": "storybook dev -p 6006",
     "generate": "nuxi generate",
     "preview": "nuxi preview",
     "postinstall": "nuxi prepare",
@@ -32,15 +31,20 @@
   "devDependencies": {
     "@conarti/eslint-plugin-feature-sliced": "^1.0.5",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
+    "@nuxtjs/storybook": "7.0.2",
     "@nuxtjs/tailwindcss": "^6.2.0",
-    "@storybook-vue/nuxt": "^0.2.0",
-    "@storybook/addon-essentials": "^7.6.5",
-    "@storybook/addon-interactions": "^7.6.5",
-    "@storybook/addon-links": "^7.6.5",
-    "@storybook/vue3-vite": "^7.6.5",
+    "@storybook-vue/nuxt": "0.2.6",
+    "@storybook/addon-essentials": "8.0.8",
+    "@storybook/addon-interactions": "8.0.8",
+    "@storybook/addon-links": "8.0.8",
+    "@storybook/blocks": "8.0.8",
+    "@storybook/builder-vite": "8.0.8",
+    "@storybook/test": "8.0.8",
+    "@storybook/vue3": "8.0.8",
     "@types/cytoscape-dagre": "^2.3.1",
     "@types/downloadjs": "^1.4.3",
     "@types/lodash.debounce": "^4.0.7",
+    "@types/node": "^18.17.5",
     "@types/pluralize": "^0.0.33",
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.0",
@@ -52,7 +56,7 @@
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-nuxt": "^4.0.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "^9.9.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.0",
@@ -62,9 +66,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.57.1",
-    "storybook": "^7.6.5",
-    "storybook-addon-nuxt": "^1.3.3",
-    "storybook-addon-themes": "^6.1.0",
+    "storybook": "8.0.8",
     "typescript": "^5.1.6",
     "vitest": "^0.34.2",
     "vue-eslint-parser": "^9.1.0"
@@ -74,8 +76,7 @@
     "@hpcc-js/wasm": "^2.8.0",
     "@pinia/nuxt": "^0.4.6",
     "@sentry/types": "^7.80.0",
-    "@storybook/addon-actions": "^7.6.5",
-    "@storybook/vue3": "^7.6.5",
+    "@storybook/addon-actions": "^8.1.11",
     "@types/lodash": "^4.14.200",
     "@vue/shared": "^3.2.45",
     "@vueuse/core": "^10.11.0",

src/shared/ui/icon-svg/icon-svg.stories.ts

@@ -20,7 +20,7 @@ export default {
         args,
       };
     },
-    template: '<div style="width: 50px;"><IconSvg v-bind="args" /></div>',
+    template: '<div style="width: 50px"><IconSvg v-bind="args" /></div>',
   }),
 }as Meta<typeof IconSvg>;
 
@@ -40,7 +40,7 @@ export const AllIcons: StoryObj<typeof IconSvg> = {
     },
     template: `
       <div style="display: flex; flex-wrap: wrap;">
-        <figure v-for="name in names" class="flex flex-col items-center p-3 justify-between" style="width: 200px">
+        <figure v-for="name in names" class="flex flex-col items-center p-3 justify-between" style="width: 200px;">
           <IconSvg :name="name" style="width: 50px; margin: auto;" />
           <figcaption>{{ name }}</figcaption>
         </figure>

src/widgets/ui/page-layout/page-layout.stories.ts

@@ -3,7 +3,7 @@ import { PAGE_TYPES } from "~/src/shared/constants";
 import PageLayout from "./page-layout.vue";
 
 export default {
-  title: "Widget/PageLayout",
+  title: "Widgets/PageLayout",
   component: PageLayout,
 } as Meta<typeof PageLayout>;