Feature/storybook

.github/workflows/gh-pages.yml

@@ -0,0 +1,38 @@
+name: github pages
+
+on:
+  push:
+    branches:
+      - main  # Set a branch name to trigger deployment
+
+jobs:
+  deploy:
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - run: npm ci
+      - run: npm test
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        if: github.ref == 'refs/heads/main'
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./storybook-static

.gitignore

@@ -5,7 +5,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
-
+storybook-static
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 

.storybook/main.js

@@ -0,0 +1,44 @@
+const path = require('path')
+
+module.exports = {
+  "stories": [
+    "../**/*.stories.mdx",
+    "../**/*.stories.@(js|jsx|ts|tsx|svelte)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-svelte-csf",
+    "@storybook/preset-scss",
+    "@storybook/addon-postcss"
+  ],
+  "svelteOptions": {
+    "emitCss": true,
+    "preprocess": require("svelte-preprocess")()
+  },
+  "core": {
+    "builder": "webpack5"
+  },
+  babel: async (options) => {
+    options.presets[0][1].loose = true
+    return options
+  },
+  webpackFinal: async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    // Make whatever fine-grained changes you need
+    config.resolve.fallback.crypto = false;
+    config.resolve.alias.svelte = path.resolve('node_modules', 'svelte')
+
+    // config.module.rules[0].use[0].options.presets[0][1].loose = true
+    // console.log('!!!!!!!!!!!!', JSON.stringify(config.module.rules[0].use[0].options, null, 4))
+    //  = [
+    //     '@babel/plugin-proposal-class-properties',
+    //     { loose: true }
+    // ]
+
+    return config;
+  },
+}

.storybook/preview.js

@@ -0,0 +1,11 @@
+import '!style-loader!css-loader!../components/global.css'
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}