From 3c57cb2e2a0abdf9ac23f4cf011aefaa53173754 Mon Sep 17 00:00:00 2001
From: Aleksandr Shumilov <alexander.shumilov@toptal.com>
Date: Wed, 31 Jul 2024 13:10:34 +0200
Subject: [PATCH] [FX-5528] Migrate Dropzone to Tailwind (#4428)

---
 .changeset/calm-cooks-dream.md                |  5 +
 packages/base/Dropzone/package.json           |  2 +-
 .../base/Dropzone/src/Dropzone/Dropzone.tsx   | 99 +++++++++++++++----
 .../src/Dropzone/__snapshots__/test.tsx.snap  |  3 +-
 packages/base/Dropzone/src/Dropzone/styles.ts | 44 ---------
 packages/base/Dropzone/src/Dropzone/test.tsx  |  2 +-
 packages/base/Dropzone/tsconfig.json          |  1 +
 7 files changed, 90 insertions(+), 66 deletions(-)
 create mode 100644 .changeset/calm-cooks-dream.md
 delete mode 100644 packages/base/Dropzone/src/Dropzone/styles.ts

diff --git a/.changeset/calm-cooks-dream.md b/.changeset/calm-cooks-dream.md
new file mode 100644
index 0000000000..b77765fb3c
--- /dev/null
+++ b/.changeset/calm-cooks-dream.md
@@ -0,0 +1,5 @@
+---
+'@toptal/picasso-dropzone': patch
+---
+
+- migrate Dropzone to Tailwind
diff --git a/packages/base/Dropzone/package.json b/packages/base/Dropzone/package.json
index 1b6594a359..625058c11c 100644
--- a/packages/base/Dropzone/package.json
+++ b/packages/base/Dropzone/package.json
@@ -36,7 +36,7 @@
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
+    "@toptal/picasso-tailwind-merge": "^1.0.1",
     "@toptal/picasso-tailwind": ">=2.7",
     "react": ">=16.12.0 < 19.0.0"
   },
diff --git a/packages/base/Dropzone/src/Dropzone/Dropzone.tsx b/packages/base/Dropzone/src/Dropzone/Dropzone.tsx
index 198b27bea3..576f90f496 100644
--- a/packages/base/Dropzone/src/Dropzone/Dropzone.tsx
+++ b/packages/base/Dropzone/src/Dropzone/Dropzone.tsx
@@ -1,17 +1,15 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, useMemo } from 'react'
 import { useDropzone } from 'react-dropzone'
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { Upload24 } from '@toptal/picasso-icons'
 import { FormHint } from '@toptal/picasso-form'
 import { Container } from '@toptal/picasso-container'
 import { FileList } from '@toptal/picasso-file-input'
 import { Typography } from '@toptal/picasso-typography'
+import { SPACING_6 } from '@toptal/picasso-utils'
 
 import type { FileUpload, DropzoneOptions } from './types'
