feat: storybook8

Author: jerrywu

.eslintignore

@@ -3,11 +3,11 @@ build/*
 node_modules/*
 __tests__
 setupTests.ts
-.eslintrc.js
-.stylelintrc.js
-babel.config.js
-postcss.config.js
-commitlint.config.js
+.eslintrc.cjs
+.stylelintrc.cjs
+babel.config.cjs
+postcss.config.cjs
+commitlint.config.cjs
 tsconfig.json
 **/*.css
 **/*.scss

.husky/pre-commit

@@ -1,5 +1,3 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx lint-staged --allow-empty
-
+npm run lint
+npm run stylelint
+npm run typecheck

.vscode/settings.json

@@ -5,11 +5,10 @@
   "editor.insertSpaces": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit",
-    "source.fixAll.tslint": "explicit",
     "source.fixAll.stylelint": "explicit"
   },
   "eslint.options": {
-    "overrideConfigFile": "./.eslintrc.js"
+    "overrideConfigFile": "./.eslintrc.cjs"
   },
   "eslint.validate": [
     "javascript",

docs/package.json

@@ -9,7 +9,7 @@
     "docs:serve": "vitepress serve docs"
   },
   "devDependencies": {
-    "vitepress": "1.0.0-rc.30",
+    "vitepress": "1.0.0-rc.45",
     "vitepress-plugin-sandpack": "latest"
   }
 }

package.json

@@ -65,86 +65,85 @@
     "lint": "eslint --ext .ts,.tsx,.vue ./src",
     "tsup-w": "tsup --watch",
     "dev-pack": "npm run dev:usepack -w playground",
-    "prepare": "chmod a+x .husky/* && husky install",
+    "prepare": "chmod a+x .husky/* && husky",
     "prepublishOnly": "npm run build",
-    "postinstall": "rimraf rf node_modules/@types/react && rimraf rf node_modules/@storybook/types/node_modules/@types/react",
     "release": "bumpp --commit --tag --push",
     "stylelint": "stylelint \"**/*.{css,less,scss,vue}\"",
     "test": "vitest",
     "test:ui": "vitest --ui",
     "typecheck": "tsc && vue-tsc"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.9",
-    "core-js": "^3.35.1"
+    "@babel/runtime": "^7.24.0",
+    "core-js": "^3.36.0"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.23.9",
+    "@babel/plugin-transform-runtime": "^7.24.0",
     "@babel/plugin-transform-typescript": "^7.23.6",
-    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-env": "^7.24.0",
     "@babel/preset-typescript": "^7.23.3",
-    "@commitlint/cli": "^18.6.0",
-    "@commitlint/config-conventional": "^18.6.0",
+    "@commitlint/cli": "^19.2.0",
+    "@commitlint/config-conventional": "^19.1.0",
     "@rollup/plugin-babel": "^6.0.4",
-    "@storybook/addon-essentials": "^7.6.11",
-    "@storybook/addon-interactions": "^7.6.11",
-    "@storybook/addon-links": "^7.6.11",
-    "@storybook/addon-onboarding": "^1.0.11",
-    "@storybook/blocks": "^7.6.11",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/vue3": "^7.6.11",
-    "@storybook/vue3-vite": "^7.6.11",
-    "@swc/core": "^1.3.107",
-    "@testing-library/jest-dom": "^6.4.0",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/addon-onboarding": "^8.0.0",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/test": "^8.0.0",
+    "@storybook/vue3": "^8.0.0",
+    "@storybook/vue3-vite": "^8.0.0",
+    "@swc/core": "^1.4.8",
+    "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/user-event": "^14.5.2",
-    "@testing-library/vue": "^8.0.1",
+    "@testing-library/vue": "^8.0.2",
     "@types/lodash.isequal": "^4.5.8",
     "@types/lz-string": "^1.5.0",
-    "@types/node": "^20.11.13",
-    "@typescript-eslint/eslint-plugin": "^6.20.0",
-    "@typescript-eslint/parser": "^6.20.0",
-    "@vitejs/plugin-vue": "^5.0.3",
+    "@types/node": "^20.11.27",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
-    "@vitest/ui": "^1.2.2",
+    "@vitest/ui": "^1.3.1",
     "@vue/babel-plugin-jsx": "^1.2.1",
-    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
     "babel-loader": "^9.1.3",
     "browserslist-to-esbuild": "^1.2.0",
-    "bumpp": "^9.3.0",
+    "bumpp": "^9.4.0",
     "cross-env": "^7.0.3",
-    "cssnano": "^6.0.3",
+    "cssnano": "^6.1.0",
     "esbuild-plugin-babel": "^0.2.3",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-vue": "^9.21.0",
-    "husky": "^9.0.7",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "husky": "^9.0.11",
     "jsdom": "^24.0.0",
-    "lint-staged": "^15.2.0",
-    "npm": "^10.4.0",
+    "lint-staged": "^15.2.2",
+    "npm": "^10.5.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.35",
     "postcss-cli": "^11.0.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-nested": "^6.0.1",
-    "postcss-preset-env": "^9.3.0",
+    "postcss-preset-env": "^9.5.1",
     "postcss-scss": "^4.0.9",
     "rimraf": "^5.0.5",
-    "sass": "^1.70.0",
+    "sass": "^1.72.0",
     "shelljs": "^0.8.5",
-    "storybook": "^7.6.11",
+    "storybook": "^8.0.0",
     "stylelint": "^15.11.0",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard": "^34.0.0",
-    "tsup": "^8.0.1",
-    "typescript": "~5.3.3",
-    "vite": "^5.0.12",
-    "vite-plugin-dts": "^3.7.2",
-    "vitest": "^1.2.2",
-    "vue-tsc": "^1.8.27"
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6",
+    "vite-plugin-dts": "^3.7.3",
+    "vitest": "^1.3.1",
+    "vue-tsc": "^2.0.6"
   },
   "peerDependencies": {
     "vue": ">=3.2.0"

playground/package.json

@@ -10,7 +10,7 @@
     "typecheck": "tsc && vue-tsc"
   },
   "dependencies": {
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.3.0"
   },
   "devDependencies": {
     "cross-env": "^7.0.3",

src/stories/Page.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
-import { within, userEvent } from '@storybook/testing-library';
+import { within, userEvent } from '@storybook/test';
 import MyPage from './Page.vue';
 
 const meta = {