@wandelbots/wandelbots-js-react-components 1.8.0 → 1.9.0

package/src/themes/color.tsx

@@ -1,41 +1,51 @@
-import React, { ReactNode, useEffect, useState } from "react";
+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 (
     <>
-      <h2>{props.name}</h2>
-      <div
-        style={{
+      <Typography
+        component="h2"
+        sx={{
+          marginTop: "1rem",
+        }}
+      >
+        {props.name}
+      </Typography>
+      <Box
+        sx={{
           display: "grid",
           gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
           gap: "20px",
         }}
       >
         {props.children}
-      </div>
+      </Box>
     </>
-  );
+  )
 }
 
 export function Color({ name, color }: { name: string; color: string }) {
-  const [showCopied, setShowCopied] = useState(false);
+  const theme = useTheme()
+  const [showCopied, setShowCopied] = useState(false)
 
   function handleClick(value: string) {
     if (!navigator.clipboard) {
-      console.error("can't send value to clipboard");
-      return;
+      console.error("can't send value to clipboard")
+      return
     }
-    navigator.clipboard.writeText(value);
-    setShowCopied(true);
+    navigator.clipboard.writeText(value)
+    setShowCopied(true)
   }
 
   useEffect(() => {
     if (showCopied) {
       setTimeout(() => {
-        setShowCopied(false);
-      }, 2000);
+        setShowCopied(false)
+      }, 2000)
     }
-  }, [showCopied]);
+  }, [showCopied])
 
   return (
     <li
@@ -58,17 +68,17 @@ export function Color({ name, color }: { name: string; color: string }) {
           // border: "1px solid lightgray",
         }}
       />
-      <span>{name}</span>
+      <Typography component="span">{name}</Typography>
       <br />
-      <span
+      <Typography
         style={{
-          color: "gray",
+          opacity: 0.7,
           fontSize: "0.9em",
           fontFamily: "monospace",
         }}
       >
         {showCopied ? "Copied ✔︎" : color}
-      </span>
+      </Typography>
     </li>
-  );
+  )
 }

