Merge pull request #644 from pixiv/v4.0.0

V4.0.0

.github/workflows/bundle-size.yml

@@ -2,8 +2,6 @@ name: Bundle Size
 
 on:
   pull_request:
-    branches:
-      - main
 
 jobs:
   build:
@@ -22,5 +20,5 @@ jobs:
 
           # sourcemap は見ない
           # d.ts はたまに異常な数の union 型が展開されるとかは検知したいが見なくて良いかもしれない
-          pattern: './packages/**/dist/**/*.{ts,js,cjs}'
+          pattern: './packages/*/dist/**/*.{ts,js,cjs}'
           exclude: '{**/node_modules/**}'

.github/workflows/docs-hosting-pr.yml

@@ -2,9 +2,6 @@ name: Deploy to Preview Channel
 
 on:
   pull_request:
-    branches:
-      - main
-      - v3.0.0
 
 env:
   WORKLOAD_IDENTITY_PROVIDER: 'projects/643536859873/locations/global/workloadIdentityPools/charcoal/providers/github-actions'

.github/workflows/icons.yml

@@ -8,13 +8,17 @@ on:
 
 env:
   OUTPUT_ROOT_DIR: packages/icon-files/
+  TARGET_BRANCH: ${{ github.event_name == 'workflow_dispatch' && github.ref_name || 'main' }}
 
 jobs:
   icons:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ env.TARGET_BRANCH }}
+
       - uses: actions/setup-node@v3
         with:
           node-version-file: '.node-version'
@@ -49,5 +53,5 @@ jobs:
           GITHUB_ACCESS_TOKEN: ${{ steps.generate_token.outputs.token }}
           GITHUB_REPO_OWNER: pixiv
           GITHUB_REPO_NAME: charcoal
-          GITHUB_DEFAULT_BRANCH: main
+          GITHUB_DEFAULT_BRANCH: ${{ env.TARGET_BRANCH }}
         run: yarn icons-cli github:pr

.github/workflows/publish.yml

@@ -14,6 +14,7 @@ on:
         options:
           - latest
           - beta
+          - rc
 
 jobs:
   build:

.github/workflows/test-storybook.yml

@@ -1,20 +1,22 @@
 name: test-storybook
 on:
   pull_request:
-    types: [labeled, unlabeled, opened, edited, synchronize]
-    branches:
-      - main
+    types: [labeled, unlabeled, opened, synchronize, reopened]
+
+concurrency:
+  group: ${{ github.ref }}
+  cancel-in-progress: true
 
 jobs:
-  prepare-main-branch:
-    name: Prepare main branch image snapshots
+  prepare-base-branch:
+    name: Prepare base branch image snapshots
     timeout-minutes: 20
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout main branch
+      - name: Checkout base branch
         uses: actions/checkout@v4
         with:
-          ref: main
+          ref: ${{ github.event.pull_request.base.ref }}
           fetch-depth: 0
       - name: Check commit hash
         id: commit-hash
@@ -25,7 +27,7 @@ jobs:
         with:
           path: __image_snapshots__
           key: image-snapshots-${{ steps.commit-hash.outputs.hash }}
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         if: steps.cache-image-snapshots.outputs.cache-hit != 'true'
         with:
           node-version-file: '.node-version'
@@ -40,7 +42,7 @@ jobs:
           path: |
             /home/runner/.cache/ms-playwright/
           key: ${{ runner.os }}-playwright-runner
-      - name: Install Playwgith
+      - name: Install Playwright
         if: steps.cache-image-snapshots.outputs.cache-hit != 'true'
         run: yarn playwright install --with-deps
       - name: Build Storybook
@@ -50,32 +52,22 @@ jobs:
           yarn storybook:build --quiet
       - name: Serve Storybook and run tests
         if: steps.cache-image-snapshots.outputs.cache-hit != 'true'
-        run: |
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server storybook-static --port 6006 --silent" \
-            "npx wait-on tcp:127.0.0.1:6006 && yarn test-storybook --updateSnapshot"
-      - name: Upload main branch snapshots
+        run: yarn test:image-snapshot --updateSnapshot
+      - name: Upload base branch snapshots
         uses: actions/upload-artifact@v4
         with:
-          name: main__image-snapshots__
+          name: base__image-snapshots__
           path: __image_snapshots__/
 
   test-storybook:
     name: Build Storybook
     timeout-minutes: 20
     runs-on: ubuntu-latest
-    needs: prepare-main-branch
+    needs: prepare-base-branch
     steps:
-      - name: Checkout main branch
-        uses: actions/checkout@v3
-        with:
-          ref: main
-          fetch-depth: 0
-      - name: Check commit hash
-        id: commit-hash
-        run: echo "hash=$(git rev-parse HEAD)" >> $GITHUB_OUTPUT
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - name: Checkout branch
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.node-version'
           cache: yarn
@@ -87,7 +79,7 @@ jobs:
           path: |
             /home/runner/.cache/ms-playwright/
           key: ${{ runner.os }}-playwright-runner
