pxengine 0.1.0

package/src/atoms/DialogAtom.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { DialogAtomType, UIComponent } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+interface Props extends DialogAtomType {
+  renderComponent: (component: UIComponent) => React.ReactNode;
+}
+
+export const DialogAtom: React.FC<Props> = ({
+  title,
+  description,
+  trigger,
+  children,
+  footer,
+  className,
+  renderComponent,
+}) => {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <div className={cn("inline-block cursor-pointer", className)}>
+          {trigger.map((child) => (
+            <React.Fragment key={child.id}>
+              {renderComponent(child)}
+            </React.Fragment>
+          ))}
+        </div>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px] rounded-3xl p-6 bg-white/95 backdrop-blur-md shadow-3xl border-gray-100">
+        <DialogHeader>
+          <DialogTitle className="text-xl font-bold bg-gradient-to-r from-purple600 to-indigo-600 bg-clip-text text-transparent">
+            {title}
+          </DialogTitle>
+          {description && (
+            <DialogDescription className="text-gray-500 font-medium pt-1">
+              {description}
+            </DialogDescription>
+          )}
+        </DialogHeader>
+        <div className="py-4">
+          {children.map((child) => (
+            <React.Fragment key={child.id}>
+              {renderComponent(child)}
+            </React.Fragment>
+          ))}
+        </div>
+        {footer && (
+          <DialogFooter className="pt-2">
+            {footer.map((child) => (
+              <React.Fragment key={child.id}>
+                {renderComponent(child)}
+              </React.Fragment>
+            ))}
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/atoms/InputAtom.tsx

@@ -0,0 +1,162 @@
+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,
+}) => {
+  const containerClass = cn("flex flex-col gap-1.5 w-full", className);
+
+  const renderLabel = () => {
+    if (!label) return null;
+    return (
+      <Label className="text-xs font-bold text-gray-400 uppercase tracking-widest pl-1">
+        {label} {required && <span className="text-destructive">*</span>}
+      </Label>
+    );
+  };
+
+  const renderInput = () => {
+    switch (inputType) {
+      case "textarea":
+        return (
+          <Textarea
+            placeholder={placeholder}
+            defaultValue={defaultValue}
+            disabled={disabled}
+            rows={config?.rows || 3}
+          />
+        );
+      case "select":
+        return (
+          <Select defaultValue={defaultValue} disabled={disabled}>
+            <SelectTrigger>
+              <SelectValue placeholder={placeholder || "Select option"} />
+            </SelectTrigger>
+            <SelectContent>
+              {options?.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        );
+      case "slider":
+        return (
+          <div className="pt-4 pb-2">
+            <Slider
+              defaultValue={[defaultValue || config?.min || 0]}
+              max={config?.max || 100}
+              min={config?.min || 0}
+              step={config?.step || 1}
+              disabled={disabled}
+            />
+          </div>
+        );
+      case "checkbox":
+        return (
+          <div className="flex items-center space-x-2 py-2">
+            <Checkbox
+              id={label}
+              defaultChecked={defaultValue}
+              disabled={disabled}
+            />
+            <label
+              htmlFor={label}
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              {label}
+            </label>
+          </div>
+        );
+      case "switch":
+        return (
+          <div className="flex items-center space-x-2 py-2">
+            <Switch
+              id={label}
+              defaultChecked={defaultValue}
+              disabled={disabled}
+            />
+            <Label htmlFor={label}>{label}</Label>
+          </div>
+        );
+      case "radio":
+        return (
+          <RadioGroup defaultValue={defaultValue} disabled={disabled}>
+            {options?.map((opt) => (
+              <div key={opt.value} className="flex items-center space-x-2">
+                <RadioGroupItem
+                  value={opt.value}
+                  id={`${label}-${opt.value}`}
+                />
+                <Label htmlFor={`${label}-${opt.value}`}>{opt.label}</Label>
+              </div>
+            ))}
+          </RadioGroup>
+        );
+      case "otp":
+        return (
+          <InputOTP
+            maxLength={config?.maxLength || 6}
+            disabled={disabled}
+            defaultValue={defaultValue}
+          >
+            <InputOTPGroup>
+              {Array.from({ length: config?.maxLength || 6 }).map((_, i) => (
+                <InputOTPSlot key={i} index={i} />
+              ))}
+            </InputOTPGroup>
+          </InputOTP>
+        );
+      default:
+        return (
+          <Input
+            type={inputType}
+            placeholder={placeholder}
+            defaultValue={defaultValue}
+            disabled={disabled}
+            required={required}
+          />
+        );
+    }
+  };
+
+  return (
+    <div className={containerClass}>
+      {inputType !== "checkbox" && inputType !== "switch" && renderLabel()}
+      {renderInput()}
+    </div>
+  );
+};

package/src/atoms/LayoutAtom.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { LayoutAtomType, UIComponent } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+interface Props extends LayoutAtomType {
+  renderComponent: (component: UIComponent) => 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) => (
+        <React.Fragment key={child.id}>{renderComponent(child)}</React.Fragment>
+      ))}
+    </div>
+  );
+};

