From 9ae51a00728145aaa8fe50cb8d3c89a3bc670566 Mon Sep 17 00:00:00 2001 From: Adithya Krishna Date: Thu, 7 Mar 2024 19:04:58 +0530 Subject: [PATCH] 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%; } }