Merge branch 'main' into kasper/story-names

.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 }}

.storybook/main.ts

@@ -5,6 +5,7 @@ const config: StorybookConfig = {
  addons: [
  '@storybook/addon-essentials',
  '@storybook/addon-interactions',
+ '@storybook/addon-coverage',
  '@chromatic-com/storybook',
  ],
  framework: {

.storybook/preview.tsx

@@ -3,6 +3,7 @@ import type { Preview } from '@storybook/react'
 import { initialize, mswLoader } from 'msw-storybook-addon'
 import * as MockDate from 'mockdate'
 import { initializeDB } from '#lib/db.mock'
+import { onMockCall } from '@storybook/test'
 
 initialize({ onUnhandledRequest: 'bypass' })
 

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`.
 

components/note-editor.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react'
+import NoteEditor from "./note-editor";
+
+const meta = {
+ component: NoteEditor,
+ args: {
+ initialTitle: 'This is a title',
+ initialBody: 'This is a body',
+ noteId: '1',
+ }
+} satisfies Meta<typeof NoteEditor>
+
+export default meta;
+
+type Story = StoryObj<typeof meta>
+export const Default: Story = {}
+export const Draft: Story = {
+ args: {
+ noteId: undefined,
+ }
+}

components/note-list-skeleton.stories.tsx

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react'
+import NoteListSkeleton from "./note-list-skeleton";
+
+const meta = {
+ component: NoteListSkeleton,
+} satisfies Meta<typeof NoteListSkeleton>
+
+export default meta;
+
+type Story = StoryObj<typeof meta>
+export const Default: Story = {}

components/note-preview.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react'
+import NotePreview from "./note-preview";
+
+const meta = {
+ component: NotePreview,
+} satisfies Meta<typeof NotePreview>
+
+export default meta;
+
+type Story = StoryObj<typeof meta>
+export const Default: Story = {
+ args: {
+ children: "<h3>Some heading</h3>\n<i>italian text</i>"
+ }
+}

components/search.stories.tsx

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react'
+import Search from "./search";
+
+const meta = {
+ component: Search,
+} satisfies Meta<typeof Search>
+
+export default meta;
+
+type Story = StoryObj<typeof meta>
+export const Default: Story = {}

components/sidebar.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react'
+import Sidebar from "./sidebar";
+import { createNotes } from '#mocks/notes';
+
+const meta = {
+ component: Sidebar,
+} satisfies Meta<typeof Sidebar>
+
+export default meta;
+
+type Story = StoryObj<typeof meta>
+export const Default: Story = {
+ args: {
+ notes: createNotes(),
+ children: null
+ }
+}
+export const Empty: Story = {
+ args: {
+ notes: [],
+ children: null
+ }
+}

mocks/notes.ts

@@ -6,15 +6,15 @@ export const createNotes: () => Note[] = () => {
  const otherDate = new Date('2024-04-19T15:22:04Z')
  return [
  {
- id: 1,
+ id: '1',
  title: 'Module mocking in Storybook?',
  body: "Yup, that's a thing now! 🎉",
  createdBy: 'storybookjs',
  createdAt: date,
  updatedAt: date,
  },
  {
- id: 2,
+ id: '2',
  title: 'RSC support as well??',
  body: 'RSC is pretty cool, even cooler that Storybook supports it!',
  createdBy: 'storybookjs',

package.json

@@ -19,16 +19,18 @@
  "./*.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",
  "test-storybook": "test-storybook",
+ "test-storybook:coverage": "test-storybook --coverage && nyc report --reporter=text --reporter=lcov -t ./coverage/storybook --report-dir ./coverage/storybook",
  "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm run build-storybook --quiet && http-server storybook-static --port 6006 --silent\" \"wait-on http://127.0.0.1:6006/ && pnpm run test-storybook\"",
  "generate-dmmf": "tsx prisma/generate-dmmf.ts"
  },
@@ -52,15 +54,17 @@
  "@prisma/client": "^5.11.0",
  "@storybook/addon-actions": "0.0.0-pr-26886-sha-76a14be0",
  "@storybook/addon-essentials": "0.0.0-pr-26886-sha-76a14be0",
+ "@storybook/addon-coverage": "^1.0.3",
  "@storybook/addon-interactions": "0.0.0-pr-26886-sha-76a14be0",
  "@storybook/blocks": "0.0.0-pr-26886-sha-76a14be0",
  "@storybook/nextjs": "0.0.0-pr-26886-sha-76a14be0",
  "@storybook/react": "0.0.0-pr-26886-sha-76a14be0",
  "@storybook/test": "0.0.0-pr-26886-sha-76a14be0",
- "@storybook/test-runner": "^0.17.0",
+ "@storybook/test-runner": "^0.18.0-next.0",
  "@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",
@@ -70,6 +74,7 @@
  "mockdate": "^3.0.5",
  "msw": "^2.2.14",
  "msw-storybook-addon": "^2.0.0",
+ "nyc": "^15.1.0",
  "playwright": "^1.43.0",
  "prettier": "^3.2.5",
  "prisma": "^5.11.0",