feat:storybook vite migration (#410)

* feat: migrate Storybook to use nextjs-vite and update dependencies

* feat: migrate Storybook to use nextjs-vite and update dependencies

* feat: integrate Vitest for testing Storybook components and update dependencies

* feat: add Storybook test for article list and update notification details status

* feat: enhance Storybook configuration

* fix: reorder Storybook test script in package.json

* fix: update Storybook configuration to use process.env as an object

* fix: update Storybook build scripts for improved performance

* feat: integrate SWC and Vitest for api-harmonization and sdk testing

* feat: update test scripts and add PageService tests for api-harmonization

* feat: add @o2s/vitest-config package and update vitest configuration for article-list

* fix: correct test script syntax in package.json for proper execution

* chore: remove article-list unit tests as they are no longer needed

* chore: update test configurations

* chore: remove unnecessary newline in vitest configuration for user account

* feat: add vitest configuration and unit tests for article and ticket-details mappers

* feat: add vitest test scripts and configuration to multiple package.json files

* feat: add unit tests for various mappers and update vitest configuration

* fix: update package-lock.json nad downgrade playwright module.

* fix: add posinstall command

* fix: updated build and tst scripts in some blocks

* fix: added missing config files

* fix: fixed client files

* fix: remove postinstall script

* chore: update package-lock.json and package.json for dependency management

---------

Co-authored-by: Marcin Krasowski <marcin.krasowski@hycom.pl>
Co-authored-by: tomaszpacior <tomasz.paciorkowski@hycom.pl>

Author: 3 people

.storybook/main.ts

@@ -1,5 +1,15 @@
-import type { StorybookConfig } from '@storybook/nextjs';
+import type { StorybookConfig } from '@storybook/nextjs-vite';
+import tailwindcss from '@tailwindcss/postcss';
+import react from '@vitejs/plugin-react';
 import * as dotenv from 'dotenv';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { mergeConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 const env: {
     NEXT_PUBLIC_API_URL?: string;
@@ -17,9 +27,9 @@ const config: StorybookConfig = {
         '../packages/blocks/**/src/frontend/**/*.stories.@(js|jsx|mjs|ts|tsx)',
         '../packages/ui/**/*.stories.@(js|jsx|mjs|ts|tsx)',
     ],
-    addons: ['@storybook/addon-docs', '@storybook/addon-a11y', '@storybook/addon-themes'],
+    addons: ['@storybook/addon-docs', '@storybook/addon-a11y', '@storybook/addon-themes', '@storybook/addon-vitest'],
     framework: {
-        name: '@storybook/nextjs',
+        name: '@storybook/nextjs-vite',
         options: {},
     },
     typescript: {
@@ -29,5 +39,49 @@ const config: StorybookConfig = {
         ...config,
         ...env,
     }),
+    async viteFinal(config) {
+        return mergeConfig(config, {
+            plugins: [
+                react({
+                    jsxRuntime: 'automatic',
+                }),
+                tsconfigPaths(),
+                svgr({
+                    // Same behavior as @svgr/webpack
+                    svgrOptions: {
+                        exportType: 'default',
+                        ref: true,
+                        svgo: false,
+                        titleProp: true,
+                    },
+                    include: '**/*.svg',
+                }),
+            ],
+            define: {
+                process: {
+                    env: env,
+                },
+            },
+            optimizeDeps: {
+                include: ['@o2s/framework/modules', '@o2s/framework/sdk'],
+            },
+            resolve: {
+                conditions: ['import', 'module', 'browser', 'default'],
+                alias: {
+                    '@o2s/configs.integrations/live-preview': path.resolve(__dirname, './mocks/live-preview.mock.ts'),
+                    '@o2s/framework/sdk': path.resolve(__dirname, '../packages/framework/src/sdk.ts'),
+                    '@o2s/framework/modules': path.resolve(__dirname, '../packages/framework/src/index.ts'),
+                },
+            },
+            ssr: {
+                noExternal: ['@o2s/**'],
+            },
+            css: {
+                postcss: {
+                    plugins: [tailwindcss],
+                },
+            },
+        });
+    },
 };
 export default config;

.storybook/mocks/live-preview.mock.ts

@@ -0,0 +1,4 @@
+export const LivePreview = {
+    Provider: ({ children }: { children: React.ReactNode }) => children,
+    useInspector: () => () => ({}),
+};

.storybook/preview.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { NextIntlClientProvider } from 'next-intl';
-import type { Preview } from '@storybook/nextjs';
-import { createRouter } from '@storybook/nextjs/router.mock';
-import { createNavigation } from '@storybook/nextjs/navigation.mock';
+import type { Preview } from '@storybook/nextjs-vite';
+import { createRouter } from '@storybook/nextjs-vite/router.mock';
+import { createNavigation } from '@storybook/nextjs-vite/navigation.mock';
 import { withThemeByClassName } from '@storybook/addon-themes';
 
 import { GlobalProvider } from '@o2s/ui/providers/GlobalProvider';
@@ -20,12 +20,22 @@ createNavigation({});
 
 const preview: Preview = {
   parameters: {
-    controls: {
-      matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
+      nextjs: {
+          appDirectory: true,
       },
-    },
+      controls: {
+        matchers: {
+         color: /(background|color)$/i,
+         date: /Date$/i,
+        },
+      },
+
+      a11y: {
+          // 'todo' - show a11y violations in the test UI only
+          // 'error' - fail CI on a11y violations
+          // 'off' - skip a11y checks entirely
+          test: 'todo'
+      }
   },
     decorators: [
         withThemeByClassName({

.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/nextjs-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

apps/api-harmonization/package.json

@@ -15,6 +15,10 @@
         "debug": "nest start --debug --watch --preserveWatchOutput",
         "build": "nest build",
         "start": "node dist/main",
+        "test": "vitest run",
+        "test:watch": "vitest",
+        "test:cov": "vitest run --coverage",
+        "test:debug": "vitest --inspect-brk --inspect --logHeapUsage --threads=false",
         "lint": "tsc --noEmit && eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
         "format": "prettier --write \"src/**/*.ts\"",
         "generate:component": "turbo gen api-component"
@@ -108,22 +112,5 @@
         "ts-node": "^10.9.2",
         "tsconfig-paths": "^4.2.0",
         "typescript": "^5.9.3"
-    },
-    "jest": {
-        "moduleFileExtensions": [
-            "js",
-            "json",
-            "ts"
-        ],
-        "rootDir": "src",
-        "testRegex": ".*\\.spec\\.ts$",
-        "transform": {
-            "^.+\\.(t|j)s$": "ts-jest"
-        },
-        "collectCoverageFrom": [
-            "**/*.(t|j)s"
-        ],
-        "coverageDirectory": "../coverage",
-        "testEnvironment": "node"
     }
 }

apps/api-harmonization/src/app.service.spec.ts

@@ -0,0 +1,53 @@
+import { HttpService } from '@nestjs/axios';
+import { Test, TestingModule } from '@nestjs/testing';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { LoggerService } from '@o2s/utils.logger';
+
+import { AppService } from './app.service';
+
+describe('AppService', () => {
+    let service: AppService;
+    let httpService: HttpService;
+
+    beforeEach(async () => {
+        const module: TestingModule = await Test.createTestingModule({
+            providers: [
+                AppService,
+                {
+                    provide: HttpService,
+                    useValue: {
+                        axiosRef: {
+                            interceptors: {
+                                request: { use: vi.fn() },
+                                response: { use: vi.fn() },
+                            },
+                        },
+                    },
+                },
+                {
+                    provide: LoggerService,
+                    useValue: {
+                        apiRequest: vi.fn(),
+                        apiRequestError: vi.fn(),
+                        apiResponse: vi.fn(),
+                        apiResponseError: vi.fn(),
+                    },
+                },
+            ],
+        }).compile();
+
+        service = module.get<AppService>(AppService);
+        httpService = module.get<HttpService>(HttpService);
+    });
+
+    it('should be defined', () => {
+        expect(service).toBeDefined();
+    });
+
+    it('should configure axios interceptors on module init', () => {
+        service.onModuleInit();
+        expect(httpService.axiosRef.interceptors.request.use).toHaveBeenCalled();
+        expect(httpService.axiosRef.interceptors.response.use).toHaveBeenCalled();
+    });
+});