Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2026-07-24 08:54:20 +10:00
Code Issues Packages Projects Releases Wiki Activity

chore: fix merge conflicts

Browse Source
This commit is contained in:
ephraimduncan
2025-12-29 20:02:51 +00:00
parent 7a499270be 1e20561e91
commit 3976531045
165 changed files with 6291 additions and 2774 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/primitives/data-table-pagination.tsx
+13 -5
View File
@@ -23,7 +23,7 @@ export function DataTablePagination<TData>({
}: DataTablePaginationProps<TData>) {
return (
<div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-4 px-2">
<div className="text-muted-foreground flex-1 text-sm">
<div className="flex-1 text-sm text-muted-foreground">
{match(additionalInformation)
.with('SelectedCount', () => (
<span>
@@ -95,7 +95,9 @@ export function DataTablePagination<TData>({
onClick={() => table.setPageIndex(0)}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to first page</span>
<span className="sr-only">
<Trans>Go to first page</Trans>
</span>
<ChevronsLeft className="h-4 w-4" />
</Button>
<Button
@@ -104,7 +106,9 @@ export function DataTablePagination<TData>({
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
<span className="sr-only">Go to previous page</span>
<span className="sr-only">
<Trans>Go to previous page</Trans>
</span>
<ChevronLeft className="h-4 w-4" />
</Button>
<Button
@@ -113,7 +117,9 @@ export function DataTablePagination<TData>({
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to next page</span>
<span className="sr-only">
<Trans>Go to next page</Trans>
</span>
<ChevronRight className="h-4 w-4" />
</Button>
<Button
@@ -122,7 +128,9 @@ export function DataTablePagination<TData>({
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()}
>
<span className="sr-only">Go to last page</span>
<span className="sr-only">
<Trans>Go to last page</Trans>
</span>
<ChevronsRight className="h-4 w-4" />
</Button>
</div>
packages/ui/primitives/dialog.tsx
+8 -5
View File
@@ -1,5 +1,6 @@
import * as React from 'react';
import { Trans } from '@lingui/react/macro';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { X } from 'lucide-react';
@@ -38,7 +39,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
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',
'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in',
className,
)}
{...props}
@@ -65,7 +66,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
'bg-background animate-in data-[state=open]:fade-in-90 sm:zoom-in-90 data-[state=open]:slide-in-from-bottom-10 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-50 grid w-full gap-4 border p-6 shadow-lg sm:max-w-lg sm:rounded-lg',
'fixed z-50 grid w-full gap-4 border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0',
{
'rounded-b-xl': position === 'start',
'rounded-t-xl': position === 'end',
@@ -78,10 +79,12 @@ const DialogContent = React.forwardRef<
{!hideClose && (
<DialogPrimitive.Close
data-testid="btn-dialog-close"
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
>
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
<span className="sr-only">
<Trans>Close</Trans>
</span>
</DialogPrimitive.Close>
)}
</DialogPrimitive.Content>
@@ -128,7 +131,7 @@ const DialogDescription = React.forwardRef<
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
ref={ref}
className={cn('text-muted-foreground text-sm', className)}
className={cn('text-sm text-muted-foreground', className)}
{...props}
/>
));
packages/ui/primitives/document-flow/add-fields.tsx
+11 -11
View File
@@ -626,7 +626,7 @@ export const AddFieldsFormPartial = ({
{selectedField && (
<div
className={cn(
'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center rounded-[2px] bg-white ring-2 transition duration-200 [container-type:size]',
'dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center rounded-[2px] bg-white text-muted-foreground ring-2 transition duration-200 [container-type:size]',
selectedSignerStyles?.base,
{
'-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
@@ -728,7 +728,7 @@ export const AddFieldsFormPartial = ({
<CardContent className="flex flex-col items-center justify-center px-6 py-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground font-signature flex items-center justify-center gap-x-1.5 text-lg font-normal',
'flex items-center justify-center gap-x-1.5 font-signature text-lg font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<Trans>Signature</Trans>
@@ -752,7 +752,7 @@ export const AddFieldsFormPartial = ({
<CardContent className="flex flex-col items-center justify-center px-6 py-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
'flex items-center justify-center gap-x-1.5 text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<Contact className="h-4 w-4" />
@@ -777,7 +777,7 @@ export const AddFieldsFormPartial = ({
<CardContent className="flex flex-col items-center justify-center px-6 py-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
'flex items-center justify-center gap-x-1.5 text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<Mail className="h-4 w-4" />
@@ -802,7 +802,7 @@ export const AddFieldsFormPartial = ({
<CardContent className="p-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
'flex items-center justify-center gap-x-1.5 text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<User className="h-4 w-4" />
@@ -827,7 +827,7 @@ export const AddFieldsFormPartial = ({
<CardContent className="p-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
'flex items-center justify-center gap-x-1.5 text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<CalendarDays className="h-4 w-4" />
@@ -852,7 +852,7 @@ export const AddFieldsFormPartial = ({
<CardContent className="p-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
'flex items-center justify-center gap-x-1.5 text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<Type className="h-4 w-4" />
@@ -877,7 +877,7 @@ export const AddFieldsFormPartial = ({
<CardContent className="p-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
'flex items-center justify-center gap-x-1.5 text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<Hash className="h-4 w-4" />
@@ -902,7 +902,7 @@ export const AddFieldsFormPartial = ({
<CardContent className="p-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
'flex items-center justify-center gap-x-1.5 text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<Disc className="h-4 w-4" />
@@ -927,7 +927,7 @@ export const AddFieldsFormPartial = ({
<CardContent className="p-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
'flex items-center justify-center gap-x-1.5 text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<CheckSquare className="h-4 w-4" />
@@ -953,7 +953,7 @@ export const AddFieldsFormPartial = ({
<CardContent className="p-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
'flex items-center justify-center gap-x-1.5 text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<ChevronDown className="h-4 w-4" />
packages/ui/primitives/document-flow/add-subject.tsx
+16 -12
View File
@@ -257,8 +257,10 @@ export const AddSubjectFormPartial = ({
render={({ field }) => (
<FormItem>
<FormLabel>
<Trans>Reply To Email</Trans>{' '}
<span className="text-muted-foreground">(Optional)</span>
<Trans>
Reply To Email{' '}
<span className="text-muted-foreground">(Optional)</span>
</Trans>
</FormLabel>
<FormControl>
@@ -295,8 +297,9 @@ export const AddSubjectFormPartial = ({
render={({ field }) => (
<FormItem>
<FormLabel>
<Trans>Subject</Trans>{' '}
<span className="text-muted-foreground">(Optional)</span>
<Trans>
Subject <span className="text-muted-foreground">(Optional)</span>
</Trans>
</FormLabel>
<FormControl>
@@ -313,13 +316,14 @@ export const AddSubjectFormPartial = ({
render={({ field }) => (
<FormItem>
<FormLabel className="flex flex-row items-center">
<Trans>Message</Trans>{' '}
<span className="text-muted-foreground">(Optional)</span>
<Trans>
Message <span className="text-muted-foreground">(Optional)</span>
</Trans>
<Tooltip>
<TooltipTrigger>
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="text-muted-foreground p-4">
<TooltipContent className="p-4 text-muted-foreground">
<DocumentSendEmailMessageHelper />
</TooltipContent>
</Tooltip>
@@ -327,7 +331,7 @@ export const AddSubjectFormPartial = ({
<FormControl>
<Textarea
className="bg-background mt-2 h-16 resize-none"
className="mt-2 h-16 resize-none bg-background"
{...field}
maxLength={5000}
/>
@@ -356,7 +360,7 @@ export const AddSubjectFormPartial = ({
className="rounded-lg border"
>
{document.status === DocumentStatus.DRAFT ? (
<div className="text-muted-foreground py-16 text-center text-sm">
<div className="py-16 text-center text-sm text-muted-foreground">
<p>
<Trans>We won't send anything to notify recipients.</Trans>
</p>
@@ -369,7 +373,7 @@ export const AddSubjectFormPartial = ({
</p>
</div>
) : (
<ul className="text-muted-foreground divide-y">
<ul className="divide-y text-muted-foreground">
{recipients.length === 0 && (
<li className="flex flex-col items-center justify-center py-6 text-sm">
<Trans>No recipients</Trans>
@@ -384,10 +388,10 @@ export const AddSubjectFormPartial = ({
<AvatarWithText
avatarFallback={recipient.email.slice(0, 1).toUpperCase()}
primaryText={
<p className="text-muted-foreground text-sm">{recipient.email}</p>
<p className="text-sm text-muted-foreground">{recipient.email}</p>
}
secondaryText={
<p className="text-muted-foreground/70 text-xs">
<p className="text-xs text-muted-foreground/70">
{_(RECIPIENT_ROLES_DESCRIPTION[recipient.role].roleName)}
</p>
}
packages/ui/primitives/document-flow/document-flow-root.tsx
+10 -13
View File
@@ -24,7 +24,7 @@ export const DocumentFlowFormContainer = ({
<form
id={id}
className={cn(
'dark:bg-background border-border bg-widget sticky top-20 flex h-full max-h-[64rem] flex-col overflow-auto rounded-xl border px-4 py-6',
'sticky top-20 flex h-full max-h-[64rem] flex-col overflow-auto rounded-xl border border-border bg-widget px-4 py-6 dark:bg-background',
className,
)}
{...props}
@@ -47,11 +47,11 @@ export const DocumentFlowFormContainerHeader = ({
return (
<>
<h3 className="text-foreground text-2xl font-semibold">{_(title)}</h3>
<h3 className="text-2xl font-semibold text-foreground">{_(title)}</h3>
<p className="text-muted-foreground mt-2 text-sm">{_(description)}</p>
<p className="mt-2 text-sm text-muted-foreground">{_(description)}</p>
<hr className="border-border mb-8 mt-4" />
<hr className="mb-8 mt-4 border-border" />
</>
);
};
@@ -66,10 +66,7 @@ export const DocumentFlowFormContainerContent = ({
...props
}: DocumentFlowFormContainerContentProps) => {
return (
<div
className={cn('custom-scrollbar -mx-2 flex flex-1 flex-col overflow-hidden px-2', className)}
{...props}
>
<div className={cn('custom-scrollbar -mx-2 flex flex-1 flex-col px-2', className)} {...props}>
<div className="flex flex-1 flex-col">{children}</div>
</div>
);
@@ -102,17 +99,17 @@ export const DocumentFlowFormContainerStep = ({
}: DocumentFlowFormContainerStepProps) => {
return (
<div>
<p className="text-muted-foreground text-sm">
<p className="text-sm text-muted-foreground">
<Trans>
Step <span>{`${step} of ${maxStep}`}</span>
</Trans>
</p>
<div className="bg-muted relative mt-4 h-[2px] rounded-md">
<div className="relative mt-4 h-[2px] rounded-md bg-muted">
<motion.div
layout="size"
layoutId="document-flow-container-step"
className="bg-documenso absolute inset-y-0 left-0"
className="absolute inset-y-0 left-0 bg-primary"
style={{
width: `${(100 / maxStep) * step}%`,
}}
@@ -150,7 +147,7 @@ export const DocumentFlowFormContainerActions = ({
<div className="mt-4 flex gap-x-4">
<Button
type="button"
className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
className="flex-1 bg-black/5 hover:bg-black/10 dark:bg-muted dark:hover:bg-muted/80"
size="lg"
variant="secondary"
disabled={disabled || loading || !canGoBack || !onGoBackClick}
@@ -161,7 +158,7 @@ export const DocumentFlowFormContainerActions = ({
<Button
type="button"
className="bg-documenso flex-1"
className="flex-1 bg-primary"
size="lg"
disabled={disabled || disableNextStep || loading || !canGoNext}
loading={loading}
packages/ui/primitives/document-flow/field-content.tsx
+10 -7
View File
@@ -1,4 +1,5 @@
import { useLingui } from '@lingui/react';
import { Trans } from '@lingui/react/macro';
import type { DocumentMeta, Signature } from '@prisma/client';
import { FieldType } from '@prisma/client';
import { ChevronDown } from 'lucide-react';
@@ -61,8 +62,8 @@ export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
>
<div className="flex items-center">
<Checkbox className="h-3 w-3" disabled />
<Label className="text-foreground ml-1.5 text-xs font-normal opacity-50">
Checkbox option
<Label className="ml-1.5 text-xs font-normal text-foreground opacity-50">
<Trans>Checkbox option</Trans>
</Label>
</div>
</div>
@@ -89,7 +90,7 @@ export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
{item.value && (
<Label
htmlFor={`checkbox-${index}`}
className="text-foreground ml-1.5 text-xs font-normal"
className="ml-1.5 text-xs font-normal text-foreground"
>
{item.value}
</Label>
@@ -121,7 +122,7 @@ export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
{item.value && (
<Label
htmlFor={`option-${index}`}
className="text-foreground ml-1.5 text-xs font-normal"
className="ml-1.5 text-xs font-normal text-foreground"
>
{item.value}
</Label>
@@ -139,8 +140,10 @@ export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
!field.inserted
) {
return (
<div className="text-field-card-foreground flex flex-row items-center py-0.5 text-[clamp(0.07rem,25cqw,0.825rem)] text-sm">
<p>Select</p>
<div className="flex flex-row items-center py-0.5 text-[clamp(0.07rem,25cqw,0.825rem)] text-sm text-field-card-foreground">
<p>
<Trans>Select</Trans>
</p>
<ChevronDown className="h-4 w-4" />
</div>
);
@@ -193,7 +196,7 @@ export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
<div className="flex h-full w-full items-center overflow-hidden">
<p
className={cn(
'text-foreground w-full whitespace-pre-wrap text-left text-[clamp(0.07rem,25cqw,0.825rem)] duration-200',
'w-full whitespace-pre-wrap text-left text-[clamp(0.07rem,25cqw,0.825rem)] text-foreground duration-200',
{
'!text-center': textAlign === 'center' || !textToDisplay,
'!text-right': textAlign === 'right',
packages/ui/primitives/sheet.tsx
+8 -5
View File
@@ -1,5 +1,6 @@
import * as React from 'react';
import { Trans } from '@lingui/react/macro';
import * as SheetPrimitive from '@radix-ui/react-dialog';
import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';
@@ -41,7 +42,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-[61] backdrop-blur-sm transition-all duration-100',
'fixed inset-0 z-[61] bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in',
className,
)}
{...props}
@@ -158,9 +159,11 @@ const SheetContent = React.forwardRef<
{...props}
>
{children}
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
<span className="sr-only">
<Trans>Close</Trans>
</span>
</SheetPrimitive.Close>
</SheetPrimitive.Content>
</SheetPortal>
@@ -189,7 +192,7 @@ const SheetTitle = React.forwardRef<
>(({ className, ...props }, ref) => (
<SheetPrimitive.Title
ref={ref}
className={cn('text-foreground text-lg font-semibold', className)}
className={cn('text-lg font-semibold text-foreground', className)}
{...props}
/>
));
@@ -202,7 +205,7 @@ const SheetDescription = React.forwardRef<
>(({ className, ...props }, ref) => (
<SheetPrimitive.Description
ref={ref}
className={cn('text-muted-foreground text-sm', className)}
className={cn('text-sm text-muted-foreground', className)}
{...props}
/>
));
packages/ui/primitives/signature-pad/signature-pad-dialog.tsx
+4 -1
View File
@@ -15,6 +15,7 @@ import { SignatureRender } from './signature-render';
export type SignaturePadDialogProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChange'> & {
disabled?: boolean;
fullName?: string;
value?: string;
onChange: (_value: string) => void;
dialogConfirmText?: MessageDescriptor | string;
@@ -26,6 +27,7 @@ export type SignaturePadDialogProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'o
export const SignaturePadDialog = ({
className,
fullName,
value,
onChange,
disabled = false,
@@ -43,7 +45,7 @@ export const SignaturePadDialog = ({
return (
<div
className={cn(
'aspect-signature-pad bg-background relative block w-full select-none rounded-lg border',
'relative block aspect-signature-pad w-full select-none rounded-lg border bg-background',
className,
{
'pointer-events-none opacity-50': disabled,
@@ -112,6 +114,7 @@ export const SignaturePadDialog = ({
<DialogContent hideClose={true} className="p-6 pt-4">
<SignaturePad
id="signature"
fullName={fullName}
value={value}
className={className}
disabled={disabled}
packages/ui/primitives/signature-pad/signature-pad-draw.tsx
+6 -4
View File
@@ -294,7 +294,7 @@ export const SignaturePadDraw = ({
<div className="absolute bottom-3 right-3 flex gap-2">
<button
type="button"
className="focus-visible:ring-ring ring-offset-background text-muted-foreground/60 hover:text-muted-foreground rounded-full p-0 text-[0.688rem] focus-visible:outline-none focus-visible:ring-2"
className="rounded-full p-0 text-[0.688rem] text-muted-foreground/60 ring-offset-background hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
onClick={() => onClearClick()}
>
<Trans>Clear Signature</Trans>
@@ -303,7 +303,7 @@ export const SignaturePadDraw = ({
{isSignatureValid === false && (
<div className="absolute bottom-4 left-4 flex gap-2">
<span className="text-destructive text-xs">
<span className="text-xs text-destructive">
<Trans>Signature is too small</Trans>
</span>
</div>
@@ -314,11 +314,13 @@ export const SignaturePadDraw = ({
<button
type="button"
title="undo"
className="focus-visible:ring-ring ring-offset-background text-muted-foreground/60 hover:text-muted-foreground rounded-full p-0 text-[0.688rem] focus-visible:outline-none focus-visible:ring-2"
className="rounded-full p-0 text-[0.688rem] text-muted-foreground/60 ring-offset-background hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
onClick={onUndoClick}
>
<Undo2 className="h-4 w-4" />
<span className="sr-only">Undo</span>
<span className="sr-only">
<Trans>Undo</Trans>
</span>
</button>
</div>
)}
packages/ui/primitives/signature-pad/signature-pad-type.tsx
+21 -4
View File
@@ -1,4 +1,4 @@
import { useState } from 'react';
import { useEffect, useRef } from 'react';
import { useLingui } from '@lingui/react/macro';
@@ -7,13 +7,27 @@ import { cn } from '../../lib/utils';
export type SignaturePadTypeProps = {
className?: string;
value?: string;
defaultValue?: string;
onChange: (_value: string) => void;
};
export const SignaturePadType = ({ className, value, onChange }: SignaturePadTypeProps) => {
export const SignaturePadType = ({
className,
value,
defaultValue,
onChange,
}: SignaturePadTypeProps) => {
const { t } = useLingui();
const $isDirty = useRef(false);
// Colors don't actually work for text.
const [selectedColor, setSelectedColor] = useState('black');
useEffect(() => {
if (!$isDirty.current && !value && defaultValue) {
$isDirty.current = true;
onChange(defaultValue);
}
}, [defaultValue, value, onChange]);
return (
<div className={cn('flex h-full w-full items-center justify-center', className)}>
@@ -23,7 +37,10 @@ export const SignaturePadType = ({ className, value, onChange }: SignaturePadTyp
className="w-full bg-transparent px-4 text-center font-signature text-7xl text-black placeholder:text-4xl focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:text-white"
// style={{ color: selectedColor }}
value={value}
onChange={(event) => onChange(event.target.value.trimStart())}
onChange={(event) => {
onChange(event.target.value.trimStart());
$isDirty.current = true;
}}
autoComplete="off"
autoCorrect="off"
autoCapitalize="off"
packages/ui/primitives/signature-pad/signature-pad.tsx
+10 -4
View File
@@ -21,6 +21,7 @@ export type SignaturePadValue = {
};
export type SignaturePadProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChange'> & {
fullName?: string;
value?: string;
onChange?: (_value: SignaturePadValue) => void;
@@ -34,6 +35,7 @@ export type SignaturePadProps = Omit<HTMLAttributes<HTMLCanvasElement>, 'onChang
};
export const SignaturePad = ({
fullName,
value = '',
onChange,
disabled = false,
@@ -168,7 +170,7 @@ export const SignaturePad = ({
<TabsContent
value="draw"
className="border-border aspect-signature-pad dark:bg-background relative flex items-center justify-center rounded-md border bg-neutral-50 text-center"
className="relative flex aspect-signature-pad items-center justify-center rounded-md border border-border bg-neutral-50 text-center dark:bg-background"
>
<SignaturePadDraw
className="h-full w-full"
@@ -179,15 +181,19 @@ export const SignaturePad = ({
<TabsContent
value="text"
className="border-border aspect-signature-pad dark:bg-background relative flex items-center justify-center rounded-md border bg-neutral-50 text-center"
className="relative flex aspect-signature-pad items-center justify-center rounded-md border border-border bg-neutral-50 text-center dark:bg-background"
>
<SignaturePadType value={typedSignature} onChange={onTypedSignatureChange} />
<SignaturePadType
value={typedSignature}
defaultValue={fullName}
onChange={onTypedSignatureChange}
/>
</TabsContent>
<TabsContent
value="image"
className={cn(
'border-border aspect-signature-pad dark:bg-background relative rounded-md border bg-neutral-50',
'relative aspect-signature-pad rounded-md border border-border bg-neutral-50 dark:bg-background',
{
'bg-white': imageSignature,
},
packages/ui/primitives/template-flow/add-template-fields.tsx
+16 -16
View File
@@ -581,7 +581,7 @@ export const AddTemplateFieldsFormPartial = ({
{selectedField && (
<div
className={cn(
'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center rounded-[2px] bg-white ring-2 transition duration-200 [container-type:size]',
'dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center rounded-[2px] bg-white text-muted-foreground ring-2 transition duration-200 [container-type:size]',
selectedSignerStyles?.base,
{
'-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
@@ -650,7 +650,7 @@ export const AddTemplateFieldsFormPartial = ({
variant="outline"
role="combobox"
className={cn(
'bg-background text-muted-foreground hover:text-foreground mb-12 mt-2 justify-between font-normal',
'mb-12 mt-2 justify-between bg-background font-normal text-muted-foreground hover:text-foreground',
selectedSignerStyles?.comboxBoxTrigger,
)}
>
@@ -681,7 +681,7 @@ export const AddTemplateFieldsFormPartial = ({
<CommandInput />
<CommandEmpty>
<span className="text-muted-foreground inline-block px-4">
<span className="inline-block px-4 text-muted-foreground">
<Trans>No recipient matching this description was found.</Trans>
</span>
</CommandEmpty>
@@ -689,14 +689,14 @@ export const AddTemplateFieldsFormPartial = ({
{/* Note: This is duplicated in `add-fields.tsx` */}
{recipientsByRoleToDisplay.map(([role, roleRecipients], roleIndex) => (
<CommandGroup key={roleIndex}>
<div className="text-muted-foreground mb-1 ml-2 mt-2 text-xs font-medium">
<div className="mb-1 ml-2 mt-2 text-xs font-medium text-muted-foreground">
{_(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"
className="px-4 pb-4 pt-2.5 text-center text-xs text-muted-foreground/80"
>
<Trans>No recipients with this role</Trans>
</div>
@@ -720,7 +720,7 @@ export const AddTemplateFieldsFormPartial = ({
}}
>
<span
className={cn('text-foreground/70 truncate', {
className={cn('truncate text-foreground/70', {
'text-foreground/80': recipient === selectedSigner,
})}
>
@@ -768,7 +768,7 @@ export const AddTemplateFieldsFormPartial = ({
<CardContent className="flex flex-col items-center justify-center px-6 py-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground font-signature flex items-center justify-center gap-x-1.5 text-lg font-normal',
'flex items-center justify-center gap-x-1.5 font-signature text-lg font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<Trans>Signature</Trans>
@@ -793,7 +793,7 @@ export const AddTemplateFieldsFormPartial = ({
<CardContent className="flex flex-col items-center justify-center px-6 py-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
'flex items-center justify-center gap-x-1.5 text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<Contact className="h-4 w-4" />
@@ -819,7 +819,7 @@ export const AddTemplateFieldsFormPartial = ({
<CardContent className="p-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
'flex items-center justify-center gap-x-1.5 text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<Mail className="h-4 w-4" />
@@ -845,7 +845,7 @@ export const AddTemplateFieldsFormPartial = ({
<CardContent className="p-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
'flex items-center justify-center gap-x-1.5 text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<User className="h-4 w-4" />
@@ -871,7 +871,7 @@ export const AddTemplateFieldsFormPartial = ({
<CardContent className="p-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
'flex items-center justify-center gap-x-1.5 text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<CalendarDays className="h-4 w-4" />
@@ -897,7 +897,7 @@ export const AddTemplateFieldsFormPartial = ({
<CardContent className="p-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
'flex items-center justify-center gap-x-1.5 text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<Type className="h-4 w-4" />
@@ -923,7 +923,7 @@ export const AddTemplateFieldsFormPartial = ({
<CardContent className="p-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
'flex items-center justify-center gap-x-1.5 text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<Hash className="h-4 w-4" />
@@ -949,7 +949,7 @@ export const AddTemplateFieldsFormPartial = ({
<CardContent className="p-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
'flex items-center justify-center gap-x-1.5 text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<Disc className="h-4 w-4" />
@@ -975,7 +975,7 @@ export const AddTemplateFieldsFormPartial = ({
<CardContent className="p-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
'flex items-center justify-center gap-x-1.5 text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<CheckSquare className="h-4 w-4" />
@@ -1002,7 +1002,7 @@ export const AddTemplateFieldsFormPartial = ({
<CardContent className="p-4">
<p
className={cn(
'text-muted-foreground group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
'flex items-center justify-center gap-x-1.5 text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
)}
>
<ChevronDown className="h-4 w-4" />
packages/ui/primitives/template-flow/add-template-settings.tsx
+19 -16
View File
@@ -239,7 +239,7 @@ export const AddTemplateSettingsFormPartial = ({
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="text-foreground max-w-md space-y-2 p-4">
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
Controls the language for the document, including the language to be used
for email notifications, and the final certificate that is generated and
attached to the document.
@@ -337,7 +337,7 @@ export const AddTemplateSettingsFormPartial = ({
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="text-foreground max-w-md space-y-2 p-4">
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<h2>
<strong>
<Trans>Document Distribution Method</Trans>
@@ -423,7 +423,7 @@ export const AddTemplateSettingsFormPartial = ({
field.onChange(value);
void handleAutoSave();
}}
className="bg-background w-full"
className="w-full bg-background"
emptySelectionPlaceholder={t`Select signature types`}
/>
</FormControl>
@@ -463,11 +463,11 @@ export const AddTemplateSettingsFormPartial = ({
{distributionMethod === DocumentDistributionMethod.EMAIL && (
<Accordion type="multiple">
<AccordionItem value="email-options" className="border-none">
<AccordionTrigger className="text-foreground rounded border px-3 py-2 text-left hover:bg-neutral-200/30 hover:no-underline">
<AccordionTrigger className="rounded border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
<Trans>Email Options</Trans>
</AccordionTrigger>
<AccordionContent className="text-muted-foreground -mx-1 px-1 pt-4 text-sm leading-relaxed [&>div]:pb-0">
<AccordionContent className="-mx-1 px-1 pt-4 text-sm leading-relaxed text-muted-foreground [&>div]:pb-0">
<div className="flex flex-col space-y-6">
{organisation.organisationClaim.flags.emailDomains && (
<FormField
@@ -518,8 +518,10 @@ export const AddTemplateSettingsFormPartial = ({
render={({ field }) => (
<FormItem>
<FormLabel>
<Trans>Reply To Email</Trans>{' '}
<span className="text-muted-foreground">(Optional)</span>
<Trans>
Reply To Email{' '}
<span className="text-muted-foreground">(Optional)</span>
</Trans>
</FormLabel>
<FormControl>
@@ -557,13 +559,14 @@ export const AddTemplateSettingsFormPartial = ({
render={({ field }) => (
<FormItem>
<FormLabel className="flex flex-row items-center">
<Trans>Message</Trans>{' '}
<span className="text-muted-foreground">(Optional)</span>
<Trans>
Message <span className="text-muted-foreground">(Optional)</span>
</Trans>
<Tooltip>
<TooltipTrigger>
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="text-muted-foreground p-4">
<TooltipContent className="p-4 text-muted-foreground">
<DocumentSendEmailMessageHelper />
</TooltipContent>
</Tooltip>
@@ -571,7 +574,7 @@ export const AddTemplateSettingsFormPartial = ({
<FormControl>
<Textarea
className="bg-background h-16 resize-none"
className="h-16 resize-none bg-background"
{...field}
maxLength={5000}
onBlur={handleAutoSave}
@@ -600,11 +603,11 @@ export const AddTemplateSettingsFormPartial = ({
<Accordion type="multiple">
<AccordionItem value="advanced-options" className="border-none">
<AccordionTrigger className="text-foreground rounded border px-3 py-2 text-left hover:bg-neutral-200/30 hover:no-underline">
<AccordionTrigger className="rounded border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
<Trans>Advanced Options</Trans>
</AccordionTrigger>
<AccordionContent className="text-muted-foreground -mx-1 px-1 pt-4 text-sm leading-relaxed">
<AccordionContent className="-mx-1 px-1 pt-4 text-sm leading-relaxed text-muted-foreground">
<div className="flex flex-col space-y-6">
<FormField
control={form.control}
@@ -618,7 +621,7 @@ export const AddTemplateSettingsFormPartial = ({
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="text-muted-foreground max-w-xs">
<TooltipContent className="max-w-xs text-muted-foreground">
<Trans>
Add an external ID to the template. This can be used to identify
in external systems.
@@ -688,7 +691,7 @@ export const AddTemplateSettingsFormPartial = ({
<FormControl>
<Combobox
className="bg-background time-zone-field"
className="time-zone-field bg-background"
options={TIME_ZONES}
{...field}
onChange={(value) => {
@@ -715,7 +718,7 @@ export const AddTemplateSettingsFormPartial = ({
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="text-muted-foreground max-w-xs">
<TooltipContent className="max-w-xs text-muted-foreground">
<Trans>
Add a URL to redirect the user to once the document is signed
</Trans>