package/src/atoms/PaginationAtom.tsx

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,15 @@
+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/ScrollAreaAtom.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { ScrollAreaAtomType, UIComponent } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+interface Props extends ScrollAreaAtomType {
+  renderComponent: (component: UIComponent) => React.ReactNode;
+}
+
+export const ScrollAreaAtom: React.FC<Props> = ({
+  maxHeight = "300px",
+  children,
+  className,
+  renderComponent,
+}) => {
+  return (
+    <ScrollArea
+      className={cn("rounded-xl border", className)}
+      style={{ height: maxHeight }}
+    >
+      <div className="p-4">
+        {children.map((child) => (
+          <React.Fragment key={child.id}>
+            {renderComponent(child)}
+          </React.Fragment>
+        ))}
+      </div>
+      <ScrollBar orientation="vertical" />
+    </ScrollArea>
+  );
+};

package/src/atoms/SeparatorAtom.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Separator } from "@/components/ui/separator";
+import { SeparatorAtomType } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+export const SeparatorAtom: React.FC<SeparatorAtomType> = ({
+  orientation = "horizontal",
+  className,
+}) => {
+  return (
+    <Separator
+      orientation={orientation}
+      className={cn("bg-gray-100", className)}
+    />
+  );
+};

package/src/atoms/SheetAtom.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  SheetFooter,
+} from "@/components/ui/sheet";
+import { SheetAtomType, UIComponent } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+interface Props extends SheetAtomType {
+  renderComponent: (component: UIComponent) => React.ReactNode;
+}
+
+export const SheetAtom: React.FC<Props> = ({
+  side = "right",
+  title,
+  description,
+  trigger,
+  children,
+  footer,
+  className,
+  renderComponent,
+}) => {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <div className={cn("inline-block cursor-pointer", className)}>
+          {trigger.map((child) => (
+            <React.Fragment key={child.id}>
+              {renderComponent(child)}
+            </React.Fragment>
+          ))}
+        </div>
+      </SheetTrigger>
+      <SheetContent
+        side={side}
+        className="bg-white/95 backdrop-blur-md border-l-gray-100 shadow-2xl p-6"
+      >
+        <SheetHeader>
+          <SheetTitle className="text-xl font-bold text-gray-900">
+            {title}
+          </SheetTitle>
+          {description && (
+            <SheetDescription className="text-gray-500 font-medium">
+              {description}
+            </SheetDescription>
+          )}
+        </SheetHeader>
+        <div className="py-8">
+          {children.map((child) => (
+            <React.Fragment key={child.id}>
+              {renderComponent(child)}
+            </React.Fragment>
+          ))}
+        </div>
+        {footer && (
+          <SheetFooter className="absolute bottom-6 left-6 right-6">
+            {footer.map((child) => (
+              <React.Fragment key={child.id}>
+                {renderComponent(child)}
+              </React.Fragment>
+            ))}
+          </SheetFooter>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+};

package/src/atoms/SkeletonAtom.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { SkeletonAtomType } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+export const SkeletonAtom: React.FC<SkeletonAtomType> = ({
+  shape = "rect",
+  width,
+  height,
+  className,
+}) => {
+  return (
+    <Skeleton
+      className={cn(
+        shape === "circle" ? "rounded-full" : "rounded-md",
+        "bg-gray-100",
+        className,
+      )}
+      style={{ width, height }}
+    />
+  );
+};

package/src/atoms/SpinnerAtom.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Loader2 } from "lucide-react";
+import { SpinnerAtomType } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+export const SpinnerAtom: React.FC<SpinnerAtomType> = ({
+  size = "md",
+  className,
+}) => {
+  const sizeMap = {
+    sm: "h-4 w-4",
+    md: "h-6 w-6",
+    lg: "h-8 w-8",
+    xl: "h-12 w-12",
+  };
+
+  return (
+    <Loader2
+      className={cn(
+        "animate-spin text-purple500",
+        sizeMap[size] || sizeMap.md,
+        className,
+      )}
+    />
+  );
+};

package/src/atoms/TableAtom.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { TableAtomType } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+export const TableAtom: React.FC<TableAtomType> = ({
+  headers,
+  rows,
+  className,
+}) => {
+  return (
+    <div
+      className={cn(
+        "rounded-2xl border border-gray-100 overflow-hidden bg-white",
+        className,
+      )}
+    >
+      <Table>
+        <TableHeader className="bg-gray-50/50">
+          <TableRow>
+            {headers.map((header, i) => (
+              <TableHead
+                key={i}
+                className="text-xs font-bold text-gray-400 uppercase tracking-widest px-6 py-4"
+              >
+                {header}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {rows.map((row, i) => (
+            <TableRow
+              key={i}
+              className="hover:bg-purple-50/30 transition-colors border-gray-50"
+            >
+              {row.map((cell, j) => (
+                <TableCell
+                  key={j}
+                  className="text-sm text-gray-700 px-6 py-4 font-medium"
+                >
+                  {cell}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+};

package/src/atoms/TabsAtom.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { TabsAtomType, UIComponent } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+interface Props extends TabsAtomType {
+  renderComponent: (component: UIComponent) => React.ReactNode;
+}
+
+export const TabsAtom: React.FC<Props> = ({
+  defaultValue,
+  tabs,
+  className,
+  renderComponent,
+}) => {
+  return (
+    <Tabs defaultValue={defaultValue} className={cn("w-full", className)}>
+      <TabsList className="bg-gray-100/50 p-1 rounded-xl">
+        {tabs.map((tab) => (
+          <TabsTrigger
+            key={tab.value}
+            value={tab.value}
+            className="rounded-lg data-[state=active]:bg-white data-[state=active]:shadow-sm"
+          >
+            {tab.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {tabs.map((tab) => (
+        <TabsContent key={tab.value} value={tab.value} className="mt-4">
+          {tab.content.map((child) => (
+            <React.Fragment key={child.id}>
+              {renderComponent(child)}
+            </React.Fragment>
+          ))}
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+};

package/src/atoms/TextAtom.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { TextAtomType } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+/**
+ * TextAtom
+ * Renders standardized text styles from UISchema
+ */
+export const TextAtom: React.FC<TextAtomType> = ({
+  content,
+  variant = "p",
+  className,
+}) => {
+  const baseStyles: Record<string, string> = {
+    h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl text-gray-900",
+    h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0 text-gray-900",
+    h3: "scroll-m-20 text-2xl font-semibold tracking-tight text-gray-900",
+    h4: "scroll-m-20 text-xl font-semibold tracking-tight text-gray-900",
+    p: "leading-7 [&:not(:first-child)]:mt-6 text-gray-700",
+    small: "text-sm font-medium leading-none text-gray-600",
+    muted: "text-sm text-muted-foreground",
+    label: "text-[10px] font-bold text-gray-400 uppercase tracking-widest pl-1",
+  };
+
+  const Component =
+    variant === "small" || variant === "muted" || variant === "label"
+      ? "p"
+      : variant;
+
+  return (
+    <Component className={cn(baseStyles[variant], className)}>
+      {content}
+    </Component>
+  );
+};