@wandelbots/wandelbots-js-react-components 5.5.1-pr.fix-standardize-output.591.60112ee → 5.5.1

package/src/themes/createDarkTheme.ts

@@ -0,0 +1,343 @@
+import { createTheme, type Theme } from "@mui/material/styles"
+export function createDarkTheme(): Theme {
+  const baseTheme = createTheme({
+    palette: {
+      mode: "dark",
+      text: {
+        primary: "rgba(255, 255, 255, 1)",
+        secondary: "rgba(255, 255, 255, 0.7)",
+        disabled: "rgba(255, 255, 255, 0.38)",
+      },
+      primary: {
+        main: "rgba(142, 86, 252, 1)",
+        dark: "rgba(136, 58, 255, 1)",
+        light: "rgba(157, 131, 246, 1)",
+        contrastText: "rgba(255, 255, 255, 0.87)",
+      },
+      secondary: {
+        main: "rgba(255, 255, 255, 1)",
+        dark: "rgba(255, 255, 255, 0.06)",
+        contrastText: "rgba(255, 255, 255, 0.87)",
+      },
+      tertiary: {
+        main: "rgba(100, 255, 218, 1)",
+        dark: "rgba(38, 166, 154, 1)",
+        light: "rgba(167, 255, 235, 1)",
+        contrastText: "rgba(0, 0, 0, 1)",
+      },
+      error: {
+        main: "rgba(239, 83, 80, 1)",
+        dark: "rgba(229, 57, 53, 1)",
+        light: "rgba(239, 154, 154, 1)",
+        contrastText: "rgba(255, 255, 255, 1)",
+      },
+      warning: {
+        main: "rgba(255, 171, 64, 1)",
+        dark: "rgba(255, 145, 0, 1)",
+        light: "rgba(255, 209, 128, 1)",
+        contrastText: "rgba(0, 0, 0, 0.87)",
+      },
+      success: {
+        main: "rgba(38, 166, 154, 1)",
+        dark: "rgba(0, 121, 107, 1)",
+        light: "rgba(128, 203, 196, 1)",
+        contrastText: "rgba(255, 255, 255, 0.87)",
+      },
+      background: {
+        default: "rgba(2, 6, 23, 1)",
+        paper: "rgba(17, 19, 31, 1)",
+      },
+      action: {
+        active: "rgba(255, 255, 255, 0.56)",
+        hover: "rgba(255, 255, 255, 0.08)",
+        selected: "rgba(255, 255, 255, 0.16)",
+        disabledBackground: "rgba(255, 255, 255, 0.12)",
+        focus: "rgba(255, 255, 255, 0.12)",
+        disabled: "rgba(255, 255, 255, 0.38)",
+      },
+      common: {
+        white: "rgba(255, 255, 255, 1)",
+        black: "rgba(0, 0, 0, 1)",
+      },
+      divider: "rgba(255, 255, 255, 0.12)",
+      backgroundPaperElevation: {
+        0: "rgba(17,19,31,1.0)",
+        1: "rgba(20,22,35,1.0)",
+        2: "rgba(23,25,39,1.0)",
+        3: "rgba(26,28,43,1.0)",
+        4: "rgba(29,31,47,1.0)",
+        5: "rgba(32,34,51,1.0)",
+        6: "rgba(35,37,55,1.0)",
+        7: "rgba(38,40,59,1.0)",
+        8: "rgba(41,43,63,1.0)",
+        9: "rgba(44,46,67,1.0)",
+        10: "rgba(47,49,71,1.0)",
+        11: "rgba(50,52,75,1.0)",
+        12: "rgba(53,55,79,1.0)",
+        13: "rgba(56,58,83,1.0)",
+        14: "rgba(59,61,87,1.0)",
+        15: "rgba(62,64,91,1.0)",
+        16: "rgba(57,63,87,1.0)",
+      },
+    },
+    paletteExt: {
+      primary: {
+        hover: "rgba(142, 86, 252, 0.08)",
+        selected: "rgba(142, 86, 252, 0.16)",
+        focus: "rgba(142, 86, 252, 0.12)",
+        focusVisible: "rgba(142, 86, 252, 0.3)",
+        outlineBorder: "rgba(142, 86, 252, 0.5)",
+      },
+      secondary: {
+        tonal: "rgba(255,255,255,0.1)",
+      },
+    },
+  })
+
+  return {
+    ...baseTheme,
+    components: {
+      MuiCssBaseline: {
+        styleOverrides: {
+          "html, body, *": {
+            scrollbarWidth: "none",
+            msOverflowStyle: "none",
+          },
+
+          "html:hover, body:hover, *:hover": {
+            scrollbarWidth: "thin",
+            scrollbarColor: `${baseTheme.palette.divider} transparent`,
+          },
+
+          // Global styles for DataGrid filter popup
+          ".MuiDataGrid-panelContent": {
+            borderRadius: "16px !important",
+            "& .MuiPaper-root": {
+              borderRadius: "16px !important",
+            },
+          },
+          ".MuiDataGrid-filterForm": {
+            borderRadius: "16px !important",
+            "& .MuiInputBase-root": {
+              borderRadius: "16px !important",
+              "& fieldset": {
+                borderRadius: "16px !important",
+              },
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderRadius: "16px !important",
+              },
+            },
+            "& .MuiTextField-root": {
+              "& .MuiInputBase-root": {
+                borderRadius: "16px !important",
+                "& fieldset": {
+                  borderRadius: "16px !important",
+                },
+                "& .MuiOutlinedInput-notchedOutline": {
+                  borderRadius: "16px !important",
+                },
+              },
+            },
+          },
+          ".MuiDataGrid-filterFormValueInput": {
+            "& .MuiInputBase-root": {
+              borderRadius: "16px !important",
+              "& fieldset": {
+                borderRadius: "16px !important",
+              },
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderRadius: "16px !important",
+              },
+            },
+          },
+        },
+      },
+      MuiDataGrid: {
+        styleOverrides: {
+          root: {
+            // Main DataGrid styling can go here if needed
+          },
+          panelContent: {
+            borderRadius: "16px !important",
+          },
+          filterForm: {
+            "& .MuiInputBase-root": {
+              borderRadius: "10px !important",
+              "& fieldset": {
+                borderRadius: "10px !important",
+              },
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderRadius: "10px !important",
+              },
+            },
+          },
+          filterFormValueInput: {
+            "& .MuiInputBase-root": {
+              borderRadius: "10px !important",
+              "& fieldset": {
+                borderRadius: "10px !important",
+              },
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderRadius: "10px !important",
+              },
+            },
+          },
+        },
+      },
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            textTransform: "none",
+            borderRadius: "10px",
+          },
+        },
+        variants: [
+          {
+            props: { color: "secondary", variant: "contained" },
+            style: {
+              border: `1px solid ${baseTheme.palette.divider}`,
+              background: baseTheme.paletteExt?.secondary?.tonal?.toString(),
+            },
+          },
+          {
+            props: { color: "secondary", variant: "outlined" },
+            style: {
+              border: `1px solid ${baseTheme.palette.divider}`,
+            },
+          },
+        ],
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            textTransform: "none",
+            color: baseTheme.palette.text.secondary,
+            "&.Mui-selected": {
+              color: baseTheme.palette.text.primary,
+            },
+          },
+        },
+      },
+      MuiTabs: {
+        styleOverrides: {
+          root: {
+            background: baseTheme.palette.backgroundPaperElevation?.[1],
+          },
+        },
+      },
+      MuiToggleButtonGroup: {
+        styleOverrides: {
+          root: {
+            ".MuiToggleButtonGroup-firstButton": {
+              borderRadius: "10px 0 0 10px",
+            },
+            ".MuiToggleButtonGroup-lastButton": {
+              borderRadius: "0 10px 10px 0",
+            },
+          },
+        },
+      },
+      MuiToggleButton: {
+        styleOverrides: {
+          root: {
+            textTransform: "none",
+            padding: "6px 16px",
+          },
+        },
+      },
+      MuiSelect: {
+        variants: [
+          {
+            props: { variant: "filled" },
+            style: {
+              borderRadius: "10px",
+              "::before, ::after": {
+                visibility: "collapse",
+              },
+              ".MuiInputBase-input": {
+                padding: "6px 16px",
+                borderRadius: "10px",
+              },
+            },
+          },
+        ],
+      },
+      MuiDrawer: {
+        styleOverrides: {
+          paper: {
+            border: "none",
+            boxShadow: "4px 0 8px -4px rgba(0, 0, 0, 0.3)",
+          },
+        },
+      },
+      MuiFab: {
+        styleOverrides: {
+          root: {
+            background: baseTheme.paletteExt?.secondary?.tonal,
+          },
+        },
+        variants: [
+          {
+            props: { color: "primary" },
+            style: {
+              background: baseTheme.palette.primary.main,
+            },
+          },
+        ],
+      },
+    },
+
+    componentsExt: {
+      JoggingPanel: {
+        JoggingCartesian: {
+          Axis: {
+            X: {
+              backgroundColor: "rgba(215, 66, 56, 1)",
+              borderColor: "rgba(215, 66, 56, 1)",
+              buttonBackgroundColor: {
+                default: "rgba(241, 77, 66, 1)",
+                pressed: "rgba(138, 41, 35, 1)",
+                hovered: "rgba(241, 77, 66, 1)",
+                disabled: "rgba(241, 77, 66, 1)",
+              },
+              color: "rgba(255, 198, 198, 1)",
+              labelColor: baseTheme.palette.text.primary,
+            },
+            Y: {
+              backgroundColor: "rgba(20, 151, 108, 1)",
+              borderColor: "rgba(20, 151, 108, 1)",
+              buttonBackgroundColor: {
+                default: "rgba(28, 188, 135, 1)",
+                pressed: "rgba(11, 89, 63, 1)",
+                disabled: "rgba(28, 188, 135, 1)",
+                hovered: "rgba(28, 188, 135, 1)",
+              },
+              color: "rgba(215, 255, 242, 1)",
+              labelColor: baseTheme.palette.text.primary,
+            },
+            Z: {
+              backgroundColor: "rgba(1, 87, 155, 1)",
+              borderColor: "rgba(1, 87, 155, 1)",
+              buttonBackgroundColor: {
+                default: "rgba(2, 136, 209, 1)",
+                pressed: "rgba(2, 64, 114, 1)",
+                disabled: "rgba(2, 136, 209, 1)",
+                hovered: "rgba(2, 136, 209, 1)",
+              },
+              color: "rgba(210, 239, 255, 1)",
+              labelColor: baseTheme.palette.text.primary,
+            },
+          },
+        },
+        JoggingJoint: {
+          Joint: {
+            arrowColor: baseTheme.palette.text.primary,
+          },
+        },
+        VelocitySlider: {
+          sliderLegendColor: baseTheme.palette.text.primary,
+        },
+      },
+    },
+  } as Theme
+}

