GUI redesign

.eslintrc.json

@@ -9,7 +9,8 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:solid/typescript",
     "plugin:import/typescript",
-    "plugin:import/recommended"
+    "plugin:import/recommended",
+    "plugin:storybook/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -19,14 +20,30 @@
       "jsx": true
     }
   },
-  "plugins": ["@typescript-eslint", "solid", "import"],
+  "plugins": [
+    "@typescript-eslint",
+    "solid",
+    "import"
+  ],
   "rules": {
     "solid/reactivity": "warn",
     "solid/no-destructure": "warn",
     "solid/jsx-no-undef": "error",
-    "indent": ["error", 4 , { "SwitchCase": 1 }],
-    "quotes": ["error", "single"],
-    "semi": ["error", "never"],
+    "indent": [
+      "error",
+      4,
+      {
+        "SwitchCase": 1
+      }
+    ],
+    "quotes": [
+      "error",
+      "single"
+    ],
+    "semi": [
+      "error",
+      "never"
+    ],
     "arrow-body-style": "off",
     "import/no-unresolved": "error",
     "import/extensions": [
@@ -70,4 +87,4 @@
       "node": "true"
     }
   }
-}
+}

.gitignore

@@ -1,2 +1,4 @@
 node_modules
-dist
+dist
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -0,0 +1,16 @@
+import type { StorybookConfig } from 'storybook-solidjs-vite';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-docs"
+  ],
+  "framework": {
+    "name": "storybook-solidjs-vite",
+    "options": {}
+  }
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from 'storybook-solidjs-vite'
+import '../src/styles/imports.css'
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+}
+
+export default preview

.vscode/settings.json

@@ -15,5 +15,5 @@
         "WROOMS",
         "XAIO",
         "XIAOSENSES"
-    ]
+    ],
 }

package.json

@@ -9,6 +9,8 @@
     "dev": "vite dev",
     "build": "vite build",
     "start": "vite start",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "serve": "vite preview",
     "setup": "pnpm install && pnpm run specta:post-install",
     "tauri:dev": "tauri dev",
@@ -24,14 +26,18 @@
     "lint": "eslint --ext .js,.ts,.jsx,.tsx src",
     "format": "pnpm run lint --fix & pnpm prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "update-deps": "pnpm up -Li",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
+    "@storybook/addon-docs": "9.1.10",
     "@tailwindcss/forms": "^0.5.10",
     "@tauri-apps/api": "1.6.0",
     "@tauri-apps/cli": "1.6.3",
+    "@types/lodash": "^4.17.21",
     "@types/node": "^22.10.7",
     "@typescript-eslint/eslint-plugin": "^8.20.0",
     "@typescript-eslint/parser": "^8.20.0",
@@ -46,15 +52,20 @@
     "eslint-plugin-autofix": "^2.2.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-solid": "^0.14.5",
+    "eslint-plugin-storybook": "9.1.10",
     "https-localhost": "^4.7.1",
     "jsdoc": "^4.0.4",
+    "jsdom": "^27.0.0",
     "postcss": "^8.5.1",
     "postcss-import": "^16.1.0",
     "prettier": "^3.4.2",
+    "storybook": "9.1.10",
+    "storybook-solidjs-vite": "9.0.3",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.7.3",
     "vite": "^6.0.7",
-    "vite-plugin-solid": "^2.11.0"
+    "vite-plugin-solid": "^2.11.0",
+    "vitest": "^3.2.4"
   },
   "dependencies": {
     "@kobalte/core": "^0.13.7",
@@ -67,6 +78,7 @@
     "@solidjs/router": "^0.15.3",
     "@stitches/core": "^1.2.8",
     "@tailwindcss/typography": "^0.5.16",
+    "@testing-library/jest-dom": "^6.9.1",
     "babel-preset-solid": "^1.9.3",
     "class-variance-authority": "^0.7.1",
     "esptool-js": "^0.5.4",
@@ -88,4 +100,4 @@
     "tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store",
     "tauri-plugin-upload-api": "github:tauri-apps/tauri-plugin-upload"
   }
-}
+}