@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.11

package/dist/components/ui/navigation/breadcrumb.js

@@ -8,7 +8,7 @@ import { useState, useMemo } from 'react';
 import { ChevronRightIcon, HomeIcon } from '@heroicons/react/24/outline';
 import { BreadcrumbProps, BreadcrumbItem } from './types';
 
-export const Breadcrumb= ({
+export const Breadcrumb: React.FC<BreadcrumbProps> = ({
   items,
   separator = <ChevronRightIcon className="w-4 h-4" />,
   maxItems = 5,
@@ -18,7 +18,7 @@ export const Breadcrumb= ({
   truncate = true,
   responsive = true,
   className = '',
-  'data-testid'= 'breadcrumb',
+  'data-testid': testId = 'breadcrumb',
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -38,12 +38,12 @@ export const Breadcrumb= ({
     
     return [
       ...firstItems,
-      { id, label, disabled},
+      { id: 'ellipsis', label: '...', disabled: true },
       ...lastItems,
     ];
   }, [items, maxItems, truncate, isExpanded]);
 
-  const handleItemClick = (item) => {
+  const handleItemClick = (item: BreadcrumbItem) => {
     if (item.disabled || item.id === 'ellipsis') return;
     
     if (onItemClick) {
@@ -59,7 +59,7 @@ export const Breadcrumb= ({
     return 'breadcrumb breadcrumb--stan-design';
   };
 
-  const getItemClasses = (item, isLast) => {
+  const getItemClasses = (item: BreadcrumbItem, isLast: boolean) => {
     const baseClasses = 'breadcrumb__item-button';
     
     if (item.disabled) {
@@ -86,8 +86,8 @@ export const Breadcrumb= ({
       {showHome && (
         <>
           <button
-            onClick={() => handleItemClick({ id, label, href})}
-            className={`breadcrumb__home-button ${getItemClasses({ id, label} as BreadcrumbItem, false)}`}
+            onClick={() => handleItemClick({ id: 'home', label: 'Home', href: '/' })}
+            className={`breadcrumb__home-button ${getItemClasses({ id: 'home', label: 'Home' } as BreadcrumbItem, false)}`}
             aria-label="Go to home page"
           >
             <span className="breadcrumb__icon">{homeIcon}</span>
@@ -117,20 +117,23 @@ export const Breadcrumb= ({
                 <button
                   onClick={handleExpandToggle}
                   className="breadcrumb__ellipsis"
-                  aria-label={isExpanded ? 'Collapse breadcrumbs' }
+                  aria-label={isExpanded ? 'Collapse breadcrumbs' : 'Expand breadcrumbs'}
                 >
                   {item.label}
                 </button>
-              ) ={() => handleItemClick(item)}
+              ) : (
+                <button
+                  onClick={() => handleItemClick(item)}
                   className={getItemClasses(item, isLast)}
                   disabled={item.disabled}
-                  aria-current={isLast ? 'page' }
-                  aria-label={item.href ? `Navigate to ${item.label}` }
+                  aria-current={isLast ? 'page' : undefined}
+                  aria-label={item.href ? `Navigate to ${item.label}` : item.label}
                 >
                   {item.icon && <span className="breadcrumb__icon">{item.icon}</span>}
                   {responsive && window.innerWidth < 640 ? (
                     <span className="breadcrumb__item-label">{item.label}</span>
-                  ) ="breadcrumb__item-label">{item.label}</span>
+                  ) : (
+                    <span className="breadcrumb__item-label">{item.label}</span>
                   )}
                 </button>
               )}
@@ -143,9 +146,9 @@ export const Breadcrumb= ({
         <button
           onClick={handleExpandToggle}
           className={`breadcrumb__expand-toggle breadcrumb__expand-toggle--semantic`}
-          aria-label={isExpanded ? 'Show fewer breadcrumbs' }
+          aria-label={isExpanded ? 'Show fewer breadcrumbs' : 'Show all breadcrumbs'}
         >
-          {isExpanded ? 'Show Less' }
+          {isExpanded ? 'Show Less' : 'Show All'}
         </button>
       )}
     </nav>

package/dist/components/ui/navigation/index.esm.js

@@ -11,4 +11,3 @@ export { Menu } from './menu';
 export { Sidebar } from './sidebar';
 
 // Export types
-

package/dist/components/ui/navigation/index.js

@@ -11,4 +11,3 @@ export { Menu } from './menu';
 export { Sidebar } from './sidebar';
 
 // Export types
-

package/dist/components/ui/navigation/menu.esm.js

@@ -8,36 +8,36 @@ import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
 import { MenuProps, NavigationItem, NavigationGroup } from './types';
 
 // Simple icon components
-const ChevronDownIcon}> = ({ className = '' }) => (
+const ChevronDownIcon: 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="M19 9l-7 7-7-7" />
   </svg>
 );
 
-const ChevronRightIcon}> = ({ className = '' }) => (
+const ChevronRightIcon: 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="M9 5l7 7-7 7" />
   </svg>
 );
 
-const MagnifyingGlassIcon}> = ({ className = '' }) => (
+const MagnifyingGlassIcon: 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
   </svg>
 );
 
-const FunnelIcon}> = ({ className = '' }) => (
+const FunnelIcon: 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="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" />
   </svg>
 );
 
-export const Menu= ({
+export const Menu: React.FC<MenuProps> = ({
   items = [],
   groups,
   variant = 'dropdown',
   size = 'md',
-  // TODO, trigger, showArrow, and fullWidth in future version
+  // TODO: Implement orientation, trigger, showArrow, and fullWidth in future version
   // orientation = 'horizontal',
   // trigger = 'click',
   placement = 'bottom',
@@ -55,23 +55,24 @@ export const Menu= ({
   selectedItems = [],
   onSelectionChange,
   className = '',
-  'data-testid'= 'menu',
+  'data-testid': testId = 'menu',
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [filterValue, setFilterValue] = useState('');
   const [internalSelectedItems, setInternalSelectedItems] = useState<string[]>(selectedItems || []);
-  // TODO, setExpandedGroups] = useState<string[]>([]);
+  // TODO: Implement group expansion functionality in future version
+  // const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
   
   const menuRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
 
   // Use controlled or uncontrolled selected items
-  const currentSelectedItems = selectedItems !== undefined ? selectedItems ;
+  const currentSelectedItems = selectedItems !== undefined ? selectedItems : internalSelectedItems;
 
   // Handle click outside to close menu
   useEffect(() => {
-    const handleClickOutside = (event) => {
+    const handleClickOutside = (event: MouseEvent) => {
       if (menuRef.current && !menuRef.current.contains(event.target as Node) &&
           triggerRef.current && !triggerRef.current.contains(event.target as Node)) {
         setIsOpen(false);
@@ -89,7 +90,7 @@ export const Menu= ({
 
   // Handle escape key to close menu
   useEffect(() => {
-    const handleEscape = (event) => {
+    const handleEscape = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         setIsOpen(false);
       }
@@ -109,11 +110,11 @@ export const Menu= ({
     setIsOpen(!isOpen);
   }, [disabled, loading, isOpen]);
 
-  const handleItemClick = useCallback((item) => {
+  const handleItemClick = useCallback((item: NavigationItem) => {
     if (item.disabled) return;
 
     if (selectable) {
-      let newSelectedItems];
+      let newSelectedItems: string[];
       
       if (multiSelect) {
         if (currentSelectedItems.includes(item.id)) {
@@ -144,22 +145,23 @@ export const Menu= ({
     }
   }, [selectable, multiSelect, currentSelectedItems, selectedItems, onSelectionChange]);
 
-  // TODO= useCallback((groupId) => {
+  // TODO: Implement group toggle functionality in future version
+  // const handleGroupToggle = useCallback((groupId: string) => {
   //   setExpandedGroups(prev => 
   //     prev.includes(groupId) 
   //       ? prev.filter(id => id !== groupId)
-  //       , groupId]
+  //       : [...prev, groupId]
   //   );
   // }, []);
 
-  const handleSearch = useCallback((query) => {
+  const handleSearch = useCallback((query: string) => {
     setSearchQuery(query);
     if (onSearch) {
       onSearch(query);
     }
   }, [onSearch]);
 
-  const handleFilter = useCallback((filter) => {
+  const handleFilter = useCallback((filter: string) => {
     setFilterValue(filter);
     if (onFilter) {
       onFilter(filter);
@@ -188,18 +190,25 @@ export const Menu= ({
 
   const getSizeClasses = () => {
     switch (size) {
-      case 'sm';
-      case 'lg';
-      default;
+      case 'sm':
+        return 'menu__trigger--sm';
+      case 'lg':
+        return 'menu__trigger--lg';
+      default: // md
+        return 'menu__trigger--md';
     }
   };
 
   const getVariantClasses = () => {
     switch (variant) {
-      case 'dropdown';
-      case 'context';
-      case 'command';
-      default;
+      case 'dropdown':
+        return 'menu__content--dropdown';
+      case 'context':
+        return 'menu__content--context';
+      case 'command':
+        return 'menu__content--command';
+      default: // default
+        return 'menu__content--default';
     }
   };
 
@@ -207,7 +216,7 @@ export const Menu= ({
     return 'menu menu--stan-design';
   };
 
-  const getItemClasses = (item) => {
+  const getItemClasses = (item: NavigationItem) => {
     let classes = `menu__item ${getSizeClasses()}`;
 
     if (item.disabled) {
@@ -223,15 +232,20 @@ export const Menu= ({
 
   const getPlacementClasses = () => {
     switch (placement) {
-      case 'top';
-      case 'bottom';
-      case 'left';
-      case 'right';
-      default;
+      case 'top':
+        return 'menu__content--placement-top';
+      case 'bottom':
+        return 'menu__content--placement-bottom';
+      case 'left':
+        return 'menu__content--placement-left';
+      case 'right':
+        return 'menu__content--placement-right';
+      default:
+        return 'menu__content--placement-bottom';
     }
   };
 
-  const renderMenuItem = (item) => (
+  const renderMenuItem = (item: NavigationItem) => (
     <button
       key={item.id}
       onClick={() => handleItemClick(item)}
@@ -254,7 +268,7 @@ export const Menu= ({
     </button>
   );
 
-  const renderMenuGroup = (group) => (
+  const renderMenuGroup = (group: NavigationGroup) => (
     <div key={group.id} className="menu__group">
       {group.title && (
         <div className="menu__group-title">
@@ -286,7 +300,7 @@ export const Menu= ({
           ref={menuRef}
           role="menu"
           className={`menu__content ${getVariantClasses()} ${getPlacementClasses()}`}
-          style={{ marginTop=== 'bottom' ? offset }}
+          style={{ marginTop: placement === 'bottom' ? offset : undefined }}
         >
           {/* Search Bar */}
           {searchable && (
@@ -324,7 +338,7 @@ export const Menu= ({
 
           {/* Menu Items */}
           <div className="menu__items">
-            {groups ? groups.map(renderMenuGroup) )}
+            {groups ? groups.map(renderMenuGroup) : filteredItems.map(renderMenuItem)}
           </div>
 
           {/* Selection Actions */}
@@ -336,7 +350,7 @@ export const Menu= ({
                 </span>
                 <button
                   onClick={() => {
-                    const newSelectedItems] = [];
+                    const newSelectedItems: string[] = [];
                     if (selectedItems === undefined) {
                       setInternalSelectedItems(newSelectedItems);
                     }

package/dist/components/ui/navigation/menu.js

@@ -8,36 +8,36 @@ import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
 import { MenuProps, NavigationItem, NavigationGroup } from './types';
 
 // Simple icon components
-const ChevronDownIcon}> = ({ className = '' }) => (
+const ChevronDownIcon: 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="M19 9l-7 7-7-7" />
   </svg>
 );
 
-const ChevronRightIcon}> = ({ className = '' }) => (
+const ChevronRightIcon: 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="M9 5l7 7-7 7" />
   </svg>
 );
 
-const MagnifyingGlassIcon}> = ({ className = '' }) => (
+const MagnifyingGlassIcon: 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
   </svg>
 );
 
-const FunnelIcon}> = ({ className = '' }) => (
+const FunnelIcon: 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="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z" />
   </svg>
 );
 
-export const Menu= ({
+export const Menu: React.FC<MenuProps> = ({
   items = [],
   groups,
   variant = 'dropdown',
   size = 'md',
-  // TODO, trigger, showArrow, and fullWidth in future version
+  // TODO: Implement orientation, trigger, showArrow, and fullWidth in future version
   // orientation = 'horizontal',
   // trigger = 'click',
   placement = 'bottom',
@@ -55,23 +55,24 @@ export const Menu= ({
   selectedItems = [],
   onSelectionChange,
   className = '',
-  'data-testid'= 'menu',
+  'data-testid': testId = 'menu',
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [filterValue, setFilterValue] = useState('');
   const [internalSelectedItems, setInternalSelectedItems] = useState<string[]>(selectedItems || []);
-  // TODO, setExpandedGroups] = useState<string[]>([]);
+  // TODO: Implement group expansion functionality in future version
+  // const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
   
   const menuRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
 
   // Use controlled or uncontrolled selected items
-  const currentSelectedItems = selectedItems !== undefined ? selectedItems ;
+  const currentSelectedItems = selectedItems !== undefined ? selectedItems : internalSelectedItems;
 
   // Handle click outside to close menu
   useEffect(() => {
-    const handleClickOutside = (event) => {
+    const handleClickOutside = (event: MouseEvent) => {
       if (menuRef.current && !menuRef.current.contains(event.target as Node) &&
           triggerRef.current && !triggerRef.current.contains(event.target as Node)) {
         setIsOpen(false);
@@ -89,7 +90,7 @@ export const Menu= ({
 
   // Handle escape key to close menu
   useEffect(() => {
-    const handleEscape = (event) => {
+    const handleEscape = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         setIsOpen(false);
       }
@@ -109,11 +110,11 @@ export const Menu= ({
     setIsOpen(!isOpen);
   }, [disabled, loading, isOpen]);
 
-  const handleItemClick = useCallback((item) => {
+  const handleItemClick = useCallback((item: NavigationItem) => {
     if (item.disabled) return;
 
     if (selectable) {
-      let newSelectedItems];
+      let newSelectedItems: string[];
       
       if (multiSelect) {
         if (currentSelectedItems.includes(item.id)) {
@@ -144,22 +145,23 @@ export const Menu= ({
     }
   }, [selectable, multiSelect, currentSelectedItems, selectedItems, onSelectionChange]);
 
-  // TODO= useCallback((groupId) => {
+  // TODO: Implement group toggle functionality in future version
+  // const handleGroupToggle = useCallback((groupId: string) => {
   //   setExpandedGroups(prev => 
   //     prev.includes(groupId) 
   //       ? prev.filter(id => id !== groupId)
-  //       , groupId]
+  //       : [...prev, groupId]
   //   );
   // }, []);
 
-  const handleSearch = useCallback((query) => {
+  const handleSearch = useCallback((query: string) => {
     setSearchQuery(query);
     if (onSearch) {
       onSearch(query);
     }
   }, [onSearch]);
 
-  const handleFilter = useCallback((filter) => {
+  const handleFilter = useCallback((filter: string) => {
     setFilterValue(filter);
     if (onFilter) {
       onFilter(filter);
@@ -188,18 +190,25 @@ export const Menu= ({
 
   const getSizeClasses = () => {
     switch (size) {
-      case 'sm';
-      case 'lg';
-      default;
+      case 'sm':
+        return 'menu__trigger--sm';
+      case 'lg':
+        return 'menu__trigger--lg';
+      default: // md
+        return 'menu__trigger--md';
     }
   };
 
   const getVariantClasses = () => {
     switch (variant) {
-      case 'dropdown';
-      case 'context';
-      case 'command';
-      default;
+      case 'dropdown':
+        return 'menu__content--dropdown';
+      case 'context':
+        return 'menu__content--context';
+      case 'command':
+        return 'menu__content--command';
+      default: // default
+        return 'menu__content--default';
     }
   };
 
@@ -207,7 +216,7 @@ export const Menu= ({
     return 'menu menu--stan-design';
   };
 
-  const getItemClasses = (item) => {
+  const getItemClasses = (item: NavigationItem) => {
     let classes = `menu__item ${getSizeClasses()}`;
 
     if (item.disabled) {
@@ -223,15 +232,20 @@ export const Menu= ({
 
   const getPlacementClasses = () => {
     switch (placement) {
-      case 'top';
-      case 'bottom';
-      case 'left';
-      case 'right';
-      default;
+      case 'top':
+        return 'menu__content--placement-top';
+      case 'bottom':
+        return 'menu__content--placement-bottom';
+      case 'left':
+        return 'menu__content--placement-left';
+      case 'right':
+        return 'menu__content--placement-right';
+      default:
+        return 'menu__content--placement-bottom';
     }
   };
 
-  const renderMenuItem = (item) => (
+  const renderMenuItem = (item: NavigationItem) => (
     <button
       key={item.id}
       onClick={() => handleItemClick(item)}
@@ -254,7 +268,7 @@ export const Menu= ({
     </button>
   );
 
-  const renderMenuGroup = (group) => (
+  const renderMenuGroup = (group: NavigationGroup) => (
     <div key={group.id} className="menu__group">
       {group.title && (
         <div className="menu__group-title">
@@ -286,7 +300,7 @@ export const Menu= ({
           ref={menuRef}
           role="menu"
           className={`menu__content ${getVariantClasses()} ${getPlacementClasses()}`}
-          style={{ marginTop=== 'bottom' ? offset }}
+          style={{ marginTop: placement === 'bottom' ? offset : undefined }}
         >
           {/* Search Bar */}
           {searchable && (
@@ -324,7 +338,7 @@ export const Menu= ({
 
           {/* Menu Items */}
           <div className="menu__items">
-            {groups ? groups.map(renderMenuGroup) )}
+            {groups ? groups.map(renderMenuGroup) : filteredItems.map(renderMenuItem)}
           </div>
 
           {/* Selection Actions */}
@@ -336,7 +350,7 @@ export const Menu= ({
                 </span>
                 <button
                   onClick={() => {
-                    const newSelectedItems] = [];
+                    const newSelectedItems: string[] = [];
                     if (selectedItems === undefined) {
                       setInternalSelectedItems(newSelectedItems);
                     }