Merge pull request #8 from CivicTechTO/6-branch-switcher-addon

Add ability to deploy storybook branches to github pages

.github/workflows/deploy-github-pages.yml

@@ -4,6 +4,8 @@ on:
   push:
     branches:
       - 'main'
+  pull_request:
+    types: [opened, synchronize, reopened]
 
 permissions:
   contents: read
@@ -18,8 +20,10 @@ jobs:
         with:
           submodules: true
 
+      # See: https://github.com/bitovi/github-actions-storybook-to-github-pages
       - uses: bitovi/[email protected]
         with:
-          path: storybook-static
+          build_command: "npm run build-storybook && npx sb-branch-switcher --config .storybook/.branches.json"
+          path: dist/storybook-bundle
           # Done manually so we can checkout submodule
           checkout: false

.gitignore

@@ -1,3 +1,3 @@
-/node_modules
-/storybook-static
+/node_modules/
+/dist/
 .DS_Store

.storybook/.branches.json

@@ -0,0 +1,12 @@
+{
+  "from": "storybook-static",
+  "to": "dist/storybook-bundle",
+  "script_name": "build-storybook-branch",
+  "default_branch": "main",
+  "default_root": true,
+  "provider": {
+    "type": "github",
+    "owner": "CivicTechTO",
+    "repository": "polis-storybook"
+  }
+}

.storybook/main.js

@@ -11,6 +11,7 @@ const config = {
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
     "storybook-addon-remix-react-router",
+    "storybook-branch-switcher",
   ],
   framework: {
     name: "@storybook/react-webpack5",

Makefile

@@ -5,6 +5,13 @@ setup: ## Install packages and polis codebase
 run: ## Run storybook development environment
 	npm run storybook
 
+build: ## Build static storybook for deploy
+	npm run build-storybook
+
+build-all-branches: ## Build static storybook for all PR branches (requires GITHUB_TOKEN)
+	npm run build-storybook
+	npx sb-branch-switch --config .storybook/.branches.json
+
 %:
 	@true