Merge pull request #262 from cofacts/storybook

Setup Storybook for LIFF components

.eslintignore

@@ -2,3 +2,5 @@ build/*
 coverage/*
 src/__fixtures__/*
 liff/*
+storybook-static
+!.storybook

.github/workflows/storybook.yml

@@ -0,0 +1,31 @@
+name: Build storybook and deploy to gh-pages
+
+on:
+  push:
+    branches:
+      - master
+  workflow_dispatch:
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - run: 'npm i'
+
+      - name: Generate staging .env file
+        run: 'curl $ENV_URL -o .env'
+        env:
+          ENV_URL: ${{ secrets.STAGING_ENV_URL }}
+
+      - run: 'npm run build-storybook'
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./storybook-static

.gitignore

@@ -58,4 +58,6 @@ client_secret.json
 data/
 
 # Tesseract OCR folder
-tmp_image_process
+tmp_image_process
+
+storybook-static

.storybook/main.js

@@ -0,0 +1,46 @@
+const path = require('path');
+
+module.exports = {
+  stories: [
+    '../src/**/*.stories.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+        toolbars: false,
+      },
+    },
+    '@storybook/addon-svelte-csf',
+  ],
+  webpackFinal: async config => {
+    // Enable project root import paths like 'src/lib/sharedUtils'
+    // Ref: https://stackoverflow.com/a/65772747/1582110
+    config.resolve.modules.push(path.resolve(__dirname, '../'));
+
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: [
+        'style-loader',
+        'css-loader',
+        {
+          loader: 'sass-loader',
+          options: {
+            sassOptions: {
+              // Process svelte-material-ui SCSS files in node_modules as well
+              includePaths: [
+                path.resolve(__dirname, '../node_modules'),
+                path.resolve(__dirname, '../src/liff'),
+              ],
+            },
+          },
+        },
+      ],
+    });
+
+    return config;
+  },
+};

.storybook/preview.js

@@ -0,0 +1,12 @@
+import 'normalize.css';
+import '../src/liff/index.scss';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

README.md

@@ -117,6 +117,15 @@ The LINE bot server starts a GraphQL server that stiches Cofacts GraphQL API and
 
 Whenever Cofacts API updates, use `npm run cofactsapi` to fetch the latest Cofacts API schema.
 
+#### LIFF components storybook
+
+During development, use the following command to start a storybook on your local machine:
+```
+npm run storybook # Then visit http://localhost:6006
+```
+
+You can also visit https://cofacts.github.io/rumors-line-bot for pre-built storybook on `master` branch.
+
 #### How LIFF is deployed on production
 
 On production, LIFF files are compiled to `/liff` directory and served as static files by the chatbot server.