package/src/themes/novaTheme.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Color, ColorSection } from "./color"
+import { useTheme } from "@mui/material"
+
+const ColorPalette = () => {
+  const theme = useTheme()
+
+  return (
+    <div
+      style={{
+        fontFamily: "sans-serif",
+      }}
+    >
+      <ColorSection name="Palette">
+        <Color name="Primary" color={theme.palette.primary.main} />
+        <Color name="Secondary" color={theme.palette.secondary.main} />
+        <Color name="Background" color={theme.palette.background.default} />
+      </ColorSection>
+      <ColorSection name="Text">
+        <Color name="Primary" color={theme.palette.text.primary} />
+        <Color name="Secondary" color={theme.palette.text.secondary} />
+      </ColorSection>
+      <ColorSection name="Button">
+        <Color
+          name="Primary Background"
+          color={theme.nova.colors.buttonPrimary.background}
+        />
+        <Color
+          name="Primary Text"
+          color={theme.nova.colors.buttonPrimary.text}
+        />
+        <Color
+          name="Secondary Background"
+          color={theme.nova.colors.buttonSecondary.background}
+        />
+        <Color
+          name="Secondary Text"
+          color={theme.nova.colors.buttonSecondary.background}
+        />
+        <Color
+          name="Back Background"
+          color={theme.nova.colors.buttonBack.background}
+        />
+        <Color name="Back Text" color={theme.nova.colors.buttonBack.text} />
+      </ColorSection>
+      <ColorSection name="Input Field">
+        <Color
+          name="Background"
+          color={theme.nova.colors.inputField.background}
+        />
+        <Color name="Text" color={theme.nova.colors.inputField.text} />
+        <Color
+          name="Unit Background"
+          color={theme.nova.colors.inputField.unitBackground}
+        />
+        <Color name="Unit Text" color={theme.nova.colors.inputField.unitText} />
+      </ColorSection>
+    </div>
+  )
+}
+
+const meta: Meta<typeof ColorPalette> = {
+  component: ColorPalette,
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof ColorPalette>
+
+// export const colorPalette: Story = {}

package/src/themes/themeTypes.d.ts

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

package/src/themes/theming.ts

@@ -0,0 +1,174 @@
+"use client"
+
+import type { Theme } from "@mui/material/styles"
+import { createTheme } from "@mui/material/styles"
+import { defaultsDeep } from "lodash-es"
+
+/**
+ * The palette of named colors we pick from for
+ * configuring the default nova themes.
+ */
+const colors = {
+  white: "#FFFFFF",
+  midnightblue: "#001337",
+  lightbuttonblue: "#47D3FF",
+  midnightgray: "#DDE0E4",
+  midnightgray500: "#828B9B",
+  skyblue500: "#06B8F1",
+  skyblue600: "#0094CE",
+  darkishblue: "#262F42",
+  darkestblue: "#101629",
+  grayishblue: "#505968",
+  darkgrayishblue: "#363c4b",
+  scaryred: "#FF0E65",
+  tealGreen: "#1AC0B2",
+  magenta: "#EA3785",
+}
+
+/**
+ * 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.
+ */
+export const novaDarkTheme = {
+  mode: "dark" as "dark" | "light",
+  colors: {
+    primary: colors.skyblue500,
+    textDefault: colors.white,
+    textSubtle: colors.midnightgray,
+    background: {
+      default: colors.darkishblue,
+      panel: colors.darkestblue,
+    },
+  },
+}
+
+export type NovaTheme = typeof novaDarkTheme
+
+export const novaLightTheme = {
+  mode: "light",
+  colors: {
+    primary: colors.skyblue500,
+    textDefault: colors.darkishblue,
+    textSubtle: colors.midnightgray,
+    background: {
+      default: colors.skyblue500,
+      panel: colors.white,
+    },
+  },
+} satisfies NovaTheme
+
+/**
+ * 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.
+ */
+export function createNovaTheme(opts: Partial<NovaTheme> = {}): NovaTheme {
+  const defaults = opts.mode === "light" ? novaLightTheme : novaDarkTheme
+  return defaultsDeep(opts, defaults)
+}
+
+/**
+ * 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"
+
+  return createTheme({
+    palette: {
+      mode: nova.mode,
+      primary: {
+        main: nova.colors.primary,
+      },
+      background: {
+        default: nova.colors.background.default,
+        paper: nova.colors.background.panel,
+      },
+    },
+    typography: {
+      allVariants: {
+        color: nova.colors.textDefault,
+      },
+    },
+    components: {
+      MuiSelect: {
+        styleOverrides: {
+          root: {
+            backgroundColor: isDark ? "#505968" : undefined,
+            borderRadius: "10px",
+            color: "currentColor",
+            "& > div": {
+              padding: "4px 16px",
+            },
+            "& fieldset": {
+              border: isDark ? "none" : undefined,
+            },
+          },
+        },
+      },
+      MuiChip: {
+        styleOverrides: {
+          root: {
+            backgroundColor: isDark ? "#505968" : undefined,
+            borderRadius: "10px",
+            color: "currentColor",
+          },
+        },
+      },
+      MuiToggleButtonGroup: {
+        styleOverrides: {
+          root: {
+            "& > button": {
+              borderRadius: "8px",
+              textTransform: "none",
+              paddingTop: "4px",
+              paddingBottom: "4px",
+              width: "100%",
+              borderWidth: 0,
+              backgroundColor: isDark ? "#3d4455" : undefined,
+              color: isDark ? "rgba(255, 255, 255, 0.8)" : undefined,
+
+              "&.Mui-selected": isDark
+                ? {
+                    color: "white",
+                    backgroundColor: "#505968",
+                  }
+                : undefined,
+            },
+          },
+        },
+      },
+      MuiTabs: {
+        styleOverrides: {
+          root: {
+            backgroundColor: isDark ? "#101629" : undefined,
+            minHeight: "42px",
+          },
+        },
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            minHeight: "42px",
+            textTransform: "none",
+            "&.Mui-selected": isDark
+              ? {
+                  color: "white",
+                  backgroundColor: "#404554",
+                }
+              : undefined,
+          },
+        },
+      },
+    },
+    nova,
+  })
+}

package/dist/themes/theme.d.ts

@@ -1,144 +0,0 @@
-import { ThemeOptions } from '@mui/material/styles';
-type ThemeName = 'wandelbots';
-export declare const allThemes: {
-    wb: import("@mui/material").Theme;
-};
-export interface NamedThemeOptions extends ThemeOptions {
-    name: ThemeName;
-}
-declare module '@mui/material/styles' {
-    interface Theme {
-        backgrounds: {
-            light1: string;
-            light2: string;
-            medium: string;
-            dark1: string;
-            dark2: string;
-        };
-        buttonPrimary: {
-            background: string;
-            text: string;
-        };
-        buttonSecondary: {
-            background: string;
-            text: string;
-        };
-        buttonBack: {
-            background: string;
-            text: string;
-        };
-        inputField: {
-            background: string;
-            text: string;
-            unitBackground: string;
-            unitText: string;
-        };
-        sidebar: {
-            background: string;
-            backgroundSelected: string;
-            selected: string;
-        };
-        actionPanel: {
-            background: string;
-            backgroundSelected: string;
-            text: string;
-        };
-        controlPanel: {
-            background: string;
-            text: string;
-        };
-        listItem: {
-            background: string;
-            backgroundSelected: string;
-            textTitle: string;
-            textTitleSelected: string;
-            textDesc: string;
-            textDescSelected: string;
-        };
-        breadcrumb: {
-            background: string;
-            text: string;
-            textSelected: string;
-        };
-        axes: {
-            x: string;
-            y: string;
-            z: string;
-        };
-        viewport: {
-            background: string;
-            controlBackground: string;
-        };
-        tabIcon: {
-            color: string;
-        };
-    }
-    interface ThemeOptions {
-        backgrounds?: {
-            light1?: string;
-            light2?: string;
-            medium?: string;
-            dark1?: string;
-            dark2?: string;
-        };
-        buttonPrimary?: {
-            background?: string;
-            text?: string;
-        };
-        buttonSecondary?: {
-            background?: string;
-            text?: string;
-        };
-        buttonBack?: {
-            background?: string;
-            text?: string;
-        };
-        inputField?: {
-            background?: string;
-            text?: string;
-            unitBackground?: string;
-            unitText?: string;
-        };
-        sidebar?: {
-            background?: string;
-            backgroundSelected?: string;
-            selected?: string;
-        };
-        actionPanel?: {
-            background?: string;
-            backgroundSelected?: string;
-            text?: string;
-        };
-        controlPanel?: {
-            background?: string;
-            text?: string;
-        };
-        listItem?: {
-            background?: string;
-            backgroundSelected?: string;
-            textTitle?: string;
-            textTitleSelected?: string;
-            textDesc?: string;
-            textDescSelected?: string;
-        };
-        breadcrumb?: {
-            background?: string;
-            text?: string;
-            textSelected?: string;
-        };
-        axes?: {
-            x?: string;
-            y?: string;
-            z?: string;
-        };
-        viewport?: {
-            background?: string;
-            controlBackground?: string;
-        };
-        tabIcon?: {
-            color?: string;
-        };
-    }
-}
-export {};
-//# sourceMappingURL=theme.d.ts.map

package/dist/themes/theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/themes/theme.ts"],"names":[],"mappings":"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"}

package/dist/themes/wbTheme.d.ts

@@ -1,73 +0,0 @@
-/** Colors for the dark theme */
-export declare const darkColors: {
-    primary: string;
-    textDefault: string;
-    textInverse: string;
-    textError: string;
-    textSubtle: string;
-    backgroundDefault: string;
-    inputBackgroundDefault: string;
-    borderColorDefault: string;
-    selectBackground: string;
-    appBarBackground: string;
-    virtualRobot: string;
-    physicalRobot: string;
-    robotViewportBackground: string;
-    viewportButtonInactiveBackground: string;
-    viewportButtonHover: string;
-    viewportButtonActiveBackground: string;
-    tabsBarBackground: string;
-    activeTabBackground: string;
-    omniverseConfigurationSuccess: string;
-    omniverseConfigurationFailure: string;
-};
-/** Colors for the light theme */
-export declare const lightColors: {
-    primary: string;
-    textDefault: string;
-    textInverse: string;
-    textError: string;
-    textSubtle: string;
-    backgroundDefault: string;
-    inputBackgroundDefault: string;
-    borderColorDefault: string;
-    selectBackground: string;
-    appBarBackground: string;
-    virtualRobot: string;
-    physicalRobot: string;
-    robotViewportBackground: string;
-    viewportButtonInactiveBackground: string;
-    viewportButtonHover: string;
-    viewportButtonActiveBackground: string;
-    tabsBarBackground: string;
-    activeTabBackground: string;
-    omniverseConfigurationSuccess: string;
-    omniverseConfigurationFailure: string;
-};
-/** Gets the colors for the current theme (light or dark) */
-export declare function useThemeColors(): {
-    primary: string;
-    textDefault: string;
-    textInverse: string;
-    textError: string;
-    textSubtle: string;
-    backgroundDefault: string;
-    inputBackgroundDefault: string;
-    borderColorDefault: string;
-    selectBackground: string;
-    appBarBackground: string;
-    virtualRobot: string;
-    physicalRobot: string;
-    robotViewportBackground: string;
-    viewportButtonInactiveBackground: string;
-    viewportButtonHover: string;
-    viewportButtonActiveBackground: string;
-    tabsBarBackground: string;
-    activeTabBackground: string;
-    omniverseConfigurationSuccess: string;
-    omniverseConfigurationFailure: string;
-};
-export declare const darkTheme: import("@mui/material").Theme;
-export declare const lightTheme: import("@mui/material").Theme;
-export declare const wbTheme: import("@mui/material").Theme;
-//# sourceMappingURL=wbTheme.d.ts.map

package/dist/themes/wbTheme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"wbTheme.d.ts","sourceRoot":"","sources":["../../src/themes/wbTheme.ts"],"names":[],"mappings":"AAsBA,gCAAgC;AAChC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;CAsBtB,CAAA;AAED,iCAAiC;AACjC,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;CAsBvB,CAAA;AAED,4DAA4D;AAC5D,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;EAE7B;AA4GD,eAAO,MAAM,SAAS,+BAA8B,CAAA;AACpD,eAAO,MAAM,UAAU,+BAA+B,CAAA;AACtD,eAAO,MAAM,OAAO,+BAAY,CAAA"}

package/dist/themes/wbTheme.stories.d.ts

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

package/dist/themes/wbTheme.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"wbTheme.stories.d.ts","sourceRoot":"","sources":["../../src/themes/wbTheme.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGlD,QAAA,MAAM,YAAY,+CAiDjB,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAEnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAE3C,eAAO,MAAM,YAAY,EAAE,KAAU,CAAC"}