@almadar/cli 0.3.2 → 0.3.3

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

@@ -0,0 +1,85 @@
+/**
+ * MasterDetail Component
+ *
+ * A layout pattern that shows a list/table of entities.
+ * This is a thin wrapper around DataTable that accepts master-detail specific props.
+ *
+ * When `entity` prop is provided without `data`, automatically fetches data
+ * using the useEntityList hook.
+ *
+ * The "detail" part is typically rendered separately via another render_ui effect
+ * to a sidebar or detail panel when an item is selected.
+ */
+
+import React from 'react';
+import { DataTable, type DataTableProps } from './DataTable';
+import { useEntityList } from '../../hooks/useEntityData';
+
+export interface MasterDetailProps<T extends { id: string | number } = { id: string | number }> {
+  /** Entity type name - when provided without data, auto-fetches from API */
+  entity?: string;
+  /** Fields to show in the master list (maps to DataTable columns) */
+  masterFields?: readonly string[];
+  /** Fields for detail view (passed through but typically handled by separate render_ui) */
+  detailFields?: readonly string[];
+  /** Data array - if not provided and entity is set, data is auto-fetched */
+  data?: readonly T[] | T[];
+  /** Loading state */
+  loading?: boolean;
+  /** Loading state alias */
+  isLoading?: boolean;
+  /** Error state */
+  error?: Error | null;
+  /** Row click handler */
+  onRowClick?: (row: T) => void;
+  /** Selection change handler */
+  onSelectionChange?: (ids: (string | number)[]) => void;
+  /** Additional class name */
+  className?: string;
+}
+
+export function MasterDetail<T extends { id: string | number }>({
+  entity,
+  masterFields = [],
+  detailFields: _detailFields, // Captured but not used here - detail handled separately
+  data: externalData,
+  loading: externalLoading,
+  isLoading: externalIsLoading,
+  error: externalError,
+  onRowClick,
+  onSelectionChange,
+  className,
+  ...rest
+}: MasterDetailProps<T>): React.ReactElement {
+  // Auto-fetch data when entity is provided but no external data
+  const shouldAutoFetch = !!entity && !externalData;
+  const { data: fetchedData, isLoading: fetchLoading, error: fetchError } = useEntityList(
+    shouldAutoFetch ? entity : undefined,
+    { skip: !shouldAutoFetch }
+  );
+
+  // Use external data if provided, otherwise use fetched data
+  const data = externalData ?? (fetchedData as T[] | undefined);
+  const loading = externalLoading ?? (shouldAutoFetch ? fetchLoading : false);
+  const isLoading = externalIsLoading ?? (shouldAutoFetch ? fetchLoading : false);
+  const error = externalError ?? (shouldAutoFetch ? fetchError : null);
+
+  return (
+    <DataTable<T>
+      columns={masterFields}
+      data={data}
+      isLoading={loading || isLoading}
+      error={error}
+      onRowClick={onRowClick}
+      onSelectionChange={onSelectionChange}
+      className={className}
+      emptyTitle={`No ${entity || 'items'} found`}
+      emptyDescription={`Create your first ${entity?.toLowerCase() || 'item'} to get started.`}
+      {...(rest as Partial<DataTableProps<T>>)}
+    />
+  );
+}
+
+MasterDetail.displayName = 'MasterDetail';
+
+export default MasterDetail;

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

@@ -0,0 +1,81 @@
+/**
+ * ModalSlot Component
+ *
+ * Wraps modal slot content in a proper Modal component.
+ * Used by trait-driven pages to display modal UI from render_ui effects.
+ *
+ * Handles:
+ * - Auto-open when content is present
+ * - Dispatches CLOSE/CANCEL events when closed
+ * - Extracts title from Form components
+ */
+
+import React from 'react';
+import { Modal } from '../molecules/Modal';
+import { useEventBus } from '../../hooks/useEventBus';
+
+export interface ModalSlotProps {
+  /** Content to display in the modal */
+  children?: React.ReactNode;
+  /** Override modal title (extracted from children if not provided) */
+  title?: string;
+  /** Modal size */
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  /** Custom class name */
+  className?: string;
+}
+
+/**
+ * Extract title from Form or other components if they have a title prop
+ */
+function extractTitle(children: React.ReactNode): string | undefined {
+  if (!React.isValidElement(children)) return undefined;
+
+  const props = children.props as Record<string, unknown>;
+  if (typeof props.title === 'string') {
+    return props.title;
+  }
+
+  return undefined;
+}
+
+/**
+ * ModalSlot - Wrapper for modal slot content
+ *
+ * Automatically shows modal when children are present,
+ * and dispatches close events when modal is dismissed.
+ */
+export const ModalSlot: React.FC<ModalSlotProps> = ({
+  children,
+  title: overrideTitle,
+  size = 'md',
+  className,
+}) => {
+  const eventBus = useEventBus();
+  const isOpen = Boolean(children);
+
+  // Extract title from children if not explicitly provided
+  const title = overrideTitle || extractTitle(children);
+
+  const handleClose = () => {
+    // Dispatch close events - trait hooks listen for these
+    eventBus.emit('UI:CLOSE');
+    eventBus.emit('UI:CANCEL');
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title={title}
+      size={size}
+      className={className}
+    >
+      {children}
+    </Modal>
+  );
+};
+
+ModalSlot.displayName = 'ModalSlot';

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

