@wandelbots/wandelbots-js-react-components 1.3.0 → 1.3.2

package/README.md

@@ -26,10 +26,6 @@ import { WandelscriptEditor, ... } from '@wandelbots/wandelbots-js-react-compone
         <ul>
           <li><a href="#wandelscripteditor">WandelscriptEditor</a></li>
         </ul>
-        <li><a href="#materialui">Material UI</a></li>
-        <ul>
-          <li><a href="#defaulttheme">getDefaultThemeOptionsForMui</a></li>
-        </ul>
         <li><a href="#viewport">3D Viewport</a></li>
         <ul>
           <li><a href="#robots">Robots</a></li>
@@ -58,31 +54,6 @@ type WandelscriptEditorProps = {
 }
 ```
 
-### MaterialUI
-
-#### defaulttheme
-
-This function creates a [Material UI theme](https://mui.com/material-ui/customization/theming/) with the default colors, typography, and MUI component configuration.
-
-```tsx
-declare function createDefaultMuiTheme(mode: 'dark'|'light' = 'dark'): Theme
-```
-
-Example use in a MUI application:
-
-```tsx
-import { ThemeProvider } from "@mui/system"
-import { createDefaultMuiTheme } from "@wandelbots/wandelui"
-
-const defaultDarkTheme = createDefaultMuiTheme('dark')
-
-export const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <ThemeProvider theme={defaultDarkTheme}>
-    {children}
-  </ThemeProvider>
-}
-```
-
 ### Viewport
 
 #### Robots

package/package.json

@@ -1,19 +1,28 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
   "files": [
     "dist",
-    "assets"
+    "src"
   ],
-  "types": "dist/index.d.ts",
+  "type": "module",
+  "module": "./dist/index.js",
+  "main": "./dist/index.cjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "types": "./dist/index.d.ts",
   "scripts": {
-    "dev": "nodemon -w \".\" -i *.tgz -i dist -x \"npm run build && npm pack\"",
-    "storybook": "storybook dev -p 6006",
-    "test": "vitest",
-    "build": "rollup -c",
+    "dev": "storybook dev -p 6006 --no-open",
+    "dev:pack": "nodemon -w \".\" -e ts -i *.tgz -i dist -x \"npm run build && npm pack\"",
+    "dev:wbjs": "nodemon --watch $WBJS_PATH -e tgz --exec 'npm install file:$WBJS_PATH && storybook dev -p 6006 --no-open'",
+    "tsc": "tsc --pretty --noEmit",
+    "test": "npm run build",
+    "build": "rimraf dist && vite build && tsc --declaration --emitDeclarationOnly",
     "build:dev": "rollup -c rollup.config.dev.mjs",
     "build-storybook": "storybook build"
   },
@@ -29,42 +38,44 @@
   "author": "Wandelbots",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
     "@mui/material": "^5.13.6",
-    "@rollup/plugin-commonjs": "^25.0.2",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-terser": "^0.4.3",
-    "@rollup/plugin-typescript": "^11.1.2",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-interactions": "^8.1.11",
-    "@storybook/addon-links": "^8.1.11",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/react": "^8.1.11",
-    "@storybook/react-vite": "^8.1.11",
-    "@storybook/test": "^8.1.11",
-    "@storybook/test-runner": "^0.19.0",
-    "@types/react": "^18.2.14",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-essentials": "^8.2.7",
+    "@storybook/addon-interactions": "^8.2.7",
+    "@storybook/addon-links": "^8.2.7",
+    "@storybook/blocks": "^8.2.7",
+    "@storybook/react": "^8.2.7",
+    "@storybook/react-vite": "^8.2.7",
+    "@storybook/test": "^8.2.7",
+    "@storybook/test-runner": "^0.19.1",
+    "@svgr/rollup": "^8.1.0",
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^18.3.3",
     "@vitejs/plugin-react": "^4.3.1",
-    "nodemon": "^3.1.0",
-    "postcss": "^8.4.24",
+    "nodemon": "^3.1.4",
+    "postcss": "^8.4.40",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rollup": "^3.25.3",
-    "rollup-plugin-dts": "^5.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.19.2",
+    "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-gltf": "^4.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^24.0.0",
-    "storybook": "^8.1.11",
-    "tslib": "^2.6.0",
-    "typescript": "^5.5.3",
-    "vite": "^5.3.3",
-    "vitest": "^1.6.0"
+    "storybook": "^8.2.7",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.4",
+    "vite": "^5.3.5",
+    "vite-plugin-svgr": "^4.2.0",
+    "vitest": "^2.0.5"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
@@ -73,11 +84,11 @@
     "@react-spring/three": ">=9",
     "@react-three/drei": ">=9",
     "@react-three/fiber": ">=8",
+    "@wandelbots/wandelbots-js": ">=1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "three": ">=0.137",
-    "three-stdlib": ">=2",
-    "@wandelbots/wandelbots-js": ">=1"
+    "three": ">=0.167",
+    "three-stdlib": ">=2"
   },
   "peerDependenciesMeta": {
     "react-dom": {
@@ -86,8 +97,14 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.6.0",
-    "@shikijs/monaco": "^1.10.1",
+    "@mui/icons-material": "^5.16.6",
+    "@mui/lab": "^5.0.0-alpha.173",
+    "@shikijs/monaco": "^1.12.0",
+    "i18next-browser-languagedetector": "^8.0.0",
     "lodash-es": "^4.17.21",
-    "shiki": "^1.10.1"
+    "mobx": "^6.13.1",
+    "mobx-react-lite": "^4.0.7",
+    "react-i18next": "^15.0.0",
+    "shiki": "^1.12.0"
   }
 }

package/src/components/3d-viewport/CoordinateSystemTransform.tsx

@@ -0,0 +1,44 @@
+import type { CoordinateSystem } from "@wandelbots/wandelbots-api-client"
+import type { ReactNode } from "react"
+import { Vector3, Quaternion } from "three"
+
+/**
+ * Applies a API coordinate system transformation to
+ * all react-three child components.
+ */
+export const CoordinateSystemTransform = ({
+  coordinateSystem,
+  children,
+}: {
+  coordinateSystem?: CoordinateSystem
+  children: ReactNode
+}) => {
+  const position = new Vector3(
+    (coordinateSystem?.position?.x ?? 0) / 1000,
+    (coordinateSystem?.position?.y ?? 0) / 1000,
+    (coordinateSystem?.position?.z ?? 0) / 1000,
+  )
+
+  let rotation = coordinateSystem?.rotation
+  const rotationType = rotation?.type
+  if (rotationType && rotationType !== "ROTATION_VECTOR") {
+    console.warn(
+      `Unsupported rotation type ${rotationType}. Only ROTATION_VECTOR is supported.`,
+    )
+    rotation = { type: "ROTATION_VECTOR", angles: [0, 0, 0, 0] }
+  }
+
+  const rotationVector = new Vector3(
+    rotation?.angles[0] ?? 0,
+    rotation?.angles[1] ?? 0,
+    rotation?.angles[2] ?? 0,
+  )
+  const magnitude = rotationVector.length()
+  const axis = rotationVector.normalize()
+  const quaternion = new Quaternion().setFromAxisAngle(axis, magnitude)
+  return (
+    <group position={position} quaternion={quaternion}>
+      {children}
+    </group>
+  )
+}

package/src/components/3d-viewport/PresetEnvironment.tsx

@@ -0,0 +1,78 @@
+import { Environment, Lightformer } from "@react-three/drei"
+
+/**
+ * Renders a preset environment for the 3D scene.
+ * This component wraps the scene with an `Environment` component
+ * and builds a lightmap build with `Lightformers`.
+ */
+export function PresetEnvironment() {
+  return (
+    <Environment>
+      <Lightformers />
+    </Environment>
+  )
+}
+
+function Lightformers({ positions = [2, 0, 2, 0, 2, 0, 2, 0] }) {
+  return (
+    <>
+      {/* Ceiling */}
+      <Lightformer
+        intensity={5}
+        rotation-x={Math.PI / 2}
+        position={[0, 5, -9]}
+        scale={[10, 10, 1]}
+      />
+      <group rotation={[0, 0.5, 0]}>
+        <group>
+          {positions.map((x, i) => (
+            <Lightformer
+              key={i}
+              form="circle"
+              intensity={5}
+              rotation={[Math.PI / 2, 0, 0]}
+              position={[x, 4, i * 4]}
+              scale={[3, 1, 1]}
+            />
+          ))}
+        </group>
+      </group>
+      {/* Sides */}
+      <Lightformer
+        intensity={40}
+        rotation-y={Math.PI / 2}
+        position={[-5, 1, -1]}
+        scale={[20, 0.1, 1]}
+      />
+      <Lightformer
+        intensity={20}
+        rotation-y={-Math.PI}
+        position={[-5, -2, -1]}
+        scale={[20, 0.1, 1]}
+      />
+
+      <Lightformer
+        rotation-y={Math.PI / 2}
+        position={[-5, -1, -1]}
+        scale={[20, 0.5, 1]}
+        intensity={5}
+      />
+      <Lightformer
+        rotation-y={-Math.PI / 2}
+        position={[10, 1, 0]}
+        scale={[20, 1, 1]}
+        intensity={10}
+      />
+
+      {/* Key */}
+      <Lightformer
+        form="ring"
+        color="white"
+        intensity={5}
+        scale={10}
+        position={[-15, 4, -18]}
+        target={[0, 0, 0]}
+      />
+    </>
+  )
+}

package/src/components/3d-viewport/SafetyZonesRenderer.tsx

@@ -0,0 +1,54 @@
+import { SafetySetupSafetyZone, Geometry } from "@wandelbots/wandelbots-js"
+import * as THREE from "three"
+import { ConvexGeometry } from "three-stdlib"
+import { type GroupProps } from "@react-three/fiber"
+
+export type SafetyZonesRendererProps = {
+  safetyZones: SafetySetupSafetyZone[]
+} & GroupProps
+
+export function SafetyZonesRenderer({
+  safetyZones,
+  ...props
+}: SafetyZonesRendererProps) {
+  return (
+    <group {...props}>
+      {safetyZones.map((zone, index) => {
+        let geometries: Geometry[] = []
+        if (zone.geometry) {
+          if (zone.geometry.compound) {
+            geometries = zone.geometry.compound.child_geometries
+          } else if (zone.geometry.convex_hull) {
+            geometries = [zone.geometry]
+          }
+        }
+
+        return geometries.map((geometry, i) => {
+          if (!geometry.convex_hull) return null
+
+          const vertices = geometry.convex_hull.vertices.map(
+            (v) => new THREE.Vector3(v.x / 1000, v.y / 1000, v.z / 1000),
+          )
+          const convexGeometry = new ConvexGeometry(vertices)
+          return (
+            <>
+              <mesh key={`${index}-${i}`} geometry={convexGeometry}>
+                <meshStandardMaterial
+                  key={index}
+                  attach="material"
+                  color="#009f4d"
+                  opacity={0.2}
+                  depthTest={false}
+                  depthWrite={false}
+                  transparent
+                  polygonOffset
+                  polygonOffsetFactor={-i}
+                />
+              </mesh>
+            </>
+          )
+        })
+      })}
+    </group>
+  )
+}

package/src/components/LoadingButton.stories.tsx

@@ -0,0 +1,61 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { LoadingButton } from "./LoadingButton";
+import { useState } from "react";
+import { PlayArrow } from "@mui/icons-material"
+
+async function delay(ms: number) {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, ms);
+  });
+}
+
+const DemoLoader = (props: React.ComponentProps<typeof LoadingButton>) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function doThing() {
+    setIsLoading(true);
+    try {
+      await delay(1000);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <LoadingButton
+      loading={isLoading}
+      onClick={doThing}
+      {...props}
+    />
+  );
+}
+
+const meta: Meta<typeof LoadingButton> = {
+  component: LoadingButton,
+
+  args: {
+    children: "Click me",
+    loadingPosition: "start",
+    variant: "contained",
+    startIcon: <PlayArrow />,
+  },
+  argTypes: {
+    loadingPosition: {
+      options: ["center", "start", "end"],
+      control: { type: 'select' },
+    },
+    variant: {
+      options: ["contained", "outlined", "text"],
+      control: { type: 'select' },
+    }
+  },
+  render: (props) => {
+    return <DemoLoader {...props} />;
+  }
+};
+export default meta;
+
+export const Default: StoryObj<typeof LoadingButton> = {
+};

package/src/components/LoadingButton.tsx

@@ -0,0 +1,19 @@
+import { LoadingButton as MUILoadingButton } from "@mui/lab"
+import { forwardRef } from "react"
+
+type LoadingButtonProps = React.ComponentProps<typeof MUILoadingButton>
+
+/** Button with a loading state to indicate a task is being processed */
+export const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>(
+  ({ sx, ...rest }, ref) => {
+    return (
+      <MUILoadingButton
+        sx={{
+          ...sx,
+        }}
+        ref={ref}
+        {...rest}
+      />
+    )
+  },
+)

package/src/components/LoadingCover.tsx

@@ -0,0 +1,75 @@
+import { makeErrorMessage } from "./utils/errorHandling"
+import { CircularProgress, Stack, useTheme } from "@mui/material"
+import { useEffect, useState } from "react"
+
+export const LoadingCover = (props: {
+  message?: string
+  error?: unknown
+  softTimeout?: number
+}) => {
+  const softTimeout = props.softTimeout || 3000
+
+  const [showSlowLoadingMessage, setShowSlowLoadingMessage] = useState(false)
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setShowSlowLoadingMessage(true)
+    }, softTimeout)
+
+    return () => clearTimeout(timeout)
+  })
+
+  return (
+    <Stack
+      width="100%"
+      height="100%"
+      alignItems="center"
+      justifyContent="center"
+    >
+      {props.error ? (
+        <LoadingErrorMessage message={props.message} error={props.error} />
+      ) : (
+        <>
+          <CircularProgress sx={{ marginBottom: "24px" }} />
+          {!!props.message && <div>{props.message}</div>}
+          <Stack
+            sx={{
+              visibility: showSlowLoadingMessage ? "visible" : "hidden",
+              marginTop: "1rem",
+              color: "gray",
+            }}
+          >
+            {"This is taking longer than expected..."}
+          </Stack>
+        </>
+      )}
+    </Stack>
+  )
+}
+
+const LoadingErrorMessage = (props: { message?: string; error: unknown }) => {
+  const errorMessage = makeErrorMessage(props.error)
+  const stack = props.error instanceof Error ? props.error.stack : null
+  const theme = useTheme()
+
+  return (
+    <Stack
+      sx={{
+        maxHeight: "100%",
+        maxWidth: "min(100%, 800px)",
+        padding: 2,
+        overflow: "auto",
+        color: theme.palette.error.main,
+        "& pre": {
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-word",
+          paddingBottom: "3rem",
+        },
+      }}
+    >
+      {`Error while: ${props.message} - ${errorMessage}`}
+      <br />
+      {stack && <pre>{stack}</pre>}
+    </Stack>
+  )
+}

package/src/components/ThemeSelect.tsx

@@ -0,0 +1,49 @@
+// TODO implement this as part of theme?
+
+import { useThemeColors } from "../themes/wbTheme"
+import { Select, type SxProps } from "@mui/material"
+import { defaultsDeep } from "lodash-es"
+
+type ThemeSelectProps = {
+  kind: "filled" | "outlined" | "text"
+} & React.ComponentProps<typeof Select>
+
+export const ThemeSelect = ({ kind, sx, ...rest }: ThemeSelectProps) => {
+  const colors = useThemeColors()
+
+  let style: SxProps = defaultsDeep(sx, {
+    backgroundColor: colors.selectBackground,
+    borderRadius: "10px",
+    borderStyle: "none",
+    color: "currentColor",
+    "& > div": {
+      padding: "4px 16px",
+    },
+    "& fieldset": {
+      border: "none",
+    },
+  })
+
+  if (kind === "outlined") {
+    style = defaultsDeep(
+      {
+        backgroundColor: "transparent",
+      },
+      style,
+    )
+  } else if (kind === "text") {
+    style = defaultsDeep(
+      {
+        backgroundColor: "transparent",
+
+        "& .MuiSvgIcon-root": {
+          borderStyle: "none",
+          color: "inherit",
+        },
+      },
+      style,
+    )
+  }
+
+  return <Select sx={style} {...rest} />
+}

package/src/components/VelocitySlider.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { VelocitySlider } from "./VelocitySlider";
+import { useArgs } from "@storybook/preview-api";
+
+const meta: Meta<typeof VelocitySlider> = {
+  component: VelocitySlider,
+
+  args: {
+    velocity: 1,
+    min: 1,
+    max: 100,
+    disabled: false,
+  },
+  render: function Component(args) {
+    const [, setArgs] = useArgs();
+
+    function onVelocityChange(newVelocity: number) {
+      args.onVelocityChange?.(newVelocity);
+      setArgs({ velocity: newVelocity });
+    }
+
+    return <VelocitySlider
+      {...args} 
+      onVelocityChange={onVelocityChange}
+    />;
+  },
+
+};
+export default meta;
+
+export const Default: StoryObj<typeof VelocitySlider> = {
+};

package/src/components/VelocitySlider.tsx

@@ -0,0 +1,52 @@
+import Slider from "@mui/material/Slider"
+import { isNumber } from "lodash-es"
+import { observer } from "mobx-react-lite"
+import { Typography } from "@mui/material"
+
+type VelocitySliderProps = {
+  min: number
+  max: number
+  velocity: number
+  onVelocityChange: (newVelocity: number) => void
+  disabled?: boolean
+  valueLabelFormat?: (value: number) => string
+}
+
+/** A slider for controlling the movement velocity of a robot */
+export const VelocitySlider = observer((props: VelocitySliderProps) => {
+  const valueLabelFormat = props.valueLabelFormat || ((value: number) => `${value}`)
+
+  function onSliderChange(_event: Event, newVelocity: number | number[]) {
+    if (newVelocity === props.velocity || !isNumber(newVelocity)) return
+
+    props.onVelocityChange(newVelocity)
+  }
+
+  return (
+    <>
+      <Typography
+        sx={{
+          textAlign: "center",
+          fontSize: "15px",
+        }}
+      >
+        {valueLabelFormat(props.velocity)}
+      </Typography>
+      <Slider
+        value={props.velocity}
+        onChange={onSliderChange}
+        min={props.min}
+        max={props.max}
+        aria-labelledby="input-slider"
+        disabled={props.disabled}
+        sx={{
+          "& .MuiSlider-valueLabelOpen": {
+            zIndex: 100,
+            backgroundColor: "transparent",
+            top: "0px",
+          },
+        }}
+      />
+    </>
+  )
+})