pxengine 0.1.12 → 0.1.14

package/src/molecules/creator-discovery/ContentPreviewGallery/ContentPreviewGallery.tsx

@@ -1,41 +0,0 @@
-import React from "react";
-import { ContentPreviewGalleryMolecule } from "../../../types/molecules";
-import { cn } from "@/lib/utils";
-import { Play } from "lucide-react";
-
-/**
- * ContentPreviewGallery
- * Grid/Gallery of thumbnail previews.
- */
-export const ContentPreviewGallery: React.FC<ContentPreviewGalleryMolecule> = ({
-  items,
-  className,
-}) => {
-  return (
-    <div className={cn("grid grid-cols-2 gap-2", className)}>
-      {items.map((item, i) => (
-        <a
-          key={i}
-          href={item.url || "#"}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="group relative aspect-square overflow-hidden rounded-2xl bg-gray-100"
-        >
-          <img
-            src={item.thumbnail}
-            alt="Content preview"
-            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
-          />
-          {item.type === "video" && (
-            <div className="absolute inset-0 flex items-center justify-center bg-black/10 group-hover:bg-black/20 transition-colors">
-              <div className="rounded-full bg-white/30 backdrop-blur-md p-3 text-white ring-1 ring-white/50">
-                <Play className="h-6 w-6 fill-white" />
-              </div>
-            </div>
-          )}
-          <div className="absolute inset-0 ring-1 ring-inset ring-black/10 rounded-2xl" />
-        </a>
-      ))}
-    </div>
-  );
-};

package/src/molecules/creator-discovery/ContentPreviewGallery/index.ts

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

package/src/molecules/creator-discovery/CreatorActionHeader/CreatorActionHeader.tsx

