update modals to use pushmodal

apps/dashboard/package.json

@@ -71,6 +71,7 @@
     "next-themes": "^0.2.1",
     "nuqs": "^1.16.1",
     "prisma-error-enum": "^0.1.3",
+    "pushmodal": "^0.0.7",
     "ramda": "^0.29.1",
     "random-animal-name": "^0.1.1",
     "react": "18.2.0",

apps/dashboard/src/components/ui/dialog.tsx

@@ -20,7 +20,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      'fixed inset-0 z-50 bg-black/20 backdrop-blur-[1px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
@@ -39,19 +39,12 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close
-        onClick={onClose}
-        className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
-      >
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
 ));

apps/dashboard/src/modals/AddClient.tsx

@@ -11,8 +11,7 @@ import { useAppParams } from '@/hooks/useAppParams';
 import { api, handleError } from '@/trpc/client';
 import { cn } from '@/utils/cn';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { SaveIcon, WallpaperIcon } from 'lucide-react';
+import { SaveIcon } from 'lucide-react';
-import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import type { SubmitHandler } from 'react-hook-form';
 import { Controller, useForm } from 'react-hook-form';

apps/dashboard/src/modals/AddDashboard.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { ButtonContainer } from '@/components/button-container';
 import { InputWithLabel } from '@/components/forms/input-with-label';
 import { Button } from '@/components/ui/button';

apps/dashboard/src/modals/AddProject.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { ButtonContainer } from '@/components/button-container';
 import { InputWithLabel } from '@/components/forms/input-with-label';
 import { Button } from '@/components/ui/button';

apps/dashboard/src/modals/AddReference.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { ButtonContainer } from '@/components/button-container';
 import { InputWithLabel } from '@/components/forms/input-with-label';
 import { Button } from '@/components/ui/button';

apps/dashboard/src/modals/Confirm.tsx

@@ -1,17 +1,15 @@
-'use client';
-
 import { ButtonContainer } from '@/components/button-container';
 import { Button } from '@/components/ui/button';
 
 import { popModal } from '.';
 import { ModalContent, ModalHeader } from './Modal/Container';
 
