pxengine 0.1.9 → 0.1.10

package/src/atoms/LabelAtom.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Label } from "@/components/ui/label";
+import { LabelAtomType } from "../types/atoms";
+import { cn } from "@/lib/utils";
+
+/**
+ * LabelAtom
+ * Wraps shadcn Label
+ */
+export const LabelAtom: React.FC<LabelAtomType> = ({
+  content,
+  htmlFor,
+  className,
+}) => {
+  return (
+    <Label
+      htmlFor={htmlFor}
+      className={cn("text-sm font-semibold text-gray-700", className)}
+    >
+      {content}
+    </Label>
+  );
+};

package/src/atoms/RadioGroupAtom.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Label } from "@/components/ui/label";
+import { RadioGroupAtomType } from "../types/atoms";
+import { cn } from "@/lib/utils";
+
+/**
+ * RadioGroupAtom
+ * Wraps shadcn RadioGroup
+ */
+export const RadioGroupAtom: React.FC<
+  RadioGroupAtomType & { onValueChange?: (value: string) => void }
+> = ({ options, defaultValue, disabled, className, onValueChange }) => {
+  return (
+    <RadioGroup
+      defaultValue={defaultValue}
+      disabled={disabled}
+      onValueChange={onValueChange}
+      className={cn("grid gap-2", className)}
+    >
+      {options.map((option) => (
+        <div key={option.value} className="flex items-center space-x-2">
+          <RadioGroupItem value={option.value} id={option.value} />
+          <Label htmlFor={option.value} className="cursor-pointer">
+            {option.label}
+          </Label>
+        </div>
+      ))}
+    </RadioGroup>
+  );
+};

package/src/atoms/RatingAtom.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Star } from "lucide-react";
+import { RatingAtomType } from "../types/atoms";
+import { cn } from "@/lib/utils";
+
+/**
+ * RatingAtom
+ * A star rating component for display or user input.
+ */
+export const RatingAtom: React.FC<
+  RatingAtomType & { onChange?: (val: number) => void }
+> = ({ value, max = 5, readonly = false, className, onChange }) => {
+  const [hoverValue, setHoverValue] = React.useState<number | null>(null);
+
+  return (
+    <div className={cn("flex items-center gap-1", className)}>
+      {Array.from({ length: max }, (_, i) => {
+        const starValue = i + 1;
+        const isActive = (hoverValue ?? value) >= starValue;
+
+        return (
+          <Star
+            key={i}
+            className={cn(
+              "h-5 w-5 transition-colors",
+              isActive ? "fill-yellow-400 text-yellow-400" : "text-gray-300",
+              !readonly && "cursor-pointer hover:scale-110",
+            )}
+            onClick={() => !readonly && onChange?.(starValue)}
+            onMouseEnter={() => !readonly && setHoverValue(starValue)}
+            onMouseLeave={() => !readonly && setHoverValue(null)}
+          />
+        );
+      })}
+    </div>
+  );
+};

package/src/atoms/ResizableAtom.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import { ResizableAtomType, UIComponent } from "../types/schema";
+import { cn } from "@/lib/utils";
+
+interface Props extends ResizableAtomType {
+  renderComponent: (component: UIComponent, index?: number) => React.ReactNode;
+}
+
+/**
+ * ResizableAtom
+ * Wraps shadcn Resizable panels for complex layouts
+ */
+export const ResizableAtom: React.FC<Props> = ({
+  direction,
+  panels,
+  className,
+  renderComponent,
+}) => {
+  // Use a locally typed component to bypass DTS inference issues
+  const Group = ResizablePanelGroup as any;
+
+  return (
+    <Group
+      direction={direction}
+      className={cn(
+        "min-h-[200px] w-full rounded-lg border border-purple-100",
+        className,
+      )}
+    >
+      {panels.map((panel: any, i: number) => (
+        <React.Fragment key={i}>
+          <ResizablePanel defaultSize={panel.defaultSize} className="p-4">
+            {panel.children.map((child: any, childIdx: number) => (
+              <React.Fragment
+                key={child.id || `resizable-child-${i}-${childIdx}`}
+              >
+                {renderComponent(child)}
+              </React.Fragment>
+            ))}
+          </ResizablePanel>
+          {i < panels.length - 1 && <ResizableHandle withHandle />}
+        </React.Fragment>
+      ))}
+    </Group>
+  );
+};

