Port os-chrome to React experiment

typescript/packages/common-os-ui/src/components/os-tab-bar.ts

@@ -115,7 +115,7 @@ export class OsTabBar extends LitElement {
     return html`
       <div class="tab-container">
         <div class="reserved-space"></div>
-        ${this.items.map(
+        ${this.items?.map(
           (item) => html`
             <div class="tab-item">
               <button

typescript/packages/jumble/package.json

@@ -25,6 +25,7 @@
     "@codemirror/lang-markdown": "^6.3.2",
     "@codemirror/view": "^6.36.2",
     "@commontools/ui": "workspace:*",
+    "@commontools/os-ui": "workspace:*",
     "@commontools/builder": "workspace:*",
     "@commontools/runner": "workspace:*",
     "@commontools/html": "workspace:*",

typescript/packages/jumble/src/components/CharmRunner.tsx

@@ -121,10 +121,10 @@ export function CharmRunner({
   }, [argument, charmImport]);
 
   return (
-    <div className={className}>
+    <>
       {isLoading && <div>Loading...</div>}
       {error && <div>Error loading charm</div>}
-      <div ref={containerRef}></div>
-    </div>
+      <div className={className} ref={containerRef}></div>
+    </>
   );
 }

typescript/packages/jumble/src/components/Sidebar.tsx

@@ -0,0 +1,207 @@
+import React from "react";
+import { WebComponent } from "./WebComponent";
+import { getRecipe } from "@commontools/runner";
+import { useCell } from "@/hooks/use-charm";
+import { sidebar } from "@/views/state";
+
+interface SidebarProps {
+  homeRef: any;
+  linkedCharms: any[];
+  workingSpec: string;
+  focusedCharm: any;
+  handlePublish: () => void;
+  recipeId: string;
+}
+
+const Sidebar: React.FC<
+  SidebarProps & {
+    query: any;
+    onQueryChanged: (value: string) => void;
+    schema: any;
+    copyRecipeLink: () => void;
+    argument: any;
+    data: any;
+    onDataChanged: (value: string) => void;
+    onSpecChanged: (value: string) => void;
+  }
+> = ({
+  homeRef,
+  linkedCharms,
+  workingSpec,
+  focusedCharm,
+  handlePublish,
+  recipeId,
+  query,
+  onQueryChanged,
+  schema,
+  copyRecipeLink,
+  argument,
+  data,
+  onDataChanged,
+  onSpecChanged,
+}) => {
+  const [sidebarTab, setSidebarTab] = useCell(sidebar);
+
+  const handleSidebarTabChange = (newTab: string) => {
+    setSidebarTab(newTab);
+  };
+
+  const tabs = [
+    { id: "home", icon: "home", label: "Home" },
+    { id: "prompt", icon: "message", label: "Prompt" },
+    { id: "links", icon: "sync_alt", label: "Links" },
+    { id: "query", icon: "query_stats", label: "Query" },
+    { id: "data", icon: "database", label: "Data" },
+    { id: "schema", icon: "schema", label: "Schema" },
+    { id: "source", icon: "code", label: "Source" },
+    { id: "recipe-json", icon: "data_object", label: "JSON" },
+  ];
+
+  const panels = {
+    home: (
+      <div>
+        <div>Pinned</div>
+        <div ref={homeRef}></div>
+      </div>
+    ),
+    links: (
+      <div>
+        <div>Linked Charms</div>
+        <div>
+          {linkedCharms.map((charm) => (
+            <common-charm-link charm={charm} />
+          ))}
+        </div>
+      </div>
+    ),
+    query: (
+      <div>
+        <div>Query</div>
+        <div>
+          <os-code-editor
+            slot="content"
+            language="application/json"
+            source={JSON.stringify(query, null, 2)}
+            onDocChange={onQueryChanged}
+          />
+        </div>
+      </div>
+    ),
+    schema: (
+      <div>
+        <div>Schema</div>
+        <div>
+          <os-code-editor
+            slot="content"
+            language="application/json"
+            source={JSON.stringify(schema, null, 2)}
+          />
+        </div>
+      </div>
+    ),
+    source: (
+      <div>
+        <div>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              border: "1px solid pink",
+              padding: "10px",
+            }}
+          >
+            <a
+              href={`/recipe/spell-${recipeId}`}
+              target="_blank"
+              onClick={copyRecipeLink}
+              style={{ float: "right" }}
+              className="close-button"
+            >
+              🔗 Share
+            </a>
+            <button onClick={handlePublish} className="close-button">
+              🪄 Publish to Spellbook Jr
+            </button>
+          </div>
+        </div>
+        <div style={{ margin: "10px" }}></div>
+        <div>
+          <common-spell-editor recipeId={recipeId} data={argument} />
+        </div>
+      </div>
+    ),
+    "recipe-json": (
+      <div>
+        <div>Recipe JSON</div>
+        <div>
+          <os-code-editor
+            slot="content"
+            language="application/json"
+            source={JSON.stringify(getRecipe(recipeId), null, 2)}
+          />
+        </div>
+      </div>
+    ),
+    data: (
+      <div>
+        <div>
+          Data
+          <span
+            id="log-button"
+            onClick={() => console.log(JSON.stringify(focusedCharm?.getAsQueryResult()))}
+            className="close-button"
+          >
+            log
+          </span>
+        </div>
+        <div>
+          <os-code-editor
+            slot="content"
+            language="application/json"
+            source={JSON.stringify(data, null, 2)}
+            onDocChange={onDataChanged}
+          />
+        </div>
+      </div>
+    ),
+    prompt: (
+      <div>
+        <div>
+          Spec
+          <a
+            href={`/recipe/${recipeId}`}
+            target="_blank"
+            onClick={copyRecipeLink}
+            style={{ float: "right" }}
+            className="close-button"
+          >
+            🔗 Share
+          </a>
+        </div>
+        <div>
+          <os-code-editor
+            slot="content"
+            language="text/markdown"
+            source={workingSpec}
+            onDocChange={onSpecChanged}
+          />
+        </div>
+      </div>
+    ),
+  };
+
+  return (
+    <div>
+      <os-sidebar-close-button></os-sidebar-close-button>
+      {panels[sidebarTab as keyof typeof panels]}
+      <WebComponent
+        as="os-tab-bar"
+        items={tabs}
+        selected={sidebarTab}
+        onTabChange={(e: CustomEvent) => handleSidebarTabChange(e.detail.selected)}
+      />
+    </div>
+  );
+};
+
+export default Sidebar;

