[FX-5542] Migrate Image (#4483)

toptal · Aug 19, 2024 · 13863c9 · 13863c9
1 parent a69bcfb
commit 13863c9
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 34 deletions.
diff --git a/.changeset/two-ties-count.md b/.changeset/two-ties-count.md
@@ -0,0 +1,9 @@
+---
+'@toptal/picasso-image': major
+'@toptal/picasso': patch
+---
+
+### Image
+
+- migrated to Tailwind CSS
+- added `@toptal/picasso-tailwind` as a peer dependency to `@toptal/picasso-image`
diff --git a/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap b/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap
@@ -194,7 +194,7 @@ exports[`AccountSelect renders 1`] = `
                       >
                         <img
                           alt="Phil Leif 3"
-                          class="PicassoImage-root object-cover w-full h-full absolute left-0 top-0 [image-rendering:-webkit-optimize PicassoUserBadge-avatar"
+                          class="block object-cover w-full h-full absolute left-0 top-0 [image-rendering:-webkit-optimize PicassoUserBadge-avatar"
                           src="./jacqueline-with-flowers-1954-square.jpg"
                         />
                       </div>

diff --git a/packages/base/Image/package.json b/packages/base/Image/package.json
@@ -28,12 +28,10 @@
   "devDependencies": {
     "@testing-library/react": "^14.1.2"
   },
-  "sideEffects": [
-    "**/styles.ts",
-    "**/styles.js"
-  ],
+  "sideEffects": false,
   "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"
   },
   "exports": {

diff --git a/packages/base/Image/src/Image/Image.tsx b/packages/base/Image/src/Image/Image.tsx
@@ -1,11 +1,7 @@
 import type { ImgHTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps } from '@toptal/picasso-shared'
-
-import styles from './styles'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 type VariantType = 'rectangle' | 'circular'
 
@@ -20,8 +16,6 @@ export interface Props extends BaseProps, ImgHTMLAttributes<HTMLImageElement> {
   variant?: VariantType
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoImage' })
-
 export const Image = forwardRef<HTMLImageElement, Props>(function Image(
   props,
   ref
@@ -35,7 +29,6 @@ export const Image = forwardRef<HTMLImageElement, Props>(function Image(
     style,
     ...rest
   } = props
-  const classes = useStyles()
 
   return (
     <img
@@ -44,11 +37,9 @@ export const Image = forwardRef<HTMLImageElement, Props>(function Image(
       src={src}
       srcSet={srcSet}
       alt={alt}
-      className={cx(
-        {
-          [classes.circular]: variant === 'circular',
-        },
-        classes.root,
+      className={twMerge(
+        variant === 'circular' && 'rounded-full',
+        'block',
         className
       )}
       style={style}

diff --git a/packages/base/Image/src/Image/__snapshots__/test.tsx.snap b/packages/base/Image/src/Image/__snapshots__/test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Image circular variant render 1`] = `
 <div>
   <img
     alt="Circular image"
-    class="PicassoImage-circular PicassoImage-root"
+    class="rounded-full block"
     src="localhost"
   />
 </div>
@@ -14,7 +14,7 @@ exports[`Image renders 1`] = `
 <div>
   <img
     alt="Default image"
-    class="PicassoImage-root"
+    class="block"
     src="localhost"
   />
 </div>

diff --git a/packages/base/Image/src/Image/styles.ts b/packages/base/Image/src/Image/styles.ts
diff --git a/packages/base/Image/tsconfig.json b/packages/base/Image/tsconfig.json
@@ -2,5 +2,9 @@
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": { "outDir": "dist-package" },
   "include": ["src"],
-  "references": [{ "path": "../Utils" }]
+  "references": [
+    { "path": "../../picasso-tailwind" },
+    { "path": "../../picasso-tailwind-merge" },
+    { "path": "../Utils" }
+  ]
 }
diff --git a/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageTopBarMenu/__snapshots__/test.tsx.snap
@@ -22,7 +22,7 @@ exports[`PageTopBarMenu renders 1`] = `
             >
               <img
                 alt="Jacqueline Roque"
-                class="PicassoImage-root object-cover w-full h-full absolute left-0 top-0 [image-rendering:-webkit-optimize PicassoUserBadge-avatar"
+                class="block object-cover w-full h-full absolute left-0 top-0 [image-rendering:-webkit-optimize PicassoUserBadge-avatar"
                 src="./jacqueline-with-flowers-1954-square.jpg"
               />
             </div>