@wandelbots/wandelbots-js-react-components 1.11.3 → 1.12.0

package/src/components/modal/NoMotionGroupModal.tsx

@@ -7,8 +7,6 @@ import {
   Stack,
   Typography,
 } from "@mui/material"
-import { observer } from "mobx-react-lite"
-import { externalizeComponent } from "../../externalizeComponent"
 
 function getBaseUrl(): string {
   const currentUrl = window.location.href
@@ -18,77 +16,77 @@ function getBaseUrl(): string {
   )
 }
 
-export const NoMotionGroupModal = externalizeComponent(
-  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",
+export type NoMotionGroupModalProps = {
+  baseUrl: string
+}
+
+export function NoMotionGroupModal({
+  baseUrl = getBaseUrl(),
+  ...props
+}: NoMotionGroupModalProps) {
+  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",
         }}
       >
-        <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>
+        <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"
+      <DialogActions>
+        <Stack width="100%" maxWidth="300px" margin="auto" marginBottom="2rem">
+          <Button
+            href={`${baseUrl}/settings`}
+            variant="contained"
+            sx={{
+              borderRadius: "8px",
+              width: "100%",
+            }}
           >
-            <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>
-    )
-  }),
-)
+            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/externalizeComponent.tsx

@@ -1,7 +1,4 @@
-import { ThemeProvider } from "@emotion/react"
-import { createMUIThemeFromNova, createNovaTheme } from "./themes/theming"
-import type { FC } from "react"
-import { useTheme } from "@mui/material"
+import { type FC } from "react"
 import { I18nextProvider } from "react-i18next"
 // @ts-expect-error invalid type-only import error
 import i18n from "./i18n/config"
@@ -26,14 +23,5 @@ export function externalizeComponent<T extends JSX.ElementType>(
 const NovaComponentsProvider: FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  const theme = useTheme()
-  const defaultNovaTheme = createNovaTheme({
-    mode: theme.palette.mode,
-  })
-  const defaultTheme = createMUIThemeFromNova(defaultNovaTheme)
-  return (
-    <ThemeProvider theme={defaultTheme}>
-      <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
-    </ThemeProvider>
-  )
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
 }

package/src/index.ts

@@ -11,3 +11,4 @@ export * from "./components/VelocitySlider"
 export * from "./components/modal/NoMotionGroupModal"
 export * from "./components/utils/hooks"
 export * from "./components/robots/AxisConfig"
+export { createNovaMuiTheme } from "./themes/theming"

package/src/themes/themeTypes.d.ts

@@ -1,11 +1,11 @@
-import { NovaTheme } from "./novaTheme";
+import type { NovaThemeSettings } from "./novaTheme"
 
 declare module "@mui/material/styles" {
   interface Theme {
-    nova: NovaTheme
+    nova: NovaThemeSettings
   }
 
   interface ThemeOptions {
-    nova?: NovaTheme
+    nova?: NovaThemeSettings
   }
-}
+}

package/src/themes/theming.ts

@@ -1,8 +1,7 @@
 "use client"
 
-import type { Theme } from "@mui/material/styles"
+import type { Theme, ThemeOptions } from "@mui/material/styles"
 import { createTheme } from "@mui/material/styles"
-import defaultsDeep from "lodash-es/defaultsDeep"
 
 /**
  * The palette of named colors we pick from for
@@ -26,14 +25,11 @@ const colors = {
 }
 
 /**
- * A Nova components theme is a collection of Nova-specific settings that is
- * not specifically MUI-related, but can be used to construct a MUI
- * theme in turn.
- *
- * This object defines the default Nova theme settings, and the structure
- * of the options here is used to validate alternative themes.
+ * Settings used to construct the Nova default theme.
+ * The dark theme is the default and defines the structure of the
+ * settings.
  */
