mathbox-react 0.0.4 → 0.0.5-dev

package/build/index.d.ts

@@ -1,6 +1,272 @@
-declare type Props = {
-    element: HTMLElement;
-};
-declare const Mathbox: (props: Props) => null;
+import React, { ReactNode } from 'react';
+import { NodeType, Props, MathboxSelection } from 'mathbox';
 
-export { Mathbox };
+declare type WithChildren<T> = {
+    children?: ReactNode | ReactNode[];
+} & T;
+
+declare type MathboxComponent<T extends NodeType> = React.ForwardRefExoticComponent<WithChildren<Props[T]> & React.RefAttributes<MathboxSelection<T>>>;
+/**
+ * Component wrapper for mathbox [`area`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#dataarea).
+ */
+declare const Area: MathboxComponent<"area">;
+/**
+ * Component wrapper for mathbox [`array`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#dataarray).
+ */
+declare const MBArray: MathboxComponent<"array">;
+
+/**
+ * Component wrapper for mathbox [`axis`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#drawaxis).
+ */
+declare const Axis: MathboxComponent<"axis">;
+/**
+ * Component wrapper for mathbox [`camera`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#cameracamera).
+ */
+declare const Camera: MathboxComponent<"camera">;
+/**
+ * Component wrapper for mathbox [`cartesian`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#viewcartesian).
+ */
+declare const Cartesian: MathboxComponent<"cartesian">;
+/**
+ * Component wrapper for mathbox [`cartesian4`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#viewcartesian4).
+ */
+declare const Cartesian4: MathboxComponent<"cartesian4">;
+/**
+ * Component wrapper for mathbox [`clamp`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorclamp).
+ */
+declare const Clamp: MathboxComponent<"clamp">;
+/**
+ * Component wrapper for mathbox [`clock`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#timeclock).
+ */
+declare const Clock: MathboxComponent<"clock">;
+/**
+ * Component wrapper for mathbox [`compose`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#rttcompose).
+ */
+declare const Compose: MathboxComponent<"compose">;
+/**
+ * Component wrapper for mathbox [`dom`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#overlaydom).
+ */
+declare const Dom: MathboxComponent<"dom">;
+/**
+ * Component wrapper for mathbox [`face`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#drawface).
+ */
+declare const Face: MathboxComponent<"face">;
+/**
+ * Component wrapper for mathbox [`format`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#textformat).
+ */
+declare const Format: MathboxComponent<"format">;
+/**
+ * Component wrapper for mathbox [`fragment`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#transformfragment).
+ */
+declare const Fragment: MathboxComponent<"fragment">;
+/**
+ * Component wrapper for mathbox [`grid`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#drawgrid).
+ */
+declare const Grid: MathboxComponent<"grid">;
+/**
+ * Component wrapper for mathbox [`group`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#basegroup).
+ */
+declare const Group: MathboxComponent<"group">;
+/**
+ * Component wrapper for mathbox [`grow`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorgrow).
+ */
+declare const Grow: MathboxComponent<"grow">;
+/**
+ * Component wrapper for mathbox [`html`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#overlayhtml).
+ */
+declare const Html: MathboxComponent<"html">;
+/**
+ * Component wrapper for mathbox [`inherit`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#baseinherit).
+ */
+declare const Inherit: MathboxComponent<"inherit">;
+/**
+ * Component wrapper for mathbox [`interval`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#datainterval).
+ */
+declare const Interval: MathboxComponent<"interval">;
+/**
+ * Component wrapper for mathbox [`join`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorjoin).
+ */
+declare const Join: MathboxComponent<"join">;
+/**
+ * Component wrapper for mathbox [`label`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#textlabel).
+ */
+declare const Label: MathboxComponent<"label">;
+/**
+ * Component wrapper for mathbox [`layer`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#transformlayer).
+ */
+declare const Layer: MathboxComponent<"layer">;
+/**
+ * Component wrapper for mathbox [`lerp`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorlerp).
+ */
+declare const Lerp: MathboxComponent<"lerp">;
+/**
+ * Component wrapper for mathbox [`line`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#drawline).
+ */
+declare const Line: MathboxComponent<"line">;
+/**
+ * Component wrapper for mathbox [`mask`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#transformmask).
+ */
+declare const Mask: MathboxComponent<"mask">;
+/**
+ * Component wrapper for mathbox [`matrix`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#datamatrix).
+ */
+declare const Matrix: MathboxComponent<"matrix">;
+/**
+ * Component wrapper for mathbox [`memo`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatormemo).
+ */
+declare const Memo: MathboxComponent<"memo">;
+/**
+ * Component wrapper for mathbox [`move`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#presentmove).
+ */
+declare const Move: MathboxComponent<"move">;
+/**
+ * Component wrapper for mathbox [`now`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#timenow).
+ */
+declare const Now: MathboxComponent<"now">;
+/**
+ * Component wrapper for mathbox [`play`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#presentplay).
+ */
+declare const Play: MathboxComponent<"play">;
+/**
+ * Component wrapper for mathbox [`point`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#drawpoint).
+ */
+declare const Point: MathboxComponent<"point">;
+/**
+ * Component wrapper for mathbox [`polar`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#viewpolar).
+ */
+declare const Polar: MathboxComponent<"polar">;
+/**
+ * Component wrapper for mathbox [`present`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#presentpresent).
+ */
+declare const Present: MathboxComponent<"present">;
+/**
+ * Component wrapper for mathbox [`readback`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorreadback).
+ */
+declare const Readback: MathboxComponent<"readback">;
+/**
+ * Component wrapper for mathbox [`repeat`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorrepeat).
+ */
+declare const Repeat: MathboxComponent<"repeat">;
+/**
+ * Component wrapper for mathbox [`resample`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorresample).
+ */
+declare const Resample: MathboxComponent<"resample">;
+/**
+ * Component wrapper for mathbox [`retext`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#textretext).
+ */
+declare const Retext: MathboxComponent<"retext">;
+/**
+ * Component wrapper for mathbox [`reveal`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#presentreveal).
+ */
+declare const Reveal: MathboxComponent<"reveal">;
+/**
+ * Component wrapper for mathbox [`rtt`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#rttrtt).
+ */
+declare const Rtt: MathboxComponent<"rtt">;
+/**
+ * Component wrapper for mathbox [`scale`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#datascale).
+ */
+declare const Scale: MathboxComponent<"scale">;
+/**
+ * Component wrapper for mathbox [`shader`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#shadershader).
+ */
+declare const Shader: MathboxComponent<"shader">;
+/**
+ * Component wrapper for mathbox [`slice`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorslice).
+ */
+declare const Slice: MathboxComponent<"slice">;
+/**
+ * Component wrapper for mathbox [`slide`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#presentslide).
+ */
+declare const Slide: MathboxComponent<"slide">;
+/**
+ * Component wrapper for mathbox [`spherical`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#viewspherical).
+ */
+declare const Spherical: MathboxComponent<"spherical">;
+/**
+ * Component wrapper for mathbox [`split`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorsplit).
+ */
+declare const Split: MathboxComponent<"split">;
+/**
+ * Component wrapper for mathbox [`spread`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorspread).
+ */
+declare const Spread: MathboxComponent<"spread">;
+/**
+ * Component wrapper for mathbox [`step`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#presentstep).
+ */
+declare const Step: MathboxComponent<"step">;
+/**
+ * Component wrapper for mathbox [`stereographic`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#viewstereographic).
+ */
+declare const Stereographic: MathboxComponent<"stereographic">;
+/**
+ * Component wrapper for mathbox [`stereographic4`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#viewstereographic4).
+ */
+declare const Stereographic4: MathboxComponent<"stereographic4">;
+/**
+ * Component wrapper for mathbox [`strip`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#drawstrip).
+ */
+declare const Strip: MathboxComponent<"strip">;
+/**
+ * Component wrapper for mathbox [`subdivide`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorsubdivide).
+ */
+declare const Subdivide: MathboxComponent<"subdivide">;
+/**
+ * Component wrapper for mathbox [`surface`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#drawsurface).
+ */
+declare const Surface: MathboxComponent<"surface">;
+/**
+ * Component wrapper for mathbox [`swizzle`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatorswizzle).
+ */
+declare const Swizzle: MathboxComponent<"swizzle">;
+/**
+ * Component wrapper for mathbox [`text`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#texttext).
+ */
+declare const Text: MathboxComponent<"text">;
+/**
+ * Component wrapper for mathbox [`ticks`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#drawticks).
+ */
+declare const Ticks: MathboxComponent<"ticks">;
+/**
+ * Component wrapper for mathbox [`transform`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#transformtransform).
+ */
+declare const Transform: MathboxComponent<"transform">;
+/**
+ * Component wrapper for mathbox [`transform4`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#transformtransform4).
+ */
+declare const Transform4: MathboxComponent<"transform4">;
+/**
+ * Component wrapper for mathbox [`transpose`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#operatortranspose).
+ */
+declare const Transpose: MathboxComponent<"transpose">;
+/**
+ * Component wrapper for mathbox [`unit`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#baseunit).
+ */
+declare const Unit: MathboxComponent<"unit">;
+/**
+ * Component wrapper for mathbox [`vector`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#drawvector).
+ */
+declare const Vector: MathboxComponent<"vector">;
+/**
+ * Component wrapper for mathbox [`vertex`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#transformvertex).
+ */
+declare const Vertex: MathboxComponent<"vertex">;
+/**
+ * Component wrapper for mathbox [`view`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#viewview).
+ */
+declare const View: MathboxComponent<"view">;
+/**
+ * Component wrapper for mathbox [`volume`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#datavolume).
+ */
+declare const Volume: MathboxComponent<"volume">;
+/**
+ * Component wrapper for mathbox [`voxel`](https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#datavoxel).
+ */
+declare const Voxel: MathboxComponent<"voxel">;
+
+declare const _default: React.ForwardRefExoticComponent<Pick<{
+    options?: any;
+    initialCameraPosition?: number[] | undefined;
+} & React.HTMLProps<HTMLDivElement>, "label" | "step" | "value" | "children" | "data" | "width" | "height" | "type" | "id" | "style" | "color" | "span" | "size" | "start" | "loop" | "target" | "sizes" | "shape" | "cite" | "form" | "slot" | "summary" | "title" | "pattern" | "options" | "initialCameraPosition" | "list" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "src" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<MathboxSelection<"root">>>;
+
+export { Area, MBArray as Array, Axis, Camera, Cartesian, Cartesian4, Clamp, Clock, Compose, Dom, Face, Format, Fragment, Grid, Group, Grow, Html, Inherit, Interval, Join, Label, Layer, Lerp, Line, Mask, _default as Mathbox, Matrix, Memo, Move, Now, Play, Point, Polar, Present, Readback, Repeat, Resample, Retext, Reveal, Rtt, Scale, Shader, Slice, Slide, Spherical, Split, Spread, Step, Stereographic, Stereographic4, Strip, Subdivide, Surface, Swizzle, Text, Ticks, Transform, Transform4, Transpose, Unit, Vector, Vertex, View, Volume, Voxel };

