Merge branch 'main' into fix/billing-page

apps/marketing/src/app/(marketing)/layout.tsx

@@ -29,7 +29,7 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
 
   return (
     <div
-      className={cn('relative max-w-[100vw] pt-20 md:pt-28', {
+      className={cn('relative flex min-h-[100vh] max-w-[100vw] flex-col pt-20 md:pt-28', {
         'overflow-y-auto overflow-x-hidden': pathname !== '/singleplayer',
       })}
     >
@@ -41,7 +41,7 @@ export default function MarketingLayout({ children }: MarketingLayoutProps) {
         <Header className="mx-auto h-16 max-w-screen-xl px-4 md:h-20 lg:px-8" />
       </div>
 
-      <div className="relative mx-auto max-w-screen-xl px-4 lg:px-8">{children}</div>
+      <div className="relative mx-auto max-w-screen-xl flex-1 px-4 lg:px-8">{children}</div>
 
       <Footer className="bg-background border-muted mt-24 border-t" />
     </div>

apps/marketing/src/app/(marketing)/singleplayer/client.tsx

@@ -17,15 +17,14 @@ import { AddFieldsFormPartial } from '@documenso/ui/primitives/document-flow/add
 import type { TAddFieldsFormSchema } from '@documenso/ui/primitives/document-flow/add-fields.types';
 import { AddSignatureFormPartial } from '@documenso/ui/primitives/document-flow/add-signature';
 import type { TAddSignatureFormSchema } from '@documenso/ui/primitives/document-flow/add-signature.types';
-import {
-  DocumentFlowFormContainer,
-  DocumentFlowFormContainerHeader,
-} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import { DocumentFlowFormContainer } 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';
 
-type SinglePlayerModeStep = 'fields' | 'sign';
+const SinglePlayerModeSteps = ['fields', 'sign'] as const;
+type SinglePlayerModeStep = (typeof SinglePlayerModeSteps)[number];
 
 // !: This entire file is a hack to get around failed prerendering of
 // !: the Single Player Mode page. This regression was introduced during
@@ -226,37 +225,35 @@ export const SinglePlayerClient = () => {
         </div>
 
         <div className="col-span-12 lg:col-span-6 xl:col-span-5">
-          <DocumentFlowFormContainer className="top-24" onSubmit={(e) => e.preventDefault()}>
-            <DocumentFlowFormContainerHeader
-              title={currentDocumentFlow.title}
-              description={currentDocumentFlow.description}
-            />
-
+          <DocumentFlowFormContainer
+            className="top-24 lg:h-[calc(100vh-7rem)]"
+            onSubmit={(e) => e.preventDefault()}
+          >
+            <Stepper
+              currentStep={currentDocumentFlow.stepIndex}
+              setCurrentStep={(step) => setStep(SinglePlayerModeSteps[step - 1])}
+            >
               {/* Add fields to PDF page. */}
-            {step === 'fields' && (
               <fieldset disabled={!uploadedFile} className="flex h-full flex-col">
                 <AddFieldsFormPartial
                   documentFlow={documentFlow.fields}
                   hideRecipients={true}
                   recipients={uploadedFile ? [placeholderRecipient] : []}
-                  numberOfSteps={Object.keys(documentFlow).length}
                   fields={fields}
                   onSubmit={onFieldsSubmit}
                 />
               </fieldset>
-            )}
 
               {/* Enter user details and signature. */}
-            {step === 'sign' && (
+
               <AddSignatureFormPartial
                 documentFlow={documentFlow.sign}
-                numberOfSteps={Object.keys(documentFlow).length}
                 fields={fields}
                 onSubmit={onSignSubmit}
                 requireName={Boolean(fields.find((field) => field.type === 'NAME'))}
                 requireSignature={Boolean(fields.find((field) => field.type === 'SIGNATURE'))}
               />
-            )}
+            </Stepper>
           </DocumentFlowFormContainer>
         </div>
       </div>

apps/marketing/src/pages/api/trpc/[trpc].ts

@@ -4,6 +4,11 @@ import { appRouter } from '@documenso/trpc/server/router';
 
 export const config = {
   maxDuration: 60,
+  api: {
+    bodyParser: {
+      sizeLimit: '50mb',
+    },
+  },
 };
 
 export default trpcNext.createNextApiHandler({

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

@@ -4,8 +4,8 @@ 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 { DocumentData, Field, Recipient, User } 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';
@@ -18,12 +18,10 @@ import { AddSubjectFormPartial } from '@documenso/ui/primitives/document-flow/ad
 import type { TAddSubjectFormSchema } from '@documenso/ui/primitives/document-flow/add-subject.types';
 import { AddTitleFormPartial } from '@documenso/ui/primitives/document-flow/add-title';
 import type { TAddTitleFormSchema } from '@documenso/ui/primitives/document-flow/add-title.types';
-import {
-  DocumentFlowFormContainer,
-  DocumentFlowFormContainerHeader,
-} from '@documenso/ui/primitives/document-flow/document-flow-root';
+import { DocumentFlowFormContainer } 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 = {
@@ -36,6 +34,7 @@ export type EditDocumentFormProps = {
 };
 
 type EditDocumentStep = 'title' | 'signers' | 'fields' | 'subject';
+const EditDocumentSteps: EditDocumentStep[] = ['title', 'signers', 'fields', 'subject'];
 
 export const EditDocumentForm = ({
   className,
@@ -48,6 +47,7 @@ export const EditDocumentForm = ({
   const { toast } = useToast();
   const router = useRouter();
 
+  // controlled stepper state
   const [step, setStep] = useState<EditDocumentStep>(
     document.status === DocumentStatus.DRAFT ? 'title' : 'signers',
   );
@@ -67,24 +67,19 @@ export const EditDocumentForm = ({
       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 {
       // Custom invocation server action
@@ -116,7 +111,6 @@ export const EditDocumentForm = ({
       });
 
       router.refresh();
-
       setStep('fields');
     } catch (err) {
       console.error(err);
@@ -138,7 +132,6 @@ export const EditDocumentForm = ({
       });
 
       router.refresh();
-
       setStep('subject');
     } catch (err) {
       console.error(err);
@@ -181,6 +174,8 @@ export const EditDocumentForm = ({
     }
   };
 
+  const currentDocumentFlow = documentFlow[step];
+
   return (
     <div className={cn('grid w-full grid-cols-12 gap-8', className)}>
       <Card
@@ -197,56 +192,43 @@ export const EditDocumentForm = ({
           className="lg:h-[calc(100vh-6rem)]"
           onSubmit={(e) => e.preventDefault()}
         >
-          <DocumentFlowFormContainerHeader
-            title={currentDocumentFlow.title}
-            description={currentDocumentFlow.description}
-          />
-
-          {step === 'title' && (
+          <Stepper
+            currentStep={currentDocumentFlow.stepIndex}
+            setCurrentStep={(step) => setStep(EditDocumentSteps[step - 1])}
+          >
             <AddTitleFormPartial
               key={recipients.length}
               documentFlow={documentFlow.title}
               recipients={recipients}
               fields={fields}
               document={document}
-              numberOfSteps={Object.keys(documentFlow).length}
               onSubmit={onAddTitleFormSubmit}
             />
-          )}
 
-          {step === 'signers' && (
             <AddSignersFormPartial
               key={recipients.length}
               documentFlow={documentFlow.signers}
               document={document}
               recipients={recipients}
               fields={fields}
-              numberOfSteps={Object.keys(documentFlow).length}
               onSubmit={onAddSignersFormSubmit}
             />
-          )}
-
-          {step === 'fields' && (
             <AddFieldsFormPartial
               key={fields.length}
               documentFlow={documentFlow.fields}
               recipients={recipients}
               fields={fields}
-              numberOfSteps={Object.keys(documentFlow).length}
               onSubmit={onAddFieldsFormSubmit}
             />
-          )}
-
-          {step === 'subject' && (
             <AddSubjectFormPartial
+              key={recipients.length}
               documentFlow={documentFlow.subject}
               document={document}
               recipients={recipients}
               fields={fields}
-              numberOfSteps={Object.keys(documentFlow).length}
               onSubmit={onAddSubjectFormSubmit}
             />
-          )}
+          </Stepper>
         </DocumentFlowFormContainer>
       </div>
     </div>

apps/web/src/pages/api/trpc/[trpc].ts

@@ -4,6 +4,11 @@ import { appRouter } from '@documenso/trpc/server/router';
 
 export const config = {
   maxDuration: 60,
+  api: {
+    bodyParser: {
+      sizeLimit: '50mb',
+    },
+  },
 };
 
 export default trpcNext.createNextApiHandler({

packages/app-tests/e2e/pr-718-add-stepper-component.spec.ts

@@ -0,0 +1,75 @@
+import { expect, test } from '@playwright/test';
+import path from 'node:path';
+
+import { TEST_USER } from '@documenso/prisma/seed/pr-718-add-stepper-component';
+
+test(`[PR-718]: should be able to create a document`, async ({ page }) => {
+  await page.goto('/signin');
+
+  const documentTitle = `example-${Date.now()}.pdf`;
+
+  // Sign in
+  await page.getByLabel('Email').fill(TEST_USER.email);
+  await page.getByLabel('Password', { exact: true }).fill(TEST_USER.password);
+  await page.getByRole('button', { name: 'Sign In' }).click();
+
+  // Upload document
+  const [fileChooser] = await Promise.all([
+    page.waitForEvent('filechooser'),
+    page.locator('input[type=file]').evaluate((e) => {
+      if (e instanceof HTMLInputElement) {
+        e.click();
+      }
+    }),
+  ]);
+
+  await fileChooser.setFiles(path.join(__dirname, '../../../assets/example.pdf'));
+
+  // Wait to be redirected to the edit page
+  await page.waitForURL(/\/documents\/\d+/);
+
+  // Set title
+  await expect(page.getByRole('heading', { name: 'Add Title' })).toBeVisible();
+
+  await page.getByLabel('Title').fill(documentTitle);
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Add signers
+  await expect(page.getByRole('heading', { name: 'Add Signers' })).toBeVisible();
+
+  await page.getByLabel('Email*').fill('user1@example.com');
+  await page.getByLabel('Name').fill('User 1');
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Add fields
+  await expect(page.getByRole('heading', { name: 'Add Fields' })).toBeVisible();
+
+  await page.getByRole('button', { name: 'User 1 Signature' }).click();
+  await page.locator('canvas').click({
+    position: {
+      x: 100,
+      y: 100,
+    },
+  });
+
+  await page.getByRole('button', { name: 'Email Email' }).click();
+  await page.locator('canvas').click({
+    position: {
+      x: 100,
+      y: 200,
+    },
+  });
+
+  await page.getByRole('button', { name: 'Continue' }).click();
+
+  // Add subject and send
+  await expect(page.getByRole('heading', { name: 'Add Subject' })).toBeVisible();
+  await page.getByRole('button', { name: 'Send' }).click();
+
+  await page.waitForURL('/documents');
+
+  // Assert document was created
+  await expect(page.getByRole('link', { name: documentTitle })).toBeVisible();
+});

packages/prisma/seed/pr-718-add-stepper-component.ts

@@ -0,0 +1,28 @@
+import { hashSync } from '@documenso/lib/server-only/auth/hash';
+
+import { prisma } from '..';
+
+//
+// https://github.com/documenso/documenso/pull/713
+//
+
+const PULL_REQUEST_NUMBER = 718;
+
+const EMAIL_DOMAIN = `pr-${PULL_REQUEST_NUMBER}.documenso.com`;
+
+export const TEST_USER = {
+  name: 'User 1',
+  email: `user1@${EMAIL_DOMAIN}`,
+  password: 'Password123',
+} as const;
+
+export const seedDatabase = async () => {
+  await prisma.user.create({
+    data: {
+      name: TEST_USER.name,
+      email: TEST_USER.email,
+      password: hashSync(TEST_USER.password),
+      emailVerified: new Date(),
+    },
+  });
+};

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;

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;

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: {

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;

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;

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[];

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: {

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()}

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,6 +211,12 @@ export const AddSignatureFormPartial = ({
   };
 
   return (
+    <>
+      <DocumentFlowFormContainerHeader
+        title={documentFlow.title}
+        description={documentFlow.description}
+      />
+
       <Form {...form}>
         <fieldset className="flex h-full flex-col" disabled={form.formState.isSubmitting}>
           <DocumentFlowFormContainerContent>
@@ -296,8 +307,8 @@ export const AddSignatureFormPartial = ({
           <DocumentFlowFormContainerFooter>
             <DocumentFlowFormContainerStep
               title={documentFlow.title}
-            step={documentFlow.stepIndex}
-            maxStep={numberOfSteps}
+              step={currentStep}
+              maxStep={totalSteps}
             />
 
             <DocumentFlowFormContainerActions
@@ -340,5 +351,6 @@ export const AddSignatureFormPartial = ({
           )}
         </ElementVisible>
       </Form>
+    </>
   );
 };

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>

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>

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>

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;

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];
 

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;

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;

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;
 }

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;

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;

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;

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';
 

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;
+};