pxengine 0.1.12 → 0.1.14

package/src/molecules/generic/ActionButton/ActionButton.types.ts

@@ -1,68 +0,0 @@
-import { ButtonVariant, ButtonSize } from "@/types/common";
-
-export interface ActionButtonProps {
-  /**
-   * Unique identifier
-   */
-  id?: string;
-
-  /**
-   * Main button label
-   */
-  label: string;
-  
-  /**
-   * Secondary label (e.g. for sub-actions or state changes)
-   */
-  secondaryLabel?: string;
-  
-  /**
-   * Countdown in seconds. If provided, the button will show a timer.
-   */
-  countdown?: number;
-  
-  /**
-   * Whether the auto-proceed is paused
-   */
-  isPaused?: boolean;
-  
-  /**
-   * Triggered when the user pauses/resumes the timer
-   */
-  onPause?: () => void;
-  
-  /**
-   * Triggered when the user clicks the button or timer expires
-   */
-  onProceed: () => void;
-  
-  /**
-   * Button variant (from shadcn)
-   */
-  variant?: ButtonVariant;
-  
-  /**
-   * Button size (from shadcn)
-   */
-  size?: ButtonSize;
-  
-  /**
-   * Whether the button is disabled
-   */
-  disabled?: boolean;
-  
-  /**
-   * Loading state
-   */
-  isLoading?: boolean;
-  
-  /**
-   * Custom className
-   */
-  className?: string;
-  
-  /**
-   * Whether to show the countdown visually
-   */
-  showCountdown?: boolean;
-}

package/src/molecules/generic/ActionButton/index.ts

@@ -1,2 +0,0 @@
-export * from "./ActionButton";
-export * from "./ActionButton.types";

package/src/molecules/generic/DataGrid/DataGrid.tsx

