feat(component): new dialog func to manage Modal

packages/frontend/component/.storybook/preview.tsx

@@ -9,6 +9,8 @@ import { useDarkMode } from 'storybook-dark-mode';
 import type { Preview } from '@storybook/react';
 import React from 'react';
 import { ConfirmModalProvider } from '../src/ui/modal/confirm-modal';
+import { DialogCenter } from '../src/ui/dialog/dialog-center';
+import 'setimmediate';
 
 export const parameters: Preview = {
   argTypes: {
@@ -58,6 +60,7 @@ export const decorators = [
           <ThemeChange />
           <Component />
           <Story {...context} />
+          <DialogCenter />
         </ConfirmModalProvider>
       </ThemeProvider>
     );

packages/frontend/component/package.json

@@ -99,8 +99,10 @@
     "@types/react": "^18.2.75",
     "@types/react-dnd": "^3.0.2",
     "@types/react-dom": "^18.2.24",
+    "@types/setimmediate": "^1",
     "@vanilla-extract/css": "^1.14.2",
     "fake-indexeddb": "^5.0.2",
+    "setimmediate": "^1.0.5",
     "storybook": "^7.6.17",
     "storybook-dark-mode": "^4.0.0",
     "typescript": "^5.4.5",

packages/frontend/component/src/index.ts

@@ -5,6 +5,7 @@ export * from './ui/avatar';
 export * from './ui/button';
 export * from './ui/checkbox';
 export * from './ui/date-picker';
+export * from './ui/dialog';
 export * from './ui/divider';
 export * from './ui/editable';
 export * from './ui/empty';

packages/frontend/component/src/ui/dialog/confirm-dialog.css.ts

@@ -0,0 +1,30 @@
+import { style } from '@vanilla-extract/css';
+
+export const confirmModalContent = style({
+  marginTop: '12px',
+  marginBottom: '20px',
+  height: '100%',
+  overflowY: 'auto',
+  padding: '0 4px',
+});
+export const confirmModalContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+});
+export const modalFooter = style({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  paddingTop: '40px',
+  marginTop: 'auto',
+  gap: '20px',
+  selectors: {
+    '&.modalFooterWithChildren': {
+      paddingTop: '20px',
+    },
+    '&.reverse': {
+      flexDirection: 'row-reverse',
+      justifyContent: 'flex-start',
+    },
+  },
+});

packages/frontend/component/src/ui/dialog/confirm-dialog.tsx

@@ -0,0 +1,45 @@
+import { DialogTrigger } from '@radix-ui/react-dialog';
+import clsx from 'clsx';
+import { useCallback } from 'react';
+
+import { Button } from '../button';
+import type { ConfirmModalProps } from '../modal';
+import * as styles from './confirm-dialog.css';
+
+export const ConfirmModalInner = ({
+  children,
+  confirmButtonOptions,
+  // FIXME: we need i18n
+  cancelText = 'Cancel',
+  cancelButtonOptions,
+  reverseFooter,
+  onConfirm,
+  onCancel,
+}: ConfirmModalProps) => {
+  const onConfirmClick = useCallback(() => {
+    Promise.resolve(onConfirm?.()).catch(err => {
+      console.error(err);
+    });
+  }, [onConfirm]);
+
+  return (
+    <>
+      {children ? (
+        <div className={styles.confirmModalContent}>{children}</div>
+      ) : null}
+      <div
+        className={clsx(styles.modalFooter, {
+          modalFooterWithChildren: !!children,
+          reverse: reverseFooter,
+        })}
+      >
+        <DialogTrigger asChild>
+          <Button onClick={onCancel} {...cancelButtonOptions}>
+            {cancelText}
+          </Button>
+        </DialogTrigger>
+        <Button onClick={onConfirmClick} {...confirmButtonOptions}></Button>
+      </div>
+    </>
+  );
+};

packages/frontend/component/src/ui/dialog/dialog-center.tsx

