feat(web-components): migrate web components to the monorepo

.github/workflows/ci.yml

@@ -34,6 +34,8 @@ jobs:
         with:
           node-version: '20.x'
       - name: Install dependencies
+        env:
+          YARN_ENABLE_HARDENED_MODE: 0
         run: yarn install --immutable --immutable-cache
       - name: Check formatting of project files
         run: yarn format:diff
@@ -47,6 +49,8 @@ jobs:
         with:
           node-version: '20.x'
       - name: Install dependencies
+        env:
+          YARN_ENABLE_HARDENED_MODE: 0
         run: yarn install --immutable --immutable-cache
       - name: Lint JavaScript files
         run: yarn lint
@@ -72,6 +76,8 @@ jobs:
             ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock',
             'packages/**/yarn.lock') }}
       - name: Install dependencies
+        env:
+          YARN_ENABLE_HARDENED_MODE: 0
         run: yarn install --immutable --immutable-cache
       - name: Build project
         run: yarn build
@@ -104,6 +110,8 @@ jobs:
             ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock',
             'packages/**/yarn.lock') }}
       - name: Install dependencies
+        env:
+          YARN_ENABLE_HARDENED_MODE: 0
         run: yarn install --immutable --immutable-cache
       - uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
         id: filter
@@ -148,6 +156,8 @@ jobs:
             ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock',
             'packages/**/yarn.lock') }}
       - name: Install dependencies
+        env:
+          YARN_ENABLE_HARDENED_MODE: 0
         run: yarn install --immutable --immutable-cache
       - name: Install browsers
         run: yarn playwright install --with-deps
@@ -215,6 +225,8 @@ jobs:
             ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock',
             'packages/**/yarn.lock') }}
       - name: Install dependencies
+        env:
+          YARN_ENABLE_HARDENED_MODE: 0
         run: yarn install --immutable --immutable-cache
       - name: Install browsers
         run: yarn playwright install --with-deps
@@ -278,6 +290,8 @@ jobs:
             ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock',
             'packages/**/yarn.lock') }}
       - name: Install dependencies
+        env:
+          YARN_ENABLE_HARDENED_MODE: 0
         run: yarn install --immutable --immutable-cache
 
       - name: Download vrt blob reports from GitHub Actions Artifacts

.github/workflows/deploy-web-components-storybook.yml

@@ -0,0 +1,53 @@
+name: Deploy Web Components storybook to GH pages
+
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      # Matches tags that have the shape `vX.Y.Z`. Reference:
+      # https://help.github.com/en/articles/workflow-syntax-for-github-actions#onpushpull_requesttagsbranches
+      - 'v[0-9]+.[0-9]+.[0-9]+'
+
+      # Ignore tags that use a preid after `vX.Y.Z`, for example: vX.Y.Z-alpha.0
+      # https://help.github.com/en/articles/workflow-syntax-for-github-actions#example-using-positive-and-negative-patterns
+      - '!v[0-9]+.[0-9]+.[0-9]+-*'
+      - '!v10*'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b #v4.0.3
+        with:
+          node-version: '20.x'
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Build project
+        run: yarn build
+      - name: Build static Web Components storybook
+        run: |
+          cd packages/web-components
+          yarn storybook:build
+      - name: Create CNAME
+        run: |
+          touch packages/web-components/storybook-static/CNAME
+          echo "web-components.carbondesignsystem.com" > packages/web-components/storybook-static/CNAME
+      - name: Push to Web Components repo
+        uses: cpina/github-action-push-to-another-repository@07c4d7b3def0a8ebe788a8f2c843a4e1de4f6900 #v1.7.2
+        env:
+          API_TOKEN_GITHUB: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+        with:
+          source-directory: 'packages/web-components/storybook-static'
+          destination-github-username: 'carbon-design-system'
+          destination-repository-name: 'carbon-web-components-storybook-v2'
+          user-name: carbon-bot
+          user-email: carbon@us.ibm.com
+          target-branch: main
+          commit-message: 'chore(website): update to latest'

