@wandelbots/wandelbots-js-react-components 1.3.0 → 1.3.2

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

@@ -0,0 +1,114 @@
+import Editor, { useMonaco, type Monaco } from "@monaco-editor/react"
+import React, { useEffect } from "react"
+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"
+
+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 */
+  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()
+
+  async function setupEditor(monaco: Monaco) {
+    // Register and configure the Wandelscript language
+    monaco.languages.register({ id: "wandelscript" })
+
+    monaco.languages.setLanguageConfiguration("wandelscript", {
+      comments: {
+        lineComment: "#",
+      },
+      brackets: [
+        ["(", ")"],
+        ["[", "]"],
+      ],
+      autoClosingPairs: [
+        { open: "[", close: "]" },
+        { open: "(", close: ")" },
+      ],
+      surroundingPairs: [
+        { open: "[", close: "]" },
+        { open: "(", close: ")" },
+      ],
+    })
+
+    // 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],
+    })
+
+    shikiToMonaco(highlighter, monaco)
+
+    // Override the generated shiki theme to use shiki syntax highlighting
+    // but vscode colors
+    monaco.editor.defineTheme(shikiTheme, {
+      base: theme.palette.mode === "dark" ? "vs-dark" : "vs",
+      inherit: true,
+      rules: [],
+      colors: {
+        // "editor.background": colors.backgroundDefault,
+        // "editorLineNumber.foreground": "#797979",
+        // "editorLineNumber.activeForeground": "#e9e9e9",
+      },
+    })
+
+    if (props.monacoSetup) {
+      props.monacoSetup(monaco)
+    }
+
+
+    // Define some custom keybindings
+      // monaco.editor.addCommand({
+      //   id: "save",
+      //   run: () => props.onSave ? props.onSave(monaco.editor.getModels()[0]!.getValue()) : null,
+      // })
+
+      // monaco.editor.addKeybindingRule({
+      //   keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
+      //   command: "save",
+      // })
+  }
+
+  useEffect(() => {
+    if (monaco) {
+      setupEditor(monaco)
+    }
+  }, [monaco])
+
+  if (!monaco) {
+    return null
+  }
+
+  return (
+    <Editor
+      value={props.code}
+      onChange={props.onChange}
+      defaultLanguage="wandelscript"
+      theme={shikiTheme}
+      options={{
+        minimap: { enabled: false },
+        wordWrap: "on",
+        automaticLayout: true,
+        // ...props.monacoOptions,
+      }}
+    />
+  )
+}

package/src/components/wandelscript-editor/wandelscript.tmLanguage.ts

@@ -0,0 +1,62 @@
+export default {
+  $schema:
+    "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
+  name: "wandelscript",
+  patterns: [
+    {
+      include: "#keywords",
+    },
+    {
+      include: "#strings",
+    },
+    {
+      include: "#comments",
+    },
+    {
+      include: "#functions",
+    },
+  ],
+  repository: {
+    keywords: {
+      patterns: [
+        {
+          name: "keyword.control.flow.wandelscript",
+          match:
+            "\\b(move|via|to|interrupt|def|False|True|for|if|else|elif|while|return|switch|activate|deactivate|print)\\b",
+        },
+      ],
+    },
+    strings: {
+      name: "string.quoted.double.wandelscript",
+      begin: '"',
+      end: '"',
+      patterns: [
+        {
+          name: "constant.character.escape.wandelscript",
+          match: "\\\\.",
+        },
+      ],
+    },
+    comments: {
+      patterns: [
+        {
+          begin: "#",
+          beginCaptures: {
+            "0": { name: "punctuation.definition.comment.wandelscript" },
+          },
+          end: "$",
+          name: "comment.line.number-sign.wandelscript",
+        },
+      ],
+    },
+    functions: {
+      patterns: [
+        {
+          match: "[a-zA-Z_-]+\\(",
+          name: "entity.name.function.wandelscript",
+        },
+      ],
+    },
+  },
+  scopeName: "source.wandelscript",
+}

