From 3b98127ace92d9279b346f646ae4b38245d1b9af Mon Sep 17 00:00:00 2001
From: Jeroen Branje <info@jeroenbranje.nl>
Date: Mon, 26 Feb 2024 14:53:34 +0100
Subject: [PATCH] feat(design-system): Add drag and drop form atom

Signed-off-by: Jeroen Branje <info@jeroenbranje.nl>
---
 .../DragAndDrop/DragAndDropField.stories.tsx  | 32 ++++++++
 .../Form/DragAndDrop/DragAndDropField.tsx     | 81 +++++++++++++++++++
 .../DragAndDropFieldProps.ui.test.tsx         | 25 ++++++
 .../Atoms/Form/DragAndDrop/index.ts           |  1 +
 .../src/components/Atoms/Form/index.ts        |  1 +
 apps/design-system/src/index.ts               |  2 +-
 6 files changed, 141 insertions(+), 1 deletion(-)
 create mode 100644 apps/design-system/src/components/Atoms/Form/DragAndDrop/DragAndDropField.stories.tsx
 create mode 100644 apps/design-system/src/components/Atoms/Form/DragAndDrop/DragAndDropField.tsx
 create mode 100644 apps/design-system/src/components/Atoms/Form/DragAndDrop/DragAndDropFieldProps.ui.test.tsx
 create mode 100644 apps/design-system/src/components/Atoms/Form/DragAndDrop/index.ts

