From 2a448fe06d29d4a98bbada9d4c373d3ade1c210e Mon Sep 17 00:00:00 2001 From: Ashraf Date: Wed, 20 Dec 2023 17:08:09 +0800 Subject: [PATCH 01/22] fix: fixed the recipients viewing issue on touch screens --- .../app/(dashboard)/documents/[id]/page.tsx | 6 +- .../app/(dashboard)/documents/data-table.tsx | 6 +- .../avatar/stack-avatars-component.tsx | 71 +++++++++++++ .../avatar/stack-avatars-with-tooltip.tsx | 99 ------------------- .../avatar/stack-avatars-with-ui.tsx | 51 ++++++++++ 5 files changed, 127 insertions(+), 106 deletions(-) create mode 100644 apps/web/src/components/(dashboard)/avatar/stack-avatars-component.tsx delete mode 100644 apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx create mode 100644 apps/web/src/components/(dashboard)/avatar/stack-avatars-with-ui.tsx diff --git a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx index b26b6308c..ce18f27b8 100644 --- a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx +++ b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx @@ -11,7 +11,7 @@ import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/clie import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer'; import { EditDocumentForm } from '~/app/(dashboard)/documents/[id]/edit-document'; -import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip'; +import { StackAvatarsWithUI } from '~/components/(dashboard)/avatar/stack-avatars-with-ui'; import { DocumentStatus } from '~/components/formatter/document-status'; export type DocumentPageProps = { @@ -71,9 +71,9 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
- + {recipients.length} Recipient(s) - +
)} diff --git a/apps/web/src/app/(dashboard)/documents/data-table.tsx b/apps/web/src/app/(dashboard)/documents/data-table.tsx index c8adb1422..a0cc4b8e8 100644 --- a/apps/web/src/app/(dashboard)/documents/data-table.tsx +++ b/apps/web/src/app/(dashboard)/documents/data-table.tsx @@ -12,7 +12,7 @@ import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-documen import { DataTable } from '@documenso/ui/primitives/data-table'; import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination'; -import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip'; +import { StackAvatarsWithUI } from '~/components/(dashboard)/avatar/stack-avatars-with-ui'; import { DocumentStatus } from '~/components/formatter/document-status'; import { LocaleDate } from '~/components/formatter/locale-date'; @@ -64,9 +64,7 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => { { header: 'Recipient', accessorKey: 'recipient', - cell: ({ row }) => { - return ; - }, + cell: ({ row }) => , }, { header: 'Status', diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatars-component.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatars-component.tsx new file mode 100644 index 000000000..d7f3106e6 --- /dev/null +++ b/apps/web/src/components/(dashboard)/avatar/stack-avatars-component.tsx @@ -0,0 +1,71 @@ +import { getRecipientType } from '@documenso/lib/client-only/recipient-type'; +import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter'; +import type { Recipient } from '@documenso/prisma/client'; + +import { AvatarWithRecipient } from './avatar-with-recipient'; +import { StackAvatar } from './stack-avatar'; + +export const StackAvatarsComponent = ({ recipients }: { recipients: Recipient[] }) => { + const waitingRecipients = recipients.filter( + (recipient) => getRecipientType(recipient) === 'waiting', + ); + + const openedRecipients = recipients.filter( + (recipient) => getRecipientType(recipient) === 'opened', + ); + + const completedRecipients = recipients.filter( + (recipient) => getRecipientType(recipient) === 'completed', + ); + + const uncompletedRecipients = recipients.filter( + (recipient) => getRecipientType(recipient) === 'unsigned', + ); + return ( +
+ {completedRecipients.length > 0 && ( +
+

Completed

+ {completedRecipients.map((recipient: Recipient) => ( +
+ + {recipient.email} +
+ ))} +
+ )} + + {waitingRecipients.length > 0 && ( +
+

Waiting

+ {waitingRecipients.map((recipient: Recipient) => ( + + ))} +
+ )} + + {openedRecipients.length > 0 && ( +
+

Opened

+ {openedRecipients.map((recipient: Recipient) => ( + + ))} +
+ )} + + {uncompletedRecipients.length > 0 && ( +
+

Uncompleted

+ {uncompletedRecipients.map((recipient: Recipient) => ( + + ))} +
+ )} +
+ ); +}; diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx deleted file mode 100644 index 7429d8ee5..000000000 --- a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { getRecipientType } from '@documenso/lib/client-only/recipient-type'; -import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter'; -import type { Recipient } from '@documenso/prisma/client'; -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from '@documenso/ui/primitives/tooltip'; - -import { AvatarWithRecipient } from './avatar-with-recipient'; -import { StackAvatar } from './stack-avatar'; -import { StackAvatars } from './stack-avatars'; - -export type StackAvatarsWithTooltipProps = { - recipients: Recipient[]; - position?: 'top' | 'bottom'; - children?: React.ReactNode; -}; - -export const StackAvatarsWithTooltip = ({ - recipients, - position, - children, -}: StackAvatarsWithTooltipProps) => { - const waitingRecipients = recipients.filter( - (recipient) => getRecipientType(recipient) === 'waiting', - ); - - const openedRecipients = recipients.filter( - (recipient) => getRecipientType(recipient) === 'opened', - ); - - const completedRecipients = recipients.filter( - (recipient) => getRecipientType(recipient) === 'completed', - ); - - const uncompletedRecipients = recipients.filter( - (recipient) => getRecipientType(recipient) === 'unsigned', - ); - - return ( - - - - {children || } - - - -
- {completedRecipients.length > 0 && ( -
-

Completed

- {completedRecipients.map((recipient: Recipient) => ( -
- - {recipient.email} -
- ))} -
- )} - - {waitingRecipients.length > 0 && ( -
-

Waiting

- {waitingRecipients.map((recipient: Recipient) => ( - - ))} -
- )} - - {openedRecipients.length > 0 && ( -
-

Opened

- {openedRecipients.map((recipient: Recipient) => ( - - ))} -
- )} - - {uncompletedRecipients.length > 0 && ( -
-

Uncompleted

- {uncompletedRecipients.map((recipient: Recipient) => ( - - ))} -
- )} -
- - - - ); -}; diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-ui.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-ui.tsx new file mode 100644 index 000000000..5d5f24413 --- /dev/null +++ b/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-ui.tsx @@ -0,0 +1,51 @@ +'use client'; + +import { useWindowSize } from '@documenso/lib/client-only/hooks/use-window-size'; +import type { Recipient } from '@documenso/prisma/client'; +import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover'; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '@documenso/ui/primitives/tooltip'; + +import { StackAvatars } from './stack-avatars'; +import { StackAvatarsComponent } from './stack-avatars-component'; + +export type StackAvatarsWithUIProps = { + recipients: Recipient[]; + position?: 'top' | 'bottom'; + children?: React.ReactNode; +}; + +export const StackAvatarsWithUI = ({ recipients, position, children }: StackAvatarsWithUIProps) => { + const size = useWindowSize(); + return ( + <> + {size.width > 1050 ? ( + + + + {children || } + + + + + + + + ) : ( + + + {children || } + + + + + + + )} + + ); +}; From ce67de9a1cb1ddb5db8092814c08de8f644fe65d Mon Sep 17 00:00:00 2001 From: Ashraf Date: Fri, 29 Dec 2023 19:29:13 +0800 Subject: [PATCH 02/22] refactor: changed component name for better readability --- apps/web/src/app/(dashboard)/documents/[id]/page.tsx | 6 +++--- apps/web/src/app/(dashboard)/documents/data-table.tsx | 4 ++-- .../{stack-avatars-with-ui.tsx => stack-avatars-ui.tsx} | 5 +++-- 3 files changed, 8 insertions(+), 7 deletions(-) rename apps/web/src/components/(dashboard)/avatar/{stack-avatars-with-ui.tsx => stack-avatars-ui.tsx} (91%) diff --git a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx index ce18f27b8..708746af1 100644 --- a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx +++ b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx @@ -11,7 +11,7 @@ import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/clie import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer'; import { EditDocumentForm } from '~/app/(dashboard)/documents/[id]/edit-document'; -import { StackAvatarsWithUI } from '~/components/(dashboard)/avatar/stack-avatars-with-ui'; +import { StackAvatarsUI } from '~/components/(dashboard)/avatar/stack-avatars-ui'; import { DocumentStatus } from '~/components/formatter/document-status'; export type DocumentPageProps = { @@ -71,9 +71,9 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
- + {recipients.length} Recipient(s) - +
)} diff --git a/apps/web/src/app/(dashboard)/documents/data-table.tsx b/apps/web/src/app/(dashboard)/documents/data-table.tsx index a0cc4b8e8..ca2da02d3 100644 --- a/apps/web/src/app/(dashboard)/documents/data-table.tsx +++ b/apps/web/src/app/(dashboard)/documents/data-table.tsx @@ -12,7 +12,7 @@ import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-documen import { DataTable } from '@documenso/ui/primitives/data-table'; import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination'; -import { StackAvatarsWithUI } from '~/components/(dashboard)/avatar/stack-avatars-with-ui'; +import { StackAvatarsUI } from '~/components/(dashboard)/avatar/stack-avatars-ui'; import { DocumentStatus } from '~/components/formatter/document-status'; import { LocaleDate } from '~/components/formatter/locale-date'; @@ -64,7 +64,7 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => { { header: 'Recipient', accessorKey: 'recipient', - cell: ({ row }) => , + cell: ({ row }) => , }, { header: 'Status', diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-ui.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatars-ui.tsx similarity index 91% rename from apps/web/src/components/(dashboard)/avatar/stack-avatars-with-ui.tsx rename to apps/web/src/components/(dashboard)/avatar/stack-avatars-ui.tsx index 5d5f24413..c1c44836a 100644 --- a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-ui.tsx +++ b/apps/web/src/components/(dashboard)/avatar/stack-avatars-ui.tsx @@ -13,14 +13,15 @@ import { import { StackAvatars } from './stack-avatars'; import { StackAvatarsComponent } from './stack-avatars-component'; -export type StackAvatarsWithUIProps = { +export type StackAvatarsUIProps = { recipients: Recipient[]; position?: 'top' | 'bottom'; children?: React.ReactNode; }; -export const StackAvatarsWithUI = ({ recipients, position, children }: StackAvatarsWithUIProps) => { +export const StackAvatarsUI = ({ recipients, position, children }: StackAvatarsUIProps) => { const size = useWindowSize(); + return ( <> {size.width > 1050 ? ( From b5b74a788c533d0fa38a7a40da3421c5643f55ae Mon Sep 17 00:00:00 2001 From: Anik Dhabal Babu Date: Wed, 6 Mar 2024 14:52:59 +0000 Subject: [PATCH 03/22] fix: overflow issue with user name input --- apps/web/src/components/forms/v2/signup.tsx | 4 ++-- apps/web/src/components/ui/user-profile-skeleton.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/web/src/components/forms/v2/signup.tsx b/apps/web/src/components/forms/v2/signup.tsx index 189116e01..bf1814588 100644 --- a/apps/web/src/components/forms/v2/signup.tsx +++ b/apps/web/src/components/forms/v2/signup.tsx @@ -360,7 +360,7 @@ export const SignUpFormV2 = ({ {step === 'CLAIM_USERNAME' && (
-
+
{baseUrl.host}/u/{field.value || ''}
diff --git a/apps/web/src/components/ui/user-profile-skeleton.tsx b/apps/web/src/components/ui/user-profile-skeleton.tsx index 1c8f35b64..c6936522b 100644 --- a/apps/web/src/components/ui/user-profile-skeleton.tsx +++ b/apps/web/src/components/ui/user-profile-skeleton.tsx @@ -24,9 +24,9 @@ export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSk className, )} > -
+
{baseUrl.host}/u/ - {user.url} + {user.url}
From 9ae51a00728145aaa8fe50cb8d3c89a3bc670566 Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Thu, 7 Mar 2024 19:04:58 +0530 Subject: [PATCH 04/22] feat: improved ui of document dropzone for max quota state Signed-off-by: Adithya Krishna --- .../(dashboard)/documents/upload-document.tsx | 22 -- packages/tailwind-config/index.cjs | 3 + .../ui/lib/document-dropzone-constants.ts | 118 ++++++++++ packages/ui/primitives/document-dropzone.tsx | 204 ++++++++---------- packages/ui/styles/theme.css | 4 + 5 files changed, 217 insertions(+), 134 deletions(-) create mode 100644 packages/ui/lib/document-dropzone-constants.ts diff --git a/apps/web/src/app/(dashboard)/documents/upload-document.tsx b/apps/web/src/app/(dashboard)/documents/upload-document.tsx index 28ddd4318..26f1e795c 100644 --- a/apps/web/src/app/(dashboard)/documents/upload-document.tsx +++ b/apps/web/src/app/(dashboard)/documents/upload-document.tsx @@ -2,7 +2,6 @@ import { useMemo, useState } from 'react'; -import Link from 'next/link'; import { useRouter } from 'next/navigation'; import { Loader } from 'lucide-react'; @@ -139,27 +138,6 @@ export const UploadDocument = ({ className, team }: UploadDocumentProps) => {
)} - - {team?.id === undefined && remaining.documents === 0 && ( -
-
-

- You have reached your document limit. -

- -

- You can upload up to {quota.documents} documents per month on your current plan. -

- - - Upgrade your account to upload more documents. - -
-
- )}
); }; diff --git a/packages/tailwind-config/index.cjs b/packages/tailwind-config/index.cjs index 81706fd37..92222462f 100644 --- a/packages/tailwind-config/index.cjs +++ b/packages/tailwind-config/index.cjs @@ -28,6 +28,9 @@ module.exports = { DEFAULT: 'hsl(var(--secondary))', foreground: 'hsl(var(--secondary-foreground))', }, + warning: { + DEFAULT: 'hsl(var(--warning))', + }, destructive: { DEFAULT: 'hsl(var(--destructive))', foreground: 'hsl(var(--destructive-foreground))', diff --git a/packages/ui/lib/document-dropzone-constants.ts b/packages/ui/lib/document-dropzone-constants.ts new file mode 100644 index 000000000..2f76b8ceb --- /dev/null +++ b/packages/ui/lib/document-dropzone-constants.ts @@ -0,0 +1,118 @@ +import type { Variants } from 'framer-motion'; + +export const DocumentDropzoneContainerVariants: Variants = { + initial: { + scale: 1, + }, + animate: { + scale: 1, + }, + hover: { + transition: { + staggerChildren: 0.05, + }, + }, +}; + +export const DocumentDropzoneCardLeftVariants: Variants = { + initial: { + x: 40, + y: -10, + rotate: -14, + }, + animate: { + x: 40, + y: -10, + rotate: -14, + }, + hover: { + x: -25, + y: -25, + rotate: -22, + }, +}; + +export const DocumentDropzoneCardRightVariants: Variants = { + initial: { + x: -40, + y: -10, + rotate: 14, + }, + animate: { + x: -40, + y: -10, + rotate: 14, + }, + hover: { + x: 25, + y: -25, + rotate: 22, + }, +}; + +export const DocumentDropzoneCardCenterVariants: Variants = { + initial: { + x: 0, + y: 0, + }, + animate: { + x: 0, + y: 0, + }, + hover: { + x: 0, + y: -25, + }, +}; + +export const DocumentDropzoneDisabledCardLeftVariants: Variants = { + initial: { + x: 40, + y: 30, + rotate: -14, + }, + animate: { + x: 40, + y: 0, + rotate: -14, + }, + hover: { + x: 30, + y: 0, + transition: { type: 'spring', duration: 0.25, bounce: 0.5 }, + }, +}; + +export const DocumentDropzoneDisabledCardRightVariants: Variants = { + initial: { + x: -40, + y: 30, + rotate: 14, + }, + animate: { + x: -50, + y: 5, + rotate: 14, + }, + hover: { + x: -40, + y: 5, + transition: { type: 'spring', duration: 0.25, bounce: 0.5 }, + }, +}; + +export const DocumentDropzoneDisabledCardCenterVariants: Variants = { + initial: { + x: 20, + y: 0, + }, + animate: { + x: -10, + y: 0, + }, + hover: { + x: -20, + y: 0, + rotate: -5, + }, +}; diff --git a/packages/ui/primitives/document-dropzone.tsx b/packages/ui/primitives/document-dropzone.tsx index 6caf6d040..916798b20 100644 --- a/packages/ui/primitives/document-dropzone.tsx +++ b/packages/ui/primitives/document-dropzone.tsx @@ -1,90 +1,27 @@ 'use client'; -import type { Variants } from 'framer-motion'; +import Link from 'next/link'; + import { motion } from 'framer-motion'; -import { Plus } from 'lucide-react'; +import { AlertTriangle, 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 { + DocumentDropzoneCardCenterVariants, + DocumentDropzoneCardLeftVariants, + DocumentDropzoneCardRightVariants, + DocumentDropzoneContainerVariants, + DocumentDropzoneDisabledCardCenterVariants, + DocumentDropzoneDisabledCardLeftVariants, + DocumentDropzoneDisabledCardRightVariants, +} from '../lib/document-dropzone-constants'; import { cn } from '../lib/utils'; +import { Button } from './button'; import { Card, CardContent } from './card'; -const DocumentDropzoneContainerVariants: Variants = { - initial: { - scale: 1, - }, - animate: { - scale: 1, - }, - hover: { - transition: { - staggerChildren: 0.05, - }, - }, -}; - -const DocumentDropzoneCardLeftVariants: Variants = { - initial: { - x: 40, - y: -10, - rotate: -14, - }, - animate: { - x: 40, - y: -10, - rotate: -14, - }, - hover: { - x: -25, - y: -25, - rotate: -22, - }, -}; - -const DocumentDropzoneCardRightVariants: Variants = { - initial: { - x: -40, - y: -10, - rotate: 14, - }, - animate: { - x: -40, - y: -10, - rotate: 14, - }, - hover: { - x: 25, - y: -25, - rotate: 22, - }, -}; - -const DocumentDropzoneCardCenterVariants: Variants = { - initial: { - x: 0, - y: 0, - }, - animate: { - x: 0, - y: 0, - }, - hover: { - x: 0, - y: -25, - }, -}; - -const DocumentDescription = { - document: { - headline: 'Add a document', - }, - template: { - headline: 'Upload Template Document', - }, -}; - export type DocumentDropzoneProps = { className?: string; disabled?: boolean; @@ -100,10 +37,18 @@ export const DocumentDropzone = ({ onDrop, onDropRejected, disabled, - disabledMessage = 'You cannot upload documents at this time.', + disabledMessage = 'You can upload up to 5 documents per month on your current plan.', type = 'document', ...props }: DocumentDropzoneProps) => { + const DocumentDescription = { + document: { + headline: disabled ? 'You have reached your document limit.' : 'Add a document', + }, + template: { + headline: 'Upload Template Document', + }, + }; const { getRootProps, getInputProps } = useDropzone({ accept: { 'application/pdf': ['.pdf'], @@ -125,66 +70,101 @@ export const DocumentDropzone = ({ return ( - {/* */} -
- -
-
-
- + {disabled ? ( + // Disabled State +
+ +
+
+
+ - - - + + + - -
-
-
- -
+ +
+
+
+ +
+ ) : ( + // Non Disabled State +
+ +
+
+
+ + + + + + + +
+
+
+ +
+ )} -

- {DocumentDescription[type].headline} -

+

{DocumentDescription[type].headline}

{disabled ? disabledMessage : 'Drag & drop your PDF here.'}

+ {disabled && ( + + )} diff --git a/packages/ui/styles/theme.css b/packages/ui/styles/theme.css index 58dbc892d..8e488ad95 100644 --- a/packages/ui/styles/theme.css +++ b/packages/ui/styles/theme.css @@ -42,6 +42,8 @@ --ring: 95.08 71.08% 67.45%; --radius: 0.5rem; + + --warning: 54 96% 45%; } .dark { @@ -79,6 +81,8 @@ --ring: 95.08 71.08% 67.45%; --radius: 0.5rem; + + --warning: 54 96% 45%; } } From 0c426983bbc4a01d83663d538fbf6273a73c4475 Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Thu, 7 Mar 2024 19:28:35 +0530 Subject: [PATCH 05/22] chore: updated initial animation state Signed-off-by: Adithya Krishna --- .../ui/lib/document-dropzone-constants.ts | 8 +-- packages/ui/primitives/document-dropzone.tsx | 63 +++++++++---------- 2 files changed, 35 insertions(+), 36 deletions(-) diff --git a/packages/ui/lib/document-dropzone-constants.ts b/packages/ui/lib/document-dropzone-constants.ts index 2f76b8ceb..6117f0c7a 100644 --- a/packages/ui/lib/document-dropzone-constants.ts +++ b/packages/ui/lib/document-dropzone-constants.ts @@ -68,7 +68,7 @@ export const DocumentDropzoneCardCenterVariants: Variants = { export const DocumentDropzoneDisabledCardLeftVariants: Variants = { initial: { x: 40, - y: 30, + y: 0, rotate: -14, }, animate: { @@ -85,8 +85,8 @@ export const DocumentDropzoneDisabledCardLeftVariants: Variants = { export const DocumentDropzoneDisabledCardRightVariants: Variants = { initial: { - x: -40, - y: 30, + x: -50, + y: 5, rotate: 14, }, animate: { @@ -103,7 +103,7 @@ export const DocumentDropzoneDisabledCardRightVariants: Variants = { export const DocumentDropzoneDisabledCardCenterVariants: Variants = { initial: { - x: 20, + x: -10, y: 0, }, animate: { diff --git a/packages/ui/primitives/document-dropzone.tsx b/packages/ui/primitives/document-dropzone.tsx index 916798b20..e4ca84892 100644 --- a/packages/ui/primitives/document-dropzone.tsx +++ b/packages/ui/primitives/document-dropzone.tsx @@ -69,26 +69,25 @@ export const DocumentDropzone = ({ }); return ( - - - + + {disabled ? ( // Disabled State
@@ -152,21 +151,21 @@ export const DocumentDropzone = ({
)} + - + -

{DocumentDescription[type].headline}

+

{DocumentDescription[type].headline}

-

- {disabled ? disabledMessage : 'Drag & drop your PDF here.'} -

- {disabled && ( - - )} - - - +

+ {disabled ? disabledMessage : 'Drag & drop your PDF here.'} +

+ {disabled && ( + + )} + + ); }; From f7e7c6dedf865ed9b5187d238f38d64c658dce97 Mon Sep 17 00:00:00 2001 From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com> Date: Thu, 7 Mar 2024 20:08:11 +0530 Subject: [PATCH 06/22] fix: overflow issue --- apps/web/src/components/forms/v2/signup.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/src/components/forms/v2/signup.tsx b/apps/web/src/components/forms/v2/signup.tsx index bf1814588..d15b50473 100644 --- a/apps/web/src/components/forms/v2/signup.tsx +++ b/apps/web/src/components/forms/v2/signup.tsx @@ -360,7 +360,7 @@ export const SignUpFormV2 = ({ {step === 'CLAIM_USERNAME' && (
-
+
{baseUrl.host}/u/{field.value || ''}
From 6c9303012cfedc13bbf638186c22b9112d60921e Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Thu, 7 Mar 2024 21:06:16 +0530 Subject: [PATCH 07/22] chore: updated animation Signed-off-by: Adithya Krishna --- packages/ui/lib/document-dropzone-constants.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/ui/lib/document-dropzone-constants.ts b/packages/ui/lib/document-dropzone-constants.ts index 6117f0c7a..7d611f24a 100644 --- a/packages/ui/lib/document-dropzone-constants.ts +++ b/packages/ui/lib/document-dropzone-constants.ts @@ -79,7 +79,7 @@ export const DocumentDropzoneDisabledCardLeftVariants: Variants = { hover: { x: 30, y: 0, - transition: { type: 'spring', duration: 0.25, bounce: 0.5 }, + transition: { type: 'spring', duration: 0.3, stiffness: 500 }, }, }; @@ -97,7 +97,7 @@ export const DocumentDropzoneDisabledCardRightVariants: Variants = { hover: { x: -40, y: 5, - transition: { type: 'spring', duration: 0.25, bounce: 0.5 }, + transition: { type: 'spring', duration: 0.3, stiffness: 500 }, }, }; @@ -114,5 +114,6 @@ export const DocumentDropzoneDisabledCardCenterVariants: Variants = { x: -20, y: 0, rotate: -5, + transition: { type: 'spring', duration: 0.3, stiffness: 1000 }, }, }; From 3ce5b9e0a02436f32254259310cd94f19db641dc Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Fri, 8 Mar 2024 00:33:15 +0530 Subject: [PATCH 08/22] chore: updated code_of_conduct link Signed-off-by: Adithya Krishna --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f70e7425a..5a85e0a81 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ open in devcontainer - Contributor Covenant + Contributor Covenant

From 92f44cd3044d183ec39579c17940384ddac46883 Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Fri, 8 Mar 2024 00:36:18 +0530 Subject: [PATCH 09/22] chore: remove trailing slash Signed-off-by: Adithya Krishna --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5a85e0a81..93c6d9f95 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ open in devcontainer - Contributor Covenant + Contributor Covenant

From 59cdf3203e39fc0a7204d2e885c3a9d729f69f1c Mon Sep 17 00:00:00 2001 From: Ephraim Atta-Duncan Date: Thu, 7 Mar 2024 20:09:29 +0000 Subject: [PATCH 10/22] fix: add seed script to dx setup --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c25aed514..8ff557e9d 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "commitlint": "commitlint --edit", "clean": "turbo run clean && rimraf node_modules", "d": "npm run dx && npm run dev", - "dx": "npm i && npm run dx:up && npm run prisma:migrate-dev", + "dx": "npm i && npm run dx:up && npm run prisma:migrate-dev && npm run prisma:seed", "dx:up": "docker compose -f docker/development/compose.yml up -d", "dx:down": "docker compose -f docker/development/compose.yml down", "ci": "turbo run test:e2e", From e47ca1d6b6168fb546eacd60d99bf0697c7a8d64 Mon Sep 17 00:00:00 2001 From: Ephraim Atta-Duncan Date: Fri, 8 Mar 2024 00:04:27 +0000 Subject: [PATCH 11/22] chore: add e2e test for deleting a user --- .../profile/delete-account-dialog.tsx | 5 ++++- .../app-tests/e2e/test-delete-user.spec.ts | 21 +++++++++++++++++++ packages/prisma/package.json | 3 ++- packages/prisma/seed/users.ts | 21 +++++++++++++++++++ 4 files changed, 48 insertions(+), 2 deletions(-) create mode 100644 packages/app-tests/e2e/test-delete-user.spec.ts diff --git a/apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx b/apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx index 933b37f31..4db0ba01a 100644 --- a/apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx +++ b/apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx @@ -78,7 +78,9 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
- + @@ -110,6 +112,7 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp onClick={onDeleteAccount} loading={isDeletingAccount} variant="destructive" + data-testid="delete-account-confirmation-button" disabled={hasTwoFactorAuthentication} > {isDeletingAccount ? 'Deleting account...' : 'Delete Account'} diff --git a/packages/app-tests/e2e/test-delete-user.spec.ts b/packages/app-tests/e2e/test-delete-user.spec.ts new file mode 100644 index 000000000..acda3f0fc --- /dev/null +++ b/packages/app-tests/e2e/test-delete-user.spec.ts @@ -0,0 +1,21 @@ +import { test } from '@playwright/test'; + +import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app'; +import { seedUser } from '@documenso/prisma/seed/users'; + +import { manualLogin } from './fixtures/authentication'; + +test('delete user', async ({ page }) => { + const user = await seedUser(); + + await manualLogin({ + page, + email: user.email, + redirectPath: '/settings', + }); + + await page.getByTestId('delete-account-button').click(); + await page.getByTestId('delete-account-confirmation-button').click(); + + await page.waitForURL(`${WEBAPP_BASE_URL}/signin`); +}); diff --git a/packages/prisma/package.json b/packages/prisma/package.json index 0cd3ed282..62248ffc0 100644 --- a/packages/prisma/package.json +++ b/packages/prisma/package.json @@ -12,7 +12,8 @@ "prisma:generate": "prisma generate", "prisma:migrate-dev": "prisma migrate dev", "prisma:migrate-deploy": "prisma migrate deploy", - "prisma:seed": "prisma db seed" + "prisma:seed": "prisma db seed", + "prisma:studio": "prisma studio" }, "prisma": { "seed": "ts-node --transpileOnly --project ./tsconfig.seed.json ./seed-database.ts" diff --git a/packages/prisma/seed/users.ts b/packages/prisma/seed/users.ts index 353683a1d..647b93736 100644 --- a/packages/prisma/seed/users.ts +++ b/packages/prisma/seed/users.ts @@ -26,6 +26,27 @@ export const seedUser = async ({ }); }; +export const seed2faUser = async ({ + name = `2fa-user-${Date.now()}`, + email = `2fa-user-${Date.now()}@test.documenso.com`, + password = 'password', + verified = true, +}: SeedUserOptions = {}) => { + return await prisma.user.create({ + data: { + name, + email, + password: hashSync(password), + emailVerified: verified ? new Date() : undefined, + url: name, + twoFactorEnabled: true, + twoFactorSecret: + 'b2840b216b1f089cb086bdd4260196c645d90b0bd3ff8f66d20d19b99a0da1631bf299e416476917194f1064f58b', + twoFactorBackupCodes: 'a-bunch-of-backup-codes', + }, + }); +}; + export const unseedUser = async (userId: number) => { await prisma.user.delete({ where: { From ff3b49656cf3a001076ddc94ed047663249b965a Mon Sep 17 00:00:00 2001 From: Ephraim Atta-Duncan Date: Fri, 8 Mar 2024 00:07:11 +0000 Subject: [PATCH 12/22] chore: remove unused function --- packages/prisma/seed/users.ts | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/packages/prisma/seed/users.ts b/packages/prisma/seed/users.ts index 647b93736..353683a1d 100644 --- a/packages/prisma/seed/users.ts +++ b/packages/prisma/seed/users.ts @@ -26,27 +26,6 @@ export const seedUser = async ({ }); }; -export const seed2faUser = async ({ - name = `2fa-user-${Date.now()}`, - email = `2fa-user-${Date.now()}@test.documenso.com`, - password = 'password', - verified = true, -}: SeedUserOptions = {}) => { - return await prisma.user.create({ - data: { - name, - email, - password: hashSync(password), - emailVerified: verified ? new Date() : undefined, - url: name, - twoFactorEnabled: true, - twoFactorSecret: - 'b2840b216b1f089cb086bdd4260196c645d90b0bd3ff8f66d20d19b99a0da1631bf299e416476917194f1064f58b', - twoFactorBackupCodes: 'a-bunch-of-backup-codes', - }, - }); -}; - export const unseedUser = async (userId: number) => { await prisma.user.delete({ where: { From f0fd5506fcd901a8701014b6ea713b40445da20b Mon Sep 17 00:00:00 2001 From: Lucas Smith Date: Fri, 8 Mar 2024 12:49:55 +1100 Subject: [PATCH 13/22] fix: skip seeding when running migrate dev When prisma:migrate-dev needs to reset the database it will run the seed script to repopulate data. Now that we've added the seed script to our root setup command we will want to avoid this behaviour since we will end up double seeding the database which currently can cause issues. --- packages/prisma/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/prisma/package.json b/packages/prisma/package.json index 0cd3ed282..59c59bc67 100644 --- a/packages/prisma/package.json +++ b/packages/prisma/package.json @@ -10,7 +10,7 @@ "clean": "rimraf node_modules", "post-install": "prisma generate", "prisma:generate": "prisma generate", - "prisma:migrate-dev": "prisma migrate dev", + "prisma:migrate-dev": "prisma migrate dev --skip-seed", "prisma:migrate-deploy": "prisma migrate deploy", "prisma:seed": "prisma db seed" }, From ee35b4a24b2a380396d1540fbe74f245a386032b Mon Sep 17 00:00:00 2001 From: Lucas Smith Date: Fri, 8 Mar 2024 02:45:22 +0000 Subject: [PATCH 14/22] fix: update test to use getByRole --- .../settings/profile/delete-account-dialog.tsx | 2 +- package.json | 2 +- packages/app-tests/e2e/test-delete-user.spec.ts | 10 +++++++--- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx b/apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx index 4db0ba01a..8663aeea6 100644 --- a/apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx +++ b/apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx @@ -115,7 +115,7 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp data-testid="delete-account-confirmation-button" disabled={hasTwoFactorAuthentication} > - {isDeletingAccount ? 'Deleting account...' : 'Delete Account'} + {isDeletingAccount ? 'Deleting account...' : 'Confirm Deletion'} diff --git a/package.json b/package.json index 8ff557e9d..cbaa2a1eb 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "prisma:migrate-dev": "npm run with:env -- npm run prisma:migrate-dev -w @documenso/prisma", "prisma:migrate-deploy": "npm run with:env -- npm run prisma:migrate-deploy -w @documenso/prisma", "prisma:seed": "npm run with:env -- npm run prisma:seed -w @documenso/prisma", - "prisma:studio": "npm run with:env -- npx prisma studio --schema packages/prisma/schema.prisma", + "prisma:studio": "npm run with:env -- npm run prisma:studio -w @documenso/prisma", "with:env": "dotenv -e .env -e .env.local --", "reset:hard": "npm run clean && npm i && npm run prisma:generate", "precommit": "npm install && git add package.json package-lock.json" diff --git a/packages/app-tests/e2e/test-delete-user.spec.ts b/packages/app-tests/e2e/test-delete-user.spec.ts index acda3f0fc..beae6eb09 100644 --- a/packages/app-tests/e2e/test-delete-user.spec.ts +++ b/packages/app-tests/e2e/test-delete-user.spec.ts @@ -1,6 +1,7 @@ -import { test } from '@playwright/test'; +import { expect, test } from '@playwright/test'; import { WEBAPP_BASE_URL } from '@documenso/lib/constants/app'; +import { getUserByEmail } from '@documenso/lib/server-only/user/get-user-by-email'; import { seedUser } from '@documenso/prisma/seed/users'; import { manualLogin } from './fixtures/authentication'; @@ -14,8 +15,11 @@ test('delete user', async ({ page }) => { redirectPath: '/settings', }); - await page.getByTestId('delete-account-button').click(); - await page.getByTestId('delete-account-confirmation-button').click(); + await page.getByRole('button', { name: 'Delete Account' }).click(); + await page.getByRole('button', { name: 'Confirm Deletion' }).click(); await page.waitForURL(`${WEBAPP_BASE_URL}/signin`); + + // Verify that the user no longer exists in the database + await expect(getUserByEmail({ email: user.email })).rejects.toThrow(); }); From 3b3346e6affed0d5a62a38e91119c5d7bc621ce4 Mon Sep 17 00:00:00 2001 From: Lucas Smith Date: Fri, 8 Mar 2024 13:47:59 +1100 Subject: [PATCH 15/22] fix: remove data-testid attributes --- .../(dashboard)/settings/profile/delete-account-dialog.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx b/apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx index 8663aeea6..e9cc885e9 100644 --- a/apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx +++ b/apps/web/src/app/(dashboard)/settings/profile/delete-account-dialog.tsx @@ -78,9 +78,7 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp
- + @@ -112,7 +110,6 @@ export const DeleteAccountDialog = ({ className, user }: DeleteAccountDialogProp onClick={onDeleteAccount} loading={isDeletingAccount} variant="destructive" - data-testid="delete-account-confirmation-button" disabled={hasTwoFactorAuthentication} > {isDeletingAccount ? 'Deleting account...' : 'Confirm Deletion'} From e9664d6369860db68f8fcf632b54d6502f1e2905 Mon Sep 17 00:00:00 2001 From: Lucas Smith Date: Fri, 8 Mar 2024 03:23:27 +0000 Subject: [PATCH 16/22] chore: tidy code --- .../ui/lib/document-dropzone-constants.ts | 17 ++-- packages/ui/primitives/document-dropzone.tsx | 80 +++++++++---------- 2 files changed, 48 insertions(+), 49 deletions(-) diff --git a/packages/ui/lib/document-dropzone-constants.ts b/packages/ui/lib/document-dropzone-constants.ts index 7d611f24a..dd12acf97 100644 --- a/packages/ui/lib/document-dropzone-constants.ts +++ b/packages/ui/lib/document-dropzone-constants.ts @@ -67,18 +67,19 @@ export const DocumentDropzoneCardCenterVariants: Variants = { export const DocumentDropzoneDisabledCardLeftVariants: Variants = { initial: { - x: 40, + x: 50, y: 0, rotate: -14, }, animate: { - x: 40, + x: 50, y: 0, rotate: -14, }, hover: { x: 30, y: 0, + rotate: -17, transition: { type: 'spring', duration: 0.3, stiffness: 500 }, }, }; @@ -86,17 +87,18 @@ export const DocumentDropzoneDisabledCardLeftVariants: Variants = { export const DocumentDropzoneDisabledCardRightVariants: Variants = { initial: { x: -50, - y: 5, + y: 0, rotate: 14, }, animate: { x: -50, - y: 5, + y: 0, rotate: 14, }, hover: { - x: -40, - y: 5, + x: -30, + y: 0, + rotate: 17, transition: { type: 'spring', duration: 0.3, stiffness: 500 }, }, }; @@ -111,9 +113,8 @@ export const DocumentDropzoneDisabledCardCenterVariants: Variants = { y: 0, }, hover: { - x: -20, + x: [-15, -10, -5, -10], y: 0, - rotate: -5, transition: { type: 'spring', duration: 0.3, stiffness: 1000 }, }, }; diff --git a/packages/ui/primitives/document-dropzone.tsx b/packages/ui/primitives/document-dropzone.tsx index e4ca84892..51c2f0141 100644 --- a/packages/ui/primitives/document-dropzone.tsx +++ b/packages/ui/primitives/document-dropzone.tsx @@ -6,7 +6,7 @@ import { motion } from 'framer-motion'; import { AlertTriangle, Plus } from 'lucide-react'; import { useDropzone } from 'react-dropzone'; -import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT } from '@documenso/lib/constants/app'; +import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT, IS_BILLING_ENABLED } from '@documenso/lib/constants/app'; import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions'; import { @@ -37,18 +37,10 @@ export const DocumentDropzone = ({ onDrop, onDropRejected, disabled, - disabledMessage = 'You can upload up to 5 documents per month on your current plan.', + disabledMessage = 'You cannot upload documents at this time.', type = 'document', ...props }: DocumentDropzoneProps) => { - const DocumentDescription = { - document: { - headline: disabled ? 'You have reached your document limit.' : 'Add a document', - }, - template: { - headline: 'Upload Template Document', - }, - }; const { getRootProps, getInputProps } = useDropzone({ accept: { 'application/pdf': ['.pdf'], @@ -68,26 +60,31 @@ export const DocumentDropzone = ({ maxSize: megabytesToBytes(APP_DOCUMENT_UPLOAD_SIZE_LIMIT), }); + const heading = { + document: disabled ? 'You have reached your document limit.' : 'Add a document', + template: 'Upload Template Document', + }; + return ( - - - + + {disabled ? ( // Disabled State
@@ -151,21 +148,22 @@ export const DocumentDropzone = ({
)} - - + -

{DocumentDescription[type].headline}

+

{heading[type]}

-

- {disabled ? disabledMessage : 'Drag & drop your PDF here.'} -

- {disabled && ( - - )} - - +

+ {disabled ? disabledMessage : 'Drag & drop your PDF here.'} +

+ + {disabled && IS_BILLING_ENABLED() && ( + + )} + + + ); }; From bc60278bac0f647ae3da072feb7a012a06155272 Mon Sep 17 00:00:00 2001 From: Lucas Smith Date: Fri, 8 Mar 2024 03:30:57 +0000 Subject: [PATCH 17/22] fix: remove useless ternaries --- packages/ui/primitives/document-dropzone.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/ui/primitives/document-dropzone.tsx b/packages/ui/primitives/document-dropzone.tsx index 51c2f0141..c0006a5f6 100644 --- a/packages/ui/primitives/document-dropzone.tsx +++ b/packages/ui/primitives/document-dropzone.tsx @@ -90,7 +90,7 @@ export const DocumentDropzone = ({
@@ -99,7 +99,7 @@ export const DocumentDropzone = ({
@@ -121,7 +121,7 @@ export const DocumentDropzone = ({
@@ -130,7 +130,7 @@ export const DocumentDropzone = ({
From ddfd4b9e1b1198ce392c52cf5781d850891e2ae6 Mon Sep 17 00:00:00 2001 From: Lucas Smith Date: Fri, 8 Mar 2024 03:59:15 +0000 Subject: [PATCH 18/22] fix: update styling --- apps/web/src/components/forms/v2/signup.tsx | 10 +++++----- apps/web/src/components/ui/user-profile-skeleton.tsx | 5 ++--- apps/web/src/components/ui/user-profile-timur.tsx | 2 +- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/apps/web/src/components/forms/v2/signup.tsx b/apps/web/src/components/forms/v2/signup.tsx index d15b50473..a7e33a759 100644 --- a/apps/web/src/components/forms/v2/signup.tsx +++ b/apps/web/src/components/forms/v2/signup.tsx @@ -227,9 +227,9 @@ export const SignUpFormV2 = ({
{step === 'BASIC_DETAILS' && (
-

Create a new account

+

Create a new account

-

+

Create your account and start using state-of-the-art document signing. Open and beautiful signing is within your grasp.

@@ -238,9 +238,9 @@ export const SignUpFormV2 = ({ {step === 'CLAIM_USERNAME' && (
-

Claim your username now

+

Claim your username now

-

+

You will get notified & be able to set up your documenso public profile when we launch the feature.

@@ -378,7 +378,7 @@ export const SignUpFormV2 = ({ -
+
{baseUrl.host}/u/{field.value || ''}
diff --git a/apps/web/src/components/ui/user-profile-skeleton.tsx b/apps/web/src/components/ui/user-profile-skeleton.tsx index c6936522b..c8b8b808a 100644 --- a/apps/web/src/components/ui/user-profile-skeleton.tsx +++ b/apps/web/src/components/ui/user-profile-skeleton.tsx @@ -24,9 +24,8 @@ export const UserProfileSkeleton = ({ className, user, rows = 2 }: UserProfileSk className, )} > -
- {baseUrl.host}/u/ - {user.url} +
+ {baseUrl.host}/u/{user.url}
diff --git a/apps/web/src/components/ui/user-profile-timur.tsx b/apps/web/src/components/ui/user-profile-timur.tsx index e99a314b4..8d1e517ad 100644 --- a/apps/web/src/components/ui/user-profile-timur.tsx +++ b/apps/web/src/components/ui/user-profile-timur.tsx @@ -25,7 +25,7 @@ export const UserProfileTimur = ({ className, rows = 2 }: UserProfileTimurProps) className, )} > -
+
{baseUrl.host}/u/timur
From 1b32c5a17f6125f8bfe599150ef053246699b4ab Mon Sep 17 00:00:00 2001 From: premiare <64188227+premiare@users.noreply.github.com> Date: Fri, 8 Mar 2024 18:27:30 +1100 Subject: [PATCH 19/22] fix: fix blog post date (#1003) Fixing the blog date for https://documenso.com/blog/removing-server-actions (I assume it was meant to be March 7th) ![image](https://github.com/documenso/documenso/assets/64188227/a7b96168-b094-46c0-877a-da26c9d140d4) --- apps/marketing/content/blog/removing-server-actions.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/marketing/content/blog/removing-server-actions.mdx b/apps/marketing/content/blog/removing-server-actions.mdx index 7e53c5b58..36dabdf9d 100644 --- a/apps/marketing/content/blog/removing-server-actions.mdx +++ b/apps/marketing/content/blog/removing-server-actions.mdx @@ -4,7 +4,7 @@ description: 'This article talks about the need for the public API and the proce authorName: 'Lucas Smith' authorImage: '/blog/blog-author-lucas.png' authorRole: 'Co-Founder' -date: 2024-07-23 +date: 2024-03-07 tags: - Development --- From fd4ea3aca5b9b1e7782dcd9818d745eb8ceac69b Mon Sep 17 00:00:00 2001 From: Lucas Smith Date: Fri, 8 Mar 2024 20:00:24 +1100 Subject: [PATCH 20/22] fix: update docker docs --- docker/README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docker/README.md b/docker/README.md index addb278c4..ba942ac1c 100644 --- a/docker/README.md +++ b/docker/README.md @@ -60,15 +60,13 @@ docker pull ghcr.io/documenso/documenso ``` docker run -d \ -p 3000:3000 \ - -e POSTGRES_USER="" - -e POSTGRES_PASSWORD="" - -e POSTGRES_DB="" -e NEXTAUTH_URL="" -e NEXTAUTH_SECRET="" -e NEXT_PRIVATE_ENCRYPTION_KEY="" -e NEXT_PRIVATE_ENCRYPTION_SECONDARY_KEY="" -e NEXT_PUBLIC_WEBAPP_URL="" -e NEXT_PRIVATE_DATABASE_URL="" + -e NEXT_PRIVATE_DIRECT_DATABASE_URL="" -e NEXT_PRIVATE_SMTP_TRANSPORT="" -e NEXT_PRIVATE_SMTP_FROM_NAME="" -e NEXT_PRIVATE_SMTP_FROM_ADDRESS="" From 32b0b1bcdaee01cdee9b6ce1b494211263ae487f Mon Sep 17 00:00:00 2001 From: Lucas Smith Date: Fri, 8 Mar 2024 12:21:32 +0000 Subject: [PATCH 21/22] fix: revert api change and use mouseenter/mouseleave --- .../app/(dashboard)/documents/[id]/page.tsx | 6 +- .../app/(dashboard)/documents/data-table.tsx | 4 +- .../avatar/stack-avatars-component.tsx | 71 --------- .../(dashboard)/avatar/stack-avatars-ui.tsx | 52 ------- .../avatar/stack-avatars-with-tooltip.tsx | 140 ++++++++++++++++++ 5 files changed, 145 insertions(+), 128 deletions(-) delete mode 100644 apps/web/src/components/(dashboard)/avatar/stack-avatars-component.tsx delete mode 100644 apps/web/src/components/(dashboard)/avatar/stack-avatars-ui.tsx create mode 100644 apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx diff --git a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx index bf58ae36a..44f3991d8 100644 --- a/apps/web/src/app/(dashboard)/documents/[id]/page.tsx +++ b/apps/web/src/app/(dashboard)/documents/[id]/page.tsx @@ -13,7 +13,7 @@ import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/clie import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer'; import { EditDocumentForm } from '~/app/(dashboard)/documents/[id]/edit-document'; -import { StackAvatarsUI } from '~/components/(dashboard)/avatar/stack-avatars-ui'; +import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip'; import { DocumentStatus } from '~/components/formatter/document-status'; export type DocumentPageProps = { @@ -90,9 +90,9 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
- + {recipients.length} Recipient(s) - +
)}
diff --git a/apps/web/src/app/(dashboard)/documents/data-table.tsx b/apps/web/src/app/(dashboard)/documents/data-table.tsx index ca2da02d3..72787714f 100644 --- a/apps/web/src/app/(dashboard)/documents/data-table.tsx +++ b/apps/web/src/app/(dashboard)/documents/data-table.tsx @@ -12,7 +12,7 @@ import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-documen import { DataTable } from '@documenso/ui/primitives/data-table'; import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination'; -import { StackAvatarsUI } from '~/components/(dashboard)/avatar/stack-avatars-ui'; +import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip'; import { DocumentStatus } from '~/components/formatter/document-status'; import { LocaleDate } from '~/components/formatter/locale-date'; @@ -64,7 +64,7 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => { { header: 'Recipient', accessorKey: 'recipient', - cell: ({ row }) => , + cell: ({ row }) => , }, { header: 'Status', diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatars-component.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatars-component.tsx deleted file mode 100644 index d7f3106e6..000000000 --- a/apps/web/src/components/(dashboard)/avatar/stack-avatars-component.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { getRecipientType } from '@documenso/lib/client-only/recipient-type'; -import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter'; -import type { Recipient } from '@documenso/prisma/client'; - -import { AvatarWithRecipient } from './avatar-with-recipient'; -import { StackAvatar } from './stack-avatar'; - -export const StackAvatarsComponent = ({ recipients }: { recipients: Recipient[] }) => { - const waitingRecipients = recipients.filter( - (recipient) => getRecipientType(recipient) === 'waiting', - ); - - const openedRecipients = recipients.filter( - (recipient) => getRecipientType(recipient) === 'opened', - ); - - const completedRecipients = recipients.filter( - (recipient) => getRecipientType(recipient) === 'completed', - ); - - const uncompletedRecipients = recipients.filter( - (recipient) => getRecipientType(recipient) === 'unsigned', - ); - return ( -
- {completedRecipients.length > 0 && ( -
-

Completed

- {completedRecipients.map((recipient: Recipient) => ( -
- - {recipient.email} -
- ))} -
- )} - - {waitingRecipients.length > 0 && ( -
-

Waiting

- {waitingRecipients.map((recipient: Recipient) => ( - - ))} -
- )} - - {openedRecipients.length > 0 && ( -
-

Opened

- {openedRecipients.map((recipient: Recipient) => ( - - ))} -
- )} - - {uncompletedRecipients.length > 0 && ( -
-

Uncompleted

- {uncompletedRecipients.map((recipient: Recipient) => ( - - ))} -
- )} -
- ); -}; diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatars-ui.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatars-ui.tsx deleted file mode 100644 index c1c44836a..000000000 --- a/apps/web/src/components/(dashboard)/avatar/stack-avatars-ui.tsx +++ /dev/null @@ -1,52 +0,0 @@ -'use client'; - -import { useWindowSize } from '@documenso/lib/client-only/hooks/use-window-size'; -import type { Recipient } from '@documenso/prisma/client'; -import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover'; -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from '@documenso/ui/primitives/tooltip'; - -import { StackAvatars } from './stack-avatars'; -import { StackAvatarsComponent } from './stack-avatars-component'; - -export type StackAvatarsUIProps = { - recipients: Recipient[]; - position?: 'top' | 'bottom'; - children?: React.ReactNode; -}; - -export const StackAvatarsUI = ({ recipients, position, children }: StackAvatarsUIProps) => { - const size = useWindowSize(); - - return ( - <> - {size.width > 1050 ? ( - - - - {children || } - - - - - - - - ) : ( - - - {children || } - - - - - - - )} - - ); -}; diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx new file mode 100644 index 000000000..51fd9c8cd --- /dev/null +++ b/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx @@ -0,0 +1,140 @@ +import { useRef, useState } from 'react'; + +import { getRecipientType } from '@documenso/lib/client-only/recipient-type'; +import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter'; +import type { Recipient } from '@documenso/prisma/client'; +import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover'; + +import { AvatarWithRecipient } from './avatar-with-recipient'; +import { StackAvatar } from './stack-avatar'; +import { StackAvatars } from './stack-avatars'; + +export type StackAvatarsWithTooltipProps = { + recipients: Recipient[]; + position?: 'top' | 'bottom'; + children?: React.ReactNode; +}; + +export const StackAvatarsWithTooltip = ({ + recipients, + position, + children, +}: StackAvatarsWithTooltipProps) => { + const [open, setOpen] = useState(false); + + const isControlled = useRef(false); + const isMouseOverTimeout = useRef(null); + + const waitingRecipients = recipients.filter( + (recipient) => getRecipientType(recipient) === 'waiting', + ); + + const openedRecipients = recipients.filter( + (recipient) => getRecipientType(recipient) === 'opened', + ); + + const completedRecipients = recipients.filter( + (recipient) => getRecipientType(recipient) === 'completed', + ); + + const uncompletedRecipients = recipients.filter( + (recipient) => getRecipientType(recipient) === 'unsigned', + ); + + const onMouseEnter = () => { + if (isMouseOverTimeout.current) { + clearTimeout(isMouseOverTimeout.current); + } + + if (isControlled.current) { + return; + } + + isMouseOverTimeout.current = setTimeout(() => { + setOpen((o) => (!o ? true : o)); + }, 200); + }; + + const onMouseLeave = () => { + if (isMouseOverTimeout.current) { + clearTimeout(isMouseOverTimeout.current); + } + + if (isControlled.current) { + return; + } + + setTimeout(() => { + setOpen((o) => (o ? false : o)); + }, 200); + }; + + const onOpenChange = (newOpen: boolean) => { + isControlled.current = newOpen; + + setOpen(newOpen); + }; + + return ( + + + {children || } + + + + {completedRecipients.length > 0 && ( +
+

Completed

+ {completedRecipients.map((recipient: Recipient) => ( +
+ + {recipient.email} +
+ ))} +
+ )} + + {waitingRecipients.length > 0 && ( +
+

Waiting

+ {waitingRecipients.map((recipient: Recipient) => ( + + ))} +
+ )} + + {openedRecipients.length > 0 && ( +
+

Opened

+ {openedRecipients.map((recipient: Recipient) => ( + + ))} +
+ )} + + {uncompletedRecipients.length > 0 && ( +
+

Uncompleted

+ {uncompletedRecipients.map((recipient: Recipient) => ( + + ))} +
+ )} + + + ); +}; From 40343d1c7241861ccc59788fef3f47c3b0680f27 Mon Sep 17 00:00:00 2001 From: Lucas Smith Date: Fri, 8 Mar 2024 12:34:49 +0000 Subject: [PATCH 22/22] fix: add use client directive --- .../(dashboard)/avatar/stack-avatars-with-tooltip.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx index 0e6aa0ac8..10f7d1e6a 100644 --- a/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx +++ b/apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx @@ -1,3 +1,5 @@ +'use client'; + import { useRef, useState } from 'react'; import { getRecipientType } from '@documenso/lib/client-only/recipient-type';