add storybook

.github/workflows/chromatic.yml

@@ -0,0 +1,26 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: 'Chromatic'
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        run: yarn
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.gitignore

@@ -4,4 +4,5 @@
 *.local
 dist
 dist-ssr
-node_modules
+node_modules
+build-storybook.log

.storybook/main.ts

@@ -0,0 +1,12 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)",
+    "../src/*.css"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-postcss"
+  ]
+}

.storybook/preview.ts

@@ -0,0 +1,10 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

demo/App.vue

@@ -4,39 +4,14 @@
       Component library
     </h1>
 
-    <div class="px-4">
-      <lc-button-demo />
-      <lc-checkbox-demo />
-      <lc-icon-demo />
-      <lc-input-demo />
-      <lc-form-demo />
-      <lc-modal-demo />
-      <lc-table-demo />
-    </div>
+    <div class="px-4" />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 
-import LcButtonDemo from './components/LcButtonDemo.vue'
-import LcCheckboxDemo from './components/LcCheckboxDemo.vue'
-import LcFormDemo from './components/LcFormDemo.vue'
-import LcIconDemo from './components/LcIconDemo.vue'
-import LcInputDemo from './components/LcInputDemo.vue'
-import LcModalDemo from './components/LcModalDemo.vue'
-import LcTableDemo from './components/LcTableDemo.vue'
-
 export default defineComponent({
   name: 'App',
-  components: {
-    LcButtonDemo,
-    LcCheckboxDemo,
-    LcFormDemo,
-    LcIconDemo,
-    LcInputDemo,
-    LcModalDemo,
-    LcTableDemo,
-  },
 })
 </script>