pxengine 0.1.0

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

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

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

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

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

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

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

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

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

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

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

package/src/molecules/generic/index.ts

@@ -0,0 +1,3 @@
+export * from "./EditableField";
+export * from "./ActionButton";
+export * from "./FormCard";

package/src/molecules/index.ts

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