[FX-5524] Refactor Carousel to Tailwind (#4439)

* Migrate Carousel to tailwind

* Add cahngeset

* Add changeset to picasso

* Remove material-ui dependency

.changeset/late-swans-taste.md

@@ -0,0 +1,6 @@
+---
+'@toptal/picasso-carousel': major
+'@toptal/picasso': patch
+---
+
+- migrate Carousel to tailwind, now @toptal/picasso-tailwind-merge is a peer dependency and needs to be provided by the consuming app

packages/base/Carousel/package.json

@@ -27,16 +27,18 @@
     "@toptal/picasso-icons": "1.6.0",
     "@toptal/picasso-shared": "15.0.0",
     "@toptal/picasso-utils": "1.0.3",
-    "classnames": "^2.5.1",
     "glider-js": "^1.7.8"
   },
+  "devDependencies": {
+    "@toptal/picasso-tailwind-merge": "1.2.0"
+  },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
     "@toptal/picasso-tailwind": ">=2.7",
+    "@toptal/picasso-tailwind-merge": "^1.2.0",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {

packages/base/Carousel/src/Carousel/Carousel.tsx

@@ -1,19 +1,14 @@
 import type { ReactNode } from 'react'
 import React from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
-import cx from 'classnames'
 import 'glider-js/glider.css'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { Container } from '@toptal/picasso-container'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
 import { CarouselGradient } from '../CarouselGradient'
 import useCarousel from './hooks/useCarousel'
 import { CarouselNavigation } from '../CarouselNavigation'
 
-const useStyles = makeStyles<Theme>(styles, { name: 'Carousel' })
-
 export interface Props extends BaseProps {
   /**
    * Slide automatically to next slides
@@ -101,15 +96,13 @@ export const Carousel = ({
     hasDots,
   })
 
-  const classes = useStyles()
-
   return (
     <Container
-      className={cx(classes.root, className)}
+      className={twMerge('[&_.glider-slide]:min-w-[100px]', className)}
       data-testid={testIds.root}
       {...getContainerProps()}
     >
-      <Container className={classes.container}>
+      <Container className='relative'>
         <Container {...getCarouselProps()} data-testid={testIds.carousel}>
           {children}
         </Container>

packages/base/Carousel/src/CarouselGradient/CarouselGradient.tsx

@@ -1,21 +1,14 @@
 import React, { useMemo } from 'react'
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 import gradientWidth from './utils/gradient-width'
-import styles from './styles'
-
-const useStyles = makeStyles<Theme>(styles, { name: 'CarouselGradient' })
 
 type Props = {
   slidesToShow: number
   isLastPage: boolean
 }
 
 const CarouselGradient = ({ isLastPage, slidesToShow }: Props) => {
-  const classes = useStyles()
-
   const showNextGradient = !isLastPage
   const showPrevGradient = isLastPage
 
@@ -28,11 +21,13 @@ const CarouselGradient = ({ isLastPage, slidesToShow }: Props) => {
   return (
     <div
       style={gradientStyle}
-      className={cx({
-        [classes.gradient]: showNextGradient || showPrevGradient,
-        [classes.nextGradient]: showNextGradient,
-        [classes.prevGradient]: showPrevGradient,
-      })}
+      className={twMerge(
+        (showNextGradient || showPrevGradient) && 'absolute h-full top-0',
+        showNextGradient &&
+          'right-0 bg-gradient-to-r from-white/20 to-white to-95%',
+        showPrevGradient &&
+          'left-0 bg-gradient-to-r from-white from-5% to-white/20'
+      )}
     />
   )
 }

packages/base/Carousel/src/CarouselNavigation/CarouselNavigation.tsx

@@ -1,12 +1,8 @@
 import React, { memo } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import { ButtonCircular } from '@toptal/picasso-button'
 import { Container } from '@toptal/picasso-container'
 import { ChevronRight24 } from '@toptal/picasso-icons'
 
-import styles from './styles'
-
 const getJustifyContent = (hasArrows: boolean, hasDots: boolean) => {
   if (hasArrows && hasDots) {
     return 'space-between'
@@ -21,8 +17,6 @@ const getJustifyContent = (hasArrows: boolean, hasDots: boolean) => {
   }
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'CarouselNavigation' })
-
 type Props = {
   hasArrows: boolean
   hasDots: boolean
@@ -46,11 +40,9 @@ const CarouselNavigation = ({
   hasDots,
   testIds,
 }: Props) => {
-  const classes = useStyles()
-
   return (
     <Container
-      className={classes.navigation}
+      className='pt-[14px] px-6 pb-0'
       flex
       justifyContent={getJustifyContent(hasArrows, hasDots)}
       data-testid={testIds.navigation}
@@ -65,14 +57,27 @@ const CarouselNavigation = ({
           <div
             {...getDotsProps()}
             data-testid={testIds.dots}
-            className={classes.dots}
+            className={`
+              [&_.glider-dot]:w-[10px]
+              [&_.glider-dot]:h-[10px]
+              [&_.glider-dot]:bg-blue-500
+              [&_.glider-dot]:opacity-20
+
+              [&_.glider-dot.active]:bg-blue-500 [&_.glider-dot.active]:opacity-100
+
+              [&_.glider-dot:not(.active):hover]:opacity-100
+              [&_.glider-dot:not(.active):hover]:shadow-[0_0_0_2px_rgba(32,78,207,0.2)]
+              [&_.glider-dot:not(.active):hover]:transition-[box-shadow,opacity]
+              [&_.glider-dot:not(.active):hover]:duration-300
+              [&_.glider-dot:not(.active):hover]:ease-out
+            `}
           />
         </div>
       )}
       {hasArrows && (
         <Container data-testid={testIds.arrows}>
           <ButtonCircular
-            className={classes.arrowPrev}
+            className='rotate-180'
             data-testid={testIds.prev}
             icon={<ChevronRight24 />}
             variant='flat'

packages/base/Carousel/tsconfig.json

@@ -4,6 +4,7 @@
   "include": ["src"],
   "references": [
     { "path": "../../picasso-tailwind" },
+    { "path": "../../picasso-tailwind-merge" },
     { "path": "../../shared" },
     { "path": "../Button" },
     { "path": "../Container" },

tsconfig.pkgsrc.json

@@ -2,6 +2,18 @@
   "files": [],
   "compilerOptions": { "composite": true },
   "references": [
+    { "path": "packages/picasso" },
+    { "path": "packages/picasso-charts" },
+    { "path": "packages/picasso-codemod" },
+    { "path": "packages/picasso-forms" },
+    { "path": "packages/picasso-pictograms" },
+    { "path": "packages/picasso-provider" },
+    { "path": "packages/picasso-query-builder" },
+    { "path": "packages/picasso-rich-text-editor" },
+    { "path": "packages/picasso-tailwind" },
+    { "path": "packages/picasso-tailwind-merge" },
+    { "path": "packages/shared" },
+    { "path": "packages/topkit-analytics-charts" },
     { "path": "packages/base/Accordion" },
     { "path": "packages/base/AccountSelect" },
     { "path": "packages/base/Alert" },
@@ -76,18 +88,6 @@
     { "path": "packages/base/Typography" },
     { "path": "packages/base/TypographyOverflow" },
     { "path": "packages/base/UserBadge" },
-    { "path": "packages/base/Utils" },
-    { "path": "packages/picasso" },
-    { "path": "packages/picasso-charts" },
-    { "path": "packages/picasso-codemod" },
-    { "path": "packages/picasso-forms" },
-    { "path": "packages/picasso-pictograms" },
-    { "path": "packages/picasso-provider" },
-    { "path": "packages/picasso-query-builder" },
-    { "path": "packages/picasso-rich-text-editor" },
-    { "path": "packages/picasso-tailwind" },
-    { "path": "packages/picasso-tailwind-merge" },
-    { "path": "packages/shared" },
-    { "path": "packages/topkit-analytics-charts" }
+    { "path": "packages/base/Utils" }
   ]
 }