pxengine 0.1.3 → 0.1.5

package/src/render/PXEngineRenderer.tsx

@@ -1,272 +1,295 @@
 import React from "react";
-import { UIComponent, UISchema, UIAtom, UIMolecule } from "../types/schema";
+import { UIComponent, UISchema } from "../types/schema";
 import * as Atoms from "../atoms";
-import * as Molecules from "../molecules/index"; // Explicit index to help resolution
+import * as Molecules from "../molecules/index";
 
-// NOTE: This renderer will be used by the frontend to interpret JSON schemas
-// generated by the AI agent via the MCP server.
+// Import all shadcn UI components
+import * as UIComponents from "../components/ui/index";
 
+/**
+ * Components that require specific React Context and cannot be rendered in isolation.
+ * These components will show helpful error messages if used directly in schemas.
+ */
+const CONTEXT_DEPENDENT_COMPONENTS = new Set([
+  // Form components - require FormField + FormItem context
+  "FormLabel",
+  "FormControl",
+  "FormDescription",
+  "FormMessage",
+  "FormItem",
+  "FormField",
+  // Select components - require Select parent
+  "SelectContent",
+  "SelectItem",
+  "SelectValue",
+  "SelectTrigger",
+  "SelectGroup",
+  "SelectLabel",
+  "SelectSeparator",
+  // Accordion components - require Accordion parent
+  "AccordionContent",
+  "AccordionItem",
+  "AccordionTrigger",
+  // Tabs components - require Tabs parent
+  "TabsContent",
+  "TabsList",
+  "TabsTrigger",
+  // Dialog components - require Dialog parent
+  "DialogContent",
+  "DialogHeader",
+  "DialogFooter",
+  "DialogTitle",
+  "DialogDescription",
+  "DialogClose",
+  // Sheet components - require Sheet parent
+  "SheetContent",
+  "SheetHeader",
+  "SheetFooter",
+  "SheetTitle",
+  "SheetDescription",
+  "SheetClose",
+  // AlertDialog components - require AlertDialog parent
+  "AlertDialogContent",
+  "AlertDialogHeader",
+  "AlertDialogFooter",
+  "AlertDialogTitle",
+  "AlertDialogDescription",
+  "AlertDialogAction",
+  "AlertDialogCancel",
+  // Dropdown components - require DropdownMenu parent
+  "DropdownMenuContent",
+  "DropdownMenuItem",
+  "DropdownMenuLabel",
+  "DropdownMenuSeparator",
+  "DropdownMenuCheckboxItem",
+  "DropdownMenuRadioItem",
+  "DropdownMenuRadioGroup",
+  // Popover components - require Popover parent
+  "PopoverContent",
+  // Tooltip components - require TooltipProvider parent
+  "TooltipContent",
+  // Context Menu components
+  "ContextMenuContent",
+  "ContextMenuItem",
+  // Navigation Menu components
+  "NavigationMenuContent",
+  "NavigationMenuItem",
+]);
+
+/**
+ * Mapping of problematic components to their Atom alternatives
+ */
+const COMPONENT_SUGGESTIONS: Record<string, string> = {
+  FormLabel: "FormInputAtom (with label prop)",
+  FormControl: "FormInputAtom",
+  FormItem: "FormInputAtom",
+  FormField: "FormInputAtom",
+  Select: "FormSelectAtom or InputAtom with inputType='select'",
+  SelectContent: "FormSelectAtom or InputAtom with inputType='select'",
+  SelectItem: "FormSelectAtom or InputAtom with inputType='select'",
+  Tabs: "TabsAtom",
+  TabsContent: "TabsAtom",
+  TabsList: "TabsAtom",
+  Dialog: "DialogAtom",
+  DialogContent: "DialogAtom",
+  Sheet: "SheetAtom",
+  SheetContent: "SheetAtom",
+  AlertDialog: "AlertDialogAtom",
+  AlertDialogContent: "AlertDialogAtom",
+  Accordion: "AccordionAtom",
+  AccordionItem: "AccordionAtom",
+  Input: "InputAtom",
+  Textarea: "InputAtom with inputType='textarea'",
+};
+
+/**
+ * PXEngineRenderer
+ *
+ * Handles both the full schema { version, root } and individual components.
+ * Dynamically resolves components from Atoms/Molecules/UI Components registry.
+ * Prevents rendering of context-dependent components to avoid React errors.
+ */
 interface PXEngineRendererProps {
   schema: UISchema | UIComponent;
   onAction?: (action: string, payload?: any) => void;
 }
 
 /**
- * PXEngineRenderer
- *
- * The core engine of the @pxengine-ui library.
- * Recursively renders Atoms and Molecules based on the provided JSON schema.
+ * Renders an error message for context-dependent components
  */
