pxengine 0.1.12 → 0.1.14

package/src/molecules/generic/FormCard/FormCard.tsx

@@ -1,136 +0,0 @@
-import React from "react";
-import { FormCardProps } from "./FormCard.types";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  CardFooter,
-} from "@/components";
-import { EditableField } from "../EditableField";
-import { ActionButton } from "../ActionButton";
-import { cn } from "@/lib/utils";
-import { Copy } from "lucide-react";
-
-/**
- * FormCard
- *
- * A high-level molecule that assembles EditableFields into a cohesive card unit.
- * Features:
- * - Dotted vertical timeline visual
- * - Copy to clipboard functionality
- * - Integrated ActionButton with countdown
- * - Responsive layout
- */
-export const FormCard = React.memo<FormCardProps>(
-  ({
-    title,
-    fields,
-    data,
-    editingFields = {},
-    changedFields = {},
-    savingFields = {},
-    onFieldEdit,
-    onFieldSave,
-    onFieldCancel,
-    showTimeline = true,
-    proceedLabel,
-    countdown,
-    isPaused = false,
-    onPause,
-    onProceed,
-    className,
-    footer,
-  }) => {
-    const handleCopyAll = () => {
-      const text = fields
-        .map(
-          (f) =>
-            `${f.label}: ${typeof data[f.key] === "object" ? JSON.stringify(data[f.key]) : data[f.key]}`,
-        )
-        .join("\n");
-      navigator.clipboard.writeText(text);
-    };
-
-    return (
-      <Card
-        className={cn(
-          "w-full rounded-[24px] border border-gray200 bg-white shadow-sm overflow-hidden",
-          className,
-        )}
-      >
-        <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-          <CardTitle className="text-lg font-bold text-gray-900 tracking-tight">
-            {title}
-          </CardTitle>
-          <button
-            onClick={handleCopyAll}
-            className="p-1.5 rounded-md hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition-colors"
-            title="Copy all details"
-          >
-            <Copy className="h-4 w-4" />
-          </button>
-        </CardHeader>
-
-        <CardContent className="pt-2 pb-6">
-          <div className="relative">
-            {/* Vertical Timeline Line */}
-            {showTimeline && (
-              <div className="absolute left-[7px] top-2 bottom-6 w-0.5 border-l-2 border-dotted border-gray200 pointer-events-none" />
-            )}
-
-            <div className="space-y-4">
-              {fields.map((field) => (
-                <div key={field.key} className="relative pl-6">
-                  {/* Timeline Dot */}
-                  {showTimeline && (
-                    <div
-                      className={cn(
-                        "absolute left-0 top-[18px] w-[14px] h-[14px] -translate-x-1/2 rounded-full border-2 bg-white z-10",
-                        changedFields[field.key]
-                          ? "border-amber-500"
-                          : "border-gray-200",
-                      )}
-                    />
-                  )}
-
-                  <EditableField
-                    label={field.label}
-                    value={data[field.key]}
-                    type={field.type}
-                    config={field}
-                    isEditing={editingFields[field.key]}
-                    isChanged={changedFields[field.key]}
-                    isSaving={savingFields[field.key]}
-                    onEdit={() => onFieldEdit?.(field.key)}
-                    onSave={(val) => onFieldSave?.(field.key, val)}
-                    onCancel={() => onFieldCancel?.(field.key)}
-                  />
-                </div>
-              ))}
-            </div>
-          </div>
-        </CardContent>
-
-        {(onProceed || footer) && (
-          <CardFooter className="flex flex-col gap-4 pt-0 border-t border-gray-100/50 bg-gray-50/30 p-6">
-            {onProceed && proceedLabel && (
-              <div className="w-full flex justify-center">
-                <ActionButton
-                  label={proceedLabel}
-                  countdown={countdown}
-                  isPaused={isPaused}
-                  onPause={onPause}
-                  onProceed={onProceed}
-                />
-              </div>
-            )}
-            {footer}
-          </CardFooter>
-        )}
-      </Card>
-    );
-  },
-);
-
-FormCard.displayName = "FormCard";

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