typescript/packages/jumble/src/components/WebComponent.tsx

@@ -0,0 +1,13 @@
+import { useWebComponent } from "@/hooks/use-web-component";
+import React from "react";
+
+export function WebComponent<P extends Record<string, any>>({
+  as: Element,
+  children,
+  ...props
+}: { as: string; children?: React.ReactNode } & P) {
+  const ref = React.useRef<HTMLElement>(null);
+  useWebComponent(ref, props);
+
+  return React.createElement(Element, { ref, ...props }, children);
+}

typescript/packages/jumble/src/hooks/use-charm.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { DocImpl, effect } from "@commontools/runner";
+
+export function useCell<T>(cell: DocImpl<T>): [T, (value: T) => void] {
+  const [value, setValue] = useState<T>(cell.get());
+
+  useEffect(() => {
+    // Set up effect to update state when cell changes
+    const cleanup = effect(cell, (newValue) => {
+      setValue(newValue);
+    });
+
+    // Clean up effect when component unmounts or cell changes
+    return cleanup;
+  }, [cell]);
+
+  // Return tuple of current value and setter function
+  return [
+    value,
+    (newValue: T) => {
+      cell.asCell().set(newValue);
+    },
+  ];
+}

typescript/packages/jumble/src/hooks/use-web-component.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+export function useWebComponent<P extends Record<string, any>>(
+  ref: React.RefObject<HTMLElement>,
+  props: P,
+) {
+  React.useEffect(() => {
+    if (!ref.current) return;
+
+    const element = ref.current;
+    // Handle regular props
+    Object.entries(props).forEach(([key, value]) => {
+      if (!key.startsWith("on")) {
+        if (key === "className") {
+          element.setAttribute("class", value);
+        } else if (typeof value === "boolean") {
+          if (value) {
+            element.setAttribute(key, "");
+          } else {
+            element.removeAttribute(key);
+          }
+        } else {
+          element[key] = value;
+        }
+      }
+    });
+
+    // Handle event listeners
+    const eventHandlers = Object.entries(props)
+      .filter(([key]) => key.startsWith("on"))
+      .map(([key, handler]) => {
+        // Convert onEventName to event-name
+        const eventName = key
+          .slice(2)
+          .split(/(?=[A-Z])/)
+          .map((part) => part.toLowerCase())
+          .join("-");
+        return { eventName, handler };
+      });
+
+    // Add event listeners
+    eventHandlers.forEach(({ eventName, handler }) => {
+      element.addEventListener(eventName, handler);
+    });
+
+    // Cleanup
+    return () => {
+      eventHandlers.forEach(({ eventName, handler }) => {
+        element.removeEventListener(eventName, handler);
+      });
+    };
+  }, [ref, props]);
+}