@peerbots/core 0.2.6 → 1.0.0

package/src/ui/media/FileUpload.tsx

@@ -0,0 +1,175 @@
+import React, { useRef, useState } from "react";
+import { Button, ButtonProps } from "../forms/Button";
+import { Icon } from "../foundations/Icon";
+import { cn } from "../utils";
+
+export interface FileUploadProps {
+  /** Accepted file types (e.g. `"image/*"`, `".pdf"`, `"audio/*"`). */
+  accept?: string;
+  /** Whether multiple files can be selected. */
+  multiple?: boolean;
+  /** Whether the input is disabled. */
+  disabled?: boolean;
+  /** Maximum allowable file size in bytes. */
+  maxSizeBytes?: number;
+  /** Text displayed inside the trigger button. Default is `"Choose File"`. */
+  buttonText?: React.ReactNode;
+  /** Button style variant. Default is `"secondary"`. */
+  buttonVariant?: ButtonProps["variant"];
+  /** Button size. Default is `"md"`. */
+  buttonSize?: ButtonProps["size"];
+  /** Icon shown inside the button. Default is `<Icon name="arrowUpTray" />`. */
+  buttonIcon?: React.ReactNode;
+  /** Text shown when no file has been chosen. Default is `"No file chosen"`. */
+  placeholder?: string;
+  /** Whether to show a clear/remove button when files are selected. Default is `true`. */
+  clearable?: boolean;
+  /** Controlled file(s) value. */
+  value?: File | File[] | null;
+  /** Callback fired when file selection changes. */
+  onChange?: (files: File | File[] | null) => void;
+  /** Callback fired when a file exceeds size limit or validation fails. */
+  onError?: (errorMessage: string) => void;
+  /** Optional custom CSS classes. */
+  className?: string;
+  id?: string;
+  name?: string;
+}
+
+function formatBytes(bytes: number, decimals = 1): string {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+}
+
+export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
+  (
+    {
+      accept,
+      multiple = false,
+      disabled = false,
+      maxSizeBytes,
+      buttonText = "Choose File",
+      buttonVariant = "secondary",
+      buttonSize = "md",
+      buttonIcon = <Icon name="arrowUpTray" />,
+      placeholder = "No file chosen",
+      clearable = true,
+      value,
+      onChange,
+      onError,
+      className,
+      id,
+      name,
+    },
+    ref,
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [internalFiles, setInternalFiles] = useState<File[]>([]);
+
+    const activeFiles = value
+      ? Array.isArray(value)
+        ? value
+        : [value]
+      : internalFiles;
+
+    const handleButtonClick = () => {
+      if (disabled) return;
+      inputRef.current?.click();
+    };
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const selected = e.target.files ? Array.from(e.target.files) : [];
+      if (selected.length === 0) return;
+
+      // Validate file sizes
+      if (maxSizeBytes) {
+        const oversized = selected.find((f) => f.size > maxSizeBytes);
+        if (oversized) {
+          const msg = `File "${oversized.name}" exceeds maximum allowed size of ${formatBytes(maxSizeBytes)}.`;
+          onError?.(msg);
+          if (inputRef.current) inputRef.current.value = "";
+          return;
+        }
+      }
+
+      setInternalFiles(selected);
+      if (onChange) {
+        onChange(multiple ? selected : selected[0] || null);
+      }
+    };
+
+    const handleClear = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      setInternalFiles([]);
+      if (inputRef.current) inputRef.current.value = "";
+      if (onChange) {
+        onChange(multiple ? [] : null);
+      }
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "pb:inline-flex pb:items-center pb:gap-3 pb:w-full pb:max-w-md",
+          disabled && "pb:cursor-not-allowed",
+          className,
+        )}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          id={id}
+          name={name}
+          accept={accept}
+          multiple={multiple}
+          disabled={disabled}
+          onChange={handleFileChange}
+          className="pb:hidden"
+          tabIndex={-1}
+        />
+
+        <Button
+          type="button"
+          variant={buttonVariant}
+          size={buttonSize}
+          disabled={disabled}
+          leftIcon={buttonIcon}
+          onClick={handleButtonClick}
+        >
+          {buttonText}
+        </Button>
+
+        <div className="pb:flex-1 pb:min-w-0 pb:flex pb:items-center pb:justify-between pb:gap-2 pb:py-1 pb:px-2 pb:bg-gray-50 pb:border pb:border-gray-200 pb:rounded-md pb:text-xs">
+          {activeFiles.length > 0 ? (
+            <span className="pb:font-medium pb:text-gray-800 pb:truncate">
+              {activeFiles.length === 1
+                ? `${activeFiles[0].name} (${formatBytes(activeFiles[0].size)})`
+                : `${activeFiles.length} files selected`}
+            </span>
+          ) : (
+            <span className="pb:text-gray-600 pb:truncate">{placeholder}</span>
+          )}
+
+          {clearable && activeFiles.length > 0 && !disabled && (
+            <button
+              type="button"
+              onClick={handleClear}
+              className="pb:p-0.5 pb:text-gray-400 pb:hover:text-gray-700 pb:rounded pb:hover:bg-gray-200 pb:cursor-pointer pb:transition-colors"
+              title="Clear selection"
+              aria-label="Clear selected file"
+            >
+              <Icon name="x" className="pb:w-3.5 pb:h-3.5" />
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  },
+);
+
+FileUpload.displayName = "FileUpload";

