Merge branch 'main' into transparent-fields

2025-11-13 00:03:33 +10:00 · 2024-02-07 13:34:46 +05:30
parent d598677dc5 70c58470c1
commit 7ef771533a
206 changed files with 12954 additions and 976 deletions
--- a/packages/ui/components/animate/animate-generic-fade-in-out.tsx
+++ b/packages/ui/components/animate/animate-generic-fade-in-out.tsx
@ -0,0 +1,27 @@
+'use client';
+
+import { motion } from 'framer-motion';
+
+type AnimateGenericFadeInOutProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export const AnimateGenericFadeInOut = ({ children, className }: AnimateGenericFadeInOutProps) => {
+  return (
+    <motion.section
+      initial={{
+        opacity: 0,
+      }}
+      animate={{
+        opacity: 1,
+      }}
+      exit={{
+        opacity: 0,
+      }}
+      className={className}
+    >
+      {children}
+    </motion.section>
+  );
+};
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@ -35,7 +35,7 @@
    "@radix-ui/react-checkbox": "^1.0.3",
    "@radix-ui/react-collapsible": "^1.0.2",
    "@radix-ui/react-context-menu": "^2.1.3",
-    "@radix-ui/react-dialog": "^1.0.3",
+    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.4",
    "@radix-ui/react-hover-card": "^1.0.5",
    "@radix-ui/react-label": "^2.0.1",
@ -45,7 +45,7 @@
    "@radix-ui/react-progress": "^1.0.2",
    "@radix-ui/react-radio-group": "^1.1.2",
    "@radix-ui/react-scroll-area": "^1.0.3",
-    "@radix-ui/react-select": "^1.2.1",
+    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.2",
    "@radix-ui/react-slider": "^1.1.1",
    "@radix-ui/react-slot": "^1.0.2",
--- a/packages/ui/primitives/avatar.tsx
+++ b/packages/ui/primitives/avatar.tsx
@ -48,4 +48,37 @@ const AvatarFallback = React.forwardRef<

 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;

-export { Avatar, AvatarImage, AvatarFallback };
+type AvatarWithTextProps = {
+  avatarClass?: string;
+  avatarFallback: string;
+  className?: string;
+  primaryText: React.ReactNode;
+  secondaryText?: React.ReactNode;
+  rightSideComponent?: React.ReactNode;
+};
+
+const AvatarWithText = ({
+  avatarClass,
+  avatarFallback,
+  className,
+  primaryText,
+  secondaryText,
+  rightSideComponent,
+}: AvatarWithTextProps) => (
+  <div className={cn('flex w-full max-w-xs items-center gap-2', className)}>
+    <Avatar
+      className={cn('dark:border-border h-10 w-10 border-2 border-solid border-white', avatarClass)}
+    >
+      <AvatarFallback className="text-xs text-gray-400">{avatarFallback}</AvatarFallback>
+    </Avatar>
+
+    <div className="flex flex-col text-left text-sm font-normal">
+      <span className="text-foreground truncate">{primaryText}</span>
+      <span className="text-muted-foreground truncate text-xs">{secondaryText}</span>
+    </div>
+
+    {rightSideComponent}
+  </div>
+);
+
+export { Avatar, AvatarImage, AvatarFallback, AvatarWithText };
--- a/packages/ui/primitives/badge.tsx
+++ b/packages/ui/primitives/badge.tsx
@ -1,6 +1,7 @@
 import * as React from 'react';

