feat(bullet): remove recompose dependency

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",

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",

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<BulletSvgProps> {
-    static displayName = 'Bullet'
-
     render() {
         const {
             data,
@@ -22,11 +18,9 @@ export class Bullet extends Component<BulletSvgProps> {
             reverse,
             axisPosition,
 
-            margin,
-            width,
-            height,
-            outerWidth,
-            outerHeight,
+            margin: _margin,
+            width: outerWidth,
+            height: outerHeight,
 
             titlePosition,
             titleAlign,
@@ -43,7 +37,7 @@ export class Bullet extends Component<BulletSvgProps> {
             markerComponent,
             markerColors,
 
-            theme,
+            theme: _theme,
 
             animate,
             motionStiffness,
@@ -57,6 +51,11 @@ export class Bullet extends Component<BulletSvgProps> {
             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<BulletSvgProps> {
     }
 }
 
-export default setDisplayName(Bullet.displayName)(enhance(Bullet))
+export default Bullet

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<BulletItemProps> {
             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<BulletItemProps> {
     }
 }
 
-const EnhancedBulletItem = compose(
-    withMotion(),
-    withPropsOnChange<any, any>(['rangeColors', 'scale'], ({ rangeColors, scale }) => ({
-        rangeColorScale: getColorScale(rangeColors, scale, true),
-    })),
-    withPropsOnChange<any, any>(['ranges', 'rangeColorScale'], ({ ranges, rangeColorScale }) => ({
-        computedRanges: stackValues(ranges, rangeColorScale),
-    })),
-    withPropsOnChange<any, any>(['measureColors', 'scale'], ({ measureColors, scale }) => ({
-        measureColorScale: getColorScale(measureColors, scale),
-    })),
-    withPropsOnChange<any, any>(
-        ['measures', 'measureColorScale'],
-        ({ measures, measureColorScale }) => ({
-            computedMeasures: stackValues(measures, measureColorScale),
-        })
-    ),
-    withPropsOnChange<any, any>(['markerColors', 'scale'], ({ markerColors, scale }) => ({
-        markerColorScale: getColorScale(markerColors, scale),
-    })),
-    withPropsOnChange<any, any>(
-        ['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

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<BulletRectsProps & EventHandlers> {
     }
 
     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<BulletRectsProps & EventHandlers> {
                     }))}
                 >
                     {interpolatedStyles => (
-                        <Fragment>
+                        <>
                             {interpolatedStyles.map(({ key, style, data }) => {
                                 const color = getInterpolatedColor(style)
 
@@ -93,36 +111,12 @@ class BulletRects extends Component<BulletRectsProps & EventHandlers> {
                                     onClick: partial(this.handleClick, data),
                                 })
                             })}
-                        </Fragment>
+                        </>
                     )}
                 </TransitionMotion>
             </g>
         )
     }
 }
 
-const EnhancedBulletRects = compose(
-    withPropsOnChange(
-        ['data', 'layout', 'reverse', 'scale', 'height'],
-        ({
-            data,
-            layout,
-            reverse,
-            scale,
-            height,
-        }: Pick<BulletRectsProps, 'data' | 'layout' | 'reverse' | 'scale' | 'height'>) => ({
-            rects: computeRects({
-                data,
-                layout,
-                reverse,
-                scale,
-                height,
-            }),
-        })
-    ),
-    pure
-)(BulletRects as any) as React.ComponentClass<Omit<BulletRectsProps, 'rects'> & EventHandlers>
-
-EnhancedBulletRects.displayName = 'BulletRects'
-
-export default EnhancedBulletRects
+export default BulletRects

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'

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

packages/bullet/src/types.ts

@@ -50,12 +50,7 @@ export interface DataProps<T> {
     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<CommonBulletProps, 'layout' | 'reverse'> &
     Point &
     MotionProps & {
         scale: ScaleLinear<number, number, never>
-        data: Pick<ComputedRangeDatum, 'v0' | 'v1'>[]
-        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

packages/bullet/tests/.eslintrc.yml

@@ -0,0 +1,2 @@
+env:
+  jest: true