mathbox-react 0.0.11-rc → 0.0.13

package/build/index.d.ts

@@ -1,17 +1,17 @@
 import React, { ReactNode } from 'react';
 import { NodeType, Props, MathboxSelection, RootProps } from 'mathbox';
 
-declare type WithChildren<T> = {
+type WithChildren<T> = {
     children?: ReactNode | ReactNode[];
 } & T;
 
 declare const CAN_HAVE_CHILDREN: readonly ["view", "cartesian", "cartesian4", "polar", "spherical", "stereographic", "stereographic4", "transform", "transform4", "vertex", "fragment", "layer", "mask", "group", "inherit", "root", "unit", "rtt", "clock", "now", "move", "present", "reveal", "slide"];
-declare type ParentNodeTypes = typeof CAN_HAVE_CHILDREN[number];
+type ParentNodeTypes = typeof CAN_HAVE_CHILDREN[number];
 
-declare type LiveProps<P> = {
+type LiveProps<P> = {
     [K in keyof P]: (t: number, dt: number) => P[K];
 };
-declare type MathboxComponent<T extends NodeType> = React.ForwardRefExoticComponent<(T extends ParentNodeTypes ? WithChildren<Props[T]> : Props[T]) & React.RefAttributes<MathboxSelection<T>> & {
+type MathboxComponent<T extends NodeType> = React.ForwardRefExoticComponent<(T extends ParentNodeTypes ? WithChildren<Props[T]> : Props[T]) & React.RefAttributes<MathboxSelection<T>> & {
     liveProps?: LiveProps<Props[T]>;
 }>;
 /**

package/package.json

@@ -1,20 +1,23 @@
 {
   "name": "mathbox-react",
-  "version": "0.0.11-rc",
+  "version": "0.0.13",
   "description": "React wrapper for Mathbox",
   "license": "ISC",
   "author": "Chris Chudzicki",
   "main": "build/cjs/index.js",
   "module": "build/esm/index.js",
-  "types": "build/esm/types",
+  "types": "build/index.d.ts",
+  "files": [
+    "build"
+  ],
   "scripts": {
-    "build": "rm -rf build && rollup -c",
-    "build-storybook": "build-storybook",
+    "build": "rm -rf build && rollup --config",
+    "build-watch": "rollup --config --watch",
     "storybook": "start-storybook -p 6006",
-    "lint": "eslint \"src/**/*.{ts,tsx}\" --max-warnings=0",
-    "format": "prettier src",
-    "autofix": "npm run format -- --write && npm run lint -- --fix",
-    "prepack": "npm run build",
+    "lint": "yarn global:lint",
+    "format": "yarn global:format",
+    "autofix": "yarn global:autofix",
+    "prepack": "yarn build",
     "test": "jest"
   },
   "devDependencies": {
@@ -36,15 +39,8 @@
     "@types/three": "0.140.0",
     "babel-jest": "27.5.1",
     "babel-loader": "8.2.5",
-    "eslint-config-airbnb": "19.0.4",
-    "eslint-config-airbnb-typescript": "17.0.0",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-config-react-app": "7.0.1",
-    "eslint-import-resolver-typescript": "3.5.1",
-    "eslint-plugin-prettier": "4.2.1",
     "jest": "27.5.1",
     "mathbox": "2.2.1",
-    "prettier": "2.7.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "rollup": "2.79.1",
@@ -52,8 +48,7 @@
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-terser": "7.0.2",
     "three": "0.140.0",
-    "ts-jest": "27.1.5",
-    "typescript": "4.8.4"
+    "ts-jest": "27.1.5"
   },
   "peerDependencies": {
     "mathbox": "^2.2.1",

package/.eslintrc.js

@@ -1,72 +0,0 @@
-module.exports = {
-  extends: [
-    "react-app",
-    "react-app/jest",
-    "airbnb",
-    "airbnb-typescript",
-    "prettier",
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-  ],
-  plugins: ["react", "@typescript-eslint", "prettier"],
-  rules: {
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        devDependencies: ["**/*.stories.*", "**/*.spec.*"],
-      },
-    ],
-    "import/prefer-default-export": "off",
-    "max-classes-per-file": "off",
-    "react/destructuring-assignment": "off",
-    "react/function-component-definition": [
-      "error",
-      {
-        namedComponents: "arrow-function",
-        unnamedComponents: "arrow-function",
-      },
-    ],
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      {
-        ignoreRestSiblings: true,
-        argsIgnorePattern: "^_",
-        varsIgnorePattern: "^_",
-        caughtErrorsIgnorePattern: "^_",
-      },
-    ],
-    "@typescript-eslint/naming-convention": [
-      "error",
-      {
-        selector: "variable",
-        format: ["camelCase", "PascalCase", "UPPER_CASE"],
-        filter: {
-          regex: "^_",
-          match: false,
-        },
-      },
-    ],
-  },
-  settings: {},
-  overrides: [
-    {
-      files: ["**/*.ts?(x)"],
-      rules: {
-        "react/prop-types": "off",
-        "react/require-default-props": "off",
-        "react/jsx-props-no-spreading": "off",
-      },
-    },
-    {
-      files: ["**/*.stories.*"],
-      rules: {
-        "import/no-anonymous-default-export": "off",
-      },
-    },
-  ],
-  parserOptions: {
-    project: "./tsconfig.base.json",
-  },
-}