@@ -1,77 +0,0 @@
-import React from "react";
-import { Button } from "@/components/ui/button";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { CreatorActionHeaderMolecule } from "../../../types/molecules";
-import { cn } from "@/lib/utils";
-
-/**
- * CreatorActionHeader
- * A premium header for profile views with banner and sticky actions.
- */
-export const CreatorActionHeader: React.FC<CreatorActionHeaderMolecule> = ({
-  bannerSrc,
-  avatarSrc,
-  name,
-  handle,
-  actions,
-  className,
-}) => {
-  return (
-    <div
-      className={cn(
-        "relative w-full rounded-[40px] overflow-hidden bg-white border border-purple-50 shadow-sm",
-        className,
-      )}
-    >
-      {/* Banner */}
-      <div className="h-48 w-full bg-gradient-to-r from-purple-100 to-indigo-100 relative">
-        {bannerSrc && (
-          <img
-            src={bannerSrc}
-            className="h-full w-full object-cover"
-            alt="Banner"
-          />
-        )}
-        <div className="absolute inset-0 bg-black/5" />
-      </div>
-
-      {/* Profile Info & Actions */}
-      <div className="px-8 pb-8 flex flex-col md:flex-row md:items-end justify-between gap-6 -mt-12 relative z-10">
-        <div className="flex flex-col md:flex-row items-start md:items-end gap-6">
-          <div className="p-2 bg-white rounded-[32px] shadow-lg">
-            <Avatar className="h-32 w-32 rounded-[24px] border-4 border-white">
-              <AvatarImage src={avatarSrc} className="rounded-[24px]" />
-              <AvatarFallback className="rounded-[24px] bg-purple-50 text-purple-600 text-3xl font-bold">
-                {name.charAt(0)}
-              </AvatarFallback>
-            </Avatar>
-          </div>
-          <div className="mb-2">
-            <h1 className="text-3xl font-bold text-gray-900 tracking-tight">
-              {name}
-            </h1>
-            <p className="text-purple-600 font-medium tracking-wide">
-              @{handle}
-            </p>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-3 mb-2">
-          {actions.map((action, i) => (
-            <Button
-              key={i}
-              variant={(action.variant as any) || "default"}
-              className={cn(
-                "rounded-2xl px-6 h-11 font-bold transition-all",
-                action.variant === "default" &&
-                  "bg-purple-600 hover:bg-purple-700 shadow-md hover:shadow-purple-200",
-              )}
-            >
-              {action.label}
-            </Button>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/molecules/creator-discovery/CreatorActionHeader/index.ts

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

package/src/molecules/creator-discovery/CreatorGridCard/CreatorGridCard.tsx

@@ -1,104 +0,0 @@
-import React from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { CreatorGridCardMolecule } from "../../../types/molecules";
-import { cn } from "@/lib/utils";
-import { Instagram, Youtube, Video, Twitter } from "lucide-react";
-
-const TikTokIcon = ({ className }: { className?: string }) => (
-  <Video className={className} /> // Placeholder
-);
-
-/**
- * CreatorGridCard
- * A visually rich card for discovery grids.
- */
-export const CreatorGridCard: React.FC<CreatorGridCardMolecule> = ({
-  bannerSrc,
-  avatarSrc,
-  name,
-  handle,
-  metrics,
-  platforms,
-  className,
-}) => {
-  const getIcon = (p: string) => {
-    switch (p.toLowerCase()) {
-      case "instagram":
-        return Instagram;
-      case "tiktok":
-        return TikTokIcon;
-      case "youtube":
-        return Youtube;
-      case "twitter":
-        return Twitter;
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <Card
-      className={cn(
-        "group overflow-hidden rounded-[32px] border-none bg-white shadow-sm hover:shadow-xl transition-all duration-300",
-        className,
-      )}
-    >
-      <div className="relative h-32 w-full overflow-hidden">
-        {bannerSrc ? (
-          <img
-            src={bannerSrc}
-            alt={name}
-            className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
-          />
-        ) : (
-          <div className="h-full w-full bg-gradient-to-br from-purple-500 to-indigo-600" />
-        )}
-        <div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/20 to-transparent" />
-      </div>
-
-      <CardContent className="relative pt-0 px-5 pb-6">
-        <div className="absolute -top-10 left-5">
-          <Avatar className="h-20 w-20 border-4 border-white shadow-lg ring-2 ring-purple-100">
-            <AvatarImage src={avatarSrc} alt={name} />
-            <AvatarFallback className="bg-purple-50 text-purple-700 font-bold text-xl">
-              {name.charAt(0)}
-            </AvatarFallback>
-          </Avatar>
-        </div>
-
-        <div className="mt-12 flex flex-col gap-1">
-          <h3 className="text-xl font-bold text-gray-900 truncate">{name}</h3>
-          <p className="text-sm text-muted-foreground font-medium">@{handle}</p>
-        </div>
-
-        <div className="mt-4 flex gap-2">
-          {platforms.map((p) => {
-            const Icon = getIcon(p);
-            return Icon ? (
-              <div
-                key={p}
-                className="p-1.5 rounded-lg bg-gray-50 text-gray-600 hover:text-purple-600 hover:bg-purple-50 transition-colors"
-              >
-                <Icon className="h-4 w-4" />
-              </div>
-            ) : null;
-          })}
-        </div>
-
-        <div className="mt-6 grid grid-cols-2 gap-4 border-t border-gray-50 pt-4">
-          {metrics.map((m, i) => (
-            <div key={i} className="flex flex-col">
-              <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
-                {m.label}
-              </span>
-              <span className="text-sm font-bold text-purple-700">
-                {m.value}
-              </span>
-            </div>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  );
-};

package/src/molecules/creator-discovery/CreatorGridCard/index.ts

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

package/src/molecules/creator-discovery/CreatorProfileSummary/CreatorProfileSummary.tsx

@@ -1,65 +0,0 @@
-import React from "react";
-import { AvatarAtom } from "../../../atoms/AvatarAtom";
-import { TextAtom } from "../../../atoms/TextAtom";
-import { CreatorProfileSummaryMolecule } from "../../../types/molecules";
-import { cn } from "@/lib/utils";
-
-/**
- * CreatorProfileSummary
- * A compact row showing avatar, name, and key metrics.
- */
-export const CreatorProfileSummary: React.FC<CreatorProfileSummaryMolecule> = ({
-  avatarSrc,
-  name,
-  followerCount,
-  engagementRate,
-  className,
-}) => {
-  return (
-    <div
-      className={cn(
-        "flex items-center gap-4 p-3 rounded-2xl bg-white/40 border border-purple-50 shadow-sm",
-        className,
-      )}
-    >
-      <AvatarAtom
-        id={`avatar-${name}`}
-        type="avatar"
-        src={avatarSrc}
-        fallback={name.charAt(0)}
-        className="w-12 h-12 ring-2 ring-purple-100"
-      />
-      <div className="flex flex-col flex-1">
-        <TextAtom
-          id={`name-${name}`}
-          type="text"
-          content={name}
-          variant="h4"
-          className="text-gray-900 leading-tight"
-        />
-        <div className="flex gap-3 mt-1">
-          {followerCount && (
-            <div className="flex flex-col">
-              <span className="text-[10px] uppercase tracking-wider text-muted-foreground font-bold">
-                Followers
-              </span>
-              <span className="text-xs font-semibold text-purple-700">
-                {followerCount}
-              </span>
-            </div>
-          )}
-          {engagementRate && (
-            <div className="flex flex-col border-l border-purple-100 pl-3">
-              <span className="text-[10px] uppercase tracking-wider text-muted-foreground font-bold">
-                Engagement
-              </span>
-              <span className="text-xs font-semibold text-indigo-600">
-                {engagementRate}
-              </span>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/molecules/creator-discovery/CreatorProfileSummary/index.ts

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

package/src/molecules/creator-discovery/GrowthChartCard/GrowthChartCard.tsx

@@ -1,58 +0,0 @@
-import React from "react";
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
-import { ChartAtom } from "../../../atoms/ChartAtom";
-import { GrowthChartCardMolecule } from "../../../types/molecules";
-import { cn } from "@/lib/utils";
-import { TrendingUp } from "lucide-react";
-
-/**
- * GrowthChartCard
- * Visualizes time-series growth data for follower and engagement metrics.
- */
-export const GrowthChartCard: React.FC<GrowthChartCardMolecule> = ({
-  title,
-  data,
-  config,
-  metric,
-  period,
-  className,
-}) => {
-  return (
-    <Card
-      className={cn(
-        "rounded-[32px] border-purple-50 shadow-sm overflow-hidden",
-        className,
-      )}
-    >
-      <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
-        <div>
-          <CardTitle className="text-lg font-bold text-gray-900">
-            {title}
-          </CardTitle>
-          <p className="text-xs text-muted-foreground">{period}</p>
-        </div>
-        <div className="bg-green-50 p-2 rounded-xl">
-          <TrendingUp className="w-4 h-4 text-green-600" />
-        </div>
-      </CardHeader>
-      <CardContent>
-        <div className="h-[200px] w-full mt-4">
-          <ChartAtom
-            type="chart"
-            id="growth-trend"
-            chartType="area"
-            data={data}
-            config={config}
-            XAxisKey="date"
-            showTooltip={true}
-            showLegend={false}
-          />
-        </div>
-        <div className="mt-4 flex items-center justify-between">
-          <span className="text-sm font-medium text-gray-500">{metric}</span>
-          <span className="text-sm font-bold text-purple-600">+12.5%</span>
-        </div>
-      </CardContent>
-    </Card>
-  );
-};

package/src/molecules/creator-discovery/GrowthChartCard/index.ts

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

package/src/molecules/creator-discovery/MCQCard/MCQCard.tsx

@@ -1,165 +0,0 @@
-import React from "react";
-import { MCQCardProps } from "./MCQCard.types";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  CardFooter,
-  Badge,
-} from "@/components";
-import { ActionButton } from "../../generic/ActionButton";
-import { cn } from "@/lib/utils";
-import { CheckCircle2, Sparkles } from "lucide-react";
-
-/**
- * MCQCard
- *
- * A molecule for Multiple Choice Questions.
- * Supports:
- * - Recommended options with styling
- * - Radio-style selection
- * - Integrated ActionButton with countdown
- * - Peer/Agent approval labels
- * - Premium aesthetics
- */
-export const MCQCard = React.memo<MCQCardProps>(
-  ({
-    question,
-    options,
-    recommended,
-    selectedOption,
-    onSelect,
-    onProceed,
-    isLatestMessage = true,
-    countdown,
-    isPaused = false,
-    onPause,
-    isLoading = false,
-    className,
-    selectionStatus,
-  }) => {
-    const handleOptionClick = (key: string) => {
-      if (isLatestMessage && !isLoading) {
-        onSelect?.(key);
-      }
-    };
-
-    const handleProceed = () => {
-      if (selectedOption || recommended) {
-        onProceed?.(selectedOption || recommended || "");
-      }
-    };
-
-    return (
-      <Card
-        className={cn(
-          "w-full rounded-[24px] border border-gray200 bg-white shadow-sm overflow-hidden",
-          className,
-        )}
-      >
-        <CardHeader className="pb-2">
-          <CardTitle className="text-lg font-bold text-gray-900 tracking-tight leading-snug">
-            {question}
-          </CardTitle>
-        </CardHeader>
-
-        <CardContent className="space-y-3 pb-6">
-          {Object.entries(options).map(([key, label]) => {
-            const isSelected = selectedOption === key;
-            const isRecommended = key === recommended;
-
-            return (
-              <div
-                key={key}
-                onClick={() => handleOptionClick(key)}
-                className={cn(
-                  "group relative flex items-start gap-4 p-4 rounded-2xl border transition-all duration-200 cursor-pointer",
-                  isSelected
-                    ? "border-purple500 bg-purple50/30"
-                    : "border-gray-100 bg-gray-50/30 hover:border-gray-300 hover:bg-gray-50",
-                  isLoading && "opacity-50 cursor-not-allowed",
-                )}
-              >
-                {/* Radio Circle */}
-                <div
-                  className={cn(
-                    "mt-1 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors",
-                    isSelected
-                      ? "border-purple500 bg-purple500"
-                      : "border-gray-300 bg-white group-hover:border-gray-400",
-                  )}
-                >
-                  {isSelected && (
-                    <div className="w-1.5 h-1.5 rounded-full bg-white" />
-                  )}
-                </div>
-
-                <div className="flex-1 space-y-1.5">
-                  <div className="flex items-center gap-2 flex-wrap">
-                    <span
-                      className={cn(
-                        "text-sm font-semibold transition-colors",
-                        isSelected ? "text-purple900" : "text-gray700",
-                      )}
-                    >
-                      {label}
-                    </span>
-
-                    {isRecommended && (
-                      <Badge
-                        variant="outline"
-                        className="bg-green-50 text-green-700 border-green-100 flex items-center gap-1 text-[10px] py-0 h-5"
-                      >
-                        <Sparkles className="h-3 w-3" />
-                        Recommended
-                      </Badge>
-                    )}
-
-                    {isSelected && !isLatestMessage && (
-                      <Badge
-                        variant="outline"
-                        className="bg-purple-50 text-purple-700 border-purple-100 text-[10px] py-0 h-5"
-                      >
-                        Selected
-                      </Badge>
-                    )}
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </CardContent>
-
-        <CardFooter className="flex flex-col gap-4 pt-0 border-t border-gray-100/50 bg-gray-50/30 p-6">
-          {isLatestMessage ? (
-            <div className="w-full flex justify-center">
-              <ActionButton
-                label={
-                  selectedOption ? "Continue" : "Proceed with Recommendation"
-                }
-                countdown={countdown}
-                isPaused={isPaused}
-                onPause={onPause}
-                onProceed={handleProceed}
-                isLoading={isLoading}
-                disabled={!selectedOption && !recommended}
-              />
-            </div>
-          ) : (
-            <div className="w-full flex justify-end items-center gap-1.5 text-green-600 text-xs font-semibold">
-              <CheckCircle2 className="h-4 w-4" />
-              <span>
-                {selectionStatus === "agent"
-                  ? "Suggested by Agent, Approved by You"
-                  : "Selected by You"}
-              </span>
-            </div>
-          )}
-        </CardFooter>
-      </Card>
-    );
-  },
-);
-
-MCQCard.displayName = "MCQCard";

package/src/molecules/creator-discovery/MCQCard/MCQCard.types.ts

@@ -1,71 +0,0 @@
-export interface MCQOption {
-  key: string;
-  label: string;
-}
-
-export interface MCQCardProps {
-  /**
-   * The question being asked
-   */
-  question: string;
-  
-  /**
-   * The options to choose from
-   */
-  options: Record<string, string>;
-  
-  /**
-   * The key of the recommended option
-   */
-  recommended?: string;
-  
-  /**
-   * The currently selected option key
-   */
-  selectedOption?: string;
-  
-  /**
-   * Triggered when an option is selected
-   */
-  onSelect?: (key: string) => void;
-  
-  /**
-   * Triggered when the user clicks continue
-   */
-  onProceed?: (key: string) => void;
-  
-  /**
-   * Whether the message is the latest
-   */
-  isLatestMessage?: boolean;
-  
-  /**
-   * Countdown in seconds
-   */
-  countdown?: number;
-  
-  /**
-   * Whether the countdown is paused
-   */
-  isPaused?: boolean;
-  
-  /**
-   * Pause/Resume handler
-   */
-  onPause?: () => void;
-  
-  /**
-   * Loading state during submission
-   */
-  isLoading?: boolean;
-  
-  /**
-   * Custom className
-   */
-  className?: string;
-  
-  /**
-   * Who made the final selection (for historical view)
-   */
-  selectionStatus?: "user" | "agent";
-}

package/src/molecules/creator-discovery/MCQCard/index.ts

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

package/src/molecules/creator-discovery/PlatformIconGroup/PlatformIconGroup.tsx

@@ -1,72 +0,0 @@
-import React from "react";
-import { PlatformIconGroupMolecule } from "../../../types/molecules";
-import { cn } from "@/lib/utils";
-import { Instagram, Youtube, Twitter, Video } from "lucide-react";
-
-const TikTokIcon = ({ className }: { className?: string }) => (
-  <Video className={className} /> // Placeholder for TikTok
-);
-
-/**
- * PlatformIconGroup
- * Displays a horizontal list of active social platform icons.
- */
-export const PlatformIconGroup: React.FC<PlatformIconGroupMolecule> = ({
-  platforms,
-  className,
-}) => {
-  const getIcon = (platform: string) => {
-    switch (platform) {
-      case "instagram":
-        return Instagram;
-      case "tiktok":
-        return TikTokIcon;
-      case "youtube":
-        return Youtube;
-      case "twitter":
-        return Twitter;
-      default:
-        return null;
-    }
-  };
-
-  const getColors = (platform: string) => {
-    switch (platform) {
-      case "instagram":
-        return "text-pink-600 bg-pink-50 hover:bg-pink-100 border-pink-100";
-      case "tiktok":
-        return "text-zinc-900 bg-zinc-100 hover:bg-zinc-200 border-zinc-200";
-      case "youtube":
-        return "text-red-600 bg-red-50 hover:bg-red-100 border-red-100";
-      case "twitter":
-        return "text-sky-500 bg-sky-50 hover:bg-sky-100 border-sky-100";
-      default:
-        return "text-gray-500 bg-gray-50 border-gray-100";
-    }
-  };
-
-  return (
-    <div className={cn("flex gap-2", className)}>
-      {platforms.map((p, i) => {
-        const Icon = getIcon(p.platform);
-        if (!Icon) return null;
-
-        return (
-          <a
-            key={i}
-            href={p.url || "#"}
-            target="_blank"
-            rel="noopener noreferrer"
-            title={p.handle || p.platform}
-            className={cn(
-              "p-1.5 rounded-lg border transition-colors flex items-center justify-center",
-              getColors(p.platform),
-            )}
-          >
-            <Icon className="w-4 h-4" />
-          </a>
-        );
-      })}
-    </div>
-  );
-};

package/src/molecules/creator-discovery/PlatformIconGroup/index.ts

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