pxengine 0.1.4 → 0.1.5

package/src/render/PXEngineRenderer.tsx

@@ -3,17 +3,179 @@ import { UIComponent, UISchema } from "../types/schema";
 import * as Atoms from "../atoms";
 import * as Molecules from "../molecules/index";
 
+// 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 the Atoms/Molecules registry.
+ * 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;
 }
 
+/**
+ * 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,
@@ -25,69 +187,108 @@ export const PXEngineRenderer: React.FC<PXEngineRendererProps> = ({
 
   const renderRecursive = (
     component: UIComponent | string | any,
+    index?: number,
   ): React.ReactNode => {
     // 1. Handle text nodes (string or number)
     if (typeof component === "string" || typeof component === "number") {
       return component;
     }
 
-    if (!component) return null;
+    // 2. Handle already rendered React elements
+    if (React.isValidElement(component)) {
+      return component;
+    }
+
+    if (!component || typeof component !== "object") return null;
 
     const { type, name, props = {}, children = [], id } = component;
 
     // Determine the component name to search for
     const componentName = name || type;
-    if (!componentName) return null;
+    if (!componentName || typeof componentName !== "string") return null;
 
-    // Normalize name to PascalCase and check for "Atom" suffix
+    // 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`;
 
-    // 2. Resolve Component from library registry
-    const TargetComponent =
+    // 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] ||
-      (Molecules as any)[normalizedName] ||
-      (Molecules as any)[componentName];
+      (Atoms as any)[componentName];
 
+    // Priority 2: Molecules (schema-safe, composite)
     if (!TargetComponent) {
-      console.warn(`[PXEngineRenderer] Component not found: ${componentName}`);
+      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,
+        );
+      } else {
+        // Show generic "not found" error
+        console.warn(
+          `[PXEngineRenderer] Component not found: ${componentName}`,
+        );
+        return renderNotFoundError(componentName, uniqueKey);
+      }
+    }
+
+    // 4. Determine if component expects 'renderComponent' prop (for Atoms with children management)
+    const isAtomWithRenderProp = atomName in Atoms;
+
+    // 5. Render Component
+    if (isAtomWithRenderProp) {
+      // Atoms handle their own children via renderComponent
       return (
-        <div
-          key={id}
-          className="p-2 border border-dashed border-red-500/50 text-red-500 text-[10px] rounded"
-        >
-          Unknown: {componentName}
-        </div>
+        <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>
       );
     }
-
-    // 3. Render Component
-    // We pass 'renderComponent' for components that handle their own child rendering (like Layout/Card)
-    // We also pass children as props for standard React children behavior
-    return (
-      <TargetComponent
-        key={id || Math.random().toString(36).substr(2, 9)}
-        {...props}
-        onAction={onAction}
-        renderComponent={renderRecursive}
-        children={Array.isArray(children) ? children : undefined}
-      >
-        {Array.isArray(children)
-          ? children.map((child, idx) => (
-              <React.Fragment key={idx}>
-                {renderRecursive(child)}
-              </React.Fragment>
-            ))
-          : typeof children === "string"
-            ? children
-            : null}
-      </TargetComponent>
-    );
   };
 
   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;