@douglasneuroinformatics/libui 3.6.0 → 3.6.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "3.6.0",
+  "version": "3.6.2",
   "packageManager": "pnpm@9.12.1",
   "description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
   "author": "Joshua Unrau",

package/src/components/FileDropzone/FileDropzone.spec.tsx

@@ -18,7 +18,7 @@ describe('FileDropzone', () => {
         }}
       />
     );
-    expect(screen.getByTestId('dropzoneText')).contains(String, "Drag'n'drop files or click on box to upload");
+    expect(screen.getByTestId('dropzone-title')).contains(String, 'Drag and drop files or click on box to upload');
   });
 
   it('should have file', () => {
@@ -64,6 +64,6 @@ describe('FileDropzone', () => {
       }
     });
 
-    expect(screen.getByTestId('dropzoneText')).contain(String, 'testfile.csv');
+    expect(screen.getByTestId('dropzone-title')).contain(String, 'testfile.csv');
   });
 });

package/src/components/FileDropzone/FileDropzone.tsx

@@ -1,18 +1,33 @@
 import { useCallback } from 'react';
 
+import { UploadIcon } from 'lucide-react';
 import { type FileRejection, useDropzone } from 'react-dropzone';
 
 import { useTranslation } from '@/hooks/useTranslation';
+import { cn } from '@/utils';
 
 export type FileDropzoneProps = {
   acceptedFileTypes: {
     [key: string]: string[];
   };
+  className?: string;
+  description?: string;
   file: File | null;
   setFile: (file: File) => void;
+  titles?: {
+    dragActive: string;
+    dragInactive: string;
+  };
 };
 
-export const FileDropzone = ({ acceptedFileTypes, file, setFile }: FileDropzoneProps) => {
+export const FileDropzone = ({
+  acceptedFileTypes,
+  className,
+  description,
+  file,
+  setFile,
+  titles
+}: FileDropzoneProps) => {
   const { t } = useTranslation();
 
   const handleDrop = useCallback(
@@ -30,22 +45,31 @@ export const FileDropzone = ({ acceptedFileTypes, file, setFile }: FileDropzoneP
     onDrop: handleDrop
   });
 
-  return (
-    <div data-testid="dropzone" {...getRootProps()}>
-      <p className="mt-1 border border-dashed p-4 text-center text-sm" data-testid="dropzoneText">
-        {file
-          ? file.name
-          : isDragActive
-            ? t({
-                en: 'File to upload',
-                fr: 'fichier à télécharger'
-              })
-            : t({
-                en: "Drag'n'drop files or click on box to upload",
-                fr: 'Glissez-déposez les fichiers ou cliquez sur la case pour les télécharger'
-              })}
-      </p>
+  const dragActiveTitle =
+    titles?.dragActive ??
+    t({
+      en: 'File to upload',
+      fr: 'fichier à télécharger'
+    });
 
+  const dragInactiveTitle =
+    titles?.dragInactive ??
+    t({
+      en: 'Drag and drop files or click on box to upload',
+      fr: 'Glissez-déposez les fichiers ou cliquez sur la case pour les télécharger'
+    });
+
+  return (
+    <div className={cn('border border-dashed p-4', className)} data-testid="dropzone" {...getRootProps()}>
+      <div className="flex flex-col items-center gap-3">
+        <UploadIcon style={{ height: 24, strokeWidth: 2, width: 24 }} />
+        <div className="flex flex-col items-center gap-1 text-center">
+          <h3 className="text-lg font-semibold tracking-tight" data-testid="dropzone-title">
+            {file ? file.name : isDragActive ? dragActiveTitle : dragInactiveTitle}
+          </h3>
+          {description && <p className="text-sm text-muted-foreground">{description}</p>}
+        </div>
+      </div>
       <input {...getInputProps()} />
     </div>
   );

package/src/components/Form/Form.tsx

@@ -1,5 +1,4 @@
-import { useEffect, useState } from 'react';
-import * as React from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 
 import type {
   FormContent,
@@ -122,7 +121,7 @@ const Form = <TSchema extends z.ZodType<FormDataType>, TData extends z.TypeOf<TS
     revalidate();
   }, [resolvedLanguage]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (initialValues) {
       setValues(getInitialValues(initialValues));
     }