[FX-5659] Migrate TreeView to TailwindCSS (#4573)

.changeset/loud-mugs-serve.md

@@ -0,0 +1,5 @@
+---
+'@toptal/picasso-tree-view': patch
+---
+
+- migrate to TailwindCSS, material-ui@4 is no longer required for this package

packages/base/TreeView/package.json

@@ -32,7 +32,6 @@
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
     "@toptal/picasso-tailwind": ">=2.7",
     "react": ">=16.12.0 < 19.0.0"
   },

packages/base/TreeView/src/TreeView/PointLink/PointLink.tsx

@@ -1,9 +1,6 @@
 import React, { useMemo } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 
 import type { DirectionsType, DynamicPointLink } from '../types'
-import styles from './styles'
 
 export interface Props {
   link: DynamicPointLink
@@ -12,11 +9,8 @@ export interface Props {
   horizontalMargin: number
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoPointLink' })
-
 export const PointLink = (props: Props) => {
   const { link, direction, verticalMargin, horizontalMargin } = props
-  const classes = useStyles()
   const path = useMemo(() => {
     const { source, target } = link
     const sourceYDeltas = {
@@ -44,7 +38,7 @@ export const PointLink = (props: Props) => {
     return svgPaths[direction]
   }, [link, direction, verticalMargin, horizontalMargin])
 
-  return <path d={path} className={classes.pointLink} />
+  return <path d={path} className='fill-none stroke-gray-400' />
 }
 
 PointLink.displayName = 'PointLink'

packages/base/TreeView/src/TreeView/PointNode/TreeNodeAvatar.tsx

@@ -1,11 +1,7 @@
 import React from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { StandardProps, SizeType } from '@toptal/picasso-shared'
 import { getNameInitials } from '@toptal/picasso-utils'
 
-import styles from './styles'
-
 export interface Props extends StandardProps {
   /** User full name to display initials on the avatar */
   name: string
@@ -17,10 +13,6 @@ export interface Props extends StandardProps {
   objectFit?: 'cover' | 'contain'
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoTreeNodeAvatar',
-})
-
 const renderInitials = ({ src, name, classes }: Partial<Props>) => {
   if (src || !name) {
     return null
@@ -48,8 +40,12 @@ const sizeValues = {
   large: '160',
 }
 
+const classes = {
+  shape: 'fill-gray-500',
+  text: 'text-[1em] uppercase fill-white [dominant-baseline:middle] [text-anchor:middle]',
+}
+
 export const TreeNodeAvatar = (props: Props) => {
-  const classes = useStyles()
   const { name, src, size = 'xxsmall', objectFit = 'contain', ...rest } = props
   const sizeValue = sizeValues[size]
 

packages/base/TreeView/src/TreeView/TreeView.tsx

@@ -5,13 +5,10 @@ import React, {
   useState,
   useMemo,
 } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 
 import { TreeViewContext } from './TreeViewContainer'
 import { useTree } from './use-tree'
 import Zoom from './Zoom'
-import styles from './styles'
 import { useZoom } from './use-zoom'
 import {
   DEFAULT_SCALE_EXTENT,
@@ -34,8 +31,6 @@ export interface Props extends TreeViewPropsBase {
   scaleCoefficient?: number
 }
 
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoTreeView' })
-
 export const TreeView = (props: Props) => {
   const {
     data,
@@ -53,7 +48,6 @@ export const TreeView = (props: Props) => {
     variant = TreeView.defaultProps.directionProps.variant,
   } = props.directionProps ?? TreeView.defaultProps.directionProps
 
-  const classes = useStyles()
   const rootRef = createRef<SVGSVGElement>()
 
   const [verticalMargin, horizontalMargin] = useFinalMargins(
@@ -111,7 +105,7 @@ export const TreeView = (props: Props) => {
   }, [rootRef, initialized, zoom, updateState])
 
   return (
-    <div className={classes.root}>
+    <div className='w-full h-full'>
       {showZoom && (
         <Zoom handleZoom={handleZoom} scaleCoefficient={scaleCoefficient} />
       )}
@@ -123,7 +117,7 @@ export const TreeView = (props: Props) => {
         verticalMargin={verticalMargin}
         horizontalMargin={horizontalMargin}
         renderNode={renderNode}
-        svgProps={{ className: classes.svg }}
+        svgProps={{ className: 'w-full h-full' }}
       />
     </div>
   )