@anymux/ui-kit 0.1.0

package/src/file-browser/types/ProviderTypes.ts

@@ -0,0 +1,155 @@
+import { FileBrowserItem, FileBrowserItemDetails, IconDefinition, PreviewData, ItemChange } from './FileBrowserTypes';
+import { ViewModeDefinition } from './ViewModeTypes';
+
+export interface IFileBrowserProvider {
+  // Identification
+  readonly id: string;
+  readonly name: string;
+  readonly version: string;
+
+  // Data operations
+  loadItems(path: string): Promise<FileBrowserItem[]>;
+  loadItemDetails(item: FileBrowserItem): Promise<FileBrowserItemDetails>;
+  refreshItems(path: string): Promise<FileBrowserItem[]>;
+  
+  // Path operations
+  normalizePath(path: string): string;
+  getParentPath(path: string): string | null;
+  resolvePath(basePath: string, relativePath: string): string;
+  
+  // Capabilities
+  getSupportedViewModes(): ViewModeDefinition[];
+  getToolbarActions(): ToolbarAction[];
+  getContextMenuActions(item: FileBrowserItem): ContextAction[];
+  getDefaultViewMode(): string;
+  
+  // Operations
+  canPerformAction(action: string, items: FileBrowserItem[]): boolean;
+  performAction(action: string, items: FileBrowserItem[]): Promise<ActionResult>;
+  
+  // Customization
+  getItemIcon(item: FileBrowserItem): IconDefinition;
+  getItemPreview(item: FileBrowserItem): Promise<PreviewData | null>;
+  getItemDisplayName(item: FileBrowserItem): string;
+  getItemTooltip(item: FileBrowserItem): string;
+  
+  // Filtering and sorting
+  getAvailableFilters(): FilterDefinition[];
+  getAvailableSortFields(): SortFieldDefinition[];
+  applyFilter(items: FileBrowserItem[], criteria: any): FileBrowserItem[];
+  applySort(items: FileBrowserItem[], field: string, direction: 'asc' | 'desc'): FileBrowserItem[];
+  
+  // Events
+  onItemsChanged(callback: (changes: ItemChange[]) => void): () => void;
+  onError(callback: (error: Error) => void): () => void;
+  
+  // Lifecycle
+  initialize?(): Promise<void>;
+  dispose?(): void;
+}
+
+export interface ToolbarAction {
+  id: string;
+  label: string;
+  icon: IconDefinition;
+  tooltip?: string;
+  category?: string;
+  priority?: number;
+  shortcut?: string;
+  
+  // Visibility and state
+  isVisible?: (context: ActionContext) => boolean;
+  isEnabled?: (context: ActionContext) => boolean;
+  isActive?: (context: ActionContext) => boolean;
+  
+  // Action handler
+  action: (context: ActionContext) => Promise<void> | void;
+  
+  // UI customization
+  variant?: 'default' | 'primary' | 'secondary' | 'destructive';
+  size?: 'sm' | 'md' | 'lg';
+  showLabel?: boolean;
+}
+
+export interface ContextAction {
+  id: string;
+  label: string;
+  icon?: IconDefinition;
+  shortcut?: string;
+  
+  // Grouping
+  group?: string;
+  separator?: boolean;
+  
+  // State
+  isEnabled?: (context: ActionContext) => boolean;
+  isVisible?: (context: ActionContext) => boolean;
+  
+  // Action handler
+  action: (context: ActionContext) => Promise<void> | void;
+  
+  // Submenu support
+  submenu?: ContextAction[];
+}
+
+export interface ActionContext {
+  selectedItems: FileBrowserItem[];
+  currentPath: string;
+  provider: IFileBrowserProvider;
+  viewMode: string;
+  allItems: FileBrowserItem[];
+}
+
+export interface ActionResult {
+  success: boolean;
+  message?: string;
+  data?: any;
+  error?: Error;
+}
+
+export interface FilterDefinition {
+  id: string;
+  label: string;
+  type: 'text' | 'select' | 'multiselect' | 'date' | 'range' | 'boolean';
+  defaultValue?: any;
+  options?: { value: any; label: string }[];
+  placeholder?: string;
+}
+
+export interface SortFieldDefinition {
+  id: string;
+  label: string;
+  defaultDirection?: 'asc' | 'desc';
+  customSort?: (a: FileBrowserItem, b: FileBrowserItem, direction: 'asc' | 'desc') => number;
+}
+
+export interface ProviderCapabilities {
+  canCreate: boolean;
+  canRead: boolean;
+  canUpdate: boolean;
+  canDelete: boolean;
+  canMove: boolean;
+  canCopy: boolean;
+  canRename: boolean;
+  canUpload: boolean;
+  canDownload: boolean;
+  canPreview: boolean;
+  canSearch: boolean;
+  canFilter: boolean;
+  canSort: boolean;
+  supportsNavigation: boolean;
+  supportsSelection: boolean;
+  supportsHierarchy: boolean;
+  maxFileSize?: number;
+  supportedFileTypes?: string[];
+}
+
+export interface ProviderConfiguration {
+  enableLogging?: boolean;
+  cacheSize?: number;
+  cacheTTL?: number;
+  batchSize?: number;
+  timeout?: number;
+  retryAttempts?: number;
+  customOptions?: Record<string, any>;
+} 

