chore/MIG-6862 Upload Storybook to Github Pages (#42)

* chore/MIG-6862 Upload Storybook to Github Pages

* chore/MIG-6862 Remove Typescript resolution when building Storybook

* chore/MIG-6862 Change to push to main

* chore/MIG-6862 Update README with new changes

Author: lchans

.github/workflows/publish-storybook.yml

@@ -0,0 +1,36 @@
+name: Publish Storybook
+on:
+  push:
+    branches:
+      - main
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Enable Corepack
+        run: corepack enable
+        shell: bash
+
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: yarn
+          cache-dependency-path: yarn.lock
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build Storybook
+        run: yarn build-storybook
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./storybook-static

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 .idea
 .yarn
-dist
+dist
+storybook-static

.storybook/main.ts

@@ -1,6 +1,7 @@
 import { join, dirname } from 'path';
 
 import type { StorybookConfig } from '@storybook/react-vite';
+import { withoutVitePlugins } from '@storybook/builder-vite';
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -9,6 +10,7 @@ import type { StorybookConfig } from '@storybook/react-vite';
 function getAbsolutePath(value: string): any {
   return dirname(require.resolve(join(value, 'package.json')));
 }
+
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
@@ -21,5 +23,10 @@ const config: StorybookConfig = {
     name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
+  async viteFinal(config) {
+    config.plugins = await withoutVitePlugins(config.plugins, ['vite:dts']);
+
+    return config;
+  },
 };
 export default config;

README.md

@@ -65,15 +65,17 @@ To run all tests:
 yarn test
 ````
 
-## Running Storybook Locally
-To explore components and their behavior in isolation:
+## Running Storybook
+To explore components and their behavior in isolation: https://mongodb-js.github.io/diagramming
+
+Changes to the Storybook will be uploaded to the link above on push to `main`
+
+To run locally at http://localhost:6006 on your own branch:
 
 ```bash 
 yarn install
 yarn storybook
 ```
-
-Storybook will run locally at http://localhost:6006.
 
 ### Resources
 - [NPM Package](https://www.npmjs.com/package/@mongodb-js/diagramming)

package.json

@@ -57,6 +57,7 @@
     "@storybook/addon-essentials": "^8.6.0",
     "@storybook/addon-interactions": "^8.6.0",
     "@storybook/addon-themes": "^8.6.12",
+    "@storybook/builder-vite": "^9.0.0",
     "@storybook/react": "^8.6.0",
     "@storybook/react-vite": "^8.6.0",
     "@storybook/test": "^8.6.0",

yarn.lock

@@ -1261,6 +1261,7 @@ __metadata:
     "@storybook/addon-essentials": "npm:^8.6.0"
     "@storybook/addon-interactions": "npm:^8.6.0"
     "@storybook/addon-themes": "npm:^8.6.12"
+    "@storybook/builder-vite": "npm:^9.0.0"
     "@storybook/react": "npm:^8.6.0"
     "@storybook/react-vite": "npm:^8.6.0"
     "@storybook/test": "npm:^8.6.0"
@@ -1807,6 +1808,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/builder-vite@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "@storybook/builder-vite@npm:9.0.0"
+  dependencies:
+    "@storybook/csf-plugin": "npm:9.0.0"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    storybook: ^9.0.0
+    vite: ^5.0.0 || ^6.0.0
+  checksum: 10c0/15cf155b5dc8b05abac7376e7c233e4c12c24bdf22f492c4072888081db49577633504501bb3ac0c7cebcdca642169a3bbc57154b77506ecdc946cd911ad82fa
+  languageName: node
+  linkType: hard
+
 "@storybook/components@npm:8.6.0":
   version: 8.6.0
   resolution: "@storybook/components@npm:8.6.0"
@@ -1851,6 +1865,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/csf-plugin@npm:9.0.0":
+  version: 9.0.0
+  resolution: "@storybook/csf-plugin@npm:9.0.0"
+  dependencies:
+    unplugin: "npm:^1.3.1"
+  peerDependencies:
+    storybook: ^9.0.0
+  checksum: 10c0/601f7e8425952e8fe28093ee17af8803f34b3378e4b54e565c0cc41d98e9df2ef93cdcd4dcc36fa87d264ac38c9ac5d7bd1abd79e8895261e22cfa556fcbbd63
+  languageName: node
+  linkType: hard
+
 "@storybook/csf@npm:^0.1.11":
   version: 0.1.13
   resolution: "@storybook/csf@npm:0.1.13"