-      - name: Install Playwgith
+      - name: Install Playwright
         run: yarn playwright install --with-deps
       - name: Build Storybook
         run: |
@@ -117,11 +109,11 @@ jobs:
 
             console.log(`Not fount "${process.env.SNAPSHOT_UPDATE_LABEL}" label. Compare with image snapshots of main branch.`)
             return 'false'
-      - name: Load main branch image snapshots
+      - name: Load base branch image snapshots
         uses: actions/download-artifact@v4
         if: steps.label-checking.outputs.result != 'true'
         with:
-          name: main__image-snapshots__
+          name: base__image-snapshots__
           path: __image_snapshots__/
       - name: Serve Storybook and run tests
         if: steps.label-checking.outputs.result != 'true'

.github/workflows/test.yml

@@ -5,8 +5,6 @@ on:
       - main
 
   pull_request:
-    branches:
-      - main
 
 jobs:
   build:
@@ -32,7 +30,8 @@ jobs:
 
       - run: yarn install --immutable --inline-builds
       - run: yarn build
-      - run: yarn test
+      - name: Test
+        run: yarn test
         env:
           CI: 'true'
 
@@ -46,11 +45,8 @@ jobs:
           cache: yarn
 
       - run: yarn install --immutable --inline-builds
-      - run: |
-          yarn lint:eslint
-          yarn lint:prettier
-          # v4.0.0 になったら有効化する
-          # yarn lint:styleilnt
+      - run: yarn build
+      - run: yarn lint
 
   typecheck:
     runs-on: ubuntu-latest
@@ -76,3 +72,33 @@ jobs:
 
       - run: yarn install --immutable --inline-builds
       - run: yarn typecheck:config
+
+  a11y:
+    if: false
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.node-version'
+          cache: yarn
+
+      - run: yarn install --immutable --inline-builds
+
+      - name: Cache Playwright runners
+        uses: actions/cache@v4
+        with:
+          path: |
+            /home/runner/.cache/ms-playwright/
+          key: ${{ runner.os }}-playwright-runner
+      - name: Install Playwright
+        run: yarn playwright install --with-deps
+
+      - name: Build Storybook
+        run: |
+          yarn build
+          yarn storybook:build --quiet
+
+      - name: a11y test by Run TestRunner
+        run: |
+          yarn test:a11y

.github/workflows/tokens.yml

@@ -53,10 +53,11 @@ jobs:
 
       - name: Copy to theme package
         run: |
-          rm -rf ../theme/src/json
-          rm -rf ../theme/src/css
-          cp -r ./tokens ../theme/src/json
-          cp -r ./build/css ../theme/src/css
+          rm -rf ../theme/src/json/*.json
+          rm -rf ../theme/src/css/*.css
+          cp -r ./tokens/*.json ../theme/src/json/
+          cp -r ./build/css/*.css ../theme/src/css/
+          find ../theme/src
 
       - name: Run prettier
         working-directory: ./

.prettierignore

@@ -15,4 +15,5 @@ LICENSE
 /packages/token-cli/build/
 /packages/token-cli/tokens/
 /packages/token-cli/out/
-/packages/theme/src/css/
+/packages/theme/src/unstable-css/
+.storybook/src/v4.0.0.mdx

.storybook/babel.config.js

@@ -0,0 +1 @@
+module.exports = require('../babel.config.js')

.storybook/main.js

@@ -27,6 +27,7 @@ module.exports = {
         rules: [
           {
             test: /\.css$/,
+            sideEffects: true,
             use: [
               'style-loader',
               {
@@ -62,17 +63,13 @@ module.exports = {
     if (configType === 'PRODUCTION') {
       return config
     }
-    // 事前ビルドが不要になるようにマッピング
-    config.resolve.alias = { ...config.resolve.alias, ...(await alias()) }
     return config
   },
 
   async viteFinal(config, { configType }) {
     if (configType === 'PRODUCTION') {
       return config
     }
-    // 事前ビルドが不要になるようにマッピング
-    config.resolve.alias = { ...config.resolve.alias, ...(await alias()) }
     // proxyが噛んでいる場合にクライアント側のwssポート番号を変更する
     if (typeof process.env.CLIENT_PORT !== 'undefined') {
       config.server.hmr.port = process.env.CLIENT_PORT
@@ -134,17 +131,6 @@ module.exports = {
   `,
 }
 
-const packagesDir = path.resolve(__dirname, '../packages')
-const alias = async () =>
-  Object.fromEntries(
-    (await glob(path.resolve(packagesDir, '*'))).map((absolute) => {
-      const relative = path.relative(packagesDir, absolute)
-      const from = path.join('@charcoal-ui', relative)
-      const to = path.resolve(absolute, 'src')
-      return [from, to]
-    })
-  )
-
 function getAbsolutePath(value) {
   return dirname(require.resolve(join(value, 'package.json')))
 }