package/src/themes/createLightTheme.ts

@@ -0,0 +1,8 @@
+import { createDarkTheme } from "./createDarkTheme"
+
+export function createLightTheme() {
+  // Keep the dark theme until we support a light theme
+  const theme = createDarkTheme()
+  theme.palette.mode = "light"
+  return theme
+}

package/src/themes/themeTypes.ts

@@ -0,0 +1,96 @@
+type NovaColorPaletteExtension = {
+  paletteExt?: {
+    primary?: {
+      hover?: string
+      selected?: string
+      focus?: string
+      focusVisible?: string
+      outlineBorder?: string
+    }
+    secondary?: {
+      tonal?: string
+    }
+  }
+}
+
+export interface AxisControlComponentColors {
+  color?: string
+  borderColor?: string
+  backgroundColor?: string
+  buttonBackgroundColor?: {
+    default?: string
+    pressed?: string
+    disabled?: string
+    hovered?: string
+  }
+  labelColor?: string
+}
+
+interface NovaComponentsExtension {
+  componentsExt?: {
+    JoggingPanel?: {
+      JoggingCartesian?: {
+        Axis?: {
+          X?: AxisControlComponentColors
+          Y?: AxisControlComponentColors
+          Z?: AxisControlComponentColors
+          CustomRotation?: AxisControlComponentColors
+        }
+      }
+      JoggingJoint?: {
+        Joint?: {
+          arrowColor?: string
+        }
+      }
+      VelocitySlider?: {
+        sliderLegendColor?: string
+      }
+    }
+  }
+}
+
+interface BackgroundPaperElevation {
+  0?: string
+  1?: string
+  2?: string
+  3?: string
+  4?: string
+  5?: string
+  6?: string
+  7?: string
+  8?: string
+  9?: string
+  10?: string
+  11?: string
+  12?: string
+  13?: string
+  14?: string
+  15?: string
+  16?: string
+  17?: string
+  18?: string
+  19?: string
+  20?: string
+  21?: string
+  22?: string
+  23?: string
+  24?: string
+}
+
+declare module "@mui/material/styles" {
+  interface Palette {
+    tertiary: Palette["primary"]
+    backgroundPaperElevation?: BackgroundPaperElevation
+  }
+
+  interface PaletteOptions {
+    tertiary?: PaletteOptions["primary"]
+    backgroundPaperElevation?: BackgroundPaperElevation
+  }
+
+  interface Theme extends NovaComponentsExtension, NovaColorPaletteExtension {}
+
+  interface ThemeOptions
+    extends NovaComponentsExtension,
+      NovaColorPaletteExtension {}
+}

package/src/themes/theming.ts

@@ -0,0 +1,29 @@
+"use client"
+
+import {
+  createTheme,
+  type Theme,
+  type ThemeOptions,
+} from "@mui/material/styles"
+import { createDarkTheme } from "./createDarkTheme"
+import { createLightTheme } from "./createLightTheme"
+
+/**
+ * Create the default Wandelbots Nova Material UI theme, overriding
+ * any defaults with the provided theme options.
+ */
+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
+  }
+
+  const baseTheme = isDark ? createDarkTheme() : createLightTheme()
+
+  return createTheme(baseTheme, opts)
+}

package/src/wb-icons.ts

@@ -0,0 +1,3 @@
+// Icon components (SVG icons for UI and safety bar)
+export * from "./components/safetyBar/icons"
+export * from "./icons"