chore: setup storybook

.github/workflows/deploy.yaml

@@ -26,18 +26,16 @@ jobs:
       - name: Install Dependencies
         run: npm ci --ignore-scripts
 
-      # - name: Build app
-      #   env:
-      #     VITE_GTM_ID: ${{ vars.VITE_GTM_ID }}
-      #   run: npm run build
+      - name: Build app
+        run: npm run build:site
 
       - name: Setup Pages
         uses: actions/configure-pages@v3
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2
         with:
-          path: './demo'
+          path: './storybook-static'
 
       - name: Deploy to GitHub Pages
         id: deployment

.gitignore

@@ -21,3 +21,5 @@
 
 storybook-static
 custom-elements.json
+
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,15 @@
+import type { StorybookConfig } from '@storybook/web-components-vite'
+
+const config: StorybookConfig = {
+  stories: [
+    '../src/**/*.story.@(js|jsx|ts|tsx|mdx)',
+    '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
+  ],
+  addons: ['@storybook/addon-essentials', '@chromatic-com/storybook'],
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {},
+  },
+  staticDirs: ['../demo'],
+}
+export default config

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/web-components'
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+}
+
+export default preview