add chromatic.yml

.github/workflows/chromatic.yml

@@ -0,0 +1,23 @@
+name: "Chromatic"
+
+on: push
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          onlyChanged: true

.github/workflows/lint.yml

@@ -31,6 +31,3 @@ jobs:
         run: npx playwright install --with-deps
       - name: Test
         run: npm run test
-
-      - name: Chromatic
-        run: npm run chromatic

.storybook/preview-head.html

@@ -1,11 +1,17 @@
-<link type="text/css" rel="stylesheet" href="" id="reset-css"/>
+<link type="text/css" rel="stylesheet" href="" id="reset-css" />
 
 <script>
   document.documentElement.setAttribute('lang', 'ja');
 </script>
 
 <style>
-    html {
-        font-family: Helvetica Neue, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif;
-    }
-</style>
+  html {
+    font-family:
+      Helvetica Neue,
+      Arial,
+      Hiragino Kaku Gothic ProN,
+      Hiragino Sans,
+      Meiryo,
+      sans-serif;
+  }
+</style>

.storybook/public/styles/modern-css-reset.css

@@ -4,7 +4,7 @@
 *,
 *::before,
 *::after {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 /* Remove default margin */
@@ -18,59 +18,59 @@ figure,
 blockquote,
 dl,
 dd {
-    margin: 0;
+  margin: 0;
 }
 
 /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
-ul[role="list"],
-ol[role="list"] {
-    list-style: none;
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
 }
 
 /* Set core root defaults */
 html:focus-within {
-    scroll-behavior: smooth;
+  scroll-behavior: smooth;
 }
 
 /* Set core body defaults */
 body {
-    min-height: 100vh;
-    text-rendering: optimizespeed;
-    line-height: 1.5;
+  min-height: 100vh;
+  text-rendering: optimizespeed;
+  line-height: 1.5;
 }
 
 /* A elements that don't have a class get default styles */
 a:not([class]) {
-    text-decoration-skip-ink: auto;
+  text-decoration-skip-ink: auto;
 }
 
 /* Make images easier to work with */
 img,
 picture {
-    display: block;
-    max-width: 100%;
+  display: block;
+  max-width: 100%;
 }
 
 /* Inherit fonts for inputs and buttons */
 input,
 button,
 textarea,
 select {
-    font: inherit;
+  font: inherit;
 }
 
 /* Remove all animations and transitions for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
-    html:focus-within {
-        scroll-behavior: auto;
-    }
+  html:focus-within {
+    scroll-behavior: auto;
+  }
 
-    *,
-    *::before,
-    *::after {
-        transition-duration: 0.01ms !important;
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        scroll-behavior: auto !important;
-    }
-}
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+  }
+}

package.json

@@ -48,8 +48,7 @@
     "prestorybook": "npm run build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "prepublishOnly": "npm run build",
-    "chromatic": "npx chromatic --project-token=chpt_37d0a81ccfe372f"
+    "prepublishOnly": "npm run build"
   },
   "repository": {
     "type": "git",