pxengine 0.1.12 → 0.1.14

package/src/atoms/FormSelectAtom.tsx

@@ -1,110 +0,0 @@
-import React from "react";
-import {
-  Form,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-} from "@/components/ui/form";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { useForm } from "react-hook-form";
-import { cn } from "@/lib/utils";
-
-export interface SelectOption {
-  value: string;
-  label: string;
-}
-
-export interface FormSelectAtomType {
-  type: "FormSelect";
-  name: string;
-  label?: string;
-  placeholder?: string;
-  description?: string;
-  defaultValue?: string;
-  required?: boolean;
-  options: SelectOption[];
-  className?: string;
-  id?: string;
-}
-
-interface FormSelectAtomProps extends Omit<FormSelectAtomType, "type"> {
-  renderComponent?: any;
-  children?: any;
-}
-
-/**
- * FormSelectAtom
- *
- * Self-contained form select component that properly wraps FormField, FormItem, FormLabel, FormControl, and Select.
- * This component provides the necessary React Context for both form and select components to work correctly.
- *
- * Features:
- * - Handles all form and select context requirements internally
- * - Supports dynamic options list
- * - Includes validation support through react-hook-form
- * - Schema-safe for dynamic rendering via PXEngineRenderer
- */
-export const FormSelectAtom: React.FC<FormSelectAtomProps> = ({
-  name,
-  label,
-  placeholder = "Select an option",
-  description,
-  defaultValue = "",
-  required = false,
-  options = [],
-  className,
-  id,
-}) => {
-  // Safe fallback for name to prevent RHF crash
-  const fieldName =
-    name || id || `select-${Math.random().toString(36).substring(2, 9)}`;
-
-  // Create a local form context for this field
-  const form = useForm({
-    defaultValues: {
-      [fieldName]: defaultValue,
-    },
-  });
-
-  return (
-    <Form {...form}>
-      <FormField
-        control={form.control}
-        name={fieldName}
-        rules={{
-          required: required ? `${label || name} is required` : undefined,
-        }}
-        render={({ field }) => (
-          <FormItem className={cn("w-full", className)}>
-            {label && <FormLabel>{label}</FormLabel>}
-            <Select onValueChange={field.onChange} defaultValue={field.value}>
-              <FormControl>
-                <SelectTrigger id={id || `form-select-${fieldName}`}>
-                  <SelectValue placeholder={placeholder} />
-                </SelectTrigger>
-              </FormControl>
-              <SelectContent>
-                {options.map((option) => (
-                  <SelectItem key={option.value} value={option.value}>
-                    {option.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-            {description && <FormDescription>{description}</FormDescription>}
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    </Form>
-  );
-};

package/src/atoms/FormTextareaAtom.tsx

@@ -1,93 +0,0 @@
-import React from "react";
-import {
-  Form,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-} from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
-import { useForm } from "react-hook-form";
-import { cn } from "@/lib/utils";
-
-export interface FormTextareaAtomType {
-  type: "FormTextarea";
-  name: string;
-  label?: string;
-  placeholder?: string;
-  description?: string;
-  defaultValue?: string;
-  required?: boolean;
-  rows?: number;
-  className?: string;
-  id?: string;
-}
-
-interface FormTextareaAtomProps extends Omit<FormTextareaAtomType, "type"> {
-  renderComponent?: any;
-  children?: any;
-}
-
-/**
- * FormTextareaAtom
- *
- * Self-contained form textarea component that properly wraps FormField, FormItem, FormLabel, and FormControl.
- * This component provides the necessary React Context for form components to work correctly.
- *
- * Features:
- * - Handles all form context requirements internally
- * - Supports configurable rows
- * - Includes validation support through react-hook-form
- * - Schema-safe for dynamic rendering via PXEngineRenderer
- */
-export const FormTextareaAtom: React.FC<FormTextareaAtomProps> = ({
-  name,
-  label,
-  placeholder,
-  description,
-  defaultValue = "",
-  required = false,
-  rows = 3,
-  className,
-  id,
-}) => {
-  // Safe fallback for name to prevent RHF crash
-  const fieldName =
-    name || id || `textarea-${Math.random().toString(36).substring(2, 9)}`;
-
-  // Create a local form context for this field
-  const form = useForm({
-    defaultValues: {
-      [fieldName]: defaultValue,
-    },
-  });
-
-  return (
-    <Form {...form}>
-      <FormField
-        control={form.control}
-        name={fieldName}
-        rules={{
-          required: required ? `${label || name} is required` : undefined,
-        }}
-        render={({ field }) => (
-          <FormItem className={cn("w-full", className)}>
-            {label && <FormLabel>{label}</FormLabel>}
-            <FormControl>
-              <Textarea
-                placeholder={placeholder}
-                rows={rows}
-                id={id || `form-textarea-${fieldName}`}
-                {...field}
-              />
-            </FormControl>
-            {description && <FormDescription>{description}</FormDescription>}
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    </Form>
-  );
-};

package/src/atoms/InputAtom.tsx

@@ -1,216 +0,0 @@
-import React from "react";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Label } from "@/components/ui/label";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Switch } from "@/components/ui/switch";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Slider } from "@/components/ui/slider";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-} from "@/components/ui/input-otp";
-import { InputAtomType } from "../types/schema";
-import { cn } from "@/lib/utils";
-
-/**
- * InputAtom
- * A multi-purpose input wrapper that switches based on inputType in schema
- */
-export const InputAtom: React.FC<InputAtomType> = ({
-  inputType,
-  label,
-  placeholder,
-  defaultValue,
-  required,
-  disabled,
-  options,
-  config,
-  className,
-  style,
-}) => {
-  const containerClass = cn("flex flex-col gap-2 w-full", className);
-
-  const renderLabel = () => {
-    if (!label) return null;
-    return (
-      <Label className="text-sm font-semibold text-foreground/80 pl-0.5">
-        {label} {required && <span className="text-destructive">*</span>}
-      </Label>
-    );
-  };
-
-  const renderInput = () => {
-    const commonProps = {
-      placeholder,
-      value: defaultValue,
-      disabled,
-      required,
-      readOnly: true,
-      className: cn(
-        "rounded-xl border-border bg-background focus:ring-primary shadow-sm",
-        className,
-      ),
-      style,
-    };
-
-    switch (inputType) {
-      case "textarea":
-        return <Textarea {...commonProps} rows={config?.rows || 3} />;
-      case "select":
-        return (
-          <Select value={defaultValue} disabled={disabled}>
-            <SelectTrigger
-              className={cn(
-                "rounded-xl border-border bg-background shadow-sm",
-                className,
-              )}
-              style={style}
-            >
-              <SelectValue placeholder={placeholder || "Select option"} />
-            </SelectTrigger>
-            <SelectContent className="rounded-xl border-border shadow-xl">
-              {options?.map((opt) => (
-                <SelectItem key={opt.value} value={opt.value}>
-                  {opt.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        );
-      case "slider":
-        return (
-          <div className="pt-2 pb-1" style={style}>
-            <Slider
-              value={[defaultValue || config?.min || 0]}
-              max={config?.max || 100}
-              min={config?.min || 0}
-              step={config?.step || 1}
-              disabled={disabled}
-              className={cn("py-4", className)}
-            />
-          </div>
-        );
-      case "checkbox":
-        return (
-          <div
-            className={cn(
-              "flex items-center space-x-3 py-1.5 px-0.5 group cursor-pointer",
-              className,
-            )}
-            style={style}
-          >
-            <Checkbox
-              id={label}
-              checked={defaultValue}
-              disabled={disabled}
-              className="rounded-[6px] border-border data-[state=checked]:bg-primary shadow-sm"
-            />
-            <label
-              htmlFor={label}
-              className="text-sm font-medium leading-none cursor-pointer text-foreground/90 group-hover:text-foreground transition-colors"
-            >
-              {label}
-            </label>
-          </div>
-        );
-      case "switch":
-        return (
-          <div
-            className={cn(
-              "flex items-center justify-between py-1.5 px-0.5",
-              className,
-            )}
-            style={style}
-          >
-            <Label
-              htmlFor={label}
-              className="cursor-pointer text-foreground/90"
-            >
-              {label}
-            </Label>
-            <Switch
-              id={label}
-              checked={defaultValue}
-              disabled={disabled}
-              className="data-[state=checked]:bg-primary shadow-sm"
-            />
-          </div>
-        );
-      case "radio":
-        return (
-          <RadioGroup
-            value={defaultValue}
-            disabled={disabled}
-            className={cn("gap-2.5", className)}
-            style={style}
-          >
-            {options?.map((opt) => (
-              <div key={opt.value} className="flex items-center space-x-3">
-                <RadioGroupItem
-                  value={opt.value}
-                  id={`${label}-${opt.value}`}
-                  className="border-border text-primary shadow-sm"
-                />
-                <Label
-                  htmlFor={`${label}-${opt.value}`}
-                  className="cursor-pointer text-foreground/80 font-medium"
-                >
-                  {opt.label}
-                </Label>
-              </div>
-            ))}
-          </RadioGroup>
-        );
-      case "otp":
-        return (
-          <div
-            className={cn("flex justify-center py-2", className)}
-            style={style}
-          >
-            <InputOTP
-              maxLength={config?.maxLength || 6}
-              disabled={disabled}
-              value={defaultValue}
-            >
-              <InputOTPGroup className="gap-2">
-                {Array.from({ length: config?.maxLength || 6 }).map((_, i) => (
-                  <InputOTPSlot
-                    key={i}
-                    index={i}
-                    className="rounded-xl border border-border bg-background shadow-sm"
-                  />
-                ))}
-              </InputOTPGroup>
-            </InputOTP>
-          </div>
-        );
-      default:
-        return (
-          <Input
-            {...commonProps}
-            type={inputType}
-            className={cn(
-              "rounded-xl border-border bg-background focus:ring-primary shadow-sm h-11",
-              className,
-            )}
-          />
-        );
-    }
-  };
-
-  return (
-    <div className={containerClass} style={style}>
-      {inputType !== "checkbox" && inputType !== "switch" && renderLabel()}
-      {renderInput()}
-    </div>
-  );
-};

package/src/atoms/InputOTPAtom.tsx

@@ -1,49 +0,0 @@
-import React from "react";
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSeparator,
-  InputOTPSlot,
-} from "@/components/ui/input-otp";
-import { InputOTPAtomType } from "../types/atoms";
-import { cn } from "@/lib/utils";
-
-/**
- * InputOTPAtom
- * Wraps shadcn InputOTP for code verification
- */
-export const InputOTPAtom: React.FC<
-  InputOTPAtomType & { onChange?: (val: string) => void }
-> = ({ length, className, onChange }) => {
-  // Create slots based on length, split by optional separator if length > 4
-  const half = Math.floor(length / 2);
-  const slots = Array.from({ length }, (_, i) => i);
-
-  return (
-    <InputOTP
-      maxLength={length}
-      onChange={onChange}
-      className={cn("gap-2", className)}
-    >
-      <InputOTPGroup>
-        {slots.slice(0, half).map((i) => (
-          <InputOTPSlot
-            key={i}
-            index={i}
-            className="border-purple-200 focus:ring-purple-500"
-          />
-        ))}
-      </InputOTPGroup>
-      {length > 4 && <InputOTPSeparator />}
-      <InputOTPGroup>
-        {slots.slice(half).map((i) => (
-          <InputOTPSlot
-            key={i}
-            index={i}
-            className="border-purple-200 focus:ring-purple-500"
-          />
-        ))}
-      </InputOTPGroup>
-    </InputOTP>
-  );
-};

package/src/atoms/KbdAtom.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import { KbdAtomType } from "../types/atoms";
-import { cn } from "@/lib/utils";
-
-/**
- * KbdAtom
- * Visual representation of a keyboard shortcut
- */
-export const KbdAtom: React.FC<KbdAtomType> = ({ keys, className }) => {
-  return (
-    <kbd
-      className={cn(
-        "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100",
-        className,
-      )}
-    >
-      {keys.map((key, i) => (
-        <React.Fragment key={i}>
-          <span className="text-xs">{key}</span>
-          {i < keys.length - 1 && <span>+</span>}
-        </React.Fragment>
-      ))}
-    </kbd>
-  );
-};

package/src/atoms/LabelAtom.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import { Label } from "@/components/ui/label";
-import { LabelAtomType } from "../types/atoms";
-import { cn } from "@/lib/utils";
-
-/**
- * LabelAtom
- * Wraps shadcn Label
- */
-export const LabelAtom: React.FC<LabelAtomType> = ({
-  content,
-  htmlFor,
-  className,
-}) => {
-  return (
-    <Label
-      htmlFor={htmlFor}
-      className={cn("text-sm font-semibold text-gray-700", className)}
-    >
-      {content}
-    </Label>
-  );
-};

package/src/atoms/LayoutAtom.tsx

@@ -1,45 +0,0 @@
-import React from "react";
-import { LayoutAtomType, UIComponent } from "../types/schema";
-import { cn } from "@/lib/utils";
-
-interface Props extends LayoutAtomType {
-  renderComponent: (component: UIComponent, index?: number) => React.ReactNode;
-}
-
-/**
- * LayoutAtom
- * Standardized container with flex/grid support from schema
- */
-export const LayoutAtom: React.FC<Props> = ({
-  direction,
-  gap = "md",
-  children,
-  className,
-  renderComponent,
-}) => {
-  const gapMap: Record<string, string> = {
-    none: "gap-0",
-    sm: "gap-2",
-    md: "gap-4",
-    lg: "gap-8",
-    xl: "gap-12",
-  };
-
-  const classes = cn(
-    "flex",
-    direction === "vertical" ? "flex-col" : "flex-row flex-wrap",
-    direction === "grid" && "grid grid-cols-1 md:grid-cols-2",
-    gapMap[gap],
-    className,
-  );
-
-  return (
-    <div className={classes}>
-      {children.map((child, index) => (
-        <React.Fragment key={child.id || `layout-item-${index}`}>
-          {renderComponent(child, index)}
-        </React.Fragment>
-      ))}
-    </div>
-  );
-};

package/src/atoms/PaginationAtom.tsx

@@ -1,49 +0,0 @@
-import React from "react";
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination";
-import { PaginationAtomType } from "../types/schema";
-
-export const PaginationAtom: React.FC<PaginationAtomType> = ({
-  currentPage,
-  totalPages,
-  hasNext = true,
-  hasPrev = true,
-  className,
-}) => {
-  return (
-    <Pagination className={className}>
-      <PaginationContent>
-        {hasPrev && (
-          <PaginationItem>
-            <PaginationPrevious href="#" />
-          </PaginationItem>
-        )}
-
-        <PaginationItem>
-          <PaginationLink href="#" isActive>
-            {currentPage}
-          </PaginationLink>
-        </PaginationItem>
-
-        {totalPages > currentPage && (
-          <PaginationItem>
-            <PaginationEllipsis />
-          </PaginationItem>
-        )}
-
-        {hasNext && (
-          <PaginationItem>
-            <PaginationNext href="#" />
-          </PaginationItem>
-        )}
-      </PaginationContent>
-    </Pagination>
-  );
-};

package/src/atoms/PopoverAtom.tsx

@@ -1,40 +0,0 @@
-import React from "react";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { PopoverAtomType, UIComponent } from "../types/schema";
-import { cn } from "@/lib/utils";
-
-interface Props extends PopoverAtomType {
-  renderComponent: (component: UIComponent) => React.ReactNode;
-}
-
-export const PopoverAtom: React.FC<Props> = ({
-  trigger,
-  content,
-  className,
-  renderComponent,
-}) => {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <div className={cn("inline-block cursor-pointer", className)}>
-          {trigger.map((child) => (
-            <React.Fragment key={child.id}>
-              {renderComponent(child)}
-            </React.Fragment>
-          ))}
-        </div>
-      </PopoverTrigger>
-      <PopoverContent className="w-80 rounded-2xl shadow-2xl border-gray-100 p-4 bg-white/95 backdrop-blur-sm">
-        {content.map((child) => (
-          <React.Fragment key={child.id}>
-            {renderComponent(child)}
-          </React.Fragment>
-        ))}
-      </PopoverContent>
-    </Popover>
-  );
-};

package/src/atoms/ProgressAtom.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { Progress } from "@/components/ui/progress";
-import { ProgressAtomType } from "../types/schema";
-import { cn } from "@/lib/utils";
-
-export const ProgressAtom: React.FC<ProgressAtomType> = ({
-  value,
-  className,
-}) => {
-  return (
-    <div className={cn("w-full py-2", className)}>
-      <Progress value={value} className="h-2 bg-gray-100" />
-    </div>
-  );
-};

package/src/atoms/RadioGroupAtom.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Label } from "@/components/ui/label";
-import { RadioGroupAtomType } from "../types/atoms";
-import { cn } from "@/lib/utils";
-
-/**
- * RadioGroupAtom
- * Wraps shadcn RadioGroup
- */
-export const RadioGroupAtom: React.FC<
-  RadioGroupAtomType & { onValueChange?: (value: string) => void }
-> = ({ options, defaultValue, disabled, className, onValueChange }) => {
-  return (
-    <RadioGroup
-      defaultValue={defaultValue}
-      disabled={disabled}
-      onValueChange={onValueChange}
-      className={cn("grid gap-2", className)}
-    >
-      {options.map((option) => (
-        <div key={option.value} className="flex items-center space-x-2">
-          <RadioGroupItem value={option.value} id={option.value} />
-          <Label htmlFor={option.value} className="cursor-pointer">
-            {option.label}
-          </Label>
-        </div>
-      ))}
-    </RadioGroup>
-  );
-};