@almadar/cli 1.0.6 → 1.0.8

package/shells/typescript-shell/packages/client/src/components/organisms/ComponentPatterns.tsx

@@ -1,1000 +0,0 @@
-/**
- * Component Pattern Wrappers
- *
- * Pattern wrappers for atomic UI components that can be rendered via render_ui.
- * These bridge the shell's atomic components with the pattern system.
- *
- * Interactive components emit events via useEventBus for the closed circuit pattern.
- *
- * @packageDocumentation
- */
-
-import React from 'react';
-import { useEventBus } from '../../hooks/useEventBus';
-
-// Shell component imports
-import { Button, type ButtonVariant, type ButtonSize } from '../atoms/Button';
-import { Badge, type BadgeVariant } from '../atoms/Badge';
-import { Avatar } from '../atoms/Avatar';
-import { Icon } from '../atoms/Icon';
-import { Input } from '../atoms/Input';
-import { Textarea } from '../atoms/Textarea';
-import { Select } from '../atoms/Select';
-import { Checkbox } from '../atoms/Checkbox';
-import { Radio } from '../atoms/Radio';
-import { Label } from '../atoms/Label';
-import { Spinner } from '../atoms/Spinner';
-import { ProgressBar } from '../atoms/ProgressBar';
-import { Card } from '../atoms/Card';
-import { Typography, Heading } from '../atoms/Typography';
-import { Alert, type AlertVariant } from '../molecules/Alert';
-import { Tooltip } from '../molecules/Tooltip';
-import { Popover } from '../molecules/Popover';
-import { Menu } from '../molecules/Menu';
-import { Accordion } from '../molecules/Accordion';
-import { Container } from '../molecules/Container';
-import { SimpleGrid } from '../molecules/SimpleGrid';
-import { FloatingActionButton } from '../molecules/FloatingActionButton';
-
-// ============================================================================
-// Interactive Components (emit events via closed circuit)
-// ============================================================================
-
-export interface ButtonPatternProps {
-  label: string;
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  disabled?: boolean;
-  onClick?: string; // Event name to emit
-  icon?: string;
-  iconPosition?: 'left' | 'right';
-  className?: string;
-}
-
-/**
- * Button pattern that emits events via the event bus.
- */
-export function ButtonPattern({
-  label,
-  variant = 'primary',
-  size = 'md',
-  disabled = false,
-  onClick,
-  icon,
-  iconPosition = 'left',
-  className,
-}: ButtonPatternProps): React.ReactElement {
-  const { emit } = useEventBus();
-
-  const handleClick = () => {
-    if (onClick && !disabled) {
-      emit(`UI:${onClick}`, {});
-    }
-  };
-
-  return (
-    <Button
-      variant={variant}
-      size={size}
-      disabled={disabled}
-      onClick={handleClick}
-      className={className}
-    >
-      {icon && iconPosition === 'left' && <Icon name={icon} size="sm" />}
-      {label}
-      {icon && iconPosition === 'right' && <Icon name={icon} size="sm" />}
-    </Button>
-  );
-}
-
-ButtonPattern.displayName = 'ButtonPattern';
-
-export interface IconButtonPatternProps {
-  icon: string;
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  onClick?: string;
-  ariaLabel?: string;
-  className?: string;
-}
-
-/**
- * Icon-only button pattern.
- */
-export function IconButtonPattern({
-  icon,
-  variant = 'ghost',
-  size = 'md',
-  onClick,
-  ariaLabel,
-  className,
-}: IconButtonPatternProps): React.ReactElement {
-  const { emit } = useEventBus();
-
-  const handleClick = () => {
-    if (onClick) {
-      emit(`UI:${onClick}`, {});
-    }
-  };
-
-  return (
-    <Button
-      variant={variant}
-      size={size}
-      onClick={handleClick}
-      aria-label={ariaLabel}
-      className={className}
-    >
-      <Icon name={icon} size={size === 'sm' ? 'sm' : 'md'} />
-    </Button>
-  );
-}
-
-IconButtonPattern.displayName = 'IconButtonPattern';
-
-export interface LinkPatternProps {
-  label: string;
-  href?: string;
-  external?: boolean;
-  onClick?: string;
-  className?: string;
-}
-
-/**
- * Link pattern for navigation.
- */
-export function LinkPattern({
-  label,
-  href,
-  external = false,
-  onClick,
-  className,
-}: LinkPatternProps): React.ReactElement {
-  const { emit } = useEventBus();
-
-  const handleClick = (e: React.MouseEvent) => {
-    if (onClick) {
-      e.preventDefault();
-      emit(`UI:${onClick}`, { href });
-    }
-  };
-
-  return (
-    <a
-      href={href ?? '#'}
-      target={external ? '_blank' : undefined}
-      rel={external ? 'noopener noreferrer' : undefined}
-      onClick={onClick ? handleClick : undefined}
-      className={className}
-    >
-      {label}
-    </a>
-  );
-}
-
-LinkPattern.displayName = 'LinkPattern';
-
-// ============================================================================
-// Display Components
-// ============================================================================
-
-export interface TextPatternProps {
-  content: string;
-  variant?: 'body' | 'caption' | 'overline';
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  weight?: 'normal' | 'medium' | 'semibold' | 'bold';
-  color?: string;
-  align?: 'left' | 'center' | 'right';
-  className?: string;
-}
-
-/**
- * Text pattern for typography.
- */
-export function TextPattern({
-  content,
-  variant = 'body',
-  size = 'md',
-  weight = 'normal',
-  color,
-  align,
-  className,
-}: TextPatternProps): React.ReactElement {
-  return (
-    <Typography
-      variant={variant}
-      size={size}
-      weight={weight}
-      className={className}
-      style={{ color, textAlign: align }}
-    >
-      {content}
-    </Typography>
-  );
-}
-
-TextPattern.displayName = 'TextPattern';
-
-export interface HeadingPatternProps {
-  content: string;
-  level?: 1 | 2 | 3 | 4 | 5 | 6;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
-  className?: string;
-}
-
-/**
- * Heading pattern.
- */
-export function HeadingPattern({
-  content,
-  level = 2,
-  size,
-  className,
-}: HeadingPatternProps): React.ReactElement {
-  return (
-    <Heading level={level} size={size} className={className}>
-      {content}
-    </Heading>
-  );
-}
-
-HeadingPattern.displayName = 'HeadingPattern';
-
-export interface BadgePatternProps {
-  label: string;
-  variant?: BadgeVariant;
-  size?: 'sm' | 'md';
-  className?: string;
-}
-
-/**
- * Badge pattern for status/counts.
- */
-export function BadgePattern({
-  label,
-  variant = 'default',
-  size = 'md',
-  className,
-}: BadgePatternProps): React.ReactElement {
-  return <Badge variant={variant} size={size} className={className}>{label}</Badge>;
-}
-
-BadgePattern.displayName = 'BadgePattern';
-
-export interface AvatarPatternProps {
-  src?: string;
-  alt?: string;
-  name?: string;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  className?: string;
-}
-
-/**
- * Avatar pattern.
- */
-export function AvatarPattern({
-  src,
-  alt,
-  name,
-  size = 'md',
-  className,
-}: AvatarPatternProps): React.ReactElement {
-  return <Avatar src={src} alt={alt ?? name ?? ''} name={name} size={size} className={className} />;
-}
-
-AvatarPattern.displayName = 'AvatarPattern';
-
-export interface IconPatternProps {
-  name: string;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  color?: string;
-  className?: string;
-}
-
-/**
- * Icon pattern.
- */
-export function IconPattern({
-  name,
-  size = 'md',
-  color,
-  className,
-}: IconPatternProps): React.ReactElement {
-  return <Icon name={name} size={size} className={className} style={{ color }} />;
-}
-
-IconPattern.displayName = 'IconPattern';
-
-export interface ImagePatternProps {
-  src: string;
-  alt: string;
-  width?: number | string;
-  height?: number | string;
-  objectFit?: 'cover' | 'contain' | 'fill';
-  fallback?: string;
-  className?: string;
-}
-
-/**
- * Image pattern.
- */
-export function ImagePattern({
-  src,
-  alt,
-  width,
-  height,
-  objectFit = 'cover',
-  className,
-}: ImagePatternProps): React.ReactElement {
-  return (
-    <img
-      src={src}
-      alt={alt}
-      width={width}
-      height={height}
-      className={className}
-      style={{ objectFit }}
-    />
-  );
-}
-
-ImagePattern.displayName = 'ImagePattern';
-
-export interface CardPatternProps {
-  title?: string;
-  subtitle?: string;
-  padding?: 'none' | 'sm' | 'md' | 'lg';
-  shadow?: 'none' | 'sm' | 'md' | 'lg';
-  onClick?: string;
-  className?: string;
-  children?: React.ReactNode;
-}
-
-/**
- * Card pattern.
- */
-export function CardPattern({
-  title,
-  subtitle,
-  padding = 'md',
-  shadow = 'md',
-  onClick,
-  className,
-  children,
-}: CardPatternProps): React.ReactElement {
-  const { emit } = useEventBus();
-
-  const handleClick = onClick
-    ? () => emit(`UI:${onClick}`, {})
-    : undefined;
-
-  return (
-    <Card
-      title={title}
-      subtitle={subtitle}
-      padding={padding}
-      shadow={shadow}
-      onClick={handleClick}
-      className={className}
-    >
-      {children}
-    </Card>
-  );
-}
-
-CardPattern.displayName = 'CardPattern';
-
-export interface ProgressBarPatternProps {
-  value: number;
-  max?: number;
-  variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
-  size?: 'sm' | 'md' | 'lg';
-  showLabel?: boolean;
-  className?: string;
-}
-
-/**
- * Progress bar pattern.
- */
-export function ProgressBarPattern({
-  value,
-  max = 100,
-  variant = 'primary',
-  size = 'md',
-  showLabel = false,
-  className,
-}: ProgressBarPatternProps): React.ReactElement {
-  return (
-    <ProgressBar
-      value={value}
-      max={max}
-      variant={variant}
-      size={size}
-      showLabel={showLabel}
-      className={className}
-    />
-  );
-}
-
-ProgressBarPattern.displayName = 'ProgressBarPattern';
-
-export interface SpinnerPatternProps {
-  size?: 'xs' | 'sm' | 'md' | 'lg';
-  color?: string;
-  className?: string;
-}
-
-/**
- * Spinner pattern.
- */
-export function SpinnerPattern({
-  size = 'md',
-  className,
-}: SpinnerPatternProps): React.ReactElement {
-  return <Spinner size={size} className={className} />;
-}
-
-SpinnerPattern.displayName = 'SpinnerPattern';
-
-// ============================================================================
-// Form Input Components
-// ============================================================================
-
-export interface InputPatternProps {
-  value?: string;
-  placeholder?: string;
-  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
-  disabled?: boolean;
-  error?: string;
-  onChange?: string;
-  onBlur?: string;
-  className?: string;
-}
-
-/**
- * Input pattern.
- */
-export function InputPattern({
-  value = '',
-  placeholder,
-  type = 'text',
-  disabled = false,
-  error,
-  onChange,
-  onBlur,
-  className,
-}: InputPatternProps): React.ReactElement {
-  const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React.useState(value);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setLocalValue(e.target.value);
-    if (onChange) {
-      emit(`UI:${onChange}`, { value: e.target.value });
-    }
-  };
-
-  const handleBlur = () => {
-    if (onBlur) {
-      emit(`UI:${onBlur}`, { value: localValue });
-    }
-  };
-
-  return (
-    <Input
-      value={localValue}
-      placeholder={placeholder}
-      type={type}
-      disabled={disabled}
-      error={error}
-      onChange={handleChange}
-      onBlur={handleBlur}
-      className={className}
-    />
-  );
-}
-
-InputPattern.displayName = 'InputPattern';
-
-export interface TextareaPatternProps {
-  value?: string;
-  placeholder?: string;
-  rows?: number;
-  disabled?: boolean;
-  error?: string;
-  onChange?: string;
-  className?: string;
-}
-
-/**
- * Textarea pattern.
- */
-export function TextareaPattern({
-  value = '',
-  placeholder,
-  rows = 4,
-  disabled = false,
-  error,
-  onChange,
-  className,
-}: TextareaPatternProps): React.ReactElement {
-  const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React.useState(value);
-
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setLocalValue(e.target.value);
-    if (onChange) {
-      emit(`UI:${onChange}`, { value: e.target.value });
-    }
-  };
-
-  return (
-    <Textarea
-      value={localValue}
-      placeholder={placeholder}
-      rows={rows}
-      disabled={disabled}
-      error={error}
-      onChange={handleChange}
-      className={className}
-    />
-  );
-}
-
-TextareaPattern.displayName = 'TextareaPattern';
-
-export interface SelectPatternProps {
-  value?: string;
-  options: Array<{ value: string; label: string }>;
-  placeholder?: string;
-  disabled?: boolean;
-  error?: string;
-  onChange?: string;
-  className?: string;
-}
-
-/**
- * Select pattern.
- */
-export function SelectPattern({
-  value = '',
-  options,
-  placeholder,
-  disabled = false,
-  error,
-  onChange,
-  className,
-}: SelectPatternProps): React.ReactElement {
-  const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React.useState(value);
-
-  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setLocalValue(e.target.value);
-    if (onChange) {
-      emit(`UI:${onChange}`, { value: e.target.value });
-    }
-  };
-
-  return (
-    <Select
-      value={localValue}
-      options={options}
-      placeholder={placeholder}
-      disabled={disabled}
-      error={error}
-      onChange={handleChange}
-      className={className}
-    />
-  );
-}
-
-SelectPattern.displayName = 'SelectPattern';
-
-export interface CheckboxPatternProps {
-  checked?: boolean;
-  label?: string;
-  disabled?: boolean;
-  onChange?: string;
-  className?: string;
-}
-
-/**
- * Checkbox pattern.
- */
-export function CheckboxPattern({
-  checked = false,
-  label,
-  disabled = false,
-  onChange,
-  className,
-}: CheckboxPatternProps): React.ReactElement {
-  const { emit } = useEventBus();
-  const [localChecked, setLocalChecked] = React.useState(checked);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setLocalChecked(e.target.checked);
-    if (onChange) {
-      emit(`UI:${onChange}`, { checked: e.target.checked });
-    }
-  };
-
-  return (
-    <Checkbox
-      checked={localChecked}
-      label={label}
-      disabled={disabled}
-      onChange={handleChange}
-      className={className}
-    />
-  );
-}
-
-CheckboxPattern.displayName = 'CheckboxPattern';
-
-export interface RadioPatternProps {
-  value: string;
-  checked?: boolean;
-  name?: string;
-  label?: string;
-  disabled?: boolean;
-  onChange?: string;
-  className?: string;
-}
-
-/**
- * Radio pattern.
- */
-export function RadioPattern({
-  value,
-  checked = false,
-  name,
-  label,
-  disabled = false,
-  onChange,
-  className,
-}: RadioPatternProps): React.ReactElement {
-  const { emit } = useEventBus();
-
-  const handleChange = () => {
-    if (onChange) {
-      emit(`UI:${onChange}`, { value });
-    }
-  };
-
-  return (
-    <Radio
-      value={value}
-      checked={checked}
-      name={name}
-      label={label}
-      disabled={disabled}
-      onChange={handleChange}
-      className={className}
-    />
-  );
-}
-
-RadioPattern.displayName = 'RadioPattern';
-
-export interface LabelPatternProps {
-  text: string;
-  htmlFor?: string;
-  required?: boolean;
-  className?: string;
-}
-
-/**
- * Label pattern.
- */
-export function LabelPattern({
-  text,
-  htmlFor,
-  required = false,
-  className,
-}: LabelPatternProps): React.ReactElement {
-  return (
-    <Label htmlFor={htmlFor} required={required} className={className}>
-      {text}
-    </Label>
-  );
-}
-
-LabelPattern.displayName = 'LabelPattern';
-
-// ============================================================================
-// Feedback Components
-// ============================================================================
-
-export interface AlertPatternProps {
-  message: string;
-  title?: string;
-  variant?: AlertVariant;
-  dismissible?: boolean;
-  onDismiss?: string;
-  className?: string;
-}
-
-/**
- * Alert pattern.
- */
-export function AlertPattern({
-  message,
-  title,
-  variant = 'info',
-  dismissible = false,
-  onDismiss,
-  className,
-}: AlertPatternProps): React.ReactElement {
-  const { emit } = useEventBus();
-
-  const handleDismiss = () => {
-    if (onDismiss) {
-      emit(`UI:${onDismiss}`, {});
-    }
-  };
-
-  return (
-    <Alert
-      message={message}
-      title={title}
-      variant={variant}
-      dismissible={dismissible}
-      onDismiss={dismissible ? handleDismiss : undefined}
-      className={className}
-    />
-  );
-}
-
-AlertPattern.displayName = 'AlertPattern';
-
-export interface TooltipPatternProps {
-  content: string;
-  position?: 'top' | 'bottom' | 'left' | 'right';
-  className?: string;
-  children?: React.ReactNode;
-}
-
-/**
- * Tooltip pattern.
- */
-export function TooltipPattern({
-  content,
-  position = 'top',
-  className,
-  children,
-}: TooltipPatternProps): React.ReactElement {
-  return (
-    <Tooltip content={content} position={position} className={className}>
-      {children}
-    </Tooltip>
-  );
-}
-
-TooltipPattern.displayName = 'TooltipPattern';
-
-export interface PopoverPatternProps {
-  content: React.ReactNode;
-  position?: 'top' | 'bottom' | 'left' | 'right';
-  trigger?: 'click' | 'hover';
-  className?: string;
-  children?: React.ReactNode;
-}
-
-/**
- * Popover pattern.
- */
-export function PopoverPattern({
-  content,
-  position = 'bottom',
-  trigger = 'click',
-  className,
-  children,
-}: PopoverPatternProps): React.ReactElement {
-  return (
-    <Popover content={content} position={position} trigger={trigger} className={className}>
-      {children}
-    </Popover>
-  );
-}
-
-PopoverPattern.displayName = 'PopoverPattern';
-
-// ============================================================================
-// Navigation Components
-// ============================================================================
-
-export interface MenuPatternProps {
-  items: Array<{
-    label: string;
-    event: string;
-    icon?: string;
-    disabled?: boolean;
-    variant?: 'default' | 'danger';
-  }>;
-  trigger?: React.ReactNode;
-  position?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
-  className?: string;
-}
-
-/**
- * Menu pattern.
- */
-export function MenuPattern({
-  items,
-  trigger,
-  position = 'bottom-start',
-  className,
-}: MenuPatternProps): React.ReactElement {
-  const { emit } = useEventBus();
-
-  const menuItems = items.map((item) => ({
-    ...item,
-    onClick: () => emit(`UI:${item.event}`, {}),
-  }));
-
-  return (
-    <Menu items={menuItems} trigger={trigger} position={position} className={className} />
-  );
-}
-
-MenuPattern.displayName = 'MenuPattern';
-
-export interface AccordionPatternProps {
-  items: Array<{ title: string; content: React.ReactNode }>;
-  multiple?: boolean;
-  defaultOpen?: number[];
-  className?: string;
-}
-
-/**
- * Accordion pattern.
- */
-export function AccordionPattern({
-  items,
-  multiple = false,
-  defaultOpen = [],
-  className,
-}: AccordionPatternProps): React.ReactElement {
-  return (
-    <Accordion
-      items={items}
-      multiple={multiple}
-      defaultOpen={defaultOpen}
-      className={className}
-    />
-  );
-}
-
-AccordionPattern.displayName = 'AccordionPattern';
-
-// ============================================================================
-// Layout Components
-// ============================================================================
-
-export interface ContainerPatternProps {
-  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
-  padding?: 'none' | 'sm' | 'md' | 'lg';
-  className?: string;
-  children?: React.ReactNode;
-}
-
-/**
- * Container pattern.
- */
-export function ContainerPattern({
-  maxWidth = 'lg',
-  padding = 'md',
-  className,
-  children,
-}: ContainerPatternProps): React.ReactElement {
-  return (
-    <Container maxWidth={maxWidth} padding={padding} className={className}>
-      {children}
-    </Container>
-  );
-}
-
-ContainerPattern.displayName = 'ContainerPattern';
-
-export interface SimpleGridPatternProps {
-  minChildWidth?: string;
-  gap?: 'xs' | 'sm' | 'md' | 'lg';
-  className?: string;
-  children?: React.ReactNode;
-}
-
-/**
- * Simple grid pattern.
- */
-export function SimpleGridPattern({
-  minChildWidth = '250px',
-  gap = 'md',
-  className,
-  children,
-}: SimpleGridPatternProps): React.ReactElement {
-  return (
-    <SimpleGrid minChildWidth={minChildWidth} gap={gap} className={className}>
-      {children}
-    </SimpleGrid>
-  );
-}
-
-SimpleGridPattern.displayName = 'SimpleGridPattern';
-
-export interface FloatButtonPatternProps {
-  icon: string;
-  onClick?: string;
-  position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
-  variant?: 'primary' | 'secondary';
-  className?: string;
-}
-
-/**
- * Floating action button pattern.
- */
-export function FloatButtonPattern({
-  icon,
-  onClick,
-  position = 'bottom-right',
-  variant = 'primary',
-  className,
-}: FloatButtonPatternProps): React.ReactElement {
-  const { emit } = useEventBus();
-
-  const handleClick = () => {
-    if (onClick) {
-      emit(`UI:${onClick}`, {});
-    }
-  };
-
-  return (
-    <FloatingActionButton
-      icon={icon}
-      onClick={handleClick}
-      position={position}
-      variant={variant}
-      className={className}
-    />
-  );
-}
-
-FloatButtonPattern.displayName = 'FloatButtonPattern';
-
-// ============================================================================
-// Export Pattern Registry
-// ============================================================================
-
-export const COMPONENT_PATTERNS = {
-  // Interactive
-  'button': ButtonPattern,
-  'icon-button': IconButtonPattern,
-  'link': LinkPattern,
-  // Display
-  'text': TextPattern,
-  'heading': HeadingPattern,
-  'badge': BadgePattern,
-  'avatar': AvatarPattern,
-  'icon': IconPattern,
-  'image': ImagePattern,
-  'card': CardPattern,
-  'progress-bar': ProgressBarPattern,
-  'spinner': SpinnerPattern,
-  // Form inputs
-  'input': InputPattern,
-  'textarea': TextareaPattern,
-  'select': SelectPattern,
-  'checkbox': CheckboxPattern,
-  'radio': RadioPattern,
-  'label': LabelPattern,
-  // Feedback
-  'alert': AlertPattern,
-  'tooltip': TooltipPattern,
-  'popover': PopoverPattern,
-  // Navigation
-  'menu': MenuPattern,
-  'accordion': AccordionPattern,
-  // Layout
-  'container': ContainerPattern,
-  'simple-grid': SimpleGridPattern,
-  'float-button': FloatButtonPattern,
-} as const;