-import { VariantProps, cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';

 import { cn } from '../lib/utils';

--- a/packages/ui/primitives/button.tsx
+++ b/packages/ui/primitives/button.tsx
@ -18,6 +18,7 @@ const buttonVariants = cva(
        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
        link: 'underline-offset-4 hover:underline text-primary',
+        none: '',
      },
      size: {
        default: 'h-10 py-2 px-4',
--- a/packages/ui/primitives/command.tsx
+++ b/packages/ui/primitives/command.tsx
@ -92,7 +92,7 @@ const CommandGroup = React.forwardRef<
  <CommandPrimitive.Group
    ref={ref}
    className={cn(
-      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground mx-2 overflow-hidden border-b pb-2 last:border-0 [&_[cmdk-group-heading]]:mt-2 [&_[cmdk-group-heading]]:px-0 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:opacity-50 ',
+      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden border-b p-1 last:border-0 [&_[cmdk-group-heading]]:mt-2 [&_[cmdk-group-heading]]:px-0 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:opacity-50 ',
      className,
    )}
    {...props}
@ -121,7 +121,7 @@ const CommandItem = React.forwardRef<
  <CommandPrimitive.Item
    ref={ref}
    className={cn(
-      'aria-selected:bg-accent aria-selected:text-accent-foreground relative -mx-2 -my-1 flex cursor-default select-none items-center rounded-lg px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
      className,
    )}
    {...props}
--- a/packages/ui/primitives/dialog.tsx
+++ b/packages/ui/primitives/dialog.tsx
@ -87,7 +87,10 @@ DialogHeader.displayName = 'DialogHeader';

 const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div
-    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    className={cn(
+      'flex flex-col-reverse space-y-2 space-y-reverse sm:flex-row sm:justify-end sm:space-x-2 sm:space-y-0',
+      className,
+    )}
    {...props}
  />
 );
--- a/packages/ui/primitives/document-dropzone.tsx
+++ b/packages/ui/primitives/document-dropzone.tsx
@ -5,6 +5,7 @@ import { motion } from 'framer-motion';
 import { Plus } from 'lucide-react';
 import { useDropzone } from 'react-dropzone';

+import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
 import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';

 import { cn } from '../lib/utils';
@ -89,6 +90,7 @@ export type DocumentDropzoneProps = {
  disabled?: boolean;
  disabledMessage?: string;
  onDrop?: (_file: File) => void | Promise<void>;
+  onDropRejected?: () => void | Promise<void>;
  type?: 'document' | 'template';
  [key: string]: unknown;
 };
@ -96,6 +98,7 @@ export type DocumentDropzoneProps = {
 export const DocumentDropzone = ({
  className,
  onDrop,
+  onDropRejected,
  disabled,
  disabledMessage = 'You cannot upload documents at this time.',
  type = 'document',
@ -112,7 +115,12 @@ export const DocumentDropzone = ({
        void onDrop(acceptedFile);
      }
    },
-    maxSize: megabytesToBytes(50),
+    onDropRejected: () => {
+      if (onDropRejected) {
+        void onDropRejected();
+      }
+    },
+    maxSize: megabytesToBytes(APP_DOCUMENT_UPLOAD_SIZE_LIMIT),
  });

  return (
@ -175,7 +183,7 @@ export const DocumentDropzone = ({
          </p>

          <p className="text-muted-foreground/80 mt-1 text-sm">
-            {disabled ? disabledMessage : 'Drag & drop your document here.'}
+            {disabled ? disabledMessage : 'Drag & drop your PDF here.'}
          </p>
        </CardContent>
      </Card>
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@ -403,7 +403,7 @@ export const AddFieldsFormPartial = ({
                      {recipients.map((recipient) => (
                        <CommandItem
                          key={recipient.id}
-                          className={cn('!rounded-2xl px-4 last:mb-1 [&:not(:first-child)]:mt-1', {
+                          className={cn('px-4 last:mb-1 [&:not(:first-child)]:mt-1', {
                            'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
                          })}
                          onSelect={() => {
@ -439,7 +439,7 @@ export const AddFieldsFormPartial = ({
                            ) : (
                              <Tooltip>
                                <TooltipTrigger>
-                                  <Info className="mx-2 h-4 w-4" />
+                                  <Info className="ml-2 h-4 w-4" />
                                </TooltipTrigger>

                                <TooltipContent className="text-muted-foreground max-w-xs">
--- a/packages/ui/primitives/document-flow/add-title.tsx
+++ b/packages/ui/primitives/document-flow/add-title.tsx
@ -1,5 +1,6 @@
 'use client';

+import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';

 import type { Field, Recipient } from '@documenso/prisma/client';
@ -10,6 +11,7 @@ import { Input } from '../input';
 import { Label } from '../label';
 import { useStep } from '../stepper';
 import type { TAddTitleFormSchema } from './add-title.types';
+import { ZAddTitleFormSchema } from './add-title.types';
 import {
  DocumentFlowFormContainerActions,
  DocumentFlowFormContainerContent,
@ -40,6 +42,7 @@ export const AddTitleFormPartial = ({
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<TAddTitleFormSchema>({
+    resolver: zodResolver(ZAddTitleFormSchema),
    defaultValues: {
      title: document.title,
    },
@ -71,7 +74,7 @@ export const AddTitleFormPartial = ({
                id="title"
                className="bg-background my-2"
                disabled={isSubmitting}
-                {...register('title', { required: "Title can't be empty" })}
+                {...register('title')}
              />

              <FormErrorMessage className="mt-2" error={errors.title} />
--- a/packages/ui/primitives/document-flow/add-title.types.ts
+++ b/packages/ui/primitives/document-flow/add-title.types.ts
@ -1,7 +1,7 @@
 import { z } from 'zod';

 export const ZAddTitleFormSchema = z.object({
-  title: z.string().min(1),
+  title: z.string().trim().min(1, { message: "Title can't be empty" }),
 });

 export type TAddTitleFormSchema = z.infer<typeof ZAddTitleFormSchema>;
--- a/packages/ui/primitives/multi-select-combobox.tsx
+++ b/packages/ui/primitives/multi-select-combobox.tsx
@ -0,0 +1,165 @@
+'use client';
+
+import * as React from 'react';
+
+import { AnimatePresence } from 'framer-motion';
+import { Check, ChevronsUpDown, Loader, XIcon } from 'lucide-react';
+
+import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
+
+import { cn } from '../lib/utils';
+import { Button } from './button';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from './command';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+
+type OptionValue = string | number | boolean | null;
+
+type ComboBoxOption<T = OptionValue> = {
+  label: string;
+  value: T;
+  disabled?: boolean;
+};
+
+type MultiSelectComboboxProps<T = OptionValue> = {
+  emptySelectionPlaceholder?: React.ReactNode | string;
+  enableClearAllButton?: boolean;
+  loading?: boolean;
+  inputPlaceholder?: string;
+  onChange: (_values: T[]) => void;
+  options: ComboBoxOption<T>[];
+  selectedValues: T[];
+};
+
+/**
+ * Multi select combo box component which supports:
+ *
+ * - Label/value pairs
+ * - Loading state
+ * - Clear all button
+ */
+export function MultiSelectCombobox<T = OptionValue>({
+  emptySelectionPlaceholder = 'Select values...',
+  enableClearAllButton,
+  inputPlaceholder,
+  loading,
+  onChange,
+  options,
+  selectedValues,
+}: MultiSelectComboboxProps<T>) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleSelect = (selectedOption: T) => {
+    let newSelectedOptions = [...selectedValues, selectedOption];
+
+    if (selectedValues.includes(selectedOption)) {
+      newSelectedOptions = selectedValues.filter((v) => v !== selectedOption);
+    }
+
+    onChange(newSelectedOptions);
+
+    setOpen(false);
+  };
+
+  const selectedOptions = React.useMemo(() => {
+    return selectedValues.map((value): ComboBoxOption<T> => {
+      const foundOption = options.find((option) => option.value === value);
+
+      if (foundOption) {
+        return foundOption;
+      }
+
+      let label = '';
+
+      if (typeof value === 'string' || typeof value === 'number') {
+        label = value.toString();
+      }
+
+      return {
+        label,
+        value,
+      };
+    });
+  }, [selectedValues, options]);
+
+  const buttonLabel = React.useMemo(() => {
+    if (loading) {
+      return '';
+    }
+
+    if (selectedOptions.length === 0) {
+      return emptySelectionPlaceholder;
+    }
+
+    return selectedOptions.map((option) => option.label).join(', ');
+  }, [selectedOptions, emptySelectionPlaceholder, loading]);
+
+  const showClearButton = enableClearAllButton && selectedValues.length > 0;
+
+  return (
+    <Popover open={open && !loading} onOpenChange={setOpen}>
+      <div className="relative">
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            disabled={loading}
+            aria-expanded={open}
+            className="w-[200px] px-3"
+          >
+            <AnimatePresence>
+              {loading ? (
+                <div className="flex items-center justify-center">
+                  <Loader className="h-5 w-5 animate-spin text-gray-500 dark:text-gray-100" />
+                </div>
+              ) : (
+                <AnimateGenericFadeInOut className="flex w-full justify-between">
+                  <span className="truncate">{buttonLabel}</span>
+
+                  <div
+                    className={cn('ml-2 flex flex-row items-center', {
+                      'ml-6': showClearButton,
+                    })}
+                  >
+                    <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+                  </div>
+                </AnimateGenericFadeInOut>
+              )}
+            </AnimatePresence>
+          </Button>
+        </PopoverTrigger>
+
+        {/* This is placed outside the trigger since we can't have nested buttons. */}
+        {showClearButton && !loading && (
+          <div className="absolute bottom-0 right-8 top-0 flex items-center justify-center">
+            <button
+              className="flex h-4 w-4 items-center justify-center rounded-full bg-gray-300 dark:bg-neutral-700"
+              onClick={() => onChange([])}
+            >
+              <XIcon className="text-muted-foreground h-3.5 w-3.5" />
+            </button>
+          </div>
+        )}
+      </div>
+
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder={inputPlaceholder} />
+          <CommandEmpty>No value found.</CommandEmpty>
+          <CommandGroup>
+            {options.map((option, i) => (
+              <CommandItem key={i} onSelect={() => handleSelect(option.value)}>
+                <Check
+                  className={cn(
+                    'mr-2 h-4 w-4',
+                    selectedValues.includes(option.value) ? 'opacity-100' : 'opacity-0',
+                  )}
+                />
+                {option.label}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
--- a/packages/ui/primitives/multiselect-combobox.tsx
+++ b/packages/ui/primitives/multiselect-combobox.tsx
@ -1,82 +0,0 @@
-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';
-
-type ComboboxProps = {
-  listValues: string[];
-  onChange: (_values: string[]) => void;
-};
-
-const MultiSelectCombobox = ({ listValues, onChange }: ComboboxProps) => {
-  const [open, setOpen] = React.useState(false);
-  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
-  const dbRoles = Object.values(Role);
-
-  React.useEffect(() => {
-    setSelectedValues(listValues);
-  }, [listValues]);
-
-  const allRoles = [...new Set([...dbRoles, ...selectedValues])];
-
-  const handleSelect = (currentValue: string) => {
-    let newSelectedValues;
-    if (selectedValues.includes(currentValue)) {
-      newSelectedValues = selectedValues.filter((value) => value !== currentValue);
-    } else {
-      newSelectedValues = [...selectedValues, currentValue];
-    }
-
-    setSelectedValues(newSelectedValues);
-    onChange(newSelectedValues);
-    setOpen(false);
-  };
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          className="w-[200px] justify-between"
-        >
-          {selectedValues.length > 0 ? selectedValues.join(', ') : 'Select values...'}
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
-        <Command>
-          <CommandInput placeholder={selectedValues.join(', ')} />
-          <CommandEmpty>No value found.</CommandEmpty>
-          <CommandGroup>
-            {allRoles.map((value: string, i: number) => (
-              <CommandItem key={i} onSelect={() => handleSelect(value)}>
-                <Check
-                  className={cn(
-                    'mr-2 h-4 w-4',
-                    selectedValues.includes(value) ? 'opacity-100' : 'opacity-0',
-                  )}
-                />
-                {value}
-              </CommandItem>
-            ))}
-          </CommandGroup>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-};
-
-export { MultiSelectCombobox };