@wandelbots/wandelbots-js-react-components 1.3.1 → 1.4.0

package/package.json

@@ -1,21 +1,28 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "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": "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": "vitest",
-    "build": "rollup -c",
-    "build:dev": "rollup -c rollup.config.dev.mjs",
+    "test": "npm run build",
+    "build": "rimraf dist && vite build && tsc --declaration --emitDeclarationOnly",
     "build-storybook": "storybook build"
   },
   "repository": {
@@ -34,6 +41,7 @@
     "@emotion/styled": "^11.13.0",
     "@mui/material": "^5.13.6",
     "@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",
@@ -45,6 +53,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",
@@ -53,6 +62,7 @@
     "prop-types": "^15.8.1",
     "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",

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,55 @@
+import { SafetySetupSafetyZone } from "@wandelbots/wandelbots-js"
+import { Geometry } from "@wandelbots/wandelbots-api-client"
+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",
+          },
+        }}
+      />
+    </>
+  )
+})

package/src/components/jogging/JoggingCartesianAxisControl.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { JoggingCartesianAxisControl } from "./JoggingCartesianAxisControl";
+import { useRef, useState } from "react";
+import { useAnimationFrame } from "../utils/hooks";
+import { useArgs } from "@storybook/preview-api";
+
+const meta: Meta<typeof JoggingCartesianAxisControl> = {
+  component: JoggingCartesianAxisControl,
+
+  args: {
+    color: "#F14D42",
+    label: "X",
+    disabled: false,
+  },
+  render: function Component(args) {
+    const [, setArgs] = useArgs();
+
+    const joggingDirRef = useRef<"+" | "-" | null>(null);
+    const joggingValueRef = useRef(0);
+
+    useAnimationFrame(() => {
+      if (joggingDirRef.current === "+") {
+        joggingValueRef.current += 1;
+      } else if (joggingDirRef.current === "-") {
+        joggingValueRef.current -= 1;
+      }
+    })
+
+    return <JoggingCartesianAxisControl
+      {...args} 
+      startJogging={(direction) => joggingDirRef.current = direction} 
+      stopJogging={() => joggingDirRef.current = null}
+      getDisplayedValue={() => joggingValueRef.current.toString()}
+    />;
+  },
+
+};
+export default meta;
+
+export const Default: StoryObj<typeof JoggingCartesianAxisControl> = {
+};

package/src/components/jogging/JoggingCartesianAxisControl.tsx

@@ -0,0 +1,127 @@
+import { Button, Typography } from "@mui/material"
+import Stack from "@mui/material/Stack"
+import { observer } from "mobx-react-lite"
+import { useRef, type ReactNode } from "react"
+import { useAnimationFrame } from "../utils/hooks"
+
+type JoggingCartesianAxisControlProps = {
+  color?: string
+  label: ReactNode
+  getDisplayedValue: () => string
+  startJogging: (direction: "-" | "+") => void
+  stopJogging: () => void
+  disabled?: boolean
+} & React.ComponentProps<typeof Stack>
+
+export const JoggingCartesianAxisControl = observer(
+  ({
+    color,
+    label,
+    getDisplayedValue,
+    startJogging,
+    stopJogging,
+    disabled,
+    ...rest
+  }: JoggingCartesianAxisControlProps) => {
+    useAnimationFrame(() => {
+      const displayValue = getDisplayedValue()
+      const element = valueContainerRef.current
+      if (!element) return
+
+      element.textContent = displayValue
+    })
+
+    const valueContainerRef = useRef<HTMLParagraphElement>(null)
+
+    color = color || "#F14D42"
+
+    function onPointerDownMinus(ev: React.PointerEvent) {
+      // Stop right click from triggering jog
+      if (ev.button === 0) startJogging("-")
+    }
+
+    function onPointerDownPlus(ev: React.PointerEvent) {
+      if (ev.button === 0) startJogging("+")
+    }
+
+    return (
+      <Stack height="72px" direction="row" {...rest}>
+        <Button
+          onPointerDown={onPointerDownMinus}
+          onPointerUp={stopJogging}
+          onPointerOut={stopJogging}
+          disabled={disabled}
+          sx={{
+            width: "105px",
+            backgroundColor: color,
+            color: "white",
+            alignContent: "center",
+            fontSize: "37px",
+            borderRadius: "16px 0px 0px 16px",
+
+            ":hover": {
+              color: "white",
+              backgroundColor: color,
+            },
+          }}
+        >
+          {"-"}
+        </Button>
+
+        <Stack
+          spacing="6px"
+          sx={{
+            width: "184px",
+            backgroundColor: color,
+            alignItems: "center",
+            justifyContent: "center",
+            opacity: "0.9",
+          }}
+        >
+          <Stack
+            height="22px"
+            direction="row"
+            alignItems="center"
+            justifyItems="center"
+            spacing={1}
+            sx={{ userSelect: "none" }}
+          >
+            {label}
+          </Stack>
+          <Typography
+            height="22px"
+            sx={{
+              fontSize: "15px",
+              color: "white",
+            }}
+            ref={valueContainerRef}
+          >
+            {getDisplayedValue()}
+          </Typography>
+        </Stack>
+
+        <Button
+          onPointerDown={onPointerDownPlus}
+          onPointerUp={stopJogging}
+          onPointerOut={stopJogging}
+          disabled={disabled}
+          sx={{
+            width: "105px",
+            backgroundColor: color,
+            color: "white",
+            alignContent: "center",
+            fontSize: "37px",
+            borderRadius: "0px 16px 16px 0px",
+
+            ":hover": {
+              color: "white",
+              backgroundColor: color,
+            },
+          }}
+        >
+          {"+"}
+        </Button>
+      </Stack>
+    )
+  },
+)