Merge pull request #285 from DevinoSolutions/toastify-fix

toastify-fix

Author: MedAmine1212

.gitignore

@@ -21,4 +21,6 @@ public
 /stories/Uploader.stories.js
 
 # Tests
-coverage
+coverage
+
+*.tgz

package.json

@@ -2,7 +2,7 @@
     "name": "upup-react-file-uploader",
     "author": "Devino Solutions",
     "license": "MIT",
-    "version": "1.4.5",
+    "version": "1.4.6",
     "publishConfig": {
         "access": "public"
     },
@@ -183,7 +183,6 @@
         "load-script": "^2.0.0",
         "pako": "^2.1.0",
         "react-icons": "^4.12.0",
-        "react-toastify": "^11.0.3",
         "react-webcam": "^7.2.0",
         "tailwind-merge": "^2.6.0",
         "truncate": "^3.0.0",

pnpm-lock.yaml

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { forwardRef, useImperativeHandle } from 'react'
 import { TbLoader } from 'react-icons/tb/index.js'
 import { devinoDark, devinoLight, logoDark, logoLight } from '../assets/logos'
@@ -125,7 +127,7 @@ export default forwardRef<UpupUploaderRef, UpupUploaderProps>(
                                     href={'https://getupup.ca/'}
                                     target={'_blank'}
                                     rel="noopener noreferrer"
-                                    className="upup-z-[2147483647] upup-flex upup-items-center upup-gap-[5px]"
+                                    className="upup-flex upup-items-center upup-gap-[5px]"
                                 >
                                     <ShouldRender
                                         if={providerValues.props.dark}

src/frontend/UpupUploader.tsx

@@ -20,7 +20,7 @@ export default function AdapterSelector() {
             className={cn(
                 'upup-relative upup-flex upup-h-full upup-flex-col-reverse upup-items-center upup-justify-center upup-gap-3 upup-rounded-lg md:upup-flex-col md:upup-gap-14',
                 {
-                    'upup-pt-[72px] md:upup-pt-0': isAddingMore,
+                    'md:upup-pt-0': isAddingMore,
                 },
             )}
         >

src/frontend/components/AdapterSelector.tsx

@@ -14,7 +14,7 @@ export default memo(function FileList() {
         activeAdapter,
         files,
         upload: { proceedUpload, uploadStatus, totalProgress },
-        props: { mini, dark, classNames, allowPreview, isProcessing },
+        props: { dark, classNames, allowPreview, isProcessing },
         handleDone,
         handleCancel,
     } = useRootContext()
@@ -24,7 +24,6 @@ export default memo(function FileList() {
             className={cn(
                 'upup-relative upup-flex upup-h-full upup-flex-col upup-rounded-lg upup-shadow',
                 {
-                    'upup-pt-[72px] md:upup-pt-11': !mini,
                     'upup-hidden': isAddingMore || activeAdapter || !files.size,
                 },
             )}

src/frontend/components/FileList.tsx

@@ -1,7 +1,7 @@
+'use client'
+
 import { motion } from 'framer-motion'
 import React from 'react'
-import { ToastContainer } from 'react-toastify'
-import 'react-toastify/dist/ReactToastify.css'
 import { useRootContext } from '../context/RootContext'
 import useMainBox from '../hooks/useMainBox'
 import { cn } from '../lib/tailwind'
@@ -15,7 +15,6 @@ export default function MainBox() {
         files,
         activeAdapter,
         isAddingMore,
-        toastContainerId,
         props: { dark },
     } = useRootContext()
     const {
@@ -32,7 +31,7 @@ export default function MainBox() {
             <motion.div
                 key="adapter-selector"
                 className={cn(
-                    'upup-relative upup-flex-1 upup-overflow-hidden upup-rounded-lg [&_.Toastify]:upup-absolute [&_.Toastify]:upup-bottom-0 [&_.Toastify]:upup-left-0 [&_.Toastify]:upup-right-0 [&_.Toastify__toast-container]:upup-relative',
+                    'upup-relative upup-flex-1 upup-overflow-hidden upup-rounded-lg',
                     {
                         'upup-border upup-border-[#1849D6]': absoluteHasBorder,
                         'upup-border-[#30C5F7] dark:upup-border-[#30C5F7]':
@@ -60,20 +59,6 @@ export default function MainBox() {
                     <AdapterSelector />
                 </ShouldRender>
                 <FileList />
-
-                <ShouldRender if={true}>
-                    <ToastContainer
-                        position="bottom-center"
-                        className="!upup-relative !upup-bottom-2 !upup-left-1/2 !upup-w-[320px] !upup-max-w-[90%] !-upup-translate-x-1/2"
-                        limit={2}
-                        theme={dark ? 'dark' : 'light'}
-                        containerId={`upup-toast-container-${toastContainerId}`}
-                        progressClassName="upup-h-0"
-                        hideProgressBar
-                        newestOnTop
-                        stacked
-                    />
-                </ShouldRender>
             </motion.div>
         </MyAnimatePresence>
     )

src/frontend/components/MainBox.tsx

@@ -34,7 +34,7 @@ export default function MainBoxHeader({ handleCancel }: Readonly<Props>) {
     return (
         <div
             className={cn(
-                'upup-shadow-bottom upup-absolute upup-left-0 upup-right-0 upup-top-0 upup-z-10 upup-grid upup-grid-cols-4 upup-grid-rows-2 upup-items-center upup-justify-between upup-rounded-t-lg upup-bg-black/[0.025] upup-px-3 upup-py-2 md:upup-grid-rows-1',
+                'upup-shadow-bottom upup-left-0 upup-right-0 upup-top-0 upup-z-10 upup-grid upup-grid-cols-4 upup-grid-rows-2 upup-items-center upup-justify-between upup-rounded-t-lg upup-bg-black/[0.025] upup-px-3 upup-py-2 md:upup-grid-rows-1',
                 {
                     'upup-bg-white/5 dark:upup-bg-white/5': dark,
                 },

src/frontend/components/shared/MainBoxHeader.tsx

@@ -80,7 +80,6 @@ export interface IRootContext {
 
     upload: ContextUpload
     props: ContextProps
-    toastContainerId: string
 }
 
 const RootContext = createContext<IRootContext>({

src/frontend/context/RootContext.ts

@@ -1,14 +1,11 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import {
     TbCameraRotate,
     TbCapture,
     TbLoader,
     TbPlus,
     TbTrash,
 } from 'react-icons/tb/index.js'
-import { toast } from 'react-toastify'
-import truncate from 'truncate'
-import { v4 as uuid } from 'uuid'
 import checkFileType from '../../shared/lib/checkFileType'
 import {
     FileWithParams,
@@ -23,7 +20,6 @@ import {
     sizeToBytes,
 } from '../lib/file'
 import { ProviderSDK } from '../lib/storage/provider'
-import { cn } from '../lib/tailwind'
 
 type FileProgress = {
     id: string
@@ -33,9 +29,6 @@ type FileProgress = {
 
 export type FilesProgressMap = Record<string, FileProgress>
 
-const toastClassName =
-    'upup-px-4 upup-pr-6 upup-py-3 upup-text-center !upup-mb-0 upup-min-h-fit upup-shadow-lg [&_button]:upup-top-1/2 [&_button]:-upup-translate-y-1/2'
-
 export default function useRootProvider({
     accept = '*',
     mini = false,
@@ -81,7 +74,6 @@ export default function useRootProvider({
     const [filesProgressMap, setFilesProgressMap] = useState<FilesProgressMap>(
         {} as FilesProgressMap,
     )
-    const [toastContainerId, setToastContainerId] = useState<string>('')
     const [uploadError, setUploadError] = useState('')
 
     const limit = useMemo(
@@ -105,24 +97,15 @@ export default function useRootProvider({
             setUploadError(message)
 
             if (errorHandler) errorHandler(message)
-            else
-                toast.error(truncate(message, 75), {
-                    containerId: toastContainerId,
-                    className: cn(toastClassName, 'upup-text-red-500'),
-                })
         },
-        [errorHandler, toastContainerId],
+        [errorHandler],
     )
 
     const onWarn = useCallback(
-        (message: string) =>
-            warningHandler
-                ? warningHandler(message)
-                : toast.warn(message, {
-                      containerId: toastContainerId,
-                      className: cn(toastClassName, 'upup-text-yellow-500'),
-                  }),
-        [warningHandler, toastContainerId],
+        (message: string) => {
+            if (warningHandler) warningHandler(message)
+        },
+        [warningHandler],
     )
     function isFileWithParamsArray(
         files: File[] | FileWithParams[],
@@ -335,10 +318,6 @@ export default function useRootProvider({
         setSelectedFilesMap(new Map())
         setFilesProgressMap({})
     }, [])
-    useEffect(() => {
-        if (!toastContainerId.length && (!errorHandler || !warningHandler))
-            setToastContainerId(uuid())
-    }, [errorHandler, warningHandler, toastContainerId])
 
     return {
         inputRef,
@@ -356,7 +335,6 @@ export default function useRootProvider({
         handleFileRemove,
         oneDriveConfigs: driveConfigs?.oneDrive,
         googleDriveConfigs: driveConfigs?.googleDrive,
-        toastContainerId,
         upload: {
             totalProgress,
             filesProgressMap,