@almadar/cli 1.0.6 → 1.0.8

package/shells/typescript-shell/packages/client/src/components/molecules/SearchInput.tsx

@@ -1,196 +0,0 @@
-/**
- * SearchInput Molecule Component
- *
- * A search input component with icon, clear button, and loading state.
- * Uses Input, Icon, Button, and Spinner atoms.
- *
- * Supports Query Singleton pattern via `query` prop for std/Search behavior.
- */
-
-import React, { useState, useCallback, useEffect } from 'react';
-import { Search } from 'lucide-react';
-import { Input } from '../atoms/Input';
-import { Spinner } from '../atoms/Spinner';
-import { cn } from '../../lib/cn';
-import { useEventBus } from '../../hooks/useEventBus';
-import { useQuerySingleton } from '../../hooks/useQuerySingleton';
-
-export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
-  /**
-   * Search value (controlled mode)
-   */
-  value?: string;
-
-  /**
-   * Callback when search value changes
-   */
-  onSearch?: (value: string) => void;
-
-  /**
-   * Debounce delay in milliseconds
-   * @default 300
-   */
-  debounceMs?: number;
-
-  /**
-   * Show loading state
-   * @default false
-   */
-  isLoading?: boolean;
-
-  /**
-   * Placeholder text
-   * @default 'Search...'
-   */
-  placeholder?: string;
-
-  /**
-   * Show clear button
-   * @default true
-   */
-  clearable?: boolean;
-
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
-
-  /**
-   * Event name to dispatch on search (schema metadata, wired by trait)
-   * This is metadata used by the trait generator, not by the component.
-   */
-  event?: string;
-
-  /**
-   * Entity type for context-aware search.
-   * When provided, search events include entity context.
-   */
-  entity?: string;
-
-  /**
-   * Query singleton binding for state management.
-   * When provided, syncs search state with the query singleton.
-   * Example: "@TaskQuery"
-   */
-  query?: string;
-}
-
-export const SearchInput: React.FC<SearchInputProps> = ({
-  value,
-  onSearch,
-  debounceMs = 300,
-  isLoading = false,
-  placeholder = 'Search...',
-  clearable = true,
-  className,
-  event,
-  entity,
-  query,
-  ...props
-}) => {
-  const eventBus = useEventBus();
-  const queryState = useQuerySingleton(query);
-
-  // Initialize from query singleton or controlled value
-  const initialValue = queryState?.search ?? value ?? '';
-  const [searchValue, setSearchValue] = useState(initialValue);
-  const [debounceTimer, setDebounceTimer] = useState<NodeJS.Timeout | null>(null);
-
-  // Sync with query singleton changes
-  useEffect(() => {
-    if (queryState && queryState.search !== searchValue) {
-      setSearchValue(queryState.search);
-    }
-  }, [queryState?.search]);
-
-  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value;
-    setSearchValue(newValue);
-
-    if (debounceTimer) {
-      clearTimeout(debounceTimer);
-    }
-
-    const timer = setTimeout(() => {
-      // Update query singleton if connected
-      if (queryState) {
-        queryState.setSearch(newValue);
-      }
-
-      // Call callback if provided
-      onSearch?.(newValue);
-
-      // Emit event if event name is provided (schema-driven)
-      if (event) {
-        eventBus.emit(`UI:${event}`, { searchTerm: newValue, entity });
-      }
-
-      // Emit generic UI:SEARCH for entity lists/tables/grids when entity, event, or query is configured
-      if (event || entity || query) {
-        eventBus.emit('UI:SEARCH', { searchTerm: newValue, entity, query });
-      }
-    }, debounceMs);
-
-    setDebounceTimer(timer);
-  }, [onSearch, debounceMs, debounceTimer, event, entity, query, eventBus, queryState]);
-
-  const handleClear = useCallback(() => {
-    setSearchValue('');
-
-    // Update query singleton if connected
-    if (queryState) {
-      queryState.setSearch('');
-    }
-
-    onSearch?.('');
-
-    // Emit clear search event
-    if (event || query) {
-      eventBus.emit('UI:CLEAR_SEARCH', { searchTerm: '', entity, query });
-    }
-
-    if (debounceTimer) {
-      clearTimeout(debounceTimer);
-    }
-  }, [onSearch, debounceTimer, event, query, entity, eventBus, queryState]);
-
-  // Sync with controlled value prop
-  useEffect(() => {
-    if (value !== undefined && value !== searchValue && !query) {
-      setSearchValue(value);
-    }
-  }, [value, query]);
-
-  useEffect(() => {
-    return () => {
-      if (debounceTimer) {
-        clearTimeout(debounceTimer);
-      }
-    };
-  }, [debounceTimer]);
-
-  return (
-    <div className={cn('relative', className)}>
-      <Input
-        type="search"
-        value={searchValue}
-        onChange={handleChange}
-        placeholder={placeholder}
-        icon={Search}
-        clearable={clearable && !isLoading}
-        onClear={handleClear}
-        disabled={isLoading}
-        className="pr-10"
-        {...props}
-      />
-      {isLoading && (
-        <div className="absolute right-3 top-1/2 -translate-y-1/2">
-          <Spinner size="sm" color="primary" />
-        </div>
-      )}
-    </div>
-  );
-};
-
-SearchInput.displayName = 'SearchInput';
-

