@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/modals/components/ModalStepper.tsx

@@ -0,0 +1,319 @@
+'use client';
+
+import React, {useEffect, useRef, useState} from 'react';
+import {
+    Stepper,
+    StepperContent,
+    StepperIndicator,
+    StepperItem,
+    StepperNav,
+    StepperPanel,
+    StepperSeparator,
+    StepperTrigger,
+} from '../../reui/stepper';
+import {useModal} from '../hooks/useModal';
+import {Button} from '../../ui/button';
+import {SizeEnum} from '../../size.enum';
+import {ObjectableType} from "../../../domain/entities/objectable.type";
+import {ModalOptions} from "../types/modal.type";
+import {toast} from 'sonner';
+import {useUploadStore} from "../../../infrastructure/stores/upload.store";
+import {UploadProgressDialog} from "../../components/upload-progress-dialog";
+
+
+export interface ModalStepperStep<T extends ObjectableType = any> {
+    id: string | number;
+    title: string;
+    description?: string;
+    required?: boolean;
+    content: React.ReactNode | ((props: {
+        next: () => void;
+        prev: () => void;
+        data: Partial<T>;
+        updateData: (newData: any) => void
+    }) => React.ReactNode);
+    validation?: (data: Partial<T>, updateData: (data: Partial<T>) => void) => Promise<number | string | { step: number | string; lockNavigation?: boolean } | void>;
+}
+
+interface ModalStepperStageProps<T extends ObjectableType = any> {
+    data: Partial<T>;
+    index: number;
+    id: string;
+}
+
+export interface ModalStepperAction {
+    label?: string;
+    hide?: boolean;
+}
+
+export interface ModalStepperActions {
+    cancel?: ModalStepperAction;
+    next?: ModalStepperAction;
+    previous?: ModalStepperAction;
+    done?: ModalStepperAction;
+}
+
+interface ModalStepperProps<T extends ObjectableType = any> {
+    steps: ModalStepperStep<T>[];
+    title?: string;
+    initialData?: Partial<T>;
+    setId?: () => string;
+    onStep?: (props: ModalStepperStageProps<T>) => void;
+    onEnd?: (props: ModalStepperStageProps<T>) => Promise<void> | void;
+    onCancel?: () => void;
+    actions?: ModalStepperActions;
+}
+
+type ModalStepperResult<T extends ObjectableType = any> = {
+    result: T | null;
+    id: string;
+}
+
+export function useModalStepper<T extends ObjectableType>(modalProps?: ModalOptions) {
+    const {open, close} = useModal();
+
+    return (props: ModalStepperProps<T>) => {
+        return new Promise<ModalStepperResult<T>>((resolve) => {
+            const id = open(
+                ModalStepperContent,
+                {
+                    ...props,
+                    setId: () => id,
+                    onStep: (stage: ModalStepperStageProps<T>) => {
+                        if (props.onStep) props.onStep({...stage, id: id});
+                    },
+                    onEnd: async (stage: ModalStepperStageProps<T>) => {
+                        try {
+                            await props.onEnd?.({...stage, id: id});
+                            resolve({id: id, result: stage.data as T});
+                            close(id);
+                        } catch (error) {
+                            throw error;
+                        }
+                    },
+                    onCancel: () => {
+                        resolve({id: id, result: null});
+                        if (props.onCancel) props.onCancel();
+                        close(id)
+                    },
+                },
+                {
+                    title: props.title,
+                    size: 'LG',
+                    ...(modalProps || {}),
+                    scrollable: false,
+                    useHeight: true
+                }
+            );
+        });
+    };
+};
+
+function ModalStepperContent<T extends ObjectableType>(
+    {
+        steps,
+        initialData = {} as T,
+        setId,
+        onStep,
+        onEnd,
+        onCancel,
+        actions,
+    }: ModalStepperProps<T>
+) {
+    const [activeStep, setActiveStep] = useState(1);
+    const [isLocked, setIsLocked] = useState(false);
+    const [data, setData] = useState<Partial<T>>(initialData);
+    const [showUploadDialog, setShowUploadDialog] = useState(false);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const stepperScrollRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (stepperScrollRef.current) {
+            const activeItem = stepperScrollRef.current.querySelector<HTMLElement>('[data-state="active"]');
+            if (activeItem) {
+                activeItem.scrollIntoView({behavior: 'smooth', block: 'nearest', inline: 'center'});
+            }
+        }
+    }, [activeStep]);
+
+    const modalId: string = typeof setId == 'function' ? setId() : Math.random().toString(36).substring(2, 9);
+    const updateData = (newData: Partial<T>) => {
+        setData((prev: Partial<T>) => ({...prev, ...newData}));
+    };
+
+    const validateStep = () => {
+        const currentStep = steps[activeStep - 1];
+        if (!currentStep.required) return true;
+
+        if (containerRef.current) {
+            const inputs = containerRef.current.querySelectorAll('input, select, textarea');
+            let isAllValid = true;
+
+            inputs.forEach((input: any) => {
+                if (input.required || input.pattern) {
+                    if (!input.checkValidity()) {
+                        input.reportValidity();
+                        isAllValid = false;
+                    }
+                }
+            });
+
+            return isAllValid;
+        }
+
+        return true;
+    };
+
+    const resolveTargetStep = (target: number | string | { step: number | string; lockNavigation?: boolean }): { stepIndex: number; lock?: boolean } => {
+        if (typeof target === 'number') return { stepIndex: Math.max(1, Math.min(target, steps.length)) };
+        if (typeof target === 'string') {
+            const found = steps.findIndex(s => s.id === target);
+            return { stepIndex: found !== -1 ? found + 1 : activeStep };
+        }
+        const { step, lockNavigation } = target;
+        if (typeof step === 'number') return { stepIndex: Math.max(1, Math.min(step, steps.length)), lock: lockNavigation };
+        const found = steps.findIndex(s => s.id === step);
+        return { stepIndex: found !== -1 ? found + 1 : activeStep, lock: lockNavigation };
+    };
+
+    const handleNext = async () => {
+        if (!validateStep()) return;
+
+        const currentStep = steps[activeStep - 1];
+        if (currentStep.validation) {
+            try {
+                const result = await currentStep.validation(data, updateData);
+                if (result !== undefined) {
+                    const { stepIndex, lock } = resolveTargetStep(result as any);
+                    if (lock) setIsLocked(true);
+                    index = stepIndex;
+                    onStep?.({data, index, id: modalId});
+                    setActiveStep(stepIndex);
+                    return;
+                }
+            } catch (error) {
+                toast.error(error instanceof Error ? error.message : 'Validation échouée');
+                return;
+            }
+        }
+
+        if (activeStep < steps.length) {
+            index = activeStep + 1;
+            onStep?.({data, index, id: modalId});
+            setActiveStep(index);
+        } else {
+            index = steps.length;
+            await finish();
+        }
+    };
+
+    const finish = async () => {
+        const hasActiveUploads = useUploadStore.getState().hasActiveUploads;
+        if (hasActiveUploads) {
+            setShowUploadDialog(true);
+            return;
+        }
+        try {
+            await onEnd?.({data, index: steps.length, id: modalId});
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Une erreur est survenue');
+            return;
+        }
+    };
+
+    const handleFinishAfterUploads = () => {
+        setShowUploadDialog(false);
+        void finish();
+    };
+
+    const handlePrev = () => {
+        if (isLocked) return;
+        if (activeStep > 1) {
+            index = activeStep - 1;
+            onStep?.({data, index, id: modalId});
+            setActiveStep(index);
+        }
+    };
+
+    const handleCancel = () => {
+        onCancel?.();
+    };
+
+    const isHiddenAction = (action: keyof ModalStepperActions) =>
+        typeof actions?.[action]?.hide !== 'boolean' || (typeof actions?.[action]?.hide === 'boolean' && !actions?.[action]?.hide);
+
+    let index = 0;
+
+    return (
+        <div className="flex flex-col w-full h-full min-h-[400px]" ref={containerRef}>
+            <div className="flex-auto overflow-hidden">
+                <Stepper value={activeStep} onValueChange={isLocked ? undefined : setActiveStep} className="space-y-8 w-full h-full ">
+                    <div ref={stepperScrollRef}
+                         className="overflow-x-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
+                        <StepperNav className="w-max p-4">
+                            {steps.map((step, index) => {
+                                const stepNumber = index + 1;
+                                return (
+                                    <StepperItem key={step.id} step={stepNumber}>
+                                        <StepperTrigger className="min-w-[200px]">
+                                            <StepperIndicator>{stepNumber}</StepperIndicator>
+                                            <div className="flex flex-col text-left ml-2">
+                                                <span className="text-sm font-medium">{step.title}</span>
+                                                {step.description && (
+                                                    <span
+                                                        className="text-xs text-muted-foreground">{step.description}</span>
+                                                )}
+                                            </div>
+                                        </StepperTrigger>
+                                        {index < steps.length - 1 && <StepperSeparator/>}
+                                    </StepperItem>
+                                );
+                            })}
+                        </StepperNav>
+                    </div>
+
+                    <StepperPanel className="mt-8 w-full h-full overflow-y-auto p-4">
+                        {steps.map((step, index) => {
+                            const stepNumber = index + 1;
+                            return (
+                                <StepperContent key={step.id} value={stepNumber} className={""}>
+                                    <div className="py-4">
+                                        {typeof step.content === 'function'
+                                            ? step.content({next: handleNext, prev: handlePrev, data: data, updateData})
+                                            : step.content}
+                                    </div>
+                                </StepperContent>
+                            );
+                        })}
+                    </StepperPanel>
+                </Stepper>
+            </div>
+
+            <div className=" flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end">
+                {isHiddenAction('cancel') && (
+                    <Button variant="outline" onClick={handleCancel}>
+                        {actions?.cancel?.label || 'Quitter'}
+                    </Button>
+                )}
+                <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+                    {isHiddenAction('previous') && (!isLocked && activeStep > 1 && (
+                        <Button variant="outline" onClick={handlePrev}>
+                            Précédent
+                        </Button>
+                    ))}
+                    {isHiddenAction('previous') && (
+                        <Button onClick={handleNext}>
+                            {activeStep === steps.length ? 'Terminer' : 'Suivant'}
+                        </Button>
+                    )}
+                </div>
+            </div>
+
+            <UploadProgressDialog
+                open={showUploadDialog}
+                onOpenChange={setShowUploadDialog}
+                onAllComplete={handleFinishAfterUploads}
+            />
+        </div>
+    );
+};

