chore: add histoire support (#510)

Signed-off-by: Ryan Wang <i@ryanc.cc>

.eslintrc.cjs

@@ -13,6 +13,9 @@ module.exports = {
     node: true,
     "vue/setup-compiler-macros": true,
   },
+  rules: {
+    "vue/multi-word-component-names": 0,
+  },
   overrides: [
     {
       files: ["cypress/integration/**.spec.{js,ts,jsx,tsx}"],

.gitignore

@@ -11,6 +11,7 @@ node_modules
 .DS_Store
 dist
 dist-ssr
+histoire-dist
 coverage
 *.local
 

histoire.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from "histoire";
+
+export default defineConfig({});

package.json

@@ -10,7 +10,9 @@
     "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'",
     "typecheck": "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"
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "story:dev": "histoire dev",
+    "story:build": "histoire build"
   },
   "dependencies": {
     "pinia": "^2.0.11",
@@ -32,10 +34,12 @@
     "eslint": "^8.10.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-vue": "^8.5.0",
+    "histoire": "^0.1.1",
     "husky": "^7.0.4",
     "jsdom": "^19.0.0",
     "postcss": "^8.4.8",
     "prettier": "^2.5.1",
+    "sass": "^1.49.9",
     "start-server-and-test": "^1.14.0",
     "tailwindcss": "^3.0.23",
     "typescript": "~4.5.5",

src/components/base/button/Button.story.vue

@@ -0,0 +1,22 @@
+<template>
+  <Story title="Button">
+    <Variant :init-state="initState" title="playground">
+      <template #default="{ state }">
+        <VButton :type="state.type"> Hello world </VButton>
+      </template>
+    </Variant>
+
+    <Variant icon="carbon:star-filled" icon-color="#10B981" title="secondary">
+      <VButton type="secondary"> Hello world </VButton>
+    </Variant>
+  </Story>
+</template>
+<script setup>
+import { VButton } from "./index";
+
+function initState() {
+  return {
+    type: "primary",
+  };
+}
+</script>

src/components/base/button/Button.vue

@@ -0,0 +1,30 @@
+<template>
+  <button :class="[`btn-${size}`, `btn-${type}`]">
+    <slot />
+  </button>
+</template>
+<script lang="ts" setup>
+import type { PropType } from "vue";
+import type { Size, Type } from "@/components/base/button/interface";
+
+defineProps({
+  type: {
+    type: String as PropType<Type>,
+    default: "default",
+  },
+  size: {
+    type: String as PropType<Size>,
+    default: "md",
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+<style>
+.btn-secondary {
+  @apply bg-black;
+  @apply text-white;
+}
+</style>

src/components/base/button/index.ts

@@ -0,0 +1 @@
+export { default as VButton } from "./Button.vue";

src/components/base/button/interface.ts

@@ -0,0 +1,2 @@
+export type Type = "default" | "primary" | "secondary" | "error";
+export type Size = "lg" | "md" | "sm" | "xs";