package/shells/typescript-shell/packages/client/src/components/molecules/SidePanel.tsx

@@ -1,116 +0,0 @@
-/**
- * SidePanel Molecule Component
- *
- * A side panel that slides in from the right (or left) with header and content.
- * Uses Button, Typography atoms.
- */
-
-import React from "react";
-import { X } from "lucide-react";
-import { Button } from "../atoms/Button";
-import { Typography } from "../atoms/Typography";
-import { cn } from "../../lib/cn";
-
-export interface SidePanelProps {
-  /**
-   * Panel title
-   */
-  title: string;
-
-  /**
-   * Panel content
-   */
-  children: React.ReactNode;
-
-  /**
-   * Is panel open
-   */
-  isOpen: boolean;
-
-  /**
-   * On close handler
-   */
-  onClose: () => void;
-
-  /**
-   * Panel width
-   * @default 'w-96'
-   */
-  width?: string;
-
-  /**
-   * Panel position
-   * @default 'right'
-   */
-  position?: "left" | "right";
-
-  /**
-   * Show overlay on mobile
-   * @default true
-   */
-  showOverlay?: boolean;
-
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
-}
-
-export const SidePanel: React.FC<SidePanelProps> = ({
-  title,
-  children,
-  isOpen,
-  onClose,
-  width = "w-96",
-  position = "right",
-  showOverlay = true,
-  className,
-}) => {
-  if (!isOpen) return null;
-
-  return (
-    <>
-      {/* Overlay */}
-      {showOverlay && (
-        <div
-          className="fixed inset-0 bg-white/80 backdrop-blur-sm z-40 lg:hidden"
-          onClick={onClose}
-        />
-      )}
-
-      {/* Side Panel */}
-      <aside
-        className={cn(
-          "fixed top-16 lg:top-0 bottom-0 z-[60]",
-          "bg-[var(--color-card)]",
-          "border-l-2 border-[var(--color-border)]",
-          position === "left" && "border-l-0 border-r-2",
-          "flex flex-col",
-          "transition-transform duration-300 ease-in-out",
-          width,
-          position === "right" ? "right-0" : "left-0",
-          className,
-        )}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b-2 border-[var(--color-border)] sticky top-0 bg-[var(--color-card)] z-10">
-          <Typography variant="h6">{title}</Typography>
-          <Button
-            variant="ghost"
-            size="sm"
-            icon={X}
-            onClick={onClose}
-            aria-label="Close panel"
-          >
-            <span className="sr-only">Close</span>
-          </Button>
-        </div>
-
-        {/* Content */}
-        <div className="p-4 flex-1 overflow-y-auto">{children}</div>
-      </aside>
-    </>
-  );
-};
-
-SidePanel.displayName = "SidePanel";

package/shells/typescript-shell/packages/client/src/components/molecules/SimpleGrid.tsx

