NEXT-33446 - add basic CI pipeline

packages/component-library/.github/workflows/chromatic.yml → .github/workflows/chromatic.yml

@@ -1,34 +1,31 @@
 name: 'Chromatic'
 
-on:  
+on:
   push:
     branches:
       - main
 
-# List of jobs
 jobs:
   chromatic-deployment:
-    # Operating System
     runs-on: ubuntu-latest
-    # Job steps
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0 # Required for the chromatic CLI to work
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
 
       - name: Retrieve the cached main "node_modules" directory (if present)
         uses: actions/cache@v3
         id: node-cache-main
         with:
           path: node_modules
           key: node-modules-main-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
-      
+
       - name: Install main dependencies (if the cached directory was not found)
         if: steps.node-cache-main.outputs.cache-hit != 'true'
         run: npm ci
@@ -39,4 +36,3 @@ jobs:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           zip: true
           allowConsoleErrors: true
-

packages/component-library/.github/workflows/deployment.yml → .github/workflows/deployment.yml

@@ -1,6 +1,6 @@
 name: Deployment
 
-on:  
+on:
   push:
     branches:
       - main
@@ -10,26 +10,26 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
 
       - name: Retrieve the cached main "node_modules" directory (if present)
         uses: actions/cache@v3
         id: node-cache-main
         with:
           path: node_modules
           key: node-modules-main-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
-      
+
       - name: Install main dependencies (if the cached directory was not found)
         if: steps.node-cache-main.outputs.cache-hit != 'true'
         run: npm ci
 
       - name: Create the static pages directory locally in CI
-        run: npm run build-storybook
+        run: npm --prefix ./packages/component-library run build-storybook
 
       - name: Deploy 🚀
         if: github.ref == 'refs/heads/main'

packages/component-library/.github/workflows/npm-publish.yml → .github/workflows/npm-publish.yml

@@ -1,6 +1,6 @@
 name: Publish to NPM
 
-on:  
+on:
   push:
     branches:
       - main
@@ -11,23 +11,27 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
+
       - name: Retrieve the cached "node_modules" directory (if present)
         uses: actions/cache@v3
         id: node-cache
         with:
           path: node_modules
           key: node-modules-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
+
       - name: Install dependencies (if the cached directory was not found)
         if: steps.node-cache.outputs.cache-hit != 'true'
         run: npm ci
+
       - name: Build distributed files
-        run: npm run build-vue
+        run: npm --prefix ./packages/component-library run build-vue
       - uses: JS-DevTools/npm-publish@v1
         with:
           token: ${{ secrets.NPM_TOKEN }}
-          access: "public"
+          access: 'public'

packages/component-library/.github/workflows/preview.yml → .github/workflows/preview.yml

@@ -1,6 +1,6 @@
 name: Deploy PR previews
 
-on:  
+on:
   pull_request:
     types:
       - opened
@@ -15,28 +15,28 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
-        
+          node-version: '20'
+
       - name: Retrieve the cached main "node_modules" directory (if present)
         uses: actions/cache@v3
         id: node-cache-main
         with:
           path: node_modules
           key: node-modules-main-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
-      
+
       - name: Install main dependencies (if the cached directory was not found)
-        if: steps.node-cache-main.outputs.cache-hit != 'true'
+        # if: steps.node-cache-main.outputs.cache-hit != 'true'
         run: npm ci
 
       - name: Create the static pages directory locally in CI
-        run: npm run build-storybook
+        run: npm --prefix ./packages/component-library run build-storybook
 
       - name: Deploy preview
         uses: rossjrw/pr-preview-action@v1
         with:
-          source-dir: ./storybook-static/
+          source-dir: ./packages/component-library/storybook-static/

.github/workflows/tests.yml

@@ -0,0 +1,112 @@
+name: Tests
+
+on:
+  pull_request:
+
+  push:
+    branches:
+      - main
+
+  workflow_dispatch:
+
+jobs:
+  static-analysis:
+    name: Static Analysis
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Retrieve the cached "node_modules" directory (if present)
+        uses: actions/cache@v3
+        id: node-cache
+        with:
+          path: node_modules
+          key: node-modules-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
+
+      - name: Install dependencies (if the cached directory was not found)
+        if: steps.node-cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: Check formatting
+        run: npm run format:check
+
+      - name: Perform typecheck
+        run: npm run lint:types
+
+      - name: Lint code
+        run: npm run lint:eslint
+
+  unit-tests:
+    name: Unit tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      # - name: Retrieve the cached "node_modules" directory (if present)
+      #   uses: actions/cache@v3
+      #   id: node-cache
+      #   with:
+      #     path: node_modules
+      #     key: node-modules-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
+
+      - name: Install dependencies (if the cached directory was not found)
+        # if: steps.node-cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: unit
+        run: npm run test:unit
+
+  storybook-tests:
+    name: Storybook Tests
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+
+      # - name: Retrieve the cached "node_modules" directory (if present)
+      #   uses: actions/cache@v3
+      #   id: node-cache
+      #   with:
+      #     path: node_modules
+      #     key: node-modules-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
+
+      - name: Install dependencies (if the cached directory was not found)
+        # if: steps.node-cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: Install Playwright
+        run: npx playwright install
+
+      - name: Create the static pages directory locally in CI
+        run: npm --prefix ./packages/component-library run build-storybook
+
+      - name: Run Tests
+        id: storybookTests
+        run: |
+          cd ./packages/component-library &&
+          npx concurrently --kill-others --success first --names "SB,TEST" --prefix-colors "magenta,blue" \
+          "http-server storybook-static -a 127.0.0.1 --port 6006" \
+          "wait-on http://127.0.0.1:6006 && npm run test-storybook"
+
+      - name: Archive visual test diffs
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: visual-test-diffs
+          path: ./packages/component-library/__snapshots__