mirror of
https://github.com/documenso/documenso.git
synced 2026-07-22 16:03:39 +10:00
chore: merge main, resolve biome formatting conflicts
Merge origin/main into feat/external-2fa-codes. Resolve formatting conflicts caused by biome rollout; preserve both feature streams: PR's external 2FA token + signing-session 2FA proof additions plus main's RateLimit/RecipientExpired/signingReminders/date-auto-insert. In complete-document-with-token.ts, drop the duplicate early field-fetching block introduced when main moved that logic later with date auto-insert support; keep the EXTERNAL_TWO_FACTOR_AUTH check using derivedRecipientActionAuth.
This commit is contained in:
ephraimduncan
@@ -0,0 +1,15 @@
|
||||
import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app';
|
||||
import { msg } from '@lingui/core/macro';
|
||||
import { ErrorCode, type FileRejection } from 'react-dropzone';
|
||||
import { match } from 'ts-pattern';
|
||||
|
||||
export const buildDropzoneRejectionDescription = (fileRejections: FileRejection[]) => {
|
||||
const errorCode = fileRejections[0]?.errors[0]?.code;
|
||||
|
||||
return match(errorCode)
|
||||
.with(ErrorCode.FileTooLarge, () => msg`File is larger than ${APP_DOCUMENT_UPLOAD_SIZE_LIMIT}MB`)
|
||||
.with(ErrorCode.FileInvalidType, () => msg`Only PDF files are allowed`)
|
||||
.with(ErrorCode.FileTooSmall, () => msg`File is too small`)
|
||||
.with(ErrorCode.TooManyFiles, () => msg`Only one file can be uploaded at a time`)
|
||||
.otherwise(() => msg`Unknown error`);
|
||||
};
|
||||
@@ -1,9 +1,7 @@
|
||||
// !: We declare all of our classes here since TailwindCSS will remove any unused CSS classes,
|
||||
// !: therefore doing this at runtime is not possible without whitelisting a set of classnames.
|
||||
// !:
|
||||
// !: This will later be improved as we move to a CSS variable approach and rotate the lightness
|
||||
import { colord } from 'colord';
|
||||
import { once } from 'remeda';
|
||||
|
||||
export type RecipientColorMap = Record<number, RecipientColorStyles>;
|
||||
export type TRecipientColor = 'readOnly' | (typeof AVAILABLE_RECIPIENT_COLORS)[number];
|
||||
|
||||
export type RecipientColorStyles = {
|
||||
base: string;
|
||||
@@ -11,128 +9,89 @@ export type RecipientColorStyles = {
|
||||
baseRingHover: string;
|
||||
baseTextHover: string;
|
||||
fieldButton: string;
|
||||
fieldButtonText: string;
|
||||
fieldItem: string;
|
||||
fieldItemInitials: string;
|
||||
comboxBoxTrigger: string;
|
||||
comboxBoxItem: string;
|
||||
comboBoxTrigger: string;
|
||||
comboBoxItem: string;
|
||||
};
|
||||
|
||||
export const DEFAULT_RECT_BACKGROUND = 'rgba(255, 255, 255, 0.95)';
|
||||
|
||||
// !: values of the declared variable to do all the background, border and shadow styles.
|
||||
export const RECIPIENT_COLOR_STYLES = {
|
||||
readOnly: {
|
||||
const RECIPIENT_COLOR_STYLES: Record<TRecipientColor, () => RecipientColorStyles> = {
|
||||
readOnly: (): RecipientColorStyles => ({
|
||||
base: 'ring-neutral-400',
|
||||
baseRing: 'rgba(176, 176, 176, 1)',
|
||||
baseRingHover: 'rgba(176, 176, 176, 1)',
|
||||
baseTextHover: 'rgba(176, 176, 176, 1)',
|
||||
fieldButton: 'border-neutral-400 hover:border-neutral-400',
|
||||
fieldButtonText: '',
|
||||
fieldItem: 'group/field-item rounded-[2px]',
|
||||
fieldItemInitials: '',
|
||||
comboxBoxTrigger:
|
||||
comboBoxTrigger:
|
||||
'ring-2 ring-recipient-green shadow-[0_0_0_5px_hsl(var(--recipient-green)/10%),0_0_0_2px_hsl(var(--recipient-green)/60%),0_0_0_0.5px_hsl(var(--recipient-green))]',
|
||||
comboxBoxItem: '',
|
||||
},
|
||||
|
||||
green: {
|
||||
base: 'ring-recipient-green hover:bg-recipient-green/30',
|
||||
baseRing: 'rgba(122, 195, 85, 1)',
|
||||
baseRingHover: 'rgba(122, 195, 85, 0.3)',
|
||||
baseTextHover: 'rgba(122, 195, 85, 1)',
|
||||
fieldButton: 'hover:border-recipient-green hover:bg-recipient-green/30 ',
|
||||
fieldItem: 'group/field-item rounded-[2px]',
|
||||
fieldItemInitials: 'group-hover/field-item:bg-recipient-green',
|
||||
comboxBoxTrigger:
|
||||
'ring-2 ring-recipient-green hover:bg-recipient-green/15 active:bg-recipient-green/15 shadow-[0_0_0_5px_hsl(var(--recipient-green)/10%),0_0_0_2px_hsl(var(--recipient-green)/60%),0_0_0_0.5px_hsl(var(--recipient-green))]',
|
||||
comboxBoxItem: 'hover:bg-recipient-green/15 active:bg-recipient-green/15',
|
||||
},
|
||||
|
||||
blue: {
|
||||
base: 'ring-recipient-blue hover:bg-recipient-blue/30',
|
||||
baseRing: 'rgba(56, 123, 199, 1)',
|
||||
baseRingHover: 'rgba(56, 123, 199, 0.3)',
|
||||
baseTextHover: 'rgba(56, 123, 199, 1)',
|
||||
fieldButton: 'hover:border-recipient-blue hover:bg-recipient-blue/30',
|
||||
fieldItem: 'group/field-item rounded-[2px]',
|
||||
fieldItemInitials: 'group-hover/field-item:bg-recipient-blue',
|
||||
comboxBoxTrigger:
|
||||
'ring-2 ring-recipient-blue hover:bg-recipient-blue/15 active:bg-recipient-blue/15 shadow-[0_0_0_5px_hsl(var(--recipient-blue)/10%),0_0_0_2px_hsl(var(--recipient-blue)/60%),0_0_0_0.5px_hsl(var(--recipient-blue))]',
|
||||
comboxBoxItem: 'ring-recipient-blue hover:bg-recipient-blue/15 active:bg-recipient-blue/15',
|
||||
},
|
||||
|
||||
purple: {
|
||||
base: 'ring-recipient-purple hover:bg-recipient-purple/30',
|
||||
baseRing: 'rgba(151, 71, 255, 1)',
|
||||
baseRingHover: 'rgba(151, 71, 255, 0.3)',
|
||||
baseTextHover: 'rgba(151, 71, 255, 1)',
|
||||
fieldButton: 'hover:border-recipient-purple hover:bg-recipient-purple/30',
|
||||
fieldItem: 'group/field-item rounded-[2px]',
|
||||
fieldItemInitials: 'group-hover/field-item:bg-recipient-purple',
|
||||
comboxBoxTrigger:
|
||||
'ring-2 ring-recipient-purple hover:bg-recipient-purple/15 active:bg-recipient-purple/15 shadow-[0_0_0_5px_hsl(var(--recipient-purple)/10%),0_0_0_2px_hsl(var(--recipient-purple)/60%),0_0_0_0.5px_hsl(var(--recipient-purple))]',
|
||||
comboxBoxItem: 'hover:bg-recipient-purple/15 active:bg-recipient-purple/15',
|
||||
},
|
||||
|
||||
orange: {
|
||||
base: 'ring-recipient-orange hover:bg-recipient-orange/30',
|
||||
baseRing: 'rgba(246, 159, 30, 1)',
|
||||
baseRingHover: 'rgba(246, 159, 30, 0.3)',
|
||||
baseTextHover: 'rgba(246, 159, 30, 1)',
|
||||
fieldButton: 'hover:border-recipient-orange hover:bg-recipient-orange/30',
|
||||
fieldItem: 'group/field-item rounded-[2px]',
|
||||
fieldItemInitials: 'group-hover/field-item:bg-recipient-orange',
|
||||
comboxBoxTrigger:
|
||||
'ring-2 ring-recipient-orange hover:bg-recipient-orange/15 active:bg-recipient-orange/15 shadow-[0_0_0_5px_hsl(var(--recipient-orange)/10%),0_0_0_2px_hsl(var(--recipient-orange)/60%),0_0_0_0.5px_hsl(var(--recipient-orange))]',
|
||||
comboxBoxItem: 'hover:bg-recipient-orange/15 active:bg-recipient-orange/15',
|
||||
},
|
||||
|
||||
yellow: {
|
||||
base: 'ring-recipient-yellow hover:bg-recipient-yellow/30',
|
||||
baseRing: 'rgba(219, 186, 0, 1)',
|
||||
baseRingHover: 'rgba(219, 186, 0, 0.3)',
|
||||
baseTextHover: 'rgba(219, 186, 0, 1)',
|
||||
fieldButton: 'hover:border-recipient-yellow hover:bg-recipient-yellow/30',
|
||||
fieldItem: 'group/field-item rounded-[2px]',
|
||||
fieldItemInitials: 'group-hover/field-item:bg-recipient-yellow',
|
||||
comboxBoxTrigger:
|
||||
'ring-2 ring-recipient-yellow hover:bg-recipient-yellow/15 active:bg-recipient-yellow/15 shadow-[0_0_0_5px_hsl(var(--recipient-yellow)/10%),0_0_0_2px_hsl(var(--recipient-yellow)/60%),0_0_0_0.5px_hsl(var(--recipient-yellow))]',
|
||||
comboxBoxItem: 'hover:bg-recipient-yellow/15 active:bg-recipient-yellow/15',
|
||||
},
|
||||
|
||||
pink: {
|
||||
base: 'ring-recipient-pink hover:bg-recipient-pink/30',
|
||||
baseRing: 'rgba(217, 74, 186, 1)',
|
||||
baseRingHover: 'rgba(217, 74, 186, 0.3)',
|
||||
baseTextHover: 'rgba(217, 74, 186, 1)',
|
||||
fieldButton: 'hover:border-recipient-pink hover:bg-recipient-pink/30',
|
||||
fieldItem: 'group/field-item rounded-[2px]',
|
||||
fieldItemInitials: 'group-hover/field-item:bg-recipient-pink',
|
||||
comboxBoxTrigger:
|
||||
'ring-2 ring-recipient-pink hover:bg-recipient-pink/15 active:bg-recipient-pink/15 shadow-[0_0_0_5px_hsl(var(--recipient-pink)/10%),0_0_0_2px_hsl(var(--recipient-pink)/60%),0_0_0_0.5px_hsl(var(--recipient-pink',
|
||||
comboxBoxItem: 'hover:bg-recipient-pink/15 active:bg-recipient-pink/15',
|
||||
},
|
||||
} satisfies Record<string, RecipientColorStyles>;
|
||||
|
||||
export type TRecipientColor = keyof typeof RECIPIENT_COLOR_STYLES;
|
||||
|
||||
export const AVAILABLE_RECIPIENT_COLORS = [
|
||||
'green',
|
||||
'blue',
|
||||
'purple',
|
||||
'orange',
|
||||
'yellow',
|
||||
'pink',
|
||||
] satisfies TRecipientColor[];
|
||||
|
||||
export const useRecipientColors = (index: number) => {
|
||||
const key = AVAILABLE_RECIPIENT_COLORS[index % AVAILABLE_RECIPIENT_COLORS.length];
|
||||
|
||||
return RECIPIENT_COLOR_STYLES[key];
|
||||
comboBoxItem: '',
|
||||
}),
|
||||
green: once(() => generateStyles('green')),
|
||||
blue: once(() => generateStyles('blue')),
|
||||
purple: once(() => generateStyles('purple')),
|
||||
orange: once(() => generateStyles('orange')),
|
||||
yellow: once(() => generateStyles('yellow')),
|
||||
pink: once(() => generateStyles('pink')),
|
||||
};
|
||||
|
||||
export const getRecipientColorStyles = (index: number) => {
|
||||
// Disabling the rule since the hook doesn't do anything special and can
|
||||
// be used universally.
|
||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
||||
return useRecipientColors(index);
|
||||
const generateStyles = (recipientColor: TRecipientColor): RecipientColorStyles => {
|
||||
const { bg, border, ring, text } = CSS_PROPERTY;
|
||||
const { active, hover, groupHover, groupHoverFieldItem } = CSS_VARIANT;
|
||||
|
||||
const name = `recipient-${recipientColor}`;
|
||||
const value = getComputedStyle(document.documentElement).getPropertyValue(`--${name}`);
|
||||
const color = colord(`hsl(${value})`);
|
||||
|
||||
return {
|
||||
base: `${ring}-${name} ${hover}:${bg}-${name}/30`,
|
||||
baseRing: color.toRgbString(),
|
||||
baseRingHover: color.alpha(0.3).toRgbString(),
|
||||
baseTextHover: color.toRgbString(),
|
||||
fieldButton: `${hover}:${border}-${name} ${hover}:${bg}-${name}/30`,
|
||||
fieldButtonText: `${groupHover}:${text}-${name}`,
|
||||
fieldItem: 'group/field-item rounded-[2px]',
|
||||
fieldItemInitials: `${groupHoverFieldItem}:${bg}-${name}`,
|
||||
comboBoxTrigger: `ring-2 ${ring}-${name} ${hover}:${bg}-${name}/15 ${active}:${bg}-${name}/15 shadow-[0_0_0_5px_hsl(var(--${name})/10%),0_0_0_2px_hsl(var(--${name})/60%),0_0_0_0.5px_hsl(var(--${name}))]`,
|
||||
comboBoxItem: `${hover}:${bg}-${name}/15 ${active}:${bg}-${name}/15`,
|
||||
};
|
||||
};
|
||||
|
||||
const CSS_PROPERTY = {
|
||||
bg: 'bg',
|
||||
border: 'border',
|
||||
ring: 'ring',
|
||||
text: 'text',
|
||||
};
|
||||
|
||||
const CSS_VARIANT = {
|
||||
active: 'active',
|
||||
groupHover: 'group-hover',
|
||||
groupHoverFieldItem: 'group-hover/field-item',
|
||||
hover: 'hover',
|
||||
};
|
||||
|
||||
const AVAILABLE_RECIPIENT_COLORS = ['green', 'blue', 'purple', 'orange', 'yellow', 'pink'] as const;
|
||||
|
||||
export const RECIPIENT_DYNAMIC_CLASS = {
|
||||
pattern: new RegExp(
|
||||
`(${Object.values(CSS_PROPERTY).join('|')})-recipient-(${AVAILABLE_RECIPIENT_COLORS.join('|')})(\\/(15|30))?$`,
|
||||
),
|
||||
variants: Object.values(CSS_VARIANT),
|
||||
};
|
||||
|
||||
export const getRecipientColor = (index: number) => {
|
||||
return AVAILABLE_RECIPIENT_COLORS[Math.max(index, 0) % AVAILABLE_RECIPIENT_COLORS.length];
|
||||
};
|
||||
|
||||
export const getRecipientColorStyles = (colorOrIndex: TRecipientColor | number) => {
|
||||
const color = typeof colorOrIndex === 'number' ? getRecipientColor(colorOrIndex) : colorOrIndex;
|
||||
|
||||
return RECIPIENT_COLOR_STYLES[color]();
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user