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/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,20 @@
+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);

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

@@ -0,0 +1,32 @@
+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 ?? `${_internalId++}`;
+  dialogs$.next({ [id]: { id, open: true, ...info } });
+};
+
+/**
+ * Close specific dialog
+ */
+dialog.close = (id: Dialog['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);
+};
+
+// TODO: impl dialog.confirm

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

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

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

@@ -0,0 +1,5 @@
+import { LiveData } from '@toeverything/infra';
+
+import type { Dialog } from './types';
+
+export const dialogs$ = new LiveData<Record<Dialog['id'], Dialog>>({});

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/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}

yarn.lock

@@ -270,6 +270,7 @@ __metadata:
     "@types/react": "npm:^18.2.75"
     "@types/react-dnd": "npm:^3.0.2"
     "@types/react-dom": "npm:^18.2.24"
+    "@types/setimmediate": "npm:^1"
     "@vanilla-extract/css": "npm:^1.14.2"
     "@vanilla-extract/dynamic": "npm:^2.1.0"
     bytes: "npm:^3.1.2"
@@ -296,6 +297,7 @@ __metadata:
     react-transition-state: "npm:^2.1.1"
     react-virtuoso: "npm:^4.7.8"
     rxjs: "npm:^7.8.1"
+    setimmediate: "npm:^1.0.5"
     sonner: "npm:^1.4.41"
     storybook: "npm:^7.6.17"
     storybook-dark-mode: "npm:^4.0.0"
@@ -15464,6 +15466,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/setimmediate@npm:^1":
+  version: 1.0.4
+  resolution: "@types/setimmediate@npm:1.0.4"
+  checksum: 10/7edf9938b3587fe4797264070db2e19b30547612726f018083c80bc5498fe0b92e7b8b65add5073638de67c8172befa4a8ca38f0d9e0b35e20beb667327917d0
+  languageName: node
+  linkType: hard
+
 "@types/shimmer@npm:^1.0.2":
   version: 1.0.5
   resolution: "@types/shimmer@npm:1.0.5"