package/src/presentation/modals/components/ModalWrapper.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { DismissableLayer } from 'radix-ui/internal';
+import { useModalStore } from '../stores/useModalStore';
+import { ModalInstance } from '../types/modal.type';
+import ModalBox from './ModalBox';
+import { cn } from "../../../infrastructure/utilities/utils";
+
+interface ModalWrapperProps {
+  modal: ModalInstance;
+  index: number;
+  isLast: boolean;
+}
+
+const ModalWrapper = ({ modal, isLast }: ModalWrapperProps) => {
+  const closeModal = useModalStore((state) => state.closeModal);
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    const isLocked = modal.options?.locked === true;
+    if (e.target === e.currentTarget && !isLocked) closeModal(modal.id);
+  };
+
+  const stackStyle = useMemo(() => {
+    return {
+      backgroundColor: modal.options?.backColor,
+    };
+  }, [modal.options?.backColor]);
+
+  const isClosing = modal.options?.isClosing;
+  const isLocked = modal.options?.locked === true;
+
+  // Each modal is portaled directly into `document.body` at open time (like any
+  // Radix overlay) and lives in the shared Radix dismissable-layer stack. This
+  // lets components opened afterwards (Sheet, Popover, Select, AlertDialog, ...)
+  // stack above the modal, and ensures Escape / outside interactions only dismiss
+  // the topmost layer instead of closing the modal unintentionally.
+  return createPortal(
+    <DismissableLayer.Root
+      className={cn(
+        "fixed inset-0 z-50 flex items-center justify-center p-4 transition-all duration-300 pointer-events-auto",
+        isLast ? (modal.options?.blurred !== false ? "bg-background/50 backdrop-blur-xl" : "bg-background/80") : "bg-transparent",
+        isClosing && "opacity-0"
+      )}
+      style={stackStyle}
+      onClick={handleOverlayClick}
+      onEscapeKeyDown={() => {
+        if (!isLocked) closeModal(modal.id);
+      }}
+    >
+      <div
+        className={cn(
+          "w-full flex justify-center transition-all duration-300 ease-out",
+          isClosing ? "animate-zoom-out" : "animate-in fade-in zoom-in-95"
+        )}
+      >
+        <ModalBox modal={modal} />
+      </div>
+    </DismissableLayer.Root>,
+    document.body
+  );
+};
+
+export default ModalWrapper;

