new(react-spring): add package, move AnimatedAxis + AnimatedTicksRend…

…erer
Hare-Lucius · Aug 19, 2020 · 88239bb · 88239bb
1 parent 3127ea5
commit 88239bb
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 6 deletions.
diff --git a/packages/vx-axis/package.json b/packages/vx-axis/package.json
@@ -32,12 +32,12 @@
     "@types/react": "*",
     "@vx/group": "0.0.198",
     "@vx/point": "0.0.198",
+    "@vx/react-spring": "0.0.198",
     "@vx/shape": "0.0.198",
     "@vx/scale": "0.0.198",
     "@vx/text": "0.0.198",
     "classnames": "^2.2.5",
-    "prop-types": "^15.6.0",
-    "react-spring": "^8.0.27"
+    "prop-types": "^15.6.0"
   },
   "peerDependencies": {
     "react": "^16.3.0-0"

diff --git a/packages/vx-react-spring/README.md b/packages/vx-react-spring/README.md
@@ -0,0 +1,20 @@
+# @vx/react-spring
+
+<a title="@vx/react-spring npm downloads" href="https://www.npmjs.com/package/@vx/react-spring">
+  <img src="https://img.shields.io/npm/dm/@vx/react-spring.svg?style=flat-square" />
+</a>
+
+Although `vx` is largely unopinioned on animation, there is value in abstracting the complexity +
+boilerplate of building **animated** `vx` visualization components.
+[`react-spring`](https://www.react-spring.io/) provides performant primitives for animating react
+components and is our recommended library for making animated charts.
+
+In order to minimize `react-spring` as a dependency across other `vx` packages, this package
+requires `react-spring` as a `peerDependency` (to be compatible with any usage within your app) and
+exports all `vx` components that depend on `react-spring`.
+
+## Installation
+
+```
+npm install --save react-spring @vx/react-spring
+```
diff --git a/packages/vx-react-spring/package.json b/packages/vx-react-spring/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "@vx/react-spring",
+  "version": "0.0.0",
+  "description": "Vx primitives that rely on react-spring for animation",
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "esm"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hshoff/vx.git"
+  },
+  "keywords": [
+    "vx",
+    "react",
+    "d3",
+    "visualizations",
+    "charts",
+    "animation",
+    "react-spring"
+  ],
+  "contributors": [
+    {
+      "name": "Chris Williams",
+      "url": "https://github.com/williaster"
+    }
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/hshoff/vx/issues"
+  },
+  "homepage": "https://github.com/hshoff/vx#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0-0",
+    "react-spring": "^8.0.27"
+  },
+  "dependencies": {
+    "@types/classnames": "^2.2.9",
+    "@types/react": "*",
+    "@vx/axis": "0.0.198",
+    "@vx/scale": "0.0.198",
+    "@vx/text": "0.0.198",
+    "classnames": "^2.2.5",
+    "prop-types": "^15.6.2"
+  }
+}
diff --git a/packages/vx-axis/src/axis/AnimatedAxis.tsx → ...vx-react-spring/src/axis/AnimatedAxis.tsx b/packages/vx-axis/src/axis/AnimatedAxis.tsx → ...vx-react-spring/src/axis/AnimatedAxis.tsx
diff --git a/.../src/axis/AnimatedTicksRenderer/index.tsx → .../src/axis/AnimatedTicksRenderer/index.tsx b/.../src/axis/AnimatedTicksRenderer/index.tsx → .../src/axis/AnimatedTicksRenderer/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { animated, useTransition, interpolate } from 'react-spring';
 import cx from 'classnames';
+import Orientation from '@vx/axis/lib/constants/orientation';
+import { TicksRendererProps, AxisScale } from '@vx/axis/lib/types';
 import { Text } from '@vx/text';
 
-import Orientation from '../../constants/orientation';
-import { TicksRendererProps, AxisScale } from '../../types';
 import useTickTransitionConfig from './useTickTransitionConfig';
 
 export default function TicksRenderer<Scale extends AxisScale>({
@@ -25,7 +25,7 @@ export default function TicksRenderer<Scale extends AxisScale>({
   });
 
   return animatedTicks.map(({ item, key, props }, index) => {
-    // @ts-ignore react-spring types don't handle fromX, etc.
+    // @ts-ignore react-spring types only include CSSProperties
     const { fromX, toX, fromY, toY, opacity } = props;
     const tickLabelProps = allTickLabelProps[index] ?? allTickLabelProps[0] ?? {};
     return (

diff --git a/...dTicksRenderer/useTickTransitionConfig.ts → ...dTicksRenderer/useTickTransitionConfig.ts b/...dTicksRenderer/useTickTransitionConfig.ts → ...dTicksRenderer/useTickTransitionConfig.ts
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { coerceNumber } from '@vx/scale';
-import { AxisScale, ComputedTick, TicksRendererProps } from '../../types';
+import { AxisScale, ComputedTick, TicksRendererProps } from '@vx/axis/lib/types';
 
 function enterUpdate<Scale extends AxisScale>({ from, to }: ComputedTick<Scale>) {
   return {

diff --git a/packages/vx-react-spring/src/index.ts b/packages/vx-react-spring/src/index.ts
@@ -0,0 +1,2 @@
+export { default as AnimatedTicksRender } from './axis/AnimatedTicksRenderer';
+export { default as AnimatedAxis } from './axis/AnimatedAxis';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default as AnimatedTicksRender } from './axis/AnimatedTicksRenderer';
		export { default as AnimatedAxis } from './axis/AnimatedAxis';