feat: split components (#1530)

packages/component/src/stories/Breadcrumbs.stories.tsx

@@ -1,20 +1,33 @@
 /* deepscan-disable USELESS_ARROW_FUNC_BIND */
 import { Link, Typography } from '@mui/material';
-import { Meta, Story } from '@storybook/react';
+import { expect } from '@storybook/jest';
+import { Meta, StoryFn } from '@storybook/react';
+import { within } from '@storybook/testing-library';
 
 import { Breadcrumbs } from '..';
 
 export default {
   title: 'AFFiNE/Breadcrumbs',
   component: Breadcrumbs,
-} as Meta;
+} as Meta<typeof Breadcrumbs>;
 
-const Template: Story = args => <Breadcrumbs {...args} />;
+const Template: StoryFn = args => <Breadcrumbs {...args} />;
 
 export const Primary = Template.bind(undefined);
+Primary.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const text = canvas.getByText('AFFiNE');
+  expect(text.getAttribute('data-testid')).toBe('affine');
+};
 Primary.args = {
   children: [
-    <Link key="1" underline="hover" color="inherit" href="/">
+    <Link
+      data-testid="affine"
+      key="1"
+      underline="hover"
+      color="inherit"
+      href="/"
+    >
       AFFiNE
     </Link>,
     <Link key="2" underline="hover" color="inherit" href="/Docs/">

packages/component/src/stories/Button.stories.tsx

@@ -1,5 +1,5 @@
 /* deepscan-disable USELESS_ARROW_FUNC_BIND */
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 
 import { Button } from '..';
 import { ButtonProps } from '../ui/button/interface';
@@ -13,7 +13,7 @@ export default {
   },
 } as Meta<ButtonProps>;
 
-const Template: Story<ButtonProps> = args => <Button {...args} />;
+const Template: StoryFn<ButtonProps> = args => <Button {...args} />;
 
 export const Primary = Template.bind(undefined);
 Primary.args = {