feat: add storybook

.eslintrc.cjs

@@ -34,6 +34,7 @@ module.exports = {
           '**/*.spec.ts',
           '**/vite.config.ts',
           '**/vitest.config.ts',
+          '**/*.stories.tsx'
         ]
       }
     ],

.github/workflows/storybook.yml

@@ -0,0 +1,60 @@
+name: Storybook
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  storybook:
+    name: Storybook
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
+      - name: Use Node.js LTS
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        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
+      - name: Install Playwright's dependencies
+        run: pnpm dlx playwright install --with-deps chromium
+        working-directory: packages/core
+      - name: Build Packages
+        run: pnpm run build:packages
+      - name: Build Storybook
+        run: pnpm run build-storybook --quiet
+        working-directory: packages/core
+      - name: Test
+        run: |
+          pnpm exec concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+          "pnpm exec serve storybook-static -l 6006 -s" \
+          "pnpm exec wait-on tcp:6006 && pnpm test-storybook --coverage"
+        working-directory: packages/core
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v3
+        with:
+          name: core-storybook
+          flags: packages
+          token: ${{ secrets.CODECOV_TOKEN }}
+          directory: ./coverage
+          working-directory: ./packages/core

apps/desktop/package.json

@@ -30,7 +30,7 @@
     "electron-builder": "24.7.0",
     "v8-to-istanbul": "^9.1.3",
     "vite": "^4.5.0",
-    "vite-plugin-electron": "^0.15.2",
+    "vite-plugin-electron": "^0.15.4",
     "vite-plugin-electron-renderer": "^0.14.5"
   }
 }

apps/docs/package.json

@@ -16,7 +16,7 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@refine/core": "workspace:*",
-    "foxact": "^0.2.24",
+    "foxact": "^0.2.25",
     "jotai": "^2.5.1",
     "jotai-inject": "workspace:*",
     "next": "14.0.2",

apps/server/package.json

@@ -34,8 +34,8 @@
   },
   "devDependencies": {
     "@blocksuite/store": "0.0.0-20231101080734-aa27dc89-nightly",
-    "@types/express": "^4.17.20",
-    "@types/node": "^20.8.10",
+    "@types/express": "^4.17.21",
+    "@types/node": "^20.9.0",
     "ava": "^5.3.1",
     "c8": "^8.0.1"
   },

apps/web/package.json

@@ -13,9 +13,9 @@
   "dependencies": {
     "@blocksuite/editor": "0.0.0-20231101080734-aa27dc89-nightly",
     "@refine/core": "workspace:*",
-    "foxact": "^0.2.24",
+    "foxact": "^0.2.25",
     "jotai": "^2.5.1",
-    "jotai-effect": "^0.2.2",
+    "jotai-effect": "^0.2.3",
     "jotai-inject": "workspace:*",
     "next": "14.0.2",
     "next-themes": "^0.2.1",

package.json

@@ -2,21 +2,17 @@
   "name": "refine",
   "private": true,
   "version": "0.0.0",
-  "workspaces": [
-    "packages/*",
-    "apps/*"
-  ],
-  "packageManager": "pnpm@8.10.0",
+  "packageManager": "pnpm@8.10.2",
   "scripts": {
     "build:packages": "pnpm run --filter \"./packages/*\" build",
     "typecheck": "tsc -b tsconfig.json --diagnostics",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/node": "^20.8.10",
-    "@types/react": "^18.2.36",
-    "@types/react-dom": "^18.2.14",
+    "@types/node": "^20.9.0",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "eslint": "^8.53.0",

packages/core/.gitignore

@@ -0,0 +1 @@
+storybook-static

packages/core/.storybook/main.ts

@@ -0,0 +1,28 @@
+import { join, dirname } from 'node:path'
+import type { StorybookConfig } from '@storybook/react-vite'
+
+function getAbsolutePath (value: string) {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+
+const config: StorybookConfig = {
+  stories: ['../src/stories/**/*.mdx', '../src/stories/**/*.stories.tsx'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-coverage')
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite') as '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: './vite.config.ts'
+      }
+    }
+  },
+  docs: {
+    autodocs: 'tag'
+  }
+}
+export default config

packages/core/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+}
+
+export default preview

packages/core/package.json

@@ -24,7 +24,10 @@
     "dev": "vite build --watch",
     "test": "vitest",
     "test:ui": "vitest --ui --coverage.enabled=true",