@@ -1,90 +0,0 @@
-/**
- * SimpleGrid Component
- * 
- * A simplified grid that automatically adjusts columns based on available space.
- * Perfect for card layouts and item collections.
- */
-import React from 'react';
-import { cn } from '../../lib/cn';
-
-export type SimpleGridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export interface SimpleGridProps {
-  /** Minimum width of each child (e.g., 200, "200px", "15rem") */
-  minChildWidth?: number | string;
-  /** Maximum number of columns */
-  maxCols?: 1 | 2 | 3 | 4 | 5 | 6;
-  /** Exact number of columns (disables auto-fit) */
-  cols?: 1 | 2 | 3 | 4 | 5 | 6;
-  /** Gap between items */
-  gap?: SimpleGridGap;
-  /** Custom class name */
-  className?: string;
-  /** Children elements */
-  children: React.ReactNode;
-}
-
-const gapStyles: Record<SimpleGridGap, string> = {
-  none: 'gap-0',
-  xs: 'gap-1',
-  sm: 'gap-2',
-  md: 'gap-4',
-  lg: 'gap-6',
-  xl: 'gap-8',
-};
-
-const colStyles = {
-  1: 'grid-cols-1',
-  2: 'grid-cols-2',
-  3: 'grid-cols-3',
-  4: 'grid-cols-4',
-  5: 'grid-cols-5',
-  6: 'grid-cols-6',
-};
-
-/**
- * SimpleGrid - Auto-responsive grid layout
- */
-export const SimpleGrid: React.FC<SimpleGridProps> = ({
-  minChildWidth = 250,
-  maxCols,
-  cols,
-  gap = 'md',
-  className,
-  children,
-}) => {
-  // If exact cols specified, use fixed grid
-  if (cols) {
-    return (
-      <div className={cn('grid', colStyles[cols], gapStyles[gap], className)}>
-        {children}
-      </div>
-    );
-  }
-
-  // Otherwise use auto-fit with minChildWidth
-  const minWidth = typeof minChildWidth === 'number' 
-    ? `${minChildWidth}px` 
-    : minChildWidth;
-
-  // Calculate max column constraint if provided
-  const templateColumns = maxCols
-    ? `repeat(auto-fit, minmax(min(${minWidth}, 100%), 1fr))`
-    : `repeat(auto-fit, minmax(${minWidth}, 1fr))`;
-
-  return (
-    <div
-      className={cn('grid', gapStyles[gap], className)}
-      style={{ 
-        gridTemplateColumns: templateColumns,
-        // Limit max columns if specified
-        ...(maxCols && { maxWidth: `calc(${maxCols} * (${minWidth} + var(--gap, 1rem)))` }),
-      }}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default SimpleGrid;
-

package/shells/typescript-shell/packages/client/src/components/molecules/Tabs.tsx

@@ -1,208 +0,0 @@
-/**
- * Tabs Molecule Component
- * 
- * A tabbed interface component with keyboard navigation and badge support.
- * Uses theme-aware CSS variables for styling.
- */
-
-import React, { useState, useRef } from 'react';
-import type { LucideIcon } from 'lucide-react';
-import { Icon } from '../atoms/Icon';
-import { Badge } from '../atoms/Badge';
-import { Typography } from '../atoms/Typography';
-import { cn } from '../../lib/cn';
-import { useEventBus } from '../../hooks/useEventBus';
-
-export interface TabItem {
-  /** Tab ID */
-  id: string;
-  /** Tab label */
-  label: string;
-  /** Tab content - optional for event-driven tabs */
-  content?: React.ReactNode;
-  /** Tab icon */
-  icon?: LucideIcon;
-  /** Tab badge */
-  badge?: string | number;
-  /** Disable tab */
-  disabled?: boolean;
-  /** Event to emit when tab is clicked (for trait state machine integration) */
-  event?: string;
-  /** Whether this tab is currently active (for controlled tabs) */
-  active?: boolean;
-}
-
-export interface TabsProps {
-  /** Tab items */
-  items?: TabItem[];
-  /** Tab items (alias for items - used by generated code) */
-  tabs?: TabItem[];
-  /** Default active tab ID */
-  defaultActiveTab?: string;
-  /** Controlled active tab ID */
-  activeTab?: string;
-  /** Callback when tab changes */
-  onTabChange?: (tabId: string) => void;
-  /** Tab variant */
-  variant?: 'default' | 'pills' | 'underline';
-  /** Tab orientation */
-  orientation?: 'horizontal' | 'vertical';
-  /** Additional CSS classes */
-  className?: string;
-}
-
-export const Tabs: React.FC<TabsProps> = ({
-  items,
-  tabs,
-  defaultActiveTab,
-  activeTab: controlledActiveTab,
-  onTabChange,
-  variant = 'default',
-  orientation = 'horizontal',
-  className,
-}) => {
-  // Guard against undefined or empty items - support both 'items' and 'tabs' props
-  const safeItems = items ?? tabs ?? [];
-  const eventBus = useEventBus();
-
-  // Find initially active tab (check for active: true in items)
-  const initialActive = safeItems.find(item => item.active)?.id;
-
-  const [internalActiveTab, setInternalActiveTab] = useState(
-    defaultActiveTab || initialActive || safeItems[0]?.id || ''
-  );
-  const activeTab = controlledActiveTab !== undefined ? controlledActiveTab : internalActiveTab;
-  const tabRefs = useRef<Record<string, HTMLButtonElement | null>>({});
-
-  const handleTabChange = (tabId: string, tabEvent?: string) => {
-    if (controlledActiveTab === undefined) {
-      setInternalActiveTab(tabId);
-    }
-    onTabChange?.(tabId);
-
-    // Emit event if tab has event configured (for trait state machine integration)
-    if (tabEvent) {
-      eventBus.emit(`UI:${tabEvent}`, { tabId });
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent, index: number) => {
-    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
-      e.preventDefault();
-      const direction = e.key === 'ArrowLeft' ? -1 : 1;
-      const nextIndex = (index + direction + safeItems.length) % safeItems.length;
-      const nextTab = safeItems[nextIndex];
-      if (nextTab && !nextTab.disabled) {
-        handleTabChange(nextTab.id);
-        tabRefs.current[nextTab.id]?.focus();
-      }
-    } else if (e.key === 'Home' || e.key === 'End') {
-      e.preventDefault();
-      const targetIndex = e.key === 'Home' ? 0 : safeItems.length - 1;
-      const targetTab = safeItems[targetIndex];
-      if (targetTab && !targetTab.disabled) {
-        handleTabChange(targetTab.id);
-        tabRefs.current[targetTab.id]?.focus();
-      }
-    }
-  };
-
-  const activeTabContent = safeItems.find(item => item.id === activeTab)?.content;
-
-  // Graceful handling for empty tabs
-  if (safeItems.length === 0) {
-    return (
-      <div className={cn('w-full', className)}>
-        <div className="text-[var(--color-muted-foreground)] text-sm py-4">
-          No tabs available
-        </div>
-      </div>
-    );
-  }
-
-  // Theme-aware variant styles
-  const variantClasses = {
-    default: [
-      'border-b-[length:var(--border-width)] border-transparent',
-      'hover:border-[var(--color-muted-foreground)]',
-      'data-[active=true]:border-[var(--color-primary)]',
-    ].join(' '),
-    pills: [
-      'rounded-[var(--radius-sm)]',
-      'data-[active=true]:bg-[var(--color-primary)]',
-      'data-[active=true]:text-[var(--color-primary-foreground)]',
-    ].join(' '),
-    underline: [
-      'border-b-[length:var(--border-width)] border-transparent',
-      'data-[active=true]:border-[var(--color-primary)]',
-    ].join(' '),
-  };
-
-  return (
-    <div className={cn('w-full', className)}>
-      <div
-        role="tablist"
-        className={cn(
-          'flex',
-          orientation === 'horizontal'
-            ? 'flex-row border-b-[length:var(--border-width)] border-[var(--color-border)]'
-            : 'flex-col border-r-[length:var(--border-width)] border-[var(--color-border)]',
-          variant === 'pills' && 'gap-1 p-1 bg-[var(--color-muted)] border-0 rounded-[var(--radius-md)]',
-          variant === 'underline' && orientation === 'vertical' && 'border-b-0'
-        )}
-      >
-        {safeItems.map((item, index) => {
-          const isActive = item.id === activeTab;
-          const isDisabled = item.disabled;
-
-          return (
-            <button
-              key={item.id}
-              ref={(el) => {
-                tabRefs.current[item.id] = el;
-              }}
-              role="tab"
-              aria-selected={isActive}
-              aria-controls={`tabpanel-${item.id}`}
-              aria-disabled={isDisabled}
-              disabled={isDisabled}
-              onClick={() => !isDisabled && handleTabChange(item.id, item.event)}
-              onKeyDown={(e) => handleKeyDown(e, index)}
-              data-active={isActive}
-              className={cn(
-                'flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all',
-                'focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-2',
-                'disabled:opacity-50 disabled:cursor-not-allowed',
-                variantClasses[variant],
-                isActive
-                  ? 'text-[var(--color-foreground)] font-bold'
-                  : 'text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]'
-              )}
-            >
-              {item.icon && <Icon icon={item.icon} size="sm" />}
-              <Typography variant="small" weight={isActive ? 'semibold' : 'normal'}>
-                {item.label}
-              </Typography>
-              {item.badge !== undefined && (
-                <Badge variant="default" size="sm">
-                  {item.badge}
-                </Badge>
-              )}
-            </button>
-          );
-        })}
-      </div>
-
-      <div
-        role="tabpanel"
-        id={`tabpanel-${activeTab}`}
-        aria-labelledby={`tab-${activeTab}`}
-        className="mt-4"
-      >
-        {activeTabContent}
-      </div>
-    </div>
-  );
-};
-
-Tabs.displayName = 'Tabs';