package/.github/renovate.json

@@ -1,13 +0,0 @@
-{
-  "extends": [
-    "config:base"
-  ],
-  "labels": ["dependencies"], 
-  "packageRules": [
-    {
-      "matchDepTypes": ["devDependencies"],
-      "automerge": true,
-      "automergeType": "branch"
-    }
-  ]
-}

package/.github/workflows/lint.yaml

@@ -1,20 +0,0 @@
-name: tests
-
-on:
-  pull_request:
-    branches: [main]
-
-jobs:
-  linting_and_tests:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: "16"
-          cache: "npm"
-          cache-dependency-path: package-lock.json
-      - run: npm ci
-      - run: npm run format
-      - run: npm run lint
-      - run: npm run test

package/.prettierrc

@@ -1 +0,0 @@
-semi: false

package/.storybook/main.js

@@ -1,9 +0,0 @@
-module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
-  framework: "@storybook/react",
-};

package/.storybook/preview.js

@@ -1,11 +0,0 @@
-import "mathbox/build/mathbox.css";
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};

package/LICENSE

@@ -1,29 +0,0 @@
-BSD 3-Clause License
-
-Copyright (c) 2022, Chris Chudzicki
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are met:
-
-1. Redistributions of source code must retain the above copyright notice, this
-   list of conditions and the following disclaimer.
-
-2. Redistributions in binary form must reproduce the above copyright notice,
-   this list of conditions and the following disclaimer in the documentation
-   and/or other materials provided with the distribution.
-
-3. Neither the name of the copyright holder nor the names of its
-   contributors may be used to endorse or promote products derived from
-   this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
-AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
-FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
-DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
-SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
-CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
-OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -1,6 +0,0 @@
-To run the example, clone this repo and:
-```
-cd example
-npm install
-npm run start
-```

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: [["@babel/preset-env", { targets: { node: "current" } }]],
-}

package/build/cjs/components/components.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/build/cjs/stories/utils.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-import { ContainedMathbox } from "../components";
-declare type MathboxProps = React.ComponentProps<typeof ContainedMathbox>;
-export declare const CustomMathbox: (props: MathboxProps) => JSX.Element;
-export {};

package/build/esm/components/components.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/build/esm/stories/utils.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-import { ContainedMathbox } from "../components";
-declare type MathboxProps = React.ComponentProps<typeof ContainedMathbox>;
-export declare const CustomMathbox: (props: MathboxProps) => JSX.Element;
-export {};

package/jest.config.js

@@ -1,12 +0,0 @@
-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/rollup.config.js

