@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/input.tsx

@@ -0,0 +1,260 @@
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { AlertCircle, ImageIcon, X } from "lucide-react";
+import * as React from "react";
+import { ThemedText } from "../index";
+
+import { useOptionalMediaPickerContext, type MediaItem } from "../integrations";
+import { cn } from "../support/utils";
+
+import {
+    FieldError,
+    FieldValidationProps,
+    resolveFieldErrors,
+    ERROR_OUTLINE_CLASSES,
+} from "./form-error";
+
+export interface InputProps
+    extends Omit<React.ComponentProps<"input">, "color">,
+        FieldValidationProps {
+    /** Callback when media is selected (for type="file" or type="image") */
+    onMediaSelect?: (item: MediaItem) => void;
+    /** Callback when multiple media items are selected */
+    onMediaSelectMultiple?: (items: MediaItem[]) => void;
+    /** Enable media picker modal for file/image selection */
+    useMediaPicker?: boolean;
+    /** Maximum number of items that can be selected in media picker */
+    maxSelection?: number;
+    /** Classes for the picker wrapper (use with `pickerLayout="overlay"`). */
+    wrapperClassName?: string;
+    /**
+     * `field` — default text-style control.
+     * `overlay` — full-area hit target over a custom drop zone.
+     */
+    pickerLayout?: "field" | "overlay";
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
+    {
+        className,
+        type,
+        onMediaSelect,
+        onMediaSelectMultiple,
+        onChange,
+        value,
+        placeholder,
+        disabled,
+        useMediaPicker,
+        maxSelection = 1,
+        wrapperClassName,
+        containerClassName,
+        errorClassName,
+        pickerLayout = "field",
+        error,
+        errors,
+        payloadKey,
+        errorKey,
+        ...props
+    },
+    ref,
+) {
+    const mediaPickerContext = useOptionalMediaPickerContext();
+    const isMediaType = !!mediaPickerContext && useMediaPicker && (type === "file" || type === "image");
+    const openPicker = mediaPickerContext?.openPicker;
+    const [selectedMedia, setSelectedMedia] = React.useState<MediaItem | null>(
+        null,
+    );
+
+    // Resolve validation errors from direct `error` prop or lookup via payload key in `errors` map
+    const resolvedErrors = React.useMemo(() => {
+        const key = payloadKey || errorKey || props.name || props.id;
+        return resolveFieldErrors(error, errors, key);
+    }, [error, errors, payloadKey, errorKey, props.name, props.id]);
+
+    const hasError = resolvedErrors.length > 0;
+    const errorId = props.id || props.name ? `${props.id || props.name}-error` : undefined;
+
+    const handleClick = React.useCallback(() => {
+        if (isMediaType && !disabled && openPicker) {
+            openPicker({
+                allowedTypes: type === "image" ? ["image"] : undefined,
+                maxSelection,
+                title: type === "image" ? "Select Image" : "Select File",
+                description:
+                    type === "image"
+                        ? "Choose an image from your library"
+                        : "Choose a file from your library",
+                onSelect: (items) => {
+                    if (items.length > 0) {
+                        if (maxSelection === 1) {
+                            const item = items[0];
+                            setSelectedMedia(item);
+                            const syntheticEvent = {
+                                target: {
+                                    value: String(item.id),
+                                    name: props.name,
+                                },
+                            } as React.ChangeEvent<HTMLInputElement>;
+                            onChange?.(syntheticEvent);
+                            onMediaSelect?.(item);
+                        } else {
+                            onMediaSelectMultiple?.(items);
+                            const syntheticEvent = {
+                                target: {
+                                    value: items
+                                        .map((i) => String(i.id))
+                                        .join(","),
+                                    name: props.name,
+                                },
+                            } as React.ChangeEvent<HTMLInputElement>;
+                            onChange?.(syntheticEvent);
+                        }
+                    }
+                },
+            });
+        }
+    }, [
+        isMediaType,
+        disabled,
+        type,
+        openPicker,
+        onChange,
+        onMediaSelect,
+        onMediaSelectMultiple,
+        props.name,
+        maxSelection,
+    ]);
+
+    const handleClear = React.useCallback(
+        (e: React.MouseEvent) => {
+            e.stopPropagation();
+            setSelectedMedia(null);
+            const syntheticEvent = {
+                target: {
+                    value: "",
+                    name: props.name,
+                },
+            } as React.ChangeEvent<HTMLInputElement>;
+            onChange?.(syntheticEvent);
+        },
+        [onChange, props.name],
+    );
+
+    if (isMediaType) {
+        const displayValue = (value as string) || "";
+        const thumbnailUrl =
+            selectedMedia?.thumbnail || selectedMedia?.url || "";
+        const isOverlay = pickerLayout === "overlay";
+
+        return (
+            <div className={cn("w-full", containerClassName)}>
+                <div
+                    className={cn(
+                        "relative group cursor-pointer",
+                        wrapperClassName,
+                    )}
+                    onClick={handleClick}
+                    onKeyDown={(e) => {
+                        if (disabled) return;
+                        if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            handleClick();
+                        }
+                    }}
+                    role="button"
+                    tabIndex={disabled ? -1 : 0}
+                    aria-disabled={disabled}
+                >
+                    <ThemedText
+                        ref={ref}
+                        as={InputPrimitive}
+                        type="text"
+                        data-slot="input"
+                        readOnly
+                        disabled={disabled}
+                        value={displayValue}
+                        aria-invalid={hasError ? true : props["aria-invalid"]}
+                        aria-describedby={hasError && errorId ? errorId : props["aria-describedby"]}
+                        placeholder={
+                            isOverlay
+                                ? undefined
+                                : placeholder || `Click to select ${type}...`
+                        }
+                        className={cn(
+                            isOverlay
+                                ? "sr-only size-full min-h-0 border-0 p-0 opacity-0 shadow-none ring-0 focus-visible:ring-0"
+                                : "h-8 w-full min-w-0 rounded-md border border-dashboard-border bg-dashboard-card px-2.5 py-1 pr-10 text-xs text-dashboard-foreground transition-colors outline-none placeholder:text-dashboard-muted-foreground focus-visible:border-dashboard-primary focus-visible:ring-1 focus-visible:ring-dashboard-primary/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer",
+                            !isOverlay && displayValue && "pr-20",
+                            className,
+                            hasError && ERROR_OUTLINE_CLASSES,
+                        )}
+                        {...(props as any)}
+                    />
+                    {!isOverlay && (
+                        <>
+                            <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
+                                <ImageIcon
+                                    size={14}
+                                    className="text-dashboard-muted-foreground"
+                                />
+                            </div>
+                            {displayValue && !disabled && (
+                                <button
+                                    type="button"
+                                    onClick={handleClear}
+                                    aria-label="Clear selected media"
+                                    className="absolute right-9 top-1/2 -translate-y-1/2 p-1 rounded-md hover:bg-dashboard-secondary text-dashboard-muted-foreground hover:text-dashboard-destructive transition-colors"
+                                >
+                                    <X size={12} />
+                                </button>
+                            )}
+                            {thumbnailUrl && (
+                                <div className="absolute left-2 top-1/2 -translate-y-1/2 w-5 h-5 rounded overflow-hidden border border-dashboard-border">
+                                    <img
+                                        src={thumbnailUrl}
+                                        alt=""
+                                        className="w-full h-full object-cover"
+                                    />
+                                </div>
+                            )}
+                        </>
+                    )}
+                </div>
+                <FieldError
+                    id={errorId}
+                    errors={resolvedErrors}
+                    className={errorClassName}
+                />
+            </div>
+        );
+    }
+
+    return (
+        <div className={cn("w-full", containerClassName)}>
+            <ThemedText
+                ref={ref}
+                as={InputPrimitive}
+                type={type === 'image' ? 'file' : type}
+                data-slot="input"
+                value={value}
+                placeholder={placeholder}
+                disabled={disabled}
+                aria-invalid={hasError ? true : props["aria-invalid"]}
+                aria-describedby={hasError && errorId ? errorId : props["aria-describedby"]}
+                className={cn(
+                    "h-8 w-full min-w-0 rounded-md border border-dashboard-border bg-dashboard-card px-2.5 py-1 text-xs text-dashboard-foreground transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs file:font-medium file:text-dashboard-foreground placeholder:text-dashboard-muted-foreground focus-visible:border-dashboard-primary focus-visible:ring-1 focus-visible:ring-dashboard-primary/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+                    className,
+                    hasError && ERROR_OUTLINE_CLASSES,
+                )}
+                onChange={onChange}
+                {...(props as any)}
+            />
+            <FieldError
+                id={errorId}
+                errors={resolvedErrors}
+                className={errorClassName}
+            />
+        </div>
+    );
+});
+
+export { Input };

package/src/components/label.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { ThemedText } from "../index";
+import type { ThemedTextColor } from "../typography";
+import { cn } from "../support/utils";
+
+export interface LabelProps extends React.ComponentProps<"label"> {
+  color?: ThemedTextColor;
+}
+
+function Label({ className, children, color, ...props }: LabelProps) {
+  return (
+    <ThemedText variant="label"
+      as="label"
+      color={color}
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-1.5 text-xs leading-none font-medium text-dashboard-foreground select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ThemedText>
+  );
+}
+
+export { Label };