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

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

@@ -0,0 +1,441 @@
+import React, { useState, useMemo } from 'react';
+import { 
+  TimelineProps, 
+  TimelineItem, 
+  TimelineAction,
+  TimelineItemProps
+} from './types';
+
+// Simple icon components (inline SVG)
+const CalendarIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={`timeline__icon ${className}`}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+  </svg>
+);
+
+const ClockIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={`timeline__icon ${className}`}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>
+);
+
+const UserIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={`timeline__icon ${className}`}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+  </svg>
+);
+
+const BellIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={`timeline__icon ${className}`}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-5 5-5-5h5V3h5v14z" />
+  </svg>
+);
+
+const SearchIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={`timeline__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={`timeline__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={`timeline__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>
+);
+
+// Timeline Search and Filter Bar
+const TimelineSearchFilterBar: React.FC<{
+  searchable: boolean;
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  filterable: boolean;
+  theme: string;
+  size: 'sm' | 'md' | 'lg';
+}> = ({
+  searchable,
+  searchValue,
+  onSearchChange,
+  filterable,
+  size
+}) => {
+
+  if (!searchable && !filterable) return null;
+
+  return (
+    <div className={`timeline__search-filter-bar timeline__search-filter-bar--${size}`}>
+      {searchable && (
+        <div className="timeline__search-container">
+          <div className="timeline__search-icon">
+            <SearchIcon />
+          </div>
+          <input
+            type="text"
+            value={searchValue}
+            onChange={(e) => onSearchChange(e.target.value)}
+            placeholder="Search timeline..."
+            className={`timeline__search-input timeline__search-input--${size}`}
+          />
+        </div>
+      )}
+
+      {filterable && (
+        <button className={`timeline__filter-button timeline__filter-button--${size}`}>
+          <FilterIcon className="timeline__filter-icon" />
+          <span className="timeline__filter-text">Filter</span>
+        </button>
+      )}
+    </div>
+  );
+};
+
+// Timeline Item Actions Component
+const TimelineItemActions: React.FC<{
+  actions: TimelineAction[];
+  item: TimelineItem;
+  theme: string;
+  size: 'sm' | 'md' | 'lg';
+}> = ({ actions, item, size }) => {
+  const [showMenu, setShowMenu] = useState(false);
+
+  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={`timeline__action-button timeline__action-button--${size} ${action.variant === 'danger' ? 'timeline__action-button--danger' : ''}`}
+        title={action.label}
+      >
+        {action.icon || <DotsIcon className="timeline__action-icon" />}
+      </button>
+    );
+  }
+
+  // Multiple actions - show dropdown menu
+  return (
+    <div className="timeline__action-dropdown">
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          setShowMenu(!showMenu);
+        }}
+        className={`timeline__action-button timeline__action-button--${size}`}
+      >
+        <DotsIcon className="timeline__action-icon" />
+      </button>
+
+      {showMenu && (
+        <>
+          {/* Backdrop */}
+          <div
+            className="timeline__action-backdrop"
+            onClick={() => setShowMenu(false)}
+          />
+          
+          {/* Menu */}
+          <div className="timeline__action-menu">
+            {actions.map((action, index) => (
+              <button
+                key={index}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  action.onClick(item);
+                  setShowMenu(false);
+                }}
+                className={`timeline__action-menu-item ${action.variant === 'danger' ? 'timeline__action-menu-item--danger' : ''}`}
+              >
+                {action.icon && <span className="timeline__action-menu-icon">{action.icon}</span>}
+                {action.label}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+// Individual Timeline Item Component
+const TimelineItemComponent: React.FC<TimelineItemProps> = ({
+  item,
+  position,
+  isLast,
+  mode,
+  actions,
+  onClick,
+  theme,
+  size,
+  variant,
+  showConnector
+}) => {
+  // const { getTheme } = useTheme();
+  // const themeConfig = getTheme(theme);
+  // const colors = themeConfig?.colors || getDefaultColors();
+
+  const isClickable = !!onClick;
+
+  const getIcon = () => {
+    if (item.icon) {
+      return item.icon;
+    }
+    
+    switch (item.type) {
+      case 'event': return <CalendarIcon className="timeline__dot-icon" />;
+      case 'task': return <ClockIcon className="timeline__dot-icon" />;
+      case 'user': return <UserIcon className="timeline__dot-icon" />;
+      case 'system': return <BellIcon className="timeline__dot-icon" />;
+      default: return null;
+    }
+  };
+
+  const formatTimestamp = (timestamp: string) => {
+    const date = new Date(timestamp);
+    return date.toLocaleString();
+  };
+
+  return (
+    <div className={`timeline__item timeline__item--${mode} timeline__item--${position} timeline__item--${size}`}>
+      {/* Content */}
+      <div
+        className={`timeline__item-content timeline__item-content--${size} timeline__item-content--${variant} ${isClickable ? 'timeline__item-content--clickable' : ''}`}
+        onClick={isClickable ? () => onClick(item) : undefined}
+      >
+        <div className={`timeline__item-content-wrapper timeline__item-content-wrapper--${position}`}>
+          {/* Header */}
+          <div className="timeline__item-header">
+            <div className="timeline__item-text">
+              <h3 className="timeline__item-title">
+                {item.title}
+              </h3>
+              <p className="timeline__item-timestamp">
+                {formatTimestamp(item.timestamp)}
+              </p>
+            </div>
+            
+            {/* Actions */}
+            <div className="timeline__item-actions">
+              <TimelineItemActions 
+                actions={actions}
+                item={item}
+                theme={theme}
+                size={size}
+              />
+            </div>
+          </div>
+
+          {/* Content */}
+          {item.description && (
+            <p className="timeline__item-description">
+              {item.description}
+            </p>
+          )}
+
+          {/* Additional Content */}
+          {item.content && (
+            <div className="timeline__item-content-extra">
+              {item.content}
+            </div>
+          )}
+
+          {/* Metadata */}
+          {item.metadata && (
+            <div className="timeline__item-metadata">
+              {item.metadata.author && (
+                <span className="timeline__item-author">
+                  By {item.metadata.author}
+                </span>
+              )}
+              {item.metadata.category && (
+                <span className="timeline__item-category">
+                  {item.metadata.category}
+                </span>
+              )}
+              {item.metadata.tags && item.metadata.tags.map((tag, index) => (
+                <span
+                  key={index}
+                  className="timeline__item-tag"
+                >
+                  #{tag}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Timeline Dot */}
+      <div className="timeline__dot-container">
+        <div
+          className={`timeline__dot timeline__dot--${size} timeline__dot--${item.status || 'default'}`}
+        >
+          {getIcon()}
+        </div>
+
+        {/* Connector Line */}
+        {showConnector && !isLast && (
+          <div className={`timeline__connector timeline__connector--${size}`} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+// Main Timeline Component
+export const Timeline: React.FC<TimelineProps> = ({
+  items,
+  mode = 'left',
+  reverse = false,
+  actions = [],
+  onItemClick,
+  searchable = false,
+  searchValue = '',
+  onSearchChange,
+  filterable = false,
+  // filters = [], // TODO: Implement filter functionality
+  // onFiltersChange, // TODO: Implement filter functionality
+  showConnector = true,
+  loading = false,
+  error = null,
+  emptyMessage = 'No timeline items',
+  className = '',
+  theme = 'stan-design',
+  size = 'md',
+  variant = 'default'
+}) => {
+
+  // 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.description?.toLowerCase().includes(searchLower) ||
+      item.metadata?.author?.toLowerCase().includes(searchLower) ||
+      item.metadata?.category?.toLowerCase().includes(searchLower) ||
+      item.metadata?.tags?.some(tag => tag.toLowerCase().includes(searchLower))
+    );
+  }, [items, searchable, searchValue]);
+
+  // Sort items by timestamp
+  const sortedItems = useMemo(() => {
+    const sorted = [...filteredItems].sort((a, b) => {
+      const dateA = new Date(a.timestamp).getTime();
+      const dateB = new Date(b.timestamp).getTime();
+      return reverse ? dateB - dateA : dateA - dateB;
+    });
+    
+    return sorted;
+  }, [filteredItems, reverse]);
+
+  if (loading) {
+    return (
+      <div className={`timeline__loading ${className || ''}`}>
+        Loading timeline...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={`timeline__error ${className || ''}`}>
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`timeline__container ${className || ''}`}>
+      {/* Search and Filter Bar */}
+      <TimelineSearchFilterBar
+        searchable={searchable}
+        searchValue={searchValue}
+        onSearchChange={onSearchChange || (() => {})}
+        filterable={filterable}
+        theme={theme}
+        size={size}
+      />
+
+      {/* Timeline Container */}
+      <div className="timeline__timeline">
+        {sortedItems.length === 0 ? (
+          <div className="timeline__empty">
+            {emptyMessage}
+          </div>
+        ) : (
+          <div className="timeline__items">
+            {sortedItems.map((item, index) => {
+              const position = mode === 'alternate' 
+                ? (index % 2 === 0 ? 'left' : 'right')
+                : mode;
+              
+              return (
+                <TimelineItemComponent
+                  key={item.id}
+                  item={item}
+                  position={position}
+                  isLast={index === sortedItems.length - 1}
+                  mode={mode}
+                  actions={actions}
+                  onClick={onItemClick}
+                  theme={theme}
+                  size={size}
+                  variant={variant}
+                  showConnector={showConnector}
+                />
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Timeline;