Merge c579b41 into 3bf9cef

package.json

@@ -18,7 +18,7 @@
   "private": true,
   "scripts": {
     "build": "yarn run babel && yarn run type:dts",
-    "build-one": "nimbus babel --clean",
+    "build-one": "nimbus babel --clean --esm",
     "babel": "yarn run babel:cjs && yarn run babel:esm",
     "babel:cjs": "nimbus babel --clean --workspaces=\"@vx/!(demo)\"",
     "babel:esm": "nimbus babel --clean --workspaces=\"@vx/!(demo)\" --esm",

packages/vx-legend/package.json

@@ -5,6 +5,7 @@
   "sideEffects": false,
   "main": "lib/index.js",
   "module": "esm/index.js",
+  "types": "lib/index.d.ts",
   "files": [
     "lib",
     "esm"
@@ -30,14 +31,20 @@
   },
   "homepage": "https://github.com/hshoff/vx#readme",
   "peerDependencies": {
-    "react": "^15.0.0-0 || ^16.0.0-0"
+    "react": "^16.3.0-0"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
+    "@types/classnames": "^2.2.9",
+    "@types/d3-scale": "^2.1.1",
+    "@types/react": "*",
     "@vx/group": "0.0.192",
     "classnames": "^2.2.5",
     "prop-types": "^15.5.10"
+  },
+  "devDependencies": {
+    "@vx/scale": "^0.0.192"
   }
 }

packages/vx-legend/src/index.js → packages/vx-legend/src/index.ts

@@ -4,6 +4,6 @@ export { default as LegendLinear } from './legends/Linear';
 export { default as LegendOrdinal } from './legends/Ordinal';
 export { default as LegendThreshold } from './legends/Threshold';
 export { default as LegendSize } from './legends/Size';
-export { default as LegendItem } from './legends/LegendItem';
-export { default as LegendLabel } from './legends/LegendLabel';
-export { default as LegendShape } from './legends/LegendShape';
+export { default as LegendItem } from './legends/Legend/LegendItem';
+export { default as LegendLabel } from './legends/Legend/LegendLabel';
+export { default as LegendShape } from './legends/Legend/LegendShape';

packages/vx-legend/src/legends/LegendItem.jsx → packages/vx-legend/src/legends/Legend/LegendItem.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { FlexDirection } from '../../types';
 
-LegendItem.propTypes = {
-  flexDirection: PropTypes.string,
-  alignItems: PropTypes.string,
-  margin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  children: PropTypes.any,
-  display: PropTypes.string,
+export type LegendItemProps = {
+  flexDirection?: FlexDirection;
+  alignItems?: string;
+  margin?: string | number;
+  children?: React.ReactNode;
+  display?: string;
 };
 
 export default function LegendItem({
@@ -16,7 +16,7 @@ export default function LegendItem({
   display = 'flex',
   children,
   ...restProps
-}) {
+}: LegendItemProps & Omit<React.HTMLProps<HTMLDivElement>, keyof LegendItemProps>) {
   return (
     <div
       className="vx-legend-item"

packages/vx-legend/src/legends/LegendLabel.jsx → packages/vx-legend/src/legends/Legend/LegendLabel.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-LegendLabel.propTypes = {
-  align: PropTypes.string,
-  label: PropTypes.any,
-  flex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  margin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  children: PropTypes.any,
+export type LegendLabelProps = {
+  align?: string;
+  label?: React.ReactNode;
+  flex?: string | number;
+  margin?: string | number;
+  children?: React.ReactNode;
 };
 
 export default function LegendLabel({
@@ -15,7 +14,8 @@ export default function LegendLabel({
   margin = '5px 0',
   align = 'left',
   children,
-}) {
+  ...restProps
+}: LegendLabelProps & Omit<React.HTMLProps<HTMLDivElement>, keyof LegendLabelProps>) {
   return (
     <div
       className="vx-legend-label"
@@ -25,6 +25,7 @@ export default function LegendLabel({
         flex,
         margin,
       }}
+      {...restProps}
     >
       {children || label}
     </div>

packages/vx-legend/src/legends/Legend/LegendShape.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import ShapeRect from '../../shapes/Rect';
+import renderShape from '../../util/renderShape';
+import { FormattedLabel, LegendShape as LegendShapeType } from '../../types';
+
+export type LegendShapeProps<Data, Output> = {
+  label: FormattedLabel<Data, Output>;
+  margin?: string | number;
+  shape?: LegendShapeType<Data, Output>;
+  fill?: (label: FormattedLabel<Data, Output>) => any;
+  size?: (label: FormattedLabel<Data, Output>) => any;
+  shapeStyle?: (label: FormattedLabel<Data, Output>) => any;
+  width?: string | number;
+  height?: string | number;
+};
+
+export default function LegendShape<Data, Output>({
+  shape = ShapeRect,
+  width,
+  height,
+  margin,
+  label,
+  fill,
+  size,
+  shapeStyle,
+}: LegendShapeProps<Data, Output>) {
+  return (
+    <div
+      className="vx-legend-shape"
+      style={{
+        display: 'flex',
+        width: size ? size({ ...label }) : width,
+        height: size ? size({ ...label }) : height,
+        margin,
+      }}
+    >
+      {renderShape<Data, Output>({
+        shape,
+        label,
+        width,
+        height,
+        fill,
+        shapeStyle,
+      })}
+    </div>
+  );
+}