package/src/declarations.d.ts

@@ -0,0 +1,10 @@
+declare module "*.glb" {
+  const content: string
+  export default content
+}
+
+// Type for svg imports handled by vite config
+declare module "*.svg" {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default content;
+}

package/src/i18n/config.ts

@@ -0,0 +1,27 @@
+import deJSON from "./locales/de/translations.json"
+import enJSON from "./locales/en/translations.json"
+import i18next from "i18next"
+import type { i18n } from "i18next"
+import LanguageDetector from "i18next-browser-languagedetector"
+import { initReactI18next } from "react-i18next"
+
+const i18n: i18n = i18next.createInstance()
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    supportedLngs: ["en", "de"],
+    resources: {
+      en: {
+        translations: enJSON,
+      },
+      de: {
+        translations: deJSON,
+      },
+    },
+    ns: ["translations"],
+    defaultNS: "translations",
+  })
+
+export default i18n

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

@@ -0,0 +1,12 @@
+{
+  "Jogging.Cartesian.Translation.velocityMmPerSec.lb": "{{amount}} mm/s",
+  "Jogging.Cartesian.Rotation.velocityDegPerSec.lb": "{{amount}}°/s",
+  "Jogging.Velocity.lb": "Geschwindigkeit",
+  "General.degree.variable": "{{amount}}°",
+  "General.mm.variable": "{{amount}}mm",
+  "Jogging.Cartesian.MotionType.lb": "Bewegungstyp",
+  "Jogging.Cartesian.Translation.bt": "Translation",
+  "Jogging.Cartesian.Rotation.bt": "Rotation",
+  "Jogging.Joints.JointValues.lb": "Gelenkwerte",
+  "Jogging.Increment.Continuous.dd": "Fortlaufend"
+}

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

@@ -0,0 +1,12 @@
+{
+  "Jogging.Cartesian.Translation.velocityMmPerSec.lb": "{{amount}} mm/s",
+  "Jogging.Cartesian.Rotation.velocityDegPerSec.lb": "{{amount}}°/s",
+  "Jogging.Velocity.lb": "Velocity",
+  "General.degree.variable": "{{amount}}°",
+  "General.mm.variable": "{{amount}}mm",
+  "Jogging.Cartesian.MotionType.lb": "Motion type",
+  "Jogging.Cartesian.Translation.bt": "Translation",
+  "Jogging.Cartesian.Rotation.bt": "Rotation",
+  "Jogging.Joints.JointValues.lb": "Joint values",
+  "Jogging.Increment.Continuous.dd": "Continuous"
+}

package/src/icons/arrowForwardFilled.tsx

@@ -0,0 +1,7 @@
+export function ArrowForwardFilledIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M12 4L10.59 5.41L16.17 11H4V13H16.17L10.59 18.59L12 20L20 12L12 4Z" fill="white" />
+    </svg>
+  );
+}

package/src/icons/axis-x.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="10" viewBox="0 0 19 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.13114 0.312406C5.48225 0.663519 5.48225 1.23278 5.13114 1.5839L3.06975 3.64528H15.5109L13.4496 1.58402C13.0985 1.2329 13.0985 0.66364 13.4496 0.312527C13.8007 -0.0385848 14.37 -0.0385848 14.7211 0.312527L18.3174 3.90884C18.6685 4.25996 18.6685 4.82922 18.3174 5.18033L14.7211 8.77665C14.37 9.12776 13.8007 9.12776 13.4496 8.77665C13.0985 8.42554 13.0985 7.85627 13.4496 7.50516L15.5113 5.44344H3.06954L5.13114 7.50504C5.48225 7.85615 5.48225 8.42542 5.13114 8.77653C4.78003 9.12764 4.21076 9.12764 3.85965 8.77653L0.263334 5.18021C-0.087778 4.8291 -0.087778 4.25983 0.263334 3.90872L3.85965 0.312406C4.21076 -0.0387058 4.78003 -0.0387058 5.13114 0.312406Z" fill="white"/>
+</svg>

