@wandelbots/wandelbots-js-react-components 1.10.3 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "1.10.3",
+  "version": "1.11.0",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/ThemeSelect.tsx

@@ -1,7 +1,7 @@
 // TODO implement this as part of theme?
 
 import { Select, useTheme, type SxProps } from "@mui/material"
-import { defaultsDeep } from "lodash-es"
+import defaultsDeep from "lodash-es/defaultsDeep"
 
 type ThemeSelectProps = {
   kind: "filled" | "outlined" | "text"

package/src/components/VelocitySlider.tsx

@@ -1,5 +1,5 @@
 import Slider from "@mui/material/Slider"
-import { isNumber } from "lodash-es"
+import isNumber from "lodash-es/isNumber"
 import { observer } from "mobx-react-lite"
 import { Stack, Typography, useTheme } from "@mui/material"
 

package/src/components/jogging/JoggingJointLimitDetector.tsx

@@ -1,7 +1,7 @@
 import { Typography } from "@mui/material"
 import { useTranslation } from "react-i18next"
 import { useState } from "react"
-import { isEqual } from "lodash-es"
+import isEqual from "lodash-es/isEqual"
 import { useAnimationFrame } from "../utils/hooks"
 import type { JoggingStore } from "./JoggingStore"
 

package/src/components/jogging/JoggingJointRotationControl.tsx

@@ -5,7 +5,7 @@ import ChevronLeft from "@mui/icons-material/ChevronLeft"
 import ChevronRight from "@mui/icons-material/ChevronRight"
 import { useAnimationFrame } from "../utils/hooks"
 import { useState } from "react"
-import { throttle } from "lodash-es"
+import throttle from "lodash-es/throttle"
 import { useTranslation } from "react-i18next"
 
 type JoggingJointRotationControlProps = {

package/src/components/jogging/JoggingStore.tsx

@@ -1,4 +1,5 @@
-import { keyBy, uniqueId } from "lodash-es"
+import keyBy from "lodash-es/keyBy"
+import uniqueId from "lodash-es/uniqueId"
 import { autorun, makeAutoObservable, type IReactionDisposer } from "mobx"
 import type {
   CoordinateSystem,

package/src/components/modal/NoMotionGroupModal.tsx

@@ -0,0 +1,86 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Stack,
+  Typography,
+} from "@mui/material"
+import { observer } from "mobx-react-lite"
+
+function getBaseUrl(): string {
+  const currentUrl = window.location.href
+  return currentUrl.substring(
+    0,
+    currentUrl.indexOf("/", currentUrl.indexOf("//") + 2),
+  )
+}
+
+export const NoMotionGroupModal = observer((baseUrl: string = getBaseUrl()) => {
+  return (
+    <Dialog
+      aria-labelledby="no-motion-group-modal-title"
+      open={true}
+      fullWidth
+      sx={{
+        "& .MuiModal-backdrop": {
+          backdropFilter: "blur(10px)",
+        },
+        "& .MuiDialog-paper": {
+          "::before": {
+            content: '""',
+            height: "8px",
+            width: "100%",
+            background: "linear-gradient(90deg, #FF0E65 0%, #47D3FF 100%)",
+          },
+          background: "#101629",
+        },
+      }}
+    >
+      <DialogTitle id="no-motion-group-modal-title">
+        No motion group found
+      </DialogTitle>
+
+      <DialogContent
+        sx={{
+          marginTop: "3rem",
+          marginBottom: "1.5rem",
+          textAlign: "center",
+        }}
+      >
+        <Typography color="#fff">Found no devices to connect to.</Typography>
+        <Typography color="#fff">
+          Please ensure a motion group has been created.
+        </Typography>
+      </DialogContent>
+
+      <DialogActions>
+        <Stack width="100%" maxWidth="300px" margin="auto" marginBottom="2rem">
+          <Button
+            href={`${baseUrl}/settings`}
+            variant="contained"
+            sx={{
+              borderRadius: "8px",
+              width: "100%",
+            }}
+          >
+            Go to settings app
+          </Button>
+          <Button
+            href={`${baseUrl}`}
+            variant="text"
+            sx={{
+              marginTop: "1rem",
+              color: "#fff",
+              textDecoration: "underline",
+              fontSize: "0.75rem",
+            }}
+          >
+            Back to Homescreen
+          </Button>
+        </Stack>
+      </DialogActions>
+    </Dialog>
+  )
+})

package/src/index.ts

@@ -37,5 +37,9 @@ export type * from "./components/VelocitySlider"
 import { VelocitySlider as VS } from "./components/VelocitySlider"
 export const VelocitySlider = externalizeComponent(VS)
 
+export type * from "./components/modal/NoMotionGroupModal"
+import { NoMotionGroupModal as NMGM } from "./components/modal/NoMotionGroupModal"
+export const NoMotionGroupModal = externalizeComponent(NMGM)
+
 export * from "./components/utils/hooks"
 export * from "./components/robots/AxisConfig"

package/src/themes/theming.ts

@@ -2,7 +2,7 @@
 
 import type { Theme } from "@mui/material/styles"
 import { createTheme } from "@mui/material/styles"
-import { defaultsDeep } from "lodash-es"
+import defaultsDeep from "lodash-es/defaultsDeep"
 
 /**
  * The palette of named colors we pick from for