diff --git a/apps/design-system/src/components/Atoms/Form/DragAndDrop/DragAndDropField.stories.tsx b/apps/design-system/src/components/Atoms/Form/DragAndDrop/DragAndDropField.stories.tsx
new file mode 100644
index 00000000..3f71ed36
--- /dev/null
+++ b/apps/design-system/src/components/Atoms/Form/DragAndDrop/DragAndDropField.stories.tsx
@@ -0,0 +1,32 @@
+import { Meta, Story } from '@storybook/react'
+
+import { DragAndDropField } from './DragAndDropField'
+
+export default {
+  component: DragAndDropField,
+  title: 'Components/Form/DragAndDropField',
+} as Meta
+
+const FileFieldTemplate: Story = ({ label, name, value, error, inputRef, onChange, onDrop }) => (
+  <DragAndDropField
+    label={label}
+    name={name}
+    value={value}
+    error={error}
+    inputRef={inputRef}
+    onDrop={onDrop}
+    onChange={onChange}
+  />
+)
+
+export const FileFieldComponent = FileFieldTemplate.bind({})
+
+FileFieldComponent.args = {
+  label: 'label',
+  name: 'name',
+  value: [],
+  error: 'ERROR',
+  inputRef: null,
+  onChange: () => {},
+  onDrop: () => {},
+}
diff --git a/apps/design-system/src/components/Atoms/Form/DragAndDrop/DragAndDropField.tsx b/apps/design-system/src/components/Atoms/Form/DragAndDrop/DragAndDropField.tsx
new file mode 100644
index 00000000..4d9f3ab0
--- /dev/null
+++ b/apps/design-system/src/components/Atoms/Form/DragAndDrop/DragAndDropField.tsx
@@ -0,0 +1,81 @@
+import { PhotoIcon } from '@heroicons/react/24/outline'
+import { isEmpty } from 'ramda'
+import { FC, JSXElementConstructor, ReactElement, useState } from 'react'
+import { RefCallBack } from 'react-hook-form'
+
+interface DragAndDropFieldProps {
+  label: string | ReactElement<any, string | JSXElementConstructor<any>>
+  name: string
+  value: any
+  error?: string
+  inputRef: RefCallBack
+  onDrop: (event: React.DragEvent<HTMLDivElement>) => void
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+export const DragAndDropField: FC<DragAndDropFieldProps> = ({
+  label,
+  name,
+  value,
+  error = '',
+  inputRef,
+  onDrop,
+  onChange,
+}) => {
+  const [isDragActive, setIsDragActive] = useState<boolean>(false)
+
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    setIsDragActive(false)
+    onDrop(event)
+  }
+
+  const handleDragEnter = () => {
+    setIsDragActive(true)
+  }
+
+  const handleDragLeave = () => {
+    setIsDragActive(false)
+  }
+
+  return (
+    <>
+      <label htmlFor={name} className="block text-sm font-medium leading-6 text-gray-900 dark:text-white">
+        {label}
+      </label>
+      <div
+        className={`mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10 dark:bg-white/5 dark:text-white dark:border-gray-300/25 dark:hover:bg-white/10 dark:hover:border-gray-300/50 focus:dark:ring-gray-200 text-gray-900 transition
+        ${isDragActive ? 'bg-blue/20 border-blue/80' : ''}`}
+        onDrop={handleDrop}
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onDragOver={event => event.preventDefault()}
+      >
+        <div className="text-center">
+          <PhotoIcon className="mx-auto h-12 w-12 text-gray-300" aria-hidden="true" />
+          <div className="mt-4 flex text-sm leading-6 text-gray-600 dark:text-gray-400">
+            <label
+              htmlFor={name}
+              className="relative cursor-pointer rounded-md bg-transparent font-semibold text-black dark:text-gray-300 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-blue-800"
+            >
+              <span>Upload a file</span>
+              <input
+                id={name}
+                name={name}
+                type="file"
+                onChange={onChange}
+                ref={inputRef}
+                accept="image/png, image/jpeg"
+                className="sr-only"
+              />
+            </label>
+            <p className="pl-1">or drag and drop</p>
+          </div>
+          <p className="text-xs leading-5 text-gray-600 dark:text-gray-500">PNG, JPG, GIF up to 10MB</p>
+        </div>
+      </div>
+      {value}
+      {!isEmpty(error) && <p className="mt-3 text-sm leading-6 text-red-600 dark:text-red-400">{error}</p>}
+    </>
+  )
+}
diff --git a/apps/design-system/src/components/Atoms/Form/DragAndDrop/DragAndDropFieldProps.ui.test.tsx b/apps/design-system/src/components/Atoms/Form/DragAndDrop/DragAndDropFieldProps.ui.test.tsx
new file mode 100644
index 00000000..76027347
--- /dev/null
+++ b/apps/design-system/src/components/Atoms/Form/DragAndDrop/DragAndDropFieldProps.ui.test.tsx
@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react'
+
+import { DragAndDropField } from './DragAndDropField'
+
+describe('atoms/DragAndDropField', () => {
+  describe('render', () => {
+    it('should render DragAndDropField', () => {
+      // when ... we rendering component
+      render(
+        <DragAndDropField
+          label="LABEL"
+          value="VALUE"
+          inputRef={() => {}}
+          name="NAME"
+          onDrop={() => {}}
+          onChange={() => {}}
+        />,
+      )
+
+      // then ... it should return as expected
+      const element = screen.getByText('LABEL')
+      expect(element).toBeInTheDocument()
+    })
+  })
+})
diff --git a/apps/design-system/src/components/Atoms/Form/DragAndDrop/index.ts b/apps/design-system/src/components/Atoms/Form/DragAndDrop/index.ts
new file mode 100644
index 00000000..a84e479c
--- /dev/null
+++ b/apps/design-system/src/components/Atoms/Form/DragAndDrop/index.ts
@@ -0,0 +1 @@
+export { DragAndDropField } from './DragAndDropField'
diff --git a/apps/design-system/src/components/Atoms/Form/index.ts b/apps/design-system/src/components/Atoms/Form/index.ts
index e3607b7a..de8d0ff9 100644
--- a/apps/design-system/src/components/Atoms/Form/index.ts
+++ b/apps/design-system/src/components/Atoms/Form/index.ts
@@ -1,3 +1,4 @@
 export { Checkbox, Checkboxes } from './Checkbox'
+export { DragAndDropField } from './DragAndDrop'
 export { TextField } from './Input'
 export { TextareaField } from './Textarea'
diff --git a/apps/design-system/src/index.ts b/apps/design-system/src/index.ts
index 710c7824..ff1c24c6 100644
--- a/apps/design-system/src/index.ts
+++ b/apps/design-system/src/index.ts
@@ -3,7 +3,7 @@ export { Button } from './components/Atoms/Button'
 export { Card } from './components/Atoms/Card'
 export { ContactPerson } from './components/Atoms/ContactPerson'
 export { Date } from './components/Atoms/Date'
-export { Checkbox, Checkboxes, TextField, TextareaField } from './components/Atoms/Form'
+export { Checkbox, Checkboxes, DragAndDropField, FileField, TextField, TextareaField } from './components/Atoms/Form'
 export { Grid, GridRow } from './components/Atoms/Grid'
 export { Heading } from './components/Atoms/Heading'
 export { HeadingWithTooltip } from './components/Atoms/HeadingWithTooltip'