From e759dcb03cbe9b2aae937b8d8f20c1e2ba79f351 Mon Sep 17 00:00:00 2001 From: Adrian Contiu Date: Tue, 3 Sep 2024 23:19:18 +0300 Subject: [PATCH] [FX-5658] Migrate Timeline to TailwindCSS (#4521) --- .changeset/purple-donuts-attack.md | 9 + packages/base/Timeline/package.json | 8 +- .../base/Timeline/src/Timeline/Timeline.tsx | 12 +- .../src/Timeline/__snapshots__/test.tsx.snap | 186 +++++++++--------- packages/base/Timeline/src/Timeline/styles.ts | 10 - .../Timeline/src/TimelineRow/TimelineRow.tsx | 46 +++-- .../base/Timeline/src/TimelineRow/styles.ts | 57 ------ packages/base/Timeline/tsconfig.json | 1 + 8 files changed, 135 insertions(+), 194 deletions(-) create mode 100644 .changeset/purple-donuts-attack.md delete mode 100644 packages/base/Timeline/src/Timeline/styles.ts delete mode 100644 packages/base/Timeline/src/TimelineRow/styles.ts diff --git a/.changeset/purple-donuts-attack.md b/.changeset/purple-donuts-attack.md new file mode 100644 index 0000000000..bd44f104d6 --- /dev/null +++ b/.changeset/purple-donuts-attack.md @@ -0,0 +1,9 @@ +--- +'@toptal/picasso-timeline': major +'@toptal/picasso': patch +--- + +### Timeline + +- migrate to TailwindCSS, material-ui@4 is no longer required for this package +- make @toptal/picasso-tailwind-merge a peer dependency diff --git a/packages/base/Timeline/package.json b/packages/base/Timeline/package.json index df4dc00fb3..d972075679 100644 --- a/packages/base/Timeline/package.json +++ b/packages/base/Timeline/package.json @@ -25,15 +25,14 @@ "@toptal/picasso-container": "3.0.0", "@toptal/picasso-shared": "15.0.0", "@toptal/picasso-typography": "4.0.0", - "@toptal/picasso-utils": "1.0.3", - "classnames": "^2.5.1" + "@toptal/picasso-utils": "1.0.3" }, "sideEffects": [ "**/styles.ts", "**/styles.js" ], "peerDependencies": { - "@material-ui/core": "4.12.4", + "@toptal/picasso-tailwind-merge": "^2.0.0", "@toptal/picasso-tailwind": ">=2.7", "react": ">=16.12.0 < 19.0.0" }, @@ -41,7 +40,8 @@ ".": "./dist-package/src/index.js" }, "devDependencies": { - "@toptal/picasso-test-utils": "1.1.1" + "@toptal/picasso-test-utils": "1.1.1", + "@toptal/picasso-tailwind-merge": "2.0.0" }, "files": [ "dist-package/**", diff --git a/packages/base/Timeline/src/Timeline/Timeline.tsx b/packages/base/Timeline/src/Timeline/Timeline.tsx index 2199380337..bd9e7e6195 100644 --- a/packages/base/Timeline/src/Timeline/Timeline.tsx +++ b/packages/base/Timeline/src/Timeline/Timeline.tsx @@ -1,29 +1,21 @@ import React, { forwardRef } from 'react' import type { BaseProps } from '@toptal/picasso-shared' -import cx from 'classnames' -import { makeStyles } from '@material-ui/core/styles' import { Container } from '@toptal/picasso-container' +import { twMerge } from '@toptal/picasso-tailwind-merge' import { TimelineRow } from '../TimelineRow' -import styles from './styles' export type Props = BaseProps & { /** Timeline rows */ children: React.ReactNode } -const useStyles = makeStyles(styles, { - name: 'PicassoTimeline', -}) - export const Timeline = forwardRef(function Timeline( { className, children }, ref ) { - const classes = useStyles() - return ( - + {children} ) diff --git a/packages/base/Timeline/src/Timeline/__snapshots__/test.tsx.snap b/packages/base/Timeline/src/Timeline/__snapshots__/test.tsx.snap index 299b48544d..2c1a37d554 100644 --- a/packages/base/Timeline/src/Timeline/__snapshots__/test.tsx.snap +++ b/packages/base/Timeline/src/Timeline/__snapshots__/test.tsx.snap @@ -9,87 +9,87 @@ exports[`Timeline renders 1`] = ` class="Picasso-root" >
Row #1
Row #2
Row #3
@@ -110,31 +110,31 @@ exports[`Timeline renders with dates 1`] = ` class="Picasso-root" >

Row #1

Row #2

Row #3
@@ -250,87 +250,87 @@ exports[`Timeline renders with icons 1`] = ` class="Picasso-root" >
Row #1
Row #2
Row #3
@@ -351,86 +351,86 @@ exports[`Timeline renders without a connector 1`] = ` class="Picasso-root" >
Row #1
Row #2
Row #3
diff --git a/packages/base/Timeline/src/Timeline/styles.ts b/packages/base/Timeline/src/Timeline/styles.ts deleted file mode 100644 index 5ae5d06b22..0000000000 --- a/packages/base/Timeline/src/Timeline/styles.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { createStyles } from '@material-ui/core/styles' - -export default () => - createStyles({ - root: { - display: 'table', - height: 'fit-content', - width: 'fit-content', - }, - }) diff --git a/packages/base/Timeline/src/TimelineRow/TimelineRow.tsx b/packages/base/Timeline/src/TimelineRow/TimelineRow.tsx index fdef31f283..cbbea330a3 100644 --- a/packages/base/Timeline/src/TimelineRow/TimelineRow.tsx +++ b/packages/base/Timeline/src/TimelineRow/TimelineRow.tsx @@ -1,13 +1,9 @@ import type { ReactElement, 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 } from '@toptal/picasso-shared' -import cx from 'classnames' import { Container } from '@toptal/picasso-container' import { Typography } from '@toptal/picasso-typography' - -import styles from './styles' +import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge' export interface Props extends BaseProps { /** Timeline row content */ @@ -24,9 +20,7 @@ export interface Props extends BaseProps { } } -const useStyles = makeStyles(styles, { - name: 'PicassoTimelineRow', -}) +const tableCellClasses = 'table-cell align-top h-full' const TimelineRow = ({ className, @@ -37,31 +31,43 @@ const TimelineRow = ({ 'data-testid': dataTestId, testIds = {}, }: Props) => { - const classes = useStyles() - return ( - + {typeof icon !== 'undefined' ? ( React.cloneElement(icon, { - className: cx(icon.props.className, classes.icon), + className: twJoin( + icon.props.className, + 'my-1 mx-0 text-gray-600' + ), }) ) : ( -
+
)} {hasConnector && (
)} @@ -70,10 +76,10 @@ const TimelineRow = ({ {date && ( - + {date} @@ -81,8 +87,8 @@ const TimelineRow = ({ )} - - + + {children} diff --git a/packages/base/Timeline/src/TimelineRow/styles.ts b/packages/base/Timeline/src/TimelineRow/styles.ts deleted file mode 100644 index 8b81ca8565..0000000000 --- a/packages/base/Timeline/src/TimelineRow/styles.ts +++ /dev/null @@ -1,57 +0,0 @@ -import type { Theme } from '@material-ui/core/styles' -import { createStyles } from '@material-ui/core/styles' - -export default ({ palette }: Theme) => - createStyles({ - root: { - // No bottom spacing for the last Container - '&:last-child $content': { - marginBottom: 0, - }, - }, - content: { - flexGrow: 1, - }, - icon: { - margin: '4px 0', - color: palette.grey.main2, - }, - dot: { - // Outer dot icon dimensions should match picasso 16px icons - width: '16px', - height: '16px', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - background: 'white', - margin: '4px 0', - - '&:after': { - content: '""', - width: '9px', - height: '9px', - background: palette.grey.main2, - borderRadius: '50%', - lineHeight: '20px', - }, - }, - date: { - flex: '0 0 auto', - }, - connector: { - flex: 1, - width: 0, - borderLeft: `1px dashed ${palette.grey.main2}`, - }, - tableRow: { - display: 'table-row', - }, - tableCell: { - display: 'table-cell', - verticalAlign: 'top', - height: '100%', - }, - tableCellContent: { - height: '100%', - }, - }) diff --git a/packages/base/Timeline/tsconfig.json b/packages/base/Timeline/tsconfig.json index 9ce89e232d..e4cf3f2eea 100644 --- a/packages/base/Timeline/tsconfig.json +++ b/packages/base/Timeline/tsconfig.json @@ -4,6 +4,7 @@ "include": ["src"], "references": [ { "path": "../../picasso-tailwind" }, + { "path": "../../picasso-tailwind-merge" }, { "path": "../../shared" }, { "path": "../Container" }, { "path": "../Typography" },