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

feat: wip

Browse Source
This commit is contained in:
David Nguyen
2023-12-27 13:04:24 +11:00
parent f7cf33c61b
commit 9d626473c8
140 changed files with 9604 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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">{primaryText}</span>
<span className="text-muted-foreground 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';

167
packages/ui/primitives/combobox.tsx
View File

@ -1,77 +1,162 @@
'use client';
import * as React from 'react';
import { Check, ChevronsUpDown } from 'lucide-react';
import { Role } from '@documenso/prisma/client';
import { AnimatePresence, motion } from 'framer-motion';
import { Check, ChevronsUpDown, Loader, XIcon } from 'lucide-react';
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[];
onChange: (_values: string[]) => void;
type OptionValue = string | number | boolean | null;
type ComboBoxOption<T = OptionValue> = {
label: string;
value: T;
disabled?: boolean;
};
const Combobox = ({ listValues, onChange }: ComboboxProps) => {
type ComboboxProps<T = OptionValue> = {
emptySelectionPlaceholder?: React.ReactNode | string;
enableClearAllButton?: boolean;
loading?: boolean;
inputPlaceholder?: string;
onChange: (_values: T[]) => void;
options: ComboBoxOption<T>[];
selectedValues: T[];
};
export function Combobox<T = OptionValue>({
emptySelectionPlaceholder = 'Select values...',
enableClearAllButton,
inputPlaceholder,
loading,
onChange,
options,
selectedValues,
}: ComboboxProps<T>) {
const [open, setOpen] = React.useState(false);
const [selectedValues, setSelectedValues] = React.useState<string[]>([]);
const dbRoles = Object.values(Role);
React.useEffect(() => {
setSelectedValues(listValues);
}, [listValues]);
const handleSelect = (selectedOption: T) => {
let newSelectedOptions = [...selectedValues, selectedOption];
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];
if (selectedValues.includes(selectedOption)) {
newSelectedOptions = selectedValues.filter((v) => v !== selectedOption);
}
setSelectedValues(newSelectedValues);
onChange(newSelectedValues);
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]);
return (
<Popover open={open} onOpenChange={setOpen}>
<Popover open={open && !loading} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
disabled={loading}
aria-expanded={open}
className="w-[200px] justify-between"
className="relative w-[200px] px-3"
>
{selectedValues.length > 0 ? selectedValues.join(', ') : 'Select values...'}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
<AnimatePresence>
{loading ? (
<div className="absolute inset-0 flex items-center justify-center">
<Loader className="h-5 w-5 animate-spin text-gray-500 dark:text-gray-100" />
</div>
) : (
<motion.div
className="flex w-full justify-between"
initial={{
opacity: 0,
}}
animate={{
opacity: 1,
}}
exit={{
opacity: 0,
}}
>
<span className="truncate">{buttonLabel}</span>
<div className="ml-2 flex flex-row items-center">
{enableClearAllButton && selectedValues.length > 0 && (
// Todo: Teams - Can't have nested buttons.
<button
className="mr-1 flex h-4 w-4 items-center justify-center rounded-full bg-gray-300"
onClick={(e) => {
e.preventDefault();
onChange([]);
}}
>
<XIcon className="text-muted-foreground h-3.5 w-3.5" />
</button>
)}
<ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
</div>
</motion.div>
)}
</AnimatePresence>
</Button>
</PopoverTrigger>
<PopoverContent className="w-[200px] p-0">
<Command>
<CommandInput placeholder={selectedValues.join(', ')} />
<CommandInput placeholder={inputPlaceholder} />
<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>
))}
{options.map((option, i) => {
return (
<CommandItem key={i} onSelect={() => handleSelect(option.value)}>
<Check
className={cn(
'mr-2 h-4 w-4',
selectedValues.includes(option.value) ? 'opacity-100' : 'opacity-0',
)}
/>
{typeof option === 'string' ? option : option.label}
</CommandItem>
);
})}
</CommandGroup>
</Command>
</PopoverContent>
</Popover>
);
};
export { Combobox };
}

34
packages/ui/primitives/data-table.tsx
View File

@ -2,36 +2,49 @@
import React, { useMemo } from 'react';
import {
import type {
ColumnDef,
PaginationState,
Table as TTable,
Updater,
flexRender,
getCoreRowModel,
useReactTable,
VisibilityState,
} from '@tanstack/react-table';
import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
import { Skeleton } from './skeleton';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table';
export type DataTableChildren<TData> = (_table: TTable<TData>) => React.ReactNode;
export interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
columnVisibility?: VisibilityState;
data: TData[];
perPage?: number;
currentPage?: number;
totalPages?: number;
onPaginationChange?: (_page: number, _perPage: number) => void;
children?: DataTableChildren<TData>;
skeleton?: {
enable: boolean;
rows: number;
component?: React.ReactNode;
};
error?: {
enable: boolean;
component?: React.ReactNode;
};
}
export function DataTable<TData, TValue>({
columns,
columnVisibility,
data,
error,
perPage,
currentPage,
totalPages,
skeleton,
onPaginationChange,
children,
}: DataTableProps<TData, TValue>) {
@ -67,6 +80,7 @@ export function DataTable<TData, TValue>({
getCoreRowModel: getCoreRowModel(),
state: {
pagination: manualPagination ? pagination : undefined,
columnVisibility,
},
manualPagination,
pageCount: totalPages,
@ -103,6 +117,18 @@ export function DataTable<TData, TValue>({
))}
</TableRow>
))
) : error?.enable ? (
<TableRow>
{error.component ?? (
<TableCell colSpan={columns.length} className="h-24 text-center">
Something went wrong.
</TableCell>
)}
</TableRow>
) : skeleton?.enable ? (
Array.from({ length: skeleton.rows }).map((_, i) => (
<TableRow key={`skeleton-row-${i}`}>{skeleton.component ?? <Skeleton />}</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center">

39
packages/ui/primitives/input.tsx
View File

@ -1,6 +1,9 @@
import * as React from 'react';
import { Eye, EyeOff } from 'lucide-react';
import { cn } from '../lib/utils';
import { Button } from './button';
export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
@ -25,4 +28,38 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
Input.displayName = 'Input';
export { Input };
const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(
({ className, ...props }, ref) => {
const [showPassword, setShowPassword] = React.useState(false);
return (
<div className="relative">
<Input
id="password"
type={showPassword ? 'text' : 'password'}
className={cn('pr-10', className)}
ref={ref}
{...props}
/>
<Button
variant="link"
type="button"
className="absolute right-0 top-0 flex h-full items-center justify-center pr-3"
aria-label={showPassword ? 'Mask password' : 'Reveal password'}
onClick={() => setShowPassword((show) => !show)}
>
{showPassword ? (
<EyeOff aria-hidden className="text-muted-foreground h-5 w-5" />
) : (
<Eye aria-hidden className="text-muted-foreground h-5 w-5" />
)}
</Button>
</div>
);
},
);
PasswordInput.displayName = 'Input';
export { Input, PasswordInput };