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

package/src/components/wandelscript-editor/WandelscriptEditor.tsx

@@ -1,29 +1,46 @@
 import Editor, { useMonaco, type Monaco } from "@monaco-editor/react"
-import React, { useEffect } from "react"
-import { createHighlighter, type BundledTheme } from "shiki"
+import { useEffect, useRef, useState } from "react"
+import type {
+  BundledLanguage,
+  HighlighterGeneric} from "shiki";
+import {
+  createHighlighter,
+  type BundledTheme,
+} from "shiki"
 import { shikiToMonaco } from "@shikijs/monaco"
 
 import wandelscriptTextmateGrammar from "./wandelscript.tmLanguage"
 import { useTheme } from "@mui/material"
-import { editor } from "monaco-editor"
+import type { editor } from "monaco-editor"
 
 type WandelscriptEditorProps = {
   /** The current Wandelscript content of the code editor (controlled component) */
   code?: string
   /** What to do when the user edits the code */
-  onChange?: (code: string|undefined, ev: editor.IModelContentChangedEvent) => void
-  /** Callback to further configure monaco on startup if needed */
+  onChange?: (
+    code: string | undefined,
+    ev: editor.IModelContentChangedEvent,
+  ) => void
+  /** Options for monaco editor */
   monacoOptions?: editor.IEditorOptions
   /** Callback to further configure monaco on startup if needed */
   monacoSetup?: (monaco: Monaco) => void
 }
 
-const shikiTheme: BundledTheme = "dark-plus"
-
 /** A Monaco (VSCode-style) embedded code editor with Wandelscript syntax highlighting */
 export const WandelscriptEditor = (props: WandelscriptEditorProps) => {
   const monaco = useMonaco()
   const theme = useTheme()
+  const shikiHighlighterRef = useRef<HighlighterGeneric<
+    BundledLanguage,
+    BundledTheme
+  > | null>(null)
+
+  const [activeShikiTheme, setActiveShikiTheme] =
+    useState<BundledTheme>("dark-plus")
+
+  const targetShikiTheme =
+    theme.palette.mode === "dark" ? "dark-plus" : "light-plus"
 
   async function setupEditor(monaco: Monaco) {
     // Register and configure the Wandelscript language
@@ -50,38 +67,46 @@ export const WandelscriptEditor = (props: WandelscriptEditorProps) => {
     // Monaco doesn't support TextMate grammar config directly, so we
     // use Shiki as an intermediary
 
-    const highlighter = await createHighlighter({
-      // Our textmate grammar doesn't quite conform to the expected type
-      // here; I'm not sure what the missing properties mean exactly
-      langs: [wandelscriptTextmateGrammar as any],
-      themes: [shikiTheme],
-    })
+    if (!shikiHighlighterRef.current) {
+      shikiHighlighterRef.current = await createHighlighter({
+        // Our textmate grammar doesn't quite conform to the expected type
+        // here; I'm not sure what the missing properties mean exactly
+        langs: [wandelscriptTextmateGrammar as any],
+        themes: ["dark-plus", "light-plus"],
+      })
+    }
 
-    shikiToMonaco(highlighter, monaco)
+    shikiToMonaco(shikiHighlighterRef.current, monaco)
 
     // Override the generated shiki theme to use shiki syntax highlighting
     // but vscode colors
-    monaco.editor.defineTheme(shikiTheme, {
+    monaco.editor.defineTheme(targetShikiTheme, {
       base: theme.palette.mode === "dark" ? "vs-dark" : "vs",
       inherit: true,
       rules: [],
-      colors: {
-        "editor.background": "#262F42",
-        "editorLineNumber.foreground": "#797979",
-        "editorLineNumber.activeForeground": "#e9e9e9",
-      },
+      colors:
+        theme.palette.mode === "dark"
+          ? {
+              "editor.background": "#262F42",
+              "editorLineNumber.foreground": "#797979",
+              "editorLineNumber.activeForeground": "#e9e9e9",
+              "editor.lineHighlightBorder": "#494949",
+            }
+          : {},
     })
 
     if (props.monacoSetup) {
       props.monacoSetup(monaco)
     }
+
+    setActiveShikiTheme(targetShikiTheme)
   }
 
   useEffect(() => {
     if (monaco) {
       setupEditor(monaco)
     }
-  }, [monaco])
+  }, [monaco, targetShikiTheme])
 
   if (!monaco) {
     return null
@@ -92,7 +117,7 @@ export const WandelscriptEditor = (props: WandelscriptEditorProps) => {
       value={props.code}
       onChange={props.onChange}
       defaultLanguage="wandelscript"
-      theme={shikiTheme}
+      theme={activeShikiTheme}
       options={{
         minimap: { enabled: false },
         wordWrap: "on",
@@ -101,4 +126,4 @@ export const WandelscriptEditor = (props: WandelscriptEditorProps) => {
       }}
     />
   )
-}
+}

package/src/externalizeComponent.tsx

@@ -0,0 +1,37 @@
+import { ThemeProvider } from "@emotion/react"
+import { createMUIThemeFromNova, createNovaTheme } from "./themes/theming"
+import type { FC } from "react"
+import { useTheme } from "@mui/material"
+import { I18nextProvider } from "react-i18next"
+// @ts-expect-error invalid type-only import error
+import i18n from "./i18n/config"
+
+/**
+ * Our components require a certain context that may or may not
+ * be provided by the user application; this wrapper ensures
+ * they can be used either way.
+ */
+export function externalizeComponent<T>(
+  Component: (props: T) => React.ReactNode,
+) {
+  return (props: T) => (
+    <NovaComponentsProvider>
+      <Component {...(props as T & JSX.IntrinsicAttributes)} />
+    </NovaComponentsProvider>
+  )
+}
+
+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>
+  )
+}

