sketch out GHA

.circleci/config.yml

@@ -6,7 +6,7 @@ references:
   default_env: &default_env
     docker:
       - image: cimg/node:22.13.1
-    working_directory: ~/repo
+    working_directory: ~/repo # not required?
     environment:
       IGNORE_COMMIT_MESSAGE: 'chore(release): publish'
       NODE_OPTIONS: '--max_old_space_size=8196'
@@ -67,15 +67,15 @@ references:
         - packages
 
   restore_node_modules: &restore_node_modules
-    attach_workspace:
+    attach_workspace: #The attach_workspace copies and re-creates the entire workspace content when it runs.
       at: ~/repo
 
   build_all_packages: &build_all_packages
     run:
       name: Build All Packages
       command: yarn build
 
-  set_git_user: &set_git_user
+  set_git_user: &set_git_user # move to yarn actikon maybe
     run:
       name: Set git user
       command: |
@@ -111,7 +111,7 @@ jobs:
   checkout_code:
     <<: *default_env
     steps:
-      - checkout
+      - checkout # circle keyword
       - *set_npm_token
       - *restore_yarn_cache
       - run: yarn --production=false --frozen-lockfile
@@ -197,7 +197,7 @@ jobs:
           name: deploy
           command: |
             DEPLOY_MESSAGE="User: ${CIRCLE_USERNAME} Project: ${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME} Pull Request: ${CIRCLE_PULL_REQUEST}"
-            npx netlify-cli@17.37.1 deploy --message "${DEPLOY_MESSAGE}" --dir dist/storybook/styleguide --json --filter @codecademy/styleguide > .deploy-output
+            npx netlify-cli@22.1.3 deploy --message "${DEPLOY_MESSAGE}" --dir dist/storybook/styleguide --json --filter @codecademy/styleguide > .deploy-output
       - setup_remote_docker
       - run: docker pull cloudposse/github-commenter:0.5.0-58
       - run:
@@ -224,44 +224,6 @@ jobs:
                       cloudposse/github-commenter:0.5.0-58
             fi
 
-  publish_alpha:
-    <<: *default_env
-    resource_class: large
-    steps:
-      - *skip_if_not_pr
-      - *skip_on_automated_commit
-      - *set_git_user
-      - checkout
-      - *restore_node_modules
-      - *set_npm_token
-      - *restore_nx_cache
-      - *build_all_packages
-      - *save_nx_cache
-      - run:
-          name: lerna publish (alpha)
-          command: yarn lerna publish --exact --yes --include-merged-tags --no-push --no-git-reset --conventional-commits --conventional-prerelease --preid=alpha.${CIRCLE_SHA1:0:6} --dist-tag=alpha.${CIRCLE_SHA1:0:6}
-      - setup_remote_docker
-      - run: docker pull cloudposse/github-commenter:0.5.0-58
-      - run:
-          name: Comment
-          command: |
-            ALPHA_PACKAGES="$(yarn lerna ll --parseable | grep alpha || true)"
-            if [ -z "$ALPHA_PACKAGES" ]
-            then
-              echo "No alpha published packages found, will not add PR comment"
-            else
-              docker run --rm \
-                      -e GITHUB_TOKEN \
-                      -e GITHUB_OWNER="${CIRCLE_PROJECT_USERNAME}" \
-                      -e GITHUB_REPO="${CIRCLE_PROJECT_REPONAME}" \
-                      -e GITHUB_COMMENT_TYPE=pr \
-                      -e GITHUB_PR_ISSUE_NUMBER="${CIRCLE_PR_NUMBER:-${CIRCLE_PULL_REQUEST##*/}}" \
-                      -e GITHUB_COMMENT_TEMPLATE='<h3>📬Published Alpha Packages:</h3><pre>{{$x := splitList "\n" .}}{{range $x}}{{$y := split ":" .}}{{printf "%s@%v<br/>" $y._1 $y._2}}{{end}}</pre><!--LERNA_VERSION_COMMENT-->' \
-                      -e GITHUB_DELETE_COMMENT_REGEX="LERNA_VERSION_COMMENT" \
-                      -e GITHUB_COMMENT="${ALPHA_PACKAGES}" \
-                      cloudposse/github-commenter:0.5.0-58
-            fi
-
 workflows:
   version: 2
   build-test:
@@ -281,14 +243,6 @@ workflows:
           filters:
             branches:
               only: main
-      - publish_alpha:
-          filters:
-            branches:
-              ignore:
-                - main
-                - gh-pages
-          requires:
-            - checkout_code
 
   deploy:
     jobs:
@@ -304,11 +258,3 @@ workflows:
           filters:
             branches:
               only: main
-      - deploy_alpha:
-          filters:
-            branches:
-              ignore:
-                - main
-                - gh-pages
-          requires:
-            - checkout_code

.github/actions/yarn/action.yml

@@ -0,0 +1,14 @@
+name: 'Setup Node & yarn'
+description: 'Setup a NodeJS environment, install deps, & builds packages'
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Setup Node.js
+      uses: actions/setup-node@3235b876344d2a9aa001b8d1453c930bba69e610
+      with:
+        node-version-file: .nvmrc
+
+    - name: Install dependencies
+      shell: bash
+      run: yarn --production=false --frozen-lockfile

.github/workflows/deploy-alpha.yml

@@ -0,0 +1,65 @@
+name: Deploy Storybook Preview
+
+on:
+  pull_request:
+    branches-ignore:
+      - main
+      - gh-pages
+
+env:
+  NODE_VERSION: '22.13.1'
+  NODE_OPTIONS: '--max_old_space_size=8196'
+  NX_CLOUD: false
+  IGNORE_COMMIT_MESSAGE: 'chore(release): publish'
+
+permissions:
+  id-token: write
+  contents: read
+  pull-requests: write
+  issues: write
+
+jobs:
+  deploy-alpha:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup and Build
+        id: setup
+        uses: ./.github/actions/yarn
+
+      - name: Set git user
+        run: |
+          git config --global user.email "[email protected]"
+          git config --global user.name "codecademydev"
+          git config --global push.default current
+
+      - name: Build Storybook
+        run: yarn build && yarn nx run styleguide:build-storybook
+
+      - name: Deploy to Netlify
+        id: deploy
+        run: |
+          DEPLOY_MESSAGE="User: ${{ github.actor }} Project: ${{ github.repository }} Pull Request: ${{ github.event.pull_request.html_url }}"
+          echo "deploy-output=$(npx [email protected] deploy --message "${DEPLOY_MESSAGE}" --dir dist/storybook/styleguide --json --filter @codecademy/styleguide)" >> $GITHUB_OUTPUT
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+          #  when this is added, can't find project id -_- without it we run into main() error!!!
+
+      - name: Comment on PR with deployment info
+        if: steps.deploy.outputs.deploy-output
+        uses: marocchino/sticky-pull-request-comment@67d0dec7b07ed060a405f9b2a64b8ab319fdd7db
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          header: Storybook Deploy Preview
+          recreate: true
+          message: |
+            🚀 **Styleguide deploy preview ready!**
+
+            **Deploy URL:** ${{ fromJson(steps.deploy.outputs.deploy-output).deploy_url }}
+            **Deploy Logs:** ${{ fromJson(steps.deploy.outputs.deploy-output).logs }}
+
+            <!--ALPHA_DEPLOY_COMMENT-->

.github/workflows/publish-alpha.yml