@@ -1,93 +0,0 @@
-import { FieldConfig } from "@/types/common";
-
-export interface FormCardProps {
-  /**
-   * Unique identifier
-   */
-  id?: string;
-
-  /**
-   * Title of the form card
-   */
-  title: string;
-  
-  /**
-   * Map of fields to render
-   */
-  fields: FieldConfig[];
-  
-  /**
-   * Initial data for the form
-   */
-  data: Record<string, any>;
-  
-  /**
-   * Current editing states for each field
-   */
-  editingFields?: Record<string, boolean>;
-  
-  /**
-   * Fields that have been modified
-   */
-  changedFields?: Record<string, boolean>;
-  
-  /**
-   * Fields currently being saved
-   */
-  savingFields?: Record<string, boolean>;
-  
-  /**
-   * Triggered when a field starts editing
-   */
-  onFieldEdit?: (key: string) => void;
-  
-  /**
-   * Triggered when a field value is saved
-   */
-  onFieldSave?: (key: string, newValue: any) => void;
-  
-  /**
-   * Triggered when a field edit is cancelled
-   */
-  onFieldCancel?: (key: string) => void;
-  
-  /**
-   * Show a dotted timeline visual on the left
-   */
-  showTimeline?: boolean;
-  
-  /**
-   * Label for the "Proceed" button
-   */
-  proceedLabel?: string;
-  
-  /**
-   * Countdown for auto-proceed
-   */
-  countdown?: number;
-  
-  /**
-   * Whether the timer is paused
-   */
-  isPaused?: boolean;
-  
-  /**
-   * Pause/Resume handler
-   */
-  onPause?: () => void;
-  
-  /**
-   * Proceed handler
-   */
-  onProceed?: () => void;
-  
-  /**
-   * Custom className
-   */
-  className?: string;
-  
-  /**
-   * Footer content (optional)
-   */
-  footer?: React.ReactNode;
-}

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

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

package/src/molecules/generic/LoadingOverlay/LoadingOverlay.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-import { SpinnerAtom } from "../../../atoms/SpinnerAtom";
-import { TextAtom } from "../../../atoms/TextAtom";
-import { LoadingOverlayMolecule } from "../../../types/molecules";
-import { cn } from "@/lib/utils";
-
-/**
- * LoadingOverlay
- * A full-container overlay with a spinner and message.
- */
-export const LoadingOverlay: React.FC<LoadingOverlayMolecule> = ({
-  message = "Loading...",
-  className,
-}) => {
-  return (
-    <div
-      className={cn(
-        "absolute inset-0 z-50 flex flex-col items-center justify-center bg-white/60 backdrop-blur-[2px] rounded-inherit",
-        className,
-      )}
-    >
-      <div className="bg-white p-6 rounded-2xl shadow-xl flex flex-col items-center border border-purple-50">
-        <SpinnerAtom
-          id="loading-spinner"
-          type="spinner"
-          size="lg"
-          className="text-purple-600 mb-3"
-        />
-        <TextAtom
-          id="loading-message"
-          type="text"
-          content={message}
-          variant="small"
-          className="font-semibold text-purple-900"
-        />
-      </div>
-    </div>
-  );
-};

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

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

package/src/molecules/generic/NotificationList/NotificationList.tsx

