feat(vx-marker): refactor types

packages/vx-marker/Readme.md

@@ -4,7 +4,7 @@
   <img src="https://img.shields.io/npm/dm/@vx/marker.svg?style=flat-square" />
 </a>
 
-Markers are elements attached to shapes.
+Markers are graphical objects attached to a <path>, <line>, <polyline>, or <polygon> element.
 [MDN `<marker>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker)
 
 ## Installation

packages/vx-marker/src/markers/Arrow.tsx

@@ -1,18 +1,12 @@
 import React from 'react';
-import Marker, { MarkerProps } from './Marker';
-
-interface MarkerArrowProps {
-  id: string;
-  size?: number;
-  strokeWidth?: number;
-}
+import Marker, { MarkerComponentProps } from './Marker';
 
 export default function MarkerArrow({
   id,
   size = 9,
   strokeWidth = 1,
   ...restProps
-}: MarkerArrowProps & Omit<MarkerProps, 'children'>) {
+}: MarkerComponentProps) {
   const max = size + strokeWidth * 2;
   const midX = size;
   const midY = max / 2;

packages/vx-marker/src/markers/Circle.tsx

@@ -1,35 +1,28 @@
 import React from 'react';
-import Marker, { MarkerProps } from './Marker';
-
-interface MarkerCircleProps {
-  id: string;
-  radius?: number; // todo: support string value and browser units (px, ch, em, etc.)
-  strokeWidth?: number; // todo: support string value and browser units (px, ch, em, etc.)
-}
+import Marker, { MarkerComponentProps } from './Marker';
 
 export default function MarkerCircle({
   id,
-  radius = 4,
-  strokeWidth = 0,
+  size = 9,
+  strokeWidth = 1,
   ...restProps
-}: MarkerCircleProps & Omit<MarkerProps, 'children'>) {
-  const diameter = radius * 2;
-  const size = diameter + strokeWidth;
+}: MarkerComponentProps) {
+  const diameter = size * 2;
+  const bounds = diameter + strokeWidth;
   const mid = size / 2;
   return (
     <Marker
       id={id}
-      markerWidth={size}
-      markerHeight={size}
+      markerWidth={bounds}
+      markerHeight={bounds}
       refX={0}
       refY={mid}
       orient="auto-start-reverse"
       markerUnits="strokeWidth"
-      fill="steelblue"
       strokeWidth={strokeWidth}
       {...restProps}
     >
-      <circle r={radius} cx={mid} cy={mid} />
+      <circle r={size} cx={mid} cy={mid} />
     </Marker>
   );
 }

packages/vx-marker/src/markers/Cross.tsx

@@ -1,18 +1,12 @@
 import React from 'react';
-import Marker, { MarkerProps } from './Marker';
-
-interface MarkerCrossProps {
-  id: string;
-  size?: number;
-  strokeWidth?: number;
-}
+import Marker, { MarkerComponentProps } from './Marker';
 
 export default function MarkerCross({
   id,
-  size = 12,
-  strokeWidth = 0,
+  size = 9,
+  strokeWidth = 1,
   ...restProps
-}: MarkerCrossProps & Omit<MarkerProps, 'children'>) {
+}: MarkerComponentProps) {
   const bounds = size + strokeWidth;
   const mid = size / 2;
   const points = `0 ${mid}, ${mid} ${mid}, ${mid} 0, ${mid} ${size}, ${mid} ${mid}, ${size} ${mid}`;

packages/vx-marker/src/markers/Line.tsx

@@ -1,21 +1,14 @@
 import React from 'react';
-import Marker, { MarkerProps } from './Marker';
-
-export interface MarkerLineProps {
-  id: string;
-  size?: number;
-  stroke?: string;
-  fill?: string;
-}
+import Marker, { MarkerComponentProps } from './Marker';
 
 export default function MarkerLine({
   id,
-  size = 8,
+  size = 9,
+  fill,
   stroke,
   strokeWidth = 1,
-  fill,
   ...restProps
-}: MarkerLineProps & Omit<MarkerProps, 'children'>) {
+}: MarkerComponentProps) {
   const max = Math.max(size, strokeWidth * 2);
   const midX = max / 2;
   const midY = size / 2;

packages/vx-marker/src/markers/Marker.tsx

@@ -1,24 +1,28 @@
 import React from 'react';
 
 export interface Props {
-  /** Unique id for the gradient. Should be unique across all page elements. */
+  /** Unique id for the `<marker>`. Should be unique across all page elements. */
   id: string;
-  /** the width of the marker viewport */
+  /** A number used to determine the size of the bounding box the marker content. */
+  size?: number;
+  /** The width of the marker viewport */
   markerWidth?: string | number;
-  /** the height of the marker viewport */
+  /** The height of the marker viewport */
   markerHeight?: string | number;
-  /** set the coordinate system for the markerWidth, markerHeight, and <marker> contents  */
+  /** Set the coordinate system for the markerWidth, markerHeight, and `<marker>` contents  */
   markerUnits?: string;
-  /** the x coordinate for the reference point of the maker */
+  /** The x coordinate for the reference point of the maker */
   refX?: string | number;
-  /** the y coordinate for the reference point of the maker */
+  /** The y coordinate for the reference point of the maker */
   refY?: string | number;
+  /** The stroke width. constrained to a `number` type due to use in bounding box calculations */
   strokeWidth?: number;
-  /** the <marker> contents */
+  /** The <marker> contents. Typically one of: `<path>`, `<line>`, `<polyline>`, or `<polygon>` */
   children: React.ReactNode;
 }
 
 export type MarkerProps = Props & Omit<React.SVGProps<SVGMarkerElement>, keyof Props>;
+export type MarkerComponentProps = Omit<MarkerProps, 'children'>;
 
 export default function Marker({
   id,

packages/vx-marker/src/markers/X.tsx

@@ -1,15 +1,7 @@
 import React from 'react';
 import Cross from './Cross';
-import { MarkerProps } from './Marker';
+import { MarkerComponentProps } from './Marker';
 
-export interface MarkerXProps {
-  id: string;
-  size?: number;
-  strokeWidth?: number;
-}
-
-export type Props = MarkerXProps & Omit<MarkerProps, 'children'>;
-
-export default function MarkerX(props: Props) {
+export default function MarkerX(props: MarkerComponentProps) {
   return <Cross orient={45} {...props} />;
 }

packages/vx-marker/test/Circle.test.tsx

@@ -20,7 +20,7 @@ describe('<MarkerCircle />', () => {
   test('it should size correctly', () => {
     const radius = 8;
     const strokeWidth = 1;
-    const marker = Wrapper({ radius, strokeWidth }).find(Marker);
+    const marker = Wrapper({ size: radius, strokeWidth }).find(Marker);
     const circle = marker.dive().find('circle');
     const diameter = radius * 2;
     const size = diameter + strokeWidth;