@almadar/cli 1.0.6 → 1.0.8

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

@@ -1,85 +0,0 @@
-/**
- * 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

@@ -1,81 +0,0 @@
-/**
- * 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

@@ -1,157 +0,0 @@
-/**
- * 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';