feat(storybook): improve code (#3786)

apps/storybook/src/stories/block-suite-editor.stories.tsx

@@ -1,92 +0,0 @@
-/* deepscan-disable USELESS_ARROW_FUNC_BIND */
-import { BlockHubWrapper } from '@affine/component/block-hub';
-import type { EditorProps } from '@affine/component/block-suite-editor';
-import { BlockSuiteEditor } from '@affine/component/block-suite-editor';
-import { rootBlockHubAtom } from '@affine/workspace/atom';
-import { __unstableSchemas, AffineSchemas } from '@blocksuite/blocks/models';
-import type { EditorContainer } from '@blocksuite/editor';
-import type { Page } from '@blocksuite/store';
-import { createMemoryStorage, Schema, Workspace } from '@blocksuite/store';
-import { expect } from '@storybook/jest';
-import type { Meta, StoryFn } from '@storybook/react';
-import { use } from 'foxact/use';
-
-const schema = new Schema();
-
-schema.register(AffineSchemas).register(__unstableSchemas);
-
-const blockSuiteWorkspace = new Workspace({
-  id: 'test',
-  blobStorages: [createMemoryStorage],
-  schema,
-});
-
-async function initPage(page: Page) {
-  await page.waitForLoaded();
-  // Add page block and surface block at root level
-  const pageBlockId = page.addBlock('affine:page', {
-    title: new page.Text('Hello, world!'),
-  });
-  page.addBlock('affine:surface', {}, pageBlockId);
-  const frameId = page.addBlock('affine:note', {}, pageBlockId);
-  page.addBlock(
-    'affine:paragraph',
-    {
-      text: new page.Text('This is a paragraph.'),
-    },
-    frameId
-  );
-  page.resetHistory();
-}
-
-const page = blockSuiteWorkspace.createPage('page0');
-
-type BlockSuiteMeta = Meta<typeof BlockSuiteEditor>;
-export default {
-  title: 'BlockSuite/Editor',
-  component: BlockSuiteEditor,
-} satisfies BlockSuiteMeta;
-
-const Template: StoryFn<EditorProps> = (props: Partial<EditorProps>) => {
-  if (!page.loaded) {
-    use(initPage(page));
-  }
-  return (
-    <div
-      style={{
-        height: '100vh',
-        width: '100vw',
-        overflow: 'auto',
-      }}
-    >
-      <BlockSuiteEditor onInit={initPage} page={page} mode="page" {...props} />
-      <BlockHubWrapper
-        style={{
-          position: 'absolute',
-          right: 12,
-          bottom: 12,
-        }}
-        blockHubAtom={rootBlockHubAtom}
-      />
-    </div>
-  );
-};
-
-export const Empty = Template.bind({});
-Empty.play = async ({ canvasElement }) => {
-  await new Promise<void>(resolve => {
-    setTimeout(() => resolve(), 500);
-  });
-  const editorContainer = canvasElement.querySelector(
-    '[data-testid="editor-page0"]'
-  ) as HTMLDivElement;
-  expect(editorContainer).not.toBeNull();
-  const editor = editorContainer.querySelector(
-    'editor-container'
-  ) as EditorContainer;
-  expect(editor).not.toBeNull();
-};
-
-Empty.args = {
-  mode: 'page',
-};

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

@@ -24,6 +24,9 @@ const FakeApp = () => {
 
 export default {
   title: 'Preview/Core',
+  parameters: {
+    chromatic: { disableSnapshot: false },
+  },
 };
 
 export const Index: StoryFn = () => {

apps/storybook/src/stories/datepicker.stories.tsx

@@ -1,11 +1,14 @@
 import { AFFiNEDatePicker } from '@affine/component/date-picker';
-import type { StoryFn } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
 export default {
   title: 'AFFiNE/AFFiNEDatePicker',
   component: AFFiNEDatePicker,
-};
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+} satisfies Meta;
 
 export const Default: StoryFn = () => {
   const [value, setValue] = useState<string>(new Date().toString());

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

@@ -2,11 +2,12 @@
 import { toast } from '@affine/component';
 import { ImportPage } from '@affine/component/import-page';
 import type { StoryFn } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
 export default {
   title: 'AFFiNE/ImportPage',
   component: ImportPage,
-};
+} satisfies Meta;
 
 const Template: StoryFn<typeof ImportPage> = args => <ImportPage {...args} />;
 

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

@@ -13,6 +13,9 @@ import { userEvent } from '@storybook/testing-library';
 export default {
   title: 'AFFiNE/PageList',
   component: PageList,
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
 };
 
 export const AffineOperationCell: StoryFn<OperationCellProps> = ({