feat(storybook): preview app (#3765)

apps/core/package.json

@@ -8,6 +8,11 @@
     "dev": "yarn -T run dev-core",
     "static-server": "ts-node-esm ./server.mts"
   },
+  "exports": {
+    "./app": "./src/app.tsx",
+    "./router": "./src/router.ts",
+    "./bootstrap/setup": "./src/bootstrap/setup.ts"
+  },
   "dependencies": {
     "@affine-test/fixtures": "workspace:*",
     "@affine/component": "workspace:*",

apps/core/src/bootstrap/setup.ts

@@ -169,7 +169,14 @@ function createFirstAppData() {
   rootStore.set(rootWorkspacesMetadataAtom, result);
 }
 
+let isSetup = false;
+
 export async function setup() {
+  if (isSetup) {
+    console.warn('already setup');
+    return;
+  }
+  isSetup = true;
   rootStore.set(
     workspaceAdaptersAtom,
     WorkspaceAdapters as Record<

apps/core/src/components/blocksuite/block-suite-mode-switch/switch-items.tsx

@@ -3,6 +3,8 @@ import type { HTMLAttributes } from 'react';
 import type React from 'react';
 import { cloneElement, useState } from 'react';
 
+import edgelessHover from './animation-data/edgeless-hover.json';
+import pageHover from './animation-data/page-hover.json';
 import { StyledSwitchItem } from './style';
 
 type HoverAnimateControllerProps = {
@@ -52,7 +54,7 @@ export const PageSwitchItem = (
         options={{
           loop: false,
           autoplay: false,
-          animationData: require('./animation-data/page-hover.json'),
+          animationData: pageHover,
           rendererSettings: {
             preserveAspectRatio: 'xMidYMid slice',
           },
@@ -71,7 +73,7 @@ export const EdgelessSwitchItem = (
         options={{
           loop: false,
           autoplay: false,
-          animationData: require('./animation-data/edgeless-hover.json'),
+          animationData: edgelessHover,
           rendererSettings: {
             preserveAspectRatio: 'xMidYMid slice',
           },

apps/core/src/router.ts

@@ -1,41 +1,41 @@
+import type { RouteObject } from 'react-router-dom';
 import { createBrowserRouter } from 'react-router-dom';
 
-export const router = createBrowserRouter(
-  [
-    {
-      path: '/',
-      lazy: () => import('./pages/index'),
-    },
-    {
-      path: '/workspace/:workspaceId',
-      lazy: () => import('./pages/workspace/index'),
-      children: [
-        {
-          path: 'all',
-          lazy: () => import('./pages/workspace/all-page'),
-        },
-        {
-          path: 'trash',
-          lazy: () => import('./pages/workspace/trash-page'),
-        },
-        {
-          path: ':pageId',
-          lazy: () => import('./pages/workspace/detail-page'),
-        },
-      ],
-    },
-    {
-      path: '/404',
-      lazy: () => import('./pages/404'),
-    },
-    {
-      path: '*',
-      lazy: () => import('./pages/404'),
-    },
-  ],
+export const routes = [
   {
-    future: {
-      v7_normalizeFormMethod: true,
-    },
-  }
-);
+    path: '/',
+    lazy: () => import('./pages/index'),
+  },
+  {
+    path: '/workspace/:workspaceId',
+    lazy: () => import('./pages/workspace/index'),
+    children: [
+      {
+        path: 'all',
+        lazy: () => import('./pages/workspace/all-page'),
+      },
+      {
+        path: 'trash',
+        lazy: () => import('./pages/workspace/trash-page'),
+      },
+      {
+        path: ':pageId',
+        lazy: () => import('./pages/workspace/detail-page'),
+      },
+    ],
+  },
+  {
+    path: '/404',
+    lazy: () => import('./pages/404'),
+  },
+  {
+    path: '*',
+    lazy: () => import('./pages/404'),
+  },
+] satisfies [RouteObject, ...RouteObject[]];
+
+export const router = createBrowserRouter(routes, {
+  future: {
+    v7_normalizeFormMethod: true,
+  },
+});

apps/core/tsconfig.json

@@ -5,7 +5,7 @@
     "typeRoots": ["../../node_modules", "../../node_modules/@types"],
     "types": ["webpack-env", "ses", "affine__env"]
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.json"],
   "exclude": ["node_modules"],
   "references": [
     {

apps/storybook/.storybook/main.ts

@@ -28,6 +28,7 @@ export default {
     '@storybook/addon-interactions',
     '@storybook/addon-storysource',
     'storybook-dark-mode',
+    'storybook-addon-react-router-v6',
   ],
   framework: {
     name: '@storybook/react-vite',

apps/storybook/.storybook/preview.tsx

@@ -1,13 +1,16 @@
 import '@affine/component/theme/global.css';
 import '@affine/component/theme/theme.css';
-import { LOCALES, createI18n } from '@affine/i18n';
+import '@toeverything/components/style.css';
+import { createI18n } from '@affine/i18n';
 import { ThemeProvider, useTheme } from 'next-themes';
-import { setupGlobal } from '@affine/env/global';
 import type { ComponentType } from 'react';
 import { useEffect } from 'react';
 import { useDarkMode } from 'storybook-dark-mode';
+import { setup } from '@affine/core/bootstrap/setup';
+import { AffineContext } from '@affine/component/context';
+import { use } from 'foxact/use';
 
-setupGlobal();
+const setupPromise = setup();
 
 export const parameters = {
   backgrounds: { disable: true },
@@ -20,22 +23,6 @@ export const parameters = {
   },
 };
 
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    defaultValue: 'en',
-    toolbar: {
-      icon: 'globe',
-      items: LOCALES.map(locale => ({
-        title: locale.originalName,
-        value: locale.tag,
-        right: locale.flagEmoji,
-      })),
-    },
-  },
-};
-
 const createI18nDecorator = () => {
   const i18n = createI18n();
   const withI18n = (Story: any, context: any) => {
@@ -59,10 +46,13 @@ const Component = () => {
 
 export const decorators = [
   (Story: ComponentType) => {
+    use(setupPromise);
     return (
       <ThemeProvider>
-        <Component />
-        <Story />
+        <AffineContext>
+          <Component />
+          <Story />
+        </AffineContext>
       </ThemeProvider>
     );
   },

apps/storybook/package.json

@@ -4,8 +4,7 @@
   "scripts": {
     "dev": "storybook dev -p 6006",
     "build": "storybook build",
-    "test": "test-storybook",
-    "chromatic": "npx chromatic --build-script-name build"
+    "test": "test-storybook"
   },
   "dependencies": {
     "@affine/component": "workspace:*",
@@ -40,7 +39,8 @@
     "@blocksuite/store": "0.0.0-20230814155455-ceb5d5d8-nightly",
     "chromatic": "^6.22.0",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "storybook-addon-react-router-v6": "^2.0.4"
   },
   "peerDependencies": {
     "@blocksuite/blocks": "*",

apps/storybook/src/stories/core.stories.tsx

@@ -0,0 +1,55 @@
+import { routes } from '@affine/core/router';
+import { expect } from '@storybook/jest';
+import type { StoryContext, StoryFn } from '@storybook/react';
+import { userEvent } from '@storybook/testing-library';
+import { Outlet, useLocation } from 'react-router-dom';
+import {
+  reactRouterOutlets,
+  reactRouterParameters,
+  withRouter,
+} from 'storybook-addon-react-router-v6';
+
+const withCleanLocalStorage = (Story: StoryFn, context: StoryContext) => {
+  localStorage.clear();
+  return <Story {...context.args} />;
+};
+
+const FakeApp = () => {
+  const location = useLocation();
+  // fixme: `key` is a hack to force the storybook to re-render the outlet
+  return <Outlet key={location.pathname} />;
+};
+
+export default {
+  title: 'Preview/Core',
+};
+
+export const Index: StoryFn = () => {
+  return <FakeApp />;
+};
+
+Index.decorators = [withRouter, withCleanLocalStorage];
+Index.parameters = {
+  reactRouter: reactRouterParameters({
+    routing: reactRouterOutlets(routes),
+  }),
+};
+
+export const SettingPage: StoryFn = () => {
+  return <FakeApp />;
+};
+
+SettingPage.play = async ({ canvasElement }) => {
+  await new Promise(resolve => setTimeout(resolve, 1000));
+  const settingModalBtn = canvasElement.querySelector(
+    '[data-testid="settings-modal-trigger"]'
+  ) as Element;
+  expect(settingModalBtn).not.toBeNull();
+  await userEvent.click(settingModalBtn);
+};
+SettingPage.decorators = [withRouter, withCleanLocalStorage];
+SettingPage.parameters = {
+  reactRouter: reactRouterParameters({
+    routing: reactRouterOutlets(routes),
+  }),
+};

apps/storybook/src/stories/page-list.stories.tsx

@@ -34,7 +34,7 @@ AffineOperationCell.play = async ({ canvasElement }) => {
       '[data-testid="page-list-operation-button"]'
     ) as HTMLButtonElement;
     expect(button).not.toBeNull();
-    userEvent.click(button);
+    await userEvent.click(button);
   }
 };
 
@@ -51,7 +51,7 @@ AffineNewPageButton.play = async ({ canvasElement }) => {
   expect(button).not.toBeNull();
   const dropdown = button.querySelector('svg') as SVGSVGElement;
   expect(dropdown).not.toBeNull();
-  userEvent.click(dropdown);
+  await userEvent.click(dropdown);
 };
 
 export const AffineAllPageList: StoryFn<typeof PageList> = ({ ...props }) => (
@@ -69,11 +69,11 @@ AffineAllPageList.args = {
       favorite: false,
       icon: <PageIcon />,
       isPublicPage: true,
-      title: 'Today Page',
+      title: 'Last Page',
       tags: [],
       preview: 'this is page preview',
-      createDate: new Date(),
-      updatedDate: new Date(),
+      createDate: new Date('2021-01-01'),
+      updatedDate: new Date('2023-08-15'),
       bookmarkPage: () => toast('Bookmark page'),
       onClickPage: () => toast('Click page'),
       onDisablePublicSharing: () => toast('Disable public sharing'),

apps/storybook/tsconfig.json

@@ -9,6 +9,9 @@
     "outDir": "lib"
   },
   "references": [
+    {
+      "path": "../../apps/core"
+    },
     {
       "path": "../../packages/component"
     },

apps/storybook/tsconfig.node.json

@@ -4,7 +4,7 @@
     "composite": true,
     "module": "ESNext",
     "jsx": "react-jsx",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "noEmit": false,
@@ -13,6 +13,7 @@
   "include": [".storybook/**/*"],
   "exclude": ["lib"],
   "references": [
+    { "path": "../../apps/core" },
     { "path": "../../packages/i18n" },
     {
       "path": "../../packages/env"