.github/workflows/publish-web-components-cdn.yml

@@ -0,0 +1,89 @@
+name: Publish Web Components CDN artifacts to Cloud Object Storage
+
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      # Matches tags that have the shape `vX.Y.Z` or `vX.Y.Z-rc.X` Reference:
+      # https://help.github.com/en/articles/workflow-syntax-for-github-actions#onpushpull_requesttagsbranches
+      - 'v[0-9]+.[0-9]+.[0-9]+'
+      - 'v[0-9]+.[0-9]+.[0-9]+-*'
+      - '!v10*'
+
+concurrency:
+  group: deploy-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  publish-cdn:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+        with:
+          fetch-depth: '0'
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install
+      - name: Build Web Components package
+        run: |
+          cd packages/web-components
+          yarn build
+      - name: Check release type
+        if: contains(github.ref_name, '-rc.')
+        run: echo "PRE_RELEASE=true" >> $GITHUB_ENV
+      - name: Get version of web components from package.json
+        id: package-version
+        uses: martinbeentjes/npm-get-version-action@v1.3.1
+        with:
+          path: packages/web-components
+
+      # If tag is a release candidate, upload the CDN artifacts to the `next` tag folder
+      # ie. https://1.www.s81c.com/common/carbon/web-components/tag/v2/next/breadcrumb.min.js
+      - name: Upload to COS under the `next` folder
+        if: ${{ env.PRE_RELEASE }}
+        uses: jakejarvis/s3-sync-action@master
+        with:
+          args: --acl public-read --follow-symlinks
+        env:
+          AWS_S3_BUCKET: ${{ secrets.COMMON_COS_BUCKET }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.COMMON_COS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.COMMON_COS_SECRET_ACCESS_KEY }}
+          AWS_REGION: ${{ secrets.COMMON_COS_REGION }}
+          AWS_S3_ENDPOINT: https://${{ secrets.COMMON_COS_ENDPOINT }}
+          SOURCE_DIR: 'packages/web-components/dist'
+          DEST_DIR: 'common/carbon/web-components/tag/v2/next'
+
+      # If tag is a full release, upload the CDN artifacts to the `latest` tag folder
+      # ie. https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/breadcrumb.min.js
+      - name: Upload to COS under the `latest` folder
+        if: ${{ !env.PRE_RELEASE }}
+        uses: jakejarvis/s3-sync-action@master
+        with:
+          args: --acl public-read --follow-symlinks
+        env:
+          AWS_S3_BUCKET: ${{ secrets.COMMON_COS_BUCKET }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.COMMON_COS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.COMMON_COS_SECRET_ACCESS_KEY }}
+          AWS_REGION: ${{ secrets.COMMON_COS_REGION }}
+          AWS_S3_ENDPOINT: https://${{ secrets.COMMON_COS_ENDPOINT }}
+          SOURCE_DIR: 'packages/web-components/dist'
+          DEST_DIR: 'common/carbon/web-components/tag/v2/latest'
+
+      # Upload the CDN artifacts to versioned folder
+      # ie. https://1.www.s81c.com/common/carbon/web-components/version/v2.12.0/breadcrumb.min.js
+      - name: Upload to COS under the versioned folder
+        uses: jakejarvis/s3-sync-action@master
+        with:
+          args: --acl public-read --follow-symlinks
+        env:
+          AWS_S3_BUCKET: ${{ secrets.COMMON_COS_BUCKET }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.COMMON_COS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.COMMON_COS_SECRET_ACCESS_KEY }}
+          AWS_REGION: ${{ secrets.COMMON_COS_REGION }}
+          AWS_S3_ENDPOINT: https://${{ secrets.COMMON_COS_ENDPOINT }}
+          SOURCE_DIR: 'packages/web-components/dist'
+          DEST_DIR: 'common/carbon/web-components/version/v${{steps.package-version.outputs.current-version}}'