From 9ae51a00728145aaa8fe50cb8d3c89a3bc670566 Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Thu, 7 Mar 2024 19:04:58 +0530 Subject: [PATCH 1/5] 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 2/5] 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 6c9303012cfedc13bbf638186c22b9112d60921e Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Thu, 7 Mar 2024 21:06:16 +0530 Subject: [PATCH 3/5] 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 e9664d6369860db68f8fcf632b54d6502f1e2905 Mon Sep 17 00:00:00 2001 From: Lucas Smith Date: Fri, 8 Mar 2024 03:23:27 +0000 Subject: [PATCH 4/5] 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 5/5] 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 = ({