Merge pull request #1397 from GSA/pr-branches

Adding support for pr-branches

.github/workflows/build-and-deploy-storybook.yml

@@ -8,11 +8,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out repository code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Setup Node
         uses: actions/setup-node@v1
         with:
-          node-version: '16.x'
+          node-version: '18.x'
       - name: Install Node Packages
         run: npm i
       - name: Install Global NG CLI
@@ -26,7 +26,9 @@ jobs:
       - name: Add .nojekyll file to allow for node_modules to be included in bundle
         run: touch storybook-static/.nojekyll
       - name: Deploy 🚀
-        uses: JamesIves/github-pages-deploy-action@v4.2.3
+        uses: JamesIves/github-pages-deploy-action@v4.3.0
         with:
           branch: gh-pages
           folder: storybook-static
+          clean-exclude: pr-preview/
+          force: false

.github/workflows/pr-workflow.yml

@@ -0,0 +1,37 @@
+name: Build PR And Deploy
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - closed
+
+concurrency: preview-${{ github.ref }}
+jobs:
+  Build-And-Deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: '18.x'
+      - name: Install Node Packages
+        run: npm i
+      - name: Install Global NG CLI
+        run: npm install -g @angular/cli@16
+      - name: Build Stackblitz HTMLs
+        run: npm run demo:stackblitzes
+      - name: Build Storybook Assets
+        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
+          pr: ${{ github.event.number }}
+        run: GH_PAGES=true PR=$pr ng run sam-design-system-site:build-storybook
+      - name: Add .nojekyll file to allow for node_modules to be included in bundle
+        run: touch storybook-static/.nojekyll
+      - name: Deploy preview
+        uses: rossjrw/pr-preview-action@v1
+        with:
+          source-dir: ./storybook-static/

.storybook/main.cjs

@@ -27,12 +27,13 @@ module.exports = {
   },
   webpackFinal: async (config) => {
     if (process.env.GH_PAGES) {
+        const assetsPath = process.env.pr ? `/sam-design-system/pr-preview/pr-${process.env.pr}/assets/` : `/sam-design-system/assets/`
         config.module.rules.push({
             test: /.scss$/,
             loader: 'string-replace-loader',
             options: {
                 search: /\/assets\//g,
-                replace: '/sam-design-system/assets/',
+                replace: assetsPath,
             },
         });
     }