chore: storybook modification, unit test, issue fix

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ permissions:
 
 jobs:
 
-  pr:
+  pr_title_check:
     runs-on: ubuntu-latest
     if: github.actor != 'dependabot[bot]'
     steps:
@@ -51,22 +51,18 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup-node
 
+      - name: Build Setup
+        run: nr -C scripts ci:env-copy
+
       - name: Build
-        run: |
-          nr -r ci:env-copy
-          nr build
-          nr -r ci:env-delete
-          nr -r build:check
+        run: nr build
 
-  coverage:
-    runs-on: ubuntu-latest
-    needs: [build]
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/setup-node
+      - name: Build Check
+        run: |
+          nr build:check
 
-      - name: Coverage
-        run: nr coverage
+      - name: Cleanup
+        run: nr -C scripts ci:env-delete
 
   lint:
     runs-on: ubuntu-latest
@@ -95,9 +91,9 @@ jobs:
 
       - name: Test
         run: nr test
+
+      # - name: Storybook test
+      #   run: nr test-storybook:ci
 
-  action-timeline:
-    needs: [build, lint, pr, test, trivy_scan, triage]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: Kesin11/actions-timeline@v1
+      - name: Coverage
+        run: nr test:coverage

eslint.config.js

@@ -2,9 +2,14 @@ import antfu from '@antfu/eslint-config'
 
 export default antfu({
   stylistic: true,
+  javascript: true,
   typescript: true,
+  json: true,
   jsonc: true,
+  html: true,
   markdown: true,
+  yaml: true,
+  toml: true,
 }, {
   ignores: ['**/app/{docs,web}', '**/fixtures', '**/templates'],
   rules: {

generator/package.json

@@ -36,7 +36,7 @@
     "giget": "^1.2.1",
     "globby": "^14.0.1",
     "latest-version": "^9.0.0",
-    "recast": "^0.23.4",
+    "recast": "^0.23.5",
     "replace-string": "^4.0.0",
     "slash": "^5.1.0"
   },

knip.config.ts

@@ -1,17 +1,22 @@
-const config = {
+import type { KnipConfig } from 'knip'
+
+const config: KnipConfig = {
+  'rules': {
+    dependencies: 'off',
+  },
   'ignoreBinaries': ['templ-cli', 'test-storybook'],
   'ignoreDependencies': ['typecheck'],
   'workspaces': {
     '.': {
       entry: ['eslint.config.js'],
-      ignore: ['**/templates/**', '**/example/**', '**/.config/**'],
+      ignore: ['**/.config/**', '**/generator/**', '**/templates/**'],
     },
     'packages/*': {
-      entry: ['src/**/*.{ts,tsx}', 'test/**/*.test.{ts,tsx}', '**/*.load.ts', '**/.storybook/*.{js,ts}'],
+      entry: ['src/**/*.{ts,tsx}', 'test/**/*.test.{ts,tsx}', '**/*.load.ts', '**/.storybook/*.{js,ts}', '**/*.config.{js,ts}', '**/*setupTests.{js,ts}'],
       ignore: ['**/test/**', '**/*.story.{ts,tsx}'],
     },
     'apps/*': {
-      entry: ['src/**/*.{ts,tsx}', 'test/**/*.test.{ts,tsx}', '**/*.config.js'],
+      entry: ['src/**/*.{ts,tsx}', 'test/**/*.test.{ts,tsx}', '**/*.config.{js,ts}'],
     },
   },
   'eslint': {
@@ -26,15 +31,6 @@ const config = {
   'github-actions': {
     config: ['.github/workflows/*.{yml,yaml}', '.github/**/action.{yml,yaml}'],
   },
-  'lefthook': {
-    config: [
-      'lefthook.yml',
-      '.git/hooks/prepare-commit-msg',
-      '.git/hooks/commit-msg',
-      '.git/hooks/pre-{applypatch,commit,merge-commit,push,rebase,receive}',
-      '.git/hooks/post-{checkout,commit,merge,rewrite}',
-    ],
-  },
   'next': {
     entry: [
       'next.config.{js,ts,cjs,mjs}',

package.json

@@ -26,23 +26,26 @@
   },
   "scripts": {
     "prepare": "husky",
-    "all": "ni && nr deps:update && nr build && nr lint && nr test",
-    "build": "nr clean && turbo run build && knip && nr -C scripts build:check && nr -r typecheck",
+    "all": "ni && nr deps:update && nr clean && nr build && nr lint && nr test",
+    "build": "turbo run build",
+    "build:check": "knip --production && nr -C scripts build:check",
     "clean": "nr -C scripts clean",
-    "coverage": "vitest run --coverage",
     "deps:update": "taze -r -w -i -f -l",
-    "lint": "eslint . --fix && nr -C scripts automd",
+    "lint": "eslint . --fix && nr -C scripts automd && nr typecheck",
     "release": "changeset version && npm publish && git push --follow-tags",
-    "test": "turbo run test"
+    "test": "turbo run test",
+    "test:coverage": "vitest run --coverage",
+    "typecheck": "nr -C scripts typecheck"
   },
   "devDependencies": {
     "@antfu/eslint-config": "2.7.0",
     "@antfu/ni": "^0.21.12",
     "@changesets/cli": "^2.27.1",
+    "@storybook/blocks": "^7.6.17",
     "@vitest/coverage-v8": "^1.3.1",
     "eslint": "^8.57.0",
     "husky": "^9.0.11",
-    "knip": "^5.0.2",
+    "knip": "^5.0.3",
     "pnpm": "^8.15.4",
     "taze": "^0.13.3",
     "turbo": "^1.12.4",

packages/api/package.json

@@ -40,9 +40,9 @@
   "dependencies": {
     "@hono/node-server": "^1.8.2",
     "@hono/zod-openapi": "^0.9.6",
-    "@scalar/hono-api-reference": "^0.3.64",
+    "@scalar/hono-api-reference": "^0.3.66",
     "consola": "^3.2.3",
-    "hono": "^4.0.8"
+    "hono": "^4.0.9"
   },
   "devDependencies": {
     "@templ/config": "workspace:*",

packages/ui/.storybook/main.ts

@@ -5,13 +5,16 @@ const config: StorybookConfig = {
   stories: ['../stories/**/*.mdx', '../registry/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@geometricpanda/storybook-addon-badges',
+    '@storybook/addon-a11y',
+    '@storybook/addon-coverage',
     '@storybook/addon-essentials',
     // '@storybook/addon-interactions',
     '@storybook/addon-links',
     '@storybook/addon-storysource',
-    'storybook-dark-mode',
+    'storybook-addon-rtl',
     'storybook-addon-performance',
     'storybook-addon-pseudo-states',
+    'storybook-dark-mode',
   ],
   framework: '@storybook/react-vite',
   async viteFinal(config) {

packages/ui/.storybook/preview.ts

@@ -9,6 +9,28 @@ import '../styles/global.css'
 export const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
+    a11y: {
+      // Optional selector to inspect
+      element: '#storybook-root',
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+      // Axe's options parameter
+      options: {},
+      // Optional flag to prevent the automatic check
+      manual: true,
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

packages/ui/esbuild.config.ts

@@ -4,8 +4,8 @@ import type { BuildOptions } from 'esbuild'
 import { getBuildConfig } from '@templ/config'
 import { globby } from 'globby'
 
-const entryPoints = await globby(['index.ts', 'components/**/*.{ts,tsx}', 'lib/**/*.ts', 'registry/**/*.{ts,tsx}'], {
-  ignore: ['registry/**/*.stories.tsx'],
+const entryPoints = await globby(['index.ts', 'components/**/*.{ts,tsx,js,jsx}', 'lib/**/*.ts', 'registry/**/*.{ts,tsx,js,jsx}'], {
+  ignore: ['registry/**/*.stories.{ts,tsx,js,jsx}', 'registry/**/*.test.{ts,tsx,js,jsx}'],
 })
 
 const config: BuildOptions = {

packages/ui/package.json

@@ -52,14 +52,13 @@
     "npm": ">=8"
   },
   "scripts": {
-    "postinstall": "pnpm exec playwright install",
     "build": "tsx esbuild.config.ts",
-    "build-storybook": "storybook build",
+    "build:storybook": "storybook build -o dist/storybook",
     "dev": "tsx esbuild.config.ts --watch",
     "storybook": "storybook dev -p 6006",
     "test": "vitest run",
     "test:storybook": "test-storybook",
-    "test:storybook:ci": "test-storybook --ci",
+    "test-storybook:ci": "concurrently -k -s first -n \"Storybook,Test\" -c \"magenta,blue\" \"nr build:storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && nr test:storybook --ci\"",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
@@ -102,7 +101,7 @@
     "postcss": "^8.4.35",
     "react": "^18.2.0",
     "react-day-picker": "^8.10.0",
-    "react-hook-form": "^7.50.1",
+    "react-hook-form": "^7.51.0",
     "sonner": "^1.4.3",
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.4.1",
@@ -111,35 +110,46 @@
   "devDependencies": {
     "@geometricpanda/storybook-addon-badges": "^2.0.2",
     "@hookform/resolvers": "^3.3.4",
+    "@storybook/addon-a11y": "^7.6.17",
     "@storybook/addon-actions": "^7.6.17",
+    "@storybook/addon-coverage": "^1.0.1",
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-highlight": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
     "@storybook/addon-links": "^7.6.17",
     "@storybook/addon-storysource": "^7.6.17",
+    "@storybook/addon-themes": "^7.6.17",
     "@storybook/blocks": "^7.6.17",
     "@storybook/manager-api": "^7.6.17",
     "@storybook/preview-api": "^7.6.17",
     "@storybook/react": "^7.6.17",
     "@storybook/react-vite": "^7.6.17",
     "@storybook/test-runner": "^0.16.0",
+    "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "^7.6.17",
     "@templ/config": "workspace:*",
     "@templ/tsconfig": "workspace:*",
+    "@testing-library/react": "^14.2.1",
     "@types/node": "^20.11.24",
     "@types/react": "^18.2.61",
+    "concurrently": "^8.2.2",
     "date-fns": "^3.3.1",
     "esbuild": "^0.20.1",
     "globby": "^14.0.1",
+    "happy-dom": "^13.6.2",
+    "http-server": "^14.1.1",
     "lucide-react": "0.344.0",
-    "playwright": "^1.42.0",
     "storybook": "^7.6.17",
     "storybook-addon-performance": "^0.17.3",
-    "storybook-addon-pseudo-states": "^2.1.2",
+    "storybook-addon-pseudo-states": "^2.2.0",
+    "storybook-addon-rtl": "^1.0.0",
     "storybook-dark-mode": "^3.0.3",
     "tsx": "^4.7.1",
     "typescript": "^5.3.3",
     "vite": "^5.1.4",
     "vitest": "^1.3.1",
+    "vitest-axe": "^0.1.0",
+    "wait-on": "^7.2.0",
     "zod": "^3.22.4"
   },
   "size-limit": "65 KB"