feat: config pane

packages/react/.ladle/components.tsx

@@ -7,20 +7,66 @@ import {
   ThemeProvider,
   ThemeProviderProps,
   OverlaysManager,
+  ThemeVariant,
   createThemes,
+  ResultThemeVars,
 } from "../src";
 import "./reset.css";
 import "../src/styles/global.css";
+import { ConfigPane, ConfigChangeEvent } from "./config-pane";
 
 export const Provider: GlobalProvider = ({
   children,
   globalState,
   storyMeta,
 }) => {
+  const [themeBuilderConfig, setThemeBuilderConfig] = React.useState<
+    ResultThemeVars | undefined
+  >();
+  const [prevLightVars, setPrevLightVars] = React.useState<
+    Record<string, string>
+  >({});
+  const [prevDarkVars, setPrevDarkVars] = React.useState<
+    Record<string, string>
+  >({});
+
+  console.log("meta", storyMeta);
+
+  const onPaneConfigChange = (event: ConfigChangeEvent) => {
+    const { light, dark } = event;
+
+    const newLightVars = {
+      ...prevLightVars,
+      [light.varKey]: light.varValue,
+    };
+
+    const newDarkVars = {
+      ...prevDarkVars,
+      [dark.varKey]: dark.varValue,
+    };
+
+    setPrevLightVars(newLightVars);
+    setPrevDarkVars(newDarkVars);
+
+    console.log("Setting vars", newLightVars, newDarkVars);
+
+    const config = createThemes()
+      .addSlotThemes("light", {
+        ...newLightVars,
+      })
+      .addSlotThemes("dark", {
+        ...newDarkVars,
+      })
+      .build();
+
+    setThemeBuilderConfig(config);
+  };
+
   return (
     <div id="ladle-global-provider">
       <InterchainThemeProvider
         theme={globalState.theme === ThemeState.Light ? "light" : "dark"}
+        themeBuilderConfig={themeBuilderConfig}
       >
         <Box
           display="flex"
@@ -40,35 +86,36 @@ export const Provider: GlobalProvider = ({
 
         {children}
 
+        <Box
+          maxHeight="400px"
+          overflow="auto"
+          attributes={{
+            id: "config-pane-container",
+          }}
+        />
+
         <OverlaysManager />
+
+        <ConfigPane
+          component={storyMeta?.component}
+          onConfigChange={onPaneConfigChange}
+        />
       </InterchainThemeProvider>
     </div>
   );
 };
 
-// Try out theme builder
-// const themeBuilderConfig = createThemes()
-//   .addSlotThemes("light", {
-//     "button-primary-bgColor": "pink",
-//   })
-//   .addSlotThemes("dark", {
-//     "button-primary-bgColor": "red",
-//   })
-//   .build();
-
 function InterchainThemeProvider({
   children,
   theme,
+  themeBuilderConfig,
 }: {
   children?: React.ReactNode;
   theme: ThemeProviderProps["themeMode"];
+  themeBuilderConfig?: ResultThemeVars;
 }) {
   return (
-    <ThemeProvider
-      themeMode={theme}
-      // Try out theme builder
-      // themeBuilderConfig={themeBuilderConfig}
-    >
+    <ThemeProvider themeMode={theme} themeBuilderConfig={themeBuilderConfig}>
       {children}
     </ThemeProvider>
   );

packages/react/.ladle/config-pane.tsx

@@ -0,0 +1,129 @@
+import * as React from "react";
+import { Pane } from "tweakpane";
+import { ThemeVariant } from "../src";
+import { slotVars } from "../src/styles/theme-builder/slot-vars.css";
+
+type ConfigComponent =
+  | "Button"
+  | "TextField"
+  | "NumberField"
+  | "Tabs"
+  | "ListItem"
+  | "Tooltip"
+  | "KitchenSink";
+
+interface Params {
+  [key: string]: string;
+}
+
+export type ConfigChangeEvent = {
+  [key in ThemeVariant]: {
+    varKey: string;
+    varValue: string;
+  };
+};
+
+export interface ConfigPaneProps {
+  component?: ConfigComponent;
+  onConfigChange?: (event: ConfigChangeEvent) => void;
+}
+
+const filterVars = (varPrefix: string) => {
+  return Object.keys(slotVars).filter((key) => key.startsWith(varPrefix));
+};
+
+const isColorProperty = (key: string) => {
+  return key.includes("color") || key.includes("Color");
+};
+
+const isDimensionProperty = (key: string) => {
+  const lowercaseKey = key.toLowerCase();
+  return (
+    lowercaseKey.includes("width") ||
+    lowercaseKey.includes("height") ||
+    lowercaseKey.includes("padding")
+  );
+};
+
+export const ConfigPane = (props: ConfigPaneProps) => {
+  React.useEffect(() => {
+    const container = document.getElementById("config-pane-container");
+
+    if (!container || !props.component) {
+      return;
+    }
+
+    const pane = new Pane({
+      container: container!,
+      title: `${props.component} Config`,
+    });
+
+    const tab = pane.addTab({
+      pages: [{ title: "Light" }, { title: "Dark" }],
+    });
+
+    const componentVars = filterVars(props.component);
+
+    const params: Params = componentVars.reduce((acc, key) => {
+      if (isColorProperty(key)) {
+        acc[key] = "#ffffff";
+      } else if (isDimensionProperty(key)) {
+        acc[key] = "0px";
+      } else {
+        acc[key] = "";
+      }
+
+      return acc;
+    }, {});
+
+    for (const varKey in params) {
+      tab.pages[0].addBinding(params, varKey);
+      tab.pages[1].addBinding(params, varKey);
+    }
+
+    pane.on("change", (ev) => {
+      const state = pane.exportState();
+      // @ts-ignore
+      const [lightTheme, darkTheme] = state.children[0].children;
+      // @ts-ignore
+      const varKey = ev.target.key;
+      const varValue = ev.value;
+
+      console.log("DEBUG", { state, ev });
+      const bindingInLight = lightTheme.children.find(
+        (item) => item.binding.key === varKey,
+      );
+      const bindingInDark = darkTheme.children.find(
+        (item) => item.binding.key === varKey,
+      );
+
+      const event: ConfigChangeEvent = {
+        light: {
+          varKey,
+          varValue: bindingInLight.binding?.value,
+        },
+        dark: {
+          varKey,
+          varValue: bindingInDark.binding?.value,
+        },
+      };
+
+      console.log({
+        state,
+        bindingInLight,
+        bindingInDark,
+        lightTheme,
+        darkTheme,
+        event,
+      });
+
+      props.onConfigChange?.(event);
+    });
+
+    return () => {
+      pane.dispose();
+    };
+  }, [props.component]);
+
+  return null;
+};

packages/react/package.json

@@ -143,6 +143,7 @@
     "@storybook/react": "^8.2.4",
     "@storybook/react-vite": "^8.2.4",
     "@storybook/test": "^8.2.4",
+    "@tweakpane/core": "^2.0.4",
     "@types/react": "latest",
     "@vanilla-extract/parcel-transformer": "^1.0.7",
     "@vanilla-extract/vite-plugin": "^4.0.13",
@@ -156,6 +157,7 @@
     "prop-types": "^15.8.1",
     "storybook": "^8.2.4",
     "storybook-react-rsbuild": "^0.0.7",
+    "tweakpane": "^4.0.4",
     "type-fest": "^4.21.0",
     "vite": "^5.3.3",
     "vite-plugin-replace": "^0.1.1"

packages/react/showroom/Button.show.tsx

@@ -32,6 +32,10 @@ export const DefaultButton: Story<{
   </Box>
 );
 
+DefaultButton.meta = {
+  component: "Button",
+};
+
 DefaultButton.args = {
   label: "Hello world",
   disabled: false,