-    "test:coverage": "vitest --coverage"
+    "test:coverage": "vitest --coverage",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test-storybook": "test-storybook"
   },
   "dependencies": {
     "@blocksuite/block-std": "0.0.0-20231101080734-aa27dc89-nightly",
@@ -33,11 +36,11 @@
     "@blocksuite/global": "0.0.0-20231101080734-aa27dc89-nightly",
     "@blocksuite/lit": "0.0.0-20231101080734-aa27dc89-nightly",
     "@blocksuite/store": "0.0.0-20231101080734-aa27dc89-nightly",
-    "@toeverything/theme": "^0.7.21",
+    "@toeverything/theme": "^0.7.24",
     "@toeverything/y-indexeddb": "0.10.0-canary.9",
-    "foxact": "^0.2.24",
+    "foxact": "^0.2.25",
     "jotai": "^2.5.1",
-    "jotai-effect": "^0.2.2",
+    "jotai-effect": "^0.2.3",
     "jotai-inject": "^0.1.0",
     "nanoid": "^4.0.2",
     "react": "18.3.0-canary-8039e6d0b-20231026",
@@ -47,17 +50,34 @@
     "yjs": "^13.6.8"
   },
   "devDependencies": {
-    "@testing-library/react": "^14.0.0",
+    "@storybook/addon-coverage": "^0.0.9",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-vite": "^7.5.3",
+    "@storybook/test-runner": "^0.14.0",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/react": "^14.1.0",
     "@testing-library/user-event": "^14.5.1",
-    "@types/uuid": "^9.0.6",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@types/uuid": "^9.0.7",
     "@vitejs/plugin-react": "^4.1.1",
     "@vitest/coverage-v8": "^0.34.6",
     "@vitest/ui": "^0.34.6",
+    "concurrently": "^8.2.2",
     "fake-indexeddb": "^5.0.1",
     "happy-dom": "^12.10.3",
+    "prop-types": "^15.8.1",
+    "serve": "^14.2.1",
+    "storybook": "^7.5.3",
     "vite": "^4.5.0",
     "vite-plugin-dts": "^3.6.3",
     "vite-plugin-istanbul": "^5.0.0",
-    "vitest": "^0.34.6"
+    "vitest": "^0.34.6",
+    "wait-on": "^7.1.0"
   }
 }

packages/core/src/stories/page-list.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryFn } from '@storybook/react'
+
+import { PageList, type PageListProps } from '../components/page-list'
+import { workspaceManager } from '../store'
+import {
+  within,
+  userEvent,
+  waitForElementToBeRemoved
+} from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
+import { Suspense, useId } from 'react'
+import { useAtomValue } from 'jotai/react'
+
+const Impl = (props: PageListProps) => {
+  const workspaceAtom = workspaceManager.getWorkspaceAtom(useId())
+  const workspace = useAtomValue(workspaceAtom)
+  return (
+    <PageList {...props} workspace={workspace}/>
+  )
+}
+
+const App = (props: PageListProps) => {
+  return (
+    <Suspense fallback={
+      <div role="progressbar">Loading...</div>
+    }>
+      <Impl {...props}/>
+    </Suspense>
+  )
+}
+
+const meta: Meta<PageListProps> = {
+  title: 'Page List',
+  component: App
+}
+
+export default meta
+
+export const Default: StoryFn<PageListProps> = (props) => (<App {...props}/>)
+
+Default.play = async ({
+  canvasElement
+}) => {
+  const canvas = within(canvasElement)
+  await waitForElementToBeRemoved(
+    canvasElement.querySelector('div[role="progressbar"]')
+  )
+  const createButton = canvas.getByTestId('create-page')
+  await userEvent.click(createButton)
+  expect(canvas.getAllByTestId('page-item').length).toBe(1)
+  await userEvent.click(createButton)
+  expect(canvas.getAllByTestId('page-item').length).toBe(2)
+}

packages/jotai-inject/package.json

@@ -30,13 +30,16 @@
   },
   "dependencies": {
     "jotai": "^2.5.1",
-    "jotai-effect": "^0.2.2"
+    "jotai-effect": "^0.2.3"
+  },
+  "peerDependencies": {
+    "react": "^18"
   },
   "peerDependencies": {
     "react": "^18"
   },
   "devDependencies": {
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^14.1.0",
     "@testing-library/user-event": "^14.5.1",
     "@vitest/coverage-v8": "^0.34.6",
     "@vitest/ui": "^0.34.6",