@@ -0,0 +1,25 @@
+import { useLiveData } from '@toeverything/infra';
+
+import { Modal } from '../modal';
+import { dialog } from './dialog';
+import { dialogs$ } from './state';
+import type { Dialog } from './types';
+
+export const DialogCenter = () => {
+  const dialogs = useLiveData(dialogs$);
+
+  const onOpenChange = (info: Dialog, open: boolean) => {
+    info.onOpenChange?.(open);
+    if (!open) {
+      dialog.close(info.id);
+    }
+  };
+
+  return Object.entries(dialogs).map(([id, info]) => {
+    return (
+      <Modal key={id} onOpenChange={v => onOpenChange(info, v)} {...info}>
+        {info.component}
+      </Modal>
+    );
+  });
+};

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

@@ -0,0 +1,61 @@
+import { useCallback } from 'react';
+
+import { Button } from '../button';
+import { dialog } from './dialog';
+
+export default {
+  title: 'UI/Dialog',
+};
+
+const Template = (_: any) => {
+  const openModal = useCallback(() => {
+    dialog({
+      component: <div>Modal Content</div>,
+    });
+  }, []);
+
+  return <Button onClick={openModal}>Open Modal</Button>;
+};
+
+export const Basic = Template.bind(undefined);
+
+export const ConfirmAsync = () => {
+  const onConfirm = useCallback(() => {
+    return new Promise(resolve => setTimeout(() => resolve(1), 2000));
+  }, []);
+
+  const showConfirm = useCallback(() => {
+    dialog.confirm({
+      title: 'Confirm',
+      description: 'Are you sure?',
+      confirmButtonOptions: {
+        children: 'Yes',
+      },
+      cancelText: 'No',
+      onConfirm,
+    });
+  }, [onConfirm]);
+
+  return <Button onClick={showConfirm}>Show Confirm</Button>;
+};
+
+export const ConfirmSync = () => {
+  const onConfirm = useCallback(() => {
+    console.log('Confirmed');
+    return null;
+  }, []);
+
+  const showConfirm = useCallback(() => {
+    dialog.confirm({
+      title: 'Confirm',
+      description: 'Are you sure?',
+      confirmButtonOptions: {
+        children: 'Yes',
+      },
+      cancelText: 'No',
+      onConfirm,
+    });
+  }, [onConfirm]);
+
+  return <Button onClick={showConfirm}>Show Confirm</Button>;
+};

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

@@ -0,0 +1,111 @@
+import clsx from 'clsx';
+
+import type { ConfirmModalProps, OpenConfirmModalOptions } from '../modal';
+import { ConfirmModalInner } from './confirm-dialog';
+import { confirmModalContainer } from './confirm-dialog.css';
+import { dialogs$ } from './state';
+import type { Dialog, DialogOptions } from './types';
+
+let _internalId = 0;
+
+/**
+ * Create/Open a dialog
+ */
+export const dialog = (info: DialogOptions) => {
+  const id = info.id ?? `internal:${_internalId++}`;
+  dialogs$.next({
+    [id]: {
+      ...dialogs$.value[id],
+      ...info,
+      id,
+      open: true,
+    },
+  });
+  return id;
+};
+
+/**
+ * Close specific dialog
+ */
+dialog.close = (id: Dialog['id']) => {
+  if (id.startsWith('internal:')) {
+    return dialog.destroy(id);
+  }
+  dialogs$.next({
+    ...dialogs$.value,
+    [id]: { ...dialogs$.value[id], open: false },
+  });
+};
+
+/**
+ * Destroy specific dialog
+ */
+dialog.destroy = (id: Dialog['id']) => {
+  const { [id]: _, ...rest } = dialogs$.value;
+  dialogs$.next(rest);
+};
+
+dialog.update = (id: Dialog['id'], info: Partial<DialogOptions>) => {
+  const _dialog = dialogs$.value[id];
+  if (!_dialog) {
+    throw new Error(`Dialog with id ${id} not found`);
+  }
+  dialogs$.next({
+    ...dialogs$.value,
+    [id]: {
+      // TODO: merge deeply
+      ..._dialog,
+      ...info,
+    },
+  });
+};
+
+/**
+ * Open confirm dialog
+ * @returns
+ */
+dialog.confirm = (
+  props: ConfirmModalProps & { id?: Dialog['id'] },
+  options?: OpenConfirmModalOptions
+) => {
+  const { autoClose = true, onSuccess } = options ?? {};
+  const { onConfirm: _onConfirm, width = 480, ...otherProps } = props;
+
+  const setLoading = (value: boolean) => {
+    dialog.confirm({
+      id,
+      ...props,
+      confirmButtonOptions: {
+        ...props.confirmButtonOptions,
+        loading: value,
+      },
+    });
+  };
+
+  const onConfirm = () => {
+    setLoading(true);
+    return Promise.resolve(_onConfirm?.())
+      .then(() => onSuccess?.())
+      .catch(console.error)
+      .finally(() => autoClose && dialog.close(id));
+  };
+
+  const id = dialog({
+    ...props,
+    width,
+    contentOptions: {
+      ...props.contentOptions,
+      className: clsx(
+        confirmModalContainer,
+        props.confirmButtonOptions?.className
+      ),
+    },
+    component: (
+      <ConfirmModalInner onConfirm={onConfirm} {...otherProps}>
+        {props.children}
+      </ConfirmModalInner>
+    ),
+  });
+
+  return id;
+};

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

