feat: support embedded authoring for creation (#1741)

Adds support for creating documents and templates
using our embed components.

Support is super primitive at the moment and is being polished.

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

@@ -8,14 +8,11 @@ import type { Field, Recipient } from '@prisma/client';
 import { FieldType, RecipientRole, SendStatus } from '@prisma/client';
 import {
   CalendarDays,
-  Check,
   CheckSquare,
   ChevronDown,
-  ChevronsUpDown,
   Contact,
   Disc,
   Hash,
-  Info,
   Mail,
   Type,
   User,
@@ -27,7 +24,6 @@ import { prop, sortBy } from 'remeda';
 import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-client-rect';
 import { useDocumentElement } from '@documenso/lib/client-only/hooks/use-document-element';
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
 import {
   type TFieldMetaSchema as FieldMeta,
   ZFieldMetaSchema,
@@ -42,16 +38,13 @@ import {
 } from '@documenso/lib/utils/recipients';
 
 import { FieldToolTip } from '../../components/field/field-tooltip';
-import { getSignerColorStyles, useSignerColors } from '../../lib/signer-colors';
+import { useSignerColors } from '../../lib/signer-colors';
 import { cn } from '../../lib/utils';
 import { Alert, AlertDescription } from '../alert';
-import { Button } from '../button';
 import { Card, CardContent } from '../card';
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../command';
 import { Form } from '../form/form';
-import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import { RecipientSelector } from '../recipient-selector';
 import { useStep } from '../stepper';
-import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';
 import { useToast } from '../use-toast';
 import type { TAddFieldsFormSchema } from './add-fields.types';
 import {
@@ -663,123 +656,12 @@ export const AddFieldsFormPartial = ({
                 })}
 
               {!hideRecipients && (
-                <Popover open={showRecipientsSelector} onOpenChange={setShowRecipientsSelector}>
-                  <PopoverTrigger asChild>
-                    <Button
-                      type="button"
-                      variant="outline"
-                      role="combobox"
-                      className={cn(
-                        'bg-background text-muted-foreground hover:text-foreground mb-12 mt-2 justify-between font-normal',
-                        selectedSignerStyles.default.base,
-                      )}
-                    >
-                      {selectedSigner?.email && (
-                        <span className="flex-1 truncate text-left">
-                          {selectedSigner?.name} ({selectedSigner?.email})
-                        </span>
-                      )}
-
-                      {!selectedSigner?.email && (
-                        <span className="flex-1 truncate text-left">{selectedSigner?.email}</span>
-                      )}
-
-                      <ChevronsUpDown className="ml-2 h-4 w-4" />
-                    </Button>
-                  </PopoverTrigger>
-
-                  <PopoverContent className="p-0" align="start">
-                    <Command value={selectedSigner?.email}>
-                      <CommandInput />
-
-                      <CommandEmpty>
-                        <span className="text-muted-foreground inline-block px-4">
-                          <Trans>No recipient matching this description was found.</Trans>
-                        </span>
-                      </CommandEmpty>
-
-                      {recipientsByRoleToDisplay.map(([role, roleRecipients], roleIndex) => (
-                        <CommandGroup key={roleIndex}>
-                          <div className="text-muted-foreground mb-1 ml-2 mt-2 text-xs font-medium">
-                            {_(RECIPIENT_ROLES_DESCRIPTION[role].roleNamePlural)}
-                          </div>
-
-                          {roleRecipients.length === 0 && (
-                            <div
-                              key={`${role}-empty`}
-                              className="text-muted-foreground/80 px-4 pb-4 pt-2.5 text-center text-xs"
-                            >
-                              <Trans>No recipients with this role</Trans>
-                            </div>
-                          )}
-
-                          {roleRecipients.map((recipient) => (
-                            <CommandItem
-                              key={recipient.id}
-                              className={cn(
-                                'px-2 last:mb-1 [&:not(:first-child)]:mt-1',
-                                getSignerColorStyles(
-                                  Math.max(
-                                    recipients.findIndex((r) => r.id === recipient.id),
-                                    0,
-                                  ),
-                                ).default.comboxBoxItem,
-                                {
-                                  'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
-                                },
-                              )}
-                              onSelect={() => {
-                                setSelectedSigner(recipient);
-                                setShowRecipientsSelector(false);
-                              }}
-                            >
-                              <span
-                                className={cn('text-foreground/70 truncate', {
-                                  'text-foreground/80': recipient === selectedSigner,
-                                })}
-                              >
-                                {recipient.name && (
-                                  <span title={`${recipient.name} (${recipient.email})`}>
-                                    {recipient.name} ({recipient.email})
-                                  </span>
-                                )}
-
-                                {!recipient.name && (
-                                  <span title={recipient.email}>{recipient.email}</span>
-                                )}
-                              </span>
-
-                              <div className="ml-auto flex items-center justify-center">
-                                {recipient.sendStatus !== SendStatus.SENT ? (
-                                  <Check
-                                    aria-hidden={recipient !== selectedSigner}
-                                    className={cn('h-4 w-4 flex-shrink-0', {
-                                      'opacity-0': recipient !== selectedSigner,
-                                      'opacity-100': recipient === selectedSigner,
-                                    })}
-                                  />
-                                ) : (
-                                  <Tooltip>
-                                    <TooltipTrigger>
-                                      <Info className="ml-2 h-4 w-4" />
-                                    </TooltipTrigger>
-
-                                    <TooltipContent className="text-muted-foreground max-w-xs">
-                                      <Trans>
-                                        This document has already been sent to this recipient. You
-                                        can no longer edit this recipient.
-                                      </Trans>
-                                    </TooltipContent>
-                                  </Tooltip>
-                                )}
-                              </div>
-                            </CommandItem>
-                          ))}
-                        </CommandGroup>
-                      ))}
-                    </Command>
-                  </PopoverContent>
-                </Popover>
+                <RecipientSelector
+                  selectedRecipient={selectedSigner}
+                  onSelectedRecipientChange={setSelectedSigner}
+                  recipients={recipients}
+                  className="mb-12 mt-2"
+                />
               )}
 
               <Form {...form}>

packages/ui/primitives/field-selector.tsx

@@ -0,0 +1,128 @@
+import { FieldType } from '@prisma/client';
+import {
+  CalendarDays,
+  CheckSquare,
+  ChevronDown,
+  Contact,
+  Disc,
+  Hash,
+  Mail,
+  Type,
+  User,
+} from 'lucide-react';
+
+import { cn } from '../lib/utils';
+import { Card, CardContent } from './card';
+
+export interface FieldSelectorProps {
+  className?: string;
+  selectedField: FieldType | null;
+  onSelectedFieldChange: (fieldType: FieldType) => void;
+  disabled?: boolean;
+}
+
+export const FieldSelector = ({
+  className,
+  selectedField,
+  onSelectedFieldChange,
+  disabled = false,
+}: FieldSelectorProps) => {
+  const fieldTypes = [
+    {
+      type: FieldType.SIGNATURE,
+      label: 'Signature',
+      icon: null,
+    },
+    {
+      type: FieldType.INITIALS,
+      label: 'Initials',
+      icon: Contact,
+    },
+    {
+      type: FieldType.EMAIL,
+      label: 'Email',
+      icon: Mail,
+    },
+    {
+      type: FieldType.NAME,
+      label: 'Name',
+      icon: User,
+    },
+    {
+      type: FieldType.DATE,
+      label: 'Date',
+      icon: CalendarDays,
+    },
+    {
+      type: FieldType.TEXT,
+      label: 'Text',
+      icon: Type,
+    },
+    {
+      type: FieldType.NUMBER,
+      label: 'Number',
+      icon: Hash,
+    },
+    {
+      type: FieldType.RADIO,
+      label: 'Radio',
+      icon: Disc,
+    },
+    {
+      type: FieldType.CHECKBOX,
+      label: 'Checkbox',
+      icon: CheckSquare,
+    },
+    {
+      type: FieldType.DROPDOWN,
+      label: 'Dropdown',
+      icon: ChevronDown,
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-2 gap-2">
+      {fieldTypes.map((field) => {
+        const Icon = field.icon;
+
+        return (
+          <button
+            key={field.type}
+            type="button"
+            className="group w-full"
+            onPointerDown={() => onSelectedFieldChange(field.type)}
+            disabled={disabled}
+            data-selected={selectedField === field.type ? true : undefined}
+          >
+            <Card
+              className={cn(
+                'flex w-full cursor-pointer items-center justify-center group-disabled:opacity-50',
+                {
+                  'border-primary': selectedField === field.type,
+                },
+              )}
+            >
+              <CardContent className="relative flex items-center justify-center gap-x-2 px-6 py-4">
+                {Icon && <Icon className="text-muted-foreground h-4 w-4" />}
+                <span
+                  className={cn(
+                    'text-muted-foreground group-data-[selected]:text-foreground text-sm',
+                    field.type === FieldType.SIGNATURE && 'invisible',
+                  )}
+                >
+                  {field.label}
+                </span>
+
+                {field.type === FieldType.SIGNATURE && (
+                  <div className="text-muted-foreground font-signature absolute inset-0 flex items-center justify-center text-lg">
+                    Signature
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </button>
+        );
+      })}
+    </div>
+  );
+};

packages/ui/primitives/recipient-selector.tsx

@@ -0,0 +1,195 @@
+import { useCallback, useState } from 'react';
+
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import type { Recipient } from '@prisma/client';
+import { RecipientRole, SendStatus } from '@prisma/client';
+import { Check, ChevronsUpDown, Info } from 'lucide-react';
+import { sortBy } from 'remeda';
+
+import { RECIPIENT_ROLES_DESCRIPTION } from '@documenso/lib/constants/recipient-roles';
+
+import { getSignerColorStyles } from '../lib/signer-colors';
+import { cn } from '../lib/utils';
+import { Button } from './button';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from './command';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
+
+export interface RecipientSelectorProps {
+  className?: string;
+  selectedRecipient: Recipient | null;
+  onSelectedRecipientChange: (recipient: Recipient) => void;
+  recipients: Recipient[];
+}
+
+export const RecipientSelector = ({
+  className,
+  selectedRecipient,
+  onSelectedRecipientChange,
+  recipients,
+}: RecipientSelectorProps) => {
+  const { _ } = useLingui();
+  const [showRecipientsSelector, setShowRecipientsSelector] = useState(false);
+
+  const recipientsByRole = useCallback(() => {
+    const recipientsByRole: Record<RecipientRole, Recipient[]> = {
+      CC: [],
+      VIEWER: [],
+      SIGNER: [],
+      APPROVER: [],
+      ASSISTANT: [],
+    };
+
+    recipients.forEach((recipient) => {
+      recipientsByRole[recipient.role].push(recipient);
+    });
+
+    return recipientsByRole;
+  }, [recipients]);
+
+  const recipientsByRoleToDisplay = useCallback(() => {
+    return Object.entries(recipientsByRole())
+      .filter(
+        ([role]) =>
+          role !== RecipientRole.CC &&
+          role !== RecipientRole.VIEWER &&
+          role !== RecipientRole.ASSISTANT,
+      )
+      .map(
+        ([role, roleRecipients]) =>
+          [
+            role,
+            sortBy(
+              roleRecipients,
+              [(r) => r.signingOrder || Number.MAX_SAFE_INTEGER, 'asc'],
+              [(r) => r.id, 'asc'],
+            ),
+          ] as [RecipientRole, Recipient[]],
+      );
+  }, [recipientsByRole]);
+
+  return (
+    <Popover open={showRecipientsSelector} onOpenChange={setShowRecipientsSelector}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          className={cn(
+            'bg-background text-muted-foreground hover:text-foreground justify-between font-normal',
+            getSignerColorStyles(
+              Math.max(
+                recipients.findIndex((r) => r.id === selectedRecipient?.id),
+                0,
+              ),
+            ).default.base,
+            className,
+          )}
+        >
+          {selectedRecipient?.email && (
+            <span className="flex-1 truncate text-left">
+              {selectedRecipient?.name} ({selectedRecipient?.email})
+            </span>
+          )}
+
+          {!selectedRecipient?.email && (
+            <span className="flex-1 truncate text-left">{selectedRecipient?.email}</span>
+          )}
+
+          <ChevronsUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      </PopoverTrigger>
+
+      <PopoverContent className="p-0" align="start">
+        <Command value={selectedRecipient?.email}>
+          <CommandInput />
+
+          <CommandEmpty>
+            <span className="text-muted-foreground inline-block px-4">
+              <Trans>No recipient matching this description was found.</Trans>
+            </span>
+          </CommandEmpty>
+
+          {recipientsByRoleToDisplay().map(([role, roleRecipients], roleIndex) => (
+            <CommandGroup key={roleIndex}>
+              <div className="text-muted-foreground mb-1 ml-2 mt-2 text-xs font-medium">
+                {_(RECIPIENT_ROLES_DESCRIPTION[role].roleNamePlural)}
+              </div>
+
+              {roleRecipients.length === 0 && (
+                <div
+                  key={`${role}-empty`}
+                  className="text-muted-foreground/80 px-4 pb-4 pt-2.5 text-center text-xs"
+                >
+                  <Trans>No recipients with this role</Trans>
+                </div>
+              )}
+
+              {roleRecipients.map((recipient) => (
+                <CommandItem
+                  key={recipient.id}
+                  className={cn(
+                    'px-2 last:mb-1 [&:not(:first-child)]:mt-1',
+                    getSignerColorStyles(
+                      Math.max(
+                        recipients.findIndex((r) => r.id === recipient.id),
+                        0,
+                      ),
+                    ).default.comboxBoxItem,
+                    {
+                      'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
+                    },
+                  )}
+                  onSelect={() => {
+                    onSelectedRecipientChange(recipient);
+                    setShowRecipientsSelector(false);
+                  }}
+                >
+                  <span
+                    className={cn('text-foreground/70 truncate', {
+                      'text-foreground/80': recipient === selectedRecipient,
+                    })}
+                  >
+                    {recipient.name && (
+                      <span title={`${recipient.name} (${recipient.email})`}>
+                        {recipient.name} ({recipient.email})
+                      </span>
+                    )}
+
+                    {!recipient.name && <span title={recipient.email}>{recipient.email}</span>}
+                  </span>
+
+                  <div className="ml-auto flex items-center justify-center">
+                    {recipient.sendStatus !== SendStatus.SENT ? (
+                      <Check
+                        aria-hidden={recipient !== selectedRecipient}
+                        className={cn('h-4 w-4 flex-shrink-0', {
+                          'opacity-0': recipient !== selectedRecipient,
+                          'opacity-100': recipient === selectedRecipient,
+                        })}
+                      />
+                    ) : (
+                      <Tooltip>
+                        <TooltipTrigger>
+                          <Info className="ml-2 h-4 w-4" />
+                        </TooltipTrigger>
+
+                        <TooltipContent className="text-muted-foreground max-w-xs">
+                          <Trans>
+                            This document has already been sent to this recipient. You can no longer
+                            edit this recipient.
+                          </Trans>
+                        </TooltipContent>
+                      </Tooltip>
+                    )}
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          ))}
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};