package/src/icons/axis-y.svg

@@ -0,0 +1,3 @@
+<svg width="19" height="10" viewBox="0 0 19 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.13114 0.312406C5.48225 0.663519 5.48225 1.23278 5.13114 1.5839L3.06975 3.64528H15.5109L13.4496 1.58402C13.0985 1.2329 13.0985 0.66364 13.4496 0.312527C13.8007 -0.0385848 14.37 -0.0385848 14.7211 0.312527L18.3174 3.90884C18.6685 4.25996 18.6685 4.82922 18.3174 5.18033L14.7211 8.77665C14.37 9.12776 13.8007 9.12776 13.4496 8.77665C13.0985 8.42554 13.0985 7.85627 13.4496 7.50516L15.5113 5.44344H3.06954L5.13114 7.50504C5.48225 7.85615 5.48225 8.42542 5.13114 8.77653C4.78003 9.12764 4.21076 9.12764 3.85965 8.77653L0.263334 5.18021C-0.087778 4.8291 -0.087778 4.25983 0.263334 3.90872L3.85965 0.312406C4.21076 -0.0387058 4.78003 -0.0387058 5.13114 0.312406Z" fill="white"/>
+</svg>

package/src/icons/axis-z.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.52182 14.8114C9.87293 14.4603 9.87293 13.8911 9.52182 13.54C9.17071 13.1888 8.60144 13.1888 8.25033 13.54L6.18885 15.6014L6.18885 3.15999L8.25033 5.22147C8.60144 5.57258 9.17071 5.57258 9.52182 5.22147C9.87293 4.87036 9.87293 4.30109 9.52182 3.94998L5.9255 0.353666C5.57439 0.00255379 5.00513 0.00255378 4.65401 0.353666L1.0577 3.94998C0.706587 4.30109 0.706587 4.87036 1.0577 5.22147C1.40881 5.57258 1.97808 5.57258 2.32919 5.22147L4.3907 3.15996L4.3907 15.6015L2.32919 13.54C1.97808 13.1888 1.40881 13.1888 1.0577 13.54C0.706588 13.8911 0.706588 14.4603 1.0577 14.8114L4.65402 18.4078C5.00513 18.7589 5.57439 18.7589 5.92551 18.4078L9.52182 14.8114Z" fill="white"/>
+</svg>

package/src/icons/expandFilled.tsx

@@ -0,0 +1,11 @@
+export function ExpandFilledIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M16.59 8.29492L12 12.8749L7.41 8.29492L6 9.70492L12 15.7049L18 9.70492L16.59 8.29492Z"
+        fill="white"
+        fill-opacity="0.8"
+      />
+    </svg>
+  );
+}

package/src/icons/home.tsx

@@ -0,0 +1,12 @@
+export function HomeIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5 22C3.34315 22 2 20.6569 2 19V11.9225C2 10.7074 2.55236 9.55811 3.50122 8.79902L12 2L20.4988 8.79902C21.4476 9.55811 22 10.7074 22 11.9225V19C22 20.6569 20.6569 22 19 22H5ZM20.5 11.9225V19C20.5 19.8284 19.8284 20.5 19 20.5H16V14C16 12.8954 15.1046 12 14 12H10C8.89543 12 8 12.8954 8 14V20.5H5C4.17157 20.5 3.5 19.8284 3.5 19V11.9225C3.5 11.163 3.84522 10.4448 4.43826 9.97033L12 3.92094L19.5617 9.97033C20.1548 10.4448 20.5 11.163 20.5 11.9225Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/src/icons/infoOutlined.tsx