package/src/ui/media/index.ts

@@ -0,0 +1,3 @@
+export * from "./Avatar";
+export * from "./Dropzone";
+export * from "./FileUpload";

package/src/ui/{AuthFormUI.stories.tsx → patterns/AuthFormUI.stories.tsx}

@@ -3,7 +3,7 @@ import { AuthFormUI } from "./AuthFormUI";
 import { useState } from "react";
 
 const meta: Meta<typeof AuthFormUI> = {
-  title: "UI/AuthFormUI",
+  title: "Patterns/AuthFormUI",
   component: AuthFormUI,
   parameters: {
     layout: "centered",

package/src/ui/{AuthFormUI.tsx → patterns/AuthFormUI.tsx}

@@ -1,12 +1,13 @@
 import { useFormStatus } from "react-dom";
-import { Button, Input, Heading, Text, Icon, Field } from ".";
+import { Button, Input, Heading, Text, Icon, Field } from "..";
+import React from "react";
 
 function SubmitButton({ label }: { label: string }) {
   const { pending } = useFormStatus();
   return (
     <Button
       type="submit"
-      variant="primary"
+      color="primary"
       isLoading={pending}
       disabled={pending}
     >
@@ -51,7 +52,7 @@ export function AuthFormUI({
 
       <form className="pb:md:m-10 pb:sm:m-4 pb:space-y-4" action={formAction}>
         {description && (
-          <Text className="pb:text-center pb:mb-6" variant="muted">
+          <Text className="pb:text-center pb:mb-6" color="muted">
             {description}
           </Text>
         )}
@@ -61,7 +62,7 @@ export function AuthFormUI({
             {actionState.message}
           </Text>
         )}
-        <Text className="pb:text-center" variant="error">
+        <Text className="pb:text-center" color="error">
           {actionState.error}
         </Text>
 
@@ -114,13 +115,13 @@ export function AuthFormUI({
 
           <div className="pb:text-center pb:text-sm pb:text-gray-500">
             {mode === "signing up" && (
-              <Text>
+              <Text size="sm">
                 Already have an account?{" "}
                 <Button
-                  variant="ghost"
+                  variant="link"
+                  color="teal"
                   size="sm"
                   onClick={() => onModeChange("signing in")}
-                  className="pb:underline pb:p-0 pb:h-auto pb:hover:bg-transparent"
                 >
                   Sign in
                 </Button>
@@ -128,13 +129,13 @@ export function AuthFormUI({
             )}
             {mode === "signing in" && (
               <div className="pb:flex pb:flex-col pb:gap-2">
-                <Text>
+                <Text size="sm">
                   Forgot your password?{" "}
                   <Button
-                    variant="ghost"
+                    variant="link"
+                    color="teal"
                     size="sm"
                     onClick={() => onModeChange("resetting password")}
-                    className="pb:underline pb:p-0 pb:h-auto pb:hover:bg-transparent"
                   >
                     Reset password.
                   </Button>
@@ -144,16 +145,16 @@ export function AuthFormUI({
                     <div className="pb:w-full pb:border-t pb:border-gray-300"></div>
                   </div>
                   <div className="pb:relative pb:flex pb:justify-center pb:text-sm">
-                    <span className="pb:px-2 pb:bg-white pb:text-gray-500">or</span>
+                    <span className="pb:px-2 pb:bg-white pb:text-gray-700">or</span>
                   </div>
                 </div>
-                <Text>
+                <Text size="sm">
                   Don&apos;t have an account?{" "}
                   <Button
-                    variant="ghost"
+                    variant="link"
+                    color="teal"
                     size="sm"
                     onClick={() => onModeChange("signing up")}
-                    className="pb:underline pb:p-0 pb:h-auto pb:hover:bg-transparent"
                   >
                     Sign up
                   </Button>
@@ -162,13 +163,13 @@ export function AuthFormUI({
             )}
             {mode === "resetting password" && (
               <div className="pb:flex pb:flex-col pb:gap-2">
-                <Text>
+                <Text size="sm">
                   Don&apos;t have an account?{" "}
                   <Button
-                    variant="ghost"
+                    variant="link"
+                    color="teal"
                     size="sm"
                     onClick={() => onModeChange("signing up")}
-                    className="pb:underline pb:p-0 pb:h-auto pb:hover:bg-transparent"
                   >
                     Sign up
                   </Button>
@@ -178,16 +179,16 @@ export function AuthFormUI({
                     <div className="pb:w-full pb:border-t pb:border-gray-300"></div>
                   </div>
                   <div className="pb:relative pb:flex pb:justify-center pb:text-sm">
-                    <span className="pb:px-2 pb:bg-white pb:text-gray-500">or</span>
+                    <span className="pb:px-2 pb:bg-white pb:text-gray-700">or</span>
                   </div>
                 </div>
-                <Text>
-                  Remembered your password?
+                <Text size="sm">
+                  Remembered your password?{" "}
                   <Button
-                    variant="ghost"
+                    variant="link"
+                    color="teal"
                     size="sm"
                     onClick={() => onModeChange("signing in")}
-                    className="pb:underline pb:p-0 pb:h-auto pb:hover:bg-transparent"
                   >
                     Sign In
                   </Button>
@@ -200,7 +201,7 @@ export function AuthFormUI({
         {mode !== "resetting password" && onGoogleSignIn && (
           <div className="pb:text-center pb:mt-4">
             <Button
-              variant="secondary"
+              color="neutral"
               onClick={onGoogleSignIn}
               type="button"
               className="pb:w-full pb:flex pb:items-center pb:justify-center pb:gap-2"

package/src/ui/patterns/CopyButton.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CopyButton } from "./CopyButton";
+import { Heading } from "../foundations/Typography";
+
+const meta: Meta<typeof CopyButton> = {
+  title: "Patterns/CopyButton",
+  component: CopyButton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["primary", "secondary", "danger", "ghost", "ghostly-danger"],
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+    },
+    value: { control: "text" },
+    label: { control: "text" },
+    successLabel: { control: "text" },
+    timeout: { control: "number" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CopyButton>;
+
+export const Default: Story = {
+  args: {
+    value: "https://peerbots.org/session/12345",
+    label: "Copy Link",
+    successLabel: "Link Copied!",
+    variant: "secondary",
+  },
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="pb:flex pb:flex-col pb:gap-6 pb:p-4">
+      <div className="pb:space-y-3">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black">
+          Variants
+        </Heading>
+        <div className="pb:flex pb:flex-wrap pb:gap-3 pb:items-center">
+          <CopyButton value="Code Snippet" variant="primary" label="Copy Primary" />
+          <CopyButton value="Code Snippet" variant="secondary" label="Copy Secondary" />
+          <CopyButton value="Code Snippet" variant="ghost" label="Copy Ghost" />
+        </div>
+      </div>
+
+      <div className="pb:space-y-3">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black">
+          Sizes
+        </Heading>
+        <div className="pb:flex pb:flex-wrap pb:gap-3 pb:items-center">
+          <CopyButton value="Short Link" size="sm" label="Small" />
+          <CopyButton value="Short Link" size="md" label="Medium" />
+          <CopyButton value="Short Link" size="lg" label="Large" />
+        </div>
+      </div>
+
+      <div className="pb:space-y-3">
+        <Heading level={4} className="pb:text-sm pb:font-medium pb:text-black">
+          Icon Only
+        </Heading>
+        <div className="pb:flex pb:flex-wrap pb:gap-3 pb:items-center">
+          <CopyButton value="Secret Token" isIconOnly size="sm" />
+          <CopyButton value="Secret Token" isIconOnly size="md" />
+          <CopyButton value="Secret Token" isIconOnly size="lg" />
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/ui/patterns/CopyButton.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { Button, ButtonProps } from "../forms/Button";
+import { Icon } from "../foundations/Icon";
+import { useClipboard } from "./useClipboard";
+import { cn } from "../utils";
+
+export interface CopyButtonProps extends Omit<ButtonProps, "onClick"> {
+  /** The text value to copy to the clipboard. */
+  value: string;
+  /** Label displayed before copying. Default is `"Copy"`. Pass `null` or use `isIconOnly` for icon-only. */
+  label?: React.ReactNode;
+  /** Label displayed after copying. Default is `"Copied!"`. */
+  successLabel?: React.ReactNode;
+  /** Duration in milliseconds for the success state. Default is `2000`. */
+  timeout?: number;
+  /** Callback fired after successfully copying to clipboard. */
+  onCopied?: (value: string) => void;
+  /** Callback fired if copying fails. */
+  onCopyError?: (error: Error) => void;
+  /** Custom icon shown in default state. */
+  copyIcon?: React.ReactNode;
+  /** Custom icon shown in copied state. */
+  successIcon?: React.ReactNode;
+  /** Whether to show icons. Default is `true`. */
+  showIcon?: boolean;
+}
+
+export const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
+  (
+    {
+      value,
+      label = "Copy",
+      successLabel = "Copied!",
+      timeout = 2000,
+      onCopied,
+      onCopyError,
+      copyIcon,
+      successIcon,
+      showIcon = true,
+      variant = "outline",
+      color = "neutral",
+      size = "md",
+      radius = "md",
+      isIconOnly,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const { copy, copied } = useClipboard({
+      timeout,
+      onSuccess: onCopied,
+      onError: onCopyError,
+    });
+
+    const currentIcon = copied
+      ? successIcon || <Icon name="check" className="pb:text-peerbots-teal" />
+      : copyIcon || <Icon name="clipboard" />;
+
+    const currentLabel = copied ? successLabel : label;
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        color={color}
+        size={size}
+        radius={radius}
+        isIconOnly={isIconOnly}
+        onClick={() => copy(value)}
+        leftIcon={showIcon ? currentIcon : undefined}
+        className={cn(
+          "pb:transition-all pb:duration-150",
+          copied && "pb:border-peerbots-teal pb:text-peerbots-darkteal",
+          className,
+        )}
+        aria-live="polite"
+        aria-label={
+          isIconOnly
+            ? typeof currentLabel === "string"
+              ? currentLabel
+              : "Copy"
+            : undefined
+        }
+        {...props}
+      >
+        {isIconOnly ? null : currentLabel}
+      </Button>
+    );
+  },
+);
+
+CopyButton.displayName = "CopyButton";

package/src/ui/patterns/SearchInput.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { SearchInput } from "./SearchInput";
+
+const meta: Meta<typeof SearchInput> = {
+  title: "Patterns/SearchInput",
+  component: SearchInput,
+};
+
+export default meta;
+type Story = StoryObj<typeof SearchInput>;
+
+function ControlledSearchInput(props: React.ComponentProps<typeof SearchInput>) {
+  const [val, setVal] = useState(props.value ?? "");
+  return (
+    <div className="pb:max-w-xs">
+      <SearchInput
+        {...props}
+        value={val}
+        onChange={(e) => setVal(e.target.value)}
+        onClear={() => setVal("")}
+      />
+      <span className="pb:text-xs pb:text-gray-600 pb:mt-1 pb:block">
+        Current value: {val ? `"${val}"` : "empty"}
+      </span>
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: () => <ControlledSearchInput placeholder="Search collections..." />,
+};
+
+export const Variations: Story = {
+  render: () => (
+    <div className="pb:flex pb:flex-col pb:gap-6 pb:p-4">
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-700 pb:block pb:mb-2">Prefilled with Clear Button</span>
+        <ControlledSearchInput value="Robot templates" />
+      </div>
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-700 pb:block pb:mb-2">Disabled State</span>
+        <SearchInput disabled placeholder="Search is disabled" className="pb:max-w-xs" />
+      </div>
+      <div>
+        <span className="pb:text-xs pb:font-bold pb:text-gray-700 pb:block pb:mb-2">Without Clear Button</span>
+        <ControlledSearchInput showClearButton={false} placeholder="No clear button..." />
+      </div>
+    </div>
+  ),
+};

package/src/ui/patterns/SearchInput.tsx

@@ -0,0 +1,93 @@
+import React, { useRef, useImperativeHandle } from "react";
+import { Icon } from "../foundations/Icon";
+import { Input, InputProps } from "../forms/Input";
+import { cn } from "../utils";
+
+export interface SearchInputProps
+  extends Omit<InputProps, "leftIcon" | "rightIcon"> {
+  onSearch?: (query: string) => void;
+  onClear?: () => void;
+  showClearButton?: boolean;
+}
+
+export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+  (
+    {
+      className,
+      value,
+      defaultValue,
+      onChange,
+      onSearch,
+      onClear,
+      showClearButton = true,
+      placeholder = "Search...",
+      onKeyDown,
+      ...props
+    },
+    ref,
+  ) => {
+    const internalRef = useRef<HTMLInputElement>(null);
+    useImperativeHandle(ref, () => internalRef.current as HTMLInputElement);
+
+    const handleClear = () => {
+      if (internalRef.current) {
+        internalRef.current.value = "";
+      }
+      if (onClear) {
+        onClear();
+      }
+      if (onSearch) {
+        onSearch("");
+      }
+      internalRef.current?.focus();
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter" && onSearch) {
+        onSearch(internalRef.current?.value ?? "");
+      } else if (e.key === "Escape") {
+        handleClear();
+      }
+      if (onKeyDown) {
+        onKeyDown(e);
+      }
+    };
+
+    const hasValue =
+      value !== undefined
+        ? String(value).length > 0
+        : internalRef.current?.value && internalRef.current.value.length > 0;
+
+    return (
+      <div className={cn("pb:relative pb:w-full", className)}>
+        <Input
+          ref={internalRef}
+          type="text"
+          value={value}
+          defaultValue={defaultValue}
+          placeholder={placeholder}
+          onChange={onChange}
+          onKeyDown={handleKeyDown}
+          leftIcon={<Icon name="search" className="pb:w-4 pb:h-4 pb:text-gray-400" />}
+          className="pb:pr-8"
+          {...props}
+        />
+        {showClearButton && (
+          <button
+            type="button"
+            aria-label="Clear search"
+            onClick={handleClear}
+            className={cn(
+              "pb:absolute pb:inset-y-0 pb:right-0 pb:flex pb:items-center pb:pr-2.5 pb:text-gray-400 pb:hover:text-gray-600 pb:cursor-pointer pb:transition-opacity pb:duration-150 pb:focus-visible:outline-none pb:focus-visible:ring-2 pb:focus-visible:ring-primary pb:rounded-r-md",
+              hasValue ? "pb:opacity-100 pb:visible" : "pb:opacity-0 pb:invisible",
+            )}
+          >
+            <Icon name="xCircle" className="pb:w-4 pb:h-4" />
+          </button>
+        )}
+      </div>
+    );
+  },
+);
+
+SearchInput.displayName = "SearchInput";