@@ -0,0 +1,3 @@
+export * from './dialog';
+export * from './dialog-center';
+export * from './state';

packages/frontend/component/src/ui/dialog/state.ts

@@ -0,0 +1,8 @@
+import { LiveData } from '@toeverything/infra';
+
+import type { Dialog } from './types';
+
+export const dialogs$ = new LiveData<Record<Dialog['id'], Dialog>>({});
+export const openedDialogIds$ = LiveData.computed(get =>
+  Object.keys(get(dialogs$)).filter(id => get(dialogs$)[id]?.open)
+);

packages/frontend/component/src/ui/dialog/types.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+
+import type { ModalProps } from '../modal';
+
+export interface DialogOptions extends Omit<ModalProps, 'open'> {
+  component: ReactNode;
+  /**
+   * Unique identifier for the dialog.
+   * If specified, the dialog will be reused
+   */
+  id?: string;
+}
+
+export interface Dialog extends DialogOptions {
+  id: string;
+  open: boolean;
+}

packages/frontend/component/src/ui/modal/confirm-modal.tsx

@@ -61,7 +61,7 @@ export const ConfirmModal = ({
   );
 };
 
-interface OpenConfirmModalOptions {
+export interface OpenConfirmModalOptions {
   autoClose?: boolean;
   onSuccess?: () => void;
 }

packages/frontend/electron/renderer/app.tsx

@@ -1,7 +1,7 @@
 import '@affine/component/theme/global.css';
 import '@affine/component/theme/theme.css';
 
-import { NotificationCenter } from '@affine/component';
+import { DialogCenter, NotificationCenter } from '@affine/component';
 import { AffineContext } from '@affine/component/context';
 import { GlobalLoading } from '@affine/component/global-loading';
 import { WorkspaceFallback } from '@affine/core/components/workspace';
@@ -107,6 +107,7 @@ export function App() {
             <DebugProvider>
               <GlobalLoading />
               <NotificationCenter />
+              <DialogCenter />
               <RouterProvider
                 fallbackElement={<WorkspaceFallback key="RouterFallback" />}
                 router={router}

packages/frontend/web/src/app.tsx

@@ -1,7 +1,7 @@
 import '@affine/component/theme/global.css';
 import '@affine/component/theme/theme.css';
 
-import { NotificationCenter } from '@affine/component';
+import { DialogCenter, NotificationCenter } from '@affine/component';
 import { AffineContext } from '@affine/component/context';
 import { GlobalLoading } from '@affine/component/global-loading';
 import { WorkspaceFallback } from '@affine/core/components/workspace';
@@ -96,6 +96,7 @@ export function App() {
             <DebugProvider>
               <GlobalLoading />
               <NotificationCenter />
+              <DialogCenter />
               <RouterProvider
                 fallbackElement={<WorkspaceFallback key="RouterFallback" />}
                 router={router}