Merge branch 'main' into refactor-forms

2025-11-13 08:13:56 +10:00 · 2023-12-08 16:31:13 +11:00
parent 369d08ae6e 5e9bc56329
commit bc38009392
91 changed files with 2332 additions and 558 deletions
--- a/packages/ui/components/document/document-download-button.tsx
+++ b/packages/ui/components/document/document-download-button.tsx
@ -7,8 +7,9 @@ import { Download } from 'lucide-react';

 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import type { DocumentData } from '@documenso/prisma/client';
-import { Button } from '@documenso/ui/primitives/button';
-import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { Button } from '../../primitives/button';
+import { useToast } from '../../primitives/use-toast';

 export type DownloadButtonProps = HTMLAttributes<HTMLButtonElement> & {
  disabled?: boolean;
--- a/packages/ui/components/document/document-share-button.tsx
+++ b/packages/ui/components/document/document-share-button.tsx
@ -13,8 +13,9 @@ import {
 } from '@documenso/lib/constants/toast';
 import { generateTwitterIntent } from '@documenso/lib/universal/generate-twitter-intent';
 import { trpc } from '@documenso/trpc/react';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
+
+import { cn } from '../../lib/utils';
+import { Button } from '../../primitives/button';
 import {
  Dialog,
  DialogContent,
@ -22,8 +23,8 @@ import {
  DialogHeader,
  DialogTitle,
  DialogTrigger,
-} from '@documenso/ui/primitives/dialog';
-import { useToast } from '@documenso/ui/primitives/use-toast';
+} from '../../primitives/dialog';
+import { useToast } from '../../primitives/use-toast';

 export type DocumentShareButtonProps = HTMLAttributes<HTMLButtonElement> & {
  token?: string;
--- a/packages/ui/components/field/field-tooltip.tsx
+++ b/packages/ui/components/field/field-tooltip.tsx
@ -1,17 +1,18 @@
 import { TooltipArrow } from '@radix-ui/react-tooltip';
-import { VariantProps, cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
 import { createPortal } from 'react-dom';

 import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
-import { cn } from '@documenso/ui/lib/utils';
+
+import { cn } from '../..//lib/utils';
 import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
-} from '@documenso/ui/primitives/tooltip';
-
-import { Field } from '.prisma/client';
+} from '../..//primitives/tooltip';
+import type { Field } from '.prisma/client';

 const tooltipVariants = cva('font-semibold', {
  variants: {
--- a/packages/ui/components/field/field.tsx
+++ b/packages/ui/components/field/field.tsx
@ -5,9 +5,10 @@ import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';

 import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
-import { Field } from '@documenso/prisma/client';
-import { cn } from '@documenso/ui/lib/utils';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
+import type { Field } from '@documenso/prisma/client';
+
+import { cn } from '../../lib/utils';
+import { Card, CardContent } from '../../primitives/card';

 export type FieldRootContainerProps = {
  field: Field;
--- a/packages/ui/components/signing-card.tsx
+++ b/packages/ui/components/signing-card.tsx
@ -2,14 +2,16 @@

 import { useCallback, useEffect, useRef, useState } from 'react';

-import Image, { StaticImageData } from 'next/image';
+import type { StaticImageData } from 'next/image';
+import Image from 'next/image';

 import { animate, motion, useMotionTemplate, useMotionValue, useTransform } from 'framer-motion';
 import { P, match } from 'ts-pattern';

-import { Signature } from '@documenso/prisma/client';
-import { cn } from '@documenso/ui/lib/utils';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
+import type { Signature } from '@documenso/prisma/client';
+
+import { cn } from '../lib/utils';
+import { Card, CardContent } from '../primitives/card';

 export type SigningCardProps = {
  className?: string;
--- a/packages/ui/primitives/combobox.tsx
+++ b/packages/ui/primitives/combobox.tsx
@ -3,16 +3,11 @@ import * as React from 'react';
 import { Check, ChevronsUpDown } from 'lucide-react';

 import { Role } from '@documenso/prisma/client';
-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-} from '@documenso/ui/primitives/command';
-import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+
+import { cn } from '../lib/utils';
+import { Button } from './button';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from './command';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';

 type ComboboxProps = {
  listValues: string[];
--- a/packages/ui/primitives/document-dropzone.tsx
+++ b/packages/ui/primitives/document-dropzone.tsx
@ -1,12 +1,14 @@
 'use client';

-import { Variants, motion } from 'framer-motion';
+import type { Variants } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { Plus } from 'lucide-react';
 import { useDropzone } from 'react-dropzone';

 import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
-import { cn } from '@documenso/ui/lib/utils';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
+
+import { cn } from '../lib/utils';
+import { Card, CardContent } from './card';

 const DocumentDropzoneContainerVariants: Variants = {
  initial: {
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@ -11,29 +11,27 @@ 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 { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-} from '@documenso/ui/primitives/command';
-import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import type { Field, Recipient } from '@documenso/prisma/client';
+import { FieldType, SendStatus } from '@documenso/prisma/client';

-import { TAddFieldsFormSchema } from './add-fields.types';
+import { cn } from '../../lib/utils';
+import { Button } from '../button';
+import { Card, CardContent } from '../card';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../command';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import { useStep } from '../stepper';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
+import type { TAddFieldsFormSchema } from './add-fields.types';
 import {
  DocumentFlowFormContainerActions,
  DocumentFlowFormContainerContent,
  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerHeader,
  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 +51,6 @@ export type AddFieldsFormProps = {
  hideRecipients?: boolean;
  recipients: Recipient[];
  fields: Field[];
-  numberOfSteps: number;
  onSubmit: (_data: TAddFieldsFormSchema) => void;
 };

@ -62,10 +59,10 @@ export const AddFieldsFormPartial = ({
  hideRecipients = false,
  recipients,
  fields,
-  numberOfSteps,
  onSubmit,
 }: AddFieldsFormProps) => {
  const { isWithinPageBounds, getFieldPosition, getPage } = useDocumentElement();
+  const { currentStep, totalSteps, previousStep } = useStep();

  const {
    control,
@ -287,6 +284,10 @@ export const AddFieldsFormPartial = ({

  return (
    <>
+      <DocumentFlowFormContainerHeader
+        title={documentFlow.title}
+        description={documentFlow.description}
+      />
      <DocumentFlowFormContainerContent>
        <div className="flex flex-col">
          {selectedField && (
@ -513,15 +514,15 @@ export const AddFieldsFormPartial = ({
      <DocumentFlowFormContainerFooter>
        <DocumentFlowFormContainerStep
          title={documentFlow.title}
-          step={documentFlow.stepIndex}
-          maxStep={numberOfSteps}
+          step={currentStep}
+          maxStep={totalSteps}
        />

        <DocumentFlowFormContainerActions
          loading={isSubmitting}
          disabled={isSubmitting}
          onGoBackClick={() => {
-            documentFlow.onBackStep?.();
+            previousStep();
            remove();
          }}
          onGoNextClick={() => void onFormSubmit()}
--- a/packages/ui/primitives/document-flow/add-signature.tsx
+++ b/packages/ui/primitives/document-flow/add-signature.tsx
@ -9,35 +9,38 @@ import { match } from 'ts-pattern';

 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
-import { Field, FieldType } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
-import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
-import { cn } from '@documenso/ui/lib/utils';
-import { Card, CardContent } from '@documenso/ui/primitives/card';
-import { TAddSignatureFormSchema } from '@documenso/ui/primitives/document-flow/add-signature.types';
+import type { Field } from '@documenso/prisma/client';
+import { FieldType } from '@documenso/prisma/client';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+
+import { FieldToolTip } from '../../components/field/field-tooltip';
+import { cn } from '../../lib/utils';
+import { Card, CardContent } from '../card';
+import { ElementVisible } from '../element-visible';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../form/form';
+import { Input } from '../input';
+import { SignaturePad } from '../signature-pad';
+import { useStep } from '../stepper';
+import type { TAddSignatureFormSchema } from './add-signature.types';
+import { ZAddSignatureFormSchema } from './add-signature.types';
 import {
  DocumentFlowFormContainerActions,
  DocumentFlowFormContainerContent,
  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerHeader,
  DocumentFlowFormContainerStep,
-} from '@documenso/ui/primitives/document-flow/document-flow-root';
-import { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
-import { ElementVisible } from '@documenso/ui/primitives/element-visible';
-import { Input } from '@documenso/ui/primitives/input';
-import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
-
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../form/form';
-import { ZAddSignatureFormSchema } from './add-signature.types';
+} from './document-flow-root';
 import {
  SinglePlayerModeCustomTextField,
  SinglePlayerModeSignatureField,
 } from './single-player-mode-fields';
+import type { DocumentFlowStep } from './types';

 export type AddSignatureFormProps = {
  defaultValues?: TAddSignatureFormSchema;
  documentFlow: DocumentFlowStep;
  fields: FieldWithSignature[];
-  numberOfSteps: number;
+
  onSubmit: (_data: TAddSignatureFormSchema) => Promise<void> | void;
  requireName?: boolean;
  requireSignature?: boolean;
@ -47,11 +50,13 @@ export const AddSignatureFormPartial = ({
  defaultValues,
  documentFlow,
  fields,
-  numberOfSteps,
+
  onSubmit,
  requireName = false,
  requireSignature = true,
 }: AddSignatureFormProps) => {
+  const { currentStep, totalSteps } = useStep();
+
  const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);

  // Refined schema which takes into account whether to allow an empty name or signature.
@ -206,46 +211,30 @@ export const AddSignatureFormPartial = ({
  };

  return (
-    <Form {...form}>
-      <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
-        <DocumentFlowFormContainerContent>
-          <div className="space-y-4">
-            <FormField
-              control={form.control}
-              name="email"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel required>Email</FormLabel>
-                  <FormControl>
-                    <Input
-                      className="bg-background"
-                      type="email"
-                      autoComplete="email"
-                      {...field}
-                      onChange={(value) => {
-                        onFormValueChange(FieldType.EMAIL);
-                        field.onChange(value);
-                      }}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+    <>
+      <DocumentFlowFormContainerHeader
+        title={documentFlow.title}
+        description={documentFlow.description}
+      />

-            {requireName && (
+      <Form {...form}>
+        <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
+          <DocumentFlowFormContainerContent>
+            <div className="space-y-4">
              <FormField
                control={form.control}
-                name="name"
+                name="email"
                render={({ field }) => (
                  <FormItem>
-                    <FormLabel required={requireName}>Name</FormLabel>
+                    <FormLabel required>Email</FormLabel>
                    <FormControl>
                      <Input
                        className="bg-background"
+                        type="email"
+                        autoComplete="email"
                        {...field}
                        onChange={(value) => {
-                          onFormValueChange(FieldType.NAME);
+                          onFormValueChange(FieldType.EMAIL);
                          field.onChange(value);
                        }}
                      />
@ -254,91 +243,114 @@ export const AddSignatureFormPartial = ({
                  </FormItem>
                )}
              />
-            )}

-            {requireSignature && (
-              <FormField
-                control={form.control}
-                name="signature"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel required={requireSignature}>Signature</FormLabel>
-                    <FormControl>
-                      <Card
-                        className={cn('mt-2', {
-                          'rounded-sm ring-2 ring-red-500 ring-offset-2 transition-all':
-                            form.formState.errors.signature,
-                        })}
-                        gradient={!form.formState.errors.signature}
-                        degrees={-120}
-                      >
-                        <CardContent className="p-0">
-                          <SignaturePad
-                            className="h-44 w-full"
-                            defaultValue={field.value}
-                            onBlur={field.onBlur}
-                            onChange={(value) => {
-                              onFormValueChange(FieldType.SIGNATURE);
-                              field.onChange(value);
-                            }}
-                          />
-                        </CardContent>
-                      </Card>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            )}
-          </div>
-        </DocumentFlowFormContainerContent>
+              {requireName && (
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel required={requireName}>Name</FormLabel>
+                      <FormControl>
+                        <Input
+                          className="bg-background"
+                          {...field}
+                          onChange={(value) => {
+                            onFormValueChange(FieldType.NAME);
+                            field.onChange(value);
+                          }}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}

-        <DocumentFlowFormContainerFooter>
-          <DocumentFlowFormContainerStep
-            title={documentFlow.title}
-            step={documentFlow.stepIndex}
-            maxStep={numberOfSteps}
-          />
+              {requireSignature && (
+                <FormField
+                  control={form.control}
+                  name="signature"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel required={requireSignature}>Signature</FormLabel>
+                      <FormControl>
+                        <Card
+                          className={cn('mt-2', {
+                            'rounded-sm ring-2 ring-red-500 ring-offset-2 transition-all':
+                              form.formState.errors.signature,
+                          })}
+                          gradient={!form.formState.errors.signature}
+                          degrees={-120}
+                        >
+                          <CardContent className="p-0">
+                            <SignaturePad
+                              className="h-44 w-full"
+                              defaultValue={field.value}
+                              onBlur={field.onBlur}
+                              onChange={(value) => {
+                                onFormValueChange(FieldType.SIGNATURE);
+                                field.onChange(value);
+                              }}
+                            />
+                          </CardContent>
+                        </Card>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
+            </div>
+          </DocumentFlowFormContainerContent>

-          <DocumentFlowFormContainerActions
-            loading={form.formState.isSubmitting}
-            disabled={form.formState.isSubmitting}
-            onGoBackClick={documentFlow.onBackStep}
-            onGoNextClick={form.handleSubmit(onValidateFields)}
-          />
-        </DocumentFlowFormContainerFooter>
-      </fieldset>
+          <DocumentFlowFormContainerFooter>
+            <DocumentFlowFormContainerStep
+              title={documentFlow.title}
+              step={currentStep}
+              maxStep={totalSteps}
+            />

-      {validateUninsertedFields && uninsertedFields[0] && (
-        <FieldToolTip key={uninsertedFields[0].id} field={uninsertedFields[0]} color="warning">
-          Click to insert field
-        </FieldToolTip>
-      )}
+            <DocumentFlowFormContainerActions
+              loading={form.formState.isSubmitting}
+              disabled={form.formState.isSubmitting}
+              onGoBackClick={documentFlow.onBackStep}
+              onGoNextClick={form.handleSubmit(onValidateFields)}
+            />
+          </DocumentFlowFormContainerFooter>
+        </fieldset>

-      <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
-        {localFields.map((field) =>
-          match(field.type)
-            .with(FieldType.DATE, FieldType.EMAIL, FieldType.NAME, () => {
-              return (
-                <SinglePlayerModeCustomTextField
+        {validateUninsertedFields && uninsertedFields[0] && (
+          <FieldToolTip key={uninsertedFields[0].id} field={uninsertedFields[0]} color="warning">
+            Click to insert field
+          </FieldToolTip>
+        )}
+
+        <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
+          {localFields.map((field) =>
+            match(field.type)
+              .with(FieldType.DATE, FieldType.EMAIL, FieldType.NAME, () => {
+                return (
+                  <SinglePlayerModeCustomTextField
+                    onClick={insertField(field)}
+                    key={field.id}
+                    field={field}
+                  />
+                );
+              })
+              .with(FieldType.SIGNATURE, () => (
+                <SinglePlayerModeSignatureField
                  onClick={insertField(field)}
                  key={field.id}
                  field={field}
                />
-              );
-            })
-            .with(FieldType.SIGNATURE, () => (
-              <SinglePlayerModeSignatureField
-                onClick={insertField(field)}
-                key={field.id}
-                field={field}
-              />
-            ))
-            .otherwise(() => {
-              return null;
-            }),
-        )}
-      </ElementVisible>
-    </Form>
+              ))
+              .otherwise(() => {
+                return null;
+              }),
+          )}
+        </ElementVisible>
+      </Form>
+    </>
  );
 };
--- a/packages/ui/primitives/document-flow/add-signers.tsx
+++ b/packages/ui/primitives/document-flow/add-signers.tsx
@ -9,35 +9,37 @@ 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 { 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 type { Field, Recipient } from '@documenso/prisma/client';
+import { DocumentStatus, SendStatus } from '@documenso/prisma/client';
+import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';

-import { TAddSignersFormSchema, ZAddSignersFormSchema } from './add-signers.types';
+import { Button } from '../button';
+import { FormErrorMessage } from '../form/form-error-message';
+import { Input } from '../input';
+import { Label } from '../label';
+import { useStep } from '../stepper';
+import { useToast } from '../use-toast';
+import type { TAddSignersFormSchema } from './add-signers.types';
+import { ZAddSignersFormSchema } from './add-signers.types';
 import {
  DocumentFlowFormContainerActions,
  DocumentFlowFormContainerContent,
  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerHeader,
  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,
@ -48,6 +50,8 @@ export const AddSignersFormPartial = ({

  const initialId = useId();

+  const { currentStep, totalSteps, previousStep } = useStep();
+
  const {
    control,
    handleSubmit,
@ -126,6 +130,10 @@ export const AddSignersFormPartial = ({

  return (
    <>
+      <DocumentFlowFormContainerHeader
+        title={documentFlow.title}
+        description={documentFlow.description}
+      />
      <DocumentFlowFormContainerContent>
        <div className="flex w-full flex-col gap-y-4">
          <AnimatePresence>
@ -221,15 +229,15 @@ export const AddSignersFormPartial = ({
      <DocumentFlowFormContainerFooter>
        <DocumentFlowFormContainerStep
          title={documentFlow.title}
-          step={documentFlow.stepIndex}
-          maxStep={numberOfSteps}
+          step={currentStep}
+          maxStep={totalSteps}
        />

        <DocumentFlowFormContainerActions
          canGoBack={document.status === DocumentStatus.DRAFT}
          loading={isSubmitting}
          disabled={isSubmitting}
-          onGoBackClick={documentFlow.onBackStep}
+          onGoBackClick={previousStep}
          onGoNextClick={() => void onFormSubmit()}
        />
      </DocumentFlowFormContainerFooter>
--- a/packages/ui/primitives/document-flow/add-subject.tsx
+++ b/packages/ui/primitives/document-flow/add-subject.tsx
@ -2,28 +2,30 @@

 import { useForm } from 'react-hook-form';

-import { DocumentStatus, Field, Recipient } from '@documenso/prisma/client';
-import { 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 type { Field, Recipient } from '@documenso/prisma/client';
+import { DocumentStatus } from '@documenso/prisma/client';
+import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';

-import { TAddSubjectFormSchema } from './add-subject.types';
+import { FormErrorMessage } from '../form/form-error-message';
+import { Input } from '../input';
+import { Label } from '../label';
+import { useStep } from '../stepper';
+import { Textarea } from '../textarea';
+import type { TAddSubjectFormSchema } from './add-subject.types';
 import {
  DocumentFlowFormContainerActions,
  DocumentFlowFormContainerContent,
  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerHeader,
  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,7 +34,6 @@ export const AddSubjectFormPartial = ({
  recipients: _recipients,
  fields: _fields,
  document,
-  numberOfSteps,
  onSubmit,
 }: AddSubjectFormProps) => {
  const {
@ -49,9 +50,14 @@ export const AddSubjectFormPartial = ({
  });

  const onFormSubmit = handleSubmit(onSubmit);
+  const { currentStep, totalSteps, previousStep } = useStep();

  return (
    <>
+      <DocumentFlowFormContainerHeader
+        title={documentFlow.title}
+        description={documentFlow.description}
+      />
      <DocumentFlowFormContainerContent>
        <div className="flex flex-col">
          <div className="flex flex-col gap-y-4">
@ -124,15 +130,15 @@ export const AddSubjectFormPartial = ({
      <DocumentFlowFormContainerFooter>
        <DocumentFlowFormContainerStep
          title={documentFlow.title}
-          step={documentFlow.stepIndex}
-          maxStep={numberOfSteps}
+          step={currentStep}
+          maxStep={totalSteps}
        />

        <DocumentFlowFormContainerActions
          loading={isSubmitting}
          disabled={isSubmitting}
          goNextLabel={document.status === DocumentStatus.DRAFT ? 'Send' : 'Update'}
-          onGoBackClick={documentFlow.onBackStep}
+          onGoBackClick={previousStep}
          onGoNextClick={() => void onFormSubmit()}
        />
      </DocumentFlowFormContainerFooter>
--- a/packages/ui/primitives/document-flow/add-title.tsx
+++ b/packages/ui/primitives/document-flow/add-title.tsx
@ -4,15 +4,17 @@ import { useForm } from 'react-hook-form';

 import type { Field, Recipient } 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 { FormErrorMessage } from '../form/form-error-message';
+import { Input } from '../input';
+import { Label } from '../label';
+import { useStep } from '../stepper';
 import type { TAddTitleFormSchema } from './add-title.types';
 import {
  DocumentFlowFormContainerActions,
  DocumentFlowFormContainerContent,
  DocumentFlowFormContainerFooter,
+  DocumentFlowFormContainerHeader,
  DocumentFlowFormContainerStep,
 } from './document-flow-root';
 import type { DocumentFlowStep } from './types';
@ -22,7 +24,6 @@ export type AddTitleFormProps = {
  recipients: Recipient[];
  fields: Field[];
  document: DocumentWithData;
-  numberOfSteps: number;
  onSubmit: (_data: TAddTitleFormSchema) => void;
 };

@ -31,7 +32,6 @@ export const AddTitleFormPartial = ({
  recipients: _recipients,
  fields: _fields,
  document,
-  numberOfSteps,
  onSubmit,
 }: AddTitleFormProps) => {
  const {
@ -46,8 +46,14 @@ export const AddTitleFormPartial = ({

  const onFormSubmit = handleSubmit(onSubmit);

+  const { stepIndex, currentStep, totalSteps, previousStep } = useStep();
+
  return (
    <>
+      <DocumentFlowFormContainerHeader
+        title={documentFlow.title}
+        description={documentFlow.description}
+      />
      <DocumentFlowFormContainerContent>
        <div className="flex flex-col">
          <div className="flex flex-col gap-y-4">
@ -72,14 +78,15 @@ export const AddTitleFormPartial = ({
      <DocumentFlowFormContainerFooter>
        <DocumentFlowFormContainerStep
          title={documentFlow.title}
-          step={documentFlow.stepIndex}
-          maxStep={numberOfSteps}
+          step={currentStep}
+          maxStep={totalSteps}
        />

        <DocumentFlowFormContainerActions
          loading={isSubmitting}
          disabled={isSubmitting}
-          onGoBackClick={documentFlow.onBackStep}
+          canGoBack={stepIndex !== 0}
+          onGoBackClick={previousStep}
          onGoNextClick={() => void onFormSubmit()}
        />
      </DocumentFlowFormContainerFooter>
--- a/packages/ui/primitives/document-flow/document-flow-root.tsx
+++ b/packages/ui/primitives/document-flow/document-flow-root.tsx
@ -1,11 +1,12 @@
 'use client';

-import React, { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
+import React from 'react';

 import { motion } from 'framer-motion';

-import { cn } from '@documenso/ui/lib/utils';
-import { Button } from '@documenso/ui/primitives/button';
+import { cn } from '../../lib/utils';
+import { Button } from '../button';

 export type DocumentFlowFormContainerProps = HTMLAttributes<HTMLFormElement> & {
  children?: React.ReactNode;
--- a/packages/ui/primitives/document-flow/field-item.tsx
+++ b/packages/ui/primitives/document-flow/field-item.tsx
@ -7,10 +7,11 @@ import { createPortal } from 'react-dom';
 import { Rnd } from 'react-rnd';

 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-import { cn } from '@documenso/ui/lib/utils';
-import { Card, CardContent } from '@documenso/ui/primitives/card';

-import { FRIENDLY_FIELD_TYPE, TDocumentFlowFormSchema } from './types';
+import { cn } from '../../lib/utils';
+import { Card, CardContent } from '../card';
+import type { TDocumentFlowFormSchema } from './types';
+import { FRIENDLY_FIELD_TYPE } from './types';

 type Field = TDocumentFlowFormSchema['fields'][0];

--- a/packages/ui/primitives/document-flow/send-document-action-dialog.tsx
+++ b/packages/ui/primitives/document-flow/send-document-action-dialog.tsx
@ -2,7 +2,8 @@ import { useState } from 'react';

 import { Loader } from 'lucide-react';

-import { Button, ButtonProps } from '@documenso/ui/primitives/button';
+import type { ButtonProps } from '../button';
+import { Button } from '../button';
 import {
  Dialog,
  DialogContent,
@ -11,7 +12,7 @@ import {
  DialogHeader,
  DialogTitle,
  DialogTrigger,
-} from '@documenso/ui/primitives/dialog';
+} from '../dialog';

 export type SendDocumentActionDialogProps = ButtonProps & {
  loading?: boolean;
--- a/packages/ui/primitives/document-flow/single-player-mode-fields.tsx
+++ b/packages/ui/primitives/document-flow/single-player-mode-fields.tsx
@ -13,9 +13,11 @@ import {
  MIN_HANDWRITING_FONT_SIZE,
  MIN_STANDARD_FONT_SIZE,
 } from '@documenso/lib/constants/pdf';
-import { Field, FieldType } from '@documenso/prisma/client';
-import { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
-import { FieldRootContainer } from '@documenso/ui/components/field/field';
+import type { Field } from '@documenso/prisma/client';
+import { FieldType } from '@documenso/prisma/client';
+import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
+
+import { FieldRootContainer } from '../../components/field/field';

 export type SinglePlayerModeFieldContainerProps = {
  field: FieldWithSignature;
--- a/packages/ui/primitives/document-flow/types.ts
+++ b/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;
 }
--- a/packages/ui/primitives/form/form-error-message.tsx
+++ b/packages/ui/primitives/form/form-error-message.tsx
@ -1,6 +1,6 @@
 import { AnimatePresence, motion } from 'framer-motion';

-import { cn } from '@documenso/ui/lib/utils';
+import { cn } from '../../lib/utils';

 export type FormErrorMessageProps = {
  className?: string;
--- a/packages/ui/primitives/form/form.tsx
+++ b/packages/ui/primitives/form/form.tsx
@ -1,19 +1,12 @@
 import * as React from 'react';

-import * as LabelPrimitive from '@radix-ui/react-label';
+import type * as LabelPrimitive from '@radix-ui/react-label';
 import { Slot } from '@radix-ui/react-slot';
 import { AnimatePresence, motion } from 'framer-motion';
-import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext,
-} from 'react-hook-form';
-
-import { cn } from '@documenso/ui/lib/utils';
+import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+import { Controller, FormProvider, useFormContext } from 'react-hook-form';

+import { cn } from '../../lib/utils';
 import { Label } from '../label';

 const Form = FormProvider;
--- a/packages/ui/primitives/pdf-viewer.tsx
+++ b/packages/ui/primitives/pdf-viewer.tsx
@ -3,16 +3,16 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';

 import { Loader } from 'lucide-react';
-import { PDFDocumentProxy } from 'pdfjs-dist';
+import type { PDFDocumentProxy } from 'pdfjs-dist';
 import { Document as PDFDocument, Page as PDFPage, pdfjs } from 'react-pdf';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';

 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
-import { DocumentData } from '@documenso/prisma/client';
-import { cn } from '@documenso/ui/lib/utils';
+import type { DocumentData } from '@documenso/prisma/client';

+import { cn } from '../lib/utils';
 import { useToast } from './use-toast';

 export type LoadedPDFDocument = PDFDocumentProxy;
--- a/packages/ui/primitives/signature-pad/signature-pad.tsx
+++ b/packages/ui/primitives/signature-pad/signature-pad.tsx
@ -1,20 +1,12 @@
 'use client';

-import {
-  HTMLAttributes,
-  MouseEvent,
-  PointerEvent,
-  TouchEvent,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import type { HTMLAttributes, MouseEvent, PointerEvent, TouchEvent } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';

-import { StrokeOptions, getStroke } from 'perfect-freehand';
-
-import { cn } from '@documenso/ui/lib/utils';
+import type { StrokeOptions } from 'perfect-freehand';
+import { getStroke } from 'perfect-freehand';

+import { cn } from '../../lib/utils';
 import { getSvgPathFromStroke } from './helper';
 import { Point } from './point';

--- a/packages/ui/primitives/stepper.tsx
+++ b/packages/ui/primitives/stepper.tsx
@ -0,0 +1,109 @@
+import React, { createContext, useContext, useState } from 'react';
+import type { FC } from 'react';
+
+type StepContextValue = {
+  isCompleting: boolean;
+  stepIndex: number;
+  currentStep: number;
+  totalSteps: number;
+  isFirst: boolean;
+  isLast: boolean;
+  nextStep: () => void;
+  previousStep: () => void;
+};
+
+const StepContext = createContext<StepContextValue | null>(null);
+
+type StepperProps = {
+  children: React.ReactNode;
+  onComplete?: () => void | Promise<void>;
+  onStepChanged?: (currentStep: number) => void;
+  currentStep?: number; // external control prop
+  setCurrentStep?: (step: number) => void; // external control function
+};
+
+export const Stepper: FC<StepperProps> = ({
+  children,
+  onComplete,
+  onStepChanged,
+  currentStep: propCurrentStep,
+  setCurrentStep: propSetCurrentStep,
+}) => {
+  const [stateCurrentStep, stateSetCurrentStep] = useState(1);
+  const [isCompleting, setIsCompleting] = useState(false);
+
+  // Determine if props are provided, otherwise use state
+  const isControlled = propCurrentStep !== undefined && propSetCurrentStep !== undefined;
+  const currentStep = isControlled ? propCurrentStep : stateCurrentStep;
+  const setCurrentStep = isControlled ? propSetCurrentStep : stateSetCurrentStep;
+
+  const totalSteps = React.Children.count(children);
+
+  const handleComplete = async () => {
+    try {
+      if (!onComplete) {
+        return;
+      }
+
+      setIsCompleting(true);
+
+      await onComplete();
+
+      setIsCompleting(false);
+    } catch (error) {
+      setIsCompleting(false);
+
+      throw error;
+    }
+  };
+
+  const handleStepChange = (nextStep: number) => {
+    setCurrentStep(nextStep);
+    onStepChanged?.(nextStep);
+  };
+
+  const nextStep = () => {
+    if (currentStep < totalSteps) {
+      void handleStepChange(currentStep + 1);
+    } else {
+      void handleComplete();
+    }
+  };
+
+  const previousStep = () => {
+    if (currentStep > 1) {
+      void handleStepChange(currentStep - 1);
+    }
+  };
+
+  // Empty stepper
+  if (totalSteps === 0) {
+    return null;
+  }
+
+  const currentChild = React.Children.toArray(children)[currentStep - 1];
+
+  const stepContextValue: StepContextValue = {
+    isCompleting,
+    stepIndex: currentStep - 1,
+    currentStep,
+    totalSteps,
+    isFirst: currentStep === 1,
+    isLast: currentStep === totalSteps,
+    nextStep,
+    previousStep,
+  };
+
+  return <StepContext.Provider value={stepContextValue}>{currentChild}</StepContext.Provider>;
+};
+
+/** Hook for children to use the step context */
+export const useStep = (): StepContextValue => {
+  const context = useContext(StepContext);
+
+  if (!context) {
+    throw new Error('useStep must be used within a Stepper');
+  }
+
+  return context;
+};