@douglasneuroinformatics/libui 3.4.2 → 3.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "3.4.2",
+  "version": "3.5.0",
   "packageManager": "pnpm@9.11.0",
   "description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
   "author": "Joshua Unrau",
@@ -102,6 +102,7 @@
     "framer-motion": "^11.5.2",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.438.0",
+    "react-dropzone": "^14.2.3",
     "react-error-boundary": "^4.0.13",
     "react-resizable-panels": "^2.1.2",
     "recharts": "^2.12.7",

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

@@ -0,0 +1,69 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { FileDropzone } from './FileDropzone';
+
+describe('FileDropzone', () => {
+  const testfile = new File([new Blob()], 'testfile.csv');
+  it('should render', () => {
+    render(
+      <FileDropzone
+        acceptedFileTypes={{
+          'text/csv': ['.csv'],
+          'text/plain': ['.csv', '.tsv']
+        }}
+        file={null}
+        setFile={function (file: File): void {
+          throw new Error('Function not implemented. File name is ' + file.name);
+        }}
+      />
+    );
+    expect(screen.getByTestId('dropzoneText')).contains(String, "Drag'n'drop files or click on box to upload");
+  });
+
+  it('should have file', () => {
+    render(
+      <FileDropzone
+        acceptedFileTypes={{
+          'text/csv': ['.csv'],
+          'text/plain': ['.csv', '.tsv']
+        }}
+        file={testfile}
+        setFile={function (file: File): void {
+          throw new Error('Function not implemented. File name is ' + file.name);
+        }}
+      />
+    );
+    expect(screen.getByText('testfile.csv')).toBeInTheDocument();
+  });
+  it('drag active should work', () => {
+    render(
+      <FileDropzone
+        acceptedFileTypes={{
+          'text/csv': ['.csv'],
+          'text/plain': ['.csv', '.tsv']
+        }}
+        file={null}
+        setFile={function (file: File): void {
+          throw new Error('Function not implemented. File name is ' + file.name);
+        }}
+      />
+    );
+
+    const fileDropzoneElement = screen.getByTestId('dropzone');
+
+    fireEvent.dragOver(fileDropzoneElement, {
+      dataTransfer: {
+        files: [testfile]
+      }
+    });
+
+    fireEvent.drop(fileDropzoneElement, {
+      dataTransfer: {
+        files: [testfile]
+      }
+    });
+
+    expect(screen.getByTestId('dropzoneText')).contain(String, 'testfile.csv');
+  });
+});

package/src/components/FileDropzone/FileDropzone.stories.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { FileDropzone } from './FileDropzone.js';
+
+const meta: Meta<typeof FileDropzone> = {
+  component: FileDropzone
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FileDropzone>;
+
+export const Default: Story = {
+  decorators: [
+    (Story) => {
+      const [file, setFile] = useState<File | undefined>();
+      return (
+        <Story
+          args={{
+            acceptedFileTypes: {
+              'text/csv': ['.csv'],
+              'text/plain': ['.csv', '.tsv']
+            },
+            file,
+            setFile
+          }}
+        />
+      );
+    }
+  ]
+};

package/src/components/FileDropzone/FileDropzone.tsx

@@ -0,0 +1,52 @@
+import { useCallback } from 'react';
+
+import { type FileRejection, useDropzone } from 'react-dropzone';
+
+import { useTranslation } from '@/hooks/useTranslation';
+
+export type FileDropzoneProps = {
+  acceptedFileTypes: {
+    [key: string]: string[];
+  };
+  file: File | null;
+  setFile: (file: File) => void;
+};
+
+export const FileDropzone = ({ acceptedFileTypes, file, setFile }: FileDropzoneProps) => {
+  const { t } = useTranslation();
+
+  const handleDrop = useCallback(
+    (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
+      for (const { errors, file } of rejectedFiles) {
+        console.error(errors, file);
+      }
+      setFile(acceptedFiles[0]!);
+    },
+    [setFile]
+  );
+  const { getInputProps, getRootProps, isDragActive } = useDropzone({
+    accept: acceptedFileTypes,
+    maxFiles: 1,
+    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>
+
+      <input {...getInputProps()} />
+    </div>
+  );
+};

package/src/components/FileDropzone/index.ts

@@ -0,0 +1 @@
+export * from './FileDropzone';

package/src/components/index.ts

@@ -20,6 +20,7 @@ export * from './DropdownButton';
 export * from './DropdownMenu';
 export * from './ErrorBoundary';
 export * from './ErrorFallback';
+export * from './FileDropzone';
 export * from './Form';
 export * from './Heading';
 export * from './HoverCard';