package/jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  preset: "ts-jest",
+  transform: {
+    "^.+\\.(ts|tsx)?$": "ts-jest",
+    "^.+\\.(js|jsx)$": "babel-jest",
+  },
+  transformIgnorePatterns: [
+    "node_modules/(?!(mathbox|threestrap|three|shadergraph)/)",
+  ],
+  testEnvironment: "jsdom",
+  setupFiles: ["./src/testSetup.ts"],
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mathbox-react",
-  "version": "0.0.4",
+  "version": "0.0.5-dev",
   "description": "React wrapper for Mathbox",
   "license": "ISC",
   "author": "Chris Chudzicki",
@@ -11,11 +11,15 @@
     "build": "rm -rf build && rollup -c",
     "build-storybook": "build-storybook",
     "storybook": "start-storybook -p 6006",
-    "lint": "eslint \"src/**/*.{ts,tsx}\" --fix --max-warnings=0",
-    "prepublishOnly": "npm run lint && npm run build"
+    "lint": "eslint \"src/**/*.{ts,tsx}\" --max-warnings=0",
+    "format": "prettier src",
+    "autofix": "npm run format -- --write && npm run lint -- --fix",
+    "prepack": "npm run build",
+    "test": "jest"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
+    "@babel/preset-env": "^7.16.11",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-typescript": "^8.3.0",
@@ -25,8 +29,11 @@
     "@storybook/addon-links": "^6.4.19",
     "@storybook/react": "^6.4.19",
     "@storybook/testing-library": "^0.0.9",