@@ -0,0 +1,157 @@
+/**
+ * Navigation Organism Component
+ * 
+ * A navigation component with items, active indicators, icons, and badges.
+ * Uses Menu, ButtonGroup molecules and Button, Icon, Badge, Typography, Divider atoms.
+ */
+
+import React from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { Menu, MenuItem } from '../molecules/Menu';
+import { Button } from '../atoms/Button';
+import { Badge } from '../atoms/Badge';
+import { cn } from '../../lib/cn';
+
+export interface NavigationItem {
+  /**
+   * Item ID
+   */
+  id: string;
+  
+  /**
+   * Item label
+   */
+  label: string;
+  
+  /**
+   * Item icon
+   */
+  icon?: LucideIcon;
+  
+  /**
+   * Item badge
+   */
+  badge?: string | number;
+  
+  /**
+   * Item href
+   */
+  href?: string;
+  
+  /**
+   * Item click handler
+   */
+  onClick?: () => void;
+  
+  /**
+   * Is active
+   */
+  isActive?: boolean;
+  
+  /**
+   * Disable item
+   */
+  disabled?: boolean;
+  
+  /**
+   * Sub-menu items
+   */
+  subMenu?: NavigationItem[];
+}
+
+export interface NavigationProps {
+  /**
+   * Navigation items
+   */
+  items: NavigationItem[];
+  
+  /**
+   * Navigation orientation
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+export const Navigation: React.FC<NavigationProps> = ({
+  items,
+  orientation = 'horizontal',
+  className,
+}) => {
+  const renderNavigationItem = (item: NavigationItem, hasSubMenu: boolean) => {
+    if (hasSubMenu) {
+      const menuItems: MenuItem[] = item.subMenu!.map((subItem) => ({
+        id: subItem.id,
+        label: subItem.label,
+        icon: subItem.icon,
+        badge: subItem.badge,
+        disabled: subItem.disabled,
+        onClick: subItem.onClick,
+      }));
+
+      return (
+        <Menu
+          key={item.id}
+          trigger={
+            <Button
+              variant={item.isActive ? 'primary' : 'ghost'}
+              size="sm"
+              icon={item.icon}
+              disabled={item.disabled}
+            >
+              {item.label}
+              {item.badge !== undefined && (
+                <Badge variant="danger" size="sm">
+                  {item.badge}
+                </Badge>
+              )}
+            </Button>
+          }
+          items={menuItems}
+          position={orientation === 'horizontal' ? 'bottom-left' : 'bottom-right'}
+        />
+      );
+    }
+
+    return (
+      <Button
+        key={item.id}
+        variant={item.isActive ? 'primary' : 'ghost'}
+        size="sm"
+        icon={item.icon}
+        onClick={item.onClick}
+        disabled={item.disabled}
+        className="relative"
+      >
+        {item.label}
+        {item.badge !== undefined && (
+          <Badge variant="danger" size="sm" className="absolute -top-1 -right-1">
+            {item.badge}
+          </Badge>
+        )}
+      </Button>
+    );
+  };
+
+  return (
+    <nav
+      className={cn(
+        'flex',
+        orientation === 'horizontal' ? 'flex-row items-center gap-1' : 'flex-col gap-1',
+        className
+      )}
+      role="navigation"
+    >
+      {items.map((item) => {
+        const hasSubMenu = !!(item.subMenu && item.subMenu.length > 0);
+        return renderNavigationItem(item, hasSubMenu);
+      })}
+    </nav>
+  );
+};
+
+Navigation.displayName = 'Navigation';