@toptal/picasso-avatar 2.0.7-alpha-fx-null-fix-button-e862ee8b7.0 → 3.0.0

package/src/Avatar/AvatarEditContainer/styles.ts

@@ -1,88 +1,17 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import { alpha } from '@toptal/picasso-shared'
-
-export default ({ palette, zIndex }: Theme) => {
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const hoverColor = alpha(palette.grey.darker!, 0.7)
-
-  return createStyles({
-    root: {
-      border: 'none',
-      cursor: 'pointer',
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      outline: 'none',
-      background: 'transparent',
-    },
-    rootXxsmall: {
-      width: '32px',
-      height: '32px',
-    },
-    rootXsmall: {
-      width: '40px',
-      height: '40px',
-    },
-    rootSmall: {
-      width: '80px',
-      height: '80px',
-    },
-    rootMedium: {
-      width: '120px',
-      height: '120px',
-    },
-    rootLarge: {
-      width: '160px',
-      height: '160px',
-    },
-
-    svg: {
-      margin: '-3px', // to center the svg
-      position: 'absolute',
-    },
-    svgXxsmall: {
-      width: '38px', // +6px for outline
-      height: '38px', // +6px for outline
-    },
-    svgXsmall: {
-      width: '46px', // +6px for outline
-      height: '46px', // +6px for outline
-    },
-    svgSmall: {
-      width: '86px', // +6px for outline
-      height: '86px', // +6px for outline
-    },
-    svgMedium: {
-      width: '126px', // +6px for outline
-      height: '126px', // +6px for outline
-    },
-    svgLarge: {
-      width: '166px', // +6px for outline
-      height: '166px', // +6px for outline
-    },
-
-    background: {
-      fill: hoverColor,
-    },
-
-    outline: {
-      display: 'none',
-      stroke: palette.blue.main,
-
-      '&$focused': {
-        display: 'initial',
-      },
-    },
-
-    pencilIcon: {
-      color: palette.common.white,
-      zIndex: zIndex.tooltip,
-    },
+import type { Size } from './AvatarEditContainer'
+
+export const rootClassBySize: Record<Size, string> = {
+  xxsmall: 'w-[32px] h-[32px]',
+  xsmall: 'w-[40px] h-[40px]',
+  small: 'w-[80px] h-[80px]',
+  medium: 'w-[120px] h-[120px]',
+  large: 'w-[160px] h-[160px]',
+}
 
-    focused: {},
-  })
+export const svgClassBySize: Record<Size, string> = {
+  xxsmall: 'w-[38px] h-[38px]',
+  xsmall: 'w-[46px] h-[46px]',
+  small: 'w-[86px] h-[86px]',
+  medium: 'w-[126px] h-[126px]',
+  large: 'w-[166px] h-[166px]',
 }

package/src/Avatar/AvatarWrapper/AvatarWrapper.tsx

@@ -1,22 +1,20 @@
 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 type { BaseProps, SizeType } from '@toptal/picasso-shared'
-import cx from 'classnames'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
-import styles, { getCornerClassName, getSizeClassName } from './styles'
+import { classBySizeAndVariant, clipClassBySize } from './styles'
+
+export type Size = SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>
+
+export type Variant = 'square' | 'portrait' | 'landscape'
 
 export interface Props extends BaseProps {
   children: ReactNode
-  size: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>
-  variant: 'square' | 'portrait' | 'landscape'
+  size: Size
+  variant: Variant
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoAvatarWrapper',
-})
-
 const AvatarWrapper = (props: Props) => {
   const {
     children,
@@ -26,20 +24,16 @@ const AvatarWrapper = (props: Props) => {
     size,
     variant,
   } = props
-  const classes = useStyles()
-
-  const sizeClassName = getSizeClassName(size, variant)
-  const cornerClassName = getCornerClassName(size)
 
   return (
     <div
       style={style}
       data-testid={dataTestId}
-      className={cx(
-        className,
-        classes.root,
-        classes[sizeClassName],
-        classes[cornerClassName]
+      className={twMerge(
+        'relative bg-gray-500 text-[1rem] shrink-0 grow-0',
+        classBySizeAndVariant[size][variant],
+        clipClassBySize[size],
+        className
       )}
     >
       {children}

package/src/Avatar/AvatarWrapper/styles.ts

@@ -1,94 +1,42 @@
-import type { SizeType } from '@toptal/picasso-shared'
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import capitalize from '@material-ui/core/utils/capitalize'
-import type { CSSProperties } from '@material-ui/core/styles/withStyles'
+import type { Size, Variant } from './AvatarWrapper'
 
-const SETTINGS = {
+export const classBySizeAndVariant: Record<Size, Record<Variant, string>> = {
   xxsmall: {
-    dimensions: 2,
-    cornerSize: '0.5em',
+    square: 'w-[2em] h-[2em]',
+    portrait: 'w-[1.333333333em] h-[2em]',
+    landscape: 'w-[2em] h-[1.333333333em]',
   },
   xsmall: {
-    dimensions: 2.5,
-    cornerSize: '0.5em',
+    square: 'w-[2.5em] h-[2.5em]',
+    portrait: 'w-[1.666666666em] h-[2.5em]',
+    landscape: 'w-[2.5em] h-[1.666666666em]',
   },
   small: {
-    dimensions: 5,
-    cornerSize: '1em',
+    square: 'w-[5em] h-[5em]',
+    portrait: 'w-[3.333333333em] h-[5em]',
+    landscape: 'w-[5em] h-[3.333333333em]',
   },
   medium: {
-    dimensions: 7.5,
-    cornerSize: '1.5em',
+    square: 'w-[7.5em] h-[7.5em]',
+    portrait: 'w-[5em] h-[7.5em]',
+    landscape: 'w-[7.5em] h-[5em]',
   },
   large: {
-    dimensions: 10,
-    cornerSize: '1.5em',
+    square: 'w-[10em] h-[10em]',
+    portrait: 'w-[7.5em] h-[10em]',
+    landscape: 'w-[10em] h-[7.5em]',
   },
-} as const
-
-const VARIANTS = ['square', 'portrait', 'landscape']
-
-const sizeClassNames = Object.entries(SETTINGS).reduce(
-  (classNames, [size, { dimensions }]) => {
-    VARIANTS.forEach(variant => {
-      const className = `size${capitalize(size)}${capitalize(variant)}`
-
-      const ratio = size === 'large' ? 3 / 4 : 2 / 3
-      const widthRatio = variant === 'portrait' ? ratio : 1
-      const heightRatio = variant === 'landscape' ? ratio : 1
-
-      classNames[className] = {
-        width: `${dimensions * widthRatio}em`,
-        height: `${dimensions * heightRatio}em`,
-      }
-    })
-
-    return classNames
-  },
-  {} as Record<string, CSSProperties>
-)
-
-const cornerClassNames = Object.entries(SETTINGS).reduce(
-  (classNames, [size, { cornerSize }]) => {
-    const className = `corner${capitalize(size)}`
-    const clipPath = `polygon(0 0, 100% 0, 100% 100%, ${cornerSize} 100%, 0 calc(100% - ${cornerSize}))`
-
-    classNames[className] = {
-      clipPath,
-      // we can remove this prefix as soon as this issue will
-      // be resolved - https://github.com/cssinjs/css-vendor/issues/74
-      '-webkit-clip-path': clipPath,
-    }
-
-    return classNames
-  },
-  {} as Record<string, CSSProperties>
-)
-
-export default ({ palette }: Theme) =>
-  createStyles({
-    root: {
-      position: 'relative',
-      backgroundColor: palette.grey.main,
-      fontSize: '1rem',
-      flexShrink: 0,
-      flexGrow: 0,
-    },
-
-    ...sizeClassNames,
-    ...cornerClassNames,
-  })
-
-export const getSizeClassName = (
-  size: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>,
-  variant: 'square' | 'portrait' | 'landscape'
-) => {
-  return `size${capitalize(size)}${capitalize(variant)}`
 }
 
-export const getCornerClassName = (
-  size: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>
-) => {
-  return `corner${capitalize(size)}`
+export const clipClassBySize: Record<Size, string> = {
+  xxsmall:
+    '[clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]',
+  xsmall:
+    '[clip-path:polygon(0_0,_100%_0,_100%_100%,_0.5em_100%,_0_calc(100%-0.5em))]',
+  small:
+    '[clip-path:polygon(0_0,_100%_0,_100%_100%,_1em_100%,_0_calc(100%-1em))]',
+  medium:
+    '[clip-path:polygon(0_0,_100%_0,_100%_100%,_1.5em_100%,_0_calc(100%-1.5em))]',
+  large:
+    '[clip-path:polygon(0_0,_100%_0,_100%_100%,_1.5em_100%,_0_calc(100%-1.5em))]',
 }

package/src/Avatar/IconAvatar/IconAvatar.tsx

@@ -1,31 +1,29 @@
 import React from 'react'
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
 import { Profile16 } from '@toptal/picasso-icons'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
+import { classBySize } from './styles'
+
+export type Size = SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>
 
 interface Props extends BaseProps {
   size: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoIconAvatar',
-})
-
 const IconAvatar = ({
   size,
   'data-testid': dataTestId,
   className,
   style,
 }: Props) => {
-  const classes = useStyles()
-
   return (
     <Profile16
-      className={cx(className, classes.root, classes[`${size}Icon`])}
+      className={twMerge(
+        className,
+        'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
+        classBySize[size]
+      )}
       color='white'
       data-testid={dataTestId}
       style={style}

package/src/Avatar/IconAvatar/styles.ts

@@ -1,16 +1,9 @@
-import { createStyles } from '@material-ui/core/styles'
+import type { Size } from './IconAvatar'
 
-export default () =>
-  createStyles({
-    root: {
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-    },
-    xxsmallIcon: { fontSize: '1em' },
-    xsmallIcon: { fontSize: '1em' },
-    smallIcon: { fontSize: '1.5em' },
-    mediumIcon: { fontSize: '1.875em' },
-    largeIcon: { fontSize: '3em' },
-  })
+export const classBySize: Record<Size, string> = {
+  xxsmall: 'text-[1em]',
+  xsmall: 'text-[1em]',
+  small: 'text-[1.5em]',
+  medium: 'text-[1.875em]',
+  large: 'text-[3em]',
+}

package/src/Avatar/ImageAvatar/ImageAvatar.tsx

@@ -1,29 +1,23 @@
 import React from 'react'
-import cx from 'classnames'
-import type { JssProps, BaseProps, SizeType } from '@toptal/picasso-shared'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
+import type { BaseProps, SizeType } from '@toptal/picasso-shared'
 import { Logo } from '@toptal/picasso-logo'
 import { Image } from '@toptal/picasso-image'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
+export type Size = SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>
 
 export interface Props extends BaseProps {
-  size: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>
+  size: Size
   src: string
   alt?: string
   name?: string
 }
 
 type LogoProps = {
-  size: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>
-} & JssProps
-
-const useStyles = makeStyles<Theme, Props>(styles, {
-  name: 'PicassoImageAvatar',
-})
+  size: Size
+}
 
-const AvatarLogo = ({ size, classes }: LogoProps) => {
+const AvatarLogo = ({ size }: LogoProps) => {
   const isTooSmall = ['small', 'xsmall', 'xxsmall'].includes(size)
 
   if (isTooSmall) {
@@ -32,11 +26,11 @@ const AvatarLogo = ({ size, classes }: LogoProps) => {
 
   return (
     <div
-      className={classes.logoContainer}
+      className='flex absolute bottom-4 left-4'
       role='img'
       aria-label='photo placeholder'
     >
-      <Logo emblem variant='white' className={classes.logo} />
+      <Logo emblem variant='white' className='w-[1.0625rem] h-6' />
     </div>
   )
 }
@@ -52,19 +46,21 @@ const ImageAvatar = (props: Props) => {
     'data-testid': dataTestId,
     'data-private': dataPrivate,
   } = props
-  const classes = useStyles(props)
 
   return (
     <>
       <Image
         alt={alt || name || ''}
-        className={cx(classes.image, className)}
+        className={twMerge(
+          'object-cover w-full h-full absolute left-0 top-0 [image-rendering:-webkit-optimize-contrast]',
+          className
+        )}
         src={src}
         style={style}
         data-testid={dataTestId}
         data-private={dataPrivate}
       />
-      <AvatarLogo classes={classes} size={size} />
+      <AvatarLogo size={size} />
     </>
   )
 }

package/src/Avatar/TextAvatar/TextAvatar.tsx

@@ -1,23 +1,21 @@
 import type { ReactNode } from 'react'
 import React from 'react'
-import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
 import { Typography } from '@toptal/picasso-typography'
+import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
+import { containerTextClassBySize, typographyTextClassBySize } from './styles'
+
+export type Size = SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>
+
+export type FontSize = SizeType<'small' | 'large'>
 
 interface Props extends BaseProps {
   children: ReactNode
-  fontSize?: SizeType<'small' | 'large'>
-  size: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>
+  fontSize?: FontSize
+  size: Size
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoTextAvatar',
-})
-
 const TextAvatar = ({
   children,
   className,
@@ -26,32 +24,28 @@ const TextAvatar = ({
   fontSize,
   size,
   'data-private': dataPrivate,
-}: Props) => {
-  const classes = useStyles()
-
-  const SIZE_TO_FONT_SIZE = {
-    small: '!text-[0.666666667em]',
-    large: '!text-[1em]',
-  }
-
-  return (
-    <div
-      /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-      className={cx(classes.root, className, classes[size!])}
-      style={style}
-      data-private={dataPrivate}
+}: Props) => (
+  <div
+    className={twMerge(
+      'uppercase absolute top-1/2 left-1/2 [transform:translate(-50%,-50%)]',
+      containerTextClassBySize[size],
+      className
+    )}
+    style={style}
+    data-private={dataPrivate}
+  >
+    <Typography
+      data-testid={dataTestID}
+      className={twJoin(
+        fontSize ? typographyTextClassBySize[fontSize] : '',
+        'leading-[1.5em]'
+      )}
+      invert
     >
-      <Typography
-        data-testid={dataTestID}
-        /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-        className={SIZE_TO_FONT_SIZE[fontSize!]}
-        invert
-      >
-        {children}
-      </Typography>
-    </div>
-  )
-}
+      {children}
+    </Typography>
+  </div>
+)
 
 TextAvatar.defaultProps = {
   size: 'large',

package/src/Avatar/TextAvatar/styles.ts

@@ -1,25 +1,14 @@
-import { createStyles } from '@material-ui/core/styles'
+import type { FontSize, Size } from './TextAvatar'
 
-export default () =>
-  createStyles({
-    root: {
-      textTransform: 'uppercase',
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-    },
+export const containerTextClassBySize: Record<Size, string> = {
+  xxsmall: 'text-[1em]',
+  xsmall: 'text-[1em]',
+  small: 'text-[2em]',
+  medium: 'text-[3em]',
+  large: 'text-[5em]',
+}
 
-    xxsmall: { fontSize: '1em' },
-    xsmall: { fontSize: '1em' },
-    small: { fontSize: '2em' },
-    medium: { fontSize: '3em' },
-    large: { fontSize: '5em' },
-
-    smallFont: {
-      fontSize: '0.666666667em',
-    },
-    largeFont: {
-      fontSize: '1em',
-    },
-  })
+export const typographyTextClassBySize: Record<FontSize, string> = {
+  small: 'text-[0.666666667em]',
+  large: 'text-[1em]',
+}

package/src/AvatarDropzoneSvg/AvatarDropzoneSvg.tsx

@@ -1,10 +1,13 @@
 import React from 'react'
-import type { Theme } from '@material-ui/core'
-import { capitalize, makeStyles } from '@material-ui/core'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
-import cx from 'classnames'
+import { twJoin } from '@toptal/picasso-tailwind-merge'
 
-import styles from './styles'
+import {
+  getBackgroundFillClass,
+  getBordersStrokeClass,
+  rootClassBySize,
+  svgClassBySize,
+} from './styles'
 import { getShapes } from './utils'
 
 /**
@@ -43,6 +46,8 @@ export const AVATAR_DROPZONE_SVG_SHAPES = {
   large: getShapes(SETTINGS.large),
 } as const
 
+export type Size = SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>
+
 export interface Props extends BaseProps {
   size?: SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>
   isDragActive?: boolean
@@ -52,10 +57,6 @@ export interface Props extends BaseProps {
   hovered?: boolean
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoDropzoneSvg',
-})
-
 export const DropzoneSvg = (props: Props) => {
   const {
     size = 'small',
@@ -70,35 +71,35 @@ export const DropzoneSvg = (props: Props) => {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const shapes = AVATAR_DROPZONE_SVG_SHAPES[size!]
 
-  const classes = useStyles()
-
   return (
     <div
-      className={cx(classes.root, classes[`root${capitalize(size)}`])}
+      className={twJoin(
+        '[pointer-events:unset] relative bg-transparent',
+        rootClassBySize[size]
+      )}
       data-testid={dataTestId}
     >
       <svg
-        className={cx(classes.svg, classes[`svg${capitalize(size)}`])}
+        className={twJoin('m-[-3px]', svgClassBySize[size])}
         fill='none'
         xmlns='http://www.w3.org/2000/svg'
       >
         <path
-          className={cx(classes.background, {
-            [classes.dragActive]: isDragActive,
-            [classes.disabled]: disabled,
-            [classes.error]: error,
-            [classes.focused]: focused,
-            [classes.hovered]: hovered,
-          })}
+          className={twJoin(
+            'transition-colors duration-350 ease-out',
+            'active:fill-blue-500/[0.24]',
+            getBackgroundFillClass({ hovered, isDragActive, disabled })
+          )}
           fillRule='evenodd'
           clipRule='evenodd'
           d={shapes.background}
         />
         <path
-          className={cx(classes.outline, {
-            [classes.focused]: focused,
-            [classes.error]: error,
-          })}
+          className={twJoin(
+            'hidden',
+            focused && !isDragActive && '[display:initial]',
+            error ? 'stroke-red-500' : 'stroke-blue-500'
+          )}
           fillRule='evenodd'
           clipRule='evenodd'
           d={shapes.outline}
@@ -107,11 +108,10 @@ export const DropzoneSvg = (props: Props) => {
           strokeLinejoin='round'
         />
         <path
-          className={cx(classes.border, {
-            [classes.error]: error,
-            [classes.focused]: focused,
-            [classes.hovered]: hovered,
-          })}
+          className={twJoin(
+            'transition-[stroke] duration-350',
+            getBordersStrokeClass({ hovered, error })
+          )}
           fillRule='evenodd'
           clipRule='evenodd'
           d={shapes.borders}