+    "@testing-library/react": "^12.1.3",
+    "@types/jest": "^27.4.1",
     "@types/react": "^17.0.39",
     "@types/three": "^0.137.0",
+    "babel-jest": "^27.5.1",
     "babel-loader": "^8.2.3",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^16.1.0",
@@ -34,7 +41,8 @@
     "eslint-config-react-app": "^7.0.0",
     "eslint-import-resolver-typescript": "^2.5.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "mathbox": "^2.1.0",
+    "jest": "^27.5.1",
+    "mathbox": "2.1.2-dev",
     "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -43,11 +51,12 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
     "three": "^0.137.5",
+    "ts-jest": "^27.1.3",
     "typescript": "^4.5.5"
   },
   "peerDependencies": {
-    "mathbox": "^2.1.0",
+    "mathbox": "2.1.2-dev",
     "react": "^17.0.2",
-    "three": "^0.137.5"
+    "three": ">=0.118.0"
   }
 }

package/scratch.js

@@ -0,0 +1,149 @@
+const classDescriptions = {
+  axis: ["draw", "Draw an axis", {}, { end: "true", zBias: "-1" }],
+  face: ["draw", "Draw polygon faces"],
+  grid: ["draw", "Draw a 2D line grid", {}, { width: "1", zBias: "-2" }],
+  line: ["draw", "Draw lines"],
+  point: ["draw", "Draw points"],
+  strip: ["draw", "Draw triangle strips"],
+  surface: ["draw", "Draw surfaces", {}, { lineX: "false", lineY: "false" }],
+  ticks: ["draw", "Draw ticks"],
+  vector: ["draw", "Draw vectors"],
+
+  view: ["view", "Adjust view range"],
+  cartesian: ["view", "Apply cartesian view"],
+  cartesian4: ["view", "Apply 4D cartesian view"],
+  polar: ["view", "Apply polar view"],
+  spherical: ["view", "Apply spherical view"],
+  stereographic: ["view", "Apply stereographic projection"],
+  stereographic4: ["view", "Apply 4D stereographic projection"],
+
+  transform: ["transform", "Transform geometry in 3D"],
+  transform4: ["transform", "Transform geometry in 4D"],
+  vertex: ["transform", "Apply custom vertex shader pass"],
+  fragment: ["transform", "Apply custom fragment shader pass"],
+  layer: ["transform", "Independent 2D layer/overlay"],
+  mask: ["transform", "Apply custom mask pass"],
+
+  array: [
+    "data",
+    "1D array",
+    { expr: "function (emit, i, time, delta) { ... }" },
+  ],
+  interval: [
+    "data",
+    "1D sampled array",
+    { expr: "function (emit, x, i, time, delta) { ... }" },
+  ],
+  matrix: [
+    "data",
+    "2D matrix",
+    { expr: "function (emit, i, j, time, delta) { ... }" },
+  ],
+  area: [
+    "data",
+    "2D sampled matrix",
+    { expr: "function (emit, x, y, i, j, time, delta) { ... }" },
+  ],
+  voxel: [
+    "data",
+    "3D voxels",
+    { expr: "function (emit, i, j, k, time, delta) { ... }" },
+  ],
+  volume: [
+    "data",
+    "3D sampled voxels",
+    { expr: "function (emit, x, y, z, i, j, k, time, delta) { ... }" },
+  ],
+  scale: ["data", "Human-friendly divisions on an axis, subdivided as needed"],
+
+  html: ["overlay", "HTML element source"],
+  dom: ["overlay", "HTML DOM injector"],
+
+  text: [
+    "text",
+    "GL text source",
+    {},
+    { minFilter: '"linear"', magFilter: '"linear"' },
+  ],
+  format: [
+    "text",
+    "Text formatter",
+    { expr: "function (x, y, z, w, i, j, k, l, time, delta) { ... }" },
+    { minFilter: '"linear"', magFilter: '"linear"' },
+  ],
+  retext: ["text", "Text atlas resampler"],
+  label: ["text", "Draw GL labels"],
+
+  clamp: ["operator", "Clamp out-of-bounds samples to the nearest data point"],
+  grow: ["operator", "Scale data relative to reference data point"],
+  join: [
+    "operator",
+    "Join two array dimensions into one by concatenating rows/columns/stacks",
+  ],
+  lerp: ["operator", "Linear interpolation of data"],
+  memo: ["operator", "Memoize data to an array/texture"],
+  readback: [
+    "operator",
+    "Read data back to a binary JavaScript array",
+    { expr: "function (x, y, z, w, i, j, k, l) { ... }" },
+  ],
+  resample: ["operator", "Resample data to new dimensions with a shader"],
+  repeat: ["operator", "Repeat data in one or more dimensions"],
+  swizzle: ["operator", "Swizzle data values"],
+  spread: ["operator", "Spread data values according to array indices"],
+  split: [
+    "operator",
+    "Split one array dimension into two by splitting rows/columns/etc",
+  ],
+  slice: ["operator", "Select one or more rows/columns/stacks"],
+  subdivide: ["operator", "Subdivide data points evenly or with a bevel"],
+  transpose: ["operator", "Transpose array dimensions"],
+
+  group: ["base", "Group elements for visibility and activity"],
+  inherit: ["base", "Inherit and inject a trait from another element"],
+  root: ["base", "Tree root"],
+  unit: ["base", "Change unit sizing for drawing ops"],
+
+  shader: ["shader", "Custom shader snippet"],
+
+  camera: ["camera", "Camera instance or proxy"],
+
+  rtt: [
+    "rtt",
+    "Render objects to a texture",
+    {},
+    { minFilter: '"linear"', magFilter: '"linear"', type: '"unsignedByte"' },
+  ],
+  compose: [
+    "rtt",
+    "Full-screen render pass",
+    {},
+    { zWrite: "false", zTest: "false", color: '"white"' },
+  ],
+
+  clock: ["time", "Relative clock that starts from zero."],
+  now: ["time", "Absolute UNIX time in seconds since 01/01/1970"],
+
+  move: ["present", "Move elements in/out on transition"],
+  play: ["present", "Play a sequenced animation"],
+  present: ["present", "Present a tree of slides"],
+  reveal: ["present", "Reveal/hide elements on transition"],
+  slide: ["present", "Presentation slide"],
+  step: ["present", "Step through a sequenced animation"],
+}
+
+const capitalize = (s) => `${s[0].toUpperCase()}${s.slice(1)}`
+
+const makeDef = (name) => {
+  const [group] = classDescriptions[name]
+  const Name = capitalize(name)
+  const dest = `https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#${group}${name}`
+  const def = `
+/**
+ * Component wrapper for mathbox [\`${name}\`](${dest}).
+ */
+export const ${Name} = mathboxComponentFactory('${name}');`
+  console.log(def)
+}
+
+Object.keys(classDescriptions).sort().forEach(makeDef)

