@anymux/ui-kit 0.1.0

package/src/list/components/shared/ListLoader.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import type { ListViewType } from '../../providers/ListItemsProvider';
+
+// AICODE-NOTE: Skeleton loader component for list items during loading
+export interface ListLoaderProps {
+  viewType: ListViewType;
+  itemCount?: number;
+  itemWidth?: number;
+  itemHeight?: number;
+  className?: string;
+}
+
+const ListLoaderComponent: React.FC<ListLoaderProps> = ({
+  viewType,
+  itemCount = 12,
+  itemWidth = 200,
+  itemHeight = 140,
+  className = ''
+}) => {
+  // AICODE-NOTE: Generate skeleton items based on view type
+  const skeletonItems = Array.from({ length: itemCount }, (_, index) => (
+    <SkeletonItem
+      key={index}
+      viewType={viewType}
+      itemWidth={itemWidth}
+      itemHeight={itemHeight}
+    />
+  ));
+
+  // AICODE-NOTE: Container styles based on view type
+  const getContainerClasses = () => {
+    switch (viewType.id) {
+      case 'grid':
+      case 'masonry-horizontal':
+      case 'masonry-vertical':
+        return `grid gap-3 p-4 ${className}`;
+      case 'details':
+        return `divide-y ${className}`;
+      default:
+        return `divide-y ${className}`;
+    }
+  };
+
+  const getContainerStyle = () => {
+    if (viewType.id === 'grid' || viewType.id.includes('masonry')) {
+      return {
+        gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))'
+      };
+    }
+    return {};
+  };
+
+  return (
+    <div className={getContainerClasses()} style={getContainerStyle()}>
+      {skeletonItems}
+    </div>
+  );
+};
+
+// AICODE-NOTE: Individual skeleton item component
+interface SkeletonItemProps {
+  viewType: ListViewType;
+  itemWidth: number;
+  itemHeight: number;
+}
+
+const SkeletonItem: React.FC<SkeletonItemProps> = ({
+  viewType,
+  itemWidth,
+  itemHeight
+}) => {
+  // AICODE-NOTE: Base skeleton classes with animation
+  const baseSkeletonClasses = "animate-pulse bg-muted rounded";
+  
+  // AICODE-NOTE: Grid/Masonry skeleton layout
+  if (viewType.id === 'grid' || viewType.id.includes('masonry')) {
+    return (
+      <div 
+        className="flex flex-col items-center justify-start p-3 rounded-lg border border-transparent min-h-[140px]"
+        style={{ width: itemWidth }}
+      >
+        {/* AICODE-NOTE: Image/icon skeleton */}
+        <div 
+          className={`${baseSkeletonClasses} mb-2 flex-1`}
+          style={{ 
+            width: itemWidth - 24, 
+            height: itemHeight - 60,
+            minHeight: '80px'
+          }}
+        />
+        
+        {/* AICODE-NOTE: Title skeleton */}
+        <div className="w-full space-y-1">
+          <div className={`${baseSkeletonClasses} h-4 w-3/4 mx-auto`} />
+          <div className={`${baseSkeletonClasses} h-3 w-1/2 mx-auto`} />
+        </div>
+        
+        {/* AICODE-NOTE: Metadata skeleton */}
+        <div className={`${baseSkeletonClasses} h-3 w-16 mt-1`} />
+      </div>
+    );
+  }
+
+  // AICODE-NOTE: Details view skeleton layout
+  if (viewType.id === 'details') {
+    return (
+      <div className="flex items-center gap-4 p-2">
+        {/* AICODE-NOTE: Icon skeleton */}
+        <div className={`${baseSkeletonClasses} w-4 h-4 flex-shrink-0`} />
+        
+        {/* AICODE-NOTE: Name column skeleton */}
+        <div className={`${baseSkeletonClasses} h-4 flex-1`} />
+        
+        {/* AICODE-NOTE: Type column skeleton */}
+        <div className={`${baseSkeletonClasses} h-4 w-24`} />
+        
+        {/* AICODE-NOTE: Modified column skeleton */}
+        <div className={`${baseSkeletonClasses} h-4 w-32`} />
+        
+        {/* AICODE-NOTE: Size column skeleton */}
+        <div className={`${baseSkeletonClasses} h-4 w-20`} />
+      </div>
+    );
+  }
+
+  // AICODE-NOTE: Default list view skeleton layout
+  return (
+    <div className="flex items-center gap-3 p-2">
+      {/* AICODE-NOTE: Icon skeleton */}
+      <div className={`${baseSkeletonClasses} w-4 h-4 flex-shrink-0`} />
+      
+      {/* AICODE-NOTE: Content skeleton */}
+      <div className="flex-1 min-w-0 space-y-1">
+        <div className={`${baseSkeletonClasses} h-4 w-3/4`} />
+        <div className={`${baseSkeletonClasses} h-3 w-1/2`} />
+      </div>
+      
+      {/* AICODE-NOTE: Metadata skeleton */}
+      <div className={`${baseSkeletonClasses} h-3 w-16 flex-shrink-0`} />
+    </div>
+  );
+};
+
+// AICODE-NOTE: Export memoized component for performance
+export const ListLoader = observer(ListLoaderComponent); 

