feat(component): improve storybook (#1804)

packages/component/.storybook/main.ts

@@ -8,8 +8,10 @@ export default {
   staticDirs: ['../../../apps/web/public'],
   addons: [
     '@storybook/addon-links',
-    'storybook-dark-mode',
+    '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@storybook/addon-storysource',
+    'storybook-dark-mode',
   ],
   framework: {
     name: '@storybook/react-vite',

packages/component/package.json

@@ -38,22 +38,24 @@
     "react-is": "^18.2.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "7.0.0",
-    "@storybook/addon-essentials": "7.0.0",
-    "@storybook/addon-interactions": "7.0.0",
-    "@storybook/addon-links": "7.0.0",
-    "@storybook/builder-vite": "7.0.0",
-    "@storybook/jest": "0.0.10",
-    "@storybook/react": "7.0.0",
-    "@storybook/react-vite": "7.0.0",
-    "@storybook/test-runner": "0.10.0-next.12",
-    "@storybook/testing-library": "0.0.14-next.2",
+    "@storybook/addon-actions": "^7.0.2",
+    "@storybook/addon-essentials": "^7.0.2",
+    "@storybook/addon-interactions": "^7.0.2",
+    "@storybook/addon-links": "^7.0.2",
+    "@storybook/addon-storysource": "^7.0.2",
+    "@storybook/blocks": "^7.0.2",
+    "@storybook/builder-vite": "^7.0.2",
+    "@storybook/jest": "^0.1.0",
+    "@storybook/react": "^7.0.2",
+    "@storybook/react-vite": "^7.0.2",
+    "@storybook/test-runner": "^0.10.0",
+    "@storybook/testing-library": "^0.1.0",
     "@types/react": "^18.0.31",
     "@types/react-dnd": "^3.0.2",
     "@types/react-dom": "18.0.11",
     "@vitejs/plugin-react": "^3.1.0",
     "jest-mock": "^29.5.0",
-    "storybook": "7.0.0",
+    "storybook": "^7.0.2",
     "storybook-dark-mode": "^3.0.0",
     "typescript": "^5.0.3",
     "vite": "^4.2.1",

packages/component/src/components/block-suite-editor/index.stories.tsx

@@ -5,19 +5,24 @@ import type { Page } from '@blocksuite/store';
 import { Workspace } from '@blocksuite/store';
 import { expect } from '@storybook/jest';
 import type { Meta, StoryFn } from '@storybook/react';
-import { useEffect, useState } from 'react';
 
 import type { EditorProps } from '.';
 import { BlockSuiteEditor } from '.';
 
-function initPage(page: Page, editor: Readonly<EditorContainer>): void {
+function initPage(page: Page): void {
   // Add page block and surface block at root level
   const pageBlockId = page.addBlock('affine:page', {
-    title: new page.Text(''),
+    title: new page.Text('Hello, world!'),
   });
   page.addBlock('affine:surface', {}, null);
   const frameId = page.addBlock('affine:frame', {}, pageBlockId);
-  page.addBlock('affine:paragraph', {}, frameId);
+  page.addBlock(
+    'affine:paragraph',
+    {
+      text: new page.Text('This is a paragraph.'),
+    },
+    frameId
+  );
   page.resetHistory();
 }
 
@@ -26,12 +31,8 @@ const blockSuiteWorkspace = new Workspace({
   blobOptionsGetter: () => void 0,
 });
 blockSuiteWorkspace.register(AffineSchemas).register(__unstableSchemas);
-const promise = new Promise<void>(resolve => {
-  blockSuiteWorkspace.slots.pageAdded.once(() => {
-    resolve();
-  });
-});
-blockSuiteWorkspace.createPage('page0');
+const page = blockSuiteWorkspace.createPage('page0');
+initPage(page);
 
 type BlockSuiteMeta = Meta<typeof BlockSuiteEditor>;
 export default {
@@ -40,16 +41,6 @@ export default {
 } satisfies BlockSuiteMeta;
 
 const Template: StoryFn<EditorProps> = (args: EditorProps) => {
-  const [loaded, setLoaded] = useState(false);
-  const page = blockSuiteWorkspace.getPage('page0');
-  useEffect(() => {
-    promise
-      .then(() => setLoaded(true))
-      .then(() => {
-        document.dispatchEvent(new Event('blocksuite:ready'));
-      });
-  }, []);
-  if (!loaded || !page) return <div>Loading...</div>;
   return (
     <BlockSuiteEditor
       {...args}
@@ -80,6 +71,5 @@ Empty.play = async ({ canvasElement }) => {
 };
 
 Empty.args = {
-  onInit: initPage,
   mode: 'page',
 };

packages/component/src/stories/WorkspaceAvatar.stories.tsx

@@ -0,0 +1,46 @@
+import { WorkspaceFlavour } from '@affine/workspace/type';
+import { Workspace } from '@blocksuite/store';
+import type { Meta, StoryFn } from '@storybook/react';
+
+import type { WorkspaceUnitAvatarProps } from '../components/workspace-avatar';
+import { WorkspaceAvatar } from '../components/workspace-avatar';
+
+export default {
+  title: 'AFFiNE/WorkspaceAvatar',
+  component: WorkspaceAvatar,
+  argTypes: {
+    size: {
+      control: {
+        type: 'range',
+        min: 20,
+        max: 100,
+      },
+    },
+  },
+} satisfies Meta<WorkspaceUnitAvatarProps>;
+
+const blockSuiteWorkspace = new Workspace({
+  id: 'blocksuite-local',
+});
+
+blockSuiteWorkspace.meta.setName('Hello World');
+
+export const Basic: StoryFn<WorkspaceUnitAvatarProps> = props => {
+  return (
+    <div>
+      <WorkspaceAvatar
+        {...props}
+        workspace={{
+          flavour: WorkspaceFlavour.LOCAL,
+          id: 'local',
+          blockSuiteWorkspace,
+          providers: [],
+        }}
+      />
+    </div>
+  );
+};
+
+Basic.args = {
+  size: 40,
+};

packages/component/src/stories/introduction.stories.mdx

@@ -0,0 +1,18 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Introduction" />
+
+# AFFiNE UI Storybook
+
+This is a UI component dev environment for AFFiNE UI.
+It allows you to browse the AFFiNE UI components,
+view the different states of each component,
+and interactively develop and test components.
+
+## Bug Reporting
+
+If you find a bug, please file an issue on [GitHub](https://github.com/toeverything/AFFiNE/issues)
+
+## Contributing
+
+We welcome contributions from the community! [Get started here](https://github.com/toeverything/AFFiNE/blob/master/docs/BUILDING.md)