@peerbots/core 0.2.6 → 1.0.0

package/src/ui/media/Avatar.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from "react";
+import { Icon } from "../foundations/Icon";
+import { cn } from "../utils";
+
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Image source URL. */
+  src?: string | null;
+  /** Full name of the user, maker, or robot. Used to generate initials and accessible label. */
+  name?: string;
+  /** Accessible alt text for the avatar image. Defaults to `name` or `"Avatar"`. */
+  alt?: string;
+  /** Size variant. Defaults to `"md"`. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Shape of the avatar. Defaults to `"circle"`. */
+  shape?: "circle" | "rounded";
+  /** Custom fallback icon if no image or initials are available. */
+  fallbackIcon?: React.ReactNode;
+}
+
+function getInitials(name?: string): string {
+  if (!name) return "";
+  const trimmed = name.trim();
+  if (!trimmed) return "";
+  const parts = trimmed.split(/\s+/);
+  if (parts.length === 1) {
+    return parts[0].substring(0, 2).toUpperCase();
+  }
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+
+const colorTints = [
+  "pb:bg-teal-100 pb:text-teal-900 pb:border-teal-200",
+  "pb:bg-blue-100 pb:text-blue-900 pb:border-blue-200",
+  "pb:bg-purple-100 pb:text-purple-900 pb:border-purple-200",
+  "pb:bg-amber-100 pb:text-amber-900 pb:border-amber-200",
+  "pb:bg-rose-100 pb:text-rose-900 pb:border-rose-200",
+  "pb:bg-emerald-100 pb:text-emerald-900 pb:border-emerald-200",
+];
+
+function getHashColor(name?: string): string {
+  if (!name) return colorTints[0];
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const index = Math.abs(hash) % colorTints.length;
+  return colorTints[index];
+}
+
+export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
+  (
+    {
+      src,
+      name,
+      alt,
+      size = "md",
+      shape = "circle",
+      fallbackIcon,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [imgError, setImgError] = useState(false);
+    const initials = getInitials(name);
+    const accessibleAlt = alt || name || "Avatar";
+
+    const sizeStyles = {
+      xs: "pb:w-6 pb:h-6 pb:text-[10px]",
+      sm: "pb:w-8 pb:h-8 pb:text-xs",
+      md: "pb:w-10 pb:h-10 pb:text-sm",
+      lg: "pb:w-12 pb:h-12 pb:text-base",
+      xl: "pb:w-16 pb:h-16 pb:text-xl",
+    };
+
+    const iconSizeStyles = {
+      xs: "pb:w-3.5 pb:h-3.5",
+      sm: "pb:w-4 pb:h-4",
+      md: "pb:w-5 pb:h-5",
+      lg: "pb:w-6 pb:h-6",
+      xl: "pb:w-8 pb:h-8",
+    };
+
+    const shapeStyle = shape === "circle" ? "pb:rounded-full" : "pb:rounded-xl";
+    const colorStyle = getHashColor(name);
+
+    const hasValidImage = Boolean(src && !imgError);
+
+    return (
+      <div
+        ref={ref}
+        role="img"
+        aria-label={accessibleAlt}
+        className={cn(
+          "pb:relative pb:inline-flex pb:items-center pb:justify-center pb:shrink-0 pb:overflow-hidden pb:border pb:font-bold pb:select-none",
+          sizeStyles[size],
+          shapeStyle,
+          !hasValidImage && colorStyle,
+          className,
+        )}
+        {...props}
+      >
+        {hasValidImage ? (
+          <img
+            src={src!}
+            alt={accessibleAlt}
+            onError={() => setImgError(true)}
+            className="pb:w-full pb:h-full pb:object-cover"
+          />
+        ) : initials ? (
+          <span className="pb:tracking-wider">{initials}</span>
+        ) : (
+          <span className={cn("pb:flex pb:items-center pb:justify-center", iconSizeStyles[size])}>
+            {fallbackIcon || <Icon name="userCircle" className="pb:w-full pb:h-full" />}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+Avatar.displayName = "Avatar";

package/src/ui/media/Dropzone.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Dropzone } from "./Dropzone";
+import { Heading } from "../foundations/Typography";
+
+const meta: Meta<typeof Dropzone> = {
+  title: "Media & Files/Dropzone",
+  component: Dropzone,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    accept: { control: "text" },
+    maxSizeMB: { control: "number" },
+    disabled: { control: "boolean" },
+    title: { control: "text" },
+    subtitle: { control: "text" },
+    showPreview: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Dropzone>;
+
+export const Default: Story = {
+  args: {
+    title: "Click or drag file to upload",
+    subtitle: "PNG, JPG, WEBP, or MP4 up to 10MB",
+    accept: "image/*,video/*",
+    maxSizeMB: 10,
+    showPreview: true,
+  },
+};
+
+export const WithImagePreview: Story = {
+  args: {
+    previewUrl:
+      "https://images.unsplash.com/photo-1508759078412-70b92305a610?auto=format&fit=crop&w=800&q=80",
+    title: "Upload photo",
+    subtitle: "PNG, JPG up to 10MB",
+  },
+};
+
+export const InteractiveState: Story = {
+  render: () => {
+    return (
+      <div className="pb:w-96 pb:p-4 pb:space-y-4">
+        <Heading level={4} className="pb:text-sm pb:font-bold pb:text-gray-900">
+          Interactive Photo Upload (Auto-Preview)
+        </Heading>
+        <Dropzone
+          accept="image/*"
+          title="Upload creation photo"
+          subtitle="Drag high-res photo or click to browse"
+          maxSizeMB={10}
+        />
+      </div>
+    );
+  },
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="pb:flex pb:flex-col pb:gap-6 pb:p-4 pb:w-96">
+      <div className="pb:space-y-2">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black">
+          Empty Dropzone
+        </Heading>
+        <Dropzone
+          accept="image/*"
+          title="Upload avatar"
+          subtitle="PNG or JPG up to 5MB"
+        />
+      </div>
+
+      <div className="pb:space-y-2">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black">
+          With Existing Image Preview
+        </Heading>
+        <Dropzone
+          previewUrl="https://images.unsplash.com/photo-1508759078412-70b92305a610?auto=format&fit=crop&w=800&q=80"
+          onFileRemove={() => {}}
+        />
+      </div>
+
+      <div className="pb:space-y-2">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black">
+          Disabled State
+        </Heading>
+        <Dropzone disabled title="Upload disabled" subtitle="Submissions are closed" />
+      </div>
+    </div>
+  ),
+};

package/src/ui/media/Dropzone.tsx

@@ -0,0 +1,328 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Button } from "../forms/Button";
+import { Icon } from "../foundations/Icon";
+import { cn } from "../utils";
+
+export interface DropzoneProps {
+  /** Accepted MIME types or extensions (e.g. `"image/*"`, `"video/*"`, `".zip"`). */
+  accept?: string;
+  /** Maximum file size allowed in Megabytes (MB). */
+  maxSizeMB?: number;
+  /** Whether the dropzone is disabled. */
+  disabled?: boolean;
+  /**
+   * Optional controlled URL or data URL of an uploaded file to display in preview mode.
+   * If not provided, Dropzone will automatically generate and display a preview for selected images/videos.
+   */
+  previewUrl?: string | null;
+  /** Optional controlled File object. */
+  value?: File | null;
+  /** Whether to automatically show a preview when an image/video is selected. Default is `true`. */
+  showPreview?: boolean;
+  /** How to render the preview. Default is `"auto"`. */
+  previewType?: "image" | "video" | "auto";
+  /** Main callout title. Default is `"Click or drag file to upload"`. */
+  title?: React.ReactNode;
+  /** Subtitle or requirement text. Default is `"Supported formats: PNG, JPG, WEBP, MP4"`. */
+  subtitle?: React.ReactNode;
+  /** Custom icon for the dropzone idle state. */
+  icon?: React.ReactNode;
+  /** Callback fired when a valid file is dropped or selected. */
+  onFileSelect?: (file: File) => void;
+  /** Callback fired when the active file/preview is cleared. */
+  onFileRemove?: () => void;
+  /** Callback fired when a file exceeds size limit or validation fails. */
+  onError?: (errorMessage: string) => void;
+  /** Optional custom CSS classes for the root dropzone container. */
+  className?: string;
+  id?: string;
+  name?: string;
+}
+
+export const Dropzone = React.forwardRef<HTMLDivElement, DropzoneProps>(
+  (
+    {
+      accept,
+      maxSizeMB,
+      disabled = false,
+      previewUrl: controlledPreviewUrl,
+      value,
+      showPreview = true,
+      previewType = "auto",
+      title = "Click or drag file to upload",
+      subtitle,
+      icon,
+      onFileSelect,
+      onFileRemove,
+      onError,
+      className,
+      id,
+      name,
+    },
+    ref,
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [internalPreviewUrl, setInternalPreviewUrl] = useState<string | null>(null);
+    const [internalPreviewType, setInternalPreviewType] = useState<"image" | "video">("image");
+    const [imageLoadError, setImageLoadError] = useState(false);
+    const generatedUrlRef = useRef<string | null>(null);
+
+    // Sync value file prop to preview if passed
+    useEffect(() => {
+      if (value && showPreview) {
+        if (generatedUrlRef.current) {
+          URL.revokeObjectURL(generatedUrlRef.current);
+        }
+        const isVid = value.type.startsWith("video/");
+        const url = URL.createObjectURL(value);
+        generatedUrlRef.current = url;
+        setInternalPreviewUrl(url);
+        setInternalPreviewType(isVid ? "video" : "image");
+        setImageLoadError(false);
+      }
+    }, [value, showPreview]);
+
+    // Clean up created object URLs on unmount
+    useEffect(() => {
+      return () => {
+        if (generatedUrlRef.current) {
+          URL.revokeObjectURL(generatedUrlRef.current);
+        }
+      };
+    }, []);
+
+    const activePreviewUrl =
+      controlledPreviewUrl !== undefined
+        ? controlledPreviewUrl
+        : internalPreviewUrl;
+
+    const handleFile = (file: File) => {
+      if (disabled) return;
+
+      if (maxSizeMB) {
+        const fileMB = file.size / (1024 * 1024);
+        if (fileMB > maxSizeMB) {
+          const msg = `File "${file.name}" (${fileMB.toFixed(1)} MB) exceeds maximum allowed size of ${maxSizeMB} MB.`;
+          onError?.(msg);
+          if (inputRef.current) inputRef.current.value = "";
+          return;
+        }
+      }
+
+      // Generate internal preview if enabled and not strictly controlled
+      if (showPreview) {
+        const isImg = file.type.startsWith("image/");
+        const isVid = file.type.startsWith("video/");
+        if (isImg || isVid) {
+          if (generatedUrlRef.current) {
+            URL.revokeObjectURL(generatedUrlRef.current);
+          }
+          const url = URL.createObjectURL(file);
+          generatedUrlRef.current = url;
+          setInternalPreviewUrl(url);
+          setInternalPreviewType(isVid ? "video" : "image");
+          setImageLoadError(false);
+        }
+      }
+
+      onFileSelect?.(file);
+    };
+
+    const handleDragEnter = (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (disabled) return;
+      setIsDragging(true);
+    };
+
+    const handleDragOver = (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (disabled) return;
+      setIsDragging(true);
+    };
+
+    const handleDragLeave = (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+    };
+
+    const handleDrop = (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+      if (disabled) return;
+
+      const file = e.dataTransfer.files?.[0];
+      if (file) {
+        handleFile(file);
+      }
+    };
+
+    const handleClick = () => {
+      if (disabled) return;
+      inputRef.current?.click();
+    };
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) {
+        handleFile(file);
+      }
+    };
+
+    const handleRemove = (e?: React.MouseEvent) => {
+      e?.stopPropagation();
+      if (generatedUrlRef.current) {
+        URL.revokeObjectURL(generatedUrlRef.current);
+        generatedUrlRef.current = null;
+      }
+      setInternalPreviewUrl(null);
+      setImageLoadError(false);
+      if (inputRef.current) inputRef.current.value = "";
+      onFileRemove?.();
+    };
+
+    const isVideo =
+      previewType === "video" ||
+      (previewType === "auto" &&
+        (internalPreviewType === "video" ||
+          (activePreviewUrl &&
+            (activePreviewUrl.includes(".mp4") ||
+              activePreviewUrl.includes(".mov") ||
+              activePreviewUrl.includes(".webm") ||
+              activePreviewUrl.startsWith("data:video/")))));
+
+    const hasPreview = Boolean(showPreview && activePreviewUrl);
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "pb:relative pb:w-full pb:rounded-2xl pb:border-2 pb:border-dashed pb:transition-all pb:overflow-hidden",
+          isDragging
+            ? "pb:border-primary pb:bg-primary/10"
+            : "pb:border-gray-300 pb:hover:border-primary/80 pb:bg-gray-50/70 pb:hover:bg-gray-50",
+          disabled && "pb:bg-gray-100/90 pb:border-gray-300 pb:cursor-not-allowed pb:hover:border-gray-300",
+          className,
+        )}
+        onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          id={id}
+          name={name}
+          accept={accept}
+          disabled={disabled}
+          onChange={handleInputChange}
+          className="pb:hidden"
+          tabIndex={-1}
+        />
+
+        {/* Dragging Overlay when in preview mode */}
+        {isDragging && hasPreview && (
+          <div className="pb:absolute pb:inset-0 pb:z-20 pb:bg-primary/20 pb:backdrop-blur-xs pb:flex pb:flex-col pb:items-center pb:justify-center pb:gap-2">
+            <div className="pb:w-10 pb:h-10 pb:rounded-full pb:bg-primary pb:text-slate-950 pb:flex pb:items-center pb:justify-center pb:shadow-md">
+              <Icon name="arrowDownTray" className="pb:w-5 pb:h-5" />
+            </div>
+            <p className="pb:text-xs pb:font-bold pb:text-gray-900">Drop file to replace</p>
+          </div>
+        )}
+
+        {hasPreview ? (
+          <div className="pb:p-4 pb:space-y-3">
+            <div
+              onClick={handleClick}
+              className="pb:relative pb:w-full pb:h-56 pb:overflow-hidden pb:rounded-xl pb:bg-gray-900 pb:flex pb:items-center pb:justify-center pb:cursor-pointer pb:group"
+              title="Click to change file"
+            >
+              {isVideo ? (
+                <video
+                  src={activePreviewUrl!}
+                  controls
+                  className="pb:w-full pb:h-full pb:object-contain"
+                />
+              ) : imageLoadError ? (
+                <div className="pb:p-6 pb:text-center pb:text-gray-400 pb:space-y-2">
+                  <Icon name="xCircle" className="pb:w-8 pb:h-8 pb:mx-auto pb:text-red-400" />
+                  <p className="pb:text-xs pb:font-medium">Failed to load image preview</p>
+                </div>
+              ) : (
+                <img
+                  src={activePreviewUrl!}
+                  alt="File preview"
+                  onError={() => setImageLoadError(true)}
+                  className="pb:w-full pb:h-full pb:object-contain pb:group-hover:scale-102 pb:transition-transform"
+                />
+              )}
+
+              {/* Hover overlay hint */}
+              <div className="pb:absolute pb:inset-0 pb:bg-black/30 pb:opacity-0 pb:group-hover:opacity-100 pb:transition-opacity pb:flex pb:items-center pb:justify-center pb:pointer-events-none">
+                <span className="pb:bg-white/90 pb:text-gray-900 pb:text-xs pb:font-bold pb:px-3 pb:py-1.5 pb:rounded-lg pb:shadow">
+                  Click or drag to replace
+                </span>
+              </div>
+            </div>
+
+            <div className="pb:flex pb:items-center pb:justify-center pb:gap-3">
+              <Button
+                type="button"
+                color="neutral"
+                size="sm"
+                onClick={handleClick}
+                disabled={disabled}
+                leftIcon={<Icon name="arrowUpTray" />}
+              >
+                Change File
+              </Button>
+
+              <Button
+                type="button"
+                variant="ghost"
+                color="danger"
+                size="sm"
+                onClick={handleRemove}
+                disabled={disabled}
+                leftIcon={<Icon name="x" />}
+              >
+                Remove
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div
+            onClick={handleClick}
+            role="button"
+            tabIndex={disabled ? -1 : 0}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleClick();
+              }
+            }}
+            className="pb:p-8 pb:text-center pb:cursor-pointer pb:focus:outline-none pb:focus:ring-2 pb:focus:ring-primary pb:focus:ring-offset-2 pb:rounded-xl pb:space-y-2.5 pb:flex pb:flex-col pb:items-center pb:justify-center"
+          >
+            <div className="pb:w-12 pb:h-12 pb:rounded-full pb:bg-primary/20 pb:text-dark-primary pb:flex pb:items-center pb:justify-center">
+              {icon || <Icon name="cloudArrowUp" className="pb:w-6 pb:h-6" />}
+            </div>
+
+            <div className="pb:space-y-1">
+              <p className="pb:text-sm pb:font-bold pb:text-gray-900">{title}</p>
+              {subtitle && (
+                <p className="pb:text-xs pb:text-gray-600">{subtitle}</p>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+Dropzone.displayName = "Dropzone";

package/src/ui/media/FileUpload.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FileUpload } from "./FileUpload";
+import { Heading } from "../foundations/Typography";
+
+const meta: Meta<typeof FileUpload> = {
+  title: "Media & Files/FileUpload",
+  component: FileUpload,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    accept: { control: "text" },
+    multiple: { control: "boolean" },
+    disabled: { control: "boolean" },
+    buttonText: { control: "text" },
+    placeholder: { control: "text" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FileUpload>;
+
+export const Default: Story = {
+  args: {
+    buttonText: "Choose File",
+    placeholder: "No file chosen",
+    accept: "image/*",
+  },
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="pb:flex pb:flex-col pb:gap-6 pb:p-4 pb:w-96">
+      <div className="pb:space-y-2">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black">
+          Single Image Upload
+        </Heading>
+        <FileUpload accept="image/*" maxSizeBytes={5 * 1024 * 1024} />
+      </div>
+
+      <div className="pb:space-y-2">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black">
+          Multiple Files with Custom Button
+        </Heading>
+        <FileUpload
+          multiple
+          buttonText="Browse Files"
+          buttonVariant="primary"
+          placeholder="Select one or more documents"
+        />
+      </div>
+
+      <div className="pb:space-y-2">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black">
+          Disabled State
+        </Heading>
+        <FileUpload disabled />
+      </div>
+    </div>
+  ),
+};