@12-apps/ui 1.0.0

package/src/components/form/Command/Command.tsx

@@ -0,0 +1,545 @@
+import CloseIcon from '@mui/icons-material/Close';
+import SearchIcon from '@mui/icons-material/Search';
+import {
+  alpha,
+  Box,
+  Chip,
+  CircularProgress,
+  Dialog,
+  DialogContent,
+  Divider,
+  Fade,
+  Grow,
+  IconButton,
+  InputAdornment,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  TextField,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import React, { useCallback, useEffect, useMemo,useRef, useState } from 'react';
+
+import type {
+  CommandEmptyProps,
+  CommandGroupProps,
+  CommandInputProps,
+  CommandItem,
+  CommandItemProps,
+  CommandListProps,
+  CommandLoadingProps,
+  CommandProps,
+  CommandSeparatorProps,
+} from './Command.types';
+
+export const Command: React.FC<CommandProps> = ({
+  open = false,
+  onOpenChange,
+  items = [],
+  placeholder = 'Type a command or search...',
+  value = '',
+  onValueChange,
+  onSelect,
+  variant = 'default',
+  size = 'md',
+  color = 'primary',
+  glow = false,
+  pulse = false,
+  loading = false,
+  disabled = false,
+  className,
+  style,
+  maxHeight = 400,
+  emptyMessage = 'No results found',
+  showCategories = true,
+  showShortcuts = true,
+  showDescriptions = true,
+  autoFocus = true,
+  closeOnSelect = true,
+  customFilter,
+  onFocus,
+  onBlur,
+  onClick,
+  children,
+  dataTestId,
+}) => {
+  const theme = useTheme();
+  const [internalValue, setInternalValue] = useState(value);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setInternalValue(value);
+  }, [value]);
+
+  useEffect(() => {
+    if (open && autoFocus) {
+      window.setTimeout(() => inputRef.current?.focus(), 100);
+    }
+  }, [open, autoFocus]);
+
+  const handleValueChange = useCallback((newValue: string) => {
+    setInternalValue(newValue);
+    onValueChange?.(newValue);
+    setSelectedIndex(0);
+  }, [onValueChange]);
+
+  const filteredItems = useMemo(() => {
+    if (!internalValue) return items;
+    
+    if (customFilter) {
+      return items.filter(item => customFilter(item, internalValue));
+    }
+
+    const searchLower = internalValue.toLowerCase();
+    return items.filter(item => {
+      const searchTargets = [
+        item.label.toLowerCase(),
+        item.description?.toLowerCase(),
+        ...(item.keywords || []).map(k => k.toLowerCase()),
+      ];
+      return searchTargets.some(target => target?.includes(searchLower));
+    });
+  }, [items, internalValue, customFilter]);
+
+  const highlightedId = useMemo(() => {
+    const flatItems = filteredItems.filter(item => !item.disabled);
+    return flatItems[selectedIndex]?.id;
+  }, [filteredItems, selectedIndex]);
+
+
+  const handleSelect = useCallback((item: CommandItem) => {
+    if (item.disabled) return;
+    
+    item.action?.();
+    onSelect?.(item);
+    
+    if (closeOnSelect) {
+      onOpenChange?.(false);
+      setInternalValue('');
+    }
+  }, [onSelect, onOpenChange, closeOnSelect]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    const flatItems = filteredItems.filter(item => !item.disabled);
+    
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setSelectedIndex(prev => (prev + 1) % flatItems.length);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setSelectedIndex(prev => (prev - 1 + flatItems.length) % flatItems.length);
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (flatItems[selectedIndex]) {
+          handleSelect(flatItems[selectedIndex]);
+        }
+        break;
+      case 'Escape':
+        e.preventDefault();
+        onOpenChange?.(false);
+        break;
+    }
+  }, [filteredItems, selectedIndex, handleSelect, onOpenChange]);
+
+  const getVariantStyles = () => {
+    const baseStyles = {
+      transition: theme.transitions.create(['all'], {
+        duration: theme.transitions.duration.standard,
+      }),
+    };
+
+    const glowStyles = glow ? {
+      boxShadow: `0 0 20px ${alpha(theme.palette[color].main, 0.4)}`,
+    } : {};
+
+    const pulseStyles = pulse ? {
+      animation: 'pulse 2s infinite',
+      '@keyframes pulse': {
+        '0%': { boxShadow: `0 0 0 0 ${alpha(theme.palette[color].main, 0.4)}` },
+        '70%': { boxShadow: `0 0 0 10px ${alpha(theme.palette[color].main, 0)}` },
+        '100%': { boxShadow: `0 0 0 0 ${alpha(theme.palette[color].main, 0)}` },
+      },
+    } : {};
+
+    switch (variant) {
+      case 'glass':
+        return {
+          ...baseStyles,
+          ...glowStyles,
+          ...pulseStyles,
+          backgroundColor: alpha(theme.palette.background.paper, 0.1),
+          backdropFilter: 'blur(20px)',
+          border: `1px solid ${alpha(theme.palette[color].main, 0.2)}`,
+        };
+      
+      case 'gradient':
+        return {
+          ...baseStyles,
+          ...glowStyles,
+          ...pulseStyles,
+          background: `linear-gradient(135deg, ${theme.palette[color].main}, ${theme.palette[color].dark})`,
+          color: theme.palette[color].contrastText,
+        };
+      
+      case 'elevated':
+        return {
+          ...baseStyles,
+          ...glowStyles,
+          ...pulseStyles,
+          boxShadow: theme.shadows[8],
+        };
+      
+      case 'minimal':
+        return {
+          ...baseStyles,
+          ...glowStyles,
+          ...pulseStyles,
+          border: 'none',
+          boxShadow: 'none',
+        };
+      
+      default:
+        return {
+          ...baseStyles,
+          ...glowStyles,
+          ...pulseStyles,
+        };
+    }
+  };
+
+  const getSizeStyles = () => {
+    switch (size) {
+      case 'xs': return { width: 400, fontSize: '0.75rem' };
+      case 'sm': return { width: 450, fontSize: '0.875rem' };
+      case 'md': return { width: 500, fontSize: '1rem' };
+      case 'lg': return { width: 550, fontSize: '1.125rem' };
+      case 'xl': return { width: 600, fontSize: '1.25rem' };
+      default: return { width: 500, fontSize: '1rem' };
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={() => onOpenChange?.(false)}
+      maxWidth={false}
+      PaperProps={{
+        sx: {
+          ...getVariantStyles(),
+          ...getSizeStyles(),
+          overflow: 'hidden',
+          ...style,
+        },
+        className,
+        'data-testid': dataTestId,
+      }}
+      TransitionComponent={variant === 'glass' ? Fade : Grow}
+      onClick={onClick}
+    >
+      <Box sx={{ p: 0 }}>
+        <CommandInput
+          placeholder={placeholder}
+          value={internalValue}
+          onChange={handleValueChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          disabled={disabled}
+          autoFocus={autoFocus}
+          onKeyDown={handleKeyDown}
+          dataTestId={dataTestId ? `${dataTestId}-input` : undefined}
+        />
+
+        <Divider />
+
+        <DialogContent sx={{ p: 0, maxHeight, overflow: 'auto' }}>
+          {loading ? (
+            <CommandLoading dataTestId={dataTestId ? `${dataTestId}-loading` : undefined} />
+          ) : filteredItems.length === 0 ? (
+            <CommandEmpty message={emptyMessage} dataTestId={dataTestId ? `${dataTestId}-empty` : undefined} />
+          ) : (
+            <CommandList
+              items={filteredItems}
+              value={internalValue}
+              onSelect={handleSelect}
+              selectedId={highlightedId}
+              showCategories={showCategories}
+              showShortcuts={showShortcuts}
+              showDescriptions={showDescriptions}
+              dataTestId={dataTestId ? `${dataTestId}-list` : undefined}
+            />
+          )}
+          {children}
+        </DialogContent>
+      </Box>
+    </Dialog>
+  );
+};
+
+export const CommandInput: React.FC<CommandInputProps> = ({
+  placeholder,
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  disabled,
+  autoFocus,
+  onKeyDown,
+  className,
+  style,
+  dataTestId,
+}) => (
+    <TextField
+      fullWidth
+      value={value}
+      onChange={(e) => onChange?.(e.target.value)}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+      placeholder={placeholder}
+      disabled={disabled}
+      autoFocus={autoFocus}
+      variant="standard"
+      className={className}
+      inputProps={{
+        'data-testid': dataTestId,
+      }}
+      sx={{
+        p: 2,
+        '& .MuiInput-underline:before': { border: 'none' },
+        '& .MuiInput-underline:after': { border: 'none' },
+        ...style,
+      }}
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <SearchIcon />
+          </InputAdornment>
+        ),
+        endAdornment: value && (
+          <InputAdornment position="end">
+            <IconButton size="small" onClick={() => onChange?.('')}>
+              <CloseIcon fontSize="small" />
+            </IconButton>
+          </InputAdornment>
+        ),
+      }}
+    />
+  );
+
+export const CommandList: React.FC<CommandListProps> = ({
+  items = [],
+  onSelect,
+  selectedId,
+  emptyMessage,
+  showCategories,
+  showShortcuts,
+  showDescriptions,
+  loading,
+  className,
+  style,
+  dataTestId,
+}) => {
+  const groupedItems = useMemo(() => {
+    if (!showCategories) return { '': items };
+
+    const groups: Record<string, CommandItem[]> = {};
+    items.forEach(item => {
+      const category = item.category || '';
+      if (!groups[category]) groups[category] = [];
+      groups[category].push(item);
+    });
+    return groups;
+  }, [items, showCategories]);
+
+  if (loading) return <CommandLoading dataTestId={dataTestId ? `${dataTestId}-loading` : undefined} />;
+  if (items.length === 0) return <CommandEmpty message={emptyMessage} dataTestId={dataTestId ? `${dataTestId}-empty` : undefined} />;
+
+  return (
+    <List className={className} sx={style} data-testid={dataTestId}>
+      {Object.entries(groupedItems).map(([category, categoryItems]) => (
+        <CommandGroup
+          key={category}
+          heading={category}
+          items={categoryItems}
+          onSelect={onSelect}
+          selectedId={selectedId}
+          showShortcuts={showShortcuts}
+          showDescriptions={showDescriptions}
+        />
+      ))}
+    </List>
+  );
+};
+
+export const CommandGroup: React.FC<CommandGroupProps> = ({
+  heading,
+  items = [],
+  onSelect,
+  selectedId,
+  showShortcuts,
+  showDescriptions,
+  className,
+  style,
+  dataTestId,
+}) => {
+  const groupTestId = dataTestId || (heading ? `command-group-${heading}` : undefined);
+
+  return (
+    <Box className={className} sx={style} data-testid={groupTestId}>
+      {heading && (
+        <Typography
+          variant="caption"
+          sx={{
+            px: 2,
+            py: 1,
+            display: 'block',
+            color: 'text.secondary',
+            fontWeight: 600,
+            textTransform: 'uppercase',
+          }}
+        >
+          {heading}
+        </Typography>
+      )}
+      {items.map((item) => (
+        <CommandItemComponent
+          key={item.id}
+          {...item}
+          selected={selectedId === item.id}
+          onSelect={() => onSelect?.(item)}
+          showShortcut={showShortcuts}
+          showDescription={showDescriptions}
+          dataTestId={`command-item-${item.id}`}
+        />
+      ))}
+    </Box>
+  );
+};
+
+const CommandItemComponent: React.FC<CommandItemProps> = ({
+  label,
+  description,
+  icon,
+  shortcut,
+  disabled,
+  selected,
+  onSelect,
+  showShortcut,
+  showDescription,
+  className,
+  style,
+  dataTestId,
+}) => {
+  const theme = useTheme();
+
+  return (
+    <ListItemButton
+      onClick={onSelect}
+      disabled={disabled}
+      selected={selected}
+      className={className}
+      data-testid={dataTestId}
+      sx={{
+        py: 1.5,
+        px: 2,
+        '&:hover': {
+          backgroundColor: alpha(theme.palette.primary.main, 0.08),
+        },
+        '&.Mui-selected': {
+          backgroundColor: alpha(theme.palette.primary.main, 0.12),
+          '&:hover': {
+            backgroundColor: alpha(theme.palette.primary.main, 0.16),
+          },
+        },
+        ...style,
+      }}
+    >
+      {icon && (
+        <ListItemIcon sx={{ minWidth: 40 }}>
+          {icon}
+        </ListItemIcon>
+      )}
+
+      <ListItemText
+        primary={label}
+        secondary={showDescription && description}
+        primaryTypographyProps={{
+          fontSize: '0.875rem',
+          fontWeight: selected ? 600 : 400,
+        }}
+        secondaryTypographyProps={{
+          fontSize: '0.75rem',
+        }}
+      />
+
+      {showShortcut && shortcut && (
+        <Chip
+          label={shortcut}
+          size="small"
+          variant="outlined"
+          sx={{
+            height: 20,
+            fontSize: '0.7rem',
+            ml: 1,
+          }}
+        />
+      )}
+    </ListItemButton>
+  );
+};
+
+export const CommandEmpty: React.FC<CommandEmptyProps> = ({
+  message = 'No results found',
+  className,
+  style,
+  dataTestId,
+}) => (
+    <Box
+      className={className}
+      data-testid={dataTestId}
+      sx={{
+        p: 4,
+        textAlign: 'center',
+        color: 'text.secondary',
+        ...style,
+      }}
+    >
+      <Typography variant="body2">{message}</Typography>
+    </Box>
+  );
+
+export const CommandLoading: React.FC<CommandLoadingProps> = ({
+  message = 'Loading...',
+  className,
+  style,
+  dataTestId,
+}) => (
+    <Box
+      className={className}
+      data-testid={dataTestId}
+      sx={{
+        p: 4,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gap: 2,
+        ...style,
+      }}
+    >
+      <CircularProgress size={24} />
+      <Typography variant="body2" color="text.secondary">
+        {message}
+      </Typography>
+    </Box>
+  );
+
+export const CommandSeparator: React.FC<CommandSeparatorProps> = ({
+  className,
+  style,
+}) => <Divider className={className} sx={{ my: 1, ...style }} />;

