[FX-5656] Migrate Rating to TailwindCSS (#4512)

toptal · Aug 30, 2024 · 17a4b55 · 17a4b55
1 parent 47e54be
commit 17a4b55
Show file tree

Hide file tree

Showing 12 changed files with 96 additions and 151 deletions.
diff --git a/.changeset/moody-buckets-nail.md b/.changeset/moody-buckets-nail.md
@@ -0,0 +1,9 @@
+---
+'@toptal/picasso-rating': major
+'@toptal/picasso': patch
+---
+
+### Rating
+
+- migrate to TailwindCSS, material-ui@4 is no longer required for this package
+- make @toptal/picasso-tailwind-merge a peer dependency
diff --git a/packages/base/Rating/package.json b/packages/base/Rating/package.json
@@ -24,23 +24,23 @@
   "dependencies": {
     "@toptal/picasso-container": "3.0.0",
     "@toptal/picasso-icons": "1.6.0",
-    "@toptal/picasso-utils": "1.0.3",
-    "classnames": "^2.5.1"
+    "@toptal/picasso-utils": "1.0.3"
   },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
+    "@toptal/picasso-tailwind-merge": "^2.0.0",
     "@toptal/picasso-tailwind": ">=2.7",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-test-utils": "1.1.1"
+    "@toptal/picasso-test-utils": "1.1.1",
+    "@toptal/picasso-tailwind-merge": "2.0.0"
   },
   "files": [
     "dist-package/**",

diff --git a/packages/base/Rating/src/RatingIcon/RatingIcon.tsx b/packages/base/Rating/src/RatingIcon/RatingIcon.tsx
@@ -1,10 +1,7 @@
 import React, { forwardRef } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
 import type { SizeType } from '@toptal/picasso-shared'
 import { Star16, StarSolid16, Star24, StarSolid24 } from '@toptal/picasso-icons'
-
-import styles from './styles'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
 export interface Props {
   active: boolean
@@ -13,10 +10,6 @@ export interface Props {
   size: SizeType<'small' | 'large'>
 }
 
-const useStyles = makeStyles(styles, {
-  name: 'PicassoRatingIcon',
-})
-
 const iconsBySize = {
   small: [Star16, StarSolid16],
   large: [Star24, StarSolid24],
@@ -27,13 +20,12 @@ const RatingIcon = forwardRef<HTMLDivElement, Props>(function RatingIcon(
   ref
 ) {
   const { active, hovered, interactive, size, ...rest } = props
-  const classes = useStyles()
 
   const iconColor = 'yellow'
-  const iconClasses = cx({
-    [classes.clickableIcon]: interactive,
-    [classes.hovered]: hovered,
-  })
+  const iconClasses = twJoin(
+    interactive && 'transition-all duration-350 ease-out hover:scale-150',
+    hovered && 'scale-150'
+  )
   const [Icon, IconSolid] = iconsBySize[size] || iconsBySize.small
 
   return (

diff --git a/packages/base/Rating/src/RatingIcon/__snapshots__/test.tsx.snap b/packages/base/Rating/src/RatingIcon/__snapshots__/test.tsx.snap
@@ -7,7 +7,7 @@ exports[`RatingIcon renders 1`] = `
   >
     <span>
       <svg
-        class="PicassoSvgStarSolid16-root PicassoRatingIcon-clickableIcon PicassoSvgStarSolid16-yellow"
+        class="PicassoSvgStarSolid16-root transition-all duration-350 ease-out hover:scale-150 PicassoSvgStarSolid16-yellow"
         style="min-width: 16px; min-height: 16px;"
         viewBox="0 0 16 16"
       >

diff --git a/packages/base/Rating/src/RatingIcon/styles.ts b/packages/base/Rating/src/RatingIcon/styles.ts
diff --git a/packages/base/Rating/src/RatingStars/RatingStars.tsx b/packages/base/Rating/src/RatingStars/RatingStars.tsx
@@ -1,12 +1,10 @@
 import type { ReactNode, ChangeEvent } from 'react'
 import React, { forwardRef, useCallback } from 'react'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
 import { Container } from '@toptal/picasso-container'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
 import { RatingIcon } from '../RatingIcon'
-import styles from './styles'
 
 export interface Props extends BaseProps {
   /** Value of the name attribute of the rating input */
@@ -25,10 +23,6 @@ export interface Props extends BaseProps {
   size?: SizeType<'small' | 'large'>
 }
 
-const useStyles = makeStyles(styles, {
-  name: 'PicassoRating',
-})
-
 const RatingStars = forwardRef<HTMLDivElement, Props>(function RatingStars(
   props,
   ref
@@ -44,8 +38,6 @@ const RatingStars = forwardRef<HTMLDivElement, Props>(function RatingStars(
     ...rest
   } = props
 
-  const classes = useStyles()
-
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
       if (onChange && interactive) {
@@ -82,9 +74,7 @@ const RatingStars = forwardRef<HTMLDivElement, Props>(function RatingStars(
           <label
             key={itemId}
             htmlFor={shouldReset ? resetInputId : itemId}
-            className={cx(classes.label, {
-              [classes.clickableLabel]: interactive,
-            })}
+            className={twJoin('mr-[.125rem]', interactive && 'cursor-pointer')}
           >
             {renderItem(itemValue, defaultIcon)}
             <input
@@ -95,7 +85,7 @@ const RatingStars = forwardRef<HTMLDivElement, Props>(function RatingStars(
               onChange={handleChange}
               readOnly={!interactive}
               checked={itemValue === value}
-              className={classes.radio}
+              className='hidden'
               data-testid={itemId}
             />
           </label>
@@ -109,7 +99,7 @@ const RatingStars = forwardRef<HTMLDivElement, Props>(function RatingStars(
         id={resetInputId}
         value=''
         onChange={handleChange}
-        className={classes.radio}
+        className='hidden'
       />
     </Container>
   )

diff --git a/packages/base/Rating/src/RatingStars/__snapshots__/test.tsx.snap b/packages/base/Rating/src/RatingStars/__snapshots__/test.tsx.snap
@@ -9,12 +9,12 @@ exports[`Rating.Stars renders 1`] = `
       class=""
     >
       <label
-        class="PicassoRating-label PicassoRating-clickableLabel"
+        class="mr-[.125rem] cursor-pointer"
         for="rating-name-1"
       >
         <span>
           <svg
-            class="PicassoSvgStarSolid16-root PicassoRatingIcon-clickableIcon PicassoSvgStarSolid16-yellow"
+            class="PicassoSvgStarSolid16-root transition-all duration-350 ease-out hover:scale-150 PicassoSvgStarSolid16-yellow"
             style="min-width: 16px; min-height: 16px;"
             viewBox="0 0 16 16"
           >
@@ -24,7 +24,7 @@ exports[`Rating.Stars renders 1`] = `
           </svg>
         </span>
         <input
-          class="PicassoRating-radio"
+          class="hidden"
           data-testid="rating-name-1"
           id="rating-name-1"
           name="rating-name"
@@ -33,12 +33,12 @@ exports[`Rating.Stars renders 1`] = `
         />
       </label>
       <label
-        class="PicassoRating-label PicassoRating-clickableLabel"
+        class="mr-[.125rem] cursor-pointer"
         for="rating-name-2"
       >
         <span>
           <svg
-            class="PicassoSvgStarSolid16-root PicassoRatingIcon-clickableIcon PicassoSvgStarSolid16-yellow"
+            class="PicassoSvgStarSolid16-root transition-all duration-350 ease-out hover:scale-150 PicassoSvgStarSolid16-yellow"
             style="min-width: 16px; min-height: 16px;"
             viewBox="0 0 16 16"
           >
@@ -48,7 +48,7 @@ exports[`Rating.Stars renders 1`] = `
           </svg>
         </span>
         <input
-          class="PicassoRating-radio"
+          class="hidden"
           data-testid="rating-name-2"
           id="rating-name-2"
           name="rating-name"
@@ -57,12 +57,12 @@ exports[`Rating.Stars renders 1`] = `
         />
       </label>
       <label
-        class="PicassoRating-label PicassoRating-clickableLabel"
+        class="mr-[.125rem] cursor-pointer"
         for="rating-name-reset"
       >
         <span>
           <svg
-            class="PicassoSvgStarSolid16-root PicassoRatingIcon-clickableIcon PicassoSvgStarSolid16-yellow"
+            class="PicassoSvgStarSolid16-root transition-all duration-350 ease-out hover:scale-150 PicassoSvgStarSolid16-yellow"
             style="min-width: 16px; min-height: 16px;"
             viewBox="0 0 16 16"
           >
@@ -73,7 +73,7 @@ exports[`Rating.Stars renders 1`] = `
         </span>
         <input
           checked=""
-          class="PicassoRating-radio"
+          class="hidden"
           data-testid="rating-name-3"
           id="rating-name-3"
           name="rating-name"
@@ -82,12 +82,12 @@ exports[`Rating.Stars renders 1`] = `
         />
       </label>
       <label
-        class="PicassoRating-label PicassoRating-clickableLabel"
+        class="mr-[.125rem] cursor-pointer"
         for="rating-name-4"
       >
         <span>
           <svg
-            class="PicassoSvgStar16-root PicassoRatingIcon-clickableIcon PicassoSvgStar16-yellow"
+            class="PicassoSvgStar16-root transition-all duration-350 ease-out hover:scale-150 PicassoSvgStar16-yellow"
             style="min-width: 16px; min-height: 16px;"
             viewBox="0 0 16 16"
           >
@@ -97,7 +97,7 @@ exports[`Rating.Stars renders 1`] = `
           </svg>
         </span>
         <input
-          class="PicassoRating-radio"
+          class="hidden"
           data-testid="rating-name-4"
           id="rating-name-4"
           name="rating-name"
@@ -106,12 +106,12 @@ exports[`Rating.Stars renders 1`] = `
         />
       </label>
       <label
-        class="PicassoRating-label PicassoRating-clickableLabel"
+        class="mr-[.125rem] cursor-pointer"
         for="rating-name-5"
       >
         <span>
           <svg
-            class="PicassoSvgStar16-root PicassoRatingIcon-clickableIcon PicassoSvgStar16-yellow"
+            class="PicassoSvgStar16-root transition-all duration-350 ease-out hover:scale-150 PicassoSvgStar16-yellow"
             style="min-width: 16px; min-height: 16px;"
             viewBox="0 0 16 16"
           >
@@ -121,7 +121,7 @@ exports[`Rating.Stars renders 1`] = `
           </svg>
         </span>
         <input
-          class="PicassoRating-radio"
+          class="hidden"
           data-testid="rating-name-5"
           id="rating-name-5"
           name="rating-name"
@@ -130,7 +130,7 @@ exports[`Rating.Stars renders 1`] = `
         />
       </label>
       <input
-        class="PicassoRating-radio"
+        class="hidden"
         id="rating-name-reset"
         name="rating-name"
         type="radio"

diff --git a/packages/base/Rating/src/RatingStars/styles.ts b/packages/base/Rating/src/RatingStars/styles.ts
diff --git a/packages/base/Rating/src/RatingThumbs/RatingThumbs.tsx b/packages/base/Rating/src/RatingThumbs/RatingThumbs.tsx
@@ -1,7 +1,4 @@
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
-import classNames from 'classnames'
 import type { ChangeEvent } from 'react'
 import React, { forwardRef, useCallback, useState } from 'react'
 import {
@@ -12,7 +9,7 @@ import {
 } from '@toptal/picasso-icons'
 import { Container } from '@toptal/picasso-container'
 
-import styles from './styles'
+import { getThumbClasses, labelClasses } from './styles'
 
 type Size = SizeType<'small' | 'large'>
 
@@ -49,8 +46,6 @@ export interface Props extends BaseProps {
   }
 }
 
-const useStyles = makeStyles<Theme>(styles)
-
 const enum ThumbsValue {
   POSITIVE = 'positive',
   NEGATIVE = 'negative',
@@ -68,8 +63,6 @@ export const RatingThumbs = forwardRef<HTMLDivElement, Props>(
     { name, interactive = true, size = 'small', value, onChange, testIds = {} },
     ref
   ) {
-    const classes = useStyles()
-
     const [baseUniqueId] = useState(() => globalId++)
 
     const positiveInputId = `${baseUniqueId}-posititve`
@@ -88,17 +81,14 @@ export const RatingThumbs = forwardRef<HTMLDivElement, Props>(
 
     return (
       <Container ref={ref}>
-        <label className={classes.label} htmlFor={positiveInputId}>
+        <label className={labelClasses} htmlFor={positiveInputId}>
           <ThumbsUp
-            className={classNames(classes.thumbs, {
-              [classes.interactiveThumbs]: interactive,
-              [classes.thumbsPositive]: value === true,
-            })}
+            className={getThumbClasses({ thumbType: 'up', interactive, value })}
           />
 
           <input
             id={positiveInputId}
-            className={classes.radio}
+            className='hidden'
             type='radio'
             name={name}
             value={ThumbsValue.POSITIVE}
@@ -109,17 +99,18 @@ export const RatingThumbs = forwardRef<HTMLDivElement, Props>(
           />
         </label>
 
-        <label className={classes.label} htmlFor={negativeInputId}>
+        <label className={labelClasses} htmlFor={negativeInputId}>
           <ThumbsDown
-            className={classNames(classes.thumbs, {
-              [classes.interactiveThumbs]: interactive,
-              [classes.thumbsNegative]: value === false,
+            className={getThumbClasses({
+              thumbType: 'down',
+              interactive,
+              value,
             })}
           />
 
           <input
             id={negativeInputId}
-            className={classes.radio}
+            className='hidden'
             type='radio'
             name={name}
             value={ThumbsValue.NEGATIVE}