@@ -1,80 +0,0 @@
-import React from "react";
-import { Info, CheckCircle2, AlertTriangle, AlertCircle } from "lucide-react";
-import { NotificationListMolecule } from "../../../types/molecules";
-import { cn } from "@/lib/utils";
-
-/**
- * NotificationList
- * A list of actionable notifications and activity logs.
- */
-export const NotificationList: React.FC<NotificationListMolecule> = ({
-  notifications,
-  className,
-}) => {
-  const getIcon = (type: string) => {
-    switch (type) {
-      case "success":
-        return <CheckCircle2 className="w-4 h-4 text-green-600" />;
-      case "warning":
-        return <AlertTriangle className="w-4 h-4 text-amber-600" />;
-      case "error":
-        return <AlertCircle className="w-4 h-4 text-red-600" />;
-      default:
-        return <Info className="w-4 h-4 text-blue-600" />;
-    }
-  };
-
-  const getBg = (type: string) => {
-    switch (type) {
-      case "success":
-        return "bg-green-50";
-      case "warning":
-        return "bg-amber-50";
-      case "error":
-        return "bg-red-50";
-      default:
-        return "bg-blue-50";
-    }
-  };
-
-  return (
-    <div className={cn("flex flex-col gap-2", className)}>
-      {notifications.map((n) => (
-        <div
-          key={n.id}
-          className={cn(
-            "p-3 rounded-2xl flex gap-3 transition-all hover:translate-x-1 border border-transparent hover:border-purple-50 bg-white shadow-[0_2px_10px_-4px_rgba(0,0,0,0.05)]",
-            !n.read && "border-purple-100 bg-purple-50/10",
-          )}
-        >
-          <div
-            className={cn(
-              "w-10 h-10 rounded-xl flex items-center justify-center shrink-0",
-              getBg(n.type),
-            )}
-          >
-            {getIcon(n.type)}
-          </div>
-          <div className="flex flex-col gap-0.5 flex-1 min-w-0">
-            <div className="flex items-center justify-between gap-2">
-              <h5 className="text-sm font-bold text-gray-900 truncate">
-                {n.title}
-              </h5>
-              {!n.read && (
-                <div className="w-2 h-2 rounded-full bg-purple-600 shrink-0" />
-              )}
-            </div>
-            {n.description && (
-              <p className="text-xs text-muted-foreground truncate">
-                {n.description}
-              </p>
-            )}
-            <span className="text-[10px] text-gray-400 mt-1">
-              {n.timestamp}
-            </span>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};

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

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

package/src/molecules/generic/StatsGrid/StatsGrid.tsx

@@ -1,80 +0,0 @@
-import React from "react";
-import { Card, CardContent } from "@/components";
-import { TextAtom } from "../../../atoms/TextAtom";
-import { StatsGridMolecule } from "../../../types/molecules";
-import { cn } from "@/lib/utils";
-import * as Icons from "lucide-react";
-
-/**
- * StatsGrid
- * A grid of statistical cards with icons and trends.
- */
-export const StatsGrid: React.FC<StatsGridMolecule> = ({
-  items,
-  className,
-}) => {
-  return (
-    <div
-      className={cn(
-        "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4",
-        className,
-      )}
-    >
-      {items.map((item, index) => {
-        const Icon = item.icon ? (Icons as any)[item.icon] : null;
-        const trendColor =
-          item.trendDirection === "up"
-            ? "text-green-600"
-            : item.trendDirection === "down"
-              ? "text-red-600"
-              : "text-gray-500";
-        const TrendIcon =
-          item.trendDirection === "up"
-            ? Icons.ArrowUpRight
-            : item.trendDirection === "down"
-              ? Icons.ArrowDownRight
-              : null;
-
-        return (
-          <Card
-            key={index}
-            className="bg-white/60 backdrop-blur-sm border-purple-50 hover:shadow-md transition-all rounded-2xl overflow-hidden"
-          >
-            <CardContent className="p-4 flex flex-col gap-2">
-              <div className="flex items-center justify-between">
-                <TextAtom
-                  id={`stat-label-${index}`}
-                  type="text"
-                  content={item.label}
-                  variant="small"
-                  className="text-muted-foreground font-medium"
-                />
-                {Icon && <Icon className="w-4 h-4 text-purple-500" />}
-              </div>
-              <div className="flex items-baseline gap-2">
-                <TextAtom
-                  id={`stat-value-${index}`}
-                  type="text"
-                  content={String(item.value)}
-                  variant="h3"
-                  className="font-bold text-gray-900"
-                />
-                {item.trend && (
-                  <div
-                    className={cn(
-                      "flex items-center text-xs font-bold",
-                      trendColor,
-                    )}
-                  >
-                    {TrendIcon && <TrendIcon className="w-3 h-3 mr-0.5" />}
-                    {item.trend}
-                  </div>
-                )}
-              </div>
-            </CardContent>
-          </Card>
-        );
-      })}
-    </div>
-  );
-};

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

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

package/src/molecules/generic/StepWizard/StepWizard.tsx

@@ -1,67 +0,0 @@
-import React from "react";
-import { StepWizardMolecule } from "../../../types/molecules";
-import { cn } from "@/lib/utils";
-import { Check } from "lucide-react";
-
-/**
- * StepWizard
- * Horizontal step indicator for multi-part workflows.
- */
-export const StepWizard: React.FC<StepWizardMolecule> = ({
-  steps,
-  currentStep,
-  className,
-}) => {
-  return (
-    <div className={cn("flex items-center w-full", className)}>
-      {steps.map((step, i) => {
-        const isCompleted = i < currentStep;
-        const isActive = i === currentStep;
-        const isLast = i === steps.length - 1;
-
-        return (
-          <React.Fragment key={i}>
-            <div className="flex flex-col items-center relative group">
-              <div
-                className={cn(
-                  "w-10 h-10 rounded-full flex items-center justify-center border-2 transition-all duration-300",
-                  isCompleted
-                    ? "bg-purple-600 border-purple-600 text-white"
-                    : isActive
-                      ? "bg-white border-purple-600 text-purple-600 ring-4 ring-purple-50"
-                      : "bg-white border-gray-200 text-gray-400",
-                )}
-              >
-                {isCompleted ? (
-                  <Check className="w-5 h-5" />
-                ) : (
-                  <span>{i + 1}</span>
-                )}
-              </div>
-              <div className="absolute -bottom-8 whitespace-nowrap text-center">
-                <span
-                  className={cn(
-                    "text-xs font-bold",
-                    isActive ? "text-purple-700" : "text-gray-500",
-                  )}
-                >
-                  {step.title}
-                </span>
-              </div>
-            </div>
-            {!isLast && (
-              <div className="flex-1 mx-4 h-0.5 bg-gray-100 self-center mb-0 mt-0">
-                <div
-                  className={cn(
-                    "h-full bg-purple-600 transition-all duration-500",
-                    isCompleted ? "w-full" : "w-0",
-                  )}
-                />
-              </div>
-            )}
-          </React.Fragment>
-        );
-      })}
-    </div>
-  );
-};

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

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

package/src/molecules/generic/TagCloud/TagCloud.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { Badge } from "@/components/ui/badge";
-import { TagCloudMolecule } from "../../../types/molecules";
-import { cn } from "@/lib/utils";
-
-/**
- * TagCloud
- * A cluster of clickable tags.
- */
-export const TagCloud: React.FC<
-  TagCloudMolecule & { onTagClick?: (val: string) => void }
-> = ({ tags, className, onTagClick }) => {
-  return (
-    <div className={cn("flex flex-wrap gap-2", className)}>
-      {tags.map((tag) => (
-        <Badge
-          key={tag.value}
-          variant="secondary"
-          className="cursor-pointer bg-white border border-purple-50 hover:bg-purple-50 hover:border-purple-200 text-gray-700 rounded-lg px-3 py-1.5 transition-all flex items-center gap-2 shadow-sm"
-          onClick={() => onTagClick?.(tag.value)}
-        >
-          <span>{tag.label}</span>
-          {tag.count !== undefined && (
-            <span className="text-[10px] font-bold bg-purple-100 text-purple-700 px-1.5 rounded-full">
-              {tag.count}
-            </span>
-          )}
-        </Badge>
-      ))}
-    </div>
-  );
-};

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

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

package/src/molecules/generic/index.ts

@@ -1,12 +0,0 @@
-export * from "./EditableField";
-export * from "./ActionButton";
-export * from "./FormCard";
-export * from "./StatsGrid";
-export * from "./EmptyState";
-export * from "./LoadingOverlay";
-export * from "./FilterBar";
-export * from "./FileUpload";
-export * from "./TagCloud";
-export * from "./DataGrid";
-export * from "./StepWizard";
-export * from "./NotificationList";

package/src/molecules/index.ts

@@ -1,2 +0,0 @@
-export * from "./generic/index";
-export * from "./creator-discovery/index";