From ff7f1bc86aba13937f4475524976c80319d16427 Mon Sep 17 00:00:00 2001 From: Neil Kistner Date: Fri, 6 Nov 2020 11:31:33 -0600 Subject: [PATCH] feat(bullet): remove recompose dependency --- package.json | 1 + packages/bullet/package.json | 6 +- packages/bullet/src/Bullet.tsx | 23 ++++---- packages/bullet/src/BulletItem.tsx | 85 ++++++++++----------------- packages/bullet/src/BulletRects.tsx | 54 ++++++++--------- packages/bullet/src/enhance.ts | 17 ------ packages/bullet/src/index.ts | 1 + packages/bullet/src/props.ts | 11 ++++ packages/bullet/src/types.ts | 16 +---- packages/bullet/tests/.eslintrc.yml | 2 + packages/bullet/tests/Bullet.test.tsx | 35 +++++++++++ packages/core/index.d.ts | 4 ++ yarn.lock | 68 ++++++++++++++++++--- 13 files changed, 184 insertions(+), 139 deletions(-) delete mode 100644 packages/bullet/src/enhance.ts create mode 100644 packages/bullet/tests/.eslintrc.yml create mode 100644 packages/bullet/tests/Bullet.test.tsx diff --git a/package.json b/package.json index 62db372d6b..698f18eba9 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "@storybook/addons": "^6.0.26", "@storybook/react": "^6.0.26", "@storybook/theming": "^6.0.26", + "@types/jest": "^26.0.15", "@types/lodash": "^4.14.149", "@types/react": "^16.9.16", "@typescript-eslint/eslint-plugin": "^4.6.1", diff --git a/packages/bullet/package.json b/packages/bullet/package.json index 1f8f0dbe08..5515e9a739 100644 --- a/packages/bullet/package.json +++ b/packages/bullet/package.json @@ -29,14 +29,12 @@ "@nivo/tooltip": "0.64.0", "d3-scale": "^3.0.0", "lodash": "^4.17.11", - "react-motion": "^0.5.2", - "recompose": "^0.30.0" + "react-motion": "^0.5.2" }, "devDependencies": { "@nivo/core": "*", "@types/d3-scale": "^3.2.1", - "@types/react-motion": "^0.0.29", - "@types/recompose": "^0.30.7" + "@types/react-motion": "^0.0.29" }, "peerDependencies": { "@nivo/core": "^0.64.0", diff --git a/packages/bullet/src/Bullet.tsx b/packages/bullet/src/Bullet.tsx index 0a4696c4c4..a7c15debb7 100644 --- a/packages/bullet/src/Bullet.tsx +++ b/packages/bullet/src/Bullet.tsx @@ -1,16 +1,12 @@ import React, { Component } from 'react' import { scaleLinear } from 'd3-scale' -import { setDisplayName } from 'recompose' // @ts-ignore -import { Container, SvgWrapper } from '@nivo/core' +import { Container, SvgWrapper, defaultTheme, extendDefaultTheme, defaultMargin } from '@nivo/core' import { defaultProps } from './props' import { BulletSvgProps, TooltipHandlers } from './types' -import enhance from './enhance' import BulletItem from './BulletItem' export class Bullet extends Component { - static displayName = 'Bullet' - render() { const { data, @@ -22,11 +18,9 @@ export class Bullet extends Component { reverse, axisPosition, - margin, - width, - height, - outerWidth, - outerHeight, + margin: _margin, + width: outerWidth, + height: outerHeight, titlePosition, titleAlign, @@ -43,7 +37,7 @@ export class Bullet extends Component { markerComponent, markerColors, - theme, + theme: _theme, animate, motionStiffness, @@ -57,6 +51,11 @@ export class Bullet extends Component { role, } = { height: 0, width: 0, ...defaultProps, ...this.props } + const theme = extendDefaultTheme(defaultTheme, _theme) + const margin = { ...defaultMargin, ..._margin } + const width = outerWidth - margin.left - margin.right + const height = outerHeight - margin.top - margin.bottom + const itemHeight = layout === 'horizontal' ? (height - spacing * (data.length - 1)) / data.length @@ -144,4 +143,4 @@ export class Bullet extends Component { } } -export default setDisplayName(Bullet.displayName)(enhance(Bullet)) +export default Bullet diff --git a/packages/bullet/src/BulletItem.tsx b/packages/bullet/src/BulletItem.tsx index 8d2d0b5aa3..17e7778243 100644 --- a/packages/bullet/src/BulletItem.tsx +++ b/packages/bullet/src/BulletItem.tsx @@ -1,12 +1,12 @@ import React, { Component } from 'react' import { Motion, spring } from 'react-motion' import { partial, isString } from 'lodash' -import { compose, withPropsOnChange, pure } from 'recompose' import { Axis } from '@nivo/axes' // @ts-ignore -import { getColorScale, withMotion, themePropType, noop } from '@nivo/core' +import { getColorScale, defaultTheme, extendDefaultTheme } from '@nivo/core' import { BasicTooltip } from '@nivo/tooltip' import { stackValues } from './compute' +import { defaultProps } from './props' import BulletMarkers from './BulletMarkers' import BulletRects from './BulletRects' import { BulletItemProps, ComputedRangeDatum, ComputedMarkersDatum, TooltipHandlers } from './types' @@ -113,27 +113,47 @@ class BulletItem extends Component { titleOffsetY, titleRotation, - computedRanges, rangeComponent, + rangeColors, + ranges, - computedMeasures, measureComponent, measureHeight, + measureColors, + measures, - computedMarkers, markerComponent, + markerColors, markerHeight, + markers = [], - theme, + theme: _theme, showTooltip, hideTooltip, - animate, - motionStiffness, - motionDamping, + animate = defaultProps.animate, + motionStiffness = defaultProps.motionStiffness, + motionDamping = defaultProps.motionDamping, } = this.props + const theme = extendDefaultTheme(defaultTheme, _theme) + + const rangeColorScale = getColorScale(rangeColors, scale, true) + const computedRanges = stackValues(ranges, rangeColorScale) + + const measureColorScale = getColorScale(measureColors, scale) + const computedMeasures = stackValues(measures, measureColorScale) + + const markerColorScale = getColorScale(markerColors, scale) + const computedMarkers = markers.map((marker: number, index: number) => ({ + value: marker, + index, + color: markerColorScale( + markerColorScale.type === 'sequential' ? marker : index + ) as string, + })) + const motionProps = { animate, motionStiffness, @@ -290,49 +310,4 @@ class BulletItem extends Component { } } -const EnhancedBulletItem = compose( - withMotion(), - withPropsOnChange(['rangeColors', 'scale'], ({ rangeColors, scale }) => ({ - rangeColorScale: getColorScale(rangeColors, scale, true), - })), - withPropsOnChange(['ranges', 'rangeColorScale'], ({ ranges, rangeColorScale }) => ({ - computedRanges: stackValues(ranges, rangeColorScale), - })), - withPropsOnChange(['measureColors', 'scale'], ({ measureColors, scale }) => ({ - measureColorScale: getColorScale(measureColors, scale), - })), - withPropsOnChange( - ['measures', 'measureColorScale'], - ({ measures, measureColorScale }) => ({ - computedMeasures: stackValues(measures, measureColorScale), - }) - ), - withPropsOnChange(['markerColors', 'scale'], ({ markerColors, scale }) => ({ - markerColorScale: getColorScale(markerColors, scale), - })), - withPropsOnChange( - ['markers', 'markerColorScale'], - ({ markers, markerColorScale }) => ({ - computedMarkers: markers.map((marker: number, index: number) => ({ - value: marker, - index, - color: markerColorScale(markerColorScale.type === 'sequential' ? marker : index), - })), - }) - ), - pure -)(BulletItem as any) as React.ComponentType< - Omit< - BulletItemProps, - | 'computedRanges' - | 'rangeColorScale' - | 'computedMeasures' - | 'measureColorScale' - | 'computedMarkers' - | 'markerColorScale' - > -> - -EnhancedBulletItem.displayName = 'BulletItem' - -export default EnhancedBulletItem +export default BulletItem diff --git a/packages/bullet/src/BulletRects.tsx b/packages/bullet/src/BulletRects.tsx index cb0fb650f4..38b7dae95d 100644 --- a/packages/bullet/src/BulletRects.tsx +++ b/packages/bullet/src/BulletRects.tsx @@ -1,7 +1,6 @@ -import React, { Component, Fragment } from 'react' +import React, { Component } from 'react' import { partial } from 'lodash' import { TransitionMotion, spring } from 'react-motion' -import { compose, withPropsOnChange, pure } from 'recompose' // @ts-ignore import { interpolateColor, getInterpolatedColor } from '@nivo/colors' import { computeRects } from './compute' @@ -28,7 +27,26 @@ class BulletRects extends Component { } render() { - const { rects, layout, y, component, animate, motionStiffness, motionDamping } = this.props + const { + data, + layout, + y, + component, + animate, + motionStiffness, + motionDamping, + reverse, + scale, + height, + } = this.props + + const rects = computeRects({ + data, + layout, + reverse, + scale, + height, + }) const transform = `translate(${layout === 'horizontal' ? 0 : y},${ layout === 'horizontal' ? y : 0 @@ -74,7 +92,7 @@ class BulletRects extends Component { }))} > {interpolatedStyles => ( - + <> {interpolatedStyles.map(({ key, style, data }) => { const color = getInterpolatedColor(style) @@ -93,7 +111,7 @@ class BulletRects extends Component { onClick: partial(this.handleClick, data), }) })} - + )} @@ -101,28 +119,4 @@ class BulletRects extends Component { } } -const EnhancedBulletRects = compose( - withPropsOnChange( - ['data', 'layout', 'reverse', 'scale', 'height'], - ({ - data, - layout, - reverse, - scale, - height, - }: Pick) => ({ - rects: computeRects({ - data, - layout, - reverse, - scale, - height, - }), - }) - ), - pure -)(BulletRects as any) as React.ComponentClass & EventHandlers> - -EnhancedBulletRects.displayName = 'BulletRects' - -export default EnhancedBulletRects +export default BulletRects diff --git a/packages/bullet/src/enhance.ts b/packages/bullet/src/enhance.ts deleted file mode 100644 index 638c693274..0000000000 --- a/packages/bullet/src/enhance.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { compose, defaultProps, pure } from 'recompose' -// @ts-ignore -import { withDimensions, withTheme, withMotion } from '@nivo/core' -import { defaultProps as bulletDefaultProps } from './props' - -const commonEnhancers = [withDimensions(), withTheme()] - -export default (Component: React.ComponentType) => { - switch (Component.displayName) { - case 'Bullet': - return compose( - ...[defaultProps(bulletDefaultProps), ...commonEnhancers, withMotion(), pure] - )(Component) - } - - return Component -} diff --git a/packages/bullet/src/index.ts b/packages/bullet/src/index.ts index bd646ed9b4..a8448cba21 100644 --- a/packages/bullet/src/index.ts +++ b/packages/bullet/src/index.ts @@ -2,3 +2,4 @@ export { default as Bullet } from './Bullet' export { default as BulletItem } from './BulletItem' export { default as ResponsiveBullet } from './ResponsiveBullet' export * from './props' +export * from './types' diff --git a/packages/bullet/src/props.ts b/packages/bullet/src/props.ts index cde0188c09..b199357038 100644 --- a/packages/bullet/src/props.ts +++ b/packages/bullet/src/props.ts @@ -1,5 +1,12 @@ import BulletMarkersItem from './BulletMarkersItem' import BulletRectsItem from './BulletRectsItem' +import { + defaultAnimate, + defaultMotionStiffness, + defaultMotionDamping, + // @ts-ignore + defaultMargin, +} from '@nivo/core' export const defaultProps = { layout: 'horizontal', @@ -25,5 +32,9 @@ export const defaultProps = { measureBorderColor: { from: 'color' }, markerSize: 0.6, isInteractive: true, + animate: defaultAnimate, + motionStiffness: defaultMotionStiffness, + motionDamping: defaultMotionDamping, + margin: defaultMargin, role: 'img', } as const diff --git a/packages/bullet/src/types.ts b/packages/bullet/src/types.ts index 9bcdc116da..0d070d6772 100644 --- a/packages/bullet/src/types.ts +++ b/packages/bullet/src/types.ts @@ -50,12 +50,7 @@ export interface DataProps { data: T[] } -export type WithDimensions = Dimensions & { - outerWidth: number - outerHeight: number -} - -export type CommonBulletProps = WithDimensions & { +export type CommonBulletProps = Dimensions & { margin: Box layout: 'horizontal' | 'vertical' @@ -133,8 +128,7 @@ export type BulletRectsProps = Pick & Point & MotionProps & { scale: ScaleLinear - data: Pick[] - rects: (Point & Dimensions & { data: ComputedRangeDatum })[] + data: ComputedRangeDatum[] component: CommonBulletProps['rangeComponent'] } @@ -168,12 +162,6 @@ export type BulletItemProps = Omit< EnhancedDatum & MotionProps & Point & { - rangeColorScale: (datum: DatumValue) => string - computedRanges: ComputedRangeDatum[] - measureColorScale: (datum: DatumValue) => string - computedMeasures: ComputedMeasuresDatum[] - markerColorScale: (datum: DatumValue) => string - computedMarkers: ComputedMarkersDatum[] measureHeight: number markerHeight: number theme?: Theme diff --git a/packages/bullet/tests/.eslintrc.yml b/packages/bullet/tests/.eslintrc.yml new file mode 100644 index 0000000000..2f8de9aea2 --- /dev/null +++ b/packages/bullet/tests/.eslintrc.yml @@ -0,0 +1,2 @@ +env: + jest: true diff --git a/packages/bullet/tests/Bullet.test.tsx b/packages/bullet/tests/Bullet.test.tsx new file mode 100644 index 0000000000..c66bacccc5 --- /dev/null +++ b/packages/bullet/tests/Bullet.test.tsx @@ -0,0 +1,35 @@ +import React from 'react' +import { mount } from 'enzyme' +import { radiansToDegrees } from '@nivo/core' +import { Bullet } from '../src' + +const sampleData = [ + { + id: 'A', + ranges: [10, 20, 40], + measures: [30], + markers: [20] + }, + { + id: 'B', + ranges: [100], + measures: [20, 50], + markers: [80] + }, + { + id: 'C', + ranges: [50], + measures: [10], + markers: [40] + }, +] + +describe('Bullet', () => { + describe('data', () => { + it('should render and not crash', () => { + const wrapper = mount() + + expect(wrapper.exists()).toBe(true) + }) + }) +}) diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts index 9d6f4e2ff2..482ed13f68 100644 --- a/packages/core/index.d.ts +++ b/packages/core/index.d.ts @@ -196,6 +196,10 @@ declare module '@nivo/core' { defs: Def[] } + export declare const defaultAnimate = true + export declare const defaultMotionStiffness = 90 + export declare const defaultMotionDamping = 15 + export function PatternLines(props: Omit): JSX.Element export function PatternSquares(props: Omit): JSX.Element export function PatternDots(props: Omit): JSX.Element diff --git a/yarn.lock b/yarn.lock index 35e98af2d5..2b00edc951 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3947,6 +3947,17 @@ "@types/yargs" "^15.0.0" chalk "^4.0.0" +"@jest/types@^26.6.2": + version "26.6.2" + resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e" + integrity sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ== + dependencies: + "@types/istanbul-lib-coverage" "^2.0.0" + "@types/istanbul-reports" "^3.0.0" + "@types/node" "*" + "@types/yargs" "^15.0.0" + chalk "^4.0.0" + "@jimp/bmp@^0.6.8": version "0.6.8" resolved "https://registry.yarnpkg.com/@jimp/bmp/-/bmp-0.6.8.tgz#8abbfd9e26ba17a47fab311059ea9f7dd82005b6" @@ -6036,6 +6047,21 @@ "@types/istanbul-lib-coverage" "*" "@types/istanbul-lib-report" "*" +"@types/istanbul-reports@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz#508b13aa344fa4976234e75dddcc34925737d821" + integrity sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA== + dependencies: + "@types/istanbul-lib-report" "*" + +"@types/jest@^26.0.15": + version "26.0.15" + resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.15.tgz#12e02c0372ad0548e07b9f4e19132b834cb1effe" + integrity sha512-s2VMReFXRg9XXxV+CW9e5Nz8fH2K1aEhwgjUqPPbQd7g95T0laAcvLv032EhFHIa5GHsZ8W7iJEQVaJq6k3Gog== + dependencies: + jest-diff "^26.0.0" + pretty-format "^26.0.0" + "@types/json-schema@^7.0.3": version "7.0.3" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.3.tgz#bdfd69d61e464dcc81b25159c270d75a73c1a636" @@ -6215,13 +6241,6 @@ "@types/prop-types" "*" csstype "^2.2.0" -"@types/recompose@^0.30.7": - version "0.30.7" - resolved "https://registry.yarnpkg.com/@types/recompose/-/recompose-0.30.7.tgz#0d47f3da3bdf889a4f36d4ca7531fac1eee1c6bd" - integrity sha512-kEvD7XMguXgG7jJJS//cE1QTbkFj2qDtIPAg1FvXxE8D6jD1C0WabJjT7cVitC7TK0N5I3yp2955hqNFFZV0wg== - dependencies: - "@types/react" "*" - "@types/resolve@0.0.8": version "0.0.8" resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194" @@ -10857,6 +10876,11 @@ diff-sequences@^26.0.0: resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.0.0.tgz#0760059a5c287637b842bd7085311db7060e88a6" integrity sha512-JC/eHYEC3aSS0vZGjuoc4vHA0yAQTzhQQldXMeMF+JlxLGJlCO38Gma82NV9gk1jGFz8mDzUMeaKXvjRRdJ2dg== +diff-sequences@^26.6.2: + version "26.6.2" + resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1" + integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q== + diff@4.0.2, diff@^4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d" @@ -16036,6 +16060,16 @@ jest-diff@^25.5.0: jest-get-type "^25.2.6" pretty-format "^25.5.0" +jest-diff@^26.0.0: + version "26.6.2" + resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394" + integrity sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA== + dependencies: + chalk "^4.0.0" + diff-sequences "^26.6.2" + jest-get-type "^26.3.0" + pretty-format "^26.6.2" + jest-diff@^26.0.1: version "26.0.1" resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.0.1.tgz#c44ab3cdd5977d466de69c46929e0e57f89aa1de" @@ -16097,6 +16131,11 @@ jest-get-type@^26.0.0: resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.0.0.tgz#381e986a718998dbfafcd5ec05934be538db4039" integrity sha512-zRc1OAPnnws1EVfykXOj19zo2EMw5Hi6HLbFCSjpuJiXtOWAYIjNsHVSbpQ8bDX7L5BGYGI8m+HmKdjHYFF0kg== +jest-get-type@^26.3.0: + version "26.3.0" + resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0" + integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig== + jest-haste-map@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.9.0.tgz#b38a5d64274934e21fa417ae9a9fbeb77ceaac7d" @@ -20115,6 +20154,16 @@ pretty-format@^25.5.0: ansi-styles "^4.0.0" react-is "^16.12.0" +pretty-format@^26.0.0, pretty-format@^26.6.2: + version "26.6.2" + resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.6.2.tgz#e35c2705f14cb7fe2fe94fa078345b444120fc93" + integrity sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg== + dependencies: + "@jest/types" "^26.6.2" + ansi-regex "^5.0.0" + ansi-styles "^4.0.0" + react-is "^17.0.1" + pretty-format@^26.0.1: version "26.0.1" resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.0.1.tgz#a4fe54fe428ad2fd3413ca6bbd1ec8c2e277e197" @@ -20858,6 +20907,11 @@ react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.5: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.5.tgz#c54ac229dd66b5afe0de5acbe47647c3da692ff8" integrity sha512-sudt2uq5P/2TznPV4Wtdi+Lnq3yaYW8LfvPKLM9BKD8jJNBkxMVyB0C9/GmVhLw7Jbdmndk/73n7XQGeN9A3QQ== +react-is@^17.0.1: + version "17.0.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339" + integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA== + react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"