feat: deploy storybook to github pages

Author: samshara

.github/workflows/chromatic-deploy.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - develop
+      - project/storybook
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -12,11 +13,13 @@ concurrency:
 permissions:
   actions: write
   contents: read
+  pages: write
+  id-token: write
 
 jobs:
   changed-files:
     runs-on: ubuntu-latest
-    name: changed-files
+    name: Check for changed files
     outputs:
       all_changed_files: ${{ steps.changed-files.outputs.all_changed_files }}
       any_changed: ${{ steps.changed-files.outputs.any_changed }}
@@ -32,7 +35,7 @@ jobs:
             packages/ui/**
             packages/go-ui-storybook/**
   chromatic:
-    name: Run visual tests
+    name: Build & Deploy
     needs: [changed-files]
     if: ${{ needs.changed-files.outputs.any_changed == 'true' }}
     uses: ./.github/workflows/chromatic.yml

.github/workflows/chromatic.yml

@@ -9,6 +9,8 @@ concurrency:
 permissions:
   actions: write
   contents: read
+  pages: write
+  id-token: write
 
 jobs:
   ui:
@@ -66,3 +68,24 @@ jobs:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           token: ${{ secrets.GITHUB_TOKEN }}
           workingDir: packages/go-ui-storybook
+  github-pages:
+    name: Deploy to Github Pages
+    runs-on: ubuntu-latest
+    needs: [ui]
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: actions/download-artifact@v4
+        with:
+          name: ui-build
+          path: packages/ui/dist
+      - uses: bitovi/[email protected]
+        with:
+          install_command: yarn install
+          build_command: yarn build-storybook
+          path: packages/go-ui-storybook/storybook-static
+          checkout: false

packages/go-ui-storybook/.storybook/ifrcGoTheme.js

@@ -4,6 +4,6 @@ export default create({
     base: 'light',
     brandTitle: 'IFRC-GO',
     brandUrl: '/',
-    brandImage: '/go-logo.svg',
+    brandImage: './go-logo.svg',
     brandTarget: 'IFRC_GO',
 });

packages/go-ui-storybook/.storybook/manager-head.html

@@ -0,0 +1,3 @@
+<meta name="description" content="IFRC Go UI Library: This repository provides guidance and practical advice for designers, developers, and users adding data, graphics, and dashboards to IFRC Go. It includes the IFRC Go design principles, visual guidelines, UI components. The library is open source and is welcome to be used by anyone across the IFRC network." key="desc" />
+
+

packages/go-ui-storybook/src/stories/Introduction.mdx

@@ -7,7 +7,7 @@ import pkg from '@togglecorp/fujs/package.json';
   IFRC Go UI
 </h1>
 
-<img src="/go-logo.svg" alt="IFRC Go logo" className="ifrc-logo" />
+<img src="./go-logo.svg" alt="IFRC Go logo" className="ifrc-logo" />
 
 <h3 className="overview">
   Overview