@@ -0,0 +1,77 @@
+name: Publish Alpha
+
+on:
+  pull_request:
+    branches-ignore:
+      - main
+
+env:
+  NODE_VERSION: '22.13.1'
+  NODE_OPTIONS: '--max_old_space_size=8196'
+  NX_CLOUD: false
+  IGNORE_COMMIT_MESSAGE: 'chore(release): publish'
+
+permissions:
+  id-token: write
+  contents: read
+  pull-requests: write
+  issues: write
+  actions: write
+
+jobs:
+  publish-alpha:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v4 # v4.2.2
+        with:
+          fetch-depth: 0
+          ref: ${{  github.event.pull_request.head.ref }}
+
+      - name: Setup and Build
+        id: setup
+        uses: ./.github/actions/yarn
+
+      - name: Set git user
+        run: |
+          git config --global user.email "[email protected]"
+          git config --global user.name "codecademydev"
+          git config --global push.default current
+
+      - name: Set npm token
+        run: |
+          echo "//registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN" > .npmrc
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}
+
+      - run: npx nx run-many --target=publish-build --parallel=3
+
+      - name: Publish alpha packages
+        run: |
+          SHORT_SHA=${GITHUB_SHA:0:6}
+          yarn lerna publish --no-verify-access --exact --yes --include-merged-tags --no-push --no-git-reset --conventional-commits --conventional-prerelease --preid=alpha.${SHORT_SHA} --dist-tag=alpha.${SHORT_SHA}
+        env:
+          GH_TOKEN: ${{ secrets.ACTIONS_GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN  }}
+
+      - name: List alpha packages versions
+        id: published
+        continue-on-error: true
+        run: |
+          {
+            echo 'result<<EOF'
+            yarn lerna ll --parseable | grep -Po '@codecademy.*alpha.*' | sed 's/:/@/g' || true
+            echo 'EOF'
+          } >> $GITHUB_OUTPUT
+
+      - name: Comment with published alpha packages
+        uses: marocchino/sticky-pull-request-comment@67d0dec7b07ed060a405f9b2a64b8ab319fdd7db # v2.9.2
+        if: steps.published.outputs.result
+        with:
+          GITHUB_TOKEN: ${{ secrets.ACTIONS_GITHUB_TOKEN }}
+          header: Alpha Packages
+          recreate: true
+          message: |
+            📬 Published Alpha Packages:
+            ```
+            ${{ steps.published.outputs.result }}
+            ```

packages/gamut-icons/project.json

@@ -41,6 +41,14 @@
         "cwd": "{projectRoot}",
         "command": "rm -rf ./dist"
       }
+    },
+    "publish-build": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build"],
+      "options": {
+        "commands": [],
+        "parallel": false
+      }
     }
   }
 }

packages/gamut-illustrations/project.json

@@ -31,6 +31,14 @@
         "cwd": "{projectRoot}",
         "command": "rm -rf ./dist"
       }
+    },
+    "publish-build": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build"],
+      "options": {
+        "commands": [],
+        "parallel": false
+      }
     }
   }
 }

packages/gamut-patterns/project.json

@@ -40,6 +40,14 @@
         "cwd": "{projectRoot}",
         "command": "rm -rf ./dist"
       }
+    },
+    "publish-build": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build"],
+      "options": {
+        "commands": [],
+        "parallel": false
+      }
     }
   }
 }

packages/gamut-styles/project.json

@@ -34,6 +34,14 @@
         "cwd": "{projectRoot}",
         "command": "rm -rf ./dist"
       }
+    },
+    "publish-build": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build"],
+      "options": {
+        "commands": [],
+        "parallel": false
+      }
     }
   }
 }

packages/gamut-tests/project.json

@@ -32,6 +32,14 @@
         "cwd": "{projectRoot}",
         "command": "rm -rf ./dist"
       }
+    },
+    "publish-build": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build"],
+      "options": {
+        "commands": [],
+        "parallel": false
+      }
     }
   }
 }

packages/gamut/project.json

@@ -33,6 +33,14 @@
         "cwd": "{projectRoot}",
         "command": "rm -rf ./dist"
       }
+    },
+    "publish-build": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build"],
+      "options": {
+        "commands": [],
+        "parallel": false
+      }
     }
   }
 }

packages/styleguide/src/lib/Molecules/Popover/Popover.stories.tsx

@@ -38,7 +38,7 @@ const PopoverExample = ({ p = 16, ...rest }: PopoverExampleProps) => {
       </Box>
       <FlexBox>
         <Popover
-          {...(rest as any)}
+          {...rest}
           isOpen={open}
           targetRef={activeElRef}
           onRequestClose={() => setOpen(false)}

packages/variance/project.json

@@ -31,6 +31,14 @@
         "cwd": "{projectRoot}",
         "command": "rm -rf ./dist"
       }
+    },
+    "publish-build": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build"],
+      "options": {
+        "commands": [],
+        "parallel": false
+      }
     }
   }
 }