From c9188561f4e437740ef1688f44c5cb231f16c747 Mon Sep 17 00:00:00 2001 From: SangYeob Yu Date: Wed, 28 Feb 2024 16:36:11 +0900 Subject: [PATCH 1/7] ci: update chromatic workflow --- .github/workflows/chromatic.yml | 37 ++++++--------------------------- 1 file changed, 6 insertions(+), 31 deletions(-) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index d5d04fd7..8b92e981 100644 --- a/.github/workflows/chromatic.yml +++ b/.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,7 +15,6 @@ on: - "packages/design-system/**" - "packages/design-system-icons/**" -# List of jobs jobs: chromatic-deployment: # Operating System @@ -28,39 +22,25 @@ jobs: # 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 @@ -68,21 +48,16 @@ jobs: 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 with: - message: "Design System Storybook: https://${{ env.CHROMATIC_BRANCH_NAME }}--${{ env.CHROMATIC_APP_ID }}.chromatic.com" + message: "Design System Storybook: ${{ steps.chromatic.outputs.storybookUrl }}" identifier: "PREVIEW_LINK_COMMENT" github_token: ${{ secrets.GITHUB_TOKEN }} From dab1c25d22d7f3e4d1834197d7f8f802b1152e90 Mon Sep 17 00:00:00 2001 From: SangYeob Yu Date: Wed, 28 Feb 2024 16:43:47 +0900 Subject: [PATCH 2/7] chore: remove unused branch feature --- .../.storybook/Welcome/Welcome.tsx | 14 ------- packages/design-system/.storybook/branch.js | 39 ------------------- packages/design-system/.storybook/main.js | 10 +---- 3 files changed, 1 insertion(+), 62 deletions(-) delete mode 100644 packages/design-system/.storybook/branch.js diff --git a/packages/design-system/.storybook/Welcome/Welcome.tsx b/packages/design-system/.storybook/Welcome/Welcome.tsx index f96b437e..012c9b61 100644 --- a/packages/design-system/.storybook/Welcome/Welcome.tsx +++ b/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 (

Lunit Design System

