feat(bullet): migrate package to typescript

.storybook/main.js

@@ -1,9 +1,9 @@
 module.exports = {
-  stories: ['../**/*.stories.js'],
+  stories: ['../**/*.stories.@(js|tsx)'],
   addons: [
     '@storybook/addon-knobs',
     '@storybook/addon-actions',
     '@storybook/addon-links',
     '@storybook/addon-storysource',
   ],
-};
+};

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

@@ -16,25 +16,26 @@
   ],
   "main": "./dist/nivo-bullet.cjs.js",
   "module": "./dist/nivo-bullet.es.js",
+  "typings": "./dist/types/index.d.ts",
   "files": [
     "README.md",
     "LICENSE.md",
-    "index.d.ts",
     "dist/"
   ],
   "dependencies": {
     "@nivo/axes": "0.64.0",
     "@nivo/colors": "0.64.0",
-    "@nivo/core": "0.64.0",
     "@nivo/legends": "0.64.0",
     "@nivo/tooltip": "0.64.0",
     "d3-scale": "^3.0.0",
-    "lodash": "^4.17.11",
-    "react-motion": "^0.5.2",
-    "recompose": "^0.30.0"
+    "react-spring": "^8.0.27"
+  },
+  "devDependencies": {
+    "@nivo/core": "*",
+    "@types/d3-scale": "^3.2.1"
   },
   "peerDependencies": {
-    "prop-types": ">= 15.5.10 < 16.0.0",
+    "@nivo/core": "^0.64.0",
     "react": ">= 16.8.4 < 17.0.0"
   },
   "publishConfig": {

packages/bullet/src/Bullet.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+// @ts-ignore
+import { Container, SvgWrapper, useDimensions } from '@nivo/core'
+import { defaultProps } from './props'
+import { BulletSvgProps } from './types'
+import { BulletItem } from './BulletItem'
+import { useEnhancedData } from './hooks'
+
+export const Bullet = (props: BulletSvgProps) => {
+    const {
+        data,
+
+        layout,
+        spacing,
+        measureSize,
+        markerSize,
+        reverse,
+        axisPosition,
+
+        margin: partialMargin,
+        width,
+        height,
+
+        titlePosition,
+        titleAlign,
+        titleOffsetX,
+        titleOffsetY,
+        titleRotation,
+
+        rangeComponent,
+        rangeColors,
+
+        measureComponent,
+        measureColors,
+
+        markerComponent,
+        markerColors,
+
+        theme,
+
+        animate,
+        motionConfig,
+
+        isInteractive,
+        onRangeClick,
+        onMeasureClick,
+        onMarkerClick,
+
+        role,
+    } = { height: 0, width: 0, ...defaultProps, ...props }
+
+    const { margin, innerWidth, innerHeight } = useDimensions(width, height, partialMargin)
+
+    const itemHeight =
+        layout === 'horizontal'
+            ? (innerHeight - spacing * (data.length - 1)) / data.length
+            : (innerWidth - spacing * (data.length - 1)) / data.length
+
+    const measureHeight = itemHeight * measureSize
+    const markerHeight = itemHeight * markerSize
+
+    const enhancedData = useEnhancedData(data, {
+        layout,
+        reverse,
+        width: innerWidth,
+        height: innerHeight,
+    })
+
+    return (
+        <Container
+            isInteractive={isInteractive}
+            theme={theme}
+            animate={animate}
+            motionConfig={motionConfig}
+        >
+            <SvgWrapper width={width} height={height} margin={margin} role={role}>
+                {enhancedData.map((d, i) => (
+                    <BulletItem
+                        key={d.id}
+                        {...d}
+                        layout={layout}
+                        reverse={reverse}
+                        x={layout === 'vertical' ? itemHeight * i + spacing * i : 0}
+                        y={layout === 'horizontal' ? itemHeight * i + spacing * i : 0}
+                        width={innerWidth}
+                        height={itemHeight}
+                        titlePosition={titlePosition}
+                        titleAlign={titleAlign}
+                        titleOffsetX={titleOffsetX}
+                        titleOffsetY={titleOffsetY}
+                        titleRotation={titleRotation}
+                        measureHeight={measureHeight}
+                        markerHeight={markerHeight}
+                        rangeComponent={rangeComponent}
+                        rangeColors={rangeColors}
+                        measureComponent={measureComponent}
+                        measureColors={measureColors}
+                        markerComponent={markerComponent}
+                        markerColors={markerColors}
+                        axisPosition={axisPosition}
+                        onRangeClick={onRangeClick}
+                        onMeasureClick={onMeasureClick}
+                        onMarkerClick={onMarkerClick}
+                    />
+                ))}
+            </SvgWrapper>
+        </Container>
+    )
+}