package/src/atoms/SliderAtom.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Slider } from "@/components/ui/slider";
+import { SliderAtomType } from "../types/atoms";
+import { cn } from "@/lib/utils";
+
+/**
+ * SliderAtom
+ * Wraps shadcn Slider
+ */
+export const SliderAtom: React.FC<
+  SliderAtomType & { onValueChange?: (value: number[]) => void }
+> = ({
+  defaultValue = [50],
+  max = 100,
+  min = 0,
+  step = 1,
+  disabled,
+  className,
+  onValueChange,
+}) => {
+  return (
+    <Slider
+      defaultValue={defaultValue}
+      max={max}
+      min={min}
+      step={step}
+      disabled={disabled}
+      onValueChange={onValueChange}
+      className={cn("w-full py-4", className)}
+    />
+  );
+};

package/src/atoms/SwitchAtom.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Switch } from "@/components/ui/switch";
+import { SwitchAtomType } from "../types/atoms";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+/**
+ * SwitchAtom
+ * Wraps shadcn Switch with label support
+ */
+export const SwitchAtom: React.FC<
+  SwitchAtomType & { onCheckedChange?: (checked: boolean) => void }
+> = ({ id, label, checked, disabled, className, onCheckedChange }) => {
+  return (
+    <div className={cn("flex items-center space-x-2", className)}>
+      <Switch
+        id={id}
+        checked={checked}
+        disabled={disabled}
+        onCheckedChange={onCheckedChange}
+      />
+      {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/TextareaAtom.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Textarea } from "@/components/ui/textarea";
+import { InputAtomType } from "../types/atoms";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+/**
+ * TextareaAtom
+ * Standalone textarea atom
+ */
+export const TextareaAtom: React.FC<
+  InputAtomType & { onChange?: (val: string) => void }
+> = ({
+  id,
+  label,
+  placeholder,
+  defaultValue,
+  disabled,
+  required,
+  className,
+  onChange,
+}) => {
+  return (
+    <div className={cn("grid w-full gap-1.5", className)}>
+      {label && (
+        <Label htmlFor={id} className="font-semibold">
+          {label}
+          {required && <span className="text-red-500 ml-1">*</span>}
+        </Label>
+      )}
+      <Textarea
+        id={id}
+        placeholder={placeholder}
+        defaultValue={defaultValue}
+        disabled={disabled}
+        required={required}
+        onChange={(e) => onChange?.(e.target.value)}
+        className="min-h-[100px] border-purple-100 focus-visible:ring-purple-500 resize-none shadow-sm"
+      />
+    </div>
+  );
+};

package/src/atoms/TimelineAtom.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { TimelineAtomType } from "../types/atoms";
+import { cn } from "@/lib/utils";
+import * as Icons from "lucide-react";
+
+/**
+ * TimelineAtom
+ * A vertical timeline primitive for processes and steps.
+ */
+export const TimelineAtom: React.FC<TimelineAtomType> = ({
+  items,
+  className,
+}) => {
+  return (
+    <div
+      className={cn(
+        "space-y-6 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px before:h-full before:w-0.5 before:bg-gradient-to-b before:from-purple-500 before:via-indigo-500 before:to-gray-200 before:pointer-events-none",
+        className,
+      )}
+    >
+      {items.map((item, i) => {
+        const Icon = item.icon ? (Icons as any)[item.icon] : null;
+        const isCompleted = item.status === "completed";
+        const isActive = item.status === "active";
+
+        return (
+          <div key={i} className="relative flex items-start gap-6 group">
+            <div
+              className={cn(
+                "flex items-center justify-center w-10 h-10 rounded-full border-4 border-white shadow-sm shrink-0 z-10 transition-all group-hover:scale-110",
+                isCompleted
+                  ? "bg-purple-600 text-white"
+                  : isActive
+                    ? "bg-indigo-600 text-white ring-4 ring-indigo-50"
+                    : "bg-gray-100 text-gray-400",
+              )}
+            >
+              {Icon ? (
+                <Icon className="w-5 h-5" />
+              ) : isCompleted ? (
+                <Icons.Check className="w-5 h-5" />
+              ) : (
+                <div className="w-2 h-2 rounded-full bg-current" />
+              )}
+            </div>
+            <div className="flex flex-col gap-1 pt-0.5">
+              <div className="flex items-center gap-2">
+                <h4
+                  className={cn(
+                    "font-bold text-sm",
+                    isCompleted
+                      ? "text-gray-900"
+                      : isActive
+                        ? "text-indigo-600"
+                        : "text-gray-500",
+                  )}
+                >
+                  {item.title}
+                </h4>
+                {item.timestamp && (
+                  <span className="text-[10px] text-muted-foreground bg-gray-50 px-1.5 py-0.5 rounded-md font-medium border border-gray-100">
+                    {item.timestamp}
+                  </span>
+                )}
+              </div>
+              {item.description && (
+                <p className="text-xs text-muted-foreground leading-relaxed max-w-sm">
+                  {item.description}
+                </p>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/atoms/ToggleAtom.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Toggle } from "@/components/ui/toggle";
+import { ToggleAtomType } from "../types/atoms";
+import { cn } from "@/lib/utils";
+
+/**
+ * ToggleAtom
+ * Wraps shadcn Toggle
+ */
+export const ToggleAtom: React.FC<
+  ToggleAtomType & { onPressedChange?: (pressed: boolean) => void }
+> = ({
+  label,
+  pressed,
+  disabled,
+  size = "md",
+  variant = "default",
+  className,
+  onPressedChange,
+}) => {
+  return (
+    <Toggle
+      pressed={pressed}
+      disabled={disabled}
+      size={size as any}
+      variant={variant as any}
+      onPressedChange={onPressedChange}
+      className={cn(
+        "data-[state=on]:bg-purple-100 data-[state=on]:text-purple-900",
+        className,
+      )}
+    >
+      {label}
+    </Toggle>
+  );
+};

package/src/atoms/VideoAtom.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { VideoAtomType } from "../types/atoms";
+import { cn } from "@/lib/utils";
+
+/**
+ * VideoAtom
+ * A simple, styled video player for content previews.
+ */
+export const VideoAtom: React.FC<VideoAtomType> = ({
+  src,
+  poster,
+  autoplay = false,
+  controls = true,
+  muted = false,
+  loop = false,
+  className,
+}) => {
+  return (
+    <div
+      className={cn("relative overflow-hidden rounded-2xl bg-black", className)}
+    >
+      <video
+        src={src}
+        poster={poster}
+        autoPlay={autoplay}
+        controls={controls}
+        muted={muted}
+        loop={loop}
+        className="h-full w-full object-cover"
+        playsInline
+      />
+    </div>
+  );
+};

package/src/atoms/index.ts

@@ -30,3 +30,20 @@ export * from "./CommandAtom";
 export * from "./FormInputAtom";
 export * from "./FormSelectAtom";
 export * from "./FormTextareaAtom";
+export * from "./CheckboxAtom";
+export * from "./SwitchAtom";
+export * from "./LabelAtom";
+export * from "./TextareaAtom";
+export * from "./ToggleAtom";
+export * from "./SliderAtom";
+export * from "./RadioGroupAtom";
+export * from "./DropdownMenuAtom";
+export * from "./ContextMenuAtom";
+export * from "./DrawerAtom";
+export * from "./InputOTPAtom";
+export * from "./KbdAtom";
+export * from "./ResizableAtom";
+export * from "./ChartAtom";
+export * from "./VideoAtom";
+export * from "./RatingAtom";
+export * from "./TimelineAtom";

package/src/components/ui/resizable.tsx

@@ -5,16 +5,15 @@ import * as ResizablePrimitive from "react-resizable-panels";
 
 import { cn } from "@/lib/utils";
 
-const ResizablePanelGroup = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Group>) => (
+const ResizablePanelGroup = (
+  props: React.ComponentProps<typeof ResizablePrimitive.Group>,
+) => (
   <ResizablePrimitive.Group
+    {...props}
     className={cn(
       "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className,
+      props.className,
     )}
-    {...props}
   />
 );
 

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

@@ -0,0 +1,44 @@
+import React from "react";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { ChartAtom } from "../../../atoms/ChartAtom";
+import { AudienceDemographicsCardMolecule } from "../../../types/molecules";
+import { cn } from "@/lib/utils";
+
+/**
+ * AudienceDemographicsCard
+ * Visualizes audience data using appropriate chart types.
+ */
+export const AudienceDemographicsCard: React.FC<
+  AudienceDemographicsCardMolecule
+> = ({ title, data, config, demographicType, className }) => {
+  const chartType = demographicType === "location" ? "bar" : "pie";
+
+  return (
+    <Card
+      className={cn(
+        "rounded-[32px] border-purple-50 shadow-sm overflow-hidden",
+        className,
+      )}
+    >
+      <CardHeader className="pb-2">
+        <CardTitle className="text-lg font-bold text-gray-900">
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="h-[250px] w-full">
+          <ChartAtom
+            type="chart"
+            id="audience-demographics"
+            chartType={chartType}
+            data={data}
+            config={config}
+            XAxisKey="name"
+            YAxisKey="value"
+            showLegend={true}
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

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

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

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

@@ -0,0 +1,50 @@
+import React from "react";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components";
+import { ProgressAtom } from "../../../atoms/ProgressAtom";
+import { AudienceMetricCardMolecule } from "../../../types/molecules";
+import { cn } from "@/lib/utils";
+
+/**
+ * AudienceMetricCard
+ * A card displaying specific audience metrics with progress bars.
+ */
+export const AudienceMetricCard: React.FC<AudienceMetricCardMolecule> = ({
+  title,
+  metrics,
+  className,
+}) => {
+  return (
+    <Card
+      className={cn(
+        "bg-white border-purple-50 rounded-3xl overflow-hidden",
+        className,
+      )}
+    >
+      <CardHeader className="pb-2">
+        <CardTitle className="text-lg font-bold text-gray-900">
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {metrics.map((metric, i) => (
+          <div key={i} className="space-y-1.5">
+            <div className="flex justify-between items-center text-sm">
+              <span className="font-medium text-gray-700">{metric.label}</span>
+              <span className="font-bold text-gray-900">{metric.value}</span>
+            </div>
+            {metric.percentage !== undefined && (
+              <ProgressAtom
+                id={`progress-${i}`}
+                type="progress"
+                value={metric.percentage}
+                className="h-1.5 bg-purple-50"
+                /* @ts-ignore - custom className for progress indicator */
+                indicatorClassName="bg-gradient-to-r from-purple-500 to-indigo-500"
+              />
+            )}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+};

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

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

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { BrandAffinityGroupMolecule } from "../../../types/molecules";
+import { cn } from "@/lib/utils";
+
+/**
+ * BrandAffinityGroup
+ * Visual group of associated brand logos.
+ */
+export const BrandAffinityGroup: React.FC<BrandAffinityGroupMolecule> = ({
+  brands,
+  className,
+}) => {
+  return (
+    <div className={cn("flex flex-col gap-3", className)}>
+      <h5 className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+        Recent Collaborations
+      </h5>
+      <div className="flex flex-wrap gap-4 items-center">
+        {brands.map((brand, i) => (
+          <div key={i} className="group relative">
+            <div className="h-10 w-10 overflow-hidden rounded-xl bg-white border border-gray-100 p-1.5 flex items-center justify-center grayscale hover:grayscale-0 transition-all duration-300 hover:scale-110 shadow-sm hover:shadow-md">
+              <img
+                src={brand.logoSrc}
+                alt={brand.name}
+                className="max-h-full max-w-full object-contain"
+              />
+            </div>
+            <div className="absolute -bottom-6 left-1/2 -translate-x-1/2 px-2 py-0.5 bg-gray-900 text-white text-[10px] rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 pointer-events-none">
+              {brand.name}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

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

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

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

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

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