@@ -1,38 +0,0 @@
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import typescript from "@rollup/plugin-typescript";
-import dts from "rollup-plugin-dts";
-import { terser } from "rollup-plugin-terser";
-import peerDepsExternal from "rollup-plugin-peer-deps-external";
-import packageJson from "./package.json";
-
-export default [
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        file: packageJson.main,
-        format: "cjs",
-        sourcemap: true,
-      },
-      {
-        file: packageJson.module,
-        format: "esm",
-        sourcemap: true,
-      },
-    ],
-    plugins: [
-      peerDepsExternal(),
-      resolve(),
-      commonjs(),
-      typescript({ tsconfig: "./tsconfig.json" }),
-      terser(),
-    ],
-    external: ["react", "react-dom", "styled-components"],
-  },
-  {
-    input: "build/esm/index.d.ts",
-    output: [{ file: "build/index.d.ts", format: "esm" }],
-    plugins: [dts()],
-  },
-];

package/src/components/ContainedMathbox.tsx

@@ -1,38 +0,0 @@
-import React, { useState, forwardRef } from "react"
-import { RootProps, MathBoxOptions, MathboxSelection } from "mathbox"
-import Mathbox from "./Mathbox"
-import { WithChildren } from "./types"
-
-type Props = WithChildren<
-  {
-    containerId?: string
-    containerClass?: string
-    containerStyle?: React.CSSProperties
-    options?: MathBoxOptions
-  } & RootProps
->
-
-const ContainedMathbox = (
-  props: Props,
-  ref: React.Ref<MathboxSelection<"root">>
-) => {
-  const { children, containerId, containerClass, containerStyle, ...others } =
-    props
-  const [container, setContainer] = useState<HTMLDivElement | null>(null)
-  return (
-    <div
-      ref={setContainer}
-      id={containerId}
-      className={containerClass}
-      style={containerStyle}
-    >
-      {container && (
-        <Mathbox ref={ref} container={container} {...others}>
-          {children}
-        </Mathbox>
-      )}
-    </div>
-  )
-}
-
-export default forwardRef(ContainedMathbox)

package/src/components/Mathbox.tsx

@@ -1,63 +0,0 @@
-import React, {
-  useEffect,
-  useState,
-  forwardRef,
-  useImperativeHandle,
-} from "react"
-import { Color } from "three"
-import { mathBox, RootProps, MathboxSelection, MathBoxOptions } from "mathbox"
-import MathboxAPIContext from "./MathboxNodeContext"
-import { WithChildren } from "./types"
-import { useDeepCompareMemo } from "./util"
-
-type Props = WithChildren<
-  {
-    container: HTMLElement
-    options?: MathBoxOptions
-  } & RootProps
->
-
-const Mathbox = (
-  props: Props,
-  ref: React.Ref<MathboxSelection<"root"> | null>
-) => {
-  const { container, children, options, ...rootProps } = props
-  const mathboxOptions = useDeepCompareMemo(options ?? {}, {})
-  const [selection, setSelection] = useState<MathboxSelection<"root"> | null>(
-    null
-  )
-  useEffect(() => {
-    if (!container) return () => {}
-
-    const mathbox = mathBox({
-      ...mathboxOptions,
-      element: container,
-    })
-    setSelection(mathbox)
-
-    /**
-     * TODO: Should Mathbox component allow setting these more easily?
-     */
-    mathbox.three.renderer.setClearColor(new Color(0xffffff), 1.0)
-    mathbox.three.camera.position.set(1, 1, 2)
-    return () => {
-      mathbox.select("*").remove()
-      mathbox.three.destroy()
-      setSelection(null)
-    }
-  }, [container, mathboxOptions])
-
-  useEffect(() => {
-    if (!selection) return
-    selection.set(rootProps)
-  }, [selection, rootProps])
-
-  useImperativeHandle(ref, () => selection, [selection])
-  return (
-    <MathboxAPIContext.Provider value={selection}>
-      {children}
-    </MathboxAPIContext.Provider>
-  )
-}
-
-export default forwardRef(Mathbox)

package/src/components/MathboxNodeContext.ts

@@ -1,6 +0,0 @@
-import { createContext } from "react"
-import { MathboxSelection, NodeType } from "mathbox"
-
-const MathboxAPIContext = createContext<MathboxSelection<NodeType> | null>(null)
-
-export default MathboxAPIContext