Merge branch 'develop' into 87_oidc_client_deployment

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: () => {},
+}

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>}
+    </>
+  )
+}

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()
+    })
+  })
+})

apps/design-system/src/components/Atoms/Form/DragAndDrop/index.ts

@@ -0,0 +1 @@
+export { DragAndDropField } from './DragAndDropField'

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'

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'