package/src/list/components/shared/LoadingIndicator.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { LoadingSpinner } from '@anymux/ui/components/loading-spinner';
+
+const SIZE_MAP = { small: 'sm', medium: 'md', large: 'lg' } as const;
+const TEXT_SIZE_MAP = { small: 'text-xs', medium: 'text-sm', large: 'text-base' } as const;
+const SPACING_MAP = { small: 'space-y-1', medium: 'space-y-2', large: 'space-y-3' } as const;
+
+export interface LoadingIndicatorProps {
+  size?: 'small' | 'medium' | 'large';
+  message?: string;
+  className?: string;
+  showSpinner?: boolean;
+}
+
+const LoadingIndicatorComponent: React.FC<LoadingIndicatorProps> = ({
+  size = 'medium',
+  message = 'Loading...',
+  className = '',
+  showSpinner = true,
+}) => {
+  return (
+    <div className={`flex items-center justify-center ${className}`}>
+      <div className={`text-center ${SPACING_MAP[size]}`}>
+        {showSpinner && (
+          <div className="flex justify-center">
+            <LoadingSpinner size={SIZE_MAP[size]} label={message || 'Loading...'} />
+          </div>
+        )}
+        {message && (
+          <p className={`text-muted-foreground ${TEXT_SIZE_MAP[size]}`}>{message}</p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export interface InlineLoadingProps {
+  className?: string;
+}
+
+const InlineLoadingComponent: React.FC<InlineLoadingProps> = ({ className = '' }) => {
+  return (
+    <div className={`flex items-center gap-2 ${className}`}>
+      <LoadingSpinner size="sm" label="Loading..." className="size-3" />
+      <span className="text-xs text-muted-foreground">Loading...</span>
+    </div>
+  );
+};
+
+export interface LoadingProgressProps {
+  progress: number;
+  message?: string;
+  className?: string;
+}
+
+const LoadingProgressComponent: React.FC<LoadingProgressProps> = ({
+  progress,
+  message,
+  className = '',
+}) => {
+  return (
+    <div className={`space-y-2 ${className}`}>
+      {message && (
+        <p className="text-sm text-muted-foreground text-center">{message}</p>
+      )}
+      <div className="w-full bg-muted rounded-full h-2">
+        <div
+          className="bg-primary h-2 rounded-full transition-all duration-300 ease-out"
+          style={{ width: `${Math.max(0, Math.min(100, progress))}%` }}
+        />
+      </div>
+      <p className="text-xs text-muted-foreground text-center">{Math.round(progress)}%</p>
+    </div>
+  );
+};
+
+export const LoadingIndicator = observer(LoadingIndicatorComponent);
+export const InlineLoading = observer(InlineLoadingComponent);
+export const LoadingProgress = observer(LoadingProgressComponent);

package/src/list/index.ts

@@ -0,0 +1,92 @@
+// Core components
+export { ListItem } from './components/ListItem';
+export { ListItems } from './components/ListItems';
+export { ListContextMenu } from './components/ListContextMenu';
+export { ViewTypeSelector } from './components/ViewTypeSelector';
+export { SearchFilter } from './components/SearchFilter';
+export { VirtualizedList } from './components/VirtualizedList';
+export { VirtualizedGrid } from './components/VirtualizedGrid';
+export { MasonryView } from './components/MasonryView';
+export { ViewSizeControls } from './components/ViewSizeControls';
+export { TreemapView } from './components/TreemapView';
+export { CalculatedGridView } from './components/CalculatedGridView';
+
+// Shared components
+export { ListLoader } from './components/shared/ListLoader';
+export { LoadingIndicator, InlineLoading, LoadingProgress } from './components/shared/LoadingIndicator';
+export { ListErrorBoundary } from './components/shared/ErrorBoundary';
+export { ErrorDisplay, NetworkError, LoadError } from './components/shared/ErrorDisplay';
+export { EmptyState, NoItems, NoSearchResults, NoSelection } from './components/shared/EmptyState';
+
+// Models
+export { ListItemsModel } from './models/ListItemsModel';
+export { TreemapModel } from './models/TreemapModel';
+
+// Providers
+export type { ListItemsProvider, ListViewType, TreemapNodeData, TreemapScanProgress } from './providers/ListItemsProvider';
+export {
+  LIST_VIEW_TYPE,
+  GRID_VIEW_TYPE,
+  DETAILS_VIEW_TYPE,
+  MASONRY_HORIZONTAL_VIEW_TYPE,
+  MASONRY_VERTICAL_VIEW_TYPE,
+  TREEMAP_VIEW_TYPE
+} from './providers/ListItemsProvider';
+export { TestListProvider } from './providers/TestListProvider';
+
+// Utilities
+export { ListKeyboardHandler, useListKeyboard } from './utils/ListKeyboard';
+export type { KeyboardNavigationOptions } from './utils/ListKeyboard';
+
+export {
+  getListAccessibilityProps,
+  getItemAccessibilityProps,
+  createLiveRegionAnnouncement,
+  getNextFocusIndex,
+  FocusManager,
+  announceToScreenReader,
+  type AccessibilityConfig,
+  type ItemAccessibilityConfig,
+  type KeyboardNavigationConfig
+} from './utils/ListAccessibility';
+
+export { benchmark, benchmarkLogger, type BenchmarkResult, type BenchmarkReport } from './utils/BenchmarkLogger';
+
+export {
+  GridLayoutCalculator,
+  createGridCalculator,
+  GRID_PRESETS,
+  type GridLayoutConfig,
+  type GridItemLayout,
+  type GridLayoutResult
+} from './utils/GridLayoutCalculator';
+
+export {
+  MasonryLayoutCalculator,
+  createMasonryCalculator,
+  MASONRY_PRESETS,
+  type MasonryLayoutConfig,
+  type MasonryItemLayout,
+  type MasonryLayoutResult,
+  type MasonryItemData
+} from './utils/MasonryLayoutCalculator';
+
+// Types
+export type {
+  ListItemData,
+  ListLoadOptions,
+  ListLoadResult,
+  ListSelectionInfo,
+  ListDragDropInfo,
+  VirtualizationConfig,
+  ThumbnailSize,
+  ListContextMenuItem,
+  ListItemRenderer,
+  ListError
+} from './types/ListTypes';
+
+export type { ListItemProps } from './components/ListItem';
+export type { ListItemsProps } from './components/ListItems';
+export type { ViewTypeSelectorProps } from './components/ViewTypeSelector';
+export type { VirtualizedListProps } from './components/VirtualizedList';
+export type { VirtualizedGridProps } from './components/VirtualizedGrid';