React2Shell Vulnerability Update

Author: alecjessen

package-lock.json

@@ -1,27 +1,65 @@
 {
   "name": "r3dy",
   "private": false,
-  "version": "1.1.0",
-  "main": "dist/index.js",
+  "version": "1.2.0",
+  "type": "module",
+  "main": "./dist/r3dy.umd.cjs",
+  "module": "./dist/r3dy.js",
+  "exports": {
+    ".": {
+      "import": "./dist/r3dy.js",
+      "require": "./dist/r3dy.umd.cjs"
+    }
+  },
   "scripts": {
     "dev": "vite",
-    "prebuild": "rimraf dist",
-    "build": "vite build && tsc",
+    "build": "tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "jest",
+    "prepublishOnly": "npm run build"
   },
-  "license": "MIT",
-  "author": "Alec Jessen, Garrett Woo, Bryan Trang, Nick King, Corso Rosati",
-  "keywords": ["3D, Component Library, React"],
   "dependencies": {
-    "@react-spring/three": "^9.7.3",
-    "@react-three/drei": "^9.77.7",
-    "@react-three/fiber": "^8.13.4",
+    "@babel/plugin-syntax-jsx": "^7.22.5",
+    "@babel/preset-env": "^7.22.7",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@react-spring/three": "^10.0.3",
+    "@react-three/fiber": "^9.0.0-rc.10",
+    "@react-three/drei": "^9.121.2-canary-test01.1",
+    "@testing-library/jest-dom": "^5.16.5",
     "@use-gesture/react": "^10.2.27",
-    "three": "^0.154.0"
+    "@vitejs/plugin-react": "^4.0.3",
+    "babel-jest": "^29.6.1",
+    "core-js": "^3.31.1",
+    "jest-environment-jsdom": "^29.6.1",
+    "leva": "^0.9.35",
+    "react": "^19.0.0-rc",
+    "react-dom": "^19.0.0-rc",
+    "resize-observer-polyfill": "^1.5.1",
+    "three": "^0.170.0",
+    "ts-jest": "^29.1.1"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": ">=18.0",
+    "react-dom": ">=18.0",
+    "@react-three/fiber": ">=8.0"
+  },
+  "devDependencies": {
+    "@react-three/test-renderer": "^8.1.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/three": "^0.170.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@vitejs/plugin-react-swc": "^3.0.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.3.4",
+    "jest": "^29.6.1",
+    "r3f-perf": "^7.1.2",
+    "typescript": "^5.0.2",
+    "vite": "^4.3.9"
   }
 }

package.json

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+type ButtonProps = {
+    scale?: number;
+    color?: string;
+    activeColor?: string;
+    font?: string;
+    text?: string;
+    fontSize?: number;
+    fontColor?: string;
+    handleClick?: any;
+    position?: [number, number, number];
+};
+export default function Button(props: ButtonProps): ReactElement;
+export {};

src/components/Button.d.ts

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import { RoundedBox, Text } from "@react-three/drei";
+import { useSpring, animated, config } from '@react-spring/three';
+export default function Button(props) {
+    const buttonRef = useRef();
+    const [hover, setHover] = useState(false);
+    const position = props.position || [0, 0, 0];
+    const scale = props.scale || 2;
+    const color = props.color || '#3F37C9';
+    const activeColor = props.activeColor || '#272275';
+    const text = props.text || 'BUTTON';
+    const fontSize = props.fontSize || .5;
+    const fontColor = props.fontColor || '#ffffff';
+    const handleClick = props.handleClick || undefined;
+    const font = props.font || undefined;
+    const buttonWidth = text.length * fontSize * 1.1;
+    const buttonHeight = fontSize * 2.7;
+    const { rotationY, rotationX } = useSpring({
+        rotationX: hover ? -0.15 : 0,
+        rotationY: hover ? -0.25 : 0,
+        config: config.wobbly,
+    });
+    if (buttonRef.current) {
+        buttonRef.current.position.x = position[0];
+        buttonRef.current.position.y = position[1];
+        buttonRef.current.position.z = position[2];
+    }
+    return _jsx(_Fragment, { children: _jsxs("group", { ref: buttonRef, children: [_jsx("ambientLight", { intensity: 1 }), _jsxs(animated.group, { scale: scale, onPointerDown: () => setHover(true), onPointerUp: () => setHover(false), onClick: handleClick, "rotation-y": rotationY, "rotation-x": rotationX, children: [_jsx("mesh", { children: _jsx(RoundedBox, { args: [buttonWidth, buttonHeight, .5], radius: .2, children: _jsx("meshStandardMaterial", { color: hover ? activeColor : color }) }) }), _jsxs(Text, { font: font, fontSize: fontSize, color: fontColor, "position-z": .3, children: [_jsx("meshBasicMaterial", { toneMapped: false }), text] })] })] }) });
+}

