chore: update storybook, move to css & oklch

.github/workflows/format-files.yml

@@ -1,53 +1,32 @@
-name: Format Files
+name: Format & Lint Files
+
 on:
   pull_request:
     branches:
       - main
     paths:
-      - '**.js'
-      - '**.jsx'
-      - '**.ts'
-      - '**.tsx'
+      - "**.js"
+      - "**.jsx"
+      - "**.ts"
+      - "**.tsx"
+      - "**.cjs"
+      - "**.json"
   push:
     branches:
       - main
 
 jobs:
-  format:
-    name: Format Files
+  biome:
+    name: "Biome"
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v3
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
+      - name: Checkout
+        uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        id: pnpm-install
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
         with:
-          version: 8
-          run_install: false
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
+          version: 2.0.0
 
-      - name: Run Rome Format
-        run: pnpm dlx @biomejs/biome ci src/
+      - name: Run Biome
+        run: biome ci .

.npmrc

@@ -1 +1 @@
-shamefully-hoist=true
+auto-install-peers=false

.nvmrc

@@ -1 +1 @@
-v20.9.0
+v22.14.0

.storybook/main.cjs → .storybook/main.ts

@@ -3,26 +3,21 @@ const Solid = require("vite-plugin-solid");
 const devtools = require('solid-devtools/vite');
 
 module.exports = {
-	stories: ["../src/stories/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
-	addons: [
-		"@storybook/addon-links",
-		"@storybook/addon-essentials",
-		"storybook-dark-mode",
-		"@storybook/addon-a11y",
-	],
-	babel: async (options) => ({
-		...options,
-		presets: ["solid", ...options.presets],
-	}),
-	framework: "@storybook/html",
-	core: {
-		builder: "@storybook/builder-vite",
-	},
-	features: {
-		storyStoreV7: true,
-	},
-	async viteFinal(config, { configType }) {
-		config.plugins.unshift(Solid({ hot: false }));
+    stories: ["../src/stories/**/*.@(mdx|stories.@(js|jsx|ts|tsx))"],
+
+    addons: [
+        "@storybook/addon-links",
+        "@storybook/addon-a11y",
+        "@chromatic-com/storybook",
+        "@storybook/addon-docs"
+    ],
+
+    framework: {
+        name: "@kachurun/storybook-solid-vite",
+        options: {}
+    },
+
+    async viteFinal(config, { configType }) {
 		config.plugins.unshift(devtools({
 			autoname: true,
 		}));
@@ -44,5 +39,5 @@ module.exports = {
         );
 
 		return config;
-	},
+	}
 };

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from 'storybook/manager-api';
+import theme from './theme';
+
+addons.setConfig({
+	theme,
+});

.storybook/preview-head.html

@@ -1,4 +1,6 @@
 <script>
   window.global = window;
+  document.documentElement.classList.add('jdd-dark');
+  document.documentElement.style.background = "var(--jdd-gray-18)";
 </script>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

.storybook/preview.ts

@@ -0,0 +1,47 @@
+import "../src/components/style";
+import { attachDevtoolsOverlay } from '@solid-devtools/overlay';
+import { Parameters } from "@kachurun/storybook-solid-vite";
+
+attachDevtoolsOverlay();
+
+export const parameters: Parameters = {
+	actions: { argTypesRegex: "^on[A-Z].*" },
+	controls: { matchers: { color: /(background|color)$/i, date: /Date$/ } },
+	// darkMode: {
+	// 	// Override the default light theme
+	// 	light: {
+	// 		...themes.normal,
+
+	// 		brandTitle: "Jundao Design",
+	// 		brandUrl: "https://github.com/jundaoapp/design",
+	// 		brandImage: bannerDark,
+
+	// 		// Typography
+	// 		fontBase: '"Inter", sans-serif',
+	// 		fontCode: '"JetBrains Mono", monospace',
+
+	// 		// UI
+	// 		appBg: "#fafafa",
+	// 		appContentBg: "#ffffff",
+	// 		appBorderColor: "#d9d9d9",
+	// 		appBorderRadius: "1rem",
+
+	// 		// Text colors
+	// 		textColor: "#000000",
+	// 		textInverseColor: "#fafafa",
+
+	// 		// Form colors
+	// 		inputBg: "white",
+	// 		inputBorder: "#000000",
+	// 		inputTextColor: "#1f1f1f",
+	// 		inputBorderRadius: ".75rem",
+
+	// 		// Toolbar default and active colors
+	// 		barTextColor: "#000000",
+	// 		barSelectedColor: "#1890ff",
+	// 		barBg: "#f5f5f5",
+	// 	},
+	// 	darkClass: "jdd-dark",
+	// 	stylePreview: true,
+	// },
+};

.storybook/theme.ts

@@ -0,0 +1,36 @@
+import { create } from 'storybook/theming/create';
+import bannerLight from "./banner-light.svg";
+// import bannerDark from "./banner-dark.svg";
+
+export default create({
+  base: 'dark',
+
+  brandTitle: "Jundao Design",
+  brandUrl: "https://github.com/jundaoapp/design",
+  brandImage: bannerLight,
+
+  // Typography
+  fontBase: '"Inter", sans-serif',
+  fontCode: '"JetBrains Mono", monospace',
+
+  // UI
+  appBg: "#0d0e0f",
+  appContentBg: "black",
+  appBorderColor: "#262626",
+  appBorderRadius: 16,
+
+  // Text colors
+  textColor: "#fafafa",
+  textInverseColor: "#000000",
+
+  // Form colors
+  inputBg: "#1f1f1f",
+  inputBorder: "#262626",
+  inputTextColor: "#fafafa",
+  inputBorderRadius: 12,
+
+  // Toolbar default and active colors
+  barTextColor: "#fafafa",
+  barSelectedColor: "#1890ff",
+  barBg: "#141516",
+});

.storybook/vitest.setup.ts

@@ -0,0 +1,8 @@
+import { setProjectAnnotations } from '@kachurun/storybook-solid-vite';
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+
+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]);

biome.json

@@ -1,14 +1,12 @@
 {
-	"$schema": "https://biomejs.dev/schemas/1.3.3/schema.json",
-	"organizeImports": {
-		"enabled": true
-	},
+	"$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
 	"linter": {
 		"enabled": true,
 		"rules": {
 			"recommended": true,
       "style": {
-				"noNonNullAssertion": "off"
+				"noNonNullAssertion": "off",
+				"noDescendingSpecificity": "off"
 			},
 			"a11y": {
 				"noSvgWithoutTitle": "off"