Merge pull request #6 from storybookjs/yann/add-chromatic-ci

Add Chromatic to CI

.github/workflows/chromatic.yml

@@ -0,0 +1,34 @@
+name: 'Chromatic'
+
+on: push
+
+jobs:
+ chromatic:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout code
+ uses: actions/checkout@v4
+ with:
+ fetch-depth: 0
+
+ - name: Install dependencies
+ uses: pnpm/action-setup@v3
+ with:
+ version: 8
+
+ - name: Install dependencies
+ run: pnpm install
+
+ - name: Prepare environment
+ run: |
+ pnpm run prisma:setup
+ env:
+ DATABASE_URL: ${{ secrets.DATABASE_URL }}
+ SESSION_KEY: ${{ secrets.SESSION_KEY }}
+ OAUTH_CLIENT_KEY: ${{ secrets.OAUTH_CLIENT_KEY }}
+ OAUTH_CLIENT_SECRET: ${{ secrets.OAUTH_CLIENT_SECRET }}
+
+ - name: Run Chromatic
+ uses: chromaui/action@latest
+ with:
+ projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

README.md

@@ -40,14 +40,16 @@ This application uses Prisma with SQLite. You need to set it up before running:
 ### Running the app locally
 
 1. `pnpm install`
-2. `pnpm dev`
+2. `pnpm prisma:setup` (if you haven't already)
+3. `pnpm dev`
 
 Go to `localhost:3000`.
 
 ### Running Storybook locally
 
 1. `pnpm install`
-2. `pnpm storybook`
+2. `pnpm prisma:setup` (if you haven't already)
+3. `pnpm storybook`
 
 Go to `localhost:6006`.
 

chromatic.config.json

@@ -0,0 +1,4 @@
+{
+ "projectId": "Project:66228a3205a9e64e345243d6",
+ "zip": true
+}

components/sidebar.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react'
-import { notes } from '#prisma/mock-data';
 import Sidebar from "./sidebar";
+import { createNotes } from '#mocks/notes';
 
 const meta = {
  component: Sidebar,
@@ -11,7 +11,7 @@ export default meta;
 type Story = StoryObj<typeof meta>
 export const Default: Story = {
  args: {
- notes: notes,
+ notes: createNotes(),
  children: null
  }
 }

package.json

@@ -19,12 +19,13 @@
  "./*.tsx"
  ]
  },
+ "type": "module",
  "scripts": {
  "build": "next build",
  "dev": "next dev",
  "lint": "next lint",
  "start": "next start",
- "prisma:setup": "dotenv -e .env.local prisma migrate dev",
+ "prisma:setup": "dotenv -e .env.local prisma migrate dev && pnpm run generate-dmmf",
  "prisma:seed": "dotenv -e .env.local prisma db seed",
  "storybook": "storybook dev -p 6006",
  "build-storybook": "storybook build",
@@ -61,6 +62,7 @@
  "@types/node": "^20",
  "@types/react": "^18",
  "@types/react-dom": "^18",
+ "chromatic": "^11.3.0",
  "concurrently": "^8.2.2",
  "dotenv-cli": "^7.4.1",
  "eslint": "^8",