full refactor

code-dot-org · Jan 30, 2025 · e3c7fb4 · e3c7fb4
1 parent 06cb378
commit e3c7fb4
Showing 1 changed file with 164 additions and 118 deletions.
diff --git a/.github/workflows/design-system-ci.yml b/.github/workflows/design-system-ci.yml
@@ -1,4 +1,4 @@
-name: Design System CI and QA
+name: Component-Library-CICD
 
 on:
     workflow_dispatch:
@@ -13,32 +13,11 @@ on:
       paths:
         - 'frontend/**'
 
-permissions:
-  packages: write
-  contents: write
-  pages: write
-  id-token: write
-  pull-requests: write
-  issues: write
-
 jobs:
     build:
         runs-on: ubuntu-24.04
 
         steps:
-            - uses: actions/checkout@v4
-              with:
-                sparse-checkout: 'frontend'
-                fetch-tags: true
-                fetch-depth: 0 # fetch full history
-                filter: tree:0
-
-            - name: Configure Git
-              run: |
-                git config user.name github-actions
-                git config user.email [email protected]
-                git describe --abbrev=0 --match '*@*[[:digit:]]*.[[:digit:]]*.[[:digit:]]*'
-            
             - name: Enable Corepack before setting up Node
               run: corepack enable
 
@@ -52,104 +31,171 @@ jobs:
               run: yarn install
               working-directory: ./frontend
 
-#            - name: Install Playwright for Design System Storybook
-#              run: npx playwright install --with-deps
-#              working-directory: ./frontend/apps/design-system-storybook
-#
-#            - name: Lint
-#              run: yarn lint --filter @code-dot-org/component-library-cicd-poc --filter @code-dot-org/design-system-storybook
-#              working-directory: ./frontend
-#
+            - name: Install Playwright for Design System Storybook
+              run: npx playwright install --with-deps
+              working-directory: ./frontend/apps/design-system-storybook
+
+            - name: Lint
+              run: yarn lint --filter @code-dot-org/component-library-cicd-poc --filter @code-dot-org/design-system-storybook
+              working-directory: ./frontend
+
             - name: Build
               run: yarn build --filter @code-dot-org/component-library-cicd-poc --filter @code-dot-org/design-system-storybook
               working-directory: ./frontend
-#
-#            - name: Unit Tests
-#              run: yarn test --filter @code-dot-org/component-library-cicd-poc --filter @code-dot-org/design-system-storybook
-#              working-directory: ./frontend
-#
-#            - name: UI Tests
-#              run: yarn test:ui:ci --filter @code-dot-org/component-library-cicd-poc --filter @code-dot-org/design-system-storybook
-#              working-directory: ./frontend
-
-            - name: Eyes Tests
-              id: eyes
-              run: |
-                output=$(yarn eyes-storybook || true)
-                echo "$output"
-                
-                # Extract the line containing 'See details at'
-                details_line=$(echo "$output" | grep -o 'See details at.*')
-                
-                EYES_TESTS_SUCCESSFUL="false"
-                
-                if echo "$output" | grep -q "No differences were found!"; then
-                  EYES_TESTS_SUCCESSFUL="true"
-                fi
-                
-                echo "Eyes Status: $EYES_TESTS_SUCCESSFUL"
-                
-                echo "Details: $details_line"
-                echo "APPLITOOLS_EYES_FAILURE_LINK=$details_line" >> $GITHUB_ENV
-                echo "EYES_TESTS_SUCCESSFUL=$EYES_TESTS_SUCCESSFUL" >> $GITHUB_ENV
-              working-directory: ./frontend/apps/design-system-storybook
-              continue-on-error: ${{ github.event_name == 'pull_request' }}
-              env:
-                APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
 
-            - name: Comment on PR (if triggered by PR)
-              if: github.event_name == 'pull_request'
-              uses: actions/github-script@v6
+            - name: Unit Tests
+              run: yarn test --filter @code-dot-org/component-library-cicd-poc --filter @code-dot-org/design-system-storybook
+              working-directory: ./frontend
+
+            - name: UI Tests
+              run: yarn test:ui:ci --filter @code-dot-org/component-library-cicd-poc --filter @code-dot-org/design-system-storybook
+              working-directory: ./frontend
+
+            - name: Upload static files as pages artifact
+              id: deployment
+              uses: actions/upload-pages-artifact@v3
               with:
