Merge pull request #161 from lunit-io/ds-171-ci

[DS-171] Update Chromatic Github Actions

.github/workflows/chromatic.yml

@@ -1,10 +1,5 @@
-# Workflow name
 name: "Chromatic Deployment - Design System"
 
-env:
-  CHROMATIC_APP_ID: 62d7d1f2efc8a1e364b5e5e8
-
-# Event for the workflow
 on:
   push:
     branches:
@@ -20,69 +15,48 @@ on:
       - "packages/design-system/**"
       - "packages/design-system-icons/**"
 
-# List of jobs
 jobs:
   chromatic-deployment:
     # Operating System
     runs-on: ubuntu-latest
     # Job steps
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0 # Required to retrieve git history
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: "18"
           cache: "npm"
 
-      - uses: nrwl/nx-set-shas@v3
+      - uses: nrwl/nx-set-shas@v4
 
       - name: Nx Cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: node_modules/.cache/nx
           key: ${{ github.repository }}-nx-${{ env.NX_BASE }}
           restore-keys: |
             ${{ github.repository }}-nx-
 
-      - name: Get branch name
-        env:
-          BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
-        id: branch-name
-        run: |
-          echo "value=$(echo $BRANCH_NAME)" >> $GITHUB_OUTPUT
-
-      - name: Get Chromatic branch name
-        env:
-          BRANCH_NAME: ${{ steps.branch-name.outputs.value }}
-        id: chromatic-branch-name
-        run: |
-          echo "value=$(echo $BRANCH_NAME | tr '[:upper:]' '[:lower:]' | tr / -)" >> $GITHUB_OUTPUT
-
       - name: Install dependencies
         run: npm ci
 
       - name: Build design-system package and its dependencies
         run: npx nx build @lunit/design-system
 
       - name: Publish to Chromatic
-        env:
-          BRANCH_NAME: ${{ steps.branch-name.outputs.value }}
-          CHROMATIC_BRANCH_NAME: ${{ steps.chromatic-branch-name.outputs.value }}
         id: chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@latest
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           buildScriptName: build-storybook:design-system
 
       - name: Comment preview link
-        env:
-          CHROMATIC_BRANCH_NAME: ${{ steps.chromatic-branch-name.outputs.value }}
         if: ${{ github.event_name == 'pull_request' }}
-        uses: NejcZdovc/comment-pr@v2.0.0
+        uses: thollander/actions-comment-pull-request@v2
         with:
-          message: "Design System Storybook: https://${{ env.CHROMATIC_BRANCH_NAME }}--${{ env.CHROMATIC_APP_ID }}.chromatic.com"
-          identifier: "PREVIEW_LINK_COMMENT"
-          github_token: ${{ secrets.GITHUB_TOKEN }}
+          message: "Design System Storybook: ${{ steps.chromatic.outputs.storybookUrl }}"
+          comment_tag: "PREVIEW_LINK_COMMENT"

.github/workflows/icons-chromatic.yml

@@ -24,19 +24,19 @@ jobs:
     runs-on: ubuntu-latest
     # Job steps
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0 # Required to retrieve git history
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: "18"
           cache: "npm"
 
-      - uses: nrwl/nx-set-shas@v3
+      - uses: nrwl/nx-set-shas@v4
 
       - name: Nx Cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: node_modules/.cache/nx
           key: ${{ github.repository }}-nx-${{ env.NX_BASE }}
@@ -53,7 +53,7 @@ jobs:
         # 👇 Adds Chromatic as a step in the workflow
       - id: chromatic
         name: Publish design-system-icons to Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@latest
         # Chromatic GitHub Action options
         with:
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.
@@ -62,8 +62,7 @@ jobs:
 
       - name: Comment preview link
         if: ${{ github.event_name == 'pull_request' }}
-        uses: NejcZdovc/comment-pr@v2.0.0
+        uses: thollander/actions-comment-pull-request@v2
         with:
           message: "Icons Storybook: ${{ steps.chromatic.outputs.storybookUrl }}"
