feat: KDS-1055 | Dropzone component #3353

jared-luke · 2023-03-09T03:02:41Z

Why

This is a work in progress.
Introducing the new Dropzone component.
It is leveraging a library called react-dropzone (link here).
The reason behind this component is to create a consistent experience for our customers and engineers when using a file uploader.

Note: the functionality of uploading a file is yet to be worked on. Below is a checklist of things that need to be done before this PR is ready for review.

Currently, there have been four storybook stories to demonstrate the different scenarios of the Dropzone component. These include and can be seen in the video below:

Default component
Adjusting the maxFileSize prop. Defaults to 40kb
Passing state back up to the parent component. This is useful for forms, buttons, and workflows
Custom tailwind styles being applied to the parent container

Design file: Found here

What

dropzone-progress.mp4

Checklist

A Basic list of to-do's that will be worked on over time:

Write a complete suite of tests
Write a complete set of storybook stories
Internationalisation
Accessibility review
Finalise the documentation for release
Responsiveness review with designers

github-actions · 2023-03-09T03:20:29Z

✨ Here is your branch preview! ✨

Storybook

Last updated for commit 53b7b8b: fix: breaking the selected file name to improve responsiveness

gyfchong · 2023-03-15T03:42:35Z

packages/components/src/Dropzone/sub-components/Hyperlink/Hyperlink.tsx

+  if (href) {
+    return (
+      <a
+        href={href}
+        aria-label={text}
+        target={openNewTab ? "_blank" : "_self"}
+        className="text-blue-500 underline hover:underline"
+      >
+        {text}
+      </a>
+    )
+  }


When would this component need to be a link? In any case, I would suggest splitting this into it's own component (or remove?) rather than combine them, doing it this way makes for an ambiguous/complicated API since an anchor and a button consume different props. eg. how would you decide which to render if both href and onClick was provided?

If it's in case your error message needs a link, this should be handled by the consumer passing in a custom error message in the form of a ReactNode.

gyfchong · 2023-03-16T01:05:54Z

packages/components/src/Dropzone/Dropzone.tsx

+        className={classNames(
+          {
+            "rounded-default": true,
+            "border-w-default border-dashed border-gray-400": true,
+            "transition-colors": true,
+            "text-body text-center text-purple-800 transition-colors": true,
+            "w-100 mb-4": true,
+            "!border-solid !border-blue-500 !bg-blue-100": isDragActive,
+          }
+        )}


You can avoid the need for all the true by passing each string in as a param:

Suggested change

className={classNames(

{

"rounded-default": true,

"border-w-default border-dashed border-gray-400": true,

"transition-colors": true,

"text-body text-center text-purple-800 transition-colors": true,

"w-100 mb-4": true,

"!border-solid !border-blue-500 !bg-blue-100": isDragActive,

}

)}

className={classNames(

"rounded-default",

"border-w-default border-dashed border-gray-400",

"transition-colors",

"text-body text-center text-purple-800 transition-colors",

"w-100 mb-4",

isDragActive &&"!border-solid !border-blue-500 !bg-blue-100"

)}

Although, what would be your appetite for converting all your tailwind to vanilla CSS?

gyfchong · 2023-03-16T01:10:16Z

packages/components/src/Dropzone/Dropzone.tsx

+  /**
+   * Set the parent `enableFileUpload` state to allow the parent component to update its UI
+   * Note: this logic will change when we allow multiple files in the future
+   */
+  useEffect(() => {
+    const hasAcceptedFile = acceptedFiles.length >= 1
+    if (hasAcceptedFile) {
+      setEnableFileUpload(true)
+    } else {
+      setEnableFileUpload(false)
+    }
+  }, [acceptedFiles])


This function isn't necessary since the consumer can pass something similar in to onDrop and control what they need to from the outside. eg.

const handleRequiredDropzone = ({ fileRejections }) => { acceptedFiles.length >= 1 && setEnableSubmit(true) } <Dropzone onDrop={handleRequiredDropzone} />

gyfchong · 2023-03-16T01:13:46Z

packages/components/src/Dropzone/Dropzone.tsx

