Migrate to a monorepo structure (#2909)

packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/Dialog.tsx

@@ -0,0 +1,162 @@
+import { useCallback } from 'react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+import { Key } from 'ts-key-enum';
+
+import { Button } from '@/ui/input/button/components/Button';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+
+import { DialogHotkeyScope } from '../types/DialogHotkeyScope';
+
+const StyledDialogOverlay = styled(motion.div)`
+  align-items: center;
+  background: ${({ theme }) => theme.background.overlay};
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: 9999;
+`;
+
+const StyledDialogContainer = styled(motion.div)`
+  background: ${({ theme }) => theme.background.primary};
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  max-width: 320px;
+  padding: 2em;
+  position: relative;
+  width: 100%;
+`;
+
+const StyledDialogTitle = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(6)};
+  text-align: center;
+`;
+
+const StyledDialogMessage = styled.span`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  margin-bottom: ${({ theme }) => theme.spacing(6)};
+  text-align: center;
+`;
+
+const StyledDialogButton = styled(Button)`
+  justify-content: center;
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+`;
+
+export type DialogButtonOptions = Omit<
+  React.ComponentProps<typeof Button>,
+  'fullWidth'
+> & {
+  onClick?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent> | KeyboardEvent,
+  ) => void;
+  role?: 'confirm';
+};
+
+export type DialogProps = React.ComponentPropsWithoutRef<typeof motion.div> & {
+  title?: string;
+  message?: string;
+  buttons?: DialogButtonOptions[];
+  allowDismiss?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+  onClose?: () => void;
+};
+
+export const Dialog = ({
+  title,
+  message,
+  buttons = [],
+  allowDismiss = true,
+  children,
+  className,
+  onClose,
+  id,
+}: DialogProps) => {
+  const closeSnackbar = useCallback(() => {
+    onClose && onClose();
+  }, [onClose]);
+
+  const dialogVariants = {
+    open: { opacity: 1 },
+    closed: { opacity: 0 },
+  };
+
+  const containerVariants = {
+    open: { y: 0 },
+    closed: { y: '50vh' },
+  };
+
+  useScopedHotkeys(
+    Key.Enter,
+    (event: KeyboardEvent) => {
+      const confirmButton = buttons.find((button) => button.role === 'confirm');
+
+      event.preventDefault();
+
+      if (confirmButton) {
+        confirmButton?.onClick?.(event);
+        closeSnackbar();
+      }
+    },
+    DialogHotkeyScope.Dialog,
+    [],
+  );
+
+  useScopedHotkeys(
+    Key.Escape,
+    (event: KeyboardEvent) => {
+      event.preventDefault();
+      closeSnackbar();
+    },
+    DialogHotkeyScope.Dialog,
+    [],
+  );
+
+  return (
+    <StyledDialogOverlay
+      variants={dialogVariants}
+      initial="closed"
+      animate="open"
+      exit="closed"
+      onClick={(e) => {
+        if (allowDismiss) {
+          e.stopPropagation();
+          closeSnackbar();
+        }
+      }}
+      className={className}
+    >
+      <StyledDialogContainer
+        variants={containerVariants}
+        transition={{ damping: 15, stiffness: 100 }}
+        id={id}
+      >
+        {title && <StyledDialogTitle>{title}</StyledDialogTitle>}
+        {message && <StyledDialogMessage>{message}</StyledDialogMessage>}
+        {children}
+        {buttons.map(({ accent, onClick, role, title: key, variant }) => (
+          <StyledDialogButton
+            onClick={(event) => {
+              onClick?.(event);
+              closeSnackbar();
+            }}
+            fullWidth={true}
+            variant={variant ?? 'secondary'}
+            {...{ accent, key, role }}
+          />
+        ))}
+      </StyledDialogContainer>
+    </StyledDialogOverlay>
+  );
+};

packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/DialogManager.tsx

@@ -0,0 +1,24 @@
+import { useDialogManagerScopedStates } from '../hooks/internal/useDialogManagerScopedStates';
+import { useDialogManager } from '../hooks/useDialogManager';
+
+import { Dialog } from './Dialog';
+import { DialogManagerEffect } from './DialogManagerEffect';
+
+export const DialogManager = ({ children }: React.PropsWithChildren) => {
+  const { dialogInternal } = useDialogManagerScopedStates();
+  const { closeDialog } = useDialogManager();
+
+  return (
+    <>
+      <DialogManagerEffect />
+      {children}
+      {dialogInternal.queue.map(({ buttons, children, id, message, title }) => (
+        <Dialog
+          key={id}
+          {...{ title, message, buttons, id, children }}
+          onClose={() => closeDialog(id)}
+        />
+      ))}
+    </>
+  );
+};

packages/twenty-front/src/modules/ui/feedback/dialog-manager/components/DialogManagerEffect.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+
+import { useDialogManagerScopedStates } from '../hooks/internal/useDialogManagerScopedStates';
+import { DialogHotkeyScope } from '../types/DialogHotkeyScope';
+
+export const DialogManagerEffect = () => {
+  const { dialogInternal } = useDialogManagerScopedStates();
+
+  const { setHotkeyScopeAndMemorizePreviousScope } = usePreviousHotkeyScope();
+
+  useEffect(() => {
+    if (dialogInternal.queue.length === 0) {
+      return;
+    }
+
+    setHotkeyScopeAndMemorizePreviousScope(DialogHotkeyScope.Dialog);
+  }, [dialogInternal.queue, setHotkeyScopeAndMemorizePreviousScope]);
+
+  return <></>;
+};

packages/twenty-front/src/modules/ui/feedback/dialog-manager/hooks/internal/useDialogManagerScopedStates.ts

@@ -0,0 +1,25 @@
+import { useRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2';
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+
+import { DialogManagerScopeInternalContext } from '../../scopes/scope-internal-context/DialogManagerScopeInternalContext';
+import { dialogInternalScopedState } from '../../states/dialogInternalScopedState';
+
+type useDialogManagerScopedStatesProps = {
+  dialogManagerScopeId?: string;
+};
+
+export const useDialogManagerScopedStates = (
+  props?: useDialogManagerScopedStatesProps,
+) => {
+  const scopeId = useAvailableScopeIdOrThrow(
+    DialogManagerScopeInternalContext,
+    props?.dialogManagerScopeId,
+  );
+
+  const [dialogInternal, setDialogInternal] = useRecoilScopedStateV2(
+    dialogInternalScopedState,
+    scopeId,
+  );
+
+  return { dialogInternal, setDialogInternal };
+};

packages/twenty-front/src/modules/ui/feedback/dialog-manager/hooks/useDialogManager.ts

@@ -0,0 +1,62 @@
+import { useRecoilCallback } from 'recoil';
+import { v4 } from 'uuid';
+
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+
+import { DialogManagerScopeInternalContext } from '../scopes/scope-internal-context/DialogManagerScopeInternalContext';
+import { dialogInternalScopedState } from '../states/dialogInternalScopedState';
+import { DialogOptions } from '../types/DialogOptions';
+
+type useDialogManagerProps = {
+  dialogManagerScopeId?: string;
+};
+
+export const useDialogManager = (props?: useDialogManagerProps) => {
+  const scopeId = useAvailableScopeIdOrThrow(
+    DialogManagerScopeInternalContext,
+    props?.dialogManagerScopeId,
+  );
+
+  const { goBackToPreviousHotkeyScope } = usePreviousHotkeyScope();
+
+  const closeDialog = useRecoilCallback(
+    ({ set }) =>
+      (id: string) => {
+        set(dialogInternalScopedState({ scopeId: scopeId }), (prevState) => ({
+          ...prevState,
+          queue: prevState.queue.filter((snackBar) => snackBar.id !== id),
+        }));
+        goBackToPreviousHotkeyScope();
+      },
+    [goBackToPreviousHotkeyScope, scopeId],
+  );
+
+  const setDialogQueue = useRecoilCallback(
+    ({ set }) =>
+      (newValue) =>
+        set(dialogInternalScopedState({ scopeId: scopeId }), (prev) => {
+          if (prev.queue.length >= prev.maxQueue) {
+            return {
+              ...prev,
+              queue: [...prev.queue.slice(1), newValue] as DialogOptions[],
+            };
+          }
+
+          return {
+            ...prev,
+            queue: [...prev.queue, newValue] as DialogOptions[],
+          };
+        }),
+    [scopeId],
+  );
+
+  const enqueueDialog = (options?: Omit<DialogOptions, 'id'>) => {
+    setDialogQueue({
+      id: v4(),
+      ...options,
+    });
+  };
+
+  return { closeDialog, enqueueDialog };
+};

packages/twenty-front/src/modules/ui/feedback/dialog-manager/scopes/DialogManagerScope.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+
+import { DialogManagerScopeInternalContext } from './scope-internal-context/DialogManagerScopeInternalContext';
+
+type DialogManagerScopeProps = {
+  children: ReactNode;
+  dialogManagerScopeId: string;
+};
+
+export const DialogManagerScope = ({
+  children,
+  dialogManagerScopeId,
+}: DialogManagerScopeProps) => {
+  return (
+    <DialogManagerScopeInternalContext.Provider
+      value={{
+        scopeId: dialogManagerScopeId,
+      }}
+    >
+      {children}
+    </DialogManagerScopeInternalContext.Provider>
+  );
+};

packages/twenty-front/src/modules/ui/feedback/dialog-manager/scopes/scope-internal-context/DialogManagerScopeInternalContext.ts

@@ -0,0 +1,7 @@
+import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
+import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
+
+type DialogManagerScopeInternalContextProps = ScopedStateKey;
+
+export const DialogManagerScopeInternalContext =
+  createScopeInternalContext<DialogManagerScopeInternalContextProps>();

packages/twenty-front/src/modules/ui/feedback/dialog-manager/states/dialogInternalScopedState.ts

@@ -0,0 +1,16 @@
+import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+
+import { DialogOptions } from '../types/DialogOptions';
+
+type DialogState = {
+  maxQueue: number;
+  queue: DialogOptions[];
+};
+
+export const dialogInternalScopedState = createScopedState<DialogState>({
+  key: 'dialog/internal-state',
+  defaultValue: {
+    maxQueue: 2,
+    queue: [],
+  },
+});

packages/twenty-front/src/modules/ui/feedback/dialog-manager/types/DialogHotkeyScope.ts

@@ -0,0 +1,3 @@
+export enum DialogHotkeyScope {
+  Dialog = 'dialog',
+}

packages/twenty-front/src/modules/ui/feedback/dialog-manager/types/DialogOptions.ts

@@ -0,0 +1,5 @@
+import { DialogProps } from '../components/Dialog';
+
+export type DialogOptions = DialogProps & {
+  id: string;
+};