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>(
+  // controlled stepper state
-    document.status === DocumentStatus.DRAFT ? 'title' : 'signers',
+  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> = {
+  // controlled stepper next
-    title: {
+  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();
-
+      nextStep();
-      setStep('fields');
     } catch (err) {
       console.error(err);
 
@@ -138,8 +135,7 @@ export const EditDocumentForm = ({
       });
 
       router.refresh();
-
+      nextStep();
-      setStep('subject');
     } 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}
           />
-
+          <Stepper currentStep={stepIdx + 1} setCurrentStep={(step) => setStepIdx(step - 1)}>
-          {step === 'title' && (
             <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>

packages/ui/primitives/document-flow/add-fields.tsx

@@ -11,7 +11,8 @@ import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-c
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { nanoid } from '@documenso/lib/universal/id';
-import { Field, FieldType, Recipient, SendStatus } from '@documenso/prisma/client';
+import type { Field, Recipient } from '@documenso/prisma/client';
+import { FieldType, SendStatus } from '@documenso/prisma/client';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -25,7 +26,8 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
-import { TAddFieldsFormSchema } from './add-fields.types';
+import type { WithStep } from '../stepper';
+import type { TAddFieldsFormSchema } from './add-fields.types';
 import {
   DocumentFlowFormContainerActions,
   DocumentFlowFormContainerContent,
@@ -33,7 +35,8 @@ import {
   DocumentFlowFormContainerStep,
 } from './document-flow-root';
 import { FieldItem } from './field-item';
-import { DocumentFlowStep, FRIENDLY_FIELD_TYPE } from './types';
+import type { DocumentFlowStep } from './types';
+import { FRIENDLY_FIELD_TYPE } from './types';
 
 const fontCaveat = Caveat({
   weight: ['500'],
@@ -53,7 +56,6 @@ export type AddFieldsFormProps = {
   hideRecipients?: boolean;
   recipients: Recipient[];
   fields: Field[];
-  numberOfSteps: number;
   onSubmit: (_data: TAddFieldsFormSchema) => void;
 };
 
@@ -62,10 +64,11 @@ export const AddFieldsFormPartial = ({
   hideRecipients = false,
   recipients,
   fields,
-  numberOfSteps,
   onSubmit,
-}: AddFieldsFormProps) => {
+  useStep, // Stepper
+}: WithStep<AddFieldsFormProps>) => {
   const { isWithinPageBounds, getFieldPosition, getPage } = useDocumentElement();
+  const { currentStep, totalSteps, nextStep, previousStep } = useStep();
 
   const {
     control,
@@ -513,15 +516,15 @@ export const AddFieldsFormPartial = ({
       <DocumentFlowFormContainerFooter>
         <DocumentFlowFormContainerStep
           title={documentFlow.title}
-          step={documentFlow.stepIndex}
+          step={currentStep}
-          maxStep={numberOfSteps}
+          maxStep={totalSteps}
         />
 
         <DocumentFlowFormContainerActions
           loading={isSubmitting}
           disabled={isSubmitting}
           onGoBackClick={() => {
-            documentFlow.onBackStep?.();
+            previousStep();
             remove();
           }}
           onGoNextClick={() => void onFormSubmit()}

packages/ui/primitives/document-flow/add-signers.tsx

@@ -9,45 +9,49 @@ import { Controller, useFieldArray, useForm } from 'react-hook-form';
 
 import { useLimits } from '@documenso/ee/server-only/limits/provider/client';
 import { nanoid } from '@documenso/lib/universal/id';
-import { DocumentStatus, Field, Recipient, SendStatus } from '@documenso/prisma/client';
+import type { Field, Recipient } from '@documenso/prisma/client';
-import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
+import { DocumentStatus, SendStatus } from '@documenso/prisma/client';
+import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { Button } from '@documenso/ui/primitives/button';
 import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { TAddSignersFormSchema, ZAddSignersFormSchema } from './add-signers.types';
+import type { WithStep } from '../stepper';
+import type { TAddSignersFormSchema } from './add-signers.types';
+import { ZAddSignersFormSchema } from './add-signers.types';
 import {
   DocumentFlowFormContainerActions,
   DocumentFlowFormContainerContent,
   DocumentFlowFormContainerFooter,
   DocumentFlowFormContainerStep,
 } from './document-flow-root';
-import { DocumentFlowStep } from './types';
+import type { DocumentFlowStep } from './types';
 
 export type AddSignersFormProps = {
   documentFlow: DocumentFlowStep;
   recipients: Recipient[];
   fields: Field[];
   document: DocumentWithData;
-  numberOfSteps: number;
   onSubmit: (_data: TAddSignersFormSchema) => void;
 };
 
 export const AddSignersFormPartial = ({
   documentFlow,
-  numberOfSteps,
   recipients,
   document,
   fields: _fields,
   onSubmit,
-}: AddSignersFormProps) => {
+  useStep, // Stepper
+}: WithStep<AddSignersFormProps>) => {
   const { toast } = useToast();
   const { remaining } = useLimits();
 
   const initialId = useId();
 
+  const { currentStep, totalSteps, nextStep, previousStep } = useStep();
+
   const {
     control,
     handleSubmit,
@@ -221,15 +225,15 @@ export const AddSignersFormPartial = ({
       <DocumentFlowFormContainerFooter>
         <DocumentFlowFormContainerStep
           title={documentFlow.title}
-          step={documentFlow.stepIndex}
+          step={currentStep}
-          maxStep={numberOfSteps}
+          maxStep={totalSteps}
         />
 
         <DocumentFlowFormContainerActions
           canGoBack={document.status === DocumentStatus.DRAFT}
           loading={isSubmitting}
           disabled={isSubmitting}
-          onGoBackClick={documentFlow.onBackStep}
+          onGoBackClick={previousStep}
           onGoNextClick={() => void onFormSubmit()}
         />
       </DocumentFlowFormContainerFooter>

packages/ui/primitives/document-flow/add-subject.tsx

@@ -2,28 +2,29 @@
 
 import { useForm } from 'react-hook-form';
 
-import { DocumentStatus, Field, Recipient } from '@documenso/prisma/client';
+import type { Field, Recipient } from '@documenso/prisma/client';
-import { DocumentWithData } from '@documenso/prisma/types/document-with-data';
+import { DocumentStatus } from '@documenso/prisma/client';
+import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-message';
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 import { Textarea } from '@documenso/ui/primitives/textarea';
 
-import { TAddSubjectFormSchema } from './add-subject.types';
+import type { WithStep } from '../stepper';
+import type { TAddSubjectFormSchema } from './add-subject.types';
 import {
   DocumentFlowFormContainerActions,
   DocumentFlowFormContainerContent,
   DocumentFlowFormContainerFooter,
   DocumentFlowFormContainerStep,
 } from './document-flow-root';
-import { DocumentFlowStep } from './types';
+import type { DocumentFlowStep } from './types';
 
 export type AddSubjectFormProps = {
   documentFlow: DocumentFlowStep;
   recipients: Recipient[];
   fields: Field[];
   document: DocumentWithData;
-  numberOfSteps: number;
   onSubmit: (_data: TAddSubjectFormSchema) => void;
 };
 
@@ -32,9 +33,9 @@ export const AddSubjectFormPartial = ({
   recipients: _recipients,
   fields: _fields,
   document,
-  numberOfSteps,
   onSubmit,
-}: AddSubjectFormProps) => {
+  useStep,
+}: WithStep<AddSubjectFormProps>) => {
   const {
     register,
     handleSubmit,
@@ -49,6 +50,7 @@ export const AddSubjectFormPartial = ({
   });
 
   const onFormSubmit = handleSubmit(onSubmit);
+  const { currentStep, totalSteps, nextStep, previousStep } = useStep();
 
   return (
     <>
@@ -124,15 +126,15 @@ export const AddSubjectFormPartial = ({
       <DocumentFlowFormContainerFooter>
         <DocumentFlowFormContainerStep
           title={documentFlow.title}
-          step={documentFlow.stepIndex}
+          step={currentStep}
-          maxStep={numberOfSteps}
+          maxStep={totalSteps}
         />
 
         <DocumentFlowFormContainerActions
           loading={isSubmitting}
           disabled={isSubmitting}
           goNextLabel={document.status === DocumentStatus.DRAFT ? 'Send' : 'Update'}
-          onGoBackClick={documentFlow.onBackStep}
+          onGoBackClick={previousStep}
           onGoNextClick={() => void onFormSubmit()}
         />
       </DocumentFlowFormContainerFooter>

packages/ui/primitives/document-flow/add-title.tsx

@@ -8,6 +8,7 @@ import { FormErrorMessage } from '@documenso/ui/primitives/form/form-error-messa
 import { Input } from '@documenso/ui/primitives/input';
 import { Label } from '@documenso/ui/primitives/label';
 
+import type { WithStep } from '../stepper';
 import type { TAddTitleFormSchema } from './add-title.types';
 import {
   DocumentFlowFormContainerActions,
@@ -22,7 +23,6 @@ export type AddTitleFormProps = {
   recipients: Recipient[];
   fields: Field[];
   document: DocumentWithData;
-  numberOfSteps: number;
   onSubmit: (_data: TAddTitleFormSchema) => void;
 };
 
@@ -31,9 +31,9 @@ export const AddTitleFormPartial = ({
   recipients: _recipients,
   fields: _fields,
   document,
-  numberOfSteps,
   onSubmit,
-}: AddTitleFormProps) => {
+  useStep,
+}: WithStep<AddTitleFormProps>) => {
   const {
     register,
     handleSubmit,
@@ -46,6 +46,8 @@ export const AddTitleFormPartial = ({
 
   const onFormSubmit = handleSubmit(onSubmit);
 
+  const { stepIndex, currentStep, totalSteps, previousStep } = useStep();
+
   return (
     <>
       <DocumentFlowFormContainerContent>
@@ -72,14 +74,15 @@ export const AddTitleFormPartial = ({
       <DocumentFlowFormContainerFooter>
         <DocumentFlowFormContainerStep
           title={documentFlow.title}
-          step={documentFlow.stepIndex}
+          step={currentStep}
-          maxStep={numberOfSteps}
+          maxStep={totalSteps}
         />
 
         <DocumentFlowFormContainerActions
           loading={isSubmitting}
           disabled={isSubmitting}
-          onGoBackClick={documentFlow.onBackStep}
+          canGoBack={stepIndex !== 0}
+          onGoBackClick={previousStep}
           onGoNextClick={() => void onFormSubmit()}
         />
       </DocumentFlowFormContainerFooter>

packages/ui/primitives/document-flow/document-flow-root.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import React, { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
+import React from 'react';
 
 import { motion } from 'framer-motion';
 

packages/ui/primitives/document-flow/types.ts

@@ -53,7 +53,7 @@ export const FRIENDLY_FIELD_TYPE: Record<FieldType, string> = {
 export interface DocumentFlowStep {
   title: string;
   description: string;
-  stepIndex: number;
+  stepIndex?: number;
   onBackStep?: () => unknown;
   onNextStep?: () => unknown;
 }