-export interface ConfirmProps {
+export type ConfirmProps = {
   title: string;
   text: string;
   onConfirm: () => void;
   onCancel?: () => void;
-}
+};
 
 export default function Confirm({
   title,

apps/dashboard/src/modals/EditClient.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { ButtonContainer } from '@/components/button-container';
 import { InputWithLabel } from '@/components/forms/input-with-label';
 import { Button } from '@/components/ui/button';

apps/dashboard/src/modals/EditDashboard.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { ButtonContainer } from '@/components/button-container';
 import { InputWithLabel } from '@/components/forms/input-with-label';
 import { Button } from '@/components/ui/button';

apps/dashboard/src/modals/EditProject.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { ButtonContainer } from '@/components/button-container';
 import { InputWithLabel } from '@/components/forms/input-with-label';
 import { Button } from '@/components/ui/button';

apps/dashboard/src/modals/EditReport.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { ButtonContainer } from '@/components/button-container';
 import { InputWithLabel } from '@/components/forms/input-with-label';
 import { Button } from '@/components/ui/button';
@@ -17,10 +15,10 @@ const validator = z.object({
 
 type IForm = z.infer<typeof validator>;
 
-interface EditReportProps {
+type EditReportProps = {
   form: IForm;
   onSubmit: SubmitHandler<IForm>;
-}
+};
 
 export default function EditReport({ form, onSubmit }: EditReportProps) {
   const { register, handleSubmit, reset, formState } = useForm<IForm>({

apps/dashboard/src/modals/Modal/Container.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Button } from '@/components/ui/button';
+import { DialogContent } from '@/components/ui/dialog';
 import { X } from 'lucide-react';
 
 import { popModal } from '..';
@@ -10,11 +11,7 @@ interface ModalContentProps {
 }
 
 export function ModalContent({ children }: ModalContentProps) {
-  return (
+  return <DialogContent>{children}</DialogContent>;
-    <div className="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background p-6 shadow-lg duration-200  sm:rounded-lg md:w-full">
-      {children}
-    </div>
-  );
 }
 
 interface ModalHeaderProps {

apps/dashboard/src/modals/SaveReport.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { ButtonContainer } from '@/components/button-container';
 import { InputWithLabel } from '@/components/forms/input-with-label';
 import { Button } from '@/components/ui/button';
@@ -18,10 +16,10 @@ import type { IChartInput } from '@openpanel/validation';
 import { popModal } from '.';
 import { ModalContent, ModalHeader } from './Modal/Container';
 
-interface SaveReportProps {
+type SaveReportProps = {
   report: IChartInput;
   reportId?: string;
-}
+};
 
 const validator = z.object({
   name: z.string().min(1, 'Required'),
@@ -74,7 +72,6 @@ export default function SaveReport({ report }: SaveReportProps) {
   const dashboardQuery = api.dashboard.list.useQuery({
     projectId,
   });
-
   const dashboards = (dashboardQuery.data ?? []).map((item) => ({
     value: item.id,
     label: item.name,

apps/dashboard/src/modals/ShareOverviewModal.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { ButtonContainer } from '@/components/button-container';
 import { InputWithLabel } from '@/components/forms/input-with-label';
 import { Button } from '@/components/ui/button';

apps/dashboard/src/modals/index.tsx

@@ -1,18 +1,12 @@
 'use client';
 
-import { Suspense, useEffect, useRef, useState } from 'react';
 import { Loader } from 'lucide-react';
-import mitt from 'mitt';
 import dynamic from 'next/dynamic';
-import { useOnClickOutside } from 'usehooks-ts';
+import { createPushModal } from 'pushmodal';
 
 import type { ConfirmProps } from './Confirm';
 
-const Loading = () => (
+const Loading = () => <Loader className="mb-8 animate-spin" size={40} />;
-  <div className="bg-backdrop fixed left-0 top-0 z-50 flex h-screen w-screen items-center justify-center overflow-auto">
-    <Loader className="mb-8 animate-spin" size={40} />
-  </div>
-);
 
 const modals = {
   EditProject: dynamic(() => import('./EditProject'), {
@@ -50,175 +44,9 @@ const modals = {
   }),
 };
 
-const emitter = mitt<{
+export const { pushModal, popModal, popAllModals, ModalProvider } =
-  push: {
+  createPushModal({
-    name: ModalRoutes;
+    modals,
-    props: Record<string, unknown>;
-  };
-  replace: {
-    name: ModalRoutes;
-    props: Record<string, unknown>;
-  };
-  pop: { name?: ModalRoutes };
-  unshift: { name: ModalRoutes };
-}>();
-
-type ModalRoutes = keyof typeof modals;
-
-interface StateItem {
-  key: string;
-  name: ModalRoutes;
-  props: Record<string, unknown>;
-}
-
-interface ModalWrapperProps {
-  children: React.ReactNode;
-  name?: ModalRoutes;
-  isOnTop?: boolean;
-}
-
-export function ModalWrapper({ children, name, isOnTop }: ModalWrapperProps) {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useOnClickOutside(ref, (event) => {
-    const target = event.target as HTMLElement;
-    const isPortal =
-      typeof target.closest === 'function'
-        ? !!target.closest('[data-radix-popper-content-wrapper]')
-        : false;
-
-    if (isOnTop && !isPortal && name) {
-      emitter.emit('pop', {
-        name,
-      });
-    }
-  });
-
-  return (
-    <div className="fixed top-0 z-50 flex h-screen w-screen items-center justify-center overflow-auto">
-      <div ref={ref} className="w-inherit m-auto py-4">
-        <Suspense>{children}</Suspense>
-      </div>
-    </div>
-  );
-}
-
-export function ModalProvider() {
-  const [state, setState] = useState<StateItem[]>([]);
-
-  useEffect(() => {
-    document.addEventListener('keydown', (event) => {
-      if (event.key === 'Escape' && state.length > 0) {
-        setState((p) => {
-          p.pop();
-          return [...p];
-        });
-      }
-    });
-  }, [state]);
-
-  useEffect(() => {
-    emitter.on('push', ({ name, props }) => {
-      setState((p) => [
-        ...p,
-        {
-          key: Math.random().toString(),
-          name,
-          props,
-        },
-      ]);
-    });
-
-    emitter.on('replace', ({ name, props }) => {
-      setState([
-        {
-          key: Math.random().toString(),
-          name,
-          props,
-        },
-      ]);
-    });
-
-    emitter.on('pop', ({ name }) => {
-      setState((items) => {
-        const match =
-          name === undefined
-            ? // Pick last item if no name is provided
-              items.length - 1
-            : items.findLastIndex((item) => item.name === name);
-        return items.filter((_, index) => index !== match);
-      });
-    });
-
-    emitter.on('unshift', ({ name }) => {
-      setState((items) => {
-        const match = items.findIndex((item) => item.name === name);
-        return items.filter((_, index) => index !== match);
-      });
-    });
-
-    return () => emitter.all.clear();
-  });
-  return (
-    <>
-      {!!state.length && (
-        <div className="fixed bottom-0 left-0 right-0 top-0 z-50 bg-[rgba(0,0,0,0.2)]"></div>
-      )}
-      {state.map((item, index) => {
-        const Modal = modals[item.name];
-        return (
-          <ModalWrapper
-            key={item.key}
-            name={item.name}
-            isOnTop={state.length - 1 === index}
-          >
-            {/* @ts-expect-error */}
-            <Modal {...item.props} />
-          </ModalWrapper>
-        );
-      })}
-    </>
-  );
-}
-
-type GetComponentProps<T> = T extends
-  | React.ComponentType<infer P>
-  | React.Component<infer P>
-  ? P
-  : never;
-type OrUndefined<T> = T extends Record<string, never> ? undefined : T;
-
-export const pushModal = <
-  T extends StateItem['name'],
-  B extends OrUndefined<GetComponentProps<(typeof modals)[T]>>,
->(
-  name: T,
-  ...rest: B extends undefined ? [] : [B]
-) =>
-  emitter.emit('push', {
-    name,
-    // @ts-expect-error
-    props: Array.isArray(rest) && rest[0] ? rest[0] : {},
-  });
-export const replaceModal = <
-  T extends StateItem['name'],
-  B extends OrUndefined<GetComponentProps<(typeof modals)[T]>>,
->(
-  name: T,
-  ...rest: B extends undefined ? [] : [B]
-) =>
-  emitter.emit('replace', {
-    name,
-    // @ts-expect-error
-    props: Array.isArray(rest) && rest[0] ? rest[0] : {},
-  });
-export const popModal = (name?: StateItem['name']) =>
-  emitter.emit('pop', {
-    name,
-  });
-export const unshiftModal = (name: StateItem['name']) =>
-  emitter.emit('unshift', {
-    name,
   });
 
 export const showConfirm = (props: ConfirmProps) => pushModal('Confirm', props);

tooling/eslint/base.js

@@ -40,6 +40,8 @@ const config = {
     '@typescript-eslint/no-unsafe-member-access': 'warn',
     '@typescript-eslint/no-unsafe-argument': 'warn',
     '@typescript-eslint/prefer-nullish-coalescing': 'off',
+    '@typescript-eslint/prefer-interface': 'off',
+    '@typescript-eslint/consistent-type-definitions': 'off',
   },
   ignorePatterns: [
     '**/.eslintrc.cjs',