src/components/Button.js

@@ -0,0 +1,16 @@
+type LoaderProps = {
+    color?: string;
+    scale?: number;
+    rotationAxis?: 'y' | 'x' | 'z';
+    rotationDirection?: 'positive' | 'negative';
+    easeAnimation?: boolean;
+    speed?: number;
+    theme?: 'dark' | 'light';
+    material?: any;
+    wireframe?: boolean;
+    matcapIndex?: number;
+    matcapSize?: 64 | 128 | 256 | 512 | 1024;
+    position?: [number, number, number];
+};
+export default function ChipLoader(props: LoaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

src/components/ChipLoader.d.ts

@@ -0,0 +1,10 @@
+type SwitchProps = {
+    color?: string;
+    size?: number;
+    callback?: any;
+    positionX?: number;
+    positionY?: number;
+    positionZ?: number;
+};
+export default function FlickSwitch({ color, size, callback, positionX, positionY, positionZ }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export {};

src/components/ChipLoader.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { useSpring, animated } from '@react-spring/three';
+import { MeshStandardMaterial } from 'three';
+export default function FlickSwitch({ color, size, callback, positionX, positionY, positionZ }) {
+    const [active, setActive] = useState(false);
+    const cube = useRef(null);
+    const group = useRef(null);
+    const metallicMaterial = new MeshStandardMaterial({
+        color: color ? color : 'silver',
+        metalness: 1,
+        roughness: .41,
+    });
+    const metallicMaterial2 = new MeshStandardMaterial({
+        color: color ? color : 'silver',
+        metalness: 1,
+        roughness: .2,
+    });
+    const animation = useSpring({
+        'rotation-x': active ? Math.PI / 5 : -Math.PI / 5,
+        config: { tension: 900, friction: 45 }
+    });
+    function clicked() {
+        if (callback) {
+            setActive(!active);
+            if (!active) {
+                callback();
+            }
+        }
+        if (!callback) {
+            setActive(!active);
+        }
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("ambientLight", { intensity: 1 }), _jsx("directionalLight", { castShadow: true, position: [2, 8, 5], intensity: 1, "shadow-mapSize": 1024 }), _jsx("directionalLight", { castShadow: true, position: [-5, 5, 2], intensity: 1, "shadow-mapSize": 1024 }), _jsx("directionalLight", { castShadow: true, position: [5, -5, 2], intensity: 1 }), _jsxs(animated.group, { ref: group, "rotation-x": animation['rotation-x'], "position-z": positionZ ? positionZ - .2 : -.2, "position-x": positionX ? positionX : 0, "position-y": positionY ? positionY : 0, scale: size ? size : 1, children: [_jsx(animated.mesh, { onClick: clicked, ref: cube, rotation: [Math.PI / 2, 0, Math.PI], position: [0, 0, 1.5], material: metallicMaterial, receiveShadow: true, castShadow: true, children: _jsx("capsuleGeometry", { args: [.35, 2.75, 7, 40] }) }), _jsx(animated.mesh, { rotation: [Math.PI / 2, 0, Math.PI], position: [0, 0, 1.5], material: metallicMaterial, receiveShadow: true, castShadow: true, children: _jsx("cylinderGeometry", { args: [.35, .357, 3, 40] }) }), _jsx(animated.mesh, { material: metallicMaterial, receiveShadow: true, castShadow: true, children: _jsx("sphereGeometry", { args: [.65, 32, 32] }) })] }), _jsx("mesh", { material: metallicMaterial, scale: size ? size : 1, receiveShadow: true, castShadow: true, "position-z": positionZ ? positionZ : 0, "position-x": positionX ? positionX : 0, "position-y": positionY ? positionY : 0, children: _jsx("torusGeometry", { args: [1.1, .4, 4, 200] }) }), _jsxs("mesh", { scale: size ? size * 2 : 2, "position-z": positionZ ? positionZ + .01 : .01, "position-x": positionX ? positionX : 0, "position-y": positionY ? positionY : 0, material: metallicMaterial2, children: [_jsx("planeGeometry", {}), _jsx("meshBasicMaterial", { color: 'grey' })] })] }));
+}

src/components/FlickSwitch.d.ts

@@ -0,0 +1,16 @@
+type LoaderProps = {
+    color?: string;
+    scale?: number;
+    rotationAxis?: 'y' | 'x' | 'z';
+    rotationDirection?: 'positive' | 'negative';
+    easeAnimation?: boolean;
+    speed?: number;
+    theme?: 'dark' | 'light';
+    material?: any;
+    wireframe?: boolean;
+    matcapIndex?: number;
+    matcapSize?: 64 | 128 | 256 | 512 | 1024;
+    position?: [number, number, number];
+};
+export default function HexagonLoader(props: LoaderProps): import("react/jsx-runtime").JSX.Element;
+export {};