+import { OnDragMessage } from "./sub-components/OnDragMessage/OnDragMessage"
+import { SelectedFileMessage } from "./sub-components/SelectedFileMessage/SelectedFileMessage"
+
+type DropzoneProps = {


For the API, we're thinking it's best to extend the library's type with some minor tweaks:

Add the OverrideClassName type (copy this into your component)

Omit the multiple type

What are you thoughts on extending or Picking some of the InputHTMLAttributes as well. This can allow attributes like name when used inside of a form element being passed down to the dropzone component as well

gyfchong · 2023-03-16T01:14:35Z

packages/components/src/Dropzone/Dropzone.tsx

+    noClick: true,
+    noKeyboard: true,
+    multiple: false,
+    maxFiles: 1,
+    accept: {
+      "application/type": ACCEPTED_FILE_TYPES,
+    },


These should all come from props, with defaults added at the prop level.

gyfchong · 2023-03-16T02:40:25Z

packages/components/src/Dropzone/sub-components/DropzoneIcon/DropzoneIcon.tsx

+export const DropzoneIcon = ({ isDragActive, fileName }: { isDragActive: boolean, fileName: string | null }): JSX.Element => {
+  if (fileName) return <AcceptedFileIcon />


Best to avoid passing in a string to be treated as a boolean, a better way would be to have a hasFile prop and leave it up to the consumer to define how to achieve that boolean.

gyfchong · 2023-03-16T02:44:20Z

packages/components/src/Dropzone/Dropzone.tsx

+    <div className={classNames(className)}>
+      <div
+        data-automation-id={DROPZONE_AUTOMATION_ID}


This is an outdated method of applying test id's as the react-testing-library opts to use data-test-id

Having said that we prefer to allow the consumers to pass any extra prop they want through to the component, so we would spread the rest of the props onto your top level wrapping div (once extracting all the props required for the dropzone config).

gyfchong · 2023-03-16T02:46:55Z

packages/components/src/Dropzone/sub-components/SelectedFileMessage/SelectedFileMessage.tsx

+      height={20}
+      width={20}
+      icon={acceptedFileSvgIcon}
+      title="Selected File"


There's an interesting issue where after the file has been attached, focus is lost completely and the screen reader jumps back to the browser window. Ideally what we expect to happen is the focus to shift to this icon (or it's container) and read out this title to let the SR user know that what they have done is successful.

gyfchong · 2023-03-16T02:47:49Z

packages/components/src/Dropzone/sub-components/OnDragMessage/OnDragMessage.tsx

+import React from "react"
+import { Paragraph } from "@kaizen/typography"
+
+export const OnDragMessage = (): JSX.Element => (


This should be renamed to sound more like a component, as we use the "On" prefix for functions.

gyfchong · 2023-03-16T02:48:56Z

packages/components/src/Dropzone/sub-components/SelectedFileMessage/SelectedFileMessage.tsx

+import { Icon } from "@kaizen/component-library"
+import selectedFileSvgIcon from "@kaizen/component-library/icons/file.icon.svg"
+import acceptedFileSvgIcon from "@kaizen/component-library/icons/success.icon.svg"


Use local paths for these

gyfchong · 2023-03-30T00:00:04Z

packages/components/src/Dropzone/utils.ts

+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))}${sizes[i]}`
+}
+
+interface GetKaizenDropzoneError


We're inside Kaizen already, no need to namespace these 😅

jared-luke added 5 commits March 9, 2023 11:35

feat: initial commit

0e131f8

feat: adding first iteration of the dropzone component

083fe00

feat: adding the dropzone stories

1df0c96

feat: adding a base level spec for dropzone component

321b337

fix: breaking the selected file name to improve responsiveness

53b7b8b

gyfchong reviewed Mar 16, 2023

View reviewed changes

gyfchong reviewed Mar 30, 2023

View reviewed changes

gyfchong added the contribution label Apr 12, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: KDS-1055 | Dropzone component #3353

feat: KDS-1055 | Dropzone component #3353

jared-luke commented Mar 9, 2023

github-actions bot commented Mar 9, 2023

gyfchong Mar 15, 2023

gyfchong Mar 16, 2023

gyfchong Mar 16, 2023

gyfchong Mar 16, 2023

gyfchong Mar 16, 2023

gyfchong Mar 16, 2023

jared-luke Mar 23, 2023

gyfchong Mar 16, 2023

gyfchong Mar 16, 2023

gyfchong Mar 16, 2023

gyfchong Mar 16, 2023

gyfchong Mar 16, 2023

gyfchong Mar 16, 2023

gyfchong Mar 30, 2023

		export const DropzoneIcon = ({ isDragActive, fileName }: { isDragActive: boolean, fileName: string \| null }): JSX.Element => {
		if (fileName) return <AcceptedFileIcon />

feat: KDS-1055 | Dropzone component #3353

Are you sure you want to change the base?

feat: KDS-1055 | Dropzone component #3353

Conversation

jared-luke commented Mar 9, 2023

Why

What

Checklist

github-actions bot commented Mar 9, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment