docs: storybook v7

Author: jerrywu

.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
     '@vue/typescript/recommended',
     'eslint:recommended', // https://eslint.org/docs/rules/
     'plugin:jsx-a11y/strict', // https://www.npmjs.com/package/eslint-plugin-jsx-a11y
+    'plugin:storybook/recommended',
   ],
   env: {
     browser: true,

.gitignore

@@ -15,6 +15,7 @@ pnpm-lock.yaml
 yarn.lock
 
 src/index.css
+storybook-static
 playground/dist
 playground/storybook-static
 

.storybook/main.ts

@@ -0,0 +1,30 @@
+import type { StorybookConfig } from '@storybook/vue3-vite';
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-actions'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-interactions'),
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+
+export default config;

playground/.storybook/preview-head.html .storybook/preview-body.html

@@ -1,3 +1,3 @@
 <script>
   window.global = window;
-</script>
+</script>

playground/.storybook/preview.js .storybook/preview.ts

@@ -1,5 +1,6 @@
+import type { Preview } from '@storybook/vue3';
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
-import '../../src/styles/main.scss';
+import '../src/styles/main.scss';
 
 const customViewports = {
   pixel2: {
@@ -25,25 +26,23 @@ const customViewports = {
   },
 };
 
-// https://storybook.js.org/docs/react/essentials/viewport
-export const parameters = {
-  padded: false,
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+const preview: Preview = {
+  parameters: {
+    padded: false,
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
     },
-  },
-  options: {
-    storySort: {
-      order: ["Intro"],
-    },
-  },
-  viewport: {
-    viewports: {
-      ...MINIMAL_VIEWPORTS,
-      ...customViewports,
+    viewport: {
+      viewports: {
+        ...MINIMAL_VIEWPORTS,
+        ...customViewports,
+      },
     },
   },
 };
+
+export default preview;

package.json

@@ -49,7 +49,8 @@
     "playground"
   ],
   "scripts": {
-    "storybook": "npm run storybook -w playground",
+    "storybook": "storybook dev -p 6006",
+    "build:storybook": "cross-env NO_DTS=1 storybook build",
     "build": "tsup && npm run build:css",
     "dev": "npm run dev -w playground",
     "dev:use-bundle": "run-p tsup-w dev-pack",
@@ -59,13 +60,13 @@
     "build:scss": "sass --no-source-map --style=compressed src/styles/main.scss src/index.css",
     "build:postcss": "postcss src/index.css -o dist/index.css",
     "build:vite": "vite build && npm run build:css",
-    "build:storybook": "npm run build:storybook -w playground",
     "preview:docs": "npm run docs:serve -w docs",
     "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",
     "prepublishOnly": "npm run build",
+    "postinstall": "rimraf rf node_modules/@types/react",
     "release": "bumpp --commit --tag --push",
     "stylelint": "stylelint \"**/*.{css,less,scss,vue}\"",
     "test": "vitest",
@@ -84,6 +85,14 @@
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^17.6.7",
     "@rollup/plugin-babel": "^6.0.3",
+    "@storybook/addon-essentials": "^7.2.0",
+    "@storybook/addon-interactions": "^7.2.0",
+    "@storybook/addon-links": "^7.2.0",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.2.0",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/vue3": "^7.2.0",
+    "@storybook/vue3-vite": "^7.2.0",
     "@swc/core": "^1.3.73",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/user-event": "^14.4.3",
@@ -101,13 +110,15 @@
     "babel-loader": "^9.1.3",
     "browserslist-to-esbuild": "^1.2.0",
     "bumpp": "^9.1.1",
+    "cross-env": "^7.0.3",
     "cssnano": "^6.0.1",
     "esbuild-plugin-babel": "^0.2.3",
     "eslint": "^8.46.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-plugin-import": "^2.28.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-storybook": "^0.6.13",
     "eslint-plugin-vue": "^9.16.1",
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
@@ -123,11 +134,12 @@
     "rimraf": "^5.0.1",
     "sass": "^1.64.2",
     "shelljs": "^0.8.5",
+    "storybook": "^7.2.0",
     "stylelint": "^15.10.2",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard": "^34.0.0",
     "tsup": "^7.1.0",
-    "typescript": "~5.1.6",
+    "typescript": "~5.0.4",
     "vite": "^4.4.8",
     "vite-plugin-dts": "^3.4.0",
     "vitest": "^0.34.1",

playground/.storybook/main.js

@@ -3,32 +3,16 @@
   "version": "1.0.0",
   "scripts": {
     "build": "tsc && vue-tsc && vite build",
-    "build:storybook": "build-storybook",
     "dev": "vite --host --open",
     "dev:usepack": "cross-env USEPACK=true vite --host --port 5000 --open",
     "preview": "vite preview",
-    "storybook": "start-storybook -p 6006",
     "typecheck": "tsc && vue-tsc"
   },
   "dependencies": {
     "vue-router": "^4.2.4"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "~6.5.16",
-    "@storybook/addon-docs": "~6.5.16",
-    "@storybook/addon-essentials": "~6.5.16",
-    "@storybook/addon-links": "~6.5.16",
-    "@storybook/builder-vite": "0.4.2",
-    "@storybook/vue3": "~6.5.16",
     "cross-env": "^7.0.3",
     "vue-loader": "^17.2.2"
-  },
-  "overrides": {
-    "@storybook/addon-essentials": {
-      "babel-loader": "^9.1.0"
-    },
-    "@storybook/vue3": {
-      "babel-loader": "^9.1.0"
-    }
   }
 }

playground/package.json

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Button from './Button.vue';
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'select', options: ['small', 'medium', 'large'] },
+    backgroundColor: { control: 'color' },
+    onClick: { action: 'clicked' },
+  },
+  args: { primary: false }, // default value
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    label: 'Button',
+    size: 'large',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    label: 'Button',
+    size: 'small',
+  },
+};

src/stories/Button.stories.ts

@@ -0,0 +1,55 @@
+<template>
+  <button
+    type="button"
+    :class="classes"
+    :style="style"
+    @click="onClick"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script lang="ts" setup>
+import './button.scss';
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<{
+  /**
+   * The label of the button
+   */
+  label: string,
+  /**
+   * primary or secondary button
+   */
+  primary?: boolean,
+  /**
+   * size of the button
+   */
+  size?: 'small' | 'medium' | 'large',
+  /**
+   * background color of the button
+   */
+  backgroundColor?: string,
+
+}>(), { primary: false });
+
+const emit = defineEmits<{
+  (e: 'click', id: number): void;
+}>();
+
+const classes = computed(() => ({
+  'storybook-button': true,
+  'storybook-button--primary': props.primary,
+  'storybook-button--secondary': !props.primary,
+  [`storybook-button--${props.size || 'medium'}`]: true,
+}));
+
+const style = computed(() => ({
+  backgroundColor: props.backgroundColor,
+}));
+
+const onClick = () => {
+  emit('click', 1);
+};
+
+</script>