-                github-token: ${{ secrets.GITHUB_TOKEN }}
-                script: |
-                  // Extract out the URL to eyes from this string:
-                  // See details at https://eyes.applitools.com/app/test-results/[uuid]
-                  const eyesFailureLink = process.env.APPLITOOLS_EYES_FAILURE_LINK ? 
-                    process.env.APPLITOOLS_EYES_FAILURE_LINK.match(/(?<=See details at )\S+/)[0] :
-                    undefined;
-                  
-                  console.log("var", process.env.EYES_TESTS_SUCCESSFUL);
-                  
-                  const body = process.env.EYES_TESTS_SUCCESSFUL === "true" ?
-                    `✅ No eyes differences detected!` :
-                    `⚠️⚠️⚠️\n\nDetected [eyes differences](${ eyesFailureLink })! Please confirm if changes are expected before merging.`;
-                  
-                  await github.rest.issues.createComment({
-                    issue_number: context.issue.number,
-                    owner: context.repo.owner,
-                    repo: context.repo.repo,
-                    body
-                  });
-
-            - name: Authentication
-              if: github.event_name == 'push'
-              run: |
-                echo npmAuthToken: "$NODE_AUTH_TOKEN" >> ./.yarnrc.yml
-              env:
-                NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-            - name: Update Changelog
-              if: github.event_name == 'push'
-              run: yarn monoweave --log-level 0
-              working-directory: ./frontend/packages/component-library
-
-#            - name: Upload static files as pages artifact
-#              id: deployment
-#              uses: actions/upload-pages-artifact@v3
-#              with:
-#                path: frontend/apps/design-system-storybook/storybook-static
-#                name: design-system-storybook
-#
-#    deploy:
-#      needs: build
-#      environment:
-#        name: design-system-storybook
-#        url: ${{ steps.deployment.outputs.page_url }}
-#      runs-on: ubuntu-24.04
-#      steps:
-#        - name: Deploy to GitHub Pages
-#          id: deployment
-#          uses: actions/deploy-pages@v4
-#          with:
-#            artifact_name: "design-system-storybook"
+                path: frontend/apps/design-system-storybook/storybook-static
+                name: design-system-storybook
+
+    eyes:
+      runs-on: ubuntu-24.04
+
+      permissions:
+        pull-requests: write
+        issues: write
+
+      steps:
+      - uses: actions/checkout@v4
+        with:
+          sparse-checkout: 'frontend'
+
+      - name: Enable Corepack before setting up Node
+        run: corepack enable
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: "frontend/.nvmrc"
+          cache: "yarn"
+          cache-dependency-path: 'frontend/yarn.lock'
+
+      - name: Install dependencies
+        run: yarn install
+        working-directory: ./frontend
+
+      - name: Eyes Tests
+        id: eyes
+        run: |
+          output=$(yarn eyes-storybook || true)
+          echo "$output"
+          
+          # Extract the line containing 'See details at'
+          details_line=$(echo "$output" | grep -o 'See details at.*')
+          
+          EYES_TESTS_SUCCESSFUL="false"
+          
+          if echo "$output" | grep -q "No differences were found!"; then
+            EYES_TESTS_SUCCESSFUL="true"
+          fi
+          
+          echo "Eyes Status: $EYES_TESTS_SUCCESSFUL"
+          
+          echo "Details: $details_line"
+          echo "APPLITOOLS_EYES_FAILURE_LINK=$details_line" >> $GITHUB_ENV
+          echo "EYES_TESTS_SUCCESSFUL=$EYES_TESTS_SUCCESSFUL" >> $GITHUB_ENV
+        working-directory: ./frontend/apps/design-system-storybook
+        continue-on-error: ${{ github.event_name == 'pull_request' }}
+        env:
+          APPLITOOLS_API_KEY: ${{ secrets.APPLITOOLS_API_KEY }}
+
+      - name: Comment on PR (if triggered by PR)
+        if: github.event_name == 'pull_request'
+        uses: actions/github-script@v6
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            // Extract out the URL to eyes from this string:
+            // See details at https://eyes.applitools.com/app/test-results/[uuid]
+            const eyesFailureLink = process.env.APPLITOOLS_EYES_FAILURE_LINK ? 
+              process.env.APPLITOOLS_EYES_FAILURE_LINK.match(/(?<=See details at )\S+/)[0] :
+              undefined;
+            
+            console.log("var", process.env.EYES_TESTS_SUCCESSFUL);
+            
+            const body = process.env.EYES_TESTS_SUCCESSFUL === "true" ?
+              `✅ No eyes differences detected!` :
+              `⚠️⚠️⚠️\n\nDetected [eyes differences](${ eyesFailureLink })! Please confirm if changes are expected before merging.`;
+            
+            await github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body
+            });
+
+    release:
+      if: github.event_name == 'push'
+      needs: build
+      runs-on: ubuntu-24.04
+
+      permissions:
+        packages: write
+        contents: write
+        pages: write
+        id-token: write
+
+      steps:
+      - uses: actions/checkout@v4
+        with:
+          sparse-checkout: 'frontend'
+          fetch-tags: true
+          fetch-depth: 0 # fetch full history
+          filter: tree:0
+
+      - name: Configure Git
+        run: |
+          git config user.name github-actions
+          git config user.email [email protected]
+
+      - name: Enable Corepack before setting up Node
+        run: corepack enable
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: "frontend/.nvmrc"
+          cache: "yarn"
+          cache-dependency-path: 'frontend/yarn.lock'
+
+      - name: Install dependencies
+        run: yarn install
+        working-directory: ./frontend
+
+      - name: Authentication
+        run: |
+          echo npmAuthToken: "$NODE_AUTH_TOKEN" >> ./.yarnrc.yml
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Update Changelog
+        run: yarn monoweave --log-level 0
+        working-directory: ./frontend/packages/component-library
+
+    deploy:
+      if: github.event_name == 'push'
+      needs:
+        - build
+        - release
+
+      permissions:
+        pages: write
+
+      environment:
+        name: design-system-storybook
+        url: ${{ steps.deployment.outputs.page_url }}
+      runs-on: ubuntu-24.04
+      steps:
+        - name: Deploy to GitHub Pages
+          id: deployment
+          uses: actions/deploy-pages@v4
+          with:
+            artifact_name: "design-system-storybook"