mathbox-react 0.0.1 → 0.0.2

package/.eslintrc.js

@@ -0,0 +1,71 @@
+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.*"],
+      },
+    ],
+    "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",
+      {
+        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/workflows/lint.yaml

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

package/.storybook/main.js

@@ -0,0 +1,9 @@
+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

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

package/LICENSE

@@ -0,0 +1,29 @@
+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/package.json

@@ -1,11 +1,51 @@
 {
   "name": "mathbox-react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React wrapper for Mathbox",
-  "main": "index.js",
+  "license": "ISC",
+  "author": "Chris Chudzicki",
+  "main": "build/cjs/index.js",
+  "module": "build/esm/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "rollup -c",
+    "build-storybook": "build-storybook",
+    "storybook": "start-storybook -p 6006",
+    "lint": "eslint \"src/**/*.{ts,tsx}\" --fix --max-warnings=0"
   },
-  "author": "Chris Chudzicki",
-  "license": "ISC"
+  "devDependencies": {
+    "@babel/core": "^7.17.5",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-interactions": "^6.4.19",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@storybook/testing-library": "^0.0.9",
+    "@types/react": "^17.0.39",
+    "@types/three": "^0.137.0",
+    "babel-loader": "^8.2.3",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^16.1.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-react-app": "^7.0.0",
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "mathbox": "^2.1.0",
+    "prettier": "^2.5.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rollup": "^2.67.3",
+    "rollup-plugin-dts": "^4.1.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-terser": "^7.0.2",
+    "three": "^0.137.5",
+    "typescript": "^4.5.5"
+  },
+  "peerDependencies": {
+    "mathbox": "^2.1.0",
+    "react": "^17.0.2",
+    "three": "^0.137.5"
+  }
 }

package/rollup.config.js

@@ -0,0 +1,38 @@
+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/types/index.d.ts",
+    output: [{ file: "build/index.d.ts", format: "esm" }],
+    plugins: [dts()],
+  },
+];

package/src/components/Mathbox.stories.tsx

@@ -0,0 +1,28 @@
+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/components/Mathbox.tsx

@@ -0,0 +1,41 @@
+import { useEffect } from 'react'
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import { Color } from "three/src/math/Color";
+import * as MB from 'mathbox'
+
+type Props = {
+  element: HTMLElement
+}
+
+const Mathbox = (props: Props) => {
+  useEffect(() => {
+    const mathbox = MB.mathBox({
+      plugins: ["core", "controls", "cursor"],
+      controls: {
+        klass: OrbitControls,
+      },
+      element: props.element,
+    });
+
+    mathbox.three.camera.position.set(1, 1, 2);
+    mathbox.three.renderer.setClearColor(new Color(0xffffff), 1.0);
+
+    const view = mathbox.cartesian({
+      range: [
+        [-2, 2],
+        [-1, 1],
+        [-1, 1],
+      ],
+      scale: [2, 1, 1],
+    });
+    view.grid({
+      divideX: 20,
+      width: 5,
+      opacity: 0.3,
+    });
+
+  }, [props.element])
+  return null
+}
+
+export default Mathbox

package/src/index.ts

@@ -0,0 +1,3 @@
+import Mathbox from "./components/Mathbox";
+
+export { Mathbox };

package/src/types.d.ts

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

package/tsconfig.base.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react",
+    "module": "ESNext",
+    "declaration": true,
+    "declarationDir": "types",
+    "sourceMap": true,
+    "outDir": "build",
+    "moduleResolution": "node",
+    "emitDeclarationOnly": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "exclude": ["dist", "node_modules"]
+}

package/tsconfig.json

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