-import styles from './styles'
 
 export interface Props extends BaseProps {
   /**
@@ -46,7 +44,51 @@ export interface Props extends BaseProps {
   hovered?: boolean
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'Dropzone' })
+type DropzoneState = {
+  isDisabled?: boolean
+  isHovered?: boolean
+  isFocused?: boolean
+  isDragActive?: boolean
+}
+
+type StateToClassMatcher = (currentState: DropzoneState) => string
+
+const getCursorClasses: StateToClassMatcher = ({
+  isDisabled,
+  isHovered,
+  isFocused,
+  isDragActive,
+}) => {
+  if (isDisabled) {
+    return 'cursor-not-allowed'
+  }
+
+  if (isHovered || isFocused || isDragActive) {
+    return 'cursor-pointer'
+  }
+
+  return 'hover:cursor-pointer focus:cursor-pointer'
+}
+
+const getBorderColorClasses: StateToClassMatcher = ({
+  isDisabled,
+  isHovered,
+  isFocused,
+  isDragActive,
+}) => {
+  if (isDisabled) {
+    return 'border-gray-400 hover:border-gray-400'
+  }
+
+  if (isHovered || isFocused || isDragActive) {
+    return 'border-blue-500'
+  }
+
+  return 'border-gray-400 hover:border-blue-500 focus:border-blue-500'
+}
+
+const getBackgroundColorClasses: StateToClassMatcher = ({ isDisabled }) =>
+  isDisabled ? 'bg-gray-100' : 'bg-white'
 
 export const Dropzone = forwardRef<HTMLInputElement, Props>(function Dropzone(
   props,
@@ -60,8 +102,8 @@ export const Dropzone = forwardRef<HTMLInputElement, Props>(function Dropzone(
     className,
     style,
     'data-testid': dataTestId,
-    focused,
-    hovered,
+    focused: isFocused,
+    hovered: isHovered,
 
     // dropzoneOptions
     accept,
@@ -91,7 +133,15 @@ export const Dropzone = forwardRef<HTMLInputElement, Props>(function Dropzone(
     validator,
   })
 
-  const classes = useStyles()
+  const componentState = useMemo(
+    () => ({
+      isDisabled,
+      isHovered,
+      isFocused,
+      isDragActive,
+    }),
+    [isDisabled, isHovered, isFocused, isDragActive]
+  )
 
   return (
     <Container style={style} ref={ref} className={className}>
@@ -99,24 +149,35 @@ export const Dropzone = forwardRef<HTMLInputElement, Props>(function Dropzone(
         flex
         direction='column'
         alignItems='center'
+        rounded
+        aria-disabled={isDisabled}
+        padded={SPACING_6}
         data-testid={dataTestId}
-        {...getRootProps({
-          className: cx(classes.root, {
-            [classes.dragActive]: isDragActive,
-            [classes.hovered]: hovered,
-            [classes.disabled]: isDisabled,
-            [classes.focused]: focused,
-          }),
-        })}
+        {...getRootProps({})}
+        className={twJoin(
+          'border border-dashed',
+          'box-border',
+          'text-graphite-700',
+          'gap-2',
+          'transition-all ease-out duration-350',
+          getCursorClasses(componentState),
+          getBorderColorClasses(componentState),
+          getBackgroundColorClasses(componentState),
+          isDisabled && 'hover:no-drop'
+        )}
       >
-        <input {...getInputProps({ className: classes.nativeInput })} />
+        <input {...getInputProps()} />
         <Upload24 color='darkGrey' />
         {!hideContentText && (
           <Typography size='medium' color='black' weight='semibold'>
             Click or drag to upload
           </Typography>
         )}
-        {hint && <FormHint className={cx(classes.hint)}>{hint}</FormHint>}
+        {hint && (
+          <FormHint className={twJoin('m-0', '[&>*]:leading-4')}>
+            {hint}
+          </FormHint>
+        )}
       </Container>
       {value && value.length > 0 && (
         <Container top='xsmall'>
diff --git a/packages/base/Dropzone/src/Dropzone/__snapshots__/test.tsx.snap b/packages/base/Dropzone/src/Dropzone/__snapshots__/test.tsx.snap
index 3947d1b4e8..d469321416 100644
--- a/packages/base/Dropzone/src/Dropzone/__snapshots__/test.tsx.snap
+++ b/packages/base/Dropzone/src/Dropzone/__snapshots__/test.tsx.snap
@@ -9,7 +9,8 @@ exports[`Dropzone renders 1`] = `
       class=""
     >
       <div
-        class="items-center flex flex-col Dropzone-root"
+        aria-disabled="false"
+        class="p-6 items-center rounded-md flex flex-col border border-dashed box-border text-graphite gap-2 transition-all ease-out duration-350 hover:cursor-pointer focus:cursor-pointer border-gray hover:border-blue focus:border-blue bg-white"
         role="presentation"
         tabindex="0"
       >
diff --git a/packages/base/Dropzone/src/Dropzone/styles.ts b/packages/base/Dropzone/src/Dropzone/styles.ts
deleted file mode 100644
index 03a45827fd..0000000000
--- a/packages/base/Dropzone/src/Dropzone/styles.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-
-export default ({ palette, sizes, transitions }: Theme) =>
-  createStyles({
-    root: {
-      padding: '20px',
-      borderWidth: sizes.borderWidth,
-      borderRadius: sizes.borderRadius.medium,
-      borderColor: palette.grey.light2,
-      borderStyle: 'dashed',
-      backgroundColor: palette.common.white,
-      color: palette.grey.dark,
-      outline: 'none',
-      transition: `all ${transitions.duration.short}ms ${transitions.easing.easeOut}`,
-      transitionProperty: 'border, background-color',
-      gap: '0.5rem',
-      '&:hover, &$hovered, &:focus, &$focused, &$dragActive': {
-        borderColor: palette.blue.main,
-        cursor: 'pointer',
-      },
-      '&$disabled': {
-        backgroundColor: palette.grey.lighter,
-        '&:hover': {
-          cursor: 'no-drop',
-          borderColor: palette.grey.light2,
-        },
-      },
-    },
-    hint: {
-      margin: 0,
-      '& > *': {
-        lineHeight: '1rem',
-      },
-    },
-    completed: {},
-    error: {
-      margin: 0,
-    },
-    dragActive: {},
-    hovered: {},
-    disabled: {},
-    focused: {},
-  })
diff --git a/packages/base/Dropzone/src/Dropzone/test.tsx b/packages/base/Dropzone/src/Dropzone/test.tsx
index 55e00ff503..f285f9fcfd 100644
--- a/packages/base/Dropzone/src/Dropzone/test.tsx
+++ b/packages/base/Dropzone/src/Dropzone/test.tsx
@@ -53,7 +53,7 @@ describe('Dropzone', () => {
         ],
       })
 
-      expect(getByTestId('dropzone').className).toContain('disabled')
+      expect(getByTestId('dropzone').getAttribute('aria-disabled')).toBe('true')
     })
   })
 
diff --git a/packages/base/Dropzone/tsconfig.json b/packages/base/Dropzone/tsconfig.json
index 1dc2bd87ae..c19b0f93c1 100644
--- a/packages/base/Dropzone/tsconfig.json
+++ b/packages/base/Dropzone/tsconfig.json
@@ -4,6 +4,7 @@
   "include": ["src"],
   "references": [
     { "path": "../../picasso-tailwind" },
+    { "path": "../../picasso-tailwind-merge" },
     { "path": "../Container" },
     { "path": "../FileInput" },
     { "path": "../Form" },