package/src/presentation/modals/components/index.tsx

@@ -0,0 +1,5 @@
+// @liorian/sdk/presentation/modals/components — modal primitives.
+export { default as ModalBox } from "./ModalBox";
+export { default as ModalPortal } from "./ModalPortal";
+export { default as ModalWrapper } from "./ModalWrapper";
+export * from "./ModalStepper";

package/src/presentation/modals/hooks/index.ts

@@ -0,0 +1,2 @@
+// @liorian/sdk/presentation/modals/hooks
+export * from "./useModal";

package/src/presentation/modals/hooks/useModal.ts

@@ -0,0 +1,38 @@
+import { ReactNode, useCallback } from 'react';
+import { useModalStore } from '../stores/useModalStore';
+import { ModalOptions } from '../types/modal.type';
+
+export const useModal = () => {
+  const openModal = useModalStore((state) => state.openModal);
+  const closeModal = useModalStore((state) => state.closeModal);
+  const closeAllModals = useModalStore((state) => state.closeAllModals);
+  const updateModalOptions = useModalStore((state) => state.updateModalOptions);
+
+  const open = useCallback(
+    (component: ReactNode | ((props: any) => ReactNode), props?: any, options?: ModalOptions) => {
+      return openModal(component, props, options);
+    },
+    [openModal]
+  );
+
+  const close = useCallback(
+    (id: string) => {
+      closeModal(id);
+    },
+    [closeModal]
+  );
+
+  const update = useCallback(
+    (id: string, options: Partial<ModalOptions>) => {
+      updateModalOptions(id, options);
+    },
+    [updateModalOptions]
+  );
+
+  return {
+    open,
+    close,
+    closeAll: closeAllModals,
+    update,
+  };
+};

