@tidecloak/ui-framework 0.0.1

package/src/components/dialogs/CollapsibleSection.tsx

@@ -0,0 +1,184 @@
+import React, { useState } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { cn } from "../../utils";
+
+export interface CollapsibleSectionProps {
+  /** Trigger/header content */
+  trigger: React.ReactNode;
+  /** Collapsible content */
+  children: React.ReactNode;
+  /** Default open state */
+  defaultOpen?: boolean;
+  /** Controlled open state */
+  open?: boolean;
+  /** Open state change handler */
+  onOpenChange?: (open: boolean) => void;
+  /** Icon to show when collapsed */
+  collapsedIcon?: React.ReactNode;
+  /** Icon to show when expanded */
+  expandedIcon?: React.ReactNode;
+  /** Additional class name */
+  className?: string;
+  /** Trigger class name */
+  triggerClassName?: string;
+  /** Content class name */
+  contentClassName?: string;
+  /** Custom components */
+  components?: {
+    Collapsible?: React.ComponentType<{
+      open: boolean;
+      onOpenChange: (open: boolean) => void;
+      children: React.ReactNode;
+    }>;
+    CollapsibleTrigger?: React.ComponentType<{
+      asChild?: boolean;
+      children: React.ReactNode;
+    }>;
+    CollapsibleContent?: React.ComponentType<{
+      children: React.ReactNode;
+      className?: string;
+    }>;
+    Button?: React.ComponentType<{
+      variant?: string;
+      size?: string;
+      className?: string;
+      children: React.ReactNode;
+      onClick?: () => void;
+    }>;
+  };
+}
+
+/**
+ * CollapsibleSection - Expandable content section
+ *
+ * @example
+ * ```tsx
+ * <CollapsibleSection
+ *   trigger={<><Code className="h-4 w-4" /> View Code</>}
+ *   defaultOpen={false}
+ * >
+ *   <pre className="p-3 text-xs font-mono">{code}</pre>
+ * </CollapsibleSection>
+ * ```
+ */
+export function CollapsibleSection({
+  trigger,
+  children,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  collapsedIcon,
+  expandedIcon,
+  className,
+  triggerClassName,
+  contentClassName,
+  components = {},
+}: CollapsibleSectionProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+
+  const handleOpenChange = (newOpen: boolean) => {
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange?.(newOpen);
+  };
+
+  // Custom components
+  const Collapsible = components.Collapsible;
+  const CollapsibleTrigger = components.CollapsibleTrigger;
+  const CollapsibleContent = components.CollapsibleContent;
+  const Button = components.Button;
+
+  // Use custom Radix-style components if all are provided
+  if (Collapsible && CollapsibleTrigger && CollapsibleContent && Button) {
+    return (
+      <Collapsible open={isOpen} onOpenChange={handleOpenChange}>
+        <CollapsibleTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className={cn("w-full justify-start gap-2 text-muted-foreground hover:text-foreground", triggerClassName)}
+          >
+            {isOpen
+              ? (expandedIcon || <ChevronDown className="h-4 w-4" />)
+              : (collapsedIcon || <ChevronRight className="h-4 w-4" />)
+            }
+            {trigger}
+          </Button>
+        </CollapsibleTrigger>
+        <CollapsibleContent className={contentClassName}>
+          {children}
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  }
+
+  // Default implementation
+  return (
+    <div className={className}>
+      <button
+        type="button"
+        onClick={() => handleOpenChange(!isOpen)}
+        className={cn(
+          "flex w-full items-center justify-start gap-2 rounded-md px-3 py-2 text-sm",
+          "text-muted-foreground hover:text-foreground hover:bg-accent",
+          triggerClassName
+        )}
+      >
+        {isOpen
+          ? (expandedIcon || <ChevronDown className="h-4 w-4" />)
+          : (collapsedIcon || <ChevronRight className="h-4 w-4" />)
+        }
+        {trigger}
+      </button>
+      {isOpen && (
+        <div className={cn("mt-2", contentClassName)}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * CodePreview - Pre-styled collapsible code section
+ */
+export function CodePreview({
+  code,
+  language = "text",
+  label = "View Code",
+  icon,
+  maxHeight = "300px",
+  className,
+  ...props
+}: {
+  code: string;
+  language?: string;
+  label?: string;
+  icon?: React.ReactNode;
+  maxHeight?: string;
+  className?: string;
+} & Omit<CollapsibleSectionProps, 'trigger' | 'children'>) {
+  return (
+    <CollapsibleSection
+      trigger={
+        <>
+          {icon}
+          {label}
+        </>
+      }
+      contentClassName={cn("mt-2 border rounded-lg bg-muted/50", className)}
+      {...props}
+    >
+      <pre
+        className="p-3 text-xs font-mono overflow-x-auto overflow-y-auto whitespace-pre-wrap"
+        style={{ maxHeight }}
+      >
+        {code}
+      </pre>
+    </CollapsibleSection>
+  );
+}

package/src/components/dialogs/ConfirmDialog.tsx

@@ -0,0 +1,264 @@
+import React from "react";
+
+export interface ConfirmDialogProps {
+  /** Whether dialog is open */
+  open: boolean;
+  /** Close handler */
+  onClose: () => void;
+  /** Confirm handler */
+  onConfirm: () => void | Promise<void>;
+  /** Dialog title */
+  title: string;
+  /** Dialog description */
+  description: string;
+  /** Confirm button label */
+  confirmLabel?: string;
+  /** Cancel button label */
+  cancelLabel?: string;
+  /** Confirm button variant */
+  confirmVariant?: "default" | "destructive";
+  /** Whether action is in progress */
+  isLoading?: boolean;
+  /** Additional class name */
+  className?: string;
+  /** Custom components */
+  components?: {
+    AlertDialog?: React.ComponentType<{
+      open: boolean;
+      onOpenChange: (open: boolean) => void;
+      children: React.ReactNode;
+    }>;
+    AlertDialogContent?: React.ComponentType<{ children: React.ReactNode }>;
+    AlertDialogHeader?: React.ComponentType<{ children: React.ReactNode }>;
+    AlertDialogTitle?: React.ComponentType<{ children: React.ReactNode }>;
+    AlertDialogDescription?: React.ComponentType<{ children: React.ReactNode }>;
+    AlertDialogFooter?: React.ComponentType<{ children: React.ReactNode }>;
+    AlertDialogAction?: React.ComponentType<{
+      onClick: () => void;
+      className?: string;
+      style?: React.CSSProperties;
+      disabled?: boolean;
+      children: React.ReactNode;
+    }>;
+    AlertDialogCancel?: React.ComponentType<{
+      onClick?: () => void;
+      children: React.ReactNode;
+    }>;
+  };
+}
+
+/**
+ * ConfirmDialog - Confirmation dialog for destructive actions
+ *
+ * @example
+ * ```tsx
+ * <ConfirmDialog
+ *   open={showDelete}
+ *   onClose={() => setShowDelete(false)}
+ *   onConfirm={handleDelete}
+ *   title="Delete Item"
+ *   description="Are you sure? This action cannot be undone."
+ *   confirmLabel="Delete"
+ *   confirmVariant="destructive"
+ *   isLoading={isDeleting}
+ * />
+ * ```
+ */
+export function ConfirmDialog({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  confirmVariant = "default",
+  isLoading = false,
+  className,
+  components = {},
+}: ConfirmDialogProps) {
+  const AlertDialog = components.AlertDialog || DefaultAlertDialog;
+  const AlertDialogContent = components.AlertDialogContent || DefaultAlertDialogContent;
+  const AlertDialogHeader = components.AlertDialogHeader || DefaultAlertDialogHeader;
+  const AlertDialogTitle = components.AlertDialogTitle || DefaultAlertDialogTitle;
+  const AlertDialogDescription = components.AlertDialogDescription || DefaultAlertDialogDescription;
+  const AlertDialogFooter = components.AlertDialogFooter || DefaultAlertDialogFooter;
+  const AlertDialogAction = components.AlertDialogAction || DefaultAlertDialogAction;
+  const AlertDialogCancel = components.AlertDialogCancel || DefaultAlertDialogCancel;
+
+  const handleConfirm = async () => {
+    await onConfirm();
+    onClose();
+  };
+
+  const destructiveStyle: React.CSSProperties = confirmVariant === "destructive"
+    ? { backgroundColor: "#ef4444", color: "#ffffff" }
+    : {};
+
+  return (
+    <AlertDialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={onClose}>{cancelLabel}</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleConfirm}
+            disabled={isLoading}
+            style={destructiveStyle}
+          >
+            {isLoading ? "Processing..." : confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+// Default alert dialog components with inline styles
+function DefaultAlertDialog({
+  open,
+  onOpenChange,
+  children,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
+}) {
+  if (!open) return null;
+
+  return (
+    <div style={{ position: "fixed", inset: 0, zIndex: 50 }} role="presentation">
+      <div
+        style={{ position: "fixed", inset: 0, backgroundColor: "rgba(0, 0, 0, 0.8)" }}
+        onClick={() => onOpenChange(false)}
+        aria-hidden="true"
+      />
+      <div style={{ position: "fixed", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", padding: "1rem" }}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function DefaultAlertDialogContent({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+      style={{
+        position: "relative",
+        zIndex: 50,
+        display: "grid",
+        width: "100%",
+        maxWidth: "32rem",
+        gap: "1rem",
+        border: "1px solid #e5e7eb",
+        backgroundColor: "#ffffff",
+        padding: "1.5rem",
+        boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
+        borderRadius: "0.5rem",
+      }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {children}
+    </div>
+  );
+}
+
+function DefaultAlertDialogHeader({ children }: { children: React.ReactNode }) {
+  return <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>{children}</div>;
+}
+
+function DefaultAlertDialogTitle({ children }: { children: React.ReactNode }) {
+  return <h2 id="alert-dialog-title" style={{ fontSize: "1.125rem", fontWeight: 600, margin: 0 }}>{children}</h2>;
+}
+
+function DefaultAlertDialogDescription({ children }: { children: React.ReactNode }) {
+  return <p id="alert-dialog-description" style={{ fontSize: "0.875rem", color: "#6b7280", margin: 0 }}>{children}</p>;
+}
+
+function DefaultAlertDialogFooter({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
+      {children}
+    </div>
+  );
+}
+
+function DefaultAlertDialogAction({
+  onClick,
+  className,
+  style,
+  disabled,
+  children,
+}: {
+  onClick: () => void;
+  className?: string;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+  children: React.ReactNode;
+}) {
+  const baseStyle: React.CSSProperties = {
+    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: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    ...style,
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      style={baseStyle}
+      className={className}
+    >
+      {children}
+    </button>
+  );
+}
+
+function DefaultAlertDialogCancel({
+  onClick,
+  children,
+}: {
+  onClick?: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "0.375rem",
+        fontSize: "0.875rem",
+        fontWeight: 500,
+        height: "2.5rem",
+        padding: "0.5rem 1rem",
+        border: "1px solid #e5e7eb",
+        backgroundColor: "#ffffff",
+        cursor: "pointer",
+      }}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/dialogs/DetailDialog.tsx

@@ -0,0 +1,228 @@
+import React from "react";
+import { X } from "lucide-react";
+import { cn } from "../../utils";
+import type { DetailField, BaseDataItem } from "../../types";
+
+export interface DetailDialogProps<T extends BaseDataItem> {
+  /** Whether dialog is open */
+  open: boolean;
+  /** Close handler */
+  onClose: () => void;
+  /** Item to display */
+  item: T | null;
+  /** Dialog title */
+  title: string;
+  /** Dialog description */
+  description?: string;
+  /** Field definitions */
+  fields: DetailField<T>[];
+  /** Footer content (actions) */
+  footer?: React.ReactNode;
+  /** Additional content after fields */
+  children?: React.ReactNode;
+  /** Dialog size */
+  size?: "sm" | "md" | "lg" | "xl" | "full";
+  /** Additional class name */
+  className?: string;
+  /** Custom components */
+  components?: {
+    Dialog?: React.ComponentType<{
+      open: boolean;
+      onOpenChange: (open: boolean) => void;
+      children: React.ReactNode;
+    }>;
+    DialogContent?: React.ComponentType<{
+      className?: string;
+      children: React.ReactNode;
+    }>;
+    DialogHeader?: React.ComponentType<{ children: React.ReactNode }>;
+    DialogTitle?: React.ComponentType<{ children: React.ReactNode; className?: string }>;
+    DialogDescription?: React.ComponentType<{ children: React.ReactNode }>;
+    DialogFooter?: React.ComponentType<{ children: React.ReactNode; className?: string }>;
+  };
+}
+
+const SIZE_CLASSES = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  full: "max-w-4xl",
+};
+
+/**
+ * DetailDialog - Dialog for displaying item details
+ *
+ * @example
+ * ```tsx
+ * <DetailDialog
+ *   open={!!selectedItem}
+ *   onClose={() => setSelectedItem(null)}
+ *   item={selectedItem}
+ *   title="Policy Details"
+ *   fields={[
+ *     { key: 'role', label: 'Role', render: (item) => item.roleId },
+ *     { key: 'status', label: 'Status', render: (item) => <StatusBadge status={item.status} /> },
+ *   ]}
+ *   footer={<Button onClick={() => handleApprove()}>Approve</Button>}
+ * />
+ * ```
+ */
+export function DetailDialog<T extends BaseDataItem>({
+  open,
+  onClose,
+  item,
+  title,
+  description,
+  fields,
+  footer,
+  children,
+  size = "lg",
+  className,
+  components = {},
+}: DetailDialogProps<T>) {
+  // Use custom components or defaults
+  const Dialog = components.Dialog || DefaultDialog;
+  const DialogContent = components.DialogContent || DefaultDialogContent;
+  const DialogHeader = components.DialogHeader || DefaultDialogHeader;
+  const DialogTitle = components.DialogTitle || DefaultDialogTitle;
+  const DialogDescription = components.DialogDescription || DefaultDialogDescription;
+  const DialogFooter = components.DialogFooter || DefaultDialogFooter;
+
+  if (!item) return null;
+
+  // Filter visible fields
+  const visibleFields = fields.filter(
+    (field) => !field.hidden || !field.hidden(item)
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent className={cn(SIZE_CLASSES[size], "max-h-[90vh] overflow-y-auto", className)}>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Fields Grid */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
+            {visibleFields.map((field) => (
+              <div
+                key={field.key}
+                className={field.fullWidth ? "col-span-2" : ""}
+              >
+                <p className="text-muted-foreground">{field.label}</p>
+                <div className="font-medium mt-1">{field.render(item)}</div>
+              </div>
+            ))}
+          </div>
+
+          {/* Additional content */}
+          {children}
+        </div>
+
+        {/* Footer */}
+        {footer && <DialogFooter>{footer}</DialogFooter>}
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// Default dialog components
+function DefaultDialog({
+  open,
+  onOpenChange,
+  children,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
+}) {
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50">
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/80"
+        onClick={() => onOpenChange(false)}
+      />
+      {/* Content container */}
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function DefaultDialogContent({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className={cn(
+        "relative z-50 grid w-full gap-4 border bg-background p-6 shadow-lg",
+        "duration-200 sm:rounded-lg",
+        className
+      )}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {children}
+    </div>
+  );
+}
+
+function DefaultDialogHeader({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col space-y-1.5 text-center sm:text-left">
+      {children}
+    </div>
+  );
+}
+
+function DefaultDialogTitle({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <h2
+      className={cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className
+      )}
+    >
+      {children}
+    </h2>
+  );
+}
+
+function DefaultDialogDescription({ children }: { children: React.ReactNode }) {
+  return <p className="text-sm text-muted-foreground">{children}</p>;
+}
+
+function DefaultDialogFooter({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/dialogs/index.ts

@@ -0,0 +1,3 @@
+export { DetailDialog, type DetailDialogProps } from "./DetailDialog";
+export { ConfirmDialog, type ConfirmDialogProps } from "./ConfirmDialog";
+export { CollapsibleSection, CodePreview, type CollapsibleSectionProps } from "./CollapsibleSection";

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./common";
+export * from "./data-table";
+export * from "./tabs";
+export * from "./dialogs";
+export * from "./pages";