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

package/src/components/ui/navigation/navigation-demo.tsx

@@ -0,0 +1,324 @@
+/**
+ * Navigation Components Demo
+ * Showcases all navigation components with different themes and configurations
+ */
+
+import * as React from 'react';
+import { useState } from 'react';
+import { Breadcrumb } from './breadcrumb';
+import { Tabs } from './tabs';
+import { Menu } from './menu';
+import { Sidebar } from './sidebar';
+import { Stepper } from './stepper';
+import { Pagination } from './pagination';
+import { NavigationItem, NavigationGroup } from './types';
+
+export const NavigationDemo: React.FC = () => {
+  const [currentTab, setCurrentTab] = useState('overview');
+  const [currentStep, setCurrentStep] = useState(0);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  // const [menuOpen, setMenuOpen] = useState(false);
+
+  // Sample data for components
+  const breadcrumbItems = [
+    { id: 'home', label: 'Home', href: '/' },
+    { id: 'products', label: 'Products', href: '/products' },
+    { id: 'electronics', label: 'Electronics', href: '/products/electronics' },
+    { id: 'smartphones', label: 'Smartphones', href: '/products/electronics/smartphones' },
+  ];
+
+  const tabItems = [
+    {
+      id: 'overview',
+      label: 'Overview',
+      content: (
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Overview Tab</h3>
+          <p className="text-gray-600">This is the overview content with some sample text.</p>
+        </div>
+      ),
+    },
+    {
+      id: 'details',
+      label: 'Details',
+      content: (
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Details Tab</h3>
+          <p className="text-gray-600">Detailed information goes here.</p>
+        </div>
+      ),
+    },
+    {
+      id: 'settings',
+      label: 'Settings',
+      content: (
+        <div className="p-4">
+          <h3 className="text-lg font-semibold mb-2">Settings Tab</h3>
+          <p className="text-gray-600">Configuration options and settings.</p>
+        </div>
+      ),
+    },
+  ];
+
+  const stepperSteps = [
+    {
+      id: 'step1',
+      label: 'Account Setup',
+      description: 'Create your account and verify email',
+      status: 'completed' as const,
+    },
+    {
+      id: 'step2',
+      label: 'Profile Information',
+      description: 'Fill in your personal details',
+      status: 'active' as const,
+    },
+    {
+      id: 'step3',
+      label: 'Preferences',
+      description: 'Configure your account preferences',
+      status: 'pending' as const,
+    },
+    {
+      id: 'step4',
+      label: 'Review & Confirm',
+      description: 'Review your information and confirm',
+      status: 'pending' as const,
+    },
+  ];
+
+  const menuItems: NavigationItem[] = [
+    {
+      id: 'dashboard',
+      label: 'Dashboard',
+      description: 'Main dashboard view',
+      icon: '📊',
+    },
+    {
+      id: 'analytics',
+      label: 'Analytics',
+      description: 'View detailed analytics',
+      icon: '📈',
+    },
+    {
+      id: 'reports',
+      label: 'Reports',
+      description: 'Generate and view reports',
+      icon: '📋',
+    },
+    {
+      id: 'settings',
+      label: 'Settings',
+      description: 'Configure your account',
+      icon: '⚙️',
+    },
+  ];
+
+  const sidebarItems: NavigationItem[] = [
+    {
+      id: 'dashboard',
+      label: 'Dashboard',
+      icon: '📊',
+      active: true,
+    },
+    {
+      id: 'analytics',
+      label: 'Analytics',
+      icon: '📈',
+    },
+    {
+      id: 'reports',
+      label: 'Reports',
+      icon: '📋',
+    },
+    {
+      id: 'settings',
+      label: 'Settings',
+      icon: '⚙️',
+    },
+  ];
+
+  const sidebarGroups: NavigationGroup[] = [
+    {
+      id: 'management',
+      title: 'Management',
+      items: [
+        { id: 'users', label: 'Users', icon: '👥' },
+        { id: 'roles', label: 'Roles', icon: '🔐' },
+        { id: 'permissions', label: 'Permissions', icon: '🔑' },
+      ],
+    },
+    {
+      id: 'content',
+      title: 'Content',
+      items: [
+        { id: 'articles', label: 'Articles', icon: '📝' },
+        { id: 'media', label: 'Media', icon: '🖼️' },
+        { id: 'comments', label: 'Comments', icon: '💬' },
+      ],
+    },
+  ];
+
+  // const getThemeClasses = () => {
+  //   return 'navigation-demo navigation-demo--stan-design';
+  // };
+
+  return (
+    <div className="space-y-8 p-6">
+      <div className="text-center">
+        <h1 className="text-3xl font-bold text-gray-900 mb-2">Navigation Components Demo</h1>
+        <p className="text-gray-600">Showcasing all navigation components with Stan Design theme</p>
+      </div>
+
+      {/* Breadcrumb Component */}
+      <div className="p-6">
+        <h2 className="text-xl font-semibold mb-4">Breadcrumb Component</h2>
+        <div className="space-y-4">
+          <Breadcrumb
+            items={breadcrumbItems}
+            onItemClick={(item) => console.log('Breadcrumb clicked:', item)}
+          />
+          <Breadcrumb
+            items={breadcrumbItems}
+            maxItems={3}
+            truncate={true}
+          />
+        </div>
+      </div>
+
+      {/* Pagination Component */}
+      <div className="p-6">
+        <h2 className="text-xl font-semibold mb-4">Pagination Component</h2>
+        <div className="space-y-4">
+          <Pagination
+            currentPage={currentPage}
+            totalPages={20}
+            totalItems={200}
+            onPageChange={setCurrentPage}
+          />
+          <Pagination
+            currentPage={currentPage}
+            totalPages={20}
+            variant="outlined"
+            size="sm"
+            showItemsPerPage={true}
+            showTotal={true}
+            onPageChange={setCurrentPage}
+          />
+        </div>
+      </div>
+
+      {/* Tabs Component */}
+      <div className="p-6">
+        <h2 className="text-xl font-semibold mb-4">Tabs Component</h2>
+        <div className="space-y-6">
+          <Tabs
+            tabs={tabItems}
+            activeTab={currentTab}
+            onTabChange={setCurrentTab}
+            variant="default"
+          />
+          <Tabs
+            tabs={tabItems}
+            activeTab={currentTab}
+            onTabChange={setCurrentTab}
+            variant="pills"
+          />
+          <Tabs
+            tabs={tabItems}
+            activeTab={currentTab}
+            onTabChange={setCurrentTab}
+            variant="underline"
+          />
+        </div>
+      </div>
+
+      {/* Stepper Component */}
+      <div className="p-6">
+        <h2 className="text-xl font-semibold mb-4">Stepper Component</h2>
+        <div className="space-y-6">
+          <Stepper
+            steps={stepperSteps}
+            currentStep={currentStep}
+            onStepChange={setCurrentStep}
+            variant="horizontal"
+          />
+          <Stepper
+            steps={stepperSteps}
+            currentStep={currentStep}
+            onStepChange={setCurrentStep}
+            variant="vertical"
+          />
+        </div>
+      </div>
+
+      {/* Menu Component */}
+      <div className="p-6">
+        <h2 className="text-xl font-semibold mb-4">Menu Component</h2>
+        <div className="space-y-4">
+          <Menu
+            items={menuItems}
+            variant="dropdown"
+            searchable={true}
+            selectable={true}
+            multiSelect={true}
+            selectedItems={[]} // No selected items for this demo
+            onSelectionChange={() => {}}
+          />
+          <Menu
+            items={menuItems}
+            variant="command"
+          />
+        </div>
+      </div>
+
+      {/* Sidebar Component */}
+      <div className="p-6">
+        <h2 className="text-xl font-semibold mb-4">Sidebar Component</h2>
+        <div className="flex space-x-4">
+          <div className="h-96">
+            <Sidebar
+              items={sidebarItems}
+              collapsed={sidebarCollapsed}
+              onCollapseChange={setSidebarCollapsed}
+              collapsible={true}
+              showToggle={true}
+              header={<div className="font-semibold text-lg">Navigation</div>}
+              footer={<div className="text-sm text-gray-500">v1.0.0</div>}
+            />
+          </div>
+          <div className="h-96">
+            <Sidebar
+              items={sidebarItems}
+              groups={sidebarGroups}
+              variant="collapsible"
+              size="lg"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Theme Information */}
+      <div className="p-6">
+        <h2 className="text-xl font-semibold mb-4">Current Theme: Stan Design</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="text-center p-4 bg-gray-50 rounded-lg">
+            <h3 className="font-medium text-gray-900">Stan Design</h3>
+            <p className="text-sm text-gray-600">Default theme with gray tones</p>
+          </div>
+          <div className="text-center p-4 bg-blue-50 rounded-lg">
+            <h3 className="font-medium text-blue-900">Enterprise</h3>
+            <p className="text-sm text-blue-600">Professional blue theme</p>
+          </div>
+          <div className="text-center p-4 bg-purple-50 rounded-lg">
+            <h3 className="font-medium text-purple-900">Harvey</h3>
+            <p className="text-sm text-purple-600">Creative purple theme</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NavigationDemo;

package/src/components/ui/navigation/pagination.tsx

@@ -0,0 +1,272 @@
+/**
+ * Pagination Component
+ * Provides comprehensive pagination with theme support and responsive design
+ */
+
+import * as React from 'react';
+import { useMemo } from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { PaginationProps, PaginationItem } from './types';
+
+// Simple icon components
+const ChevronDoubleLeftIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+  </svg>
+);
+
+const ChevronDoubleRightIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 5l7 7-7 7m-8-14l7 7-7 7" />
+  </svg>
+);
+
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage = 1,
+  totalPages = 1,
+  totalItems,
+  itemsPerPage = 10,
+  showFirstLast = true,
+  showPrevNext = true,
+  showPageNumbers = true,
+  maxPageNumbers = 5,
+  size = 'md',
+  variant = 'default',
+  onPageChange,
+  onItemsPerPageChange,
+  itemsPerPageOptions = [10, 25, 50, 100],
+  showItemsPerPage = false,
+  showTotal = false,
+  totalLabel = 'Total',
+  disabled = false,
+  loading = false,
+  className = '',
+  'data-testid': testId = 'pagination',
+}) => {
+  // Memoize pagination items to avoid unnecessary recalculations
+  const paginationItems = useMemo((): PaginationItem[] => {
+    const items: PaginationItem[] = [];
+
+    if (showFirstLast) {
+      items.push({
+        type: 'first',
+        page: 1,
+        disabled: currentPage === 1 || disabled,
+        label: 'First',
+        onClick: () => onPageChange(1),
+      });
+    }
+
+    if (showPrevNext) {
+      items.push({
+        type: 'previous',
+        page: currentPage - 1,
+        disabled: currentPage === 1 || disabled,
+        label: 'Previous',
+        onClick: () => onPageChange(currentPage - 1),
+      });
+    }
+
+    if (showPageNumbers) {
+      const pageNumbers = generatePageNumbers(currentPage, totalPages, maxPageNumbers);
+      
+      pageNumbers.forEach((pageNum) => {
+        if (pageNum === 'ellipsis') {
+          items.push({
+            type: 'ellipsis',
+            label: '...',
+            disabled: true,
+          });
+        } else {
+          items.push({
+            type: 'page',
+            page: pageNum as number,
+            active: pageNum === currentPage,
+            disabled: disabled,
+            label: pageNum.toString(),
+            onClick: () => onPageChange(pageNum as number),
+          });
+        }
+      });
+    }
+
+    if (showPrevNext) {
+      items.push({
+        type: 'next',
+        page: currentPage + 1,
+        disabled: currentPage === totalPages || disabled,
+        label: 'Next',
+        onClick: () => onPageChange(currentPage + 1),
+      });
+    }
+
+    if (showFirstLast) {
+      items.push({
+        type: 'last',
+        page: totalPages,
+        disabled: currentPage === totalPages || disabled,
+        label: 'Last',
+        onClick: () => onPageChange(totalPages),
+      });
+    }
+
+    return items;
+  }, [currentPage, totalPages, maxPageNumbers, showFirstLast, showPrevNext, showPageNumbers, disabled, onPageChange]);
+
+
+
+  function generatePageNumbers(current: number, total: number, max: number): (number | 'ellipsis')[] {
+    if (total <= max) {
+      return Array.from({ length: total }, (_, i) => i + 1);
+    }
+
+    const half = Math.floor(max / 2);
+    const start = Math.max(1, current - half);
+    const end = Math.min(total, start + max - 1);
+
+    const numbers: (number | 'ellipsis')[] = [];
+
+    if (start > 1) {
+      numbers.push(1);
+      if (start > 2) numbers.push('ellipsis');
+    }
+
+    for (let i = start; i <= end; i++) {
+      numbers.push(i);
+    }
+
+    if (end < total) {
+      if (end < total - 1) numbers.push('ellipsis');
+      numbers.push(total);
+    }
+
+    return numbers;
+  }
+
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'sm':
+        return 'pagination__button--sm';
+      case 'lg':
+        return 'pagination__button--lg';
+      default: // md
+        return 'pagination__button--md';
+    }
+  };
+
+  const getVariantClasses = () => {
+    switch (variant) {
+      case 'outlined':
+        return 'pagination__button--outlined';
+      case 'minimal':
+        return 'pagination__button--minimal';
+      default: // default
+        return 'pagination__button--default';
+    }
+  };
+
+  const getThemeClasses = () => {
+    return 'pagination pagination--stan-design';
+  };
+
+  const getButtonClasses = (item: PaginationItem) => {
+    let classes = `pagination__button ${getSizeClasses()} ${getVariantClasses()}`;
+
+    if (item.disabled) {
+      classes += ' pagination__button--disabled';
+    } else if (item.active) {
+      classes += ' pagination__button--active';
+    } else {
+      classes += ' pagination__button--inactive';
+    }
+
+    return classes;
+  };
+
+  const handleItemsPerPageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const newItemsPerPage = parseInt(event.target.value, 10);
+    if (onItemsPerPageChange) {
+      onItemsPerPageChange(newItemsPerPage);
+    }
+  };
+
+  if (totalPages <= 1 && !showItemsPerPage && !showTotal) {
+    return null;
+  }
+
+  return (
+    <div className={`pagination__container ${getThemeClasses()} ${className}`} data-testid={testId}>
+      {/* Left side - Items per page and total */}
+      <div className="pagination__info">
+        {showItemsPerPage && (
+          <div className="pagination__items-per-page">
+            <label htmlFor="items-per-page" className="pagination__label">
+              Items per page:
+            </label>
+            <select
+              id="items-per-page"
+              value={itemsPerPage}
+              onChange={handleItemsPerPageChange}
+              disabled={disabled || loading}
+              className="pagination__select"
+            >
+              {itemsPerPageOptions.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        {showTotal && totalItems !== undefined && (
+          <div className="pagination__total">
+            {totalLabel}: <span className="pagination__total-count">{totalItems.toLocaleString()}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Center - Page numbers */}
+      <div className="pagination__navigation">
+        {paginationItems.map((item, index) => {
+          if (item.type === 'ellipsis') {
+            return (
+              <span
+                key={`ellipsis-${index}`}
+                className="pagination__ellipsis"
+                aria-hidden="true"
+              >
+                {item.label}
+              </span>
+            );
+          }
+
+          const icon = item.type === 'first' ? <ChevronDoubleLeftIcon className="pagination__button-icon" /> :
+                      item.type === 'previous' ? <ChevronLeftIcon className="pagination__button-icon" /> :
+                      item.type === 'next' ? <ChevronRightIcon className="pagination__button-icon" /> :
+                      item.type === 'last' ? <ChevronDoubleRightIcon className="pagination__button-icon" /> : null;
+
+          return (
+            <button
+              key={`${item.type}-${item.page || index}`}
+              onClick={item.onClick}
+              disabled={item.disabled}
+              className={getButtonClasses(item)}
+              aria-label={item.label}
+              aria-current={item.active ? 'page' : undefined}
+            >
+              {icon || item.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Right side - Page info */}
+      <div className="pagination__status">
+        {`Page ${currentPage} of ${totalPages}`}
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;