@tidecloak/ui-framework 0.0.1

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@tidecloak/ui-framework",
+  "version": "0.0.1",
+  "description": "TideCloak UI Framework - Reusable components for data management interfaces",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src/",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "heimdall-tide": "^0.12.46",
+    "asgard-tide": "^0.12.46"
+  },
+  "peerDependenciesMeta": {
+    "heimdall-tide": {
+      "optional": true
+    },
+    "asgard-tide": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.0.0",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.400.0",
+    "tailwind-merge": "^2.2.0"
+  },
+  "devDependencies": {
+    "@tidecloak/js": "file:../tidecloak-js/packages/tidecloak-js",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "heimdall-tide": "^0.12.46",
+    "asgard-tide": "^0.12.46",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  }
+}

package/src/components/common/ActionButton.tsx

@@ -0,0 +1,234 @@
+import React, { useState } from "react";
+import {
+  Eye,
+  Upload,
+  X,
+  Check,
+  Trash2,
+  Pencil,
+  Plus,
+  Undo2,
+  Code,
+  Download,
+  Settings,
+  MoreHorizontal,
+} from "lucide-react";
+import { cn } from "../../utils";
+
+/**
+ * Action button color presets (Tailwind classes for custom Button components)
+ */
+export const ACTION_COLORS = {
+  view: "text-cyan-600 dark:text-cyan-400",
+  review: "text-cyan-600 dark:text-cyan-400",
+  approve: "text-green-600 dark:text-green-400",
+  commit: "text-green-600 dark:text-green-400",
+  reject: "text-red-600 dark:text-red-400",
+  delete: "text-red-600 dark:text-red-400",
+  cancel: "text-red-600 dark:text-red-400",
+  revoke: "text-orange-600 dark:text-orange-400",
+  edit: "text-blue-600 dark:text-blue-400",
+  create: "text-primary",
+  download: "text-purple-600 dark:text-purple-400",
+  settings: "text-gray-600 dark:text-gray-400",
+  default: "",
+} as const;
+
+/**
+ * Action button inline color styles (for default button without Tailwind)
+ */
+const ACTION_INLINE_COLORS: Record<ActionType, { color: string; hoverBg: string }> = {
+  view: { color: "#0891b2", hoverBg: "#ecfeff" },
+  review: { color: "#0891b2", hoverBg: "#ecfeff" },
+  approve: { color: "#16a34a", hoverBg: "#dcfce7" },
+  commit: { color: "#16a34a", hoverBg: "#dcfce7" },
+  reject: { color: "#dc2626", hoverBg: "#fef2f2" },
+  delete: { color: "#dc2626", hoverBg: "#fef2f2" },
+  cancel: { color: "#dc2626", hoverBg: "#fef2f2" },
+  revoke: { color: "#ea580c", hoverBg: "#fff7ed" },
+  edit: { color: "#2563eb", hoverBg: "#eff6ff" },
+  create: { color: "#6366f1", hoverBg: "#eef2ff" },
+  download: { color: "#9333ea", hoverBg: "#faf5ff" },
+  settings: { color: "#6b7280", hoverBg: "#f9fafb" },
+  default: { color: "#6b7280", hoverBg: "#f9fafb" },
+};
+
+export type ActionType = keyof typeof ACTION_COLORS;
+
+/**
+ * Default icons for action types
+ */
+export const ACTION_ICONS: Record<ActionType, React.ComponentType<{ className?: string }>> = {
+  view: Eye,
+  review: Eye,
+  approve: Check,
+  commit: Upload,
+  reject: X,
+  delete: Trash2,
+  cancel: X,
+  revoke: Undo2,
+  edit: Pencil,
+  create: Plus,
+  download: Download,
+  settings: Settings,
+  default: MoreHorizontal,
+};
+
+export interface ActionButtonProps {
+  /** Action type for automatic styling */
+  action?: ActionType;
+  /** Click handler */
+  onClick: () => void | Promise<void>;
+  /** Custom icon override */
+  icon?: React.ReactNode;
+  /** Button label (for accessibility) */
+  label?: string;
+  /** Tooltip title */
+  title?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Loading state */
+  isLoading?: boolean;
+  /** Custom color class override */
+  colorClass?: string;
+  /** Additional class name */
+  className?: string;
+  /** Button size */
+  size?: "sm" | "md" | "lg";
+  /** Button variant */
+  variant?: "ghost" | "outline" | "default";
+  /** Custom button component */
+  ButtonComponent?: React.ComponentType<{
+    size?: string;
+    variant?: string;
+    onClick: () => void;
+    disabled?: boolean;
+    title?: string;
+    className?: string;
+    children: React.ReactNode;
+  }>;
+}
+
+/**
+ * ActionButton - Icon button with preset action types
+ *
+ * @example
+ * ```tsx
+ * <ActionButton action="view" onClick={() => handleView(item)} title="View details" />
+ * <ActionButton action="delete" onClick={() => handleDelete(item)} title="Delete item" />
+ * ```
+ */
+export function ActionButton({
+  action = "default",
+  onClick,
+  icon,
+  label,
+  title,
+  disabled = false,
+  isLoading = false,
+  colorClass,
+  className,
+  size = "sm",
+  variant = "ghost",
+  ButtonComponent,
+}: ActionButtonProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  const IconComponent = ACTION_ICONS[action];
+  const defaultColorClass = ACTION_COLORS[action];
+  const inlineColors = ACTION_INLINE_COLORS[action];
+
+  const iconSizeClass = {
+    sm: "h-4 w-4",
+    md: "h-5 w-5",
+    lg: "h-6 w-6",
+  }[size];
+
+  const buttonSize = {
+    sm: { height: "2rem", width: "2rem" },
+    md: { height: "2.25rem", width: "2.25rem" },
+    lg: { height: "2.5rem", width: "2.5rem" },
+  }[size];
+
+  const handleClick = async () => {
+    if (disabled || isLoading) return;
+    await onClick();
+  };
+
+  // Create icon element
+  const iconElement = icon || <IconComponent className={iconSizeClass} />;
+
+  // If custom button component provided, use it with Tailwind classes
+  if (ButtonComponent) {
+    return (
+      <ButtonComponent
+        size={size}
+        variant={variant}
+        onClick={handleClick}
+        disabled={disabled || isLoading}
+        title={title || label}
+        className={cn(colorClass || defaultColorClass, className)}
+      >
+        {iconElement}
+      </ButtonComponent>
+    );
+  }
+
+  // Accessible label - use label prop, title, or action name
+  const accessibleLabel = label || title || action.charAt(0).toUpperCase() + action.slice(1);
+
+  // Default button implementation with inline styles
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      disabled={disabled || isLoading}
+      title={title || label}
+      aria-label={accessibleLabel}
+      aria-busy={isLoading}
+      aria-disabled={disabled || isLoading}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "0.375rem",
+        fontWeight: 500,
+        border: variant === "outline" ? "1px solid #e5e7eb" : "none",
+        backgroundColor: isHovered ? inlineColors.hoverBg : (variant === "default" ? inlineColors.color : "transparent"),
+        color: variant === "default" ? "#ffffff" : inlineColors.color,
+        cursor: disabled || isLoading ? "not-allowed" : "pointer",
+        opacity: disabled || isLoading ? 0.5 : 1,
+        transition: "all 0.15s ease",
+        ...buttonSize,
+      }}
+      className={className}
+    >
+      {iconElement}
+    </button>
+  );
+}
+
+export interface ActionButtonGroupProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * ActionButtonGroup - Container for action buttons
+ */
+export function ActionButtonGroup({ children, className }: ActionButtonGroupProps) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: "0.25rem"
+      }}
+      className={className}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/common/EmptyState.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+import { FileX, Search, Inbox, FolderOpen } from "lucide-react";
+import type { EmptyStateConfig } from "../../types";
+
+export interface EmptyStateProps extends EmptyStateConfig {
+  /** Additional class name */
+  className?: string;
+  /** Custom button component for action */
+  ButtonComponent?: React.ComponentType<{
+    onClick: () => void;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+  }>;
+}
+
+/**
+ * EmptyState - Displays when there's no data
+ *
+ * @example
+ * ```tsx
+ * <EmptyState
+ *   icon={<FileKey style={{ height: "3rem", width: "3rem" }} />}
+ *   title="No pending requests"
+ *   description="New requests will appear here."
+ * />
+ * ```
+ */
+export function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className,
+  ButtonComponent,
+}: EmptyStateProps) {
+  const defaultIcon = <Inbox style={{ height: "3rem", width: "3rem", color: "#6b7280" }} />;
+
+  const containerStyle: React.CSSProperties = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "3rem 0",
+    textAlign: "center",
+  };
+
+  return (
+    <div style={containerStyle} className={className} role="status" aria-label={title}>
+      <div style={{ marginBottom: "1rem", color: "#6b7280" }} aria-hidden="true">
+        {icon || defaultIcon}
+      </div>
+      <h3 style={{ fontWeight: 500, margin: 0 }}>{title}</h3>
+      {description && (
+        <p style={{ fontSize: "0.875rem", color: "#6b7280", marginTop: "0.25rem", maxWidth: "24rem" }}>
+          {description}
+        </p>
+      )}
+      {action && ButtonComponent && (
+        <ButtonComponent
+          onClick={action.onClick}
+          style={{ marginTop: "1rem" }}
+        >
+          {action.label}
+        </ButtonComponent>
+      )}
+      {action && !ButtonComponent && (
+        <button
+          type="button"
+          onClick={action.onClick}
+          style={{
+            marginTop: "1rem",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: "0.375rem",
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            height: "2.5rem",
+            padding: "0.5rem 1rem",
+            backgroundColor: "#3b82f6",
+            color: "#ffffff",
+            border: "none",
+            cursor: "pointer",
+          }}
+        >
+          {action.label}
+        </button>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Preset empty states for common scenarios
+ */
+export function EmptyStateNoData({
+  title = "No data found",
+  description,
+  ...props
+}: Partial<EmptyStateProps>) {
+  return (
+    <EmptyState
+      icon={<Inbox style={{ height: "3rem", width: "3rem", color: "#6b7280" }} />}
+      title={title}
+      description={description}
+      {...props}
+    />
+  );
+}
+
+export function EmptyStateNoResults({
+  title = "No results found",
+  description = "Try adjusting your search or filters.",
+  ...props
+}: Partial<EmptyStateProps>) {
+  return (
+    <EmptyState
+      icon={<Search style={{ height: "3rem", width: "3rem", color: "#6b7280" }} />}
+      title={title}
+      description={description}
+      {...props}
+    />
+  );
+}
+
+export function EmptyStateNoFiles({
+  title = "No files found",
+  description,
+  ...props
+}: Partial<EmptyStateProps>) {
+  return (
+    <EmptyState
+      icon={<FolderOpen style={{ height: "3rem", width: "3rem", color: "#6b7280" }} />}
+      title={title}
+      description={description}
+      {...props}
+    />
+  );
+}

package/src/components/common/LoadingSkeleton.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+
+export interface SkeletonProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Base Skeleton component with inline styles
+ */
+export function Skeleton({ className, style }: SkeletonProps) {
+  const baseStyle: React.CSSProperties = {
+    backgroundColor: "#e5e7eb",
+    borderRadius: "0.375rem",
+    animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+    ...style,
+  };
+
+  return <div style={baseStyle} className={className} />;
+}
+
+export interface LoadingSkeletonProps {
+  /** Number of skeleton rows */
+  rows?: number;
+  /** Type of skeleton layout */
+  type?: "table" | "card" | "list";
+  /** Additional class name */
+  className?: string;
+  /** Custom skeleton component */
+  SkeletonComponent?: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
+}
+
+/**
+ * LoadingSkeleton - Displays loading state with skeleton placeholders
+ *
+ * @example
+ * ```tsx
+ * <LoadingSkeleton rows={5} type="table" />
+ * ```
+ */
+export function LoadingSkeleton({
+  rows = 3,
+  type = "table",
+  className,
+  SkeletonComponent = Skeleton,
+}: LoadingSkeletonProps) {
+  if (type === "table") {
+    return (
+      <div style={{ padding: "1rem", display: "flex", flexDirection: "column", gap: "0.75rem" }} className={className} role="status" aria-label="Loading content" aria-busy="true">
+        {Array.from({ length: rows }).map((_, i) => (
+          <div key={i} style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+            <SkeletonComponent style={{ height: "2.5rem", width: "2.5rem", borderRadius: "9999px" }} />
+            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+              <SkeletonComponent style={{ height: "1rem", width: "8rem" }} />
+              <SkeletonComponent style={{ height: "0.75rem", width: "12rem" }} />
+            </div>
+            <SkeletonComponent style={{ height: "1.5rem", width: "4rem" }} />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (type === "card") {
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }} className={className} role="status" aria-label="Loading content" aria-busy="true">
+        {Array.from({ length: rows }).map((_, i) => (
+          <div key={i} style={{ border: "1px solid #e5e7eb", borderRadius: "0.5rem", padding: "1rem", display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+            <SkeletonComponent style={{ height: "1.25rem", width: "75%" }} />
+            <SkeletonComponent style={{ height: "1rem", width: "50%" }} />
+            <div style={{ display: "flex", gap: "0.5rem" }}>
+              <SkeletonComponent style={{ height: "1.5rem", width: "4rem" }} />
+              <SkeletonComponent style={{ height: "1.5rem", width: "5rem" }} />
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  // list type
+  return (
+    <div style={{ padding: "1rem", display: "flex", flexDirection: "column", gap: "0.75rem" }} className={className} role="status" aria-label="Loading content" aria-busy="true">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+          <SkeletonComponent style={{ height: "1rem", width: "10rem" }} />
+          <SkeletonComponent style={{ height: "1rem", width: "7rem" }} />
+          <SkeletonComponent style={{ height: "1rem", width: "10rem" }} />
+          <SkeletonComponent style={{ height: "1rem", width: "11rem" }} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * TableRowSkeleton - Single skeleton row for tables
+ */
+export function TableRowSkeleton({
+  columns = 4,
+  className,
+  SkeletonComponent = Skeleton,
+}: {
+  columns?: number;
+  className?: string;
+  SkeletonComponent?: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
+}) {
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: "1rem", padding: "0.75rem 1rem" }} className={className}>
+      {Array.from({ length: columns }).map((_, i) => (
+        <SkeletonComponent
+          key={i}
+          style={{
+            height: "1rem",
+            width: i === 0 ? "8rem" : i === columns - 1 ? "5rem" : "6rem",
+          }}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/common/RefreshButton.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+import { RefreshCw } from "lucide-react";
+
+export interface RefreshButtonProps {
+  onClick: () => void;
+  isRefreshing: boolean;
+  secondsRemaining: number | null;
+  disabled?: boolean;
+  className?: string;
+  "data-testid"?: string;
+  title?: string;
+  /** Accessible label for screen readers */
+  "aria-label"?: string;
+  ButtonComponent?: React.ComponentType<{
+    variant?: string;
+    onClick: () => void;
+    disabled?: boolean;
+    "data-testid"?: string;
+    title?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    "aria-label"?: string;
+    "aria-busy"?: boolean;
+    children: React.ReactNode;
+  }>;
+}
+
+/**
+ * RefreshButton - Displays refresh button with auto-refresh countdown
+ *
+ * @example
+ * ```tsx
+ * <RefreshButton
+ *   onClick={() => void refreshNow()}
+ *   isRefreshing={isLoading}
+ *   secondsRemaining={secondsRemaining}
+ *   title="Refresh now"
+ * />
+ * ```
+ */
+export function RefreshButton({
+  onClick,
+  isRefreshing,
+  secondsRemaining,
+  disabled,
+  className,
+  "data-testid": dataTestId,
+  title,
+  "aria-label": ariaLabel,
+  ButtonComponent,
+}: RefreshButtonProps) {
+  const label = isRefreshing ? "Refreshing..." : "Refresh";
+  const subtitle = secondsRemaining !== null ? `Auto refresh in ${secondsRemaining}s` : null;
+  const accessibleLabel = ariaLabel || (subtitle ? `${label}. ${subtitle}` : label);
+
+  const iconStyle: React.CSSProperties = {
+    height: "1rem",
+    width: "1rem",
+    ...(isRefreshing && { animation: "spin 1s linear infinite" }),
+  };
+
+  const buttonContent = (
+    <>
+      <RefreshCw style={iconStyle} />
+      <span style={{ display: "flex", alignItems: "baseline", gap: "0.5rem" }}>
+        <span>{label}</span>
+        {subtitle && (
+          <span style={{ fontSize: "0.75rem", color: "#6b7280" }}>
+            {subtitle}
+          </span>
+        )}
+      </span>
+    </>
+  );
+
+  // If a custom button component is provided, use it
+  if (ButtonComponent) {
+    return (
+      <ButtonComponent
+        variant="outline"
+        onClick={onClick}
+        disabled={disabled || isRefreshing}
+        data-testid={dataTestId}
+        title={title || accessibleLabel}
+        aria-label={accessibleLabel}
+        aria-busy={isRefreshing}
+        style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem" }}
+        className={className}
+      >
+        {buttonContent}
+      </ButtonComponent>
+    );
+  }
+
+  // Default button implementation
+  const buttonStyle: React.CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "0.5rem",
+    borderRadius: "0.375rem",
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    height: "2.5rem",
+    padding: "0.5rem 1rem",
+    border: "1px solid #e5e7eb",
+    backgroundColor: "#ffffff",
+    cursor: disabled || isRefreshing ? "not-allowed" : "pointer",
+    opacity: disabled || isRefreshing ? 0.5 : 1,
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled || isRefreshing}
+      data-testid={dataTestId}
+      title={title || accessibleLabel}
+      aria-label={accessibleLabel}
+      aria-busy={isRefreshing}
+      style={buttonStyle}
+      className={className}
+    >
+      {buttonContent}
+    </button>
+  );
+}