feat(component): add storybook (#5079)

packages/frontend/component/src/ui/button/button.stories.tsx

@@ -0,0 +1,46 @@
+import { InformationIcon } from '@blocksuite/icons';
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { Button, type ButtonProps } from './button';
+export default {
+  title: 'UI/Button',
+  component: Button,
+  argTypes: {
+    onClick: () => console.log('Click button'),
+  },
+} satisfies Meta<ButtonProps>;
+
+const Template: StoryFn<ButtonProps> = args => <Button {...args} />;
+
+export const Default: StoryFn<ButtonProps> = Template.bind(undefined);
+Default.args = {
+  type: 'default',
+  children: 'This is a default button',
+  icon: <InformationIcon />,
+};
+
+export const Primary: StoryFn<ButtonProps> = Template.bind(undefined);
+Primary.args = {
+  type: 'primary',
+  children: 'Content',
+  icon: <InformationIcon />,
+};
+
+export const Disabled: StoryFn<ButtonProps> = Template.bind(undefined);
+Disabled.args = {
+  disabled: true,
+  children: 'This is a disabled button',
+};
+
+export const LargeSizeButton: StoryFn<ButtonProps> = Template.bind(undefined);
+LargeSizeButton.args = {
+  size: 'large',
+  children: 'This is a large button',
+};
+
+export const ExtraLargeSizeButton: StoryFn<ButtonProps> =
+  Template.bind(undefined);
+ExtraLargeSizeButton.args = {
+  size: 'extraLarge',
+  children: 'This is a extra large button',
+};

packages/frontend/component/src/ui/button/icon-button.stories.tsx

@@ -0,0 +1,48 @@
+import { InformationIcon } from '@blocksuite/icons';
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { IconButton, type IconButtonProps } from './icon-button';
+export default {
+  title: 'UI/IconButton',
+  component: IconButton,
+  argTypes: {
+    onClick: () => console.log('Click button'),
+  },
+} satisfies Meta<IconButtonProps>;
+
+const Template: StoryFn<IconButtonProps> = args => <IconButton {...args} />;
+
+export const Plain: StoryFn<IconButtonProps> = Template.bind(undefined);
+Plain.args = {
+  children: <InformationIcon />,
+};
+
+export const Primary: StoryFn<IconButtonProps> = Template.bind(undefined);
+Primary.args = {
+  type: 'primary',
+  icon: <InformationIcon />,
+};
+
+export const Disabled: StoryFn<IconButtonProps> = Template.bind(undefined);
+Disabled.args = {
+  disabled: true,
+  icon: <InformationIcon />,
+};
+export const ExtraSmallSizeButton: StoryFn<IconButtonProps> =
+  Template.bind(undefined);
+ExtraSmallSizeButton.args = {
+  size: 'extraSmall',
+  icon: <InformationIcon />,
+};
+export const SmallSizeButton: StoryFn<IconButtonProps> =
+  Template.bind(undefined);
+SmallSizeButton.args = {
+  size: 'small',
+  icon: <InformationIcon />,
+};
+export const LargeSizeButton: StoryFn<IconButtonProps> =
+  Template.bind(undefined);
+LargeSizeButton.args = {
+  size: 'large',
+  icon: <InformationIcon />,
+};