mathbox-react 0.0.4 → 0.0.5-dev

package/src/stories/Point.stories.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from "react"
+import { Story, Meta } from "@storybook/react"
+import { MathboxSelection } from "mathbox"
+import { CustomMathbox as Mathbox } from "./utils"
+import { Cartesian, Grid, Point, Array as MBArray } from "../components"
+
+export default {
+  title: "Point",
+  component: Point,
+  argTypes: {
+    color: {
+      type: "string",
+      default: "rgb(128, 128, 128)",
+    },
+    opacity: {
+      type: "number",
+      default: 1,
+    },
+    points: {
+      type: "array",
+      default: [[1, 1, 1]],
+    },
+    size: {
+      type: "number",
+      default: 4,
+    },
+  },
+} as Meta<typeof Grid>
+
+const Template: Story<React.ComponentProps<typeof Point>> = (args) => {
+  const { points, ...otherArgs } = args
+  const [data, setData] = useState<MathboxSelection<"array">>()
+  return (
+    <Mathbox style={{ height: 450 }}>
+      <Cartesian
+        range={[
+          [-5, 5],
+          [-5, 5],
+          [-5, 5],
+        ]}
+      >
+        <Grid axes="xy" />
+        <Grid axes="xz" />
+        <MBArray
+          ref={setData}
+          items={1}
+          channels={3}
+          data={[
+            [1, 1, 2],
+            [1, 1, 3],
+          ]}
+        />
+        <MBArray
+          items={1}
+          channels={3}
+          data={[
+            [1, 1, -2],
+            [1, 1, -3],
+          ]}
+        />
+        <Point points={data} {...otherArgs} />
+      </Cartesian>
+    </Mathbox>
+  )
+}
+
+export const DefaultPoint = Template.bind({})
+DefaultPoint.args = {}

package/src/stories/utils.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef, useMemo } from "react"
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
+import { Mathbox } from "../components"
+
+type MathboxProps = React.ComponentProps<typeof Mathbox>
+type MathboxRef = React.ComponentRef<typeof Mathbox>
+
+const storybookDefaultMathboxOptions = {
+  plugins: ["core", "controls", "cursor"],
+  controls: {
+    klass: OrbitControls,
+  },
+}
+
+const CustomMathboxF = (props: MathboxProps, ref: React.Ref<MathboxRef>) => {
+  const { options: overrides, ...divProps } = props
+  const options = useMemo(
+    () => ({
+      ...storybookDefaultMathboxOptions,
+      ...(props.options ?? {}),
+    }),
+    [props.options]
+  )
+  return (
+    <Mathbox options={options} {...divProps} ref={ref}>
+      {props.children}
+    </Mathbox>
+  )
+}
+
+export const CustomMathbox = forwardRef(CustomMathboxF)

package/src/testSetup.ts

@@ -0,0 +1,3 @@
+import { getMockContext } from "./testUtils"
+
+HTMLCanvasElement.prototype.getContext = getMockContext

package/src/testUtils.ts

@@ -0,0 +1,46 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Automock = any
+
+/**
+ * A mock that uses proxies to create properties as they are accessed. Supports
+ * function calls and toPrimitive.
+ *
+ * @param specifics Allows specifying specific values for properties. If a prop
+ *  exists on `specifics`, then that value will be used when the property is
+ * accessed on automock.
+ * @returns
+ */
+const getAutomock = <T extends Record<string | symbol, unknown>>(
+  specifics?: T
+): Automock => {
+  const autmockSeed = jest.fn()
+  const handler = {
+    get(target: Automock, prop: string | symbol) {
+      if (prop === Symbol.toPrimitive) {
+        return () => `Automock: ${JSON.stringify(specifics)}`
+      }
+      if (specifics && Reflect.has(specifics, prop)) {
+        const value = Reflect.get(specifics, prop)
+        return value
+      }
+      if (!Reflect.has(target, prop)) {
+        Reflect.set(target, prop, getAutomock())
+      }
+      return Reflect.get(target, prop)
+    },
+    apply() {
+      return getAutomock()
+    },
+  }
+  return new Proxy(autmockSeed, handler)
+}
+
+export const getMockContext = () => {
+  const mockContext = getAutomock({
+    getParameter: jest.fn((name) => {
+      if (name === mockContext.VERSION) return "Fake version!"
+      return getAutomock()
+    }),
+  })
+  return mockContext
+}

package/tsconfig.base.json

@@ -2,7 +2,6 @@
   "compilerOptions": {
     "esModuleInterop": true,
     "strict": true,
-    "skipLibCheck": true,
     "jsx": "react",
     "module": "ESNext",
     "declaration": true,

package/tsconfig.json

@@ -1,4 +1,5 @@
 {
   "extends": "./tsconfig.base.json",
+  "include": ["src/"],
   "exclude": ["src/**/*.test.tsx", "src/**/*.stories.tsx"]
 }

package/src/components/Mathbox.stories.tsx

@@ -1,28 +0,0 @@
-import React, { useRef, useState, useEffect } from 'react';
-import { Story, Meta } from '@storybook/react';
-
-import Mathbox from './Mathbox';
-
-export default {
-  title: 'Mathbox',
-  component: Mathbox,
-  argTypes: {
-  },
-} as Meta<typeof Mathbox>;
-
-const Template: Story<React.ComponentProps<typeof Mathbox>> = () => {
-  const container = useRef<HTMLDivElement>(null);
-  const [_isMounted, setIsMounted] = useState(false)
-  useEffect(() => {
-    setIsMounted(true)
-    return () => setIsMounted(false)
-  }, [])
-  return (
-    <div ref={container} style={{ height: 450 }}>
-      {container.current &&
-        <Mathbox element={container.current} />}
-    </div>
-  )
-};
-
-export const HelloWorld = Template.bind({});

package/src/types.d.ts

@@ -1,4 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-declare module "mathbox" {
-  export const mathBox: any;
-}