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
2026-08-08 12:45:55 +08:00 · 2023-12-04 08:32:12 +00:00
parent 33c53217c3
commit 0abadbe7bb
34 changed files with 2080 additions and 3 deletions
@@ -0,0 +1,111 @@
+import { CloseIcon } from '@blocksuite/icons';
+import type {
+  DialogContentProps,
+  DialogOverlayProps,
+  DialogPortalProps,
+  DialogProps,
+} from '@radix-ui/react-dialog';
+import * as Dialog from '@radix-ui/react-dialog';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import clsx from 'clsx';
+import { type CSSProperties, forwardRef } from 'react';
+
+import { IconButton, type IconButtonProps } from '../button';
+import * as styles from './styles.css';
+
+export interface ModalProps extends DialogProps {
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
+  minHeight?: CSSProperties['minHeight'];
+  title?: string;
+  description?: string;
+  withoutCloseButton?: boolean;
+
+  portalOptions?: DialogPortalProps;
+  contentOptions?: DialogContentProps;
+  overlayOptions?: DialogOverlayProps;
+  closeButtonOptions?: IconButtonProps;
+}
+
+const getVar = (style: number | string = '', defaultValue = '') => {
+  return style
+    ? typeof style === 'number'
+      ? `${style}px`
+      : style
+    : defaultValue;
+};
+
+export const Modal = forwardRef<HTMLDivElement, ModalProps>(
+  (
+    {
+      width,
+      height,
+      minHeight = 194,
+      title,
+      description,
+      withoutCloseButton = false,
+
+      portalOptions,
+      contentOptions: {
+        style: contentStyle,
+        className: contentClassName,
+        ...otherContentOptions
+      } = {},
+      overlayOptions: {
+        className: overlayClassName,
+        ...otherOverlayOptions
+      } = {},
+      closeButtonOptions = {},
+      children,
+      ...props
+    },
+    ref
+  ) => (
+    <Dialog.Root {...props}>
+      <Dialog.Portal {...portalOptions}>
+        <Dialog.Overlay
+          className={clsx(styles.modalOverlay, overlayClassName)}
+          {...otherOverlayOptions}
+        />
+        <Dialog.Content
+          className={clsx(styles.modalContent, contentClassName)}
+          style={{
+            ...assignInlineVars({
+              [styles.widthVar]: getVar(width, '50vw'),
+              [styles.heightVar]: getVar(height, 'unset'),
+              [styles.minHeightVar]: getVar(minHeight, '26px'),
+            }),
+            ...contentStyle,
+          }}
+          {...otherContentOptions}
+          ref={ref}
+        >
+          {withoutCloseButton ? null : (
+            <Dialog.Close asChild>
+              <IconButton
+                className={styles.closeButton}
+                aria-label="Close"
+                type="plain"
+                {...closeButtonOptions}
+              >
+                <CloseIcon />
+              </IconButton>
+            </Dialog.Close>
+          )}
+          {title ? (
+            <Dialog.Title className={styles.modalHeader}>{title}</Dialog.Title>
+          ) : null}
+          {description ? (
+            <Dialog.Description className={styles.modalDescription}>
+              {description}
+            </Dialog.Description>
+          ) : null}
+
+          {children}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+);
+
+Modal.displayName = 'Modal';