package/src/file-browser/types/UITypes.ts

@@ -0,0 +1,235 @@
+import React from 'react';
+import { FileBrowserItem, IconDefinition } from './FileBrowserTypes';
+
+export interface UIComponentProps {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+export interface LoadingSpinnerProps extends UIComponentProps {
+  size?: 'sm' | 'md' | 'lg';
+  message?: string;
+  overlay?: boolean;
+}
+
+export interface ErrorBoundaryProps extends UIComponentProps {
+  fallback?: React.ComponentType<ErrorFallbackProps>;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+export interface ErrorFallbackProps {
+  error: Error;
+  resetError: () => void;
+}
+
+export interface FileIconProps extends UIComponentProps {
+  item: FileBrowserItem;
+  size?: number | 'sm' | 'md' | 'lg';
+  variant?: 'outline' | 'filled';
+}
+
+export interface VirtualizedListProps extends UIComponentProps {
+  items: any[];
+  itemHeight: number | ((index: number) => number);
+  renderItem: (props: VirtualizedItemProps) => React.ReactNode;
+  overscan?: number;
+  scrollToIndex?: number;
+  onScroll?: (scrollTop: number) => void;
+}
+
+export interface VirtualizedItemProps {
+  index: number;
+  item: any;
+  style: React.CSSProperties;
+  isVisible: boolean;
+}
+
+export interface BreadcrumbProps extends UIComponentProps {
+  path: string;
+  onNavigate: (path: string) => void;
+  maxItems?: number;
+  separator?: React.ReactNode;
+}
+
+export interface BreadcrumbItem {
+  label: string;
+  path: string;
+  isClickable: boolean;
+}
+
+export interface PathInputProps extends UIComponentProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: (value: string) => void;
+  placeholder?: string;
+  autoComplete?: string[];
+}
+
+export interface NavigationButtonsProps extends UIComponentProps {
+  canGoBack: boolean;
+  canGoForward: boolean;
+  canGoUp: boolean;
+  onGoBack: () => void;
+  onGoForward: () => void;
+  onGoUp: () => void;
+}
+
+export interface DynamicToolbarProps extends UIComponentProps {
+  actions: ToolbarActionConfig[];
+  context: ToolbarContext;
+  variant?: 'horizontal' | 'vertical';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export interface ToolbarActionConfig {
+  id: string;
+  label: string;
+  icon: IconDefinition;
+  tooltip?: string;
+  shortcut?: string;
+  variant?: 'default' | 'primary' | 'secondary' | 'destructive';
+  size?: 'sm' | 'md' | 'lg';
+  showLabel?: boolean;
+  isVisible?: boolean;
+  isEnabled?: boolean;
+  isActive?: boolean;
+  action: () => void;
+}
+
+export interface ToolbarContext {
+  selectedItems: FileBrowserItem[];
+  currentPath: string;
+  viewMode: string;
+  hasSelection: boolean;
+}
+
+export interface ViewModeToggleProps extends UIComponentProps {
+  viewModes: ViewModeOption[];
+  currentViewMode: string;
+  onViewModeChange: (viewMode: string) => void;
+  variant?: 'tabs' | 'dropdown' | 'buttons';
+}
+
+export interface ViewModeOption {
+  id: string;
+  name: string;
+  icon: IconDefinition;
+  tooltip?: string;
+  isEnabled?: boolean;
+}
+
+export interface FilterControlsProps extends UIComponentProps {
+  filters: FilterConfig[];
+  values: Record<string, any>;
+  onChange: (filterId: string, value: any) => void;
+  onReset: () => void;
+  variant?: 'inline' | 'dropdown' | 'sidebar';
+}
+
+export interface FilterConfig {
+  id: string;
+  label: string;
+  type: 'text' | 'select' | 'multiselect' | 'date' | 'range' | 'boolean';
+  placeholder?: string;
+  options?: FilterOption[];
+  defaultValue?: any;
+  isVisible?: boolean;
+  isEnabled?: boolean;
+}
+
+export interface FilterOption {
+  value: any;
+  label: string;
+  description?: string;
+  icon?: IconDefinition;
+}
+
+export interface ActionButtonsProps extends UIComponentProps {
+  actions: ActionButtonConfig[];
+  variant?: 'toolbar' | 'context' | 'floating';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export interface ActionButtonConfig {
+  id: string;
+  label: string;
+  icon?: IconDefinition;
+  tooltip?: string;
+  variant?: 'default' | 'primary' | 'secondary' | 'destructive';
+  isVisible?: boolean;
+  isEnabled?: boolean;
+  action: () => void;
+}
+
+export interface ContextMenuProps extends UIComponentProps {
+  isOpen: boolean;
+  position: { x: number; y: number };
+  items: ContextMenuItem[];
+  onClose: () => void;
+}
+
+export interface ContextMenuItem {
+  id: string;
+  label: string;
+  icon?: IconDefinition;
+  shortcut?: string;
+  type?: 'item' | 'separator' | 'submenu';
+  isEnabled?: boolean;
+  isVisible?: boolean;
+  action?: () => void;
+  submenu?: ContextMenuItem[];
+}
+
+export interface TooltipProps extends UIComponentProps {
+  content: React.ReactNode;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  delay?: number;
+  disabled?: boolean;
+}
+
+export interface DropZoneProps extends UIComponentProps {
+  onDrop: (files: FileList) => void;
+  onDragEnter?: () => void;
+  onDragLeave?: () => void;
+  accept?: string[];
+  multiple?: boolean;
+  disabled?: boolean;
+  overlay?: boolean;
+}
+
+export interface SelectionIndicatorProps extends UIComponentProps {
+  isSelected: boolean;
+  isFocused: boolean;
+  isMultiSelect: boolean;
+  onClick?: () => void;
+}
+
+export interface ResizeHandleProps extends UIComponentProps {
+  direction: 'horizontal' | 'vertical';
+  onResize: (delta: number) => void;
+  onResizeStart?: () => void;
+  onResizeEnd?: () => void;
+}
+
+export interface KeyboardNavigationProps {
+  items: any[];
+  selectedIndex: number;
+  onSelectionChange: (index: number) => void;
+  onActivate: (index: number) => void;
+  disabled?: boolean;
+  multiSelect?: boolean;
+}
+
+export type ThemeVariant = 'light' | 'dark' | 'auto';
+export type SizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ColorVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+
+export interface ThemeConfig {
+  variant: ThemeVariant;
+  colors: Record<string, string>;
+  spacing: Record<string, number>;
+  borderRadius: Record<string, number>;
+  fontSize: Record<string, number>;
+  shadows: Record<string, string>;
+} 

package/src/file-browser/types/ViewModeTypes.ts

@@ -0,0 +1,150 @@
+import React from 'react';
+import { IconDefinition } from './FileBrowserTypes';
+
+export interface ViewModeDefinition {
+  id: string;
+  name: string;
+  description?: string;
+  icon: IconDefinition;
+  component: React.ComponentType<ViewModeComponentProps>;
+  capabilities: ViewModeCapabilities;
+  settings?: ViewModeSettings;
+  isDefault?: boolean;
+  priority?: number;
+}
+
+export interface ViewModeComponentProps {
+  model: any; // Will be typed more specifically in implementation
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export interface ViewModeCapabilities {
+  supportsSelection: boolean;
+  supportsMultiSelection: boolean;
+  supportsNavigation: boolean;
+  supportsSorting: boolean;
+  supportsFiltering: boolean;
+  supportsDragDrop: boolean;
+  supportsKeyboardNavigation: boolean;
+  supportsVirtualization: boolean;
+  supportsGrouping?: boolean;
+  supportsInlinePreview?: boolean;
+  supportsCustomColumns?: boolean;
+  supportsZoom?: boolean;
+}
+
+export interface ViewModeSettings {
+  defaultSortField?: string;
+  defaultSortDirection?: 'asc' | 'desc';
+  itemSize?: {
+    width?: number;
+    height?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+  };
+  layout?: {
+    padding?: number;
+    gap?: number;
+    columns?: number | 'auto';
+    rows?: number | 'auto';
+  };
+  display?: {
+    showIcons?: boolean;
+    showLabels?: boolean;
+    showDetails?: boolean;
+    showPreview?: boolean;
+    iconSize?: 'small' | 'medium' | 'large';
+    labelPosition?: 'bottom' | 'right' | 'overlay';
+  };
+  interaction?: {
+    singleClickOpen?: boolean;
+    doubleClickOpen?: boolean;
+    hoverPreview?: boolean;
+    contextMenu?: boolean;
+  };
+  performance?: {
+    virtualization?: boolean;
+    bufferSize?: number;
+    preloadCount?: number;
+    debounceMs?: number;
+  };
+  customSettings?: Record<string, any>;
+}
+
+export interface ViewModeState {
+  isActive: boolean;
+  isInitialized: boolean;
+  settings: ViewModeSettings;
+  lastUsed?: Date;
+  userPreferences?: Record<string, any>;
+}
+
+export interface TreeViewSettings extends ViewModeSettings {
+  indentSize?: number;
+  showConnectors?: boolean;
+  expandOnSingleClick?: boolean;
+  collapseOnSecondClick?: boolean;
+  rememberExpansion?: boolean;
+  autoExpand?: boolean;
+  maxDepth?: number;
+}
+
+export interface ListViewSettings extends ViewModeSettings {
+  columns?: ColumnDefinition[];
+  headerHeight?: number;
+  rowHeight?: number;
+  alternatingRows?: boolean;
+  gridLines?: boolean;
+  resizableColumns?: boolean;
+  sortableColumns?: boolean;
+}
+
+export interface ThumbnailViewSettings extends ViewModeSettings {
+  thumbnailSize?: number;
+  aspectRatio?: number;
+  showFilenames?: boolean;
+  showFileSize?: boolean;
+  showDate?: boolean;
+  gridSpacing?: number;
+  loadThumbnails?: boolean;
+  thumbnailQuality?: 'low' | 'medium' | 'high';
+}
+
+export interface TreemapViewSettings extends ViewModeSettings {
+  algorithm?: 'squarified' | 'slice-dice' | 'strip';
+  colorScheme?: 'size' | 'type' | 'date' | 'custom';
+  paddingInner?: number;
+  paddingOuter?: number;
+  showLabels?: boolean;
+  labelThreshold?: number;
+  animation?: boolean;
+  zoomable?: boolean;
+}
+
+export interface ColumnDefinition {
+  id: string;
+  label: string;
+  width?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  sortable?: boolean;
+  resizable?: boolean;
+  visible?: boolean;
+  align?: 'left' | 'center' | 'right';
+  format?: (value: any) => string;
+  renderer?: React.ComponentType<{ value: any; item: any }>;
+  priority?: number;
+}
+
+export type ViewModeType = 'tree' | 'list' | 'thumbnail' | 'treemap' | 'custom';
+
+export interface ViewModeRegistry {
+  registerViewMode(definition: ViewModeDefinition): void;
+  unregisterViewMode(id: string): void;
+  getViewMode(id: string): ViewModeDefinition | undefined;
+  getAllViewModes(): ViewModeDefinition[];
+  getViewModesByCapability(capability: keyof ViewModeCapabilities): ViewModeDefinition[];
+}