pxengine 0.1.12 → 0.1.13

package/src/atoms/ChartAtom.tsx

@@ -1,192 +0,0 @@
-import React from "react";
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  type ChartConfig,
-} from "@/components/ui/chart";
-import {
-  Bar,
-  BarChart,
-  Line,
-  LineChart,
-  Area,
-  AreaChart,
-  Pie,
-  PieChart,
-  Radar,
-  RadarChart,
-  RadialBar,
-  RadialBarChart,
-  XAxis,
-  CartesianGrid,
-  PolarGrid,
-  PolarAngleAxis,
-} from "recharts";
-import { ChartAtomType } from "../types/atoms";
-import { cn } from "@/lib/utils";
-
-/**
- * ChartAtom
- * A versatile chart component wrapping Shadcn Chart primitives and Recharts.
- */
-export const ChartAtom: React.FC<ChartAtomType> = ({
-  chartType,
-  data,
-  config,
-  XAxisKey,
-  YAxisKey,
-  showTooltip = true,
-  showLegend = true,
-  stacked = false,
-  className,
-  style,
-}) => {
-  const renderChart = () => {
-    switch (chartType) {
-      case "bar":
-        return (
-          <BarChart data={data}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey={XAxisKey}
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              tickFormatter={(value) => value.toString().slice(0, 3)}
-            />
-            {showTooltip && (
-              <ChartTooltip content={<ChartTooltipContent hideLabel />} />
-            )}
-            {showLegend && <ChartLegend content={<ChartLegendContent />} />}
-            {Object.keys(config).map((key) => (
-              <Bar
-                key={key}
-                dataKey={key}
-                fill={`var(--color-${key})`}
-                radius={8}
-                stackId={stacked ? "a" : undefined}
-              />
-            ))}
-          </BarChart>
-        );
-      case "line":
-        return (
-          <LineChart data={data}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey={XAxisKey}
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              tickFormatter={(value) => value.toString().slice(0, 3)}
-            />
-            {showTooltip && (
-              <ChartTooltip content={<ChartTooltipContent hideLabel />} />
-            )}
-            {Object.keys(config).map((key) => (
-              <Line
-                key={key}
-                dataKey={key}
-                type="natural"
-                stroke={`var(--color-${key})`}
-                strokeWidth={2}
-                dot={false}
-              />
-            ))}
-          </LineChart>
-        );
-      case "area":
-        return (
-          <AreaChart data={data}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey={XAxisKey}
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              tickFormatter={(value) => value.toString().slice(0, 3)}
-            />
-            {showTooltip && (
-              <ChartTooltip content={<ChartTooltipContent hideLabel />} />
-            )}
-            {Object.keys(config).map((key) => (
-              <Area
-                key={key}
-                dataKey={key}
-                type="natural"
-                fill={`var(--color-${key})`}
-                fillOpacity={0.4}
-                stroke={`var(--color-${key})`}
-                stackId={stacked ? "a" : undefined}
-              />
-            ))}
-          </AreaChart>
-        );
-      case "pie":
-        return (
-          <PieChart>
-            {showTooltip && (
-              <ChartTooltip content={<ChartTooltipContent hideLabel />} />
-            )}
-            <Pie
-              data={data}
-              dataKey={YAxisKey || "value"}
-              nameKey={XAxisKey || "name"}
-              innerRadius={60}
-              strokeWidth={5}
-            />
-          </PieChart>
-        );
-      case "radar":
-        return (
-          <RadarChart data={data}>
-            {showTooltip && (
-              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-            )}
-            <PolarGrid />
-            <PolarAngleAxis dataKey={XAxisKey} />
-            {Object.keys(config).map((key) => (
-              <Radar
-                key={key}
-                dataKey={key}
-                fill={`var(--color-${key})`}
-                fillOpacity={0.6}
-              />
-            ))}
-          </RadarChart>
-        );
-      case "radial":
-        return (
-          <RadialBarChart
-            data={data}
-            innerRadius={30}
-            outerRadius={110}
-            barSize={10}
-          >
-            {showTooltip && (
-              <ChartTooltip
-                cursor={false}
-                content={<ChartTooltipContent hideLabel nameKey={XAxisKey} />}
-              />
-            )}
-            <RadialBar dataKey={YAxisKey || "value"} background />
-          </RadialBarChart>
-        );
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <ChartContainer
-      config={config as ChartConfig}
-      className={cn("min-h-[200px] w-full", className)}
-      style={style}
-    >
-      {renderChart() as React.ReactElement}
-    </ChartContainer>
-  );
-};

package/src/atoms/CheckboxAtom.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-import { Checkbox } from "@/components/ui/checkbox";
-import { CheckboxAtomType } from "../types/atoms";
-import { Label } from "@/components/ui/label";
-import { cn } from "@/lib/utils";
-
-/**
- * CheckboxAtom
- * Wraps shadcn Checkbox with label support
- */
-export const CheckboxAtom: React.FC<
-  CheckboxAtomType & { onCheckedChange?: (checked: boolean) => void }
-> = ({ id, label, checked, disabled, className, onCheckedChange }) => {
-  return (
-    <div className={cn("flex items-center space-x-2", className)}>
-      <Checkbox
-        id={id}
-        checked={checked}
-        disabled={disabled}
-        onCheckedChange={onCheckedChange}
-        className="rounded border-purple-300 text-purple-600 focus:ring-purple-500"
-      />
-      {label && (
-        <Label
-          htmlFor={id}
-          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
-        >
-          {label}
-        </Label>
-      )}
-    </div>
-  );
-};

package/src/atoms/CollapsibleAtom.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
-import { CollapsibleAtomType, UIComponent } from "../types/schema";
-import { cn } from "@/lib/utils";
-
-interface Props extends CollapsibleAtomType {
-  renderComponent: (component: UIComponent) => React.ReactNode;
-}
-
-export const CollapsibleAtom: React.FC<Props> = ({
-  trigger,
-  content,
-  defaultOpen = false,
-  className,
-  renderComponent,
-}) => {
-  return (
-    <Collapsible
-      defaultOpen={defaultOpen}
-      className={cn("w-full space-y-2", className)}
-    >
-      <CollapsibleTrigger asChild>
-        <div className="flex items-center justify-between space-x-4 px-4 py-2 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors">
-          {trigger.map((child) => (
-            <React.Fragment key={child.id}>
-              {renderComponent(child)}
-            </React.Fragment>
-          ))}
-        </div>
-      </CollapsibleTrigger>
-      <CollapsibleContent className="space-y-2">
-        {content.map((child) => (
-          <React.Fragment key={child.id}>
-            {renderComponent(child)}
-          </React.Fragment>
-        ))}
-      </CollapsibleContent>
-    </Collapsible>
-  );
-};

package/src/atoms/CommandAtom.tsx

@@ -1,46 +0,0 @@
-import React from "react";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from "@/components/ui/command";
-import { CommandAtomType } from "../types/schema";
-import { cn } from "@/lib/utils";
-
-export const CommandAtom: React.FC<CommandAtomType> = ({
-  placeholder = "Search...",
-  groups,
-  className,
-}) => {
-  return (
-    <div
-      className={cn(
-        "rounded-2xl border border-gray-100 shadow-lg overflow-hidden bg-white max-w-[400px]",
-        className,
-      )}
-    >
-      <Command>
-        <CommandInput placeholder={placeholder} />
-        <CommandList>
-          <CommandEmpty>No results found.</CommandEmpty>
-          {groups.map((group, i) => (
-            <React.Fragment key={i}>
-              <CommandGroup heading={group.heading}>
-                {group.items.map((item, j) => (
-                  <CommandItem key={j} value={item.value}>
-                    <span>{item.label}</span>
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-              {i < groups.length - 1 && <CommandSeparator />}
-            </React.Fragment>
-          ))}
-        </CommandList>
-      </Command>
-    </div>
-  );
-};

package/src/atoms/ContextMenuAtom.tsx

@@ -1,49 +0,0 @@
-import React from "react";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
-import { ContextMenuAtomType } from "../types/atoms";
-import { cn } from "@/lib/utils";
-import * as Icons from "lucide-react";
-
-/**
- * ContextMenuAtom
- * Wraps shadcn ContextMenu
- */
-export const ContextMenuAtom: React.FC<
-  ContextMenuAtomType & { onAction?: (action: string) => void }
-> = ({ trigger, items, className, onAction }) => {
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger asChild>{trigger}</ContextMenuTrigger>
-      <ContextMenuContent
-        className={cn(
-          "w-64 bg-white/80 backdrop-blur-md border-purple-100",
-          className,
-        )}
-      >
-        {items.map((item) => {
-          const Icon = item.icon ? (Icons as any)[item.icon] : null;
-          return (
-            <ContextMenuItem
-              key={item.value}
-              disabled={item.disabled}
-              onClick={() => item.action && onAction?.(item.action)}
-              className={cn(
-                "flex items-center gap-2 cursor-pointer focus:bg-purple-50",
-                item.isDestructive &&
-                  "text-red-600 focus:text-red-700 focus:bg-red-50",
-              )}
-            >
-              {Icon && <Icon className="w-4 h-4" />}
-              <span>{item.label}</span>
-            </ContextMenuItem>
-          );
-        })}
-      </ContextMenuContent>
-    </ContextMenu>
-  );
-};

package/src/atoms/DialogAtom.tsx

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

@@ -1,49 +0,0 @@
-import React from "react";
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/components/ui/drawer";
-import { DrawerAtomType } from "../types/atoms";
-import { cn } from "@/lib/utils";
-
-/**
- * DrawerAtom
- * Wraps shadcn Drawer for mobile-first views
- */
-export const DrawerAtom: React.FC<DrawerAtomType> = ({
-  title,
-  description,
-  trigger,
-  children,
-  className,
-}) => {
-  return (
-    <Drawer>
-      <DrawerTrigger asChild>{trigger}</DrawerTrigger>
-      <DrawerContent
-        className={cn(
-          "bg-white/95 backdrop-blur-xl border-t border-purple-100",
-          className,
-        )}
-      >
-        <div className="mx-auto w-full max-w-sm">
-          {(title || description) && (
-            <DrawerHeader>
-              {title && (
-                <DrawerTitle className="text-purple-900">{title}</DrawerTitle>
-              )}
-              {description && (
-                <DrawerDescription>{description}</DrawerDescription>
-              )}
-            </DrawerHeader>
-          )}
-          <div className="p-4 pb-8">{children}</div>
-        </div>
-      </DrawerContent>
-    </Drawer>
-  );
-};

package/src/atoms/DropdownMenuAtom.tsx

@@ -1,49 +0,0 @@
-import React from "react";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { DropdownMenuAtomType } from "../types/atoms";
-import { cn } from "@/lib/utils";
-import * as Icons from "lucide-react";
-
-/**
- * DropdownMenuAtom
- * Wraps shadcn DropdownMenu
- */
-export const DropdownMenuAtom: React.FC<
-  DropdownMenuAtomType & { onAction?: (action: string) => void }
-> = ({ trigger, items, className, onAction }) => {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
-      <DropdownMenuContent
-        className={cn(
-          "w-56 bg-white/80 backdrop-blur-md border-purple-100",
-          className,
-        )}
-      >
-        {items.map((item) => {
-          const Icon = item.icon ? (Icons as any)[item.icon] : null;
-          return (
-            <DropdownMenuItem
-              key={item.value}
-              disabled={item.disabled}
-              onClick={() => item.action && onAction?.(item.action)}
-              className={cn(
-                "flex items-center gap-2 cursor-pointer focus:bg-purple-50",
-                item.isDestructive &&
-                  "text-red-600 focus:text-red-700 focus:bg-red-50",
-              )}
-            >
-              {Icon && <Icon className="w-4 h-4" />}
-              <span>{item.label}</span>
-            </DropdownMenuItem>
-          );
-        })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};

package/src/atoms/FormInputAtom.tsx

@@ -1,101 +0,0 @@
-import React from "react";
-import {
-  Form,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { useForm } from "react-hook-form";
-import { cn } from "@/lib/utils";
-
-export interface FormInputAtomType {
-  type: "FormInput";
-  name: string;
-  label?: string;
-  placeholder?: string;
-  description?: string;
-  defaultValue?: string;
-  required?: boolean;
-  inputType?:
-    | "text"
-    | "email"
-    | "password"
-    | "number"
-    | "tel"
-    | "url"
-    | "date"
-    | "time";
-  className?: string;
-  id?: string;
-}
-
-interface FormInputAtomProps extends Omit<FormInputAtomType, "type"> {
-  renderComponent?: any;
-  children?: any;
-}
-
-/**
- * FormInputAtom
- *
- * Self-contained form input 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 various input types (text, email, password, etc.)
- * - Includes validation support through react-hook-form
- * - Schema-safe for dynamic rendering via PXEngineRenderer
- */
-export const FormInputAtom: React.FC<FormInputAtomProps> = ({
-  name,
-  label,
-  placeholder,
-  description,
-  defaultValue = "",
-  required = false,
-  inputType = "text",
-  className,
-  id,
-}) => {
-  // Safe fallback for name to prevent RHF crash
-  const fieldName =
-    name || id || `input-${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>
-              <Input
-                type={inputType}
-                placeholder={placeholder}
-                id={id || `form-input-${name}`}
-                {...field}
-              />
-            </FormControl>
-            {description && <FormDescription>{description}</FormDescription>}
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-    </Form>
-  );
-};