-export const novaDarkTheme = {
+export const novaDarkSettings = {
   mode: "dark" as "dark" | "light",
   colors: {
     primary: colors.skyblue500,
@@ -46,9 +42,9 @@ export const novaDarkTheme = {
   },
 }
 
-export type NovaTheme = typeof novaDarkTheme
+export type NovaThemeSettings = typeof novaDarkSettings
 
-export const novaLightTheme = {
+export const novaLightSettings = {
   mode: "light",
   colors: {
     primary: colors.skyblue500,
@@ -59,30 +55,26 @@ export const novaLightTheme = {
       panel: colors.white,
     },
   },
-} satisfies NovaTheme
+} satisfies NovaThemeSettings
 
 /**
- * Configure a Nova theme with the given options.
- * If no options are provided, the default dark theme is used.
- * Otherwise, the default dark or light theme is extended with
- * the overrides provided as appropriate.
+ * Create the default Wandelbots Nova Material UI theme, overriding
+ * any defaults with the provided theme options.
  */
-export function createNovaTheme(opts: Partial<NovaTheme> = {}): NovaTheme {
-  const defaults = opts.mode === "light" ? novaLightTheme : novaDarkTheme
-  return defaultsDeep(opts, defaults)
-}
+export function createNovaMuiTheme(opts: ThemeOptions): Theme {
+  let isDark = true
+  if (opts.palette?.mode === "light") {
+    isDark = false
+  } else if (opts.palette?.mode !== "dark") {
+    const browserPrefersLight =
+      typeof window !== "undefined" &&
+      window.matchMedia?.("(prefers-color-scheme: light)")?.matches
+    isDark = !browserPrefersLight
+  }
 
-/**
- * Turn a set of Nova theme settings into a Material UI theme.
- *
- * The original Nova settings are available on the resulting MUI
- * theme object under the `nova` key, if needed.
- */
-export function createMUIThemeFromNova(novaTheme: NovaTheme): Theme {
-  const nova = novaTheme
-  const isDark = nova.mode === "dark"
+  const nova = isDark ? novaDarkSettings : novaLightSettings
 
-  return createTheme({
+  const theme = createTheme({
     palette: {
       mode: nova.mode,
       primary: {
@@ -171,4 +163,10 @@ export function createMUIThemeFromNova(novaTheme: NovaTheme): Theme {
     },
     nova,
   })
+
+  if (opts) {
+    return createTheme(theme, opts)
+  } else {
+    return theme
+  }
 }

package/dist/src/themes/color.d.ts

@@ -1,10 +0,0 @@
-import type { ReactNode } from "react";
-export declare function ColorSection(props: {
-    name: string;
-    children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function Color({ name, color }: {
-    name: string;
-    color: string;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=color.d.ts.map

package/dist/src/themes/color.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/themes/color.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAGtC,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAsBxE;AAED,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,2CAuDrE"}

package/dist/stories/novaTheme.stories.d.ts

@@ -1,5 +0,0 @@
-import type { Meta } from "@storybook/react";
-declare const ColorPalette: () => import("react/jsx-runtime").JSX.Element;
-declare const meta: Meta<typeof ColorPalette>;
-export default meta;
-//# sourceMappingURL=novaTheme.stories.d.ts.map

package/dist/stories/novaTheme.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"novaTheme.stories.d.ts","sourceRoot":"","sources":["../../stories/novaTheme.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,kBAAkB,CAAA;AAItD,QAAA,MAAM,YAAY,+CAuDjB,CAAA;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CASnC,CAAA;AAED,eAAe,IAAI,CAAA"}

package/src/themes/color.tsx

@@ -1,84 +0,0 @@
-import { Box, Typography, useTheme } from "@mui/material"
-import type { ReactNode} from "react";
-import { useEffect, useState } from "react"
-
-export function ColorSection(props: { name: string; children: ReactNode }) {
-  return (
-    <>
-      <Typography
-        component="h2"
-        sx={{
-          marginTop: "1rem",
-        }}
-      >
-        {props.name}
-      </Typography>
-      <Box
-        sx={{
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
-          gap: "20px",
-        }}
-      >
-        {props.children}
-      </Box>
-    </>
-  )
-}
-
-export function Color({ name, color }: { name: string; color: string }) {
-  const theme = useTheme()
-  const [showCopied, setShowCopied] = useState(false)
-
-  function handleClick(value: string) {
-    if (!navigator.clipboard) {
-      console.error("can't send value to clipboard")
-      return
-    }
-    navigator.clipboard.writeText(value)
-    setShowCopied(true)
-  }
-
-  useEffect(() => {
-    if (showCopied) {
-      setTimeout(() => {
-        setShowCopied(false)
-      }, 2000)
-    }
-  }, [showCopied])
-
-  return (
-    <li
-      onClick={() => handleClick(color)}
-      style={{
-        borderRadius: "5px",
-        border: "1px solid lightgray",
-        padding: "5px",
-        listStyleType: "none",
-        width: "200px",
-      }}
-    >
-      <span
-        style={{
-          backgroundColor: color,
-          display: "block",
-          height: "4em",
-          marginBottom: "0.3em",
-          borderRadius: "5px",
-          // border: "1px solid lightgray",
-        }}
-      />
-      <Typography component="span">{name}</Typography>
-      <br />
-      <Typography
-        style={{
-          opacity: 0.7,
-          fontSize: "0.9em",
-          fontFamily: "monospace",
-        }}
-      >
-        {showCopied ? "Copied ✔︎" : color}
-      </Typography>
-    </li>
-  )
-}