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

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>
-  )
-}