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

package/src/AvatarDropzoneSvg/styles.ts

@@ -1,113 +1,49 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import { alpha } from '@toptal/picasso-shared'
-
-export default ({ palette, transitions }: Theme) => {
-  const dragActiveColor = alpha(palette.blue.main, 0.24)
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const hoverBackgroundColor = alpha(palette.blue.lighter!, 0.84)
-  const hoverBorderColor = alpha(palette.blue.main, 0.84)
-
-  return createStyles({
-    root: {
-      pointerEvents: 'unset',
-      position: 'relative',
-      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
-    },
-    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: palette.blue.lighter,
-      transition: `all ${transitions.duration.short}ms ${transitions.easing.easeOut}`,
-      transitionProperty: 'fill',
+import type { Props, Size } from './AvatarDropzoneSvg'
+
+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]',
+}
 
-      '&$hovered': {
-        fill: hoverBackgroundColor,
-      },
+export const svgClassBySize: Record<Size, string> = {
+  xxsmall: 'w-[39px] h-[38px]',
+  xsmall: 'w-[46px] h-[46px]',
+  small: 'w-[86px] h-[86px]',
+  medium: 'w-[126px] h-[126px]',
+  large: 'w-[166px] h-[166px]',
+}
 
-      '&$dragActive,&:active': {
-        fill: dragActiveColor,
-      },
+export const getBackgroundFillClass = ({
+  hovered,
+  isDragActive,
+  disabled,
+}: Props) => {
+  if (disabled) {
+    return 'fill-gray-100'
+  }
 
-      '&$disabled': {
-        fill: palette.grey.lighter,
-        '&$hovered': {
-          fill: palette.grey.light2,
-        },
-      },
-    },
-    border: {
-      stroke: palette.blue.main,
-      transition: `stroke ${transitions.duration.short}ms`,
+  if (isDragActive) {
+    return 'fill-blue-500/[0.24]'
+  }
 
-      '&$hovered': {
-        stroke: hoverBorderColor,
-      },
+  if (hovered) {
+    return 'fill-blue-100/[0.84]'
+  }
 
-      '&$error': {
-        stroke: palette.red.main,
-      },
-    },
-    outline: {
-      display: 'none',
-      stroke: palette.blue.main,
+  return 'fill-blue-100'
+}
 
-      '&$focused:not($dragActive)': {
-        display: 'initial',
-      },
+export const getBordersStrokeClass = ({ hovered, error }: Props) => {
+  if (error) {
+    return 'stroke-red-500'
+  }
 
-      '&$error': {
-        stroke: palette.red.main,
-      },
-    },
+  if (hovered) {
+    return 'stroke-blue-500/[0.84]'
+  }
 
-    dragActive: {},
-    disabled: {},
-    error: {},
-    focused: {},
-    hovered: {},
-  })
+  return 'stroke-blue-500'
 }

package/src/AvatarGroup/AvatarGroup.tsx

@@ -1,14 +1,11 @@
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
 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 { Container } from '@toptal/picasso-container'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
 
 import { Avatar } from '../Avatar'
 import AvatarWrapper from '../Avatar/AvatarWrapper/AvatarWrapper'
 import TextAvatar from '../Avatar/TextAvatar/TextAvatar'
