Integrate for Chromatic & Codecov

.github/workflows/chromatic.yaml

@@ -0,0 +1,48 @@
+name: 'Chromatic Deployment'
+
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .tool-versions
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-  
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - uses: chromaui/[email protected]
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          onlyChanged: true
+          exitOnceUploaded: true
+          autoAcceptChanges: 'master'

.github/workflows/test.yaml

@@ -0,0 +1,49 @@
+name: Test
+
+on:
+  pull_request:
+  push:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .tool-versions
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-  
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run tests and collect coverage
+        run: pnpm run vitest --coverage --changed
+
+      - name: Upload coverage to Codecov
+        uses: codecov/[email protected]
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          slug: Kartore/web

.storybook/main.ts

@@ -6,7 +6,6 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    '@storybook/addon-coverage',
     '@chromatic-com/storybook',
   ],
   build: {

.storybook/preview.ts

@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/react';
+import '../src/index.css';
 
 const preview: Preview = {
   parameters: {

.tool-versions

@@ -0,0 +1 @@
+nodejs 20.10.0

package.json

@@ -13,7 +13,8 @@
     "vitest": "TZ=UTC vitest",
     "test": "TZ=UTC pnpm run test:unit",
     "test:unit": "TZ=UTC vitest run",
-    "test:changed": "TZ=UTC vitest run --changed"
+    "test:changed": "TZ=UTC vitest run --changed",
+    "chromatic": "npx chromatic"
   },
   "dependencies": {
     "@ark-ui/react": "2.2.3",
@@ -39,6 +40,7 @@
     "@vitest/coverage-v8": "1.4.0",
     "@vitest/ui": "1.4.0",
     "autoprefixer": "10.4.19",
+    "chromatic": "11.2.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-react-hooks": "4.6.0",

src/components/common/Button/Button.tsx

@@ -4,15 +4,15 @@ import { Spinner } from '~/components/common/Spinner';
 
 const buttonVariants = tv({
   slots: {
-    base: 'bg-gray-100 px-4 py-2 text-sm text-gray-800 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-900',
+    base: 'relative rounded-lg bg-gray-300 px-4 py-2 text-sm text-gray-800 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-900',
     text: '',
-    spinner: '',
+    spinner: 'absolute inset-0 flex items-center justify-center text-[1em]',
   },
   variants: {
     isLoading: {
       true: {
         base: 'pointer-events-none opacity-90',
-        text: 'hidden',
+        text: 'opacity-0',
         spinner: '',
       },
       false: {
@@ -40,7 +40,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <button type={'button'} {...props} className={base(props)} ref={ref}>
         <p className={text()}>{children}</p>
-        <Spinner className={spinner()} />
+        <div className={spinner()}>
+          <Spinner />
+        </div>
       </button>
     );
   }

src/components/common/Button/__snapshots__/Button.test.tsx.snap

@@ -3,49 +3,61 @@
 exports[`Component: Button > Snapshot > Default 1`] = `
 <DocumentFragment>
   <button
-    class="bg-gray-100 px-4 py-2 text-sm text-gray-800 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-900"
+    class="relative rounded-lg bg-gray-300 px-4 py-2 text-sm text-gray-800 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-900"
     type="button"
   >
     <p>
       Button
     </p>
     <div
-      class="h-10 w-10 animate-spin rounded-full border-4 border-current border-r-transparent border-t-transparent animation-duration-[600ms] hidden"
-    />
+      class="absolute inset-0 items-center justify-center text-[1em] hidden"
+    >
+      <div
+        class="inline-block aspect-square h-[1em] w-[1em] animate-spin rounded-full border-[0.2em] border-current border-r-transparent border-t-transparent animation-duration-[600ms]"
+      />
+    </div>
   </button>
 </DocumentFragment>
 `;
 
 exports[`Component: Button > Snapshot > Disabled 1`] = `
 <DocumentFragment>
   <button
-    class="bg-gray-100 px-4 py-2 text-sm text-gray-800 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-900 pointer-events-none opacity-70"
+    class="relative rounded-lg bg-gray-300 px-4 py-2 text-sm text-gray-800 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-900 pointer-events-none opacity-70"
     type="button"
   >
     <p>
       Button
     </p>
     <div
-      class="h-10 w-10 animate-spin rounded-full border-4 border-current border-r-transparent border-t-transparent animation-duration-[600ms] hidden"
-    />
+      class="absolute inset-0 items-center justify-center text-[1em] hidden"
+    >
+      <div
+        class="inline-block aspect-square h-[1em] w-[1em] animate-spin rounded-full border-[0.2em] border-current border-r-transparent border-t-transparent animation-duration-[600ms]"
+      />
+    </div>
   </button>
 </DocumentFragment>
 `;
 
 exports[`Component: Button > Snapshot > Loading 1`] = `
 <DocumentFragment>
   <button
-    class="bg-gray-100 px-4 py-2 text-sm text-gray-800 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-900 pointer-events-none opacity-90"
+    class="relative rounded-lg bg-gray-300 px-4 py-2 text-sm text-gray-800 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-900 pointer-events-none opacity-90"
     type="button"
   >
     <p
-      class="hidden"
+      class="opacity-0"
     >
       Button
     </p>
     <div
-      class="inline-block h-10 w-10 animate-spin rounded-full border-4 border-current border-r-transparent border-t-transparent animation-duration-[600ms]"
-    />
+      class="absolute inset-0 flex items-center justify-center text-[1em]"
+    >
+      <div
+        class="inline-block aspect-square h-[1em] w-[1em] animate-spin rounded-full border-[0.2em] border-current border-r-transparent border-t-transparent animation-duration-[600ms]"
+      />
+    </div>
   </button>
 </DocumentFragment>
 `;

src/components/common/Spinner/Spinner.tsx

@@ -2,7 +2,7 @@ import { ComponentPropsWithoutRef, forwardRef } from 'react';
 import { tv, VariantProps } from 'tailwind-variants';
 
 const spinnerVariant = tv({
-  base: 'inline-block h-10 w-10 animate-spin rounded-full border-4 border-current border-r-transparent  border-t-transparent animation-duration-[600ms]',
+  base: 'inline-block aspect-square h-[1em] w-[1em] animate-spin rounded-full border-[0.2em] border-current border-r-transparent  border-t-transparent animation-duration-[600ms]',
   variants: {},
 });
 

src/components/common/Spinner/__snapshots__/Spinner.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Component: Spinner > Snapshot > Default 1`] = `
 <DocumentFragment>
   <div
-    class="inline-block h-10 w-10 animate-spin rounded-full border-4 border-current border-r-transparent border-t-transparent animation-duration-[600ms]"
+    class="inline-block aspect-square h-[1em] w-[1em] animate-spin rounded-full border-[0.2em] border-current border-r-transparent border-t-transparent animation-duration-[600ms]"
   />
 </DocumentFragment>
 `;