@hypoth-ui/cli 0.0.1 → 0.1.0

package/templates/file-upload/file-upload-item.tsx

@@ -0,0 +1,105 @@
+/**
+ * FileUpload Item component - individual file display.
+ */
+
+import { type FileInfo, formatBytes } from "@hypoth-ui/primitives-dom";
+import { type HTMLAttributes, type ReactNode, forwardRef, useCallback } from "react";
+import { useFileUploadContext } from "./file-upload-context.js";
+
+export interface FileUploadItemProps extends Omit<HTMLAttributes<HTMLLIElement>, "children"> {
+  /** The file info to display */
+  file: FileInfo;
+  /** Custom render function for file content */
+  children?: ReactNode | ((file: FileInfo) => ReactNode);
+}
+
+/**
+ * Individual file item display with progress and remove functionality.
+ *
+ * @example
+ * ```tsx
+ * {files.map(file => (
+ *   <FileUpload.Item key={file.id} file={file} />
+ * ))}
+ *
+ * // With custom content
+ * <FileUpload.Item file={file}>
+ *   {(f) => <span>{f.name} - {formatBytes(f.size)}</span>}
+ * </FileUpload.Item>
+ * ```
+ */
+export const FileUploadItem = forwardRef<HTMLLIElement, FileUploadItemProps>(
+  ({ file, children, className, ...restProps }, ref) => {
+    const { behavior, disabled } = useFileUploadContext("FileUpload.Item");
+
+    const handleRemove = useCallback(() => {
+      behavior.removeFile(file.id);
+    }, [behavior, file.id]);
+
+    const renderContent = () => {
+      if (typeof children === "function") {
+        return children(file);
+      }
+
+      if (children) {
+        return children;
+      }
+
+      // Default rendering
+      return (
+        <>
+          {file.preview && (
+            <img
+              src={file.preview}
+              alt={file.name}
+              style={{ width: 40, height: 40, objectFit: "cover", borderRadius: 4 }}
+            />
+          )}
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+              {file.name}
+            </div>
+            <div style={{ fontSize: "0.875em", opacity: 0.7 }}>
+              {formatBytes(file.size)}
+              {file.status === "error" && file.error && (
+                <span style={{ color: "var(--ds-color-error, red)", marginLeft: 8 }}>
+                  {file.error}
+                </span>
+              )}
+            </div>
+            {file.status === "uploading" && (
+              <progress value={file.progress} max={100} style={{ width: "100%" }} />
+            )}
+          </div>
+          {!disabled && (
+            <button
+              type="button"
+              aria-label={`Remove ${file.name}`}
+              onClick={handleRemove}
+              style={{
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                padding: 4,
+                opacity: 0.7,
+              }}
+            >
+              ×
+            </button>
+          )}
+        </>
+      );
+    };
+
+    return (
+      <li ref={ref} className={className} data-status={file.status} {...restProps}>
+        {renderContent()}
+      </li>
+    );
+  }
+);
+
+FileUploadItem.displayName = "FileUpload.Item";
+
+// Re-export formatBytes for convenience
+export { formatBytes };

package/templates/file-upload/file-upload-root.tsx

