feat: replace button from @toeverything/components (#3608)

apps/storybook/src/stories/app-sidebar.stories.tsx

@@ -1,4 +1,3 @@
-import { IconButton } from '@affine/component';
 import {
   AppSidebar,
   AppSidebarFallback,
@@ -19,6 +18,7 @@ import {
   SidebarIcon,
 } from '@blocksuite/icons';
 import type { Meta, StoryFn } from '@storybook/react';
+import { IconButton } from '@toeverything/components/button';
 import { useAtom } from 'jotai';
 import { type PropsWithChildren, useState } from 'react';
 import { MemoryRouter } from 'react-router-dom';

apps/storybook/src/stories/button.stories.tsx

@@ -1,138 +0,0 @@
-/* deepscan-disable USELESS_ARROW_FUNC_BIND */
-import type { ButtonProps } from '@affine/component';
-import { Button } from '@affine/component';
-import { DropdownButton } from '@affine/component';
-import { RadioButton, RadioButtonGroup } from '@affine/component';
-import { Menu } from '@affine/component';
-import { toast } from '@affine/component';
-import { InformationIcon } from '@blocksuite/icons';
-import type { Meta, StoryFn } from '@storybook/react';
-import { useState } from 'react';
-export default {
-  title: 'AFFiNE/Button',
-  component: Button,
-  argTypes: {
-    hoverBackground: { control: 'color' },
-    hoverColor: { control: 'color' },
-  },
-} as Meta<ButtonProps>;
-
-const Template: StoryFn<ButtonProps> = args => <Button {...args} />;
-
-export const Primary = Template.bind(undefined);
-Primary.args = {
-  type: 'primary',
-  children: 'Content',
-  onClick: () => toast('Click button'),
-  icon: <InformationIcon />,
-};
-
-export const Default = Template.bind(undefined);
-Default.args = {
-  type: 'default',
-  children: 'This is a default button',
-  onClick: () => toast('Click button'),
-};
-
-export const Light = Template.bind(undefined);
-Light.args = {
-  type: 'error',
-  children: 'This is a light button',
-  onClick: () => toast('Click button'),
-};
-
-export const Warning = Template.bind(undefined);
-Warning.args = {
-  type: 'warning',
-  children: 'This is a warning button',
-  onClick: () => toast('Click button'),
-};
-
-export const Danger = Template.bind(undefined);
-Danger.args = {
-  type: 'success',
-  children: 'This is a danger button',
-  onClick: () => toast('Click button'),
-};
-
-export const Dropdown: StoryFn = ({ onClickDropDown, ...props }) => {
-  const [open, setOpen] = useState(false);
-  return (
-    <>
-      <DropdownButton onClickDropDown={onClickDropDown} {...props}>
-        Dropdown Button
-      </DropdownButton>
-
-      <Menu
-        visible={open}
-        placement="bottom-end"
-        trigger={['click']}
-        width={235}
-        disablePortal={true}
-        onClickAway={() => {
-          setOpen(false);
-        }}
-        content={<>Dropdown Menu</>}
-      >
-        <DropdownButton
-          onClick={() => {
-            toast('Click button');
-            setOpen(false);
-          }}
-          onClickDropDown={() => setOpen(!open)}
-        >
-          Dropdown with Menu
-        </DropdownButton>
-      </Menu>
-    </>
-  );
-};
-Dropdown.args = {
-  onClick: () => toast('Click button'),
-  onClickDropDown: () => toast('Click dropdown'),
-};
-
-export const RadioGroup: StoryFn = ({ ...props }) => {
-  return (
-    <>
-      <RadioButtonGroup {...props}>
-        <RadioButton value="all">All</RadioButton>
-        <RadioButton value="page">Page</RadioButton>
-        <RadioButton value="edgeless">Edgeless</RadioButton>
-      </RadioButtonGroup>
-      <RadioButtonGroup {...props}>
-        <RadioButton value="all">Long long text and some more</RadioButton>
-        <RadioButton value="page">Lorem ipsum dolor sit amet</RadioButton>
-        <RadioButton value="edgeless">Long long text</RadioButton>
-      </RadioButtonGroup>
-    </>
-  );
-};
-RadioGroup.args = {
-  defaultValue: 'all',
-  onValueChange: (value: string) => toast(`Radio value: ${value}`),
-};
-
-export const Test: StoryFn<ButtonProps> = () => {
-  const [input, setInput] = useState('');
-  return (
-    <>
-      <input
-        type="text"
-        data-testid="test-input"
-        value={input}
-        onChange={e => setInput(e.target.value)}
-      />
-      <Button
-        onClick={() => {
-          setInput('');
-        }}
-        data-testid="clear-button"
-      >
-        clear
-      </Button>
-    </>
-  );
-};
-
-Test.storyName = 'Click Test';

apps/storybook/src/stories/icon-button.stories.tsx

@@ -1,25 +0,0 @@
-/* deepscan-disable USELESS_ARROW_FUNC_BIND */
-import { IconButton, type IconButtonProps } from '@affine/component';
-import { toast } from '@affine/component';
-import { InformationIcon } from '@blocksuite/icons';
-import type { Meta, StoryFn } from '@storybook/react';
-export default {
-  title: 'AFFiNE/IconButton',
-  component: IconButton,
-} as Meta<IconButtonProps>;
-
-const IconButtonTemplate: StoryFn<IconButtonProps> = args => {
-  return (
-    <>
-      <h1>This is icon button</h1>
-      <IconButton {...args} />
-    </>
-  );
-};
-
-export const Icon = IconButtonTemplate.bind(undefined);
-Icon.args = {
-  children: <InformationIcon />,
-  onClick: () => toast('Click button'),
-  withoutPadding: true,
-};