@@ -0,0 +1,10 @@
+export function InfoOutlinedIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M11 7H13V9H11V7ZM11 11H13V17H11V11ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/src/icons/jogging.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9991 0.999878L15.4045 4.40529L14.1795 5.6303L12.8653 4.31611V8.16493H11.1329V4.31611L9.88895 5.56007L8.66394 4.33506L11.9991 0.999878ZM11.1329 15.6649H12.8653V19.684L14.1795 18.3699L15.4045 19.5949L11.9991 23.0003L8.59371 19.5949L9.81872 18.3699L11.1329 19.684V15.6649ZM4.31583 11.1337H8.16412V12.8662H4.31583L5.63003 14.1803L4.40502 15.4054L0.999603 11.9999L4.40502 8.59452L5.63003 9.81953L4.31583 11.1337ZM19.6838 12.8662H15.6641V11.1337H19.6838L18.3696 9.81953L19.5946 8.59452L23 11.9999L19.5946 15.4054L18.3696 14.1803L19.6838 12.8662Z" fill="currentColor"/>
+</svg>

package/src/icons/robot.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.3587 14.2499V15.4937V17.1848H8.04982H12.298H13.9891V15.4937V13.663L10.1958 9.86972L9 8.67391L9.85854 7.81537L10.1958 7.47811L11.0543 6.61956L11.6194 7.18463L12.2502 7.81537L12.8152 8.38043L14.011 7.18463L14.5542 6.64146L15.75 5.44565L14.5542 4.24984L12.2502 1.94581L11.0543 0.75L9.85854 1.94581L3.44581 8.35854L2.25 9.55435L3.44581 10.7502L6.35862 13.663V14.2499H6.3587ZM8.04982 14.2499V15.4937H12.298V14.3635L7.80419 9.86972L6.60839 8.67391L7.80419 7.47811L9.85854 5.42376L9.86612 5.41618L9.32295 4.87301L4.64161 9.55435L7.5545 12.4672L8.04982 12.9626V13.076H10.1738L11.3478 14.2499H8.04982ZM11.0543 4.22795L10.7599 4.52241L10.2167 3.97924L11.0543 3.14161L13.3584 5.44565L12.8152 5.98882L12.2502 5.42376L11.0543 4.22795Z" fill="#38C6F4"/>
+</svg>

package/src/icons/robot.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+export function RobotIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M8.47826 18.9999V21.2219V22.913H10.1694H16.961H18.6522V21.2219V18.2174L13.1958 12.761L12 11.5652L13.1958 10.3694L13.5433 10.0219L14.7391 8.82609L15.8911 9.9781L15.9349 10.0219L17.087 11.1739L18.2828 9.9781L19.8042 8.45668L21 7.26087L19.8042 6.06506L15.9349 2.19581L14.7391 1L13.5433 2.19581L4.19581 11.5433L3 12.7391L4.19581 13.9349L8.47817 18.2173V18.9999H8.47826ZM10.1694 18.9999V21.2219H16.961V18.9179L10.8042 12.761L9.60839 11.5652L10.8042 10.3694L13.5433 7.63028L13.5534 7.62018L12.032 6.09875L5.39161 12.7391L9.67407 17.0216L10.0872 17.4347H13.5651L15.1303 18.9999H10.1694ZM18.6084 7.26087L17.093 8.7763L13.2237 4.90705L14.7391 3.39161L18.6084 7.26087Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/src/icons/rotation.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5 12C18.5 8.68629 15.8137 6 12.5 6C9.18629 6 6.5 8.68629 6.5 12C6.5 15.3137 9.18629 18 12.5 18" stroke="white" stroke-width="1.5" stroke-linecap="round" fill="none"/>
+<path d="M16.5 11L18.5 13.5L20.5 11" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/wbLogo.tsx

