dx/update-storybook-package-versions

.gitignore

@@ -19,3 +19,5 @@ dist
 secrets.json
 .ruby-version
 *.orig
+
+*storybook.log

.storybook/main.ts

@@ -1,5 +1,7 @@
-const fs = require("fs");
-const path = require('path');
+import fs from "node:fs";
+import path from 'node:path';
+import vue from '@vitejs/plugin-vue'
+import {fileURLToPath} from "url";
 
 //storybook-tailwind-dark-mode
 const config = {
@@ -19,7 +21,7 @@ const config = {
   ],
 
   framework: {
-    name: "@storybook-vue/nuxt",
+    name: "@storybook/vue3-vite",
     options: {}
   },
 
@@ -40,6 +42,18 @@ const config = {
       STORYBOOK_ICON_SVG_NAMES: allIconNamesList,
     }},
 
+  viteFinal: async (config) => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '~/src': fileURLToPath(new URL('../src', import.meta.url)),
+    }
+
+    const { mergeConfig } = await import('vite');
+
+    return mergeConfig(config, {
+      plugins: [vue()],
+    });
+  }
 };
 
 export default config;

.storybook/preview.ts

@@ -13,12 +13,18 @@ const preview: Preview = {
       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
+        const themeClassNames = (parameters?.backgrounds?.values || []).map(({ class: className }) => className)
+
+        const oldClasses = html.classList.value
+          .trim()
+          .split(' ')
+          .filter((className) => themeClassNames.includes(className))
+          .filter(Boolean)
+        const newClass = (parameters?.backgrounds?.values || []).find(({ value }) => globals?.backgrounds?.value === value)?.class
 
         if (newClass) {
-          if (oldClass) {
-            html.classList.remove(oldClass)
+          if (oldClasses.length) {
+            html.classList.remove(...oldClasses)
           }
 
           html.classList.add(newClass)

middleware/auth.global.ts

@@ -1,3 +1,4 @@
+import { storeToRefs } from "pinia";
 import { navigateTo, defineNuxtRouteMiddleware } from "#app";
 import {useSettingsStore, useProfileStore} from "~/src/shared/stores";
 

nuxt.config.ts

@@ -5,11 +5,13 @@ import pkg from './package.json';
 export default defineNuxtConfig({
   devtools: { enabled: true },
   ssr: false,
+
   router: {
     options: {
       hashMode: true
     }
   },
+
   app: {
     head: {
       title: "Buggregator",
@@ -27,31 +29,44 @@ export default defineNuxtConfig({
       ],
     },
   },
+
+
   dir: {
     static: 'src/static',
   },
+
   postcss: {
     plugins: {
       tailwindcss: {},
       autoprefixer: {},
     },
   },
+
   css: ["~/src/assets/index.css"],
+
   modules: [
     '@nuxtjs/tailwindcss',
     '@pinia/nuxt',
-    '@nuxtjs/storybook'
   ],
+
   typescript: {
     strict: true,
   },
+
+  build: {
+    transpile: ['@babel/plugin-syntax-import-attributes'],
+  },
+
   devServer: {
     host: '127.0.0.1',
     url: 'http://127.0.0.1:3000',
   },
+
   runtimeConfig: {
     public: {
       version: pkg.version,
     }
-  }
+  },
+
+  compatibilityDate: "2024-07-12"
 });

package.json

@@ -11,7 +11,9 @@
     "lint": "yarn codestyle && yarn typecheck",
     "codestyle": "eslint . --fix",
     "typecheck": "tsc --noEmit",
-    "test": "echo \"TODO: need to add tests\""
+    "test": "echo \"TODO: need to add tests\"",
+    "storybook": "storybook dev -p 6006",
+    "sb": "storybook dev -p 6006"
   },
   "type": "module",
   "lint-staged": {
@@ -29,15 +31,20 @@
     "*.{js,css,md}": "prettier --write"
   },
   "devDependencies": {
+    "@babel/plugin-syntax-import-attributes": "^7.24.7",
+    "@chromatic-com/storybook": "^1.6.1",
     "@conarti/eslint-plugin-feature-sliced": "^1.0.5",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
-    "@nuxtjs/storybook": "^8.1.1",
+    "@nuxtjs/storybook": "^8.1.5",
     "@nuxtjs/tailwindcss": "^6.2.0",
-    "@storybook-vue/nuxt": "^0.2.8",
+    "@storybook-vue/nuxt": "0.2.10",
     "@storybook/addon-essentials": "^8.1.11",
     "@storybook/addon-interactions": "^8.1.11",
     "@storybook/addon-links": "^8.1.11",
+    "@storybook/blocks": "8.1.11",
+    "@storybook/test": "8.1.11",
     "@storybook/vue3": "^8.1.11",
+    "@storybook/vue3-vite": "8.1.11",
     "@types/cytoscape-dagre": "^2.3.1",
     "@types/downloadjs": "^1.4.3",
     "@types/lodash.debounce": "^4.0.7",
@@ -89,11 +96,12 @@
     "lodash.isstring": "^4.0.1",
     "lodash.pick": "^4.4.0",
     "moment": "^2.29.4",
-    "nuxt": "^3.8.2",
+    "nuxt": "^3.12.4",
     "pinia": "^2.0.30",
     "pluralize": "^8.0.0",
     "tailwindcss": "^3.2.4",
     "vue": "^3.2.45",
     "vue3-tabs-component": "^1.2.0"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/entities/ray/ui/ray-frame/ray-frame.vue

@@ -15,8 +15,8 @@ const { codeEditor } = storeToRefs(useSettingsStore());
 const callLink = computed(
   () =>
     `${codeEditor}://open?file=${encodeURIComponent(
-      props.frame.file_name
-    )}&line=${props.frame.line_number}`
+      props.frame.file_name,
+    )}&line=${props.frame.line_number}`,
 );
 </script>
 
@@ -33,18 +33,10 @@ const callLink = computed(
 
 <style lang="scss" scoped>
 .ray-frame__name {
-  --tw-text-opacity: 1;
-  color: rgba(96, 165, 250, var(--tw-text-opacity));
-  text-decoration: underline;
-
-  .dark & {
-    --tw-text-opacity: 1;
-    color: rgba(219, 234, 254, var(--tw-text-opacity));
-  }
+  @apply text-blue-400 dark:text-blue-100 underline;
 }
 
 .ray-frame__code {
-  word-break: break-all;
-  font-weight: 600;
+  @apply break-all font-semibold;
 }
 </style>

src/shared/lib/io/use-smtp-requests.ts

@@ -1,3 +1,4 @@
+import { storeToRefs } from "pinia";
 import {useProfileStore} from "../../stores";
 import type { EventId, Attachment } from "../../types";
 import { REST_API_URL } from "./constants";

src/shared/lib/use-api-transport/use-api-transport.ts

@@ -1,3 +1,4 @@
+import { storeToRefs } from "pinia";
 import type { RayContentLock } from "~/src/entities/ray/types";
 import {useEventsStore, useConnectionStore, useProfileStore} from "../../stores";
 import type { EventId, EventType } from '../../types';

src/shared/lib/use-settings/use-settings.ts

@@ -1,3 +1,4 @@
+import { storeToRefs } from "pinia";
 import {useProfileStore} from "../../stores/profile/profile-store";
 import type { TProjects} from "../../types";
 import { REST_API_URL } from "../io/constants";

src/shared/stores/settings/local-storage-actions.ts

@@ -37,10 +37,6 @@ export const setStoredActiveTheme = (themeName: string) => {
 }
 
 export const getStoredFixedHeader = () => {
-  if (!process.client) {
-    return  false;
-  }
-
   const storedValue: string = window?.localStorage.getItem(LOCAL_STORAGE_KEYS.NAVBAR) || "true";
 
   const isFixed: boolean = storedValue === "true"

src/shared/ui/badge-number/badge-number.vue

@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const normalizedNumber = computed(() =>
-  props.number > 99 ? "*" : props.number
+  props.number > 99 ? "*" : props.number,
 );
 const isVisibleBadge = computed(() => props.number > 0 && props.isVisible);
 </script>
@@ -30,7 +30,7 @@ const isVisibleBadge = computed(() => props.number > 0 && props.isVisible);
 @import "src/assets/mixins";
 
 .badge-number {
-  @apply relative flex;
+  @apply relative inline-flex;
 }
 
 .badge-number__badge {

src/shared/ui/preview-card/preview-card-header.stories.ts

@@ -27,6 +27,6 @@ export const Default: StoryObj<typeof PreviewCardHeader> = {
     isOpen: true,
     isVisibleControls: true,
     eventId: 'test-event-id',
-    tags: ['one', 'two', 'tree'],
+    labels: ['one', 'two', 'tree'],
   }
 };

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

@@ -1,48 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
-import type { ComponentProps } from "vue-component-type-helpers";
 import LayoutSidebar from "./layout-sidebar.vue";
 
 export default {
   title: "Widgets/LayoutSidebar",
   component: LayoutSidebar,
-  render: (args: ComponentProps<typeof LayoutSidebar>) => ({
+  render: () => ({
     components: { LayoutSidebar },
-    setup() {
-      return {
-        args,
-      };
-    },
-    template: '<div style="width: 100px; height: 100vh"><LayoutSidebar v-bind="args" /></div>',
+    template: '<div style="width: 100px; height: 100vh"><LayoutSidebar /></div>',
   })
 }as Meta<typeof LayoutSidebar>;
 
 export const Default: StoryObj<typeof LayoutSidebar> = {
-  args: {
-    apiVersion: "v1.0.0",
-    clientVersion: "v1.0.0",
-  }
-};
-
-export const AuthWithImage: StoryObj<typeof LayoutSidebar> = {
-  args: {
-    apiVersion: "v1.0.0",
-    clientVersion: "v1.0.0",
-    profile: {
-      username: "john_smith",
-      email: "john_smith@site.com",
-      avatar: "https://loremflickr.com/cache/resized/65535_52444232377_93913f3504_n_320_240_nofilter.jpg"
-    }
-  }
-};
-
-export const AuthWithSvg: StoryObj<typeof LayoutSidebar> = {
-  args: {
-    apiVersion: "v1.0.0",
-    clientVersion: "v1.0.0",
-    profile: {
-      username: "john_smith",
-      email: "john_smith@site.com",
-      avatar: "<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; viewBox=&quot;0 0 144.8 144.8&quot; xml:space=&quot;preserve&quot;><circle style=&quot;fill:#f5c002&quot; cx=&quot;72.4&quot; cy=&quot;72.4&quot; r=&quot;72.4&quot;/><defs><circle id=&quot;a&quot; cx=&quot;72.4&quot; cy=&quot;72.4&quot; r=&quot;72.4&quot;/></defs><clipPath id=&quot;b&quot;><use xlink:href=&quot;#a&quot; style=&quot;overflow:visible&quot;/></clipPath><g style=&quot;clip-path:url(#b)&quot;><path style=&quot;fill:#f1c9a5&quot; d=&quot;M107 117c-5-9-35-14-35-14s-30 5-34 14l-7 28h82s-2-17-6-28z&quot;/><path style=&quot;fill:#e4b692&quot; d=&quot;M72 103s30 5 35 14c4 11 6 28 6 28H72v-42z&quot;/><path style=&quot;fill:#f1c9a5&quot; d=&quot;M64 85h17v27H64z&quot;/><path style=&quot;fill:#e4b692&quot; d=&quot;M72 85h9v27h-9z&quot;/><path style=&quot;opacity:.1;fill:#ddac8c&quot; d=&quot;M64 97c2 4 8 7 12 7l5-1V85H64v12z&quot;/><path style=&quot;fill:#f1c9a5&quot; d=&quot;M93 67c0-17-9-26-21-26-11 0-21 9-21 26 0 23 10 31 21 31 12 0 21-9 21-31z&quot;/><path style=&quot;fill:#e4b692&quot; d=&quot;M90 79c-4 0-6-4-6-9 1-5 5-8 9-8 3 1 6 5 5 9 0 5-4 9-8 8z&quot;/><path style=&quot;fill:#f1c9a5&quot; d=&quot;M47 71c-1-4 2-8 5-9 4 0 8 3 8 8 1 5-1 9-5 9-4 1-8-3-8-8z&quot;/><path style=&quot;fill:#e4b692&quot; d=&quot;M93 67c0-17-9-26-21-26v57c12 0 21-9 21-31z&quot;/><path style=&quot;fill:#303030&quot; d=&quot;M91 82c-1 3-3 7-6 7-5 0-8-4-13-4s-8 4-12 4c-3 0-5-4-7-7v-6 7s1 8 4 11c3 2 11 6 15 6 5 0 13-4 15-6 4-3 5-11 5-11v-7l-1 6zM62 44s4 16 26 24l-3-8 10 7c3-7 7-16-2-21-8-6-28-15-31-2z&quot;/><path style=&quot;fill:#303030&quot; d=&quot;M55 66s2-18 8-22c-5-2-14 5-13 10l5 12z&quot;/><path style=&quot;fill:#fb621e&quot; d=&quot;M107 117c-3-5-14-9-23-12a12 12 0 0 1-23 0c-9 3-21 7-23 12l-7 28h82s-2-17-6-28z&quot;/><path style=&quot;opacity:.2;fill:#e53d0c&quot; d=&quot;M60 108c0 6 6 11 12 11 7 0 12-5 13-11 8 2 18 6 22 10v-1c-3-5-14-9-23-12a12 12 0 0 1-23 0c-9 3-21 7-23 12l-1 1c5-4 15-8 23-10z&quot;/><path style=&quot;fill:#e53d0c&quot; d=&quot;M57 106a15 15 0 0 0 30 0l-3-1a12 12 0 0 1-23 0l-4 1z&quot;/><path style=&quot;fill:#fff&quot; d=&quot;M76 91s-1-3-4-3c-2 0-3 3-3 3h7z&quot;/></g></svg>"
-    }
-  }
+  args: {}
 };