feat(storybook): preview app (#3765)

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'),