@@ -0,0 +1,21 @@
+type WBLogoProps = {
+  width?: number;
+  fillColor?: string;
+};
+
+export function WBLogoIcon({ width = 21, fillColor = "white" }: WBLogoProps) {
+  return (
+    <svg
+      width={`${width}`}
+      height={`${1.19 * width}`}
+      viewBox="0 0 21 25"
+      fill={fillColor}
+      style={{ transition: "fill 2s ease" }}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M0 8.25553V14.2168L17.0228 4.47097L14.4197 0L0 8.25553Z" />
+      <path d="M9.70299 11.6758L0 17.2112V23.1846L9.70299 17.6492V11.6758Z" />
+      <path d="M11.8886 19.4131L2.22571 24.993H15.5035V19.4131H11.8886Z" />
+    </svg>
+  );
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from "./components/robots/SupportedRobot"
+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"

package/src/themes/color.tsx

@@ -0,0 +1,74 @@
+import React, { ReactNode, useEffect, useState } from "react";
+
+export function ColorSection(props: { name: string; children: ReactNode }) {
+  return (
+    <>
+      <h2>{props.name}</h2>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+          gap: "20px",
+        }}
+      >
+        {props.children}
+      </div>
+    </>
+  );
+}
+
+export function Color({ name, color }: { name: string; color: string }) {
+  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",
+        }}
+      />
+      <span>{name}</span>
+      <br />
+      <span
+        style={{
+          color: "gray",
+          fontSize: "0.9em",
+          fontFamily: "monospace",
+        }}
+      >
+        {showCopied ? "Copied ✔︎" : color}
+      </span>
+    </li>
+  );
+}

package/src/themes/theme.ts

@@ -0,0 +1,150 @@
+import { ThemeOptions } from '@mui/material/styles';
+import { wbTheme } from './wbTheme';
+
+// TODO: Is all of this theme name foo actually necessary?
+
+type ThemeName = 'wandelbots'
+
+export const allThemes = {
+  wb: wbTheme,
+}
+
+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;
+    }
+  }
+}

package/src/themes/wbTheme.stories.tsx

@@ -0,0 +1,64 @@
+import { wbTheme } from "./wbTheme";
+import { Meta, StoryObj } from "@storybook/react";
+import { Color, ColorSection } from "./color";
+
+const ColorPalette = () => {
+  return (
+    <div
+      style={{
+        fontFamily: "sans-serif",
+      }}
+    >
+      <ColorSection name="Palette">
+        <Color name="Primary" color={wbTheme.palette.primary.main} />
+        <Color name="Secondary" color={wbTheme.palette.secondary.main} />
+        <Color name="Background" color={wbTheme.palette.background.default} />
+      </ColorSection>
+      <ColorSection name="Text">
+        <Color name="Primary" color={wbTheme.palette.text.primary} />
+        <Color name="Secondary" color={wbTheme.palette.text.secondary} />
+      </ColorSection>
+      <ColorSection name="Button">
+        <Color
+          name="Primary Background"
+          color={wbTheme.buttonPrimary.background}
+        />
+        <Color name="Primary Text" color={wbTheme.buttonPrimary.text} />
+        <Color
+          name="Secondary Background"
+          color={wbTheme.buttonSecondary.background}
+        />
+        <Color name="Secondary Text" color={wbTheme.buttonSecondary.text} />
+        <Color name="Back Background" color={wbTheme.buttonBack.background} />
+        <Color name="Back Text" color={wbTheme.buttonBack.text} />
+      </ColorSection>
+      <ColorSection name="Input Field">
+        <Color name="Background" color={wbTheme.inputField.background} />
+        <Color name="Text" color={wbTheme.inputField.text} />
+        <Color
+          name="Unit Background"
+          color={wbTheme.inputField.unitBackground}
+        />
+        <Color name="Unit Text" color={wbTheme.inputField.unitText} />
+      </ColorSection>
+      <ColorSection name="Sidebar">
+        <Color name="Background" color={wbTheme.sidebar.background} />
+        <Color
+          name="Background Selected"
+          color={wbTheme.sidebar.backgroundSelected}
+        />
+        <Color name="Selected" color={wbTheme.sidebar.selected} />
+      </ColorSection>
+    </div>
+  );
+};
+
+const meta: Meta<typeof ColorPalette> = {
+  component: ColorPalette,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ColorPalette>;
+
+export const colorPalette: Story = {};