pxengine 0.1.12 → 0.1.14

package/src/render/PXEngineRenderer.tsx

@@ -1,458 +0,0 @@
-import React from "react";
-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 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>
-  );
-};
-
-/**
- * Normalizes props and extracts dynamic Tailwind-like classes into inline styles.
- * This ensures that user-entered colors like bg-[#ff0000] work even if not in the bundle.
- */
-const normalizeProps = (
-  props: Record<string, any>,
-): { normalized: Record<string, any>; dynamicStyle: React.CSSProperties } => {
-  const normalized: Record<string, any> = {};
-  const dynamicStyle: any = {};
-
-  Object.entries(props).forEach(([key, value]) => {
-    // 1. Handle className parsing for dynamic styles
-    if (key === "className" && typeof value === "string") {
-      // Improved split that handles Tailwind arbitrary values with spaces/underscores inside brackets
-      const classes = value.match(/(?:[^\s\[]|\[[^\]]*\])+/g) || [];
-      classes.forEach((cls) => {
-        // Hex colors: bg-[#...], text-[#...], border-[#...] (supporting opacity/etc)
-        const hexMatch = cls.match(
-          /^(bg|text|border)-\[#([0-9a-fA-F]{3,6})(?:\/(\d+))?\]$/,
-        );
-        if (hexMatch) {
-          const [, type, hex, opacity] = hexMatch;
-          const color = `#${hex}${
-            opacity
-              ? Math.round((parseInt(opacity) / 100) * 255)
-                  .toString(16)
-                  .padStart(2, "0")
-              : ""
-          }`;
-          if (type === "bg") dynamicStyle.backgroundColor = color;
-          if (type === "text") dynamicStyle.color = color;
-          if (type === "border") dynamicStyle.borderColor = color;
-        }
-
-        // Arbitrary rounding: rounded-[...]
-        const roundedMatch = cls.match(/^rounded-\[(.+)\]$/);
-        if (roundedMatch) {
-          dynamicStyle.borderRadius = roundedMatch[1].replace(/_/g, " ");
-        }
-
-        // Arbitrary padding: p-[...], px-[...], py-[...]
-        const paddingMatch = cls.match(/^(p|px|py)-\[(.+)\]$/);
-        if (paddingMatch) {
-          const [, type, val] = paddingMatch;
-          const cssVal = val.replace(/_/g, " ");
-          if (type === "p") dynamicStyle.padding = cssVal;
-          if (type === "px") {
-            dynamicStyle.paddingLeft = cssVal;
-            dynamicStyle.paddingRight = cssVal;
-          }
-          if (type === "py") {
-            dynamicStyle.paddingTop = cssVal;
-            dynamicStyle.paddingBottom = cssVal;
-          }
-        }
-
-        // Arbitrary shadows: shadow-[...]
-        const shadowMatch = cls.match(/^shadow-\[(.+)\]$/);
-        if (shadowMatch) {
-          dynamicStyle.boxShadow = shadowMatch[1].replace(/_/g, " ");
-        }
-      });
-      normalized[key] = value;
-      return;
-    }
-
-    // Skip technical internal props that shouldn't leak into DOM
-    if (["type", "component", "name"].includes(key)) {
-      return;
-    }
-
-    // 2. Handle stringified booleans
-    if (value === "true") {
-      normalized[key] = true;
-      return;
-    }
-    if (value === "false") {
-      normalized[key] = false;
-      return;
-    }
-
-    // 3. Handle stringified numbers
-    if (
-      typeof value === "string" &&
-      value.trim() !== "" &&
-      !isNaN(Number(value)) &&
-      (value.includes(".") ||
-        (value.length < 10 && !value.startsWith("0")) ||
-        value === "0")
-    ) {
-      normalized[key] = Number(value);
-      return;
-    }
-
-    normalized[key] = value;
-  });
-
-  return { normalized, dynamicStyle };
-};
-
-export const PXEngineRenderer: React.FC<PXEngineRendererProps> = ({
-  schema,
-  onAction,
-}) => {
-  if (!schema) return null;
-
-  // 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 => {
-    // 1. Handle text nodes (string or number)
-    if (typeof component === "string" || typeof component === "number") {
-      return component;
-    }
-
-    // 2. Handle already rendered React elements
-    if (React.isValidElement(component)) {
-      return component;
-    }
-
-    if (!component || typeof component !== "object") return null;
-
-    // Support 'component' alias for name/type
-    const {
-      type,
-      name,
-      component: componentType,
-      props = {},
-      children = [],
-      id,
-      ...remainingProps
-    } = component;
-
-    // Determine the component logic name to search for
-    const componentName = name || type || componentType;
-    if (!componentName || typeof componentName !== "string") return null;
-
-    // Merge explicit props with flattened props (remainingProps)
-    // Priority: explicit props > flattened props
-    const rawProps = { ...remainingProps, ...props };
-    const { normalized: finalProps, dynamicStyle } = normalizeProps(rawProps);
-
-    // Also pass ID if not already in props
-    if (id && !finalProps.id) {
-      finalProps.id = id;
-    }
-
-    // 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 for the *primary* identifier
-    const normalizedName =
-      componentName.charAt(0).toUpperCase() + componentName.slice(1);
-
-    /**
-     * Helper to resolve a component by a given identifier string.
-     * Checks Atoms -> Molecules -> UI Components.
-     */
-    const resolveComponent = (identifier: string) => {
-      const normalized =
-        identifier.charAt(0).toUpperCase() + identifier.slice(1);
-      const atomName = normalized.endsWith("Atom")
-        ? normalized
-        : `${normalized}Atom`;
-
-      // Priority 1: Atoms
-      let Comp =
-        (Atoms as any)[atomName] ||
-        (Atoms as any)[normalized] ||
-        (Atoms as any)[identifier];
-
-      // Priority 2: Molecules
-      if (!Comp) {
-        Comp = (Molecules as any)[normalized] || (Molecules as any)[identifier];
-      }
-
-      // Priority 3: UI Components
-      if (!Comp && !CONTEXT_DEPENDENT_COMPONENTS.has(normalized)) {
-        Comp =
-          (UIComponents as any)[normalized] ||
-          (UIComponents as any)[identifier];
-      }
-      return Comp;
-    };
-
-    // 1. Attempt using 'name' (or 'type' if name matches)
-    let TargetComponent = resolveComponent(componentName);
-    let resolvedIdentifier = componentName;
-
-    // 2. FALLBACK: If 'name' failed but 'type' is different, try 'type'
-    // This allows "name": "Dashboard" (descriptive) with "type": "layout" (functional)
-    if (!TargetComponent && type && type !== componentName) {
-      TargetComponent = resolveComponent(type);
-      if (TargetComponent) {
-        resolvedIdentifier = type;
-      }
-    }
-
-    // 4. Handle component not found or context-dependent
-    if (!TargetComponent) {
-      if (CONTEXT_DEPENDENT_COMPONENTS.has(normalizedName)) {
-        return renderContextDependentError(
-          componentName,
-          normalizedName,
-          uniqueKey,
-        );
-      } else {
-        // Show generic "not found" error
-        console.warn(
-          `[PXEngineRenderer] Component not found: ${componentName}`,
-        );
-        return renderNotFoundError(componentName, uniqueKey);
-      }
-    }
-
-    // Calculate atom name for the *resolved* component to check for render props
-    const resolvedNormalized =
-      resolvedIdentifier.charAt(0).toUpperCase() + resolvedIdentifier.slice(1);
-    const atomName = resolvedNormalized.endsWith("Atom")
-      ? resolvedNormalized
-      : `${resolvedNormalized}Atom`;
-
-    // 4. Determine if component expects 'renderComponent' prop (for Atoms with children management)
-    // Only components that explicitly handle children via renderComponent should get it
-    const ATOMS_WITH_RENDER = new Set([
-      "LayoutAtom",
-      "CardAtom",
-      "TabsAtom",
-      "AccordionAtom",
-      "ScrollAreaAtom",
-      "CarouselAtom",
-      "AspectRatioAtom",
-      "CollapsibleAtom",
-      "TooltipAtom",
-      "PopoverAtom",
-      "DialogAtom",
-      "SheetAtom",
-      "ResizableAtom",
-    ]);
-    const isAtomWithRenderProp = ATOMS_WITH_RENDER.has(atomName);
-
-    // 5. Render Component
-    // Merge dynamic style with existing style prop if any
-    const finalStyle = { ...dynamicStyle, ...(finalProps.style || {}) };
-
-    if (isAtomWithRenderProp) {
-      // Atoms handle their own children via renderComponent
-      return (
-        <TargetComponent
-          key={uniqueKey}
-          {...finalProps}
-          style={finalStyle}
-          onAction={onAction}
-          renderComponent={renderRecursive}
-          children={children}
-        />
-      );
-    } else {
-      // Standard shadcn components - pass children as React children
-      return (
-        <TargetComponent key={uniqueKey} {...finalProps} style={finalStyle}>
-          {Array.isArray(children)
-            ? children.map((child, idx) => renderRecursive(child, idx))
-            : children}
-        </TargetComponent>
-      );
-    }
-  };
-
-  return (
-    <div className="px-engine-root relative w-full h-full">
-      {renderRecursive(root)}
-    </div>
-  );
-};