@@ -1,102 +0,0 @@
-import React from "react";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Badge } from "@/components/ui/badge";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { DataGridMolecule } from "../../../types/molecules";
-import { cn } from "@/lib/utils";
-
-/**
- * DataGrid
- * A premium table component with typed cells and responsive design.
- */
-export const DataGrid: React.FC<DataGridMolecule> = ({
-  columns,
-  data,
-  pageSize = 10,
-  className,
-}) => {
-  const renderCell = (item: any, column: any) => {
-    const value = item[column.accessorKey];
-
-    switch (column.type) {
-      case "badge":
-        return (
-          <Badge
-            variant="secondary"
-            className="bg-purple-50 text-purple-700 border-purple-100"
-          >
-            {value}
-          </Badge>
-        );
-      case "avatar":
-        return (
-          <div className="flex items-center gap-2">
-            <Avatar className="h-8 w-8">
-              <AvatarImage src={value} />
-              <AvatarFallback>{item.name?.charAt(0) || "U"}</AvatarFallback>
-            </Avatar>
-            {item.name && <span className="font-medium">{item.name}</span>}
-          </div>
-        );
-      case "date":
-        return (
-          <span className="text-muted-foreground">
-            {new Date(value).toLocaleDateString()}
-          </span>
-        );
-      case "number":
-        return (
-          <span className="font-mono font-medium">
-            {value.toLocaleString()}
-          </span>
-        );
-      default:
-        return <span>{value}</span>;
-    }
-  };
-
-  return (
-    <div
-      className={cn(
-        "rounded-3xl border border-purple-50 bg-white overflow-hidden shadow-sm",
-        className,
-      )}
-    >
-      <Table>
-        <TableHeader className="bg-gray-50/50">
-          <TableRow>
-            {columns.map((col) => (
-              <TableHead
-                key={col.accessorKey}
-                className="font-bold text-gray-900 h-12"
-              >
-                {col.header}
-              </TableHead>
-            ))}
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {data.slice(0, pageSize).map((item, idx) => (
-            <TableRow
-              key={idx}
-              className="hover:bg-purple-50/30 transition-colors border-gray-50"
-            >
-              {columns.map((col) => (
-                <TableCell key={col.accessorKey} className="py-4">
-                  {renderCell(item, col)}
-                </TableCell>
-              ))}
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </div>
-  );
-};

package/src/molecules/generic/DataGrid/index.ts

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

package/src/molecules/generic/EditableField/EditableField.tsx

@@ -1,229 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import { EditableFieldProps } from "./EditableField.types";
-import { cn } from "@/lib/utils";
-import {
-  Button,
-  Input,
-  Label,
-  Textarea,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Slider,
-} from "@/components";
-import { Check, X, Pencil, Loader2 } from "lucide-react";
-
-/**
- * EditableField
- *
- * A generic field that toggles between display and edit modes.
- * Supports various input types and custom rendering.
- */
-export const EditableField = React.memo<EditableFieldProps>(
-  ({
-    label,
-    value,
-    type,
-    isEditing: isEditingProp,
-    onEdit,
-    onSave,
-    onCancel,
-    isSaving = false,
-    isChanged = false,
-    config = {},
-    className,
-    renderDisplay,
-    renderEdit,
-  }) => {
-    const [localValue, setLocalValue] = useState(value);
-    const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
-
-    // Sync local value when external value changes or editing starts
-    useEffect(() => {
-      setLocalValue(value);
-    }, [value, isEditingProp]);
-
-    // Focus input when editing starts
-    useEffect(() => {
-      if (isEditingProp) {
-        setTimeout(() => inputRef.current?.focus(), 0);
-      }
-    }, [isEditingProp]);
-
-    const handleSave = () => {
-      onSave?.(localValue);
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-      if (e.key === "Enter" && !e.shiftKey && type !== "textarea") {
-        e.preventDefault();
-        handleSave();
-      } else if (e.key === "Escape") {
-        onCancel?.();
-      }
-    };
-
-    const renderInput = () => {
-      if (renderEdit) {
-        return renderEdit(localValue, setLocalValue);
-      }
-
-      switch (type) {
-        case "textarea":
-          return (
-            <Textarea
-              ref={inputRef as React.RefObject<HTMLTextAreaElement>}
-              value={localValue || ""}
-              onChange={(e) => setLocalValue(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder={config.placeholder}
-              rows={config.rows || 3}
-              className="min-h-[80px] resize-none"
-            />
-          );
-        case "select":
-          return (
-            <Select
-              value={localValue?.toString()}
-              onValueChange={(val) => setLocalValue(val)}
-            >
-              <SelectTrigger className="w-full">
-                <SelectValue
-                  placeholder={config.placeholder || "Select an option"}
-                />
-              </SelectTrigger>
-              <SelectContent>
-                {config.options?.map((opt: any) => {
-                  const label = typeof opt === "string" ? opt : opt.label;
-                  const val = typeof opt === "string" ? opt : opt.value;
-                  return (
-                    <SelectItem key={val} value={val}>
-                      {label}
-                    </SelectItem>
-                  );
-                })}
-              </SelectContent>
-            </Select>
-          );
-        case "slider":
-          return (
-            <div className="pt-6 pb-2 px-2">
-              <Slider
-                defaultValue={[localValue?.min || 0, localValue?.max || 100]}
-                max={config.sliderConfig?.max || 100}
-                min={config.sliderConfig?.min || 0}
-                step={config.sliderConfig?.step || 1}
-                onValueChange={([min, max]) => setLocalValue({ min, max })}
-              />
-              {config.sliderConfig?.formatValue && (
-                <div className="mt-2 text-xs text-muted-foreground text-center">
-                  {config.sliderConfig.formatValue(localValue)}
-                </div>
-              )}
-            </div>
-          );
-        case "number":
-          return (
-            <Input
-              ref={inputRef as React.RefObject<HTMLInputElement>}
-              type="number"
-              value={localValue || ""}
-              onChange={(e) => setLocalValue(e.target.value)}
-              onKeyDown={handleKeyDown}
-              min={config.numberConfig?.min}
-              max={config.numberConfig?.max}
-              step={config.numberConfig?.step}
-            />
-          );
-        default:
-          return (
-            <Input
-              ref={inputRef as React.RefObject<HTMLInputElement>}
-              type="text"
-              value={localValue || ""}
-              onChange={(e) => setLocalValue(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder={config.placeholder}
-            />
-          );
-      }
-    };
-
-    const formattedValue = () => {
-      if (renderDisplay) return renderDisplay(value);
-
-      if (type === "slider") {
-        return config.sliderConfig?.formatValue
-          ? config.sliderConfig.formatValue(value)
-          : `${value?.min} - ${value?.max}`;
-      }
-
-      if (!value)
-        return <span className="text-muted-foreground italic">Not set</span>;
-
-      return value.toString();
-    };
-
-    return (
-      <div className={cn("group flex flex-col gap-1.5 py-2", className)}>
-        <div className="flex items-center justify-between">
-          <Label className="text-xs font-medium text-gray500 uppercase tracking-tight">
-            {label}
-          </Label>
-          {isChanged && !isEditingProp && (
-            <div
-              className="w-1.5 h-1.5 rounded-full bg-amber-500"
-              title="Unsaved changes"
-            />
-          )}
-        </div>
-
-        {isEditingProp ? (
-          <div className="flex flex-col gap-2">
-            {renderInput()}
-            <div className="flex items-center justify-end gap-2">
-              <Button
-                size="icon"
-                variant="outline"
-                className="h-8 w-8 text-destructive border-destructive/20 hover:bg-destructive/10"
-                onClick={onCancel}
-                disabled={isSaving}
-              >
-                <X className="h-4 w-4" />
-              </Button>
-              <Button
-                size="icon"
-                className="h-8 w-8 bg-purple500 hover:bg-purple600 text-white"
-                onClick={handleSave}
-                disabled={isSaving}
-              >
-                {isSaving ? (
-                  <Loader2 className="h-4 w-4 animate-spin" />
-                ) : (
-                  <Check className="h-4 w-4" />
-                )}
-              </Button>
-            </div>
-          </div>
-        ) : (
-          <div
-            className={cn(
-              "relative flex items-center justify-between rounded-md px-2 py-1.5 transition-all",
-              "hover:bg-gray-100/50 cursor-pointer border border-transparent hover:border-gray-200",
-            )}
-            onClick={onEdit}
-          >
-            <div className="text-sm text-gray-900 font-medium truncate flex-1 leading-relaxed">
-              {formattedValue()}
-            </div>
-            <Pencil className="h-3.5 w-3.5 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
-          </div>
-        )}
-      </div>
-    );
-  },
-);
-
-EditableField.displayName = "EditableField";

package/src/molecules/generic/EditableField/EditableField.types.ts

@@ -1,73 +0,0 @@
-import { FieldType, FieldConfig } from "@/types/common";
-
-export interface EditableFieldProps {
-  /**
-   * Unique identifier
-   */
-  id?: string;
-
-  /**
-   * Field label
-   */
-  label: string;
-  
-  /**
-   * Field value
-   */
-  value: any;
-  
-  /**
-   * Input type (text, textarea, number, slider, etc.)
-   */
-  type: FieldType;
-  
-  /**
-   * Current editing state
-   */
-  isEditing?: boolean;
-  
-  /**
-   * Triggered when the user wants to start editing
-   */
-  onEdit?: () => void;
-  
-  /**
-   * Triggered when the user saves the new value
-   */
-  onSave?: (newValue: any) => void;
-  
-  /**
-   * Triggered when the user cancels editing
-   */
-  onCancel?: () => void;
-  
-  /**
-   * Loading state during save
-   */
-  isSaving?: boolean;
-  
-  /**
-   * Indicates if the value has been changed but not saved
-   */
-  isChanged?: boolean;
-  
-  /**
-   * Configuration for the specific field type
-   */
-  config?: Partial<FieldConfig>;
-  
-  /**
-   * Custom className for the container
-   */
-  className?: string;
-  
-  /**
-   * Custom renderer for the display state
-   */
-  renderDisplay?: (value: any) => React.ReactNode;
-  
-  /**
-   * Custom renderer for the edit state
-   */
-  renderEdit?: (value: any, onChange: (v: any) => void) => React.ReactNode;
-}

package/src/molecules/generic/EditableField/index.ts

@@ -1,2 +0,0 @@
-export * from "./EditableField";
-export * from "./EditableField.types";

package/src/molecules/generic/EmptyState/EmptyState.tsx

@@ -1,61 +0,0 @@
-import React from "react";
-import { ButtonAtom } from "../../../atoms/ButtonAtom";
-import { TextAtom } from "../../../atoms/TextAtom";
-import { EmptyStateMolecule } from "../../../types/molecules";
-import { cn } from "@/lib/utils";
-import * as Icons from "lucide-react";
-
-/**
- * EmptyState
- * A placeholder for empty lists or results.
- */
-export const EmptyState: React.FC<
-  EmptyStateMolecule & { onAction?: (action: string) => void }
-> = ({
-  title,
-  description,
-  icon,
-  actionLabel,
-  action,
-  className,
-  onAction,
-}) => {
-  const Icon = icon ? (Icons as any)[icon] : Icons.Search;
-
-  return (
-    <div
-      className={cn(
-        "flex flex-col items-center justify-center p-12 text-center rounded-3xl bg-purple-50/30 border-2 border-dashed border-purple-100",
-        className,
-      )}
-    >
-      <div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
-        <Icon className="w-8 h-8 text-purple-600" />
-      </div>
-      <TextAtom
-        id="empty-title"
-        type="text"
-        content={title}
-        variant="h3"
-        className="text-gray-900 mb-2"
-      />
-      <TextAtom
-        id="empty-desc"
-        type="text"
-        content={description}
-        variant="p"
-        className="text-muted-foreground mb-6 max-w-sm"
-      />
-      {actionLabel && action && (
-        <ButtonAtom
-          id="empty-action"
-          type="button"
-          label={actionLabel}
-          action={action}
-          variant="purple"
-          onAction={onAction}
-        />
-      )}
-    </div>
-  );
-};

package/src/molecules/generic/EmptyState/index.ts

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

package/src/molecules/generic/FileUpload/FileUpload.tsx

@@ -1,62 +0,0 @@
-import React from "react";
-import { Upload } from "lucide-react";
-import { FileUploadMolecule } from "../../../types/molecules";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-
-/**
- * FileUpload
- * Drag-and-drop file upload zone.
- */
-export const FileUpload: React.FC<
-  FileUploadMolecule & { onFilesSelected?: (files: File[]) => void }
-> = ({ title, accept, multiple, className, onFilesSelected }) => {
-  const [isDragging, setIsDragging] = React.useState(false);
-
-  return (
-    <div
-      className={cn(
-        "relative flex flex-col items-center justify-center p-8 border-2 border-dashed rounded-3xl transition-all",
-        isDragging
-          ? "border-purple-500 bg-purple-50"
-          : "border-purple-100 bg-white",
-        className,
-      )}
-      onDragOver={(e) => {
-        e.preventDefault();
-        setIsDragging(true);
-      }}
-      onDragLeave={() => setIsDragging(false)}
-      onDrop={(e) => {
-        e.preventDefault();
-        setIsDragging(false);
-        if (e.dataTransfer.files) {
-          onFilesSelected?.(Array.from(e.dataTransfer.files));
-        }
-      }}
-    >
-      <div className="w-12 h-12 bg-purple-100 rounded-2xl flex items-center justify-center mb-4 text-purple-600">
-        <Upload className="w-6 h-6" />
-      </div>
-      <h4 className="font-bold text-gray-900 mb-1">{title}</h4>
-      <p className="text-sm text-muted-foreground mb-6">
-        Drag and drop or click to browse
-      </p>
-      <input
-        type="file"
-        multiple={multiple}
-        accept={accept}
-        className="absolute inset-0 opacity-0 cursor-pointer"
-        onChange={(e) =>
-          e.target.files && onFilesSelected?.(Array.from(e.target.files))
-        }
-      />
-      <Button
-        variant="outline"
-        className="rounded-full border-purple-200 text-purple-700 hover:bg-purple-50"
-      >
-        Select Files
-      </Button>
-    </div>
-  );
-};

package/src/molecules/generic/FileUpload/index.ts

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

package/src/molecules/generic/FilterBar/FilterBar.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import { Badge } from "@/components/ui/badge";
-import { Input } from "@/components/ui/input";
-import { Search } from "lucide-react";
-import { FilterBarMolecule } from "../../../types/molecules";
-import { cn } from "@/lib/utils";
-
-/**
- * FilterBar
- * A horizontal bar with active filter chips and search.
- */
-export const FilterBar: React.FC<
-  FilterBarMolecule & {
-    onFilterToggle?: (val: string) => void;
-    onSearch?: (val: string) => void;
-  }
-> = ({ filters, showSearch = true, className, onFilterToggle, onSearch }) => {
-  return (
-    <div
-      className={cn(
-        "flex flex-wrap items-center gap-3 p-2 bg-white/50 backdrop-blur-md border border-purple-50 rounded-2xl shadow-sm",
-        className,
-      )}
-    >
-      {showSearch && (
-        <div className="relative flex-1 min-w-[200px]">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-          <Input
-            placeholder="Search creators..."
-            className="pl-9 bg-transparent border-none focus-visible:ring-0 placeholder:text-muted-foreground/50"
-            onChange={(e) => onSearch?.(e.target.value)}
-          />
-        </div>
-      )}
-      <div className="flex flex-wrap gap-2">
-        {filters.map((filter) => (
-          <Badge
-            key={filter.value}
-            variant={filter.active ? "default" : "outline"}
-            className={cn(
-              "cursor-pointer px-3 py-1 rounded-full transition-all",
-              filter.active
-                ? "bg-purple-600 hover:bg-purple-700 border-none"
-                : "hover:bg-purple-50 hover:border-purple-200",
-            )}
-            onClick={() => onFilterToggle?.(filter.value)}
-          >
-            {filter.label}
-          </Badge>
-        ))}
-      </div>
-    </div>
-  );
-};

package/src/molecules/generic/FilterBar/index.ts

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