@@ -0,0 +1,115 @@
+/**
+ * FileUpload Root component - provides context to all FileUpload compound components.
+ */
+
+import { type FileInfo, type FileUploadError, createFileUploadBehavior } from "@hypoth-ui/primitives-dom";
+import { type ReactNode, useCallback, useMemo, useRef, useState } from "react";
+import { FileUploadProvider } from "./file-upload-context.js";
+
+export interface FileUploadRootProps {
+  /** FileUpload content */
+  children?: ReactNode;
+  /** Accepted file types (MIME types or extensions) */
+  accept?: string;
+  /** Maximum number of files */
+  maxFiles?: number;
+  /** Maximum file size in bytes */
+  maxSize?: number;
+  /** Minimum file size in bytes */
+  minSize?: number;
+  /** Allow multiple files */
+  multiple?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Called when files are added */
+  onFilesAdd?: (files: FileInfo[]) => void;
+  /** Called when a file is removed */
+  onFileRemove?: (file: FileInfo) => void;
+  /** Called when files change */
+  onFilesChange?: (files: FileInfo[]) => void;
+  /** Called on validation error */
+  onError?: (error: FileUploadError) => void;
+}
+
+/**
+ * Root component for FileUpload compound pattern.
+ * Provides context to Dropzone, Input, FileList, and Item components.
+ *
+ * @example
+ * ```tsx
+ * <FileUpload.Root accept="image/*" maxSize={5242880} onFilesChange={(files) => console.log(files)}>
+ *   <FileUpload.Dropzone>
+ *     <p>Drop files here or click to upload</p>
+ *   </FileUpload.Dropzone>
+ *   <FileUpload.FileList />
+ * </FileUpload.Root>
+ * ```
+ */
+export function FileUploadRoot({
+  children,
+  accept = "",
+  maxFiles = Number.POSITIVE_INFINITY,
+  maxSize,
+  minSize,
+  multiple = false,
+  disabled = false,
+  onFilesAdd,
+  onFileRemove,
+  onFilesChange,
+  onError,
+}: FileUploadRootProps) {
+  const [files, setFiles] = useState<FileInfo[]>([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Create behavior instance
+  // biome-ignore lint/correctness/useExhaustiveDependencies: behavior is created once
+  const behavior = useMemo(
+    () =>
+      createFileUploadBehavior({
+        accept,
+        maxFiles,
+        maxSize,
+        minSize,
+        multiple,
+        disabled,
+        onFilesAdd: (files) => {
+          onFilesAdd?.(files);
+        },
+        onFileRemove: (file) => {
+          onFileRemove?.(file);
+        },
+        onFilesChange: (files) => {
+          setFiles(files);
+          onFilesChange?.(files);
+        },
+        onError: (error) => {
+          onError?.(error);
+        },
+      }),
+    []
+  );
+
+  const openFileDialog = useCallback(() => {
+    if (!disabled) {
+      inputRef.current?.click();
+    }
+  }, [disabled]);
+
+  const contextValue = useMemo(
+    () => ({
+      behavior,
+      files,
+      isDragging,
+      setIsDragging,
+      inputRef,
+      openFileDialog,
+      disabled,
+    }),
+    [behavior, files, isDragging, openFileDialog, disabled]
+  );
+
+  return <FileUploadProvider value={contextValue}>{children}</FileUploadProvider>;
+}
+
+FileUploadRoot.displayName = "FileUpload.Root";

package/templates/file-upload/index.ts

@@ -0,0 +1,50 @@
+/**
+ * FileUpload compound component for file selection and uploads.
+ *
+ * @example
+ * ```tsx
+ * // Basic file upload
+ * <FileUpload.Root accept="image/*" maxSize={5242880} onFilesChange={(files) => console.log(files)}>
+ *   <FileUpload.Input />
+ *   <FileUpload.Dropzone className="dropzone">
+ *     <p>Drop files here or click to upload</p>
+ *   </FileUpload.Dropzone>
+ *   {files.map(file => (
+ *     <FileUpload.Item key={file.id} file={file} />
+ *   ))}
+ * </FileUpload.Root>
+ *
+ * // Multiple files with custom styling
+ * <FileUpload.Root multiple maxFiles={5}>
+ *   <FileUpload.Input />
+ *   <FileUpload.Dropzone>
+ *     <UploadIcon />
+ *     <p>Drag and drop files here</p>
+ *   </FileUpload.Dropzone>
+ * </FileUpload.Root>
+ * ```
+ */
+
+export { FileUploadRoot, type FileUploadRootProps } from "./file-upload-root.js";
+export { FileUploadDropzone, type FileUploadDropzoneProps } from "./file-upload-dropzone.js";
+export { FileUploadInput, type FileUploadInputProps } from "./file-upload-input.js";
+export { FileUploadItem, type FileUploadItemProps, formatBytes } from "./file-upload-item.js";
+export {
+  useFileUploadContext,
+  type FileUploadContextValue,
+} from "./file-upload-context.js";
+
+// Re-export types from primitives
+export type { FileInfo, FileUploadError } from "@hypoth-ui/primitives-dom";
+
+export const FileUpload = {
+  Root: FileUploadRoot,
+  Dropzone: FileUploadDropzone,
+  Input: FileUploadInput,
+  Item: FileUploadItem,
+} as const;
+
+import { FileUploadDropzone } from "./file-upload-dropzone.js";
+import { FileUploadInput } from "./file-upload-input.js";
+import { FileUploadItem } from "./file-upload-item.js";
+import { FileUploadRoot } from "./file-upload-root.js";

package/templates/file-upload/wc/file-upload.ts

@@ -0,0 +1,380 @@
+/**
+ * FileUpload component for file selection with drag-and-drop support.
+ *
+ * @element ds-file-upload
+ * @fires ds:change - Fired when files change with { files }
+ * @fires ds:error - Fired on validation error
+ *
+ * @slot - Custom dropzone content
+ * @slot file-list - Custom file list rendering
+ *
+ * @example
+ * ```html
+ * <!-- Basic file upload -->
+ * <ds-file-upload accept="image/*" max-size="5242880"></ds-file-upload>
+ *
+ * <!-- Multiple files -->
+ * <ds-file-upload multiple max-files="5"></ds-file-upload>
+ *
+ * <!-- Custom content -->
+ * <ds-file-upload>
+ *   <span slot="dropzone">Drop your files here</span>
+ * </ds-file-upload>
+ * ```
+ */
+
+import {
+  type FileInfo,
+  type FileUploadBehavior,
+  createFileUploadBehavior,
+  formatBytes,
+} from "@hypoth-ui/primitives-dom";
+import { html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { DSElement } from "../../base/ds-element.js";
+import { StandardEvents, emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+
+export class DsFileUpload extends DSElement {
+  /** Accepted file types (MIME types or extensions) */
+  @property({ type: String, reflect: true })
+  accept = "";
+
+  /** Maximum number of files */
+  @property({ type: Number, reflect: true, attribute: "max-files" })
+  maxFiles = Number.POSITIVE_INFINITY;
+
+  /** Maximum file size in bytes */
+  @property({ type: Number, reflect: true, attribute: "max-size" })
+  maxSize: number | undefined = undefined;
+
+  /** Minimum file size in bytes */
+  @property({ type: Number, reflect: true, attribute: "min-size" })
+  minSize: number | undefined = undefined;
+
+  /** Allow multiple files */
+  @property({ type: Boolean, reflect: true })
+  multiple = false;
+
+  /** Disabled state */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /** Show file list */
+  @property({ type: Boolean, attribute: "show-file-list" })
+  showFileList = true;
+
+  /** Show remove buttons in file list */
+  @property({ type: Boolean, attribute: "show-remove" })
+  showRemove = true;
+
+  /** ARIA label */
+  @property({ type: String, attribute: "aria-label" })
+  override ariaLabel: string | null = null;
+
+  @state()
+  private behavior: FileUploadBehavior | null = null;
+
+  @state()
+  private files: FileInfo[] = [];
+
+  @state()
+  private isDragging = false;
+
+  @state()
+  private announcement = "";
+
+  private inputRef: HTMLInputElement | null = null;
+  private announcementTimeout: number | null = null;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.initBehavior();
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.behavior?.destroy();
+    this.behavior = null;
+    if (this.announcementTimeout) {
+      clearTimeout(this.announcementTimeout);
+    }
+  }
+
+  private announce(message: string): void {
+    // Clear previous announcement timeout
+    if (this.announcementTimeout) {
+      clearTimeout(this.announcementTimeout);
+    }
+
+    // Set the announcement
+    this.announcement = message;
+
+    // Clear the announcement after a delay to allow repeat announcements
+    this.announcementTimeout = window.setTimeout(() => {
+      this.announcement = "";
+    }, 1000);
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+
+    if (
+      changedProperties.has("accept") ||
+      changedProperties.has("maxFiles") ||
+      changedProperties.has("maxSize") ||
+      changedProperties.has("minSize") ||
+      changedProperties.has("multiple") ||
+      changedProperties.has("disabled")
+    ) {
+      this.initBehavior();
+    }
+  }
+
+  private initBehavior(): void {
+    // Preserve existing files
+    const existingFiles = this.files;
+    this.behavior?.destroy();
+
+    this.behavior = createFileUploadBehavior({
+      accept: this.accept,
+      maxFiles: this.maxFiles,
+      maxSize: this.maxSize,
+      minSize: this.minSize,
+      multiple: this.multiple,
+      disabled: this.disabled,
+      onFilesChange: (files) => {
+        const previousCount = this.files.length;
+        const newCount = files.length;
+        this.files = files;
+
+        // Announce file changes for screen readers
+        if (newCount > previousCount) {
+          const added = newCount - previousCount;
+          const lastFile = files[files.length - 1];
+          this.announce(
+            added === 1 && lastFile ? `${lastFile.name} added` : `${added} files added`
+          );
+        }
+
+        emitEvent(this, StandardEvents.CHANGE, { detail: { files } });
+      },
+      onError: (error) => {
+        emitEvent(this, "ds:error", { detail: error });
+      },
+    });
+
+    // Restore files if re-initializing
+    if (existingFiles.length > 0) {
+      // Files are managed by behavior, need to re-add them
+    }
+  }
+
+  /** Public method to get current files */
+  getFiles(): FileInfo[] {
+    return this.files;
+  }
+
+  /** Public method to clear all files */
+  clearFiles(): void {
+    this.behavior?.clearFiles();
+  }
+
+  /** Public method to remove a file */
+  removeFile(id: string): void {
+    this.behavior?.removeFile(id);
+  }
+
+  private handleClick(): void {
+    if (this.disabled) return;
+    this.inputRef?.click();
+  }
+
+  private handleInputChange(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    if (input.files && input.files.length > 0) {
+      this.behavior?.addFiles(input.files);
+      // Reset input so the same file can be selected again
+      input.value = "";
+    }
+  }
+
+  private handleKeyDown(event: KeyboardEvent): void {
+    if (this.behavior?.handleKeyDown(event)) {
+      this.inputRef?.click();
+    }
+  }
+
+  private handleDragEnter(event: DragEvent): void {
+    this.behavior?.handleDragEnter(event);
+    this.isDragging = this.behavior?.state.isDragging ?? false;
+  }
+
+  private handleDragLeave(event: DragEvent): void {
+    this.behavior?.handleDragLeave(event);
+    this.isDragging = this.behavior?.state.isDragging ?? false;
+  }
+
+  private handleDragOver(event: DragEvent): void {
+    this.behavior?.handleDragOver(event);
+  }
+
+  private handleDrop(event: DragEvent): void {
+    this.behavior?.handleDrop(event);
+    this.isDragging = false;
+  }
+
+  private handleRemoveFile(id: string): void {
+    const file = this.files.find((f) => f.id === id);
+    if (file) {
+      this.announce(`${file.name} removed`);
+    }
+    this.behavior?.removeFile(id);
+  }
+
+  private renderFileItem(file: FileInfo) {
+    return html`
+      <div
+        class="ds-file-upload__file"
+        data-status=${file.status}
+      >
+        ${
+          file.preview
+            ? html`<img
+              class="ds-file-upload__preview"
+              src=${file.preview}
+              alt=${file.name}
+            />`
+            : html`<span class="ds-file-upload__file-icon" aria-hidden="true">📄</span>`
+        }
+
+        <div class="ds-file-upload__file-info">
+          <span class="ds-file-upload__file-name">${file.name}</span>
+          <span class="ds-file-upload__file-size">${formatBytes(file.size)}</span>
+          ${
+            file.status === "error"
+              ? html`<span class="ds-file-upload__file-error">${file.error}</span>`
+              : nothing
+          }
+          ${
+            file.status === "uploading"
+              ? html`<progress
+                class="ds-file-upload__progress"
+                value=${file.progress}
+                max="100"
+              ></progress>`
+              : nothing
+          }
+        </div>
+
+        ${
+          this.showRemove && !this.disabled
+            ? html`
+              <button
+                type="button"
+                class="ds-file-upload__remove"
+                aria-label="Remove ${file.name}"
+                @click=${() => this.handleRemoveFile(file.id)}
+              >
+                ×
+              </button>
+            `
+            : nothing
+        }
+      </div>
+    `;
+  }
+
+  override render() {
+    if (!this.behavior) return nothing;
+
+    const dropzoneProps = this.behavior.getDropzoneProps();
+    const inputProps = this.behavior.getInputProps();
+
+    return html`
+      <div class="ds-file-upload" data-disabled=${this.disabled || nothing}>
+        <div
+          class="ds-file-upload__dropzone"
+          role=${dropzoneProps.role}
+          tabindex=${dropzoneProps.tabIndex}
+          aria-label=${this.ariaLabel || dropzoneProps["aria-label"]}
+          aria-disabled=${dropzoneProps["aria-disabled"] ?? nothing}
+          data-dragging=${this.isDragging || nothing}
+          @click=${this.handleClick}
+          @keydown=${this.handleKeyDown}
+          @dragenter=${this.handleDragEnter}
+          @dragleave=${this.handleDragLeave}
+          @dragover=${this.handleDragOver}
+          @drop=${this.handleDrop}
+        >
+          <slot>
+            <span class="ds-file-upload__icon" aria-hidden="true">📁</span>
+            <span class="ds-file-upload__text">
+              ${
+                this.isDragging
+                  ? "Drop files here"
+                  : this.multiple
+                    ? "Drop files here or click to upload"
+                    : "Drop file here or click to upload"
+              }
+            </span>
+            ${
+              this.accept
+                ? html`<span class="ds-file-upload__hint">Accepted: ${this.accept}</span>`
+                : nothing
+            }
+            ${
+              this.maxSize
+                ? html`<span class="ds-file-upload__hint">Max size: ${formatBytes(this.maxSize)}</span>`
+                : nothing
+            }
+          </slot>
+
+          <input
+            class="ds-file-upload__input"
+            type=${inputProps.type}
+            accept=${inputProps.accept ?? nothing}
+            ?multiple=${inputProps.multiple}
+            ?disabled=${inputProps.disabled}
+            aria-hidden=${inputProps["aria-hidden"]}
+            tabindex=${inputProps.tabIndex}
+            @change=${this.handleInputChange}
+            .ref=${(el: HTMLInputElement | null) => {
+              this.inputRef = el;
+            }}
+          />
+        </div>
+
+        ${
+          this.showFileList && this.files.length > 0
+            ? html`
+              <div class="ds-file-upload__list" role="list" aria-label="Selected files">
+                <slot name="file-list">
+                  ${this.files.map((file) => this.renderFileItem(file))}
+                </slot>
+              </div>
+            `
+            : nothing
+        }
+
+        <!-- ARIA live region for announcements -->
+        <div
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
+          class="ds-file-upload__announcer"
+        >
+          ${this.announcement}
+        </div>
+      </div>
+    `;
+  }
+}
+
+define("ds-file-upload", DsFileUpload);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-file-upload": DsFileUpload;
+  }
+}

package/templates/file-upload/wc/index.ts

@@ -0,0 +1 @@
+export { DsFileUpload } from "./file-upload.js";