refactor(component): migrate design components (#5000)

```[tasklist]
### Tasks
- [x] Migrate components from [design](https://github.com/toeverything/design)
- [x] Replace all imports from `@toeverything/components`
- [x] Clean up `@toeverything/components` dependencies
- [x] Storybook
```

### Influence

Here are all the components that are influenced by `@toeverything/components`

- `@affine/component`
    - App update `Button` `Tooltip`
    - App sidebar header `IconButton`, `Tooltip`
    - Back `Button`
    - Auth
      - Change email page save `Button`
      - Change password page all `Button`s (Save, Later, Open)
      - Confirm change email `Button`
      - Set password page `Button`
      - Sign in success page `Button`
      - Sign up page `Button`
      - Auth `Modal`
    - Workspace card `Avatar`, `Divider`, `Tooltip`, `IconButton`
    - Share
      - Disable shared public link `Modal`
    - Import page `IconButton`, `Tooltip`
    - Accept invite page `Avatar`, `Button`
    - Invite member `Modal`
    - 404 Page `Avatar`, `Button`, `IconButton`, `Tooltip`
    - Notification center `IconButton`
    - Page list
      - operation cell `IconButton`, `Menu`, `ConfirmModal`, `Tooltip`
      - tags more `Menu`
      - favorite `IconButton`, `Tooltip`
      - new page dropdown `Menu`
      - filter `Menu`, `Button`, `IconButton`
    - Page operation `Menu`
      - export `MenuItem`
      - move to trash `MenuItem`, `ConfirmModal`
    - Workspace header filter `Menu`, `Button`
    - Collection bar `Button`, `Tooltip` (*⚠️ seems not used*)
    - Collection operation `Menu`, `MenuItem`
      - Create collection `Modal`, `Button`
      - Edit collection `Modal`, `Button`
      - Page mode filter `Menu`
      - Page mode `Button`, `Menu`
    - Setting modal
      - storage usage progress `Button`, `Tooltip`
    - On boarding tour `Modal`
- `@affine/core`
  - Bookmark `Menu`
  - Affine error boundary `Button`
  - After sign in send email `Button`
  - After sign up send email `Button`
  - Send email `Button`
  - Sign in `Button`
  - Subscription redirect `Loading`, `Button`
  - Setting `Modal`
    - User plan button `Tooltip`
    - Members `Avatar`, `Button`, `IconButton`, `Loading`, `Tooltip`, `Menu`
    - Profile `Button`, `Avatar`
    - Workspace
      - publish panel `Button`, `Tooltip`
      - export panel `Button`
      - storage panel `Button`, `Tooltip`
      - delete `ConfirmModal`
    - Language `Menu`
    - Account setting `Avatar`, `Button`
    - Date format setting `Menu`
    - Billing `Button`, `IconButton`, `Loading`
    - Payment plans `Button`, `ConfirmModal`, `Modal`, `Tooltip`
  - Create workspace `Modal`, `ConfirmModal`, `Button`
  - Payment disabled `ConfirmModal`
  - Share/Export `Menu`, `Button`, `Divider`
  - Sign out `ConfirmModal`
  - Temp disable affine cloud `Modal`
  - Page detail operation `Menu`
  - Blocksuite mode switch `Tooltip`
  - Login card `Avatar`
  - Help island `Tooltip`
- `plugin`
  - copilot
  - hello world
  - image preview
  - outline

packages/frontend/component/src/ui/tooltip/index.ts

@@ -0,0 +1,5 @@
+import { Tooltip } from './tooltip';
+
+export * from './tooltip';
+
+export default Tooltip;

packages/frontend/component/src/ui/tooltip/styles.css.ts

@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+
+export const tooltipContent = style({
+  backgroundColor: 'var(--affine-tooltip)',
+  color: 'var(--affine-white)',
+  padding: '5px 12px',
+  fontSize: 'var(--affine-font-sm)',
+  lineHeight: '22px',
+  borderRadius: '4px',
+  maxWidth: '280px',
+});

packages/frontend/component/src/ui/tooltip/tooltip.tsx

@@ -0,0 +1,60 @@
+import type {
+  TooltipContentProps,
+  TooltipPortalProps,
+  TooltipProps as RootProps,
+} from '@radix-ui/react-tooltip';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import type { ReactElement, ReactNode } from 'react';
+
+import * as styles from './styles.css';
+
+export interface TooltipProps {
+  // `children` can not be string, number or even undefined
+  children: ReactElement;
+  content?: ReactNode;
+  side?: TooltipContentProps['side'];
+  align?: TooltipContentProps['align'];
+
+  rootOptions?: Omit<RootProps, 'children'>;
+  portalOptions?: TooltipPortalProps;
+  options?: Omit<TooltipContentProps, 'side' | 'align'>;
+}
+
+export const Tooltip = ({
+  children,
+  content,
+  side = 'top',
+  align = 'center',
+  options,
+  rootOptions,
+  portalOptions,
+}: TooltipProps) => {
+  if (!content) {
+    return children;
+  }
+  return (
+    <TooltipPrimitive.Provider>
+      <TooltipPrimitive.Root delayDuration={500} {...rootOptions}>
+        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+
+        <TooltipPrimitive.Portal {...portalOptions}>
+          <TooltipPrimitive.Content
+            className={styles.tooltipContent}
+            side={side}
+            align={align}
+            sideOffset={5}
+            style={{ zIndex: 'var(--affine-z-index-popover)' }}
+            {...options}
+          >
+            {content}
+            <TooltipPrimitive.Arrow
+              height={6}
+              width={10}
+              fill="var(--affine-tooltip)"
+            />
+          </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  );
+};