Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 00:03:33 +10:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into reattach-pdf

Browse Source
This commit is contained in:
Prajwal Kulkarni
2024-02-08 19:24:09 +05:30
committed by GitHub
parent 4855882ae6 e97b9b4f1c
commit 5391dd91b0
237 changed files with 13823 additions and 1039 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/ui/components/animate/animate-generic-fade-in-out.tsx Normal file
View File

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

4
packages/ui/package.json
View File

@ -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",

35
packages/ui/primitives/avatar.tsx
View File

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

3
packages/ui/primitives/badge.tsx
View File

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

1
packages/ui/primitives/button.tsx
View File

@ -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',

4
packages/ui/primitives/command.tsx
View File

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

5
packages/ui/primitives/dialog.tsx
View File

@ -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}
/>
);

4
packages/ui/primitives/document-flow/add-fields.tsx
View File

@ -406,7 +406,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={() => {
@ -442,7 +442,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">

5
packages/ui/primitives/document-flow/add-title.tsx
View File

@ -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} />

2
packages/ui/primitives/document-flow/add-title.types.ts
View File

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

165
packages/ui/primitives/multi-select-combobox.tsx Normal file
View File

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

82
packages/ui/primitives/multiselect-combobox.tsx
View File

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

9
packages/ui/primitives/sheet.tsx
View File

@ -3,7 +3,8 @@
import * as React from 'react';
import * as SheetPrimitive from '@radix-ui/react-dialog';
import { VariantProps, cva } from 'class-variance-authority';
import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';
import { X } from 'lucide-react';
import { cn } from '../lib/utils';
@ -12,7 +13,7 @@ const Sheet = SheetPrimitive.Root;
const SheetTrigger = SheetPrimitive.Trigger;
const portalVariants = cva('fixed inset-0 z-50 flex', {
const portalVariants = cva('fixed inset-0 z-[61] flex', {
variants: {
position: {
top: 'items-start',
@ -42,7 +43,7 @@ const SheetOverlay = React.forwardRef<
>(({ className, children: _children, ...props }, ref) => (
<SheetPrimitive.Overlay
className={cn(
'bg-background/80 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 backdrop-blur-sm transition-all duration-100',
'bg-background/80 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-[61] backdrop-blur-sm transition-all duration-100',
className,
)}
{...props}
@ -53,7 +54,7 @@ const SheetOverlay = React.forwardRef<
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
const sheetVariants = cva(
'fixed z-50 scale-100 gap-4 bg-background p-6 opacity-100 shadow-lg border',
'fixed z-[61] scale-100 gap-4 bg-background p-6 opacity-100 shadow-lg border',
{
variants: {
position: {