-          identifier: "ICONS_PREVIEW_LINK_COMMENT"
-          github_token: ${{ secrets.GITHUB_TOKEN }}
+          comment_tag: "ICONS_PREVIEW_LINK_COMMENT"

.github/workflows/logo-chromatic.yml

@@ -24,19 +24,19 @@ jobs:
     runs-on: ubuntu-latest
     # Job steps
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0 # Required to retrieve git history
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: "18"
           cache: "npm"
 
-      - uses: nrwl/nx-set-shas@v3
+      - uses: nrwl/nx-set-shas@v4
 
       - name: Nx Cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: node_modules/.cache/nx
           key: ${{ github.repository }}-nx-${{ env.NX_BASE }}
@@ -53,7 +53,7 @@ jobs:
         # 👇 Adds Chromatic as a step in the workflow
       - id: chromatic
         name: Publish design-system-logo to Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@latest
         # Chromatic GitHub Action options
         with:
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.
@@ -62,8 +62,7 @@ jobs:
 
       - name: Comment preview link
         if: ${{ github.event_name == 'pull_request' }}
-        uses: NejcZdovc/comment-pr@v2.0.0
+        uses: thollander/actions-comment-pull-request@v2
         with:
           message: "Logo Storybook: ${{ steps.chromatic.outputs.storybookUrl }}"
-          identifier: "LOGO_PREVIEW_LINK_COMMENT"
-          github_token: ${{ secrets.GITHUB_TOKEN }}
+          comment_tag: "LOGO_PREVIEW_LINK_COMMENT"

packages/design-system/.storybook/Welcome/Welcome.tsx

@@ -1,23 +1,9 @@
-import { Alert, Link } from "@mui/material";
 import React from "react";
 
-const CHROMATIC_BRANCH_NAME = process.env.CHROMATIC_BRANCH_NAME;
-const CHROMATIC_APP_ID = process.env.CHROMATIC_APP_ID;
-
-const branchHostname = CHROMATIC_BRANCH_NAME
-  ? `${CHROMATIC_BRANCH_NAME}--${CHROMATIC_APP_ID}.chromatic.com`
-  : undefined;
-
 export const Welcome = () => {
   return (
     <div>
       <h2>Lunit Design System</h2>
-      {branchHostname != null && branchHostname !== window.location.hostname && (
-        <Alert severity="info">
-          Checkout the latest version for the current branch{" "}
-          <Link href={`//${branchHostname}`}>here</Link>.
-        </Alert>
-      )}
     </div>
   );
 };

packages/design-system/.storybook/main.js

@@ -1,6 +1,6 @@
 const path = require("path");
 const alias = require("../config/alias");
-const { getBranchName, getChromaticBranchName } = require("./branch");
+
 module.exports = {
   stories: [
     "./Welcome/Welcome.stories.tsx",
@@ -10,12 +10,12 @@ module.exports = {
   refs: {
     "design-system-icons": {
       title: "Lunit Design System Icons",
-      url: "https://64b4f32d63020d515460103f-nhxqywufcq.chromatic.com/",
+      url: "https://main--64b4f32d63020d515460103f.chromatic.com/",
       expanded: false,
     },
     "design-system-logo": {
       title: "Lunit Design System Logo",
-      url: "https://64b4d554d4cabd071c377a49-zzkrprgqdh.chromatic.com/",
+      url: "https://main--64b4d554d4cabd071c377a49.chromatic.com",
       expanded: false,
     },
   },
@@ -40,14 +40,6 @@ module.exports = {
       },
     },
   ],
-  env: (config) => ({
-    ...config,
-    BRANCH_NAME: process.env.BRANCH_NAME ?? getBranchName(),
-    CHROMATIC_APP_ID:
-      process.env.CHROMATIC_APP_ID ?? "62d7d1f2efc8a1e364b5e5e8",
-    CHROMATIC_BRANCH_NAME:
-      process.env.CHROMATIC_BRANCH_NAME ?? getChromaticBranchName(),
-  }),
   framework: {
     name: "@storybook/react-webpack5",
     options: {},