package/src/components/Cartesian.spec.tsx

@@ -0,0 +1,101 @@
+import React from "react"
+import { render } from "@testing-library/react"
+import Mathbox from "./Mathbox"
+import { Cartesian, Grid } from "./components"
+import { MathboxRef } from "./types"
+
+function assertNotUndefined<T>(value: T | undefined): asserts value is T {
+  if (value === undefined) {
+    throw new Error("Unexpected undefined value")
+  }
+}
+
+describe("Cartesian", () => {
+  it("exposes Mathbox instance via ref", () => {
+    const mbRef: MathboxRef<"root"> = { current: null }
+    const cartesianRef: MathboxRef<"cartesian"> = { current: null }
+    render(
+      <Mathbox ref={mbRef}>
+        <Cartesian ref={cartesianRef} />
+      </Mathbox>
+    )
+
+    expect(mbRef.current?.[0].type).toBe("root")
+    expect(cartesianRef.current?.[0].type).toBe("cartesian")
+  })
+
+  it("creates a cartesian instance as child of root", () => {
+    const mbRef: MathboxRef<"root"> = { current: null }
+    render(
+      <Mathbox ref={mbRef}>
+        <Cartesian />
+      </Mathbox>
+    )
+    expect(mbRef.current?.select("cartesian").length).toBe(1)
+  })
+
+  it("creates mathbox children as children of itself", () => {
+    const mbRef: MathboxRef<"root"> = { current: null }
+    render(
+      <Mathbox ref={mbRef}>
+        <Cartesian>
+          <Grid />
+          <Grid />
+        </Cartesian>
+      </Mathbox>
+    )
+    mbRef.current?.print()
+    expect(mbRef.current?.select("cartesian").length).toBe(1)
+    expect(mbRef.current?.select("cartesian grid").length).toBe(2)
+  })
+
+  it("removes its mathbox instance when unmounted", () => {
+    const mbRef: MathboxRef<"root"> = { current: null }
+    const { rerender } = render(
+      <Mathbox ref={mbRef}>
+        <Cartesian />
+      </Mathbox>
+    )
+    expect(mbRef.current?.select("cartesian").length).toBe(1)
+    rerender(<Mathbox ref={mbRef} />)
+    expect(mbRef.current?.select("cartesian").length).toBe(0)
+  })
+
+  it.each([
+    { props: { visible: true, scale: [3, 2, 1] } },
+    { props: { visible: false, scale: [1, 2, 3] } },
+  ])("passes appropriate props to its mathbox instance", ({ props }) => {
+    const mbRef: MathboxRef<"root"> = { current: null }
+    render(
+      <Mathbox ref={mbRef}>
+        <Cartesian {...props} />
+      </Mathbox>
+    )
+    const cartesian = mbRef.current?.select<"cartesian">("cartesian")
+
+    assertNotUndefined(cartesian)
+
+    expect(cartesian.get("visible")).toBe(props.visible)
+    // Mathbox converts scale to a ThreeJS Vec3
+    expect(cartesian.get("scale").toArray()).toStrictEqual(props.scale)
+  })
+
+  it("updates props on its mathbox instance when rerendered", () => {
+    const mbRef: MathboxRef<"root"> = { current: null }
+    const { rerender } = render(
+      <Mathbox ref={mbRef}>
+        <Cartesian />
+      </Mathbox>
+    )
+    const cartesian = mbRef.current?.select<"cartesian">("cartesian")
+    assertNotUndefined(cartesian)
+
+    expect(cartesian.get("visible")).toBe(true)
+    rerender(
+      <Mathbox ref={mbRef}>
+        <Cartesian visible={false} />
+      </Mathbox>
+    )
+    expect(cartesian.get("visible")).toBe(false)
+  })
+})