feat: stepper refactor example

apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx

@@ -5,7 +5,6 @@ import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 
 import type { DocumentData, Field, Recipient, User } from '@documenso/prisma/client';
-import { DocumentStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { trpc } from '@documenso/trpc/react';
 import { cn } from '@documenso/ui/lib/utils';
@@ -24,6 +23,7 @@ import {
 } from '@documenso/ui/primitives/document-flow/document-flow-root';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
+import { Stepper } from '@documenso/ui/primitives/stepper';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type EditDocumentFormProps = {
@@ -35,7 +35,12 @@ export type EditDocumentFormProps = {
   documentData: DocumentData;
 };
 
-type EditDocumentStep = 'title' | 'signers' | 'fields' | 'subject';
+enum EditDocumentStepEnum {
+  TITLE,
+  SIGNERS,
+  FIELDS,
+  SUBJECT,
+}
 
 export const EditDocumentForm = ({
   className,
@@ -48,42 +53,35 @@ export const EditDocumentForm = ({
   const { toast } = useToast();
   const router = useRouter();
 
-  const [step, setStep] = useState<EditDocumentStep>(
-    document.status === DocumentStatus.DRAFT ? 'title' : 'signers',
-  );
+  // controlled stepper state
+  const [stepIdx, setStepIdx] = useState<EditDocumentStepEnum>(0);
 
   const { mutateAsync: addTitle } = trpc.document.setTitleForDocument.useMutation();
   const { mutateAsync: addFields } = trpc.field.addFields.useMutation();
   const { mutateAsync: addSigners } = trpc.recipient.addSigners.useMutation();
   const { mutateAsync: sendDocument } = trpc.document.sendDocument.useMutation();
 
-  const documentFlow: Record<EditDocumentStep, DocumentFlowStep> = {
-    title: {
+  // controlled stepper next
+  const nextStep = () => setStepIdx(stepIdx + 1);
+
+  const documentFlow: DocumentFlowStep[] = [
+    {
       title: 'Add Title',
       description: 'Add the title to the document.',
-      stepIndex: 1,
     },
-    signers: {
+    {
       title: 'Add Signers',
       description: 'Add the people who will sign the document.',
-      stepIndex: 2,
-      onBackStep: () => document.status === DocumentStatus.DRAFT && setStep('title'),
     },
-    fields: {
+    {
       title: 'Add Fields',
       description: 'Add all relevant fields for each recipient.',
-      stepIndex: 3,
-      onBackStep: () => setStep('signers'),
     },
-    subject: {
+    {
       title: 'Add Subject',
       description: 'Add the subject and message you wish to send to signers.',
-      stepIndex: 4,
-      onBackStep: () => setStep('fields'),
     },
-  };
-
-  const currentDocumentFlow = documentFlow[step];
+  ];
 
   const onAddTitleFormSubmit = async (data: TAddTitleFormSchema) => {
     try {
@@ -95,7 +93,7 @@ export const EditDocumentForm = ({
 
       router.refresh();
 
-      setStep('signers');
+      nextStep();
     } catch (err) {
       console.error(err);
 
@@ -116,8 +114,7 @@ export const EditDocumentForm = ({
       });
 
       router.refresh();
-
-      setStep('fields');
+      nextStep();
     } catch (err) {
       console.error(err);
 
@@ -138,8 +135,7 @@ export const EditDocumentForm = ({
       });
 
       router.refresh();
-
-      setStep('subject');
+      nextStep();
     } catch (err) {
       console.error(err);
 
@@ -181,6 +177,8 @@ export const EditDocumentForm = ({
     }
   };
 
+  const currentDocumentFlow = documentFlow[stepIdx];
+
   return (
     <div className={cn('grid w-full grid-cols-12 gap-8', className)}>
       <Card
@@ -201,52 +199,39 @@ export const EditDocumentForm = ({
             title={currentDocumentFlow.title}
             description={currentDocumentFlow.description}
           />
-
-          {step === 'title' && (
+          <Stepper currentStep={stepIdx + 1} setCurrentStep={(step) => setStepIdx(step - 1)}>
             <AddTitleFormPartial
               key={recipients.length}
-              documentFlow={documentFlow.title}
+              documentFlow={documentFlow[EditDocumentStepEnum.TITLE]}
               recipients={recipients}
               fields={fields}
               document={document}
-              numberOfSteps={Object.keys(documentFlow).length}
               onSubmit={onAddTitleFormSubmit}
             />
-          )}
-
-          {step === 'signers' && (
             <AddSignersFormPartial
               key={recipients.length}
-              documentFlow={documentFlow.signers}
+              documentFlow={documentFlow[EditDocumentStepEnum.SIGNERS]}
               document={document}
               recipients={recipients}
               fields={fields}
-              numberOfSteps={Object.keys(documentFlow).length}
               onSubmit={onAddSignersFormSubmit}
             />
-          )}
-
-          {step === 'fields' && (
             <AddFieldsFormPartial
               key={fields.length}
-              documentFlow={documentFlow.fields}
+              documentFlow={documentFlow[EditDocumentStepEnum.FIELDS]}
               recipients={recipients}
               fields={fields}
-              numberOfSteps={Object.keys(documentFlow).length}
               onSubmit={onAddFieldsFormSubmit}
             />
-          )}
-
-          {step === 'subject' && (
             <AddSubjectFormPartial
-              documentFlow={documentFlow.subject}
+              key={recipients.length}
+              documentFlow={documentFlow[EditDocumentStepEnum.SUBJECT]}
               document={document}
               recipients={recipients}
               fields={fields}
-              numberOfSteps={Object.keys(documentFlow).length}
               onSubmit={onAddSubjectFormSubmit}
             />
-          )}
+          </Stepper>
         </DocumentFlowFormContainer>
       </div>
     </div>