From 2e627c21eee3426c33b0518a49bd913c9206e0ca Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Fri, 22 Apr 2022 16:05:30 +0800 Subject: [PATCH] refactor: use histoire instead of view components page Signed-off-by: Ryan Wang --- histoire.config.ts | 4 +- package.json | 11 +- pnpm-lock.yaml | 77 ++-- src/components/base/button/Button.story.vue | 157 +++++++- .../base/checkbox/CheckBox.story.vue | 36 ++ src/components/base/input/Input.story.vue | 31 ++ src/components/base/menu/Menu.story.vue | 47 ++- src/components/base/radio/Radio.story.vue | 40 ++ src/components/base/select/Select.story.vue | 49 +++ src/components/base/space/Space.story.vue | 52 +++ src/components/base/tag/Tag.story.vue | 49 +++ .../base/textarea/Textarea.story.vue | 33 ++ src/histoire.setup.ts | 5 + src/router/menus.config.ts | 8 +- src/router/routes.config.ts | 6 - src/views/ViewComponents.vue | 379 ------------------ 16 files changed, 524 insertions(+), 460 deletions(-) create mode 100644 src/components/base/checkbox/CheckBox.story.vue create mode 100644 src/components/base/input/Input.story.vue create mode 100644 src/components/base/radio/Radio.story.vue create mode 100644 src/components/base/select/Select.story.vue create mode 100644 src/components/base/space/Space.story.vue create mode 100644 src/components/base/tag/Tag.story.vue create mode 100644 src/components/base/textarea/Textarea.story.vue create mode 100644 src/histoire.setup.ts delete mode 100644 src/views/ViewComponents.vue diff --git a/histoire.config.ts b/histoire.config.ts index bed1f1cdb..27bbb71f8 100644 --- a/histoire.config.ts +++ b/histoire.config.ts @@ -1,3 +1,5 @@ import { defineConfig } from "histoire"; -export default defineConfig({}); +export default defineConfig({ + setupFile: "/src/histoire.setup.ts", +}); diff --git a/package.json b/package.json index 5d355b450..d76ad98c1 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "build": "vue-tsc --noEmit && vite build", "preview": "vite preview --port 5050", "test:unit": "vitest --environment jsdom --run", - "test:unit:watch": "vitest --environment jsdom --watch", + "test:unit:watch": "vitest --environment jsdom --watch --ui", "test:unit:coverage": "vitest run --environment jsdom --coverage", "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'", "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'", @@ -28,17 +28,18 @@ "@types/node": "^17.0.25", "@vitejs/plugin-vue": "^2.3.1", "@vitejs/plugin-vue-jsx": "^1.3.10", + "@vitest/ui": "^0.9.4", "@vue/eslint-config-prettier": "^7.0.0", "@vue/eslint-config-typescript": "^10.0.0", - "@vue/test-utils": "^2.0.0-rc.20", + "@vue/test-utils": "^2.0.0-rc.21", "@vue/tsconfig": "^0.1.3", "autoprefixer": "^10.4.4", - "c8": "^7.11.0", + "c8": "^7.11.2", "cypress": "^9.5.4", "eslint": "^8.13.0", "eslint-plugin-cypress": "^2.12.1", "eslint-plugin-vue": "^8.6.0", - "histoire": "^0.2.4", + "histoire": "^0.2.5", "husky": "^7.0.4", "jsdom": "^19.0.0", "postcss": "^8.4.12", @@ -50,7 +51,7 @@ "typescript": "~4.6.3", "unplugin-icons": "^0.14.1", "vite": "^2.9.5", - "vitest": "^0.9.3", + "vitest": "^0.9.4", "vue-tsc": "^0.31.4" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 41694b00b..1ad29a856 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,17 +7,18 @@ specifiers: '@types/node': ^17.0.25 '@vitejs/plugin-vue': ^2.3.1 '@vitejs/plugin-vue-jsx': ^1.3.10 + '@vitest/ui': ^0.9.4 '@vue/eslint-config-prettier': ^7.0.0 '@vue/eslint-config-typescript': ^10.0.0 - '@vue/test-utils': ^2.0.0-rc.20 + '@vue/test-utils': ^2.0.0-rc.21 '@vue/tsconfig': ^0.1.3 autoprefixer: ^10.4.4 - c8: ^7.11.0 + c8: ^7.11.2 cypress: ^9.5.4 eslint: ^8.13.0 eslint-plugin-cypress: ^2.12.1 eslint-plugin-vue: ^8.6.0 - histoire: ^0.2.4 + histoire: ^0.2.5 husky: ^7.0.4 jsdom: ^19.0.0 pinia: ^2.0.13 @@ -30,7 +31,7 @@ specifiers: typescript: ~4.6.3 unplugin-icons: ^0.14.1 vite: ^2.9.5 - vitest: ^0.9.3 + vitest: ^0.9.4 vue: ^3.2.33 vue-router: ^4.0.14 vue-tsc: ^0.31.4 @@ -47,17 +48,18 @@ devDependencies: '@types/node': 17.0.25 '@vitejs/plugin-vue': 2.3.1_vite@2.9.5+vue@3.2.33 '@vitejs/plugin-vue-jsx': 1.3.10 + '@vitest/ui': 0.9.4 '@vue/eslint-config-prettier': 7.0.0_eslint@8.13.0+prettier@2.6.2 '@vue/eslint-config-typescript': 10.0.0_a62cbc2f4797496d74696b1f6538012a - '@vue/test-utils': 2.0.0-rc.20_vue@3.2.33 + '@vue/test-utils': 2.0.0-rc.21_vue@3.2.33 '@vue/tsconfig': 0.1.3_@types+node@17.0.25 autoprefixer: 10.4.4_postcss@8.4.12 - c8: 7.11.0 + c8: 7.11.2 cypress: 9.5.4 eslint: 8.13.0 eslint-plugin-cypress: 2.12.1_eslint@8.13.0 eslint-plugin-vue: 8.6.0_eslint@8.13.0 - histoire: 0.2.4_470c9fb72f69752b7738379dbac6ab3d + histoire: 0.2.5_470c9fb72f69752b7738379dbac6ab3d husky: 7.0.4 jsdom: 19.0.0 postcss: 8.4.12 @@ -69,7 +71,7 @@ devDependencies: typescript: 4.6.3 unplugin-icons: 0.14.1_vite@2.9.5 vite: 2.9.5_sass@1.50.1 - vitest: 0.9.3_40eeb18efc0a382653524b81f64824b7 + vitest: 0.9.4_2f3c27121f62934692d33844851ba7e1 vue-tsc: 0.31.4_typescript@4.6.3 packages: @@ -506,8 +508,8 @@ packages: '@hapi/hoek': 9.2.1 dev: true - /@histoire/controls/0.2.4_vue@3.2.33: - resolution: {integrity: sha512-w16oZSxNwquPxu4c00gXdgWja7et9UX4LWBOonM+Ioqi5fWmHKcdAxWEbmQgxO7pYgHP0taoiBrR/GXEbeqhlg==} + /@histoire/controls/0.2.5_vue@3.2.33: + resolution: {integrity: sha512-4+yTBlUaIiVBe6jVoDB90bfyUUaNANDqFRPpURPPibZQ715zoTo9QGxemZun1etKGG2ZYH92d0pOmnGKwa/rPQ==} dependencies: '@iconify/vue': 3.2.1_vue@3.2.33 '@vueuse/core': 8.2.5_vue@3.2.33 @@ -584,6 +586,13 @@ packages: '@jridgewell/sourcemap-codec': 1.4.11 dev: true + /@jridgewell/trace-mapping/0.3.9: + resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==} + dependencies: + '@jridgewell/resolve-uri': 3.0.5 + '@jridgewell/sourcemap-codec': 1.4.11 + dev: true + /@nodelib/fs.scandir/2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -643,11 +652,11 @@ packages: /@types/chai-subset/1.3.3: resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==} dependencies: - '@types/chai': 4.3.0 + '@types/chai': 4.3.1 dev: true - /@types/chai/4.3.0: - resolution: {integrity: sha512-/ceqdqeRraGolFTcfoXNiqjyQhZzbINDngeoAq9GoHa8PPK1yNzTaxWjA6BFWp5Ua9JpXEMSS4s5i9tS0hOJtw==} + /@types/chai/4.3.1: + resolution: {integrity: sha512-/zPMqDkzSZ8t3VtxOa4KPq7uzzW978M9Tvh+j7GHKuo6k6GTLxPJ4J5gE5cjfJ26pnXst0N5Hax8Sr0T2Mi9zQ==} dev: true /@types/concat-stream/1.6.1: @@ -873,6 +882,12 @@ packages: vue: 3.2.33 dev: true + /@vitest/ui/0.9.4: + resolution: {integrity: sha512-30fSFtqKW+j0EcYuLzFOOC6+nobi3p7bptmUunkF9oLV3578QY+jqjWCJOY+sTQSUnq9cvOzwHjIsvIoLiq4Jw==} + dependencies: + sirv: 2.0.2 + dev: true + /@volar/code-gen/0.31.4: resolution: {integrity: sha512-ngivMEbBNd19v+EHdLyCJoIGRaoD9J4P20ZgdCEGf2voztja59u3Tilpf9r9ENy/731nG7XncToYm4+c1t/LhA==} dependencies: @@ -1070,8 +1085,8 @@ packages: /@vue/shared/3.2.33: resolution: {integrity: sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg==} - /@vue/test-utils/2.0.0-rc.20_vue@3.2.33: - resolution: {integrity: sha512-aSkOAzM/ZlIyYgN7yj661FTjhFZZy5i9+FUbbDNoMGYA4F1WKwDdcDCPj9B/qzt3wGFkuCP5PO6SBtdSTMEhIA==} + /@vue/test-utils/2.0.0-rc.21_vue@3.2.33: + resolution: {integrity: sha512-wIJR4e/jISBKVKfiod3DV32BlDsoD744WVCuCaGtaSKvhvTL9gI5vl2AYSy00V51YaM8dCOFi3zcpCON8G1WqA==} peerDependencies: vue: ^3.0.1 dependencies: @@ -1407,8 +1422,8 @@ packages: ieee754: 1.2.1 dev: true - /c8/7.11.0: - resolution: {integrity: sha512-XqPyj1uvlHMr+Y1IeRndC2X5P7iJzJlEJwBpCdBbq2JocXOgJfr+JVfJkyNMGROke5LfKrhSFXGFXnwnRJAUJw==} + /c8/7.11.2: + resolution: {integrity: sha512-6ahJSrhS6TqSghHm+HnWt/8Y2+z0hM/FQyB1ybKhAR30+NYL9CTQ1uwHxuWw6U7BHlHv6wvhgOrH81I+lfCkxg==} engines: {node: '>=10.12.0'} hasBin: true dependencies: @@ -1421,7 +1436,7 @@ packages: istanbul-reports: 3.1.4 rimraf: 3.0.2 test-exclude: 6.0.0 - v8-to-istanbul: 8.1.1 + v8-to-istanbul: 9.0.0 yargs: 16.2.0 yargs-parser: 20.2.9 dev: true @@ -2848,14 +2863,14 @@ packages: hasBin: true dev: true - /histoire/0.2.4_470c9fb72f69752b7738379dbac6ab3d: - resolution: {integrity: sha512-ZG/BNAWME24MZNW8jh1AXLxjoT8xFYZ1t4ZXl/zK+2ue93IfBbcht/cQ4g8dQTevILawYiK1yoW7KuP2R5ZNrw==} + /histoire/0.2.5_470c9fb72f69752b7738379dbac6ab3d: + resolution: {integrity: sha512-kqSN1PZiZ+Q8Kxn2x9FS9/533Q+UPb/3+udrLPUC9hS51T7aTWm55Prd4cmKeo/0ZsB+lOgDAmoJxTNWPTjO3g==} hasBin: true peerDependencies: vite: ^2.9.0 vue: ^3.2.31 dependencies: - '@histoire/controls': 0.2.4_vue@3.2.33 + '@histoire/controls': 0.2.5_vue@3.2.33 '@iconify/vue': 3.2.1_vue@3.2.33 '@vitejs/plugin-vue': 2.3.1_vite@2.9.5+vue@3.2.33 '@vueuse/core': 8.2.5_vue@3.2.33 @@ -4211,11 +4226,6 @@ packages: resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} engines: {node: '>=0.10.0'} - /source-map/0.7.3: - resolution: {integrity: sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==} - engines: {node: '>= 8'} - dev: true - /sourcemap-codec/1.4.8: resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==} dev: false @@ -4663,13 +4673,13 @@ packages: resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==} dev: true - /v8-to-istanbul/8.1.1: - resolution: {integrity: sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==} + /v8-to-istanbul/9.0.0: + resolution: {integrity: sha512-HcvgY/xaRm7isYmyx+lFKA4uQmfUbN0J4M0nNItvzTvH/iQ9kW5j/t4YSR+Ge323/lrgDAWJoF46tzGQHwBHFw==} engines: {node: '>=10.12.0'} dependencies: + '@jridgewell/trace-mapping': 0.3.9 '@types/istanbul-lib-coverage': 2.0.4 convert-source-map: 1.8.0 - source-map: 0.7.3 dev: true /verror/1.10.0: @@ -4722,8 +4732,8 @@ packages: fsevents: 2.3.2 dev: true - /vitest/0.9.3_40eeb18efc0a382653524b81f64824b7: - resolution: {integrity: sha512-hKjqdBI732cV5giNLERyAsaJBebstrX5mvTbZr+jUDYUHnX1O4DpAJcHtqBOutuBi7lVIGQ5IF8eWvHHqbCHBA==} + /vitest/0.9.4_2f3c27121f62934692d33844851ba7e1: + resolution: {integrity: sha512-Em+EJb3keCr3GjyqnkxHuY7zMerEgLsN+m2nqsUcCzO7C4+Y0E7O7LXSNaODh3Gc/An3dqnoaAe/uLBrAJXUdQ==} engines: {node: '>=v14.16.0'} hasBin: true peerDependencies: @@ -4741,9 +4751,10 @@ packages: jsdom: optional: true dependencies: - '@types/chai': 4.3.0 + '@types/chai': 4.3.1 '@types/chai-subset': 1.3.3 - c8: 7.11.0 + '@vitest/ui': 0.9.4 + c8: 7.11.2 chai: 4.3.6 jsdom: 19.0.0 local-pkg: 0.4.1 diff --git a/src/components/base/button/Button.story.vue b/src/components/base/button/Button.story.vue index d5db833e6..ecc82b5c2 100644 --- a/src/components/base/button/Button.story.vue +++ b/src/components/base/button/Button.story.vue @@ -2,43 +2,160 @@ - - - diff --git a/src/components/base/checkbox/CheckBox.story.vue b/src/components/base/checkbox/CheckBox.story.vue new file mode 100644 index 000000000..2c8fe2973 --- /dev/null +++ b/src/components/base/checkbox/CheckBox.story.vue @@ -0,0 +1,36 @@ + + diff --git a/src/components/base/input/Input.story.vue b/src/components/base/input/Input.story.vue new file mode 100644 index 000000000..d431698ec --- /dev/null +++ b/src/components/base/input/Input.story.vue @@ -0,0 +1,31 @@ + + diff --git a/src/components/base/menu/Menu.story.vue b/src/components/base/menu/Menu.story.vue index 971df1bc3..0cd6fd395 100644 --- a/src/components/base/menu/Menu.story.vue +++ b/src/components/base/menu/Menu.story.vue @@ -2,18 +2,47 @@ diff --git a/src/components/base/radio/Radio.story.vue b/src/components/base/radio/Radio.story.vue new file mode 100644 index 000000000..ff9582483 --- /dev/null +++ b/src/components/base/radio/Radio.story.vue @@ -0,0 +1,40 @@ + + diff --git a/src/components/base/select/Select.story.vue b/src/components/base/select/Select.story.vue new file mode 100644 index 000000000..6d5ed349e --- /dev/null +++ b/src/components/base/select/Select.story.vue @@ -0,0 +1,49 @@ + + diff --git a/src/components/base/space/Space.story.vue b/src/components/base/space/Space.story.vue new file mode 100644 index 000000000..6d24ab67c --- /dev/null +++ b/src/components/base/space/Space.story.vue @@ -0,0 +1,52 @@ + + diff --git a/src/components/base/tag/Tag.story.vue b/src/components/base/tag/Tag.story.vue new file mode 100644 index 000000000..2e2cf374e --- /dev/null +++ b/src/components/base/tag/Tag.story.vue @@ -0,0 +1,49 @@ + + diff --git a/src/components/base/textarea/Textarea.story.vue b/src/components/base/textarea/Textarea.story.vue new file mode 100644 index 000000000..1f79b09d8 --- /dev/null +++ b/src/components/base/textarea/Textarea.story.vue @@ -0,0 +1,33 @@ + + diff --git a/src/histoire.setup.ts b/src/histoire.setup.ts new file mode 100644 index 000000000..c94cd46af --- /dev/null +++ b/src/histoire.setup.ts @@ -0,0 +1,5 @@ +import "@/styles/tailwind.css"; +import { defineVue3StorySetup } from "histoire/client"; + +// eslint-disable-next-line @typescript-eslint/no-empty-function +export default defineVue3StorySetup(() => {}); diff --git a/src/router/menus.config.ts b/src/router/menus.config.ts index 27cba210e..ae8356ba4 100644 --- a/src/router/menus.config.ts +++ b/src/router/menus.config.ts @@ -2,15 +2,14 @@ import { IconBookRead, IconDashboard, IconEye, + IconFolder, IconListSettings, - IconMagic, IconMessage, IconPages, IconPalette, IconPlug, IconSettings, IconUserSettings, - IconFolder, } from "@/core/icons"; import type { Component } from "vue"; @@ -100,11 +99,6 @@ export const menus: MenuGroupType[] = [ path: "/settings", icon: IconSettings, }, - { - name: "组件", - path: "/components", - icon: IconMagic, - }, ], }, ]; diff --git a/src/router/routes.config.ts b/src/router/routes.config.ts index 84d680f04..2a6a5190d 100644 --- a/src/router/routes.config.ts +++ b/src/router/routes.config.ts @@ -1,7 +1,6 @@ import type { RouteRecordRaw } from "vue-router"; import HomeView from "../views/HomeView.vue"; import AboutView from "../views/AboutView.vue"; -import ViewComponents from "../views/ViewComponents.vue"; export const routes: Array = [ { @@ -76,11 +75,6 @@ export const routes: Array = [ name: "Settings", component: AboutView, }, - { - path: "/components", - name: "Components", - component: ViewComponents, - }, ]; export default routes; diff --git a/src/views/ViewComponents.vue b/src/views/ViewComponents.vue deleted file mode 100644 index 3f5ea84e5..000000000 --- a/src/views/ViewComponents.vue +++ /dev/null @@ -1,379 +0,0 @@ - - -