-import styles from './styles'
 
 type ItemType = {
   alt?: string
@@ -31,10 +28,6 @@ export interface Props extends Omit<BaseProps, 'data-testid'> {
   }
 }
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoAvatarGroup',
-})
-
 const AvatarGroup = ({
   className,
   style,
@@ -43,8 +36,6 @@ const AvatarGroup = ({
   limit,
   size,
 }: Props) => {
-  const classes = useStyles()
-
   /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
   const isOverLimit = items.length > limit!
   // we need to add +1 for the last item that is going to be transformed to numbered Avatar
@@ -63,7 +54,7 @@ const AvatarGroup = ({
 
   return (
     <Container
-      className={cx(classes.root, className)}
+      className={twMerge('max-w-full overflow-x-auto', className)}
       data-testid={testIds?.container}
       flex
       gap='xsmall'

package/LICENSE

@@ -1,20 +0,0 @@
-MIT License
-
-Copyright (c) 2021-2022 Toptal, LLC
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the “Software”), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist-package/src/Avatar/ImageAvatar/styles.d.ts

@@ -1,3 +0,0 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "image" | "logoContainer" | "logo">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/Avatar/ImageAvatar/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Avatar/ImageAvatar/styles.ts"],"names":[],"mappings":";AAGA,wBAsBI"}

package/dist-package/src/Avatar/ImageAvatar/styles.js

@@ -1,25 +0,0 @@
-import { rem } from '@toptal/picasso-shared';
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    image: {
-        objectFit: 'cover',
-        width: '100%',
-        height: '100%',
-        position: 'absolute',
-        left: 0,
-        top: 0,
-        /* Required to prevent image blur on downscale */
-        imageRendering: '-webkit-optimize-contrast',
-    },
-    logoContainer: {
-        display: 'flex',
-        position: 'absolute',
-        bottom: '1rem',
-        left: '1rem',
-    },
-    logo: {
-        width: rem('17px'),
-        height: rem('24px'),
-    },
-});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/Avatar/ImageAvatar/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/Avatar/ImageAvatar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,KAAK,EAAE;QACL,SAAS,EAAE,OAAO;QAClB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,CAAC;QACP,GAAG,EAAE,CAAC;QACN,iDAAiD;QACjD,cAAc,EAAE,2BAA2B;KAC5C;IACD,aAAa,EAAE;QACb,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,MAAM;QACd,IAAI,EAAE,MAAM;KACb;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC;QAClB,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC;KACpB;CACF,CAAC,CAAA"}

package/dist-package/src/Avatar/styles.d.ts

@@ -1,3 +0,0 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "editableAvatarContainer">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/Avatar/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Avatar/styles.ts"],"names":[],"mappings":";AAEA,wBAMC"}

package/dist-package/src/Avatar/styles.js

@@ -1,9 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => {
-    return createStyles({
-        editableAvatarContainer: {
-            position: 'relative',
-        },
-    });
-};
-//# sourceMappingURL=styles.js.map

package/dist-package/src/Avatar/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Avatar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE;IAClB,OAAO,YAAY,CAAC;QAClB,uBAAuB,EAAE;YACvB,QAAQ,EAAE,UAAU;SACrB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/dist-package/src/AvatarGroup/styles.d.ts

@@ -1,3 +0,0 @@
-declare const _default: () => import("@material-ui/styles").StyleRules<{}, "root">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/AvatarGroup/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/AvatarGroup/styles.ts"],"names":[],"mappings":";AAEA,wBAMI"}

package/dist-package/src/AvatarGroup/styles.js

@@ -1,8 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-export default () => createStyles({
-    root: {
-        maxWidth: '100%',
-        overflowX: 'auto',
-    },
-});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/AvatarGroup/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/AvatarGroup/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,MAAM;KAClB;CACF,CAAC,CAAA"}

package/src/Avatar/ImageAvatar/styles.ts

@@ -1,26 +0,0 @@
-import { rem } from '@toptal/picasso-shared'
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    image: {
-      objectFit: 'cover',
-      width: '100%',
-      height: '100%',
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      /* Required to prevent image blur on downscale */
-      imageRendering: '-webkit-optimize-contrast',
-    },
-    logoContainer: {
-      display: 'flex',
-      position: 'absolute',
-      bottom: '1rem',
-      left: '1rem',
-    },
-    logo: {
-      width: rem('17px'),
-      height: rem('24px'),
-    },
-  })

package/src/Avatar/styles.ts

@@ -1,9 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () => {
-  return createStyles({
-    editableAvatarContainer: {
-      position: 'relative',
-    },
-  })
-}

package/src/AvatarGroup/styles.ts

@@ -1,9 +0,0 @@
-import { createStyles } from '@material-ui/core/styles'
-
-export default () =>
-  createStyles({
-    root: {
-      maxWidth: '100%',
-      overflowX: 'auto',
-    },
-  })