[FX-5545] Migrate Note to TailwindCSS (#4479)

* Migrate Notes to tailwind

* Migrate NoteTitle to tailwind

* Add changeset

* Update snapshots

* Fix small incosistencies

* Update package changeset

* Reformat classnames

.changeset/little-papayas-eat.md

@@ -0,0 +1,6 @@
+---
+'@toptal/picasso-note': major
+'@toptal/picasso': patch
+---
+
+- migrate Note to TailwindCSS, the packages `@toptal/picasso-tailwind-merge` now need to be provided from the host project, and tailwind needs to be configured for compiling `@toptal/picasso-note` using `@toptal/picasso-tailwind` configuration

packages/base/Note/package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@toptal/picasso-container": "2.0.0",
     "@toptal/picasso-typography": "3.0.0",
+    "@toptal/picasso-tailwind-merge": "1.2.0",
     "classnames": "^2.5.1"
   },
   "sideEffects": [
@@ -33,6 +34,7 @@
   "peerDependencies": {
     "@material-ui/core": "4.12.4",
     "@toptal/picasso-tailwind": ">=2.7",
+    "@toptal/picasso-tailwind-merge": "^1.0.1",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {

packages/base/Note/src/Note/Note.tsx

@@ -1,25 +1,33 @@
 import React, { forwardRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps } from '@toptal/picasso-shared'
-import cx from 'classnames'
-
-import styles from './styles'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 export interface Props extends BaseProps {
   children: React.ReactNode
 }
 
-const useStyles = makeStyles<Theme>(styles)
-
 export const Note = forwardRef<HTMLDivElement, Props>(function Note(
   { children, className, ...rest },
   ref
 ) {
-  const classes = useStyles()
-
   return (
-    <div ref={ref} className={cx(classes.root, className)} {...rest}>
+    <div
+      ref={ref}
+      className={twMerge(
+        `rounded-md border border-solid border-gray-200 py-6 pr-6 pl-[28px] relative overflow-hidden bg-white
+
+        before:content-['']
+        before:bg-yellow-500
+        before:block
+        before:h-full
+        before:absolute
+        before:top-0
+        before:left-0
+        before:w-[4px]`,
+        className
+      )}
+      {...rest}
+    >
       {children}
     </div>
   )

packages/base/Note/src/Note/__snapshots__/test.tsx.snap

@@ -6,10 +6,10 @@ exports[`Note renders 1`] = `
     class="Picasso-root"
   >
     <div
-      class="makeStyles-root"
+      class="rounded-md border border-solid border-gray py-6 pr-6 pl-[28px] relative overflow-hidden bg-white before:content-[''] before:bg-yellow before:block before:h-full before:absolute before:top-0 before:left-0 before:w-[4px]"
     >
       <div
-        class="makeStyles-root"
+        class="mb-1"
       >
         <h4
           class="m-0 text-md text-black font-semibold"

packages/base/Note/src/NoteTitle/NoteTitle.tsx

@@ -1,26 +1,18 @@
 import React, { forwardRef } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps } from '@toptal/picasso-shared'
-import cx from 'classnames'
 import { Typography } from '@toptal/picasso-typography'
-
-import styles from './styles'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 export interface Props extends BaseProps {
   children: React.ReactNode
 }
 
-const useStyles = makeStyles<Theme>(styles)
-
 export const NoteTitle = forwardRef<HTMLDivElement, Props>(function NoteTitle(
   { children, className, ...rest },
   ref
 ) {
-  const classes = useStyles()
-
   return (
-    <div ref={ref} className={cx(classes.root, className)} {...rest}>
+    <div ref={ref} className={twMerge('mb-1', className)} {...rest}>
       <Typography variant='heading' size='small'>
         {children}
       </Typography>

packages/base/Note/tsconfig.json

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