feat: added storybook controls for components

.eslintrc.cjs

@@ -1,15 +1,9 @@
 /* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution')
-
+require('@rushstack/eslint-patch/modern-module-resolution');
 module.exports = {
   root: true,
-  'extends': [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/eslint-config-typescript',
-    '@vue/eslint-config-prettier/skip-formatting'
-  ],
+  'extends': ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-typescript', '@vue/eslint-config-prettier/skip-formatting', 'plugin:storybook/recommended'],
   parserOptions: {
     ecmaVersion: 'latest'
   }
-}
+};

.gitignore

@@ -13,6 +13,7 @@ dist
 dist-ssr
 coverage
 *.local
+storybook-static
 
 /cypress/videos/
 /cypress/screenshots/

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/vue3-vite'
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions'
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  }
+}
+export default config

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import 'ant-design-vue/dist/antd.variable.min.css';
+import type { Preview } from '@storybook/vue3'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    }
+  }
+}
+
+export default preview

components.d.ts

@@ -9,11 +9,11 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    AppHeader: typeof import('./src/components/AppHeader.vue')['default']
+    AppHeader: typeof import('./src/components/Layout/AppHeader.vue')['default']
     LineChart: typeof import('./src/components/LineChart/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    SidebarMenu: typeof import('./src/components/SidebarMenu.vue')['default']
-    SidebarMenuItems: typeof import('./src/components/SidebarMenuItems.vue')['default']
+    SidebarMenu: typeof import('./src/components/SidebarMenu/SidebarMenu.vue')['default']
+    SidebarMenuItems: typeof import('./src/components/SidebarMenuItems/SidebarMenuItems.vue')['default']
   }
 }

package.json

@@ -11,7 +11,9 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "format": "prettier --write src/"
+    "format": "prettier --write src/",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@ant-design/icons-vue": "^6.1.0",
@@ -27,6 +29,13 @@
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
+    "@storybook/addon-essentials": "^7.0.6",
+    "@storybook/addon-interactions": "^7.0.6",
+    "@storybook/addon-links": "^7.0.6",
+    "@storybook/blocks": "^7.0.6",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/vue3": "^7.0.6",
+    "@storybook/vue3-vite": "^7.0.6",
     "@types/jsdom": "^21.1.0",
     "@types/node": "^18.14.2",
     "@vitejs/plugin-vue": "^4.0.0",
@@ -36,10 +45,12 @@
     "@vue/test-utils": "^2.3.0",
     "@vue/tsconfig": "^0.1.3",
     "eslint": "^8.34.0",
+    "eslint-plugin-storybook": "^0.6.11",
     "eslint-plugin-vue": "^9.9.0",
     "jsdom": "^21.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.4",
+    "storybook": "^7.0.6",
     "typescript": "~4.8.4",
     "unplugin-vue-components": "^0.24.1",
     "vite": "^4.1.4",