feat: use storybook to refactor components library docs

console/.eslintrc.cjs

@@ -24,6 +24,7 @@ module.exports = {
       extends: ["plugin:cypress/recommended"],
     },
   ],
+  ignorePatterns: ["!.storybook"],
   parserOptions: {
     ecmaVersion: "latest",
   },

console/packages/components/.eslintignore

@@ -0,0 +1 @@
+.storybook

console/packages/components/.eslintrc.cjs

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ["../../.eslintrc.cjs"],
+  extends: ["../../.eslintrc.cjs", "plugin:storybook/recommended"],
 };

console/packages/components/.storybook/main.ts

@@ -0,0 +1,19 @@
+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",
+    "@storybook/addon-styling",
+  ],
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

console/packages/components/.storybook/preview.ts

@@ -0,0 +1,19 @@
+import type { Preview } from "@storybook/vue3";
+
+import "../src/styles/tailwind.css";
+import "overlayscrollbars/overlayscrollbars.css";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    layout: "padded",
+  },
+};
+
+export default preview;

console/packages/components/env.d.ts

@@ -1,3 +1,5 @@
+
+
 /// <reference types="vite/client" />
 /// <reference types="histoire" />
 /// <reference types="unplugin-icons/types/vue" />

console/packages/components/package.json

@@ -18,10 +18,10 @@
     "test:unit:ui": "vitest --environment jsdom --watch --ui",
     "test:unit:coverage": "vitest run --environment jsdom --coverage",
     "typecheck": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
-    "story:dev": "histoire dev --port 4000",
-    "story:build": "histoire build",
     "lint": "eslint ./src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",
-    "prettier": "prettier --write './src/**/*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}'"
+    "prettier": "prettier --write './src/**/*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}'",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "keywords": [
     "halo",
@@ -44,9 +44,20 @@
   "homepage": "https://github.com/halo-dev/halo/tree/main/console/packages/components#readme",
   "license": "MIT",
   "devDependencies": {
-    "@histoire/plugin-vue": "^0.11.7",
-    "@iconify-json/ri": "^1.1.4",
-    "histoire": "^0.11.7",
+    "@iconify-json/ri": "^1.1.15",
+    "@storybook/addon-essentials": "^7.6.3",
+    "@storybook/addon-interactions": "^7.6.3",
+    "@storybook/addon-links": "^7.6.3",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/blocks": "^7.6.3",
+    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/vue3": "^7.6.3",
+    "@storybook/vue3-vite": "^7.6.3",
+    "eslint-plugin-storybook": "^0.6.15",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.6.3",
+    "unplugin-icons": "^0.14.15",
     "vite-plugin-dts": "^2.3.0"
   },
   "peerDependencies": {

console/packages/components/src/components/alert/Alert.stories.ts

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import { VAlert } from ".";
+
+const meta: Meta<typeof VAlert> = {
+  title: "Alert",
+  component: VAlert,
+  tags: ["autodocs"],
+  render: (args) => ({
+    components: { VAlert },
+    setup() {
+      return { args };
+    },
+    template: `<VAlert v-bind="args"></VAlert>`,
+  }),
+  argTypes: {
+    type: {
+      control: { type: "select" },
+      options: ["default", "success", "info", "warning", "error"],
+    },
+    closable: {
+      control: { type: "boolean" },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof VAlert>;
+
+export const Default: Story = {
+  args: {
+    type: "default",
+    title: "default",
+    description: "Halo",
+  },
+};
+
+export const Success: Story = {
+  args: {
+    type: "success",
+    title: "success",
+    description: "Halo",
+  },
+};
+
+export const Info: Story = {
+  args: {
+    type: "info",
+    title: "info",
+    description: "Halo",
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    type: "warning",
+    title: "warning",
+    description: "Halo",
+  },
+};
+
+export const Error: Story = {
+  args: {
+    type: "error",
+    title: "error",
+    description: "Halo",
+  },
+};

console/packages/components/src/components/avatar/Avatar.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import { VAvatar } from ".";
+
+const meta: Meta<typeof VAvatar> = {
+  title: "Avatar",
+  component: VAvatar,
+  tags: ["autodocs"],
+  render: (args) => ({
+    components: { VAvatar },
+    setup() {
+      return { args };
+    },
+    template: `<VAvatar v-bind="args" />`,
+  }),
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["lg", "md", "sm", "xs"],
+      defaultValue: "md",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof VAvatar>;
+
+export const Default: Story = {
+  args: {
+    src: "https://halo.run/logo",
+    alt: "Hello",
+  },
+};
+
+export const Circle: Story = {
+  args: {
+    src: "https://halo.run/logo",
+    alt: "Hello",
+    circle: true,
+  },
+};
+
+export const Text: Story = {
+  args: {
+    alt: "Ryan Wang",
+  },
+};