package/src/components/form/Command/Command.types.ts

@@ -0,0 +1,116 @@
+import type { CSSProperties,ReactNode } from 'react';
+
+export interface CommandItem {
+  id: string;
+  label: string;
+  description?: string;
+  icon?: ReactNode;
+  shortcut?: string;
+  disabled?: boolean;
+  action?: () => void;
+  category?: string;
+  keywords?: string[];
+}
+
+export interface CommandProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  items?: CommandItem[];
+  placeholder?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  onSelect?: (item: CommandItem) => void;
+  variant?: 'default' | 'glass' | 'gradient' | 'minimal' | 'elevated';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
+  glow?: boolean;
+  pulse?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  maxHeight?: number | string;
+  emptyMessage?: string;
+  showCategories?: boolean;
+  showShortcuts?: boolean;
+  showDescriptions?: boolean;
+  autoFocus?: boolean;
+  closeOnSelect?: boolean;
+  searchKeys?: string[];
+  customFilter?: (item: CommandItem, search: string) => boolean;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onClick?: () => void;
+  children?: ReactNode;
+  dataTestId?: string;
+}
+
+export interface CommandInputProps {
+  placeholder?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  dataTestId?: string;
+}
+
+export interface CommandListProps {
+  items?: CommandItem[];
+  value?: string;
+  onSelect?: (item: CommandItem) => void;
+  selectedId?: string;
+  emptyMessage?: string;
+  showCategories?: boolean;
+  showShortcuts?: boolean;
+  showDescriptions?: boolean;
+  loading?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  dataTestId?: string;
+}
+
+export interface CommandGroupProps {
+  heading?: string;
+  items?: CommandItem[];
+  onSelect?: (item: CommandItem) => void;
+  selectedId?: string;
+  showShortcuts?: boolean;
+  showDescriptions?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  dataTestId?: string;
+}
+
+export interface CommandItemProps extends CommandItem {
+  selected?: boolean;
+  onSelect?: () => void;
+  showShortcut?: boolean;
+  showDescription?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  dataTestId?: string;
+}
+
+export interface CommandEmptyProps {
+  message?: string;
+  className?: string;
+  style?: CSSProperties;
+  dataTestId?: string;
+}
+
+export interface CommandLoadingProps {
+  message?: string;
+  className?: string;
+  style?: CSSProperties;
+  dataTestId?: string;
+}
+
+export interface CommandSeparatorProps {
+  className?: string;
+  style?: CSSProperties;
+}

package/src/components/form/Command/index.ts

@@ -0,0 +1,12 @@
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandList, CommandLoading, CommandSeparator } from './Command';
+export type {
+  CommandEmptyProps,
+  CommandGroupProps,
+  CommandInputProps,
+  CommandItem,
+  CommandItemProps,
+  CommandListProps,
+  CommandLoadingProps,
+  CommandProps,
+  CommandSeparatorProps,
+} from './Command.types';