package/src/i18n/locales/de/translations.json

@@ -8,5 +8,6 @@
   "Jogging.Cartesian.Translation.bt": "Translation",
   "Jogging.Cartesian.Rotation.bt": "Rotation",
   "Jogging.Joints.JointValues.lb": "Gelenkwerte",
-  "Jogging.Increment.Continuous.dd": "Fortlaufend"
+  "Jogging.Increment.Continuous.dd": "Fortlaufend",
+  "Jogging.Cartesian.Orientation.lb": "Orientierung"
 }

package/src/i18n/locales/en/translations.json

@@ -8,5 +8,6 @@
   "Jogging.Cartesian.Translation.bt": "Translation",
   "Jogging.Cartesian.Rotation.bt": "Rotation",
   "Jogging.Joints.JointValues.lb": "Joint values",
-  "Jogging.Increment.Continuous.dd": "Continuous"
+  "Jogging.Increment.Continuous.dd": "Continuous",
+  "Jogging.Cartesian.Orientation.lb": "Orientation"
 }

package/src/icons/orientation-coord-system.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.7099 16.2621L20.6205 16.608L21.2793 18.679L18.3573 17.2179V9.85689L12.0715 6.71409V2.89269L13.3795 4.21073L14.1921 3.40503L11.5179 0.714233L8.81153 3.40223L9.61723 4.21363L10.9286 2.91113V6.71413L4.64295 9.85693V17.2179L1.72915 18.6747L2.38625 16.6083L1.29687 16.2625L0.0714111 20.1429L3.89721 21.2858L4.24307 20.1966L2.40729 19.6134L5.28149 18.1766L11.5001 21.2856L17.7183 18.1764L20.5947 19.6146L18.7635 20.1964L19.1094 21.2856L22.9286 20.1427L21.7099 16.2621ZM11.5001 12.6463L6.55967 10.1763L11.5001 7.70633L16.4409 10.1767L11.5001 12.6463ZM12.0715 13.6388L17.2145 11.0672V17.1504L12.0715 19.722V13.6388ZM5.78567 11.0672L10.9287 13.6388V19.722L5.78567 17.1504V11.0672Z" fill="currentColor"/>
+</svg>

package/src/icons/orientation-tool.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.87 7.12001L13.56 8.81002L16.55 5.82001L12.82 2.09001L11.87 1.14001L4.21001 8.80001L3.26001 9.75001L7.25001 13.74V17.18H14.8V13.63L10.08 8.91001L11.87 7.12001ZM10.96 4.13001L11.87 3.22001L14.47 5.82001L13.56 6.73001L10.96 4.13001ZM8.71001 14.37H12.45L11.11 13.03L11.07 12.99H8.57001L5.32001 9.74001L9.91001 5.15001L10.83 6.07001L8.00001 8.90001L13.33 14.23V15.71H8.70001V14.36L8.71001 14.37Z" fill="currentColor" fill-opacity="0.8"/>
+</svg>

package/src/index.ts

@@ -1,10 +1,40 @@
-export * from "./components/wandelscript-editor/WandelscriptEditor"
-export * from "./components/robots/SupportedRobot"
-export * from "./components/robots/Robot"
-export * from "./components/robots/AxisConfig"
-export * from "./components/3d-viewport/PresetEnvironment"
-export * from "./components/3d-viewport/SafetyZonesRenderer"
-export * from "./components/jogging/JoggingCartesianAxisControl"
-export * from "./components/jogging/JoggingJointRotationControl"
-export * from "./components/jogging/JoggingPanel"
+import { externalizeComponent } from "./externalizeComponent"
+
+export type * from "./components/wandelscript-editor/WandelscriptEditor"
+import { WandelscriptEditor as WE } from "./components/wandelscript-editor/WandelscriptEditor"
+export const WandelscriptEditor = externalizeComponent(WE)
+
+export type * from "./components/robots/SupportedRobot"
+import { SupportedRobot as SR } from "./components/robots/SupportedRobot"
+export const SupportedRobot = externalizeComponent(SR)
+
+export type * from "./components/robots/Robot"
+import { Robot as R } from "./components/robots/Robot"
+export const Robot = externalizeComponent(R)
+
+export type * from "./components/3d-viewport/PresetEnvironment"
+import { PresetEnvironment as PE } from "./components/3d-viewport/PresetEnvironment"
+export const PresetEnvironment = externalizeComponent(PE)
+
+export type * from "./components/3d-viewport/SafetyZonesRenderer"
+import { SafetyZonesRenderer as SZR } from "./components/3d-viewport/SafetyZonesRenderer"
+export const SafetyZonesRenderer = externalizeComponent(SZR)
+
+export type * from "./components/jogging/JoggingCartesianAxisControl"
+import { JoggingCartesianAxisControl as JCAC } from "./components/jogging/JoggingCartesianAxisControl"
+export const JoggingCartesianAxisControl = externalizeComponent(JCAC)
+
+export type * from "./components/jogging/JoggingJointRotationControl"
+import { JoggingJointRotationControl as JJRC } from "./components/jogging/JoggingJointRotationControl"
+export const JoggingJointRotationControl = externalizeComponent(JJRC)
+
+export type { JoggingStore } from "./components/jogging/JoggingStore"
+export type * from "./components/jogging/JoggingPanel"
+import { JoggingPanel as JP } from "./components/jogging/JoggingPanel"
+export const JoggingPanel = externalizeComponent(JP)
+
+export type * from "./components/VelocitySlider"
+import { VelocitySlider as VS } from "./components/VelocitySlider"
+export const VelocitySlider = externalizeComponent(VS)
+
 export * from "./components/utils/hooks"

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