@hypoth-ui/cli 0.0.1 → 0.1.0

package/templates/toast/use-toast.ts

@@ -0,0 +1,89 @@
+"use client";
+
+/**
+ * useToast Hook
+ *
+ * React hook for showing and managing toasts.
+ */
+
+import { useCallback, useContext } from "react";
+import { ToastContext } from "./provider.js";
+
+export interface ToastOptions {
+  /** Toast title (required) */
+  title: string;
+  /** Optional description */
+  description?: string;
+  /** Visual variant */
+  variant?: "info" | "success" | "warning" | "error";
+  /** Auto-dismiss duration in ms (0 = no auto-dismiss) */
+  duration?: number;
+  /** Optional action button */
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+export interface UseToastReturn {
+  /** Show a toast notification */
+  toast: (options: ToastOptions) => string;
+  /** Dismiss a specific toast */
+  dismiss: (id: string) => void;
+  /** Dismiss all toasts */
+  dismissAll: () => void;
+}
+
+/**
+ * Hook for showing toast notifications.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { toast, dismiss } = useToast();
+ *
+ *   const handleSave = async () => {
+ *     try {
+ *       await saveData();
+ *       toast({ title: "Saved!", variant: "success" });
+ *     } catch {
+ *       toast({
+ *         title: "Error",
+ *         description: "Failed to save",
+ *         variant: "error",
+ *         action: { label: "Retry", onClick: handleSave },
+ *       });
+ *     }
+ *   };
+ *
+ *   return <button onClick={handleSave}>Save</button>;
+ * }
+ * ```
+ */
+export function useToast(): UseToastReturn {
+  const context = useContext(ToastContext);
+
+  if (!context) {
+    throw new Error("useToast must be used within a Toast.Provider");
+  }
+
+  const toast = useCallback(
+    (options: ToastOptions): string => {
+      return context.show(options);
+    },
+    [context]
+  );
+
+  const dismiss = useCallback(
+    (id: string): void => {
+      context.dismiss(id);
+    },
+    [context]
+  );
+
+  const dismissAll = useCallback((): void => {
+    context.dismissAll();
+  }, [context]);
+
+  return { toast, dismiss, dismissAll };
+}

package/templates/toast/wc/index.ts

@@ -0,0 +1,15 @@
+export { DsToast } from "./toast.js";
+export { DsToastProvider } from "./toast-provider.js";
+export {
+  ToastController,
+  dsToast,
+  getGlobalToastController,
+  setGlobalToastController,
+  type ToastOptions,
+  type ToastData,
+  type ToastVariant,
+  type ToastPosition,
+  type ToastState,
+  type ToastAction,
+  type ToastControllerOptions,
+} from "./toast-controller.js";

package/templates/toast/wc/toast-controller.ts

@@ -0,0 +1,282 @@
+/**
+ * Toast Controller
+ *
+ * Manages toast queue, lifecycle, and provides imperative API
+ * for showing and dismissing toasts.
+ */
+
+export type ToastVariant = "info" | "success" | "warning" | "error";
+export type ToastPosition =
+  | "top-left"
+  | "top-center"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-center"
+  | "bottom-right";
+
+export type ToastState = "entering" | "visible" | "exiting" | "dismissed";
+
+export interface ToastAction {
+  label: string;
+  onClick: () => void;
+}
+
+export interface ToastOptions {
+  /** Toast title (required) */
+  title: string;
+  /** Optional description */
+  description?: string;
+  /** Visual variant */
+  variant?: ToastVariant;
+  /** Auto-dismiss duration in ms (0 = no auto-dismiss) */
+  duration?: number;
+  /** Optional action button */
+  action?: ToastAction;
+}
+
+export interface ToastData extends ToastOptions {
+  /** Unique toast ID */
+  id: string;
+  /** Current lifecycle state */
+  state: ToastState;
+  /** Timestamp when created */
+  createdAt: number;
+  /** Timer ID for auto-dismiss */
+  timerId?: ReturnType<typeof setTimeout>;
+}
+
+export interface ToastControllerOptions {
+  /** Maximum simultaneous toasts */
+  maxToasts?: number;
+  /** Default duration in ms */
+  defaultDuration?: number;
+  /** Toast position */
+  position?: ToastPosition;
+  /** Callback when toast list changes */
+  onUpdate?: (toasts: ToastData[]) => void;
+}
+
+let toastIdCounter = 0;
+
+function generateId(): string {
+  return `toast-${++toastIdCounter}-${Date.now()}`;
+}
+
+/**
+ * ToastController manages the toast queue and lifecycle.
+ *
+ * @example
+ * ```typescript
+ * const controller = new ToastController({
+ *   maxToasts: 5,
+ *   defaultDuration: 5000,
+ *   onUpdate: (toasts) => renderToasts(toasts),
+ * });
+ *
+ * // Show a toast
+ * const id = controller.show({ title: "Saved!", variant: "success" });
+ *
+ * // Dismiss a specific toast
+ * controller.dismiss(id);
+ *
+ * // Dismiss all toasts
+ * controller.dismissAll();
+ * ```
+ */
+export class ToastController {
+  private toasts: ToastData[] = [];
+  private options: Required<ToastControllerOptions>;
+
+  constructor(options: ToastControllerOptions = {}) {
+    this.options = {
+      maxToasts: options.maxToasts ?? 5,
+      defaultDuration: options.defaultDuration ?? 5000,
+      position: options.position ?? "top-right",
+      onUpdate: options.onUpdate ?? (() => {}),
+    };
+  }
+
+  /**
+   * Show a new toast
+   */
+  show(options: ToastOptions): string {
+    const id = generateId();
+    const duration = options.duration ?? this.options.defaultDuration;
+
+    const toast: ToastData = {
+      id,
+      title: options.title,
+      description: options.description,
+      variant: options.variant ?? "info",
+      duration,
+      action: options.action,
+      state: "entering",
+      createdAt: Date.now(),
+    };
+
+    // Add to queue
+    this.toasts = [toast, ...this.toasts];
+
+    // Trim to max
+    if (this.toasts.length > this.options.maxToasts) {
+      const toRemove = this.toasts.slice(this.options.maxToasts);
+      for (const t of toRemove) {
+        this.dismiss(t.id);
+      }
+      this.toasts = this.toasts.slice(0, this.options.maxToasts);
+    }
+
+    // Transition to visible after animation
+    setTimeout(() => {
+      this.updateState(id, "visible");
+    }, 200);
+
+    // Set up auto-dismiss
+    if (duration > 0) {
+      toast.timerId = setTimeout(() => {
+        this.dismiss(id);
+      }, duration);
+    }
+
+    this.notify();
+    return id;
+  }
+
+  /**
+   * Dismiss a toast by ID
+   */
+  dismiss(id: string): void {
+    const toast = this.toasts.find((t) => t.id === id);
+    if (!toast || toast.state === "exiting" || toast.state === "dismissed") {
+      return;
+    }
+
+    // Clear auto-dismiss timer
+    if (toast.timerId) {
+      clearTimeout(toast.timerId);
+    }
+
+    // Start exit animation
+    this.updateState(id, "exiting");
+
+    // Remove after animation
+    setTimeout(() => {
+      this.toasts = this.toasts.filter((t) => t.id !== id);
+      this.notify();
+    }, 150);
+  }
+
+  /**
+   * Dismiss all toasts
+   */
+  dismissAll(): void {
+    const ids = this.toasts.map((t) => t.id);
+    for (const id of ids) {
+      this.dismiss(id);
+    }
+  }
+
+  /**
+   * Pause auto-dismiss for a toast (e.g., on hover)
+   */
+  pause(id: string): void {
+    const toast = this.toasts.find((t) => t.id === id);
+    if (toast?.timerId) {
+      clearTimeout(toast.timerId);
+      toast.timerId = undefined;
+    }
+  }
+
+  /**
+   * Resume auto-dismiss for a toast
+   */
+  resume(id: string): void {
+    const toast = this.toasts.find((t) => t.id === id);
+    if (toast?.duration && toast.duration > 0 && toast.state === "visible") {
+      // Calculate remaining time based on elapsed time
+      const elapsed = Date.now() - toast.createdAt;
+      const remaining = Math.max(toast.duration - elapsed, 1000);
+
+      toast.timerId = setTimeout(() => {
+        this.dismiss(id);
+      }, remaining);
+    }
+  }
+
+  /**
+   * Get current toasts
+   */
+  getToasts(): ToastData[] {
+    return [...this.toasts];
+  }
+
+  /**
+   * Get controller options
+   */
+  getOptions(): Required<ToastControllerOptions> {
+    return { ...this.options };
+  }
+
+  /**
+   * Update controller options
+   */
+  setOptions(options: Partial<ToastControllerOptions>): void {
+    this.options = { ...this.options, ...options };
+  }
+
+  private updateState(id: string, state: ToastState): void {
+    const toast = this.toasts.find((t) => t.id === id);
+    if (toast) {
+      toast.state = state;
+      this.notify();
+    }
+  }
+
+  private notify(): void {
+    this.options.onUpdate(this.getToasts());
+  }
+}
+
+// Global singleton controller
+let globalController: ToastController | null = null;
+
+/**
+ * Get or create the global toast controller
+ */
+export function getGlobalToastController(): ToastController {
+  if (!globalController) {
+    globalController = new ToastController();
+  }
+  return globalController;
+}
+
+/**
+ * Set the global toast controller (used by ToastProvider)
+ */
+export function setGlobalToastController(controller: ToastController): void {
+  globalController = controller;
+}
+
+/**
+ * Global toast function for showing toasts
+ *
+ * @example
+ * ```typescript
+ * dsToast({ title: "Saved!", variant: "success" });
+ *
+ * dsToast({
+ *   title: "Error",
+ *   description: "Something went wrong",
+ *   variant: "error",
+ *   action: { label: "Retry", onClick: () => retry() },
+ * });
+ * ```
+ */
+export function dsToast(options: ToastOptions): string {
+  return getGlobalToastController().show(options);
+}
+
+// Make dsToast available globally
+if (typeof window !== "undefined") {
+  (window as unknown as { dsToast: typeof dsToast }).dsToast = dsToast;
+}

package/templates/toast/wc/toast-provider.ts

@@ -0,0 +1,161 @@
+import { type TemplateResult, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+import {
+  ToastController,
+  type ToastData,
+  type ToastPosition,
+  setGlobalToastController,
+} from "./toast-controller.js";
+import "./toast.js";
+
+/**
+ * Toast provider component that manages toast queue and rendering.
+ *
+ * @element ds-toast-provider
+ * @slot - Default slot for app content
+ *
+ * @example
+ * ```html
+ * <ds-toast-provider position="top-right" max="5">
+ *   <!-- Your app content -->
+ * </ds-toast-provider>
+ *
+ * <script>
+ *   dsToast({ title: "Hello!", variant: "success" });
+ * </script>
+ * ```
+ */
+export class DsToastProvider extends DSElement {
+  static override styles = [];
+
+  /**
+   * Toast position
+   */
+  @property({ type: String, reflect: true })
+  position: ToastPosition = "top-right";
+
+  /**
+   * Maximum simultaneous toasts
+   */
+  @property({ type: Number })
+  max = 5;
+
+  /**
+   * Default duration in ms
+   */
+  @property({ type: Number })
+  duration = 5000;
+
+  @state()
+  private toasts: ToastData[] = [];
+
+  private controller!: ToastController;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    this.controller = new ToastController({
+      maxToasts: this.max,
+      defaultDuration: this.duration,
+      position: this.position,
+      onUpdate: (toasts) => {
+        this.toasts = toasts;
+      },
+    });
+
+    // Set as global controller
+    setGlobalToastController(this.controller);
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+
+    if (
+      changedProperties.has("max") ||
+      changedProperties.has("duration") ||
+      changedProperties.has("position")
+    ) {
+      this.controller.setOptions({
+        maxToasts: this.max,
+        defaultDuration: this.duration,
+        position: this.position,
+      });
+    }
+  }
+
+  private handleDismiss(event: CustomEvent<{ id: string }>): void {
+    this.controller.dismiss(event.detail.id);
+  }
+
+  private handlePause(event: CustomEvent<{ id: string }>): void {
+    this.controller.pause(event.detail.id);
+  }
+
+  private handleResume(event: CustomEvent<{ id: string }>): void {
+    this.controller.resume(event.detail.id);
+  }
+
+  private handleActionClick(toast: ToastData): void {
+    toast.action?.onClick();
+    this.controller.dismiss(toast.id);
+  }
+
+  override render(): TemplateResult {
+    return html`
+      <slot></slot>
+
+      <div
+        class="ds-toast-viewport"
+        data-position=${this.position}
+        role="region"
+        aria-label="Notifications"
+        aria-live="polite"
+      >
+        ${repeat(
+          this.toasts,
+          (toast) => toast.id,
+          (toast) => html`
+            <ds-toast
+              .toastId=${toast.id}
+              .toastTitle=${toast.title}
+              .description=${toast.description ?? ""}
+              .variant=${toast.variant ?? "info"}
+              .toastState=${toast.state}
+              .duration=${toast.duration ?? 0}
+              @ds:dismiss=${this.handleDismiss}
+              @ds:pause=${this.handlePause}
+              @ds:resume=${this.handleResume}
+            >
+              ${
+                toast.action
+                  ? html`
+                    <button
+                      slot="action"
+                      class="ds-button ds-button--sm ds-button--ghost"
+                      @click=${() => this.handleActionClick(toast)}
+                    >
+                      ${toast.action.label}
+                    </button>
+                  `
+                  : null
+              }
+            </ds-toast>
+          `
+        )}
+      </div>
+    `;
+  }
+}
+
+// Register the component
+define("ds-toast-provider", DsToastProvider);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-toast-provider": DsToastProvider;
+  }
+}