package/src/presentation/modals/index.tsx

@@ -0,0 +1,5 @@
+// @liorian/sdk/presentation/modals — modal system.
+export * from "./components";
+export * from "./hooks/index";
+export * from "./stores/index";
+export * from "./types/index";

package/src/presentation/modals/stores/index.ts

@@ -0,0 +1,2 @@
+// @liorian/sdk/presentation/modals/stores
+export * from "./useModalStore";

package/src/presentation/modals/stores/useModalStore.ts

@@ -0,0 +1,90 @@
+import { create } from 'zustand';
+import { ModalInstance, ModalOptions, ModalStore } from '../types/modal.type';
+import {SizeEnum} from "../../size.enum";
+
+export const useModalStore = create<ModalStore>((set) => ({
+  modals: [],
+
+  openModal: (component, props = {}, options = {}) => {
+    const id = Math.random().toString(36).substring(2, 9);
+    const newModal: ModalInstance = {
+      id,
+      component,
+      props,
+      options: {
+        closable: true,
+        size: 'MD',
+        ...options,
+      },
+    };
+
+    set((state) => ({
+      modals: [...state.modals, newModal],
+    }));
+
+    return id;
+  },
+
+  closeModal: (id) => {
+    set((state) => {
+      const modalToClose = state.modals.find((m) => m.id === id);
+      if (!modalToClose) return state;
+
+      if (modalToClose.options?.isClosing) return state;
+
+      // Start closing animation
+      setTimeout(() => {
+        set((state) => {
+          const modalStillExists = state.modals.find((m) => m.id === id);
+          if (modalStillExists?.options?.onClose) {
+            modalStillExists.options.onClose();
+          }
+          return {
+            modals: state.modals.filter((m) => m.id !== id),
+          };
+        });
+      }, 300); // match duration-300
+
+      return {
+        modals: state.modals.map((m) =>
+          m.id === id ? { ...m, options: { ...m.options, isClosing: true } } : m
+        ),
+      };
+    });
+  },
+
+  closeAllModals: () => {
+    set((state) => {
+      state.modals.forEach((m) => {
+        if (!m.options?.isClosing) {
+          // On peut soit déclencher l'animation pour tous, soit tout fermer d'un coup.
+          // Pour respecter la demande d'animation, on devrait aussi le faire ici.
+          setTimeout(() => {
+            set((state) => {
+              const modalStillExists = state.modals.find((mod) => mod.id === m.id);
+              if (modalStillExists?.options?.onClose) modalStillExists.options.onClose();
+              return {
+                modals: state.modals.filter((mod) => mod.id !== m.id),
+              };
+            });
+          }, 300);
+        }
+      });
+
+      return {
+        modals: state.modals.map((m) => ({
+          ...m,
+          options: { ...m.options, isClosing: true },
+        })),
+      };
+    });
+  },
+
+  updateModalOptions: (id, options) => {
+    set((state) => ({
+      modals: state.modals.map((m) =>
+        m.id === id ? { ...m, options: { ...m.options, ...options } } : m
+      ),
+    }));
+  },
+}));

package/src/presentation/modals/types/index.ts

@@ -0,0 +1,2 @@
+// @liorian/sdk/presentation/modals/types
+export * from "./modal.type";

package/src/presentation/modals/types/modal.type.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import {SizeEnum} from "../../size.enum";
+
+export interface ModalOptions {
+  title?: ReactNode;
+  description?: ReactNode;
+  size?: keyof typeof SizeEnum;
+  useHeight?: boolean;
+  locked?: boolean;
+  backColor?: string;
+  blurred?: boolean;
+  closable?: boolean;
+  className?: string;
+  isClosing?: boolean;
+  onClose?: () => void;
+  scrollable?: boolean;
+  [key: string]: any; // Pour la personnalisation étendue
+}
+
+export interface ModalInstance {
+  id: string;
+  component: ReactNode | ((props: any) => ReactNode);
+  props?: any;
+  options?: ModalOptions;
+}
+
+export interface ModalStore {
+  modals: ModalInstance[];
+  openModal: (component: ReactNode | ((props: any) => ReactNode), props?: any, options?: ModalOptions) => string;
+  closeModal: (id: string) => void;
+  closeAllModals: () => void;
+  updateModalOptions: (id: string, options: Partial<ModalOptions>) => void;
+}