feat(component): improve storybook (#1804)

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)