@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.3 → 0.1.5

package/src/components/ui/data-display/list.tsx

@@ -0,0 +1,456 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { 
+  ListProps, 
+  ListItem, 
+  ListAction,
+  ListFilter
+} from './types';
+
+// Simple icon components (inline SVG)
+const ChevronRightIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={`list__icon ${className}`}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+  </svg>
+);
+
+const SearchIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={`list__icon ${className}`}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+  </svg>
+);
+
+const FilterIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={`list__icon ${className}`}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z" />
+  </svg>
+);
+
+const DotsIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={`list__icon ${className}`}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
+  </svg>
+);
+
+const CheckIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={`list__icon ${className}`}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+  </svg>
+);
+
+// List Search and Filter Bar
+const ListSearchFilterBar: React.FC<{
+  searchable: boolean;
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  filterable: boolean;
+  filters: ListFilter[];
+  onFiltersChange?: (filters: ListFilter[]) => void;
+  theme: string;
+  size: 'sm' | 'md' | 'lg';
+}> = ({
+  searchable,
+  searchValue,
+  onSearchChange,
+  filterable,
+  filters,
+  size
+}) => {
+  // const { getTheme } = useTheme();
+  // const themeConfig = getTheme(theme);
+  // const colors = themeConfig?.colors || getDefaultColors();
+
+  // const sizeClasses = {
+  //   sm: 'h-8 text-sm px-3',
+  //   md: 'h-10 text-base px-4',
+  //   lg: 'h-12 text-lg px-5'
+  // };
+
+  if (!searchable && !filterable) return null;
+
+  return (
+    <div className={`list__search-filter-bar list__search-filter-bar--${size}`}>
+      {searchable && (
+        <div className="list__search-container">
+          <div className="list__search-icon">
+            <SearchIcon />
+          </div>
+          <input
+            type="text"
+            value={searchValue}
+            onChange={(e) => onSearchChange(e.target.value)}
+            placeholder="Search items..."
+            className={`list__search-input list__search-input--${size}`}
+          />
+        </div>
+      )}
+
+      {filterable && (
+        <button className={`list__filter-button list__filter-button--${size}`}>
+          <FilterIcon className="list__filter-icon" />
+          <span className="list__filter-text">Filters</span>
+          {filters.length > 0 && (
+            <span className="list__filter-badge">
+              {filters.length}
+            </span>
+          )}
+        </button>
+      )}
+    </div>
+  );
+};
+
+// List Item Action Component
+const ListItemActions: React.FC<{
+  actions: ListAction[];
+  item: ListItem;
+  theme: string;
+  size: 'sm' | 'md' | 'lg';
+}> = ({ actions, item, size }) => {
+  // const { getTheme } = useTheme();
+  // const themeConfig = getTheme(theme);
+  // const colors = themeConfig?.colors || getDefaultColors();
+
+  const [showMenu, setShowMenu] = useState(false);
+
+  // const sizeClasses = {
+  //   sm: 'p-1',
+  //   md: 'p-1.5',
+  //   lg: 'p-2'
+  // };
+
+  if (actions.length === 0) return null;
+
+  // If only one action, show it directly
+  if (actions.length === 1) {
+    const action = actions[0];
+    return (
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          action.onClick(item);
+        }}
+        className={`list__action-button list__action-button--${size} ${action.variant === 'danger' ? 'list__action-button--danger' : ''}`}
+        title={action.label}
+      >
+        {action.icon || <DotsIcon className="list__action-icon" />}
+      </button>
+    );
+  }
+
+  // Multiple actions - show dropdown menu
+  return (
+    <div className="list__action-dropdown">
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          setShowMenu(!showMenu);
+        }}
+        className={`list__action-button list__action-button--${size}`}
+      >
+        <DotsIcon className="list__action-icon" />
+      </button>
+
+      {showMenu && (
+        <>
+          {/* Backdrop */}
+          <div
+            className="list__action-backdrop"
+            onClick={() => setShowMenu(false)}
+          />
+          
+          {/* Menu */}
+          <div className="list__action-menu">
+            {actions.map((action, index) => (
+              <button
+                key={index}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  action.onClick(item);
+                  setShowMenu(false);
+                }}
+                className={`list__action-menu-item ${action.variant === 'danger' ? 'list__action-menu-item--danger' : ''}`}
+              >
+                {action.icon && <span className="list__action-menu-icon">{action.icon}</span>}
+                {action.label}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+// Individual List Item Component
+const ListItemComponent: React.FC<{
+  item: ListItem;
+  index: number;
+  selectable: boolean;
+  selected: boolean;
+  onSelectionChange?: (selected: boolean) => void;
+  onClick?: (item: ListItem, index: number) => void;
+  actions: ListAction[];
+  showDivider: boolean;
+  theme: string;
+  size: 'sm' | 'md' | 'lg';
+  variant: 'default' | 'bordered' | 'striped';
+}> = ({
+  item,
+  index,
+  selectable,
+  selected,
+  onSelectionChange,
+  onClick,
+  actions,
+  showDivider,
+  theme,
+  size,
+  variant
+}) => {
+
+  const isClickable = !!onClick;
+
+  return (
+    <div
+      className={`list__item list__item--${size} list__item--${variant} ${isClickable ? 'list__item--clickable' : ''} ${index % 2 === 1 && variant === 'striped' ? 'list__item--striped' : ''}`}
+      onClick={isClickable ? () => onClick(item, index) : undefined}
+    >
+      {/* Selection Checkbox */}
+      {selectable && (
+        <div
+          className="list__item-select"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <button
+            onClick={() => onSelectionChange?.(!selected)}
+            className={`list__item-checkbox ${selected ? 'list__item-checkbox--selected' : ''}`}
+          >
+            {selected && <CheckIcon className="list__item-checkbox-icon" />}
+          </button>
+        </div>
+      )}
+
+      {/* Avatar/Icon */}
+      {item.avatar && (
+        <div className="list__item-avatar">
+          {typeof item.avatar === 'string' ? (
+            <img
+              src={item.avatar}
+              alt={item.title}
+              className="list__item-avatar-image"
+            />
+          ) : (
+            <div className="list__item-avatar-placeholder">
+              {item.avatar}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Content */}
+      <div className="list__item-content">
+        <div className="list__item-content-layout">
+          <div className="list__item-text">
+            <h3 className="list__item-title">
+              {item.title}
+            </h3>
+            {item.subtitle && (
+              <p className="list__item-subtitle">
+                {item.subtitle}
+              </p>
+            )}
+            {item.description && (
+              <p className="list__item-description">
+                {item.description}
+              </p>
+            )}
+          </div>
+
+          {/* Metadata */}
+          {item.metadata && (
+            <div className="list__item-metadata">
+              {item.metadata.timestamp && (
+                <p className="list__item-timestamp">
+                  {item.metadata.timestamp}
+                </p>
+              )}
+              {item.metadata.status && (
+                <span className={`list__item-status list__item-status--${item.metadata.status}`}>
+                  {item.metadata.status}
+                </span>
+              )}
+              {item.metadata.badge && (
+                <span className="list__item-badge">
+                  {item.metadata.badge}
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="list__item-actions">
+        <ListItemActions 
+          actions={actions}
+          item={item}
+          theme={theme}
+          size={size}
+        />
+      </div>
+
+      {/* Navigation Arrow */}
+      {isClickable && (
+        <div className="list__item-navigation">
+          <ChevronRightIcon className="list__item-navigation-icon" />
+        </div>
+      )}
+
+      {/* Divider */}
+      {showDivider && variant !== 'bordered' && (
+        <div className="list__item-divider" />
+      )}
+    </div>
+  );
+};
+
+// Main List Component
+export const List: React.FC<ListProps> = ({
+  items,
+  selectable = false,
+  selectedKeys = [],
+  onSelectionChange,
+  onClick,
+  actions = [],
+  searchable = false,
+  searchValue = '',
+  onSearchChange,
+  filterable = false,
+  filters = [],
+  // onFiltersChange, // TODO: Implement filter functionality
+  loading = false,
+  error = null,
+  emptyMessage = 'No items found',
+  showDividers = true,
+  className = '',
+  theme = 'stan-design',
+  size = 'md',
+  variant = 'default'
+}) => {
+  // const { getTheme } = useTheme();
+  // const themeConfig = getTheme(theme);
+  // const colors = themeConfig?.colors || getDefaultColors();
+
+  // Filter items based on search
+  const filteredItems = useMemo(() => {
+    if (!searchable || !searchValue.trim()) return items;
+    
+    const searchLower = searchValue.toLowerCase();
+    return items.filter(item => 
+      item.title.toLowerCase().includes(searchLower) ||
+      item.subtitle?.toLowerCase().includes(searchLower) ||
+      item.description?.toLowerCase().includes(searchLower)
+    );
+  }, [items, searchable, searchValue]);
+
+  const handleSelectionChange = useCallback((itemKey: string, selected: boolean) => {
+    if (!onSelectionChange) return;
+
+    const newSelectedKeys = selected 
+      ? [...selectedKeys, itemKey]
+      : selectedKeys.filter(key => key !== itemKey);
+    
+    onSelectionChange(newSelectedKeys);
+  }, [selectedKeys, onSelectionChange]);
+
+  if (loading) {
+    return (
+      <div className={`list__loading ${className || ''}`}>
+        Loading...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={`list__error ${className || ''}`}>
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`list__container ${className || ''}`}>
+      {/* Search and Filter Bar */}
+      <ListSearchFilterBar
+        searchable={searchable}
+        searchValue={searchValue}
+        onSearchChange={onSearchChange || (() => {})}
+        filterable={filterable}
+        filters={filters}
+        // onFiltersChange={onFiltersChange}
+        theme={theme}
+        size={size}
+      />
+
+      {/* List Container */}
+      <div className={`list__items list__items--${variant}`}>
+        {filteredItems.length === 0 ? (
+          <div className="list__empty">
+            {emptyMessage}
+          </div>
+        ) : (
+          filteredItems.map((item, index) => {
+            const itemKey = item.key || item.id || index.toString();
+            const isSelected = selectedKeys.includes(itemKey);
+            const shouldShowDivider = showDividers && index < filteredItems.length - 1;
+
+            return (
+              <ListItemComponent
+                key={itemKey}
+                item={item}
+                index={index}
+                selectable={selectable}
+                selected={isSelected}
+                onSelectionChange={(selected) => handleSelectionChange(itemKey, selected)}
+                onClick={onClick}
+                actions={actions}
+                showDivider={shouldShowDivider}
+                theme={theme}
+                size={size}
+                variant={variant}
+              />
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default List;