radtools 0.1.0

package/templates/components/ui/DropdownMenu.tsx

@@ -0,0 +1,301 @@
+'use client';
+
+import React, { createContext, useContext, useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { useEscapeKey, useClickOutside } from './hooks/useModalBehavior';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type DropdownPosition = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+
+interface DropdownContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  triggerRef: React.RefObject<HTMLElement | null>;
+  position: DropdownPosition;
+}
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const DropdownContext = createContext<DropdownContextValue | null>(null);
+
+function useDropdownContext() {
+  const context = useContext(DropdownContext);
+  if (!context) {
+    throw new Error('DropdownMenu components must be used within a DropdownMenu');
+  }
+  return context;
+}
+
+// ============================================================================
+// Dropdown Menu Root
+// ============================================================================
+
+interface DropdownMenuProps {
+  /** Controlled open state */
+  open?: boolean;
+  /** Default open state */
+  defaultOpen?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Position relative to trigger */
+  position?: DropdownPosition;
+  /** Children */
+  children: React.ReactNode;
+}
+
+export function DropdownMenu({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  position = 'bottom-start',
+  children,
+}: DropdownMenuProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const triggerRef = useRef<HTMLElement>(null);
+
+  const setOpen = useCallback((newOpen: boolean) => {
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange?.(newOpen);
+  }, [isControlled, onOpenChange]);
+
+  return (
+    <DropdownContext.Provider value={{ open, setOpen, triggerRef, position }}>
+      <div className="relative inline-block">
+        {children}
+      </div>
+    </DropdownContext.Provider>
+  );
+}
+
+// ============================================================================
+// Dropdown Menu Trigger
+// ============================================================================
+
+interface DropdownMenuTriggerProps {
+  /** Trigger element */
+  children: React.ReactElement;
+  /** Pass through as child instead of wrapping */
+  asChild?: boolean;
+}
+
+export function DropdownMenuTrigger({ children, asChild }: DropdownMenuTriggerProps) {
+  const { open, setOpen, triggerRef } = useDropdownContext();
+
+  const handleClick = () => {
+    setOpen(!open);
+  };
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<{ onClick?: () => void; ref?: React.Ref<HTMLElement | null> }>, {
+      onClick: handleClick,
+      ref: triggerRef as React.Ref<HTMLElement | null>,
+    });
+  }
+
+  return (
+    <button
+      type="button"
+      ref={triggerRef as React.RefObject<HTMLButtonElement>}
+      onClick={handleClick}
+    >
+      {children}
+    </button>
+  );
+}
+
+// ============================================================================
+// Dropdown Menu Content
+// ============================================================================
+
+interface DropdownMenuContentProps {
+  /** Additional className */
+  className?: string;
+  /** Children */
+  children: React.ReactNode;
+}
+
+export function DropdownMenuContent({ className = '', children }: DropdownMenuContentProps) {
+  const { open, setOpen, triggerRef, position } = useDropdownContext();
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [mounted, setMounted] = useState(false);
+  const [coords, setCoords] = useState({ top: 0, left: 0 });
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Calculate position
+  useEffect(() => {
+    if (!open || !triggerRef.current || !contentRef.current) return;
+
+    const trigger = triggerRef.current.getBoundingClientRect();
+    const content = contentRef.current.getBoundingClientRect();
+    const gap = 4;
+
+    let top = 0;
+    let left = 0;
+
+    switch (position) {
+      case 'bottom-start':
+        top = trigger.bottom + gap;
+        left = trigger.left;
+        break;
+      case 'bottom-end':
+        top = trigger.bottom + gap;
+        left = trigger.right - content.width;
+        break;
+      case 'top-start':
+        top = trigger.top - content.height - gap;
+        left = trigger.left;
+        break;
+      case 'top-end':
+        top = trigger.top - content.height - gap;
+        left = trigger.right - content.width;
+        break;
+    }
+
+    // Keep within viewport
+    top = Math.max(8, Math.min(top, window.innerHeight - content.height - 8));
+    left = Math.max(8, Math.min(left, window.innerWidth - content.width - 8));
+
+    setCoords({ top, left });
+  }, [open, position, triggerRef]);
+
+  // Handle click outside
+  useClickOutside(open, [contentRef, triggerRef], () => setOpen(false));
+
+  // Handle escape
+  useEscapeKey(open, () => setOpen(false));
+
+  if (!mounted || !open) return null;
+
+  return createPortal(
+    <div
+      ref={contentRef}
+      role="menu"
+      className={`
+        fixed z-50
+        min-w-[8rem]
+        bg-warm-cloud
+        border-2 border-black
+        rounded-sm
+        shadow-[2px_2px_0_0_var(--color-black)]
+        py-1
+        animate-fadeIn
+        ${className}
+      `.trim()}
+      style={{ top: coords.top, left: coords.left }}
+    >
+      {children}
+    </div>,
+    document.body
+  );
+}
+
+// ============================================================================
+// Dropdown Menu Item
+// ============================================================================
+
+interface DropdownMenuItemProps {
+  /** Item content */
+  children: React.ReactNode;
+  /** Click handler */
+  onClick?: () => void;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Destructive styling */
+  destructive?: boolean;
+  /** Additional className */
+  className?: string;
+}
+
+export function DropdownMenuItem({
+  children,
+  onClick,
+  disabled = false,
+  destructive = false,
+  className = '',
+}: DropdownMenuItemProps) {
+  const { setOpen } = useDropdownContext();
+
+  const handleClick = () => {
+    if (disabled) return;
+    onClick?.();
+    setOpen(false);
+  };
+
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      onClick={handleClick}
+      disabled={disabled}
+      className={`
+        w-full px-4 py-2
+        text-left
+        font-mondwest text-base
+        ${destructive ? 'text-error-red' : 'text-black'}
+        ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-black/5 cursor-pointer'}
+        transition-colors
+        ${className}
+      `.trim()}
+    >
+      {children}
+    </button>
+  );
+}
+
+// ============================================================================
+// Dropdown Menu Separator
+// ============================================================================
+
+interface DropdownMenuSeparatorProps {
+  /** Additional className */
+  className?: string;
+}
+
+export function DropdownMenuSeparator({ className = '' }: DropdownMenuSeparatorProps) {
+  return (
+    <div
+      role="separator"
+      className={`h-px bg-warm-cloud/20 my-1 ${className}`.trim()}
+    />
+  );
+}
+
+// ============================================================================
+// Dropdown Menu Label
+// ============================================================================
+
+interface DropdownMenuLabelProps {
+  /** Label content */
+  children: React.ReactNode;
+  /** Additional className */
+  className?: string;
+}
+
+export function DropdownMenuLabel({ children, className = '' }: DropdownMenuLabelProps) {
+  return (
+    <div
+      className={`
+        px-4 py-1
+        font-joystix text-2xs uppercase
+        text-black/50
+        ${className}
+      `.trim()}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default DropdownMenu;

package/templates/components/ui/HelpPanel.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import React, { useEffect, useRef } from 'react';
+import { Button } from './Button';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface HelpPanelProps {
+  /** Whether the panel is open */
+  isOpen: boolean;
+  /** Callback when panel should close */
+  onClose: () => void;
+  /** Help content to display */
+  children: React.ReactNode;
+  /** Optional title for the help panel */
+  title?: string;
+  /** Additional className */
+  className?: string;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * Slide-in help panel that appears from the right side of the window.
+ * Used to display contextual help content within app windows.
+ */
+export function HelpPanel({
+  isOpen,
+  onClose,
+  children,
+  title = 'Help',
+  className = '',
+}: HelpPanelProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  // Handle escape key to close
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose]);
+
+  // Handle click outside to close
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node) && isOpen) {
+        onClose();
+      }
+    };
+
+    // Add slight delay to prevent immediate close on open click
+    const timeoutId = setTimeout(() => {
+      document.addEventListener('mousedown', handleClickOutside);
+    }, 100);
+
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div 
+      className={`
+        absolute inset-0 z-50 
+        bg-black/20 
+        flex justify-end
+      `}
+    >
+      <div
+        ref={panelRef}
+        className={`
+          h-full w-72 max-w-[80%]
+          bg-warm-cloud
+          border-l border-black
+          shadow-[-4px_0_0_0_var(--color-black)]
+          flex flex-col
+          animate-slide-in-right
+          ${className}
+        `}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-black">
+          <span className="font-joystix text-xs text-black uppercase">
+            {title}
+          </span>
+          <Button
+            variant="ghost"
+            size="md"
+            iconOnly={true}
+            iconName="close"
+            onClick={onClose}
+          />
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-auto p-4">
+          <div className="font-mondwest text-base text-black space-y-4">
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default HelpPanel;
+

