Merge pull request #107 from buggregator/issue/#38-update-storybook-version

Issue/#38 update storybook version

Author: Kreezag

.eslintrc.json

@@ -9,7 +9,8 @@
     "plugin:@typescript-eslint/eslint-recommended",
     "prettier",
     "plugin:nuxt/recommended",
-    "plugin:@conarti/feature-sliced/recommended"
+    "plugin:@conarti/feature-sliced/recommended",
+    "plugin:storybook/recommended"
   ],
   "parser": "vue-eslint-parser",
   "plugins": ["@typescript-eslint"],
@@ -31,7 +32,12 @@
   },
   "rules": {
     "import/prefer-default-export": "off",
-    "no-console": ["error", { "allow": ["info", "warn", "error"] }],
+    "no-console": [
+      "error",
+      {
+        "allow": ["info", "warn", "error"]
+      }
+    ],
     "vue/component-name-in-template-casing": [
       "error",
       "PascalCase",

.github/workflows/test-build-ci.yml

@@ -27,4 +27,4 @@ jobs:
     - run: yarn install
     - run: yarn lint
     - run: yarn test
-    - run: yarn build
+    - run: yarn generate

.storybook/main.ts

@@ -1,9 +1,8 @@
 const fs = require("fs");
 const path = require('path');
-const postcss = require('postcss');
 
 //storybook-tailwind-dark-mode
-module.exports = {
+const config = {
   stories: [
     "../stories/**/*.stories.mdx",
     "../stories/**/*.stories.@(js|jsx|ts|tsx)",
@@ -12,61 +11,19 @@ module.exports = {
     "../pages/**/*.stories.@(js|jsx|ts|tsx)",
     "../src/**/**/**/*.stories.@(js|jsx|ts|tsx)",
   ],
+
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "storybook-addon-themes",
-    {
-      name: "@storybook/addon-postcss",
-      options: {
-        cssLoaderOptions: {
-          importLoaders: 1,
-        },
-        postcssLoaderOptions: {
-          implementation: postcss,
-        },
-      },
-    },
   ],
-  core: {
-    builder: "@storybook/builder-vite",
-  },
-  framework: "@storybook/vue3",
-  async viteFinal(config) {
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      '@': path.resolve(__dirname, "../"),
-      '~': path.resolve(__dirname, "../"),
-      '#app': path.resolve(
-        __dirname,
-        '../node_modules/nuxt/dist/app'
-      ),
-      '#head': path.resolve(
-        __dirname,
-        '../node_modules/nuxt/dist/head/runtime'
-      ),
-      '#build': path.resolve(
-        __dirname,
-        '../.nuxt'
-      ),
-      "#imports": [
-        ".nuxt/imports"
-      ],
-      "#components": path.resolve(
-        __dirname,
-        '../.nuxt/components'
-      ),
-    };
 
-    return {
-      ...config,
-      define: {
-        ...config.define,
-        global: "window",
-      },
-    };
+  framework: {
+    name: "@storybook-vue/nuxt",
+    options: {}
   },
+
   env: (config) => {
     const iconComponentFolder = path.resolve(__dirname, '../src/shared/ui/icon-svg/icon-svg-originals');
     const allIconNamesList = !fs.existsSync(iconComponentFolder)
@@ -83,4 +40,7 @@ module.exports = {
       ...config,
       STORYBOOK_ICON_SVG_NAMES: allIconNamesList,
     }},
+
 };
+
+export default config;

.storybook/preview.ts

@@ -1,11 +1,12 @@
 import {createPinia} from 'pinia';
-import {addParameters, app} from '@storybook/vue3';
+import { setup } from '@storybook/vue3';
 import "../assets/index.css";
-import "../assets/index";
+import "../assets/vendor";
 import "./stories.css"
-import SfdumpWrap from "~/src/shared/lib/vendor/dumper";
+import SfdumpWrap from "../src/shared/lib/vendor/dumper";
+import 'tailwindcss/tailwind.css'
 
-addParameters({
+export const parameters = {
   actions: {argTypesRegex: "^on[A-Z].*"},
   controls: {
     matchers: {
@@ -29,13 +30,15 @@ addParameters({
         color: '#333333'
       }
     ]
-  }
-})
+  },
+};
 
 
 const pinia = createPinia();
 
-app.use(pinia);
+setup((app) => {
+  app.use(pinia)
+})
 
 declare global {
   interface Window {

.storybook/stories.css

@@ -1,3 +1,18 @@
-.sb-show-main.sb-main-padded {
-  padding: 0;
+html {
+  position: relative;
+}
+
+html:before {
+  display: block;
+  content: "";
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAK0lEQVQ4y2P8//8/A25w7949PLJMDBSAUc0jQzML/jSkpKQ0GmCjminRDADJNQjBr5nbigAAAABJRU5ErkJggg==");
+  background-repeat: repeat;
+  background-position: 0 0;
+  opacity: 0.2;
+  z-index: -1;
 }

layouts/default.vue

@@ -45,9 +45,9 @@ export default defineComponent({
           ? `v${apiVersion}`
           : `@${apiVersion}`,
         clientVersion:
-          !$config?.version || $config.version === "0.0.1"
+          !$config?.public?.version || $config.public.version === "0.0.1"
             ? "@dev"
-            : `v${$config.version}`,
+            : `v${$config.public.version}`,
       };
     }
 

nuxt.config.ts

@@ -48,7 +48,7 @@ export default defineNuxtConfig({
   ],
   modules: [
     '@nuxtjs/tailwindcss',
-    '@pinia/nuxt'
+    '@pinia/nuxt',
   ],
   typescript: {
     strict: true,

package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "dev": "nuxi dev",
     "build": "nuxi build",
-    "sb": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
+    "sb": "storybook dev -p 6006",
     "generate": "nuxi generate",
     "preview": "nuxi preview",
     "postinstall": "nuxi prepare",
@@ -33,11 +33,11 @@
     "@conarti/eslint-plugin-feature-sliced": "^1.0.5",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@nuxtjs/tailwindcss": "^6.2.0",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-interactions": "^6.5.15",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-vite": "^0.3.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",
     "@types/cytoscape-dagre": "^2.3.1",
     "@types/downloadjs": "^1.4.3",
     "@types/lodash.debounce": "^4.0.7",
@@ -51,13 +51,18 @@
     "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-vue": "^9.9.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.1.0",
     "nuxi": "^3.3.1",
     "postcss": "^8.3.11",
     "prettier": "^2.8.3",
+    "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",
     "typescript": "^5.1.6",
     "vitest": "^0.34.2",
@@ -68,8 +73,8 @@
     "@hpcc-js/wasm": "^2.8.0",
     "@pinia/nuxt": "^0.4.6",
     "@sentry/types": "^7.80.0",
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/vue3": "^6.5.16",
+    "@storybook/addon-actions": "^7.6.5",
+    "@storybook/vue3": "^7.6.5",
     "@types/lodash": "^4.14.200",
     "@vue/shared": "^3.2.45",
     "centrifuge": "^3.1.0",

pages/index.vue

@@ -17,7 +17,7 @@
           :disabled="visibleEvents.length === 0"
           :is-paused="isEventsPaused"
           :total-new-events-count="hiddenEventsCount"
-          @toggleUpdate="toggleUpdate"
+          @toggle-update="toggleUpdate"
         />
       </template>
     </PageHeader>
@@ -44,7 +44,7 @@ import { useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-slice
 import { PageHeader, EventCard, PagePlaceholder } from "~/src/widgets/ui";
 import { PAGE_TYPES } from "~/src/shared/constants";
 import type { EventType } from "~/src/shared/types";
-import { PauseButton } from "~/src/screens/events/ui/pause-button";
+import { PauseButton } from "~/src/shared/ui/pause-button";
 
 export default defineComponent({
   components: {

src/entities/http-dump/ui/preview-card/preview-card.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, Story } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3";
 import { useHttpDump } from "../../lib";
 import { httpDumpMock } from '../../mocks';
 import PreviewCard from './preview-card.vue';
@@ -10,18 +10,9 @@ export default {
   component: PreviewCard
 } as Meta<typeof PreviewCard>;
 
-const Template: Story = (args) => ({
-  components: { PreviewCard },
-  setup() {
-    return {
-      args,
-    };
-  },
-  template: `<PreviewCard v-bind="args" />`,
-});
+export const Default: StoryObj<typeof PreviewCard> = {
+  args: {
+    event: normalizeHttpDumpEvent(httpDumpMock),
+  }
+}
 
-export const Event = Template.bind({});
-
-Event.args = {
-  event: normalizeHttpDumpEvent(httpDumpMock),
-};