From 989b7186882432a97f209ab387e7049a02062aa4 Mon Sep 17 00:00:00 2001 From: Lavender Date: Thu, 29 May 2025 15:38:29 +1000 Subject: [PATCH 1/4] chore/MIG-6862 Upload Storybook to Github Pages --- .github/workflows/publish-storybook.yml | 36 +++++++++++++++++++++++++ .gitignore | 3 ++- 2 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/publish-storybook.yml diff --git a/.github/workflows/publish-storybook.yml b/.github/workflows/publish-storybook.yml new file mode 100644 index 0000000..eadbd1f --- /dev/null +++ b/.github/workflows/publish-storybook.yml @@ -0,0 +1,36 @@ +name: Publish Storybook +on: + pull_request: + 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 \ No newline at end of file diff --git a/.gitignore b/.gitignore index 02cf0c9..6757984 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ node_modules .idea .yarn -dist \ No newline at end of file +dist +storybook-static \ No newline at end of file From af8e3cb04ff1234f7ec8c4a142419d09cd478f9b Mon Sep 17 00:00:00 2001 From: Lavender Date: Thu, 29 May 2025 15:42:37 +1000 Subject: [PATCH 2/4] chore/MIG-6862 Remove Typescript resolution when building Storybook --- .storybook/main.ts | 7 +++++++ package.json | 1 + yarn.lock | 25 +++++++++++++++++++++++++ 3 files changed, 33 insertions(+) diff --git a/.storybook/main.ts b/.storybook/main.ts index 626a78d..436156d 100644 --- a/.storybook/main.ts +++ b/.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; diff --git a/package.json b/package.json index a9470e2..a03b525 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index aada87c..6ad71f8 100644 --- a/yarn.lock +++ b/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" From 898fc526cdd1b8e0457feb06c65f46accdc59d77 Mon Sep 17 00:00:00 2001 From: Lavender Date: Thu, 29 May 2025 15:53:49 +1000 Subject: [PATCH 3/4] chore/MIG-6862 Change to push to main --- .github/workflows/publish-storybook.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/publish-storybook.yml b/.github/workflows/publish-storybook.yml index eadbd1f..be67182 100644 --- a/.github/workflows/publish-storybook.yml +++ b/.github/workflows/publish-storybook.yml @@ -1,6 +1,6 @@ name: Publish Storybook on: - pull_request: + push: branches: - main jobs: From 0cf407ec83510b643d67f18fe28430500b2237dc Mon Sep 17 00:00:00 2001 From: Lavender Date: Thu, 29 May 2025 16:01:02 +1000 Subject: [PATCH 4/4] chore/MIG-6862 Update README with new changes --- README.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 99d97f2..75221f1 100644 --- a/README.md +++ b/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)