package/templates/components/ui/Input.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import React, { forwardRef } from 'react';
+import { Icon } from '@/components/icons';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type InputSize = 'sm' | 'md' | 'lg';
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /** Size preset */
+  size?: InputSize;
+  /** Error state */
+  error?: boolean;
+  /** Full width */
+  fullWidth?: boolean;
+  /** Icon name (filename without .svg extension) - displays on the left */
+  iconName?: string;
+  /** Additional classes */
+  className?: string;
+}
+
+interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Error state */
+  error?: boolean;
+  /** Full width */
+  fullWidth?: boolean;
+  /** Additional classes */
+  className?: string;
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+/**
+ * Base input styles matching the retro aesthetic
+ */
+const baseStyles = `
+  font-mondwest
+  bg-warm-cloud text-black
+  border border-black
+  rounded-sm
+  placeholder:text-black/40
+  focus:outline-none
+  focus:ring-2 focus:ring-sun-yellow focus:ring-offset-0
+  disabled:opacity-50 disabled:cursor-not-allowed
+`;
+
+/**
+ * Size presets
+ */
+const sizeStyles: Record<InputSize, string> = {
+  sm: 'h-8 px-2 text-sm',
+  md: 'h-10 px-3 text-base',
+  lg: 'h-12 px-4 text-base',
+};
+
+/**
+ * Error state styles
+ */
+const errorStyles = `
+  border-sun-red
+  focus:ring-sun-red
+`;
+
+// ============================================================================
+// Components
+// ============================================================================
+
+/**
+ * Text input with retro styling
+ */
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  {
+    size = 'md',
+    error = false,
+    fullWidth = false,
+    iconName,
+    className = '',
+    ...props
+  },
+  ref
+) {
+  const iconSize = size === 'sm' ? 14 : size === 'lg' ? 18 : 16;
+  const paddingLeft = iconName ? (size === 'sm' ? 'pl-8' : size === 'lg' ? 'pl-12' : 'pl-10') : '';
+  
+  const classes = [
+    baseStyles,
+    sizeStyles[size],
+    error ? errorStyles : '',
+    fullWidth ? 'w-full' : '',
+    paddingLeft,
+    className,
+  ]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  const input = (
+    <input ref={ref} className={classes} {...props} />
+  );
+
+  if (iconName) {
+    return (
+      <div className="relative">
+        <div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
+          <Icon name={iconName} size={iconSize} className="text-black/40" />
+        </div>
+        {input}
+      </div>
+    );
+  }
+
+  return input;
+});
+
+/**
+ * Textarea with retro styling
+ */
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(
+  {
+    error = false,
+    fullWidth = false,
+    className = '',
+    ...props
+  },
+  ref
+) {
+  const classes = [
+    baseStyles,
+    'px-3 py-2 text-base',
+    'resize-y min-h-24',
+    error ? errorStyles : '',
+    fullWidth ? 'w-full' : '',
+    className,
+  ]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return (
+    <textarea ref={ref} className={classes} {...props} />
+  );
+});
+
+// ============================================================================
+// Label Component
+// ============================================================================
+
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  children: React.ReactNode;
+  required?: boolean;
+  className?: string;
+}
+
+/**
+ * Form label
+ */
+export function Label({ children, required, className = '', ...props }: LabelProps) {
+  return (
+    <label
+      className={className}
+      {...props}
+    >
+      {children}
+      {required && <span className="text-error-red ml-1">*</span>}
+    </label>
+  );
+}
+
+export default Input;
+
+