refactor: from css modules to vanilla-extract css (#83)

* refactor: from css modules to css in js

* docs: change types in stories

* chore: ignore generated files

* ci: up e2e workflow

* build: up storybook

* build: uninstalla few dependencies

.github/workflows/playwright.yml → .github/workflows/e2e.yml

@@ -1,4 +1,4 @@
-name: Playwright Tests
+name: Playwright end-to-end Tests
 on:
   push:
     branches:
@@ -7,19 +7,19 @@ on:
     branches:
       - main
 jobs:
-  test:
+  e2e:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     strategy:
       matrix:
         node-version: [20]
     steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
         with:
           version: 8
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'pnpm'
@@ -29,7 +29,7 @@ jobs:
         run: pnpm exec playwright install --with-deps
       - name: Run Playwright tests
         run: pnpm exec playwright test
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report

.gitignore

@@ -1,6 +1,7 @@
 # Logs
 logs
 *.log
+*storybook.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

.prettierignore

@@ -6,3 +6,6 @@ dist
 
 # TypeScript Configuration
 # tsconfig.json
+
+# auto generated files
+src/routeTree.gen.ts

.storybook/main.ts

@@ -3,10 +3,10 @@ import type { StorybookConfig } from '@storybook/react-vite';
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    '@storybook/addon-a11y',
+    '@storybook/addon-onboarding',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
-    '@storybook/addon-onboarding',
+    '@chromatic-com/storybook',
     '@storybook/addon-interactions',
   ],
   framework: {

.storybook/preview.ts

@@ -2,7 +2,6 @@ import type { Preview } from '@storybook/react';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,

package.json

@@ -22,16 +22,18 @@
     "wretch": "^2.7.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.2.25",
     "@playwright/test": "^1.38.1",
-    "@storybook/addon-a11y": "^7.5.1",
-    "@storybook/addon-essentials": "^7.5.1",
-    "@storybook/addon-interactions": "^7.5.1",
-    "@storybook/addon-links": "^7.5.1",
-    "@storybook/blocks": "^7.5.1",
-    "@storybook/react": "^7.5.1",
-    "@storybook/react-vite": "^7.5.1",
-    "@storybook/test-runner": "^0.13.0",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-a11y": "^8.0.4",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-onboarding": "~8.0.4",
+    "@storybook/blocks": "^8.0.4",
+    "@storybook/react": "^8.0.4",
+    "@storybook/react-vite": "^8.0.4",
+    "@storybook/test": "~8.0.4",
+    "@storybook/test-runner": "^0.17.0",
     "@tanstack/router-vite-plugin": "~1.20.5",
     "@types/node": "^20.8.4",
     "@types/react": "^18.2.15",
@@ -49,8 +51,7 @@
     "prettier": "3.2.5",
     "prettier-plugin-css-order": "2.0.1",
     "sass": "1.67.0",
-    "storybook": "^7.5.1",
-    "storybook-addon-pseudo-states": "2.1.2",
+    "storybook": "^8.0.4",
     "typescript": "^5.0.2",
     "typescript-plugin-css-modules": "5.1.0",
     "vite": "^5.2.4"