fix: CIの権限、及び処理を修正 (#173)

* fix: CIの権限、及び処理を修正

よりセキュアにし、ドキュメントをもとに適切にcachingを施した

* fix: lhciのバージョンを修正

* fix: yarn add -g というオプションは存在しないぞ糸川

.github/workflows/chromatic-test.yml

@@ -0,0 +1,33 @@
+name: Chromatic test
+
+on:
+  pull_request:
+    branches:
+      - dev
+    paths:
+      - src/components/**
+      - src/stories/**
+      - package.json
+      - yarn.lock
+
+jobs:
+  run-chromatic-test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: yarn
+      - name: Install Dependencies
+        run: yarn install --immutable
+      - name: Build Storybook
+        run: yarn run build-storybook
+  run-chromatic-test-check:
+    if: ${{ ! failure() }}
+    needs: run-chromatic-test
+    runs-on: ubuntu-latest
+    steps:
+      - run: echo "Chromatic test is successfully executed."

.github/workflows/chromatic.yml

@@ -1,28 +1,18 @@
 name: chromatic
 
 on:
-  pull_request:
-    branches:
-      - dev
-    paths:
-      - 'components/**/index.tsx'
+  workflow_run:
+    workflows:
+      - Chromatic test
+    types:
+      - completed
 
 jobs:
-  chromatic-deployment:
-    name: Deploy Storybook to chromatic
+  run-chromatic-deployment:
     runs-on: ubuntu-latest
+    if: github.event.workflow_run.conclusion == 'success'
     timeout-minutes: 7
     steps:
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-      - uses: actions/cache@v3
-        id: yarn-cache
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
       - name: Checkout
         uses: actions/checkout@v3
         with:
@@ -32,6 +22,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
+          cache: yarn
       - name: Install dependencies
         run: yarn install --immutable
       - name: Publish to Chromatic
@@ -40,4 +31,10 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
         env:
-          GOOGLE_MAP_API_KEY: ${{ secrets.GOOGLE_MAP_API_KEY }}
+          STORYBOOK_GOOGLE_MAP_API_KEY: ${{ secrets.STORYBOOK_GOOGLE_MAP_API_KEY }}
+  run-chromatic-deployment-check:
+    if: ${{ ! failure() }}
+    needs: run-chromatic-deployment
+    runs-on: ubuntu-latest
+    steps:
+      - run: echo "Publish Storybook is successfully executed."

.github/workflows/lighthouse.yml

@@ -10,33 +10,26 @@ jobs:
   run-lighthouse-ci:
     runs-on: ubuntu-latest
     steps:
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-      - uses: actions/cache@v3
-        id: yarn-cache
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
       - name: Checkout
         uses: actions/checkout@v3
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
         with:
-          ref: ${{ github.event.pull_request.head.ref }}
+          node-version: 18
+          cache: yarn
       - name: Install Dependencies
         run: yarn install --immutable
       - name: production build
         run: yarn run build
       - name: install Lighthouse cli
         run: |
-          yarn add @lhci/cli@0.8.x
+          npm install -g @lhci/cli@0.9.x
       - name: run Lighthouse cli
         id: lhci
         run: |
           mkdir dist
           touch dist/autorun.txt
-          yarn lhci autorun | grep 'storage.googleapis.com' > ./dist/autorun.txt
+          lhci autorun | grep 'storage.googleapis.com' > ./dist/autorun.txt
           report_url=$(cat ./dist/autorun.txt)
           echo $report_url
           echo "::set-output name=report_url::$report_url"

.github/workflows/linter.yml

@@ -1,7 +1,6 @@
 name: ESLint
 
 on:
-  push:
   pull_request:
     branches:
       - dev
@@ -10,26 +9,20 @@ jobs:
   run-eslint:
     runs-on: ubuntu-latest
     steps:
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-      - uses: actions/cache@v3
-        id: yarn-cache
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
       - name: Checkout
         uses: actions/checkout@v3
-        with:
-          ref: ${{ github.event.pull_request.head.ref }}
-          fetch-depth: 0
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
           node-version: 18
+          cache: yarn
       - name: Install Dependencies
         run: yarn install --immutable
       - name: eslint
-        run: yarn run lint
+        run: yarn run lint --max-warnings=0
+  run-eslint-check:
+    if: ${{ ! failure() }}
+    needs: run-eslint
+    runs-on: ubuntu-latest
+    steps:
+      - run: echo "ESLint is successfully executed."

.github/workflows/prettier.yml

@@ -1,36 +1,44 @@
 name: Prettier
 
 on:
-  push:
+  workflow_run:
+    workflows:
+      - Test
+    types:
+      - completed
 
 jobs:
   run-prettier:
     runs-on: ubuntu-latest
+    if: github.event.workflow_run.conclusion == 'success'
+    permissions:
+      contents: write
     steps:
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-      - uses: actions/cache@v3
-        id: yarn-cache
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
       - name: Checkout
         uses: actions/checkout@v3
         with:
           ref: ${{ github.event.pull_request.head.ref }}
-          fetch-depth: 0
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
           node-version: 18
+          cache: yarn
       - name: Install Dependencies
         run: yarn install --immutable
       - name: Format the code
         run: yarn run fmt
-      - name: auto commit
-        uses: stefanzweifel/git-auto-commit-action@v4
-        with:
-          commit_message: "[skip ci] auto-fixable format by github-actions"
+      - name: Auto commit
+        run: |
+          git config user.name "${GITHUB_ACTOR}"
+          git config user.email "${GITHUB_ACTOR}@users.noreply.github.com"
+          if (git diff --shortstat | grep '[0-9]'); then \
+            git add .; \
+            git commit -m "chore: コードを整形"; \
+            git push origin HEAD:${GITHUB_REF}; \
+          fi
+  run-prettier-check:
+    if: ${{ ! failure() }}
+    needs: run-prettier
+    runs-on: ubuntu-latest
+    steps:
+      - run: echo "Format is successfully executed."

.github/workflows/test.yml

@@ -6,79 +6,27 @@ on:
       - dev
 
 jobs:
-  run-type-check:
+  run-test:
     runs-on: ubuntu-latest
     steps:
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-      - uses: actions/cache@v3
-        id: yarn-cache
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
       - name: Checkout
         uses: actions/checkout@v3
-        with:
-          ref: ${{ github.event.pull_request.head.ref }}
-          fetch-depth: 0
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
           node-version: 18
+          cache: yarn
       - name: Install Dependencies
         run: yarn install --immutable
       - name: Check codes types
         run: yarn run type
-  run-build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-      - uses: actions/cache@v3
-        id: yarn-cache
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          ref: ${{ github.event.pull_request.head.ref }}
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-      - name: Install Dependencies
-        run: yarn install --immutable
       - name: Build the project
         run: yarn run build
-  run-test:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-      - uses: actions/cache@v3
-        id: yarn-cache
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          ref: ${{ github.event.pull_request.head.ref }}
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-      - name: Install Dependencies
-        run: yarn install --immutable
       - name: Test
         run: yarn run test --no-cache
+  run-test-check:
+    if: ${{ ! failure() }}
+    needs: run-test
+    runs-on: ubuntu-latest
+    steps:
+      - run: echo "Type check, Build, Test are successfully executed."

.github/workflows/token.yml

@@ -1,38 +1,39 @@
-name: 'figma-tokens style-dictionary actions'
+name: figma-tokens style-dictionary actions
+
 on:
-  pull_request:
+  workflow_run:
+    workflows:
+      - Test
+    types:
+      - completed
 
 jobs:
   generate_json:
     name: generate_scss
     runs-on: ubuntu-latest
-    # 'figma' という名前を含むブランチのみ動くように設定
-    if: contains(github.head_ref, 'figma')
+    if: contains(github.head_ref, 'figma') && github.event.workflow_run.conclusion == 'success'
+    permissions:
+      contents: write
     steps:
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-      - uses: actions/cache@v3
-        id: yarn-cache
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
       - name: Checkout
         uses: actions/checkout@v3
         with:
-          ref: ${{ github.event.pull_request.head.ref }}
-          fetch-depth: 0
+          ref: ${{ github.event.workflow_run.head_sha }}
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
           node-version: 18
+          cache: yarn
       - name: Install Dependencies
         run: yarn install --immutable
       - name: run style-dictionary
         run: yarn run gen:style
-      - name: add and commit
-        uses: stefanzweifel/git-auto-commit-action@v4
-        with:
-          commit_message: "[skip ci] generate json by style-dictionary"
+      - name: Auto commit
+        run: |
+          git config user.name "${GITHUB_ACTOR}"
+          git config user.email "${GITHUB_ACTOR}@users.noreply.github.com"
+          if (git diff --shortstat | grep '[0-9]'); then \
+            git add .; \
+            git commit -m "feat: design tokenから_variable.jsonの生成"; \
+            git push origin HEAD:${GITHUB_REF}; \
+          fi

src/components/molecules/map/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import tw from "twin.macro";
 import type { MapProperties } from "../../../models";
 
-const GOOGLE_MAP_API_KEY = process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY || "";
+const GOOGLE_MAP_API_KEY = process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY || process.env.STORYBOOK_GOOGLE_MAP_API_KEY || "";
 
 const MapContainer = tw.figure`w-full lg:w-6/12`;