package/templates/toast/wc/toast.ts

@@ -0,0 +1,165 @@
+import { type TemplateResult, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { DSElement } from "../../base/ds-element.js";
+import { emitEvent } from "../../events/emit.js";
+import { define } from "../../registry/define.js";
+import type { ToastState, ToastVariant } from "./toast-controller.js";
+
+/**
+ * SVG icons for different toast variants
+ */
+const VARIANT_ICONS: Record<ToastVariant, TemplateResult> = {
+  info: html`<svg class="ds-toast__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
+  </svg>`,
+  success: html`<svg class="ds-toast__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
+  </svg>`,
+  warning: html`<svg class="ds-toast__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
+  </svg>`,
+  error: html`<svg class="ds-toast__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
+  </svg>`,
+};
+
+const CLOSE_ICON = html`<svg class="ds-toast__close-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+  <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
+</svg>`;
+
+/**
+ * Individual toast notification element.
+ *
+ * @element ds-toast
+ * @slot action - Action button slot
+ *
+ * @fires ds:dismiss - Fired when toast is dismissed
+ * @fires ds:pause - Fired when mouse enters (for pause)
+ * @fires ds:resume - Fired when mouse leaves (for resume)
+ */
+export class DsToast extends DSElement {
+  static override styles = [];
+
+  /**
+   * Unique toast ID
+   */
+  @property({ type: String, reflect: true })
+  toastId = "";
+
+  /**
+   * Toast title
+   */
+  @property({ type: String })
+  toastTitle = "";
+
+  /**
+   * Toast description
+   */
+  @property({ type: String })
+  description = "";
+
+  /**
+   * Visual variant
+   */
+  @property({ type: String, reflect: true })
+  variant: ToastVariant = "info";
+
+  /**
+   * Current state
+   */
+  @property({ type: String, reflect: true })
+  toastState: ToastState = "entering";
+
+  /**
+   * Duration for progress bar (0 = no progress)
+   */
+  @property({ type: Number })
+  duration = 5000;
+
+  /**
+   * Hide the icon
+   */
+  @property({ type: Boolean, attribute: "hide-icon" })
+  hideIcon = false;
+
+  @state()
+  private isPaused = false;
+
+  private handleDismiss(): void {
+    emitEvent(this, "dismiss", { detail: { id: this.toastId } });
+  }
+
+  private handleMouseEnter(): void {
+    this.isPaused = true;
+    emitEvent(this, "pause", { detail: { id: this.toastId } });
+  }
+
+  private handleMouseLeave(): void {
+    this.isPaused = false;
+    emitEvent(this, "resume", { detail: { id: this.toastId } });
+  }
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-toast": true,
+    };
+
+    return html`
+      <div
+        class=${classMap(classes)}
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        data-variant=${this.variant}
+        data-state=${this.toastState}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+      >
+        ${!this.hideIcon ? VARIANT_ICONS[this.variant] : nothing}
+
+        <div class="ds-toast__content">
+          <p class="ds-toast__title">${this.toastTitle}</p>
+          ${
+            this.description
+              ? html`<p class="ds-toast__description">${this.description}</p>`
+              : nothing
+          }
+          <slot name="action" class="ds-toast__action"></slot>
+        </div>
+
+        <button
+          class="ds-toast__close"
+          type="button"
+          aria-label="Dismiss notification"
+          @click=${this.handleDismiss}
+        >
+          ${CLOSE_ICON}
+        </button>
+
+        ${
+          this.duration > 0
+            ? html`
+              <div class="ds-toast__progress">
+                <div
+                  class="ds-toast__progress-bar"
+                  style="animation: ds-toast-progress ${this.duration}ms linear forwards; animation-play-state: ${this.isPaused ? "paused" : "running"}"
+                ></div>
+              </div>
+            `
+            : nothing
+        }
+      </div>
+    `;
+  }
+}
+
+// Register the component
+define("ds-toast", DsToast);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-toast": DsToast;
+  }
+}