+const renderContextDependentError = (
+  componentName: string,
+  normalizedName: string,
+  key: string,
+): React.ReactNode => {
+  const suggestion =
+    COMPONENT_SUGGESTIONS[normalizedName] ||
+    `${componentName}Atom (if available)`;
+
+  return (
+    <div
+      key={key}
+      className="p-4 border-2 border-amber-500/50 rounded-lg bg-amber-50/80 space-y-2 my-2"
+    >
+      <div className="flex items-start gap-2">
+        <span className="text-amber-600 font-bold text-lg">⚠️</span>
+        <div className="flex-1">
+          <p className="text-sm font-semibold text-amber-900">
+            Invalid Component: {componentName}
+          </p>
+          <p className="text-xs text-amber-700 mt-1">
+            This component requires React Context and cannot be rendered
+            directly in schemas.
+          </p>
+        </div>
+      </div>
+      <div className="bg-white/60 p-3 rounded border border-amber-200">
+        <p className="text-xs font-semibold text-gray-700 mb-1.5">
+          ✓ Use instead:
+        </p>
+        <code className="text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded">
+          {suggestion}
+        </code>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Renders an error message for components not found in any registry
+ */
+const renderNotFoundError = (
+  componentName: string,
+  key: string,
+): React.ReactNode => {
+  return (
+    <div
+      key={key}
+      className="p-3 border border-dashed border-red-500/50 text-red-500 text-xs rounded bg-red-50/30 my-2"
+    >
+      <span className="font-semibold">❌ Unknown Component:</span>{" "}
+      {componentName}
+      <p className="text-[10px] text-red-400 mt-1">
+        Component not found in Atoms, Molecules, or UI Components registry.
+      </p>
+    </div>
+  );
+};
+
 export const PXEngineRenderer: React.FC<PXEngineRendererProps> = ({
   schema,
   onAction,
 }) => {
-  // Determine if it's a full schema or just a component
-  const root = "root" in schema ? schema.root : schema;
+  if (!schema) return null;
 
-  /**
-   * Render Atomic components (UI Primitives)
-   */
-  const renderAtom = (
-    atom: UIAtom,
-    renderComponent: (c: UIComponent) => React.ReactNode,
+  // Extract root if it's a full UISchema
+  const root = (schema as any).root || (schema as UIComponent);
+
+  const renderRecursive = (
+    component: UIComponent | string | any,
+    index?: number,
   ): React.ReactNode => {
-    const { type, id } = atom;
+    // 1. Handle text nodes (string or number)
+    if (typeof component === "string" || typeof component === "number") {
+      return component;
+    }
 
-    switch (type) {
-      case "layout":
-        return (
-          <Atoms.LayoutAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "card":
-        return (
-          <Atoms.CardAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "text":
-        return <Atoms.TextAtom key={id} {...(atom as any)} />;
-      case "button":
-        return (
-          <Atoms.ButtonAtom key={id} {...(atom as any)} onAction={onAction} />
-        );
-      case "input":
-        return <Atoms.InputAtom key={id} {...(atom as any)} />;
-      case "badge":
-        return <Atoms.BadgeAtom key={id} {...(atom as any)} />;
-      case "avatar":
-        return <Atoms.AvatarAtom key={id} {...(atom as any)} />;
-      case "progress":
-        return <Atoms.ProgressAtom key={id} {...(atom as any)} />;
-      case "skeleton":
-        return <Atoms.SkeletonAtom key={id} {...(atom as any)} />;
-      case "alert":
-        return <Atoms.AlertAtom key={id} {...(atom as any)} />;
-      case "separator":
-        return <Atoms.SeparatorAtom key={id} {...(atom as any)} />;
-      case "table":
-        return <Atoms.TableAtom key={id} {...(atom as any)} />;
-      case "tabs":
-        return (
-          <Atoms.TabsAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "accordion":
-        return (
-          <Atoms.AccordionAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "scroll-area":
-        return (
-          <Atoms.ScrollAreaAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "carousel":
-        return (
-          <Atoms.CarouselAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "aspect-ratio":
-        return (
-          <Atoms.AspectRatioAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "collapsible":
-        return (
-          <Atoms.CollapsibleAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "tooltip":
-        return (
-          <Atoms.TooltipAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "popover":
-        return (
-          <Atoms.PopoverAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "dialog":
-        return (
-          <Atoms.DialogAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "sheet":
-        return (
-          <Atoms.SheetAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "alert-dialog":
-        return (
-          <Atoms.AlertDialogAtom
-            key={id}
-            {...(atom as any)}
-            onAction={onAction}
-            renderComponent={renderComponent}
-          />
-        );
-      case "breadcrumb":
-        return <Atoms.BreadcrumbAtom key={id} {...(atom as any)} />;
-      case "spinner":
-        return <Atoms.SpinnerAtom key={id} {...(atom as any)} />;
-      case "calendar":
-        return <Atoms.CalendarAtom key={id} {...(atom as any)} />;
-      case "pagination":
-        return <Atoms.PaginationAtom key={id} {...(atom as any)} />;
-      case "command":
-        return <Atoms.CommandAtom key={id} {...(atom as any)} />;
-      default:
-        return null;
+    // 2. Handle already rendered React elements
+    if (React.isValidElement(component)) {
+      return component;
     }
-  };
 
-  /**
-   * Render Molecule components (Domain-specific / Complex)
-   */
-  const renderMolecule = (molecule: UIMolecule): React.ReactNode => {
-    const { type, id } = molecule;
+    if (!component || typeof component !== "object") return null;
 
-    switch (type) {
-      case "campaign-seed":
-        return (
-          <Molecules.CampaignSeedCard
-            key={id}
-            {...(molecule as any)}
-            onProceed={() =>
-              onAction?.((molecule as any).proceedAction || "proceed")
-            }
-          />
-        );
-      case "search-spec":
-        return (
-          <Molecules.SearchSpecCard
-            key={id}
-            {...(molecule as any)}
-            onProceed={() =>
-              onAction?.((molecule as any).proceedAction || "proceed")
-            }
-          />
-        );
-      case "mcq":
-        return (
-          <Molecules.MCQCard
-            key={id}
-            {...(molecule as any)}
-            onProceed={() =>
-              onAction?.((molecule as any).proceedAction || "proceed")
-            }
-          />
+    const { type, name, props = {}, children = [], id } = component;
+
+    // Determine the component name to search for
+    const componentName = name || type;
+    if (!componentName || typeof componentName !== "string") return null;
+
+    // Generate a unique key from id, index, or random
+    const uniqueKey =
+      id ||
+      `${componentName}-${index || Math.random().toString(36).substr(2, 9)}`;
+
+    // Normalize name to PascalCase
+    const normalizedName =
+      componentName.charAt(0).toUpperCase() + componentName.slice(1);
+    const atomName = normalizedName.endsWith("Atom")
+      ? normalizedName
+      : `${normalizedName}Atom`;
+
+    // 3. Resolve Component from registries (PRIORITY ORDER - safest first)
+
+    // Priority 1: Atoms (schema-safe, self-contained)
+    let TargetComponent =
+      (Atoms as any)[atomName] ||
+      (Atoms as any)[normalizedName] ||
+      (Atoms as any)[componentName];
+
+    // Priority 2: Molecules (schema-safe, composite)
+    if (!TargetComponent) {
+      TargetComponent =
+        (Molecules as any)[normalizedName] || (Molecules as any)[componentName];
+    }
+
+    // Priority 3: UI Components (ONLY if NOT context-dependent)
+    if (!TargetComponent && !CONTEXT_DEPENDENT_COMPONENTS.has(normalizedName)) {
+      TargetComponent =
+        (UIComponents as any)[normalizedName] ||
+        (UIComponents as any)[componentName];
+    }
+
+    // 4. Handle component not found or context-dependent
+    if (!TargetComponent) {
+      if (CONTEXT_DEPENDENT_COMPONENTS.has(normalizedName)) {
+        // Show helpful error for context-dependent components
+        if (process.env.NODE_ENV === "development") {
+          console.error(
+            `[PXEngineRenderer] Cannot render context-dependent component: ${componentName}. ` +
+              `Use ${COMPONENT_SUGGESTIONS[normalizedName] || `${componentName}Atom`} instead.`,
+          );
+        }
+        return renderContextDependentError(
+          componentName,
+          normalizedName,
+          uniqueKey,
         );
-      case "action-button":
-        return (
-          <Molecules.ActionButton
-            key={id}
-            {...(molecule as any)}
-            onProceed={() => onAction?.((molecule as any).action || "proceed")}
-          />
+      } else {
+        // Show generic "not found" error
+        console.warn(
+          `[PXEngineRenderer] Component not found: ${componentName}`,
         );
-      default:
-        return null;
+        return renderNotFoundError(componentName, uniqueKey);
+      }
     }
-  };
-
-  const renderComponent = (component: UIComponent): React.ReactNode => {
-    const { type } = component;
 
-    // Route based on defined Atom types
-    const isAtom = [
-      "layout",
-      "card",
-      "text",
-      "button",
-      "input",
-      "badge",
-      "avatar",
-      "progress",
-      "skeleton",
-      "alert",
-      "separator",
-      "table",
-      "tabs",
-      "accordion",
-      "scroll-area",
-      "carousel",
-      "aspect-ratio",
-      "collapsible",
-      "tooltip",
-      "popover",
-      "dialog",
-      "sheet",
-      "alert-dialog",
-      "breadcrumb",
-      "spinner",
-      "calendar",
-      "pagination",
-      "command",
-    ].includes(type);
+    // 4. Determine if component expects 'renderComponent' prop (for Atoms with children management)
+    const isAtomWithRenderProp = atomName in Atoms;
 
-    if (isAtom) {
-      return renderAtom(component as UIAtom, renderComponent);
+    // 5. Render Component
+    if (isAtomWithRenderProp) {
+      // Atoms handle their own children via renderComponent
+      return (
+        <TargetComponent
+          key={uniqueKey}
+          {...props}
+          onAction={onAction}
+          renderComponent={renderRecursive}
+          children={children}
+        />
+      );
+    } else {
+      // Standard shadcn components - pass children as React children
+      return (
+        <TargetComponent key={uniqueKey} {...props}>
+          {Array.isArray(children)
+            ? children.map((child, idx) => renderRecursive(child, idx))
+            : children}
+        </TargetComponent>
+      );
     }
-
-    return renderMolecule(component as UIMolecule);
   };
 
-  return <>{renderComponent(root)}</>;
+  return <div className="px-engine-root">{renderRecursive(root)}</div>;
 };

package/src/types/atoms.ts

@@ -1,3 +1,7 @@
+import type { FormInputAtomType } from "../atoms/FormInputAtom";
+import type { FormSelectAtomType } from "../atoms/FormSelectAtom";
+import type { FormTextareaAtomType } from "../atoms/FormTextareaAtom";
+
 export type LayoutDirection = "vertical" | "horizontal" | "grid";
 export type GapSize = "none" | "sm" | "md" | "lg" | "xl";
 export type TextVariant = "h1" | "h2" | "h3" | "h4" | "p" | "small" | "muted" | "label";
@@ -291,4 +295,7 @@ export type UIAtom =
   | BreadcrumbAtomType
   | CalendarAtomType
   | PaginationAtomType
-  | CommandAtomType;
+  | CommandAtomType
+  | FormInputAtomType
+  | FormSelectAtomType
+  | FormTextareaAtomType;