package/src/render/index.ts

@@ -1 +0,0 @@
-export * from "./PXEngineRenderer";

package/src/styles/globals.css

@@ -1,146 +0,0 @@
-@tailwind base;
-
-@custom-variant dark (&:is(.dark *));
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
-
-    /* Custom theme variables (will be inherited from client) */
-    --gray25: #fcfcfd;
-    --gray50: #f9fafb;
-    --gray100: #f2f4f7;
-    --gray200: #eaecf0;
-    --gray300: #d0d5dd;
-    --gray400: #98a2b3;
-    --gray500: #667085;
-    --gray600: #475467;
-    --gray700: #344054;
-    --gray800: #1d2939;
-    --gray900: #101828;
-    --purple100: #f4f3ff;
-    --purple200: #988cff;
-    --purple500: #6941c6;
-    --purple-text: #7f56d9;
-    --purple50: #f9f5ff;
-    --purple20: #f4ebff;
-    --purple-border: #d6bbfb;
-    --purpleLight: #f4f3ff;
-    --purple-text-1: #7f56d9;
-    --purple-text-2: #6941c6;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-:root {
-  --sidebar: hsl(0 0% 98%);
-  --sidebar-foreground: hsl(240 5.3% 26.1%);
-  --sidebar-primary: hsl(240 5.9% 10%);
-  --sidebar-primary-foreground: hsl(0 0% 98%);
-  --sidebar-accent: hsl(240 4.8% 95.9%);
-  --sidebar-accent-foreground: hsl(240 5.9% 10%);
-  --sidebar-border: hsl(220 13% 91%);
-  --sidebar-ring: hsl(217.2 91.2% 59.8%);
-}
-
-.dark {
-  --sidebar: hsl(240 5.9% 10%);
-  --sidebar-foreground: hsl(240 4.8% 95.9%);
-  --sidebar-primary: hsl(224.3 76.3% 48%);
-  --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(240 3.7% 15.9%);
-  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
-  --sidebar-border: hsl(240 3.7% 15.9%);
-  --sidebar-ring: hsl(217.2 91.2% 59.8%);
-}
-
-@theme inline {
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}