- {branchHostname != null && branchHostname !== window.location.hostname && ( - - Checkout the latest version for the current branch{" "} - here. - - )}
); }; diff --git a/packages/design-system/.storybook/branch.js b/packages/design-system/.storybook/branch.js deleted file mode 100644 index c5e38bbf..00000000 --- a/packages/design-system/.storybook/branch.js +++ /dev/null @@ -1,39 +0,0 @@ -const path = require("path"); -const fs = require("fs"); - -const PATH_SEP = path.sep; -const REF_BRANCH = /^ref: refs\/heads\/(.*)\n/; - -function getRepoDirname(startPath = module.parent.filename) { - if (!startPath.length) { - throw new Error("No git repository found"); - } - - const gitDirname = path.resolve(startPath, ".git"); - - if (!fs.existsSync(gitDirname)) { - const paths = startPath.split(PATH_SEP); - paths.pop(); - return getRepoDirname(paths.join(PATH_SEP)); - } - - return gitDirname; -} - -function getBranchName() { - const repoDirname = getRepoDirname(); - - const head = fs.readFileSync(path.resolve(repoDirname, "HEAD"), "utf8"); - const branchName = head.match(REF_BRANCH)?.[1]; - - return branchName ?? head.trim(); -} - -function getChromaticBranchName() { - return getBranchName()?.toLowerCase().replace("/g", "-"); -} - -module.exports = { - getBranchName, - getChromaticBranchName, -}; diff --git a/packages/design-system/.storybook/main.js b/packages/design-system/.storybook/main.js index ae10a6c8..afd3792d 100644 --- a/packages/design-system/.storybook/main.js +++ b/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", @@ -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: {}, From 67cd810ab07685cc9f38dbc0acf510035da978b6 Mon Sep 17 00:00:00 2001 From: SangYeob Yu Date: Wed, 28 Feb 2024 16:45:12 +0900 Subject: [PATCH 3/7] ci(icons): update chromatic workflow --- .github/workflows/chromatic.yml | 1 - .github/workflows/icons-chromatic.yml | 11 +++++------ 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 8b92e981..8d866297 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -60,4 +60,3 @@ jobs: with: message: "Design System Storybook: ${{ steps.chromatic.outputs.storybookUrl }}" identifier: "PREVIEW_LINK_COMMENT" - github_token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/icons-chromatic.yml b/.github/workflows/icons-chromatic.yml index f2236ae8..7f744173 100644 --- a/.github/workflows/icons-chromatic.yml +++ b/.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. @@ -66,4 +66,3 @@ jobs: with: message: "Icons Storybook: ${{ steps.chromatic.outputs.storybookUrl }}" identifier: "ICONS_PREVIEW_LINK_COMMENT" - github_token: ${{ secrets.GITHUB_TOKEN }} From e6a883c1559ccad65c184ba7e4e14be5bdba853a Mon Sep 17 00:00:00 2001 From: SangYeob Yu Date: Wed, 28 Feb 2024 16:45:49 +0900 Subject: [PATCH 4/7] ci(logo): update chromatic workflow --- .github/workflows/logo-chromatic.yml | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/.github/workflows/logo-chromatic.yml b/.github/workflows/logo-chromatic.yml index 23bed2aa..3369665f 100644 --- a/.github/workflows/logo-chromatic.yml +++ b/.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. @@ -66,4 +66,3 @@ jobs: with: message: "Logo Storybook: ${{ steps.chromatic.outputs.storybookUrl }}" identifier: "LOGO_PREVIEW_LINK_COMMENT" - github_token: ${{ secrets.GITHUB_TOKEN }} From 6a933a39e5ba540217f041b65cf658e46e868cb3 Mon Sep 17 00:00:00 2001 From: SangYeob Yu Date: Wed, 28 Feb 2024 16:49:19 +0900 Subject: [PATCH 5/7] ci: add github token again --- .github/workflows/chromatic.yml | 2 ++ .github/workflows/icons-chromatic.yml | 2 ++ .github/workflows/logo-chromatic.yml | 2 ++ 3 files changed, 6 insertions(+) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 8d866297..ef90fcc6 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -60,3 +60,5 @@ jobs: with: message: "Design System Storybook: ${{ steps.chromatic.outputs.storybookUrl }}" identifier: "PREVIEW_LINK_COMMENT" + env: + GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} diff --git a/.github/workflows/icons-chromatic.yml b/.github/workflows/icons-chromatic.yml index 7f744173..fb8e5a51 100644 --- a/.github/workflows/icons-chromatic.yml +++ b/.github/workflows/icons-chromatic.yml @@ -66,3 +66,5 @@ jobs: with: message: "Icons Storybook: ${{ steps.chromatic.outputs.storybookUrl }}" identifier: "ICONS_PREVIEW_LINK_COMMENT" + env: + GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} diff --git a/.github/workflows/logo-chromatic.yml b/.github/workflows/logo-chromatic.yml index 3369665f..0b21d3fa 100644 --- a/.github/workflows/logo-chromatic.yml +++ b/.github/workflows/logo-chromatic.yml @@ -66,3 +66,5 @@ jobs: with: message: "Logo Storybook: ${{ steps.chromatic.outputs.storybookUrl }}" identifier: "LOGO_PREVIEW_LINK_COMMENT" + env: + GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} From 85ca0f8f78d050703505aa0894a592b58dc1736e Mon Sep 17 00:00:00 2001 From: SangYeob Yu Date: Wed, 28 Feb 2024 17:00:53 +0900 Subject: [PATCH 6/7] docs: ref latest storybook of icons and logo --- packages/design-system/.storybook/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/design-system/.storybook/main.js b/packages/design-system/.storybook/main.js index afd3792d..e942f89b 100644 --- a/packages/design-system/.storybook/main.js +++ b/packages/design-system/.storybook/main.js @@ -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, }, }, From f887653e429324b44047cb26dc37a85dea76d910 Mon Sep 17 00:00:00 2001 From: SangYeob Yu Date: Wed, 28 Feb 2024 17:05:29 +0900 Subject: [PATCH 7/7] ci: update comment action --- .github/workflows/chromatic.yml | 6 ++---- .github/workflows/icons-chromatic.yml | 6 ++---- .github/workflows/logo-chromatic.yml | 6 ++---- 3 files changed, 6 insertions(+), 12 deletions(-) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index ef90fcc6..c111f1ab 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -56,9 +56,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: "Design System Storybook: ${{ steps.chromatic.outputs.storybookUrl }}" - identifier: "PREVIEW_LINK_COMMENT" - env: - GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} + comment_tag: "PREVIEW_LINK_COMMENT" diff --git a/.github/workflows/icons-chromatic.yml b/.github/workflows/icons-chromatic.yml index fb8e5a51..9f545f21 100644 --- a/.github/workflows/icons-chromatic.yml +++ b/.github/workflows/icons-chromatic.yml @@ -62,9 +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" - env: - GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} + comment_tag: "ICONS_PREVIEW_LINK_COMMENT" diff --git a/.github/workflows/logo-chromatic.yml b/.github/workflows/logo-chromatic.yml index 0b21d3fa..01fdb5a2 100644 --- a/.github/workflows/logo-chromatic.yml +++ b/.github/workflows/logo-chromatic.yml @@ -62,9 +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" - env: - GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} + comment_tag: "LOGO_PREVIEW_LINK_COMMENT"