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

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

@@ -8,25 +8,26 @@ import { useState, useCallback, useRef, useEffect } from 'react';
 import { SidebarProps, NavigationItem, NavigationGroup } from './types';
 
 // Simple icon components
-const ChevronLeftIcon}> = ({ className = '' }) => (
+const ChevronLeftIcon: 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="M15 19l-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>
 );
 
-// TODO}> = ({ className = '' }) => (
+// TODO: Implement close icon functionality in future version
+// const XMarkIcon: 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="M6 18L18 6M6 6l12 12" />
 //   </svg>
 // );
 
-export const Sidebar= ({
+export const Sidebar: React.FC<SidebarProps> = ({
   items = [],
   groups = [],
   variant = 'default',
@@ -50,32 +51,35 @@ export const Sidebar= ({
   onGroupToggle,
   expandedGroups = [],
   defaultExpandedGroups = [],
-  // TODO= true,
+  // TODO: Implement group icons in future version
+  // showGroupIcons = true,
   showItemIcons = true,
   showItemBadges = true,
   showItemDescriptions = true,
   sticky = false,
   zIndex = 1000,
   className = '',
-  'data-testid'= 'sidebar',
+  'data-testid': testId = 'sidebar',
 }) => {
   const [internalCollapsed, setInternalCollapsed] = useState<boolean>(
-    collapsed !== undefined ? collapsed );
+    collapsed !== undefined ? collapsed : defaultCollapsed
+  );
   const [internalExpandedGroups, setInternalExpandedGroups] = useState<string[]>(
-    expandedGroups !== undefined ? expandedGroups );
+    expandedGroups !== undefined ? expandedGroups : defaultExpandedGroups
+  );
   const [isOverlayOpen, setIsOverlayOpen] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
   
   const sidebarRef = useRef<HTMLDivElement>(null);
 
   // Use controlled or uncontrolled collapsed state
-  const currentCollapsed = collapsed !== undefined ? collapsed ;
-  const currentExpandedGroups = expandedGroups !== undefined ? expandedGroups ;
+  const currentCollapsed = collapsed !== undefined ? collapsed : internalCollapsed;
+  const currentExpandedGroups = expandedGroups !== undefined ? expandedGroups : internalExpandedGroups;
 
   // Handle responsive behavior
   useEffect(() => {
     const handleResize = () => {
-      const breakpointWidth = breakpoint === 'sm' ? 640 === 'md' ? 768 === 'lg' ? 1024 ;
+      const breakpointWidth = breakpoint === 'sm' ? 640 : breakpoint === 'md' ? 768 : breakpoint === 'lg' ? 1024 : 1280;
       setIsMobile(window.innerWidth < breakpointWidth);
     };
 
@@ -93,7 +97,7 @@ export const Sidebar= ({
 
   // Handle escape key for overlay
   useEffect(() => {
-    const handleEscape = (event) => {
+    const handleEscape = (event: KeyboardEvent) => {
       if (event.key === 'Escape' && isOverlayOpen && overlayCloseOnEscape) {
         setIsOverlayOpen(false);
       }
@@ -122,10 +126,10 @@ export const Sidebar= ({
     }
   }, [collapsed, currentCollapsed, collapsible, onCollapseChange]);
 
-  const handleGroupToggle = useCallback((groupId) => {
+  const handleGroupToggle = useCallback((groupId: string) => {
     const newExpandedGroups = currentExpandedGroups.includes(groupId)
       ? currentExpandedGroups.filter(id => id !== groupId)
-      , groupId];
+      : [...currentExpandedGroups, groupId];
 
     if (expandedGroups === undefined) {
       setInternalExpandedGroups(newExpandedGroups);
@@ -136,7 +140,7 @@ export const Sidebar= ({
     }
   }, [currentExpandedGroups, expandedGroups, onGroupToggle]);
 
-  const handleItemClick = useCallback((item) => {
+  const handleItemClick = useCallback((item: NavigationItem) => {
     if (item.disabled) return;
 
     if (onItemClick) {
@@ -161,19 +165,27 @@ export const Sidebar= ({
     if (currentCollapsed) return 'sidebar--collapsed';
 
     switch (size) {
-      case 'sm';
-      case 'lg';
-      case 'xl';
-      default;
+      case 'sm':
+        return 'sidebar--size-sm';
+      case 'lg':
+        return 'sidebar--size-lg';
+      case 'xl':
+        return 'sidebar--size-xl';
+      default: // md
+        return 'sidebar--size-md';
     }
   };
 
   const getVariantClasses = () => {
     switch (variant) {
-      case 'collapsible';
-      case 'overlay';
-      case 'drawer';
-      default;
+      case 'collapsible':
+        return 'sidebar--collapsible';
+      case 'overlay':
+        return 'sidebar--overlay';
+      case 'drawer':
+        return 'sidebar--drawer';
+      default: // default
+        return 'sidebar--default';
     }
   };
 
@@ -183,7 +195,7 @@ export const Sidebar= ({
 
   const getPositionClasses = () => {
     if (variant === 'overlay' || variant === 'drawer') {
-      return position === 'right' ? 'sidebar--position-right' ;
+      return position === 'right' ? 'sidebar--position-right' : 'sidebar--position-left';
     }
     return '';
   };
@@ -191,16 +203,17 @@ export const Sidebar= ({
   const getTransformClasses = () => {
     if (variant === 'overlay' || variant === 'drawer' || (isMobile && overlay)) {
       if (position === 'right') {
-        return isOverlayOpen ? 'sidebar--open' ;
+        return isOverlayOpen ? 'sidebar--open' : 'sidebar--closed-right';
       }
-      return isOverlayOpen ? 'sidebar--open' ;
+      return isOverlayOpen ? 'sidebar--open' : 'sidebar--closed-left';
     }
     return '';
   };
 
-  const getItemClasses = (item) => {
+  const getItemClasses = (item: NavigationItem) => {
     let classes = `sidebar__item ${
-      currentCollapsed ? 'sidebar__item--collapsed' }`;
+      currentCollapsed ? 'sidebar__item--collapsed' : 'sidebar__item--expanded'
+    }`;
 
     if (item.disabled) {
       classes += ' sidebar__item--disabled';
@@ -213,7 +226,7 @@ export const Sidebar= ({
     return classes;
   };
 
-  const getGroupClasses = (groupId) => {
+  const getGroupClasses = (groupId: string) => {
     const isExpanded = currentExpandedGroups.includes(groupId);
     let classes = 'sidebar__group';
 
@@ -226,16 +239,16 @@ export const Sidebar= ({
     return classes;
   };
 
-  const renderMenuItem = (item) => (
+  const renderMenuItem = (item: NavigationItem) => (
     <button
       key={item.id}
       onClick={() => handleItemClick(item)}
       disabled={item.disabled}
       className={getItemClasses(item)}
-      title={currentCollapsed ? item.label }
+      title={currentCollapsed ? item.label : undefined}
     >
       {showItemIcons && item.icon && (
-        <span className={`sidebar__item-icon ${currentCollapsed ? 'sidebar__item-icon--collapsed' }`}>
+        <span className={`sidebar__item-icon ${currentCollapsed ? 'sidebar__item-icon--collapsed' : 'sidebar__item-icon--expanded'}`}>
           {item.icon}
         </span>
       )}
@@ -255,16 +268,16 @@ export const Sidebar= ({
     </button>
   );
 
-  const renderMenuGroup = (group) => (
+  const renderMenuGroup = (group: NavigationGroup) => (
     <div key={group.id}>
       <button
         onClick={() => handleGroupToggle(group.id)}
         className={getGroupClasses(group.id)}
-        title={currentCollapsed ? group.title }
+        title={currentCollapsed ? group.title : undefined}
       >
-        {/* TODO}
+        {/* TODO: Add icon support to NavigationGroup in future version */}
         {/* {showGroupIcons && group.icon && (
-          <span className={currentCollapsed ? '' }>
+          <span className={currentCollapsed ? '' : 'mr-3'}>
             {group.icon}
           </span>
         )} */}
@@ -274,7 +287,8 @@ export const Sidebar= ({
             <div className="sidebar__group-title">{group.title}</div>
             <ChevronRightIcon
               className={`sidebar__group-arrow ${
-                currentExpandedGroups.includes(group.id) ? 'sidebar__group-arrow--expanded' }`}
+                currentExpandedGroups.includes(group.id) ? 'sidebar__group-arrow--expanded' : ''
+              }`}
             />
           </>
         )}
@@ -308,16 +322,16 @@ export const Sidebar= ({
           <button
             onClick={handleCollapseToggle}
             className="sidebar__toggle-button"
-            aria-label={currentCollapsed ? 'Expand sidebar' }
+            aria-label={currentCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
           >
-            {toggleIcon || (currentCollapsed ? <ChevronRightIcon className="sidebar__toggle-icon" /> ="sidebar__toggle-icon" />)}
+            {toggleIcon || (currentCollapsed ? <ChevronRightIcon className="sidebar__toggle-icon" /> : <ChevronLeftIcon className="sidebar__toggle-icon" />)}
           </button>
         </div>
       )}
 
       {/* Navigation Items */}
       <nav className="sidebar__navigation">
-        {groups && groups.length > 0 ? groups.map(renderMenuGroup) )}
+        {groups && groups.length > 0 ? groups.map(renderMenuGroup) : items.map(renderMenuItem)}
       </nav>
 
       {/* Footer */}
@@ -337,7 +351,7 @@ export const Sidebar= ({
         {isOverlayOpen && (
           <div
             className="sidebar__overlay-backdrop"
-            onClick={overlayCloseOnOutsideClick ? handleOverlayClose }
+            onClick={overlayCloseOnOutsideClick ? handleOverlayClose : undefined}
           />
         )}
 
@@ -360,7 +374,7 @@ export const Sidebar= ({
 
   // Desktop sidebar
   return (
-    <div className={`sidebar__wrapper ${sticky ? 'sidebar__wrapper--sticky' }`}>
+    <div className={`sidebar__wrapper ${sticky ? 'sidebar__wrapper--sticky' : ''}`}>
       {sidebarContent}
     </div>
   );

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

@@ -8,25 +8,26 @@ import { useState, useCallback, useRef, useEffect } from 'react';
 import { SidebarProps, NavigationItem, NavigationGroup } from './types';
 
 // Simple icon components
-const ChevronLeftIcon}> = ({ className = '' }) => (
+const ChevronLeftIcon: 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="M15 19l-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>
 );
 
-// TODO}> = ({ className = '' }) => (
+// TODO: Implement close icon functionality in future version
+// const XMarkIcon: 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="M6 18L18 6M6 6l12 12" />
 //   </svg>
 // );
 
-export const Sidebar= ({
+export const Sidebar: React.FC<SidebarProps> = ({
   items = [],
   groups = [],
   variant = 'default',
@@ -50,32 +51,35 @@ export const Sidebar= ({
   onGroupToggle,
   expandedGroups = [],
   defaultExpandedGroups = [],
-  // TODO= true,
+  // TODO: Implement group icons in future version
+  // showGroupIcons = true,
   showItemIcons = true,
   showItemBadges = true,
   showItemDescriptions = true,
   sticky = false,
   zIndex = 1000,
   className = '',
-  'data-testid'= 'sidebar',
+  'data-testid': testId = 'sidebar',
 }) => {
   const [internalCollapsed, setInternalCollapsed] = useState<boolean>(
-    collapsed !== undefined ? collapsed );
+    collapsed !== undefined ? collapsed : defaultCollapsed
+  );
   const [internalExpandedGroups, setInternalExpandedGroups] = useState<string[]>(
-    expandedGroups !== undefined ? expandedGroups );
+    expandedGroups !== undefined ? expandedGroups : defaultExpandedGroups
+  );
   const [isOverlayOpen, setIsOverlayOpen] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
   
   const sidebarRef = useRef<HTMLDivElement>(null);
 
   // Use controlled or uncontrolled collapsed state
-  const currentCollapsed = collapsed !== undefined ? collapsed ;
-  const currentExpandedGroups = expandedGroups !== undefined ? expandedGroups ;
+  const currentCollapsed = collapsed !== undefined ? collapsed : internalCollapsed;
+  const currentExpandedGroups = expandedGroups !== undefined ? expandedGroups : internalExpandedGroups;
 
   // Handle responsive behavior
   useEffect(() => {
     const handleResize = () => {
-      const breakpointWidth = breakpoint === 'sm' ? 640 === 'md' ? 768 === 'lg' ? 1024 ;
+      const breakpointWidth = breakpoint === 'sm' ? 640 : breakpoint === 'md' ? 768 : breakpoint === 'lg' ? 1024 : 1280;
       setIsMobile(window.innerWidth < breakpointWidth);
     };
 
@@ -93,7 +97,7 @@ export const Sidebar= ({
 
   // Handle escape key for overlay
   useEffect(() => {
-    const handleEscape = (event) => {
+    const handleEscape = (event: KeyboardEvent) => {
       if (event.key === 'Escape' && isOverlayOpen && overlayCloseOnEscape) {
         setIsOverlayOpen(false);
       }
@@ -122,10 +126,10 @@ export const Sidebar= ({
     }
   }, [collapsed, currentCollapsed, collapsible, onCollapseChange]);
 
-  const handleGroupToggle = useCallback((groupId) => {
+  const handleGroupToggle = useCallback((groupId: string) => {
     const newExpandedGroups = currentExpandedGroups.includes(groupId)
       ? currentExpandedGroups.filter(id => id !== groupId)
-      , groupId];
+      : [...currentExpandedGroups, groupId];
 
     if (expandedGroups === undefined) {
       setInternalExpandedGroups(newExpandedGroups);
@@ -136,7 +140,7 @@ export const Sidebar= ({
     }
   }, [currentExpandedGroups, expandedGroups, onGroupToggle]);
 
-  const handleItemClick = useCallback((item) => {
+  const handleItemClick = useCallback((item: NavigationItem) => {
     if (item.disabled) return;
 
     if (onItemClick) {
@@ -161,19 +165,27 @@ export const Sidebar= ({
     if (currentCollapsed) return 'sidebar--collapsed';
 
     switch (size) {
-      case 'sm';
-      case 'lg';
-      case 'xl';
-      default;
+      case 'sm':
+        return 'sidebar--size-sm';
+      case 'lg':
+        return 'sidebar--size-lg';
+      case 'xl':
+        return 'sidebar--size-xl';
+      default: // md
+        return 'sidebar--size-md';
     }
   };
 
   const getVariantClasses = () => {
     switch (variant) {
-      case 'collapsible';
-      case 'overlay';
-      case 'drawer';
-      default;
+      case 'collapsible':
+        return 'sidebar--collapsible';
+      case 'overlay':
+        return 'sidebar--overlay';
+      case 'drawer':
+        return 'sidebar--drawer';
+      default: // default
+        return 'sidebar--default';
     }
   };
 
@@ -183,7 +195,7 @@ export const Sidebar= ({
 
   const getPositionClasses = () => {
     if (variant === 'overlay' || variant === 'drawer') {
-      return position === 'right' ? 'sidebar--position-right' ;
+      return position === 'right' ? 'sidebar--position-right' : 'sidebar--position-left';
     }
     return '';
   };
@@ -191,16 +203,17 @@ export const Sidebar= ({
   const getTransformClasses = () => {
     if (variant === 'overlay' || variant === 'drawer' || (isMobile && overlay)) {
       if (position === 'right') {
-        return isOverlayOpen ? 'sidebar--open' ;
+        return isOverlayOpen ? 'sidebar--open' : 'sidebar--closed-right';
       }
-      return isOverlayOpen ? 'sidebar--open' ;
+      return isOverlayOpen ? 'sidebar--open' : 'sidebar--closed-left';
     }
     return '';
   };
 
-  const getItemClasses = (item) => {
+  const getItemClasses = (item: NavigationItem) => {
     let classes = `sidebar__item ${
-      currentCollapsed ? 'sidebar__item--collapsed' }`;
+      currentCollapsed ? 'sidebar__item--collapsed' : 'sidebar__item--expanded'
+    }`;
 
     if (item.disabled) {
       classes += ' sidebar__item--disabled';
@@ -213,7 +226,7 @@ export const Sidebar= ({
     return classes;
   };
 
-  const getGroupClasses = (groupId) => {
+  const getGroupClasses = (groupId: string) => {
     const isExpanded = currentExpandedGroups.includes(groupId);
     let classes = 'sidebar__group';
 
@@ -226,16 +239,16 @@ export const Sidebar= ({
     return classes;
   };
 
-  const renderMenuItem = (item) => (
+  const renderMenuItem = (item: NavigationItem) => (
     <button
       key={item.id}
       onClick={() => handleItemClick(item)}
       disabled={item.disabled}
       className={getItemClasses(item)}
-      title={currentCollapsed ? item.label }
+      title={currentCollapsed ? item.label : undefined}
     >
       {showItemIcons && item.icon && (
-        <span className={`sidebar__item-icon ${currentCollapsed ? 'sidebar__item-icon--collapsed' }`}>
+        <span className={`sidebar__item-icon ${currentCollapsed ? 'sidebar__item-icon--collapsed' : 'sidebar__item-icon--expanded'}`}>
           {item.icon}
         </span>
       )}
@@ -255,16 +268,16 @@ export const Sidebar= ({
     </button>
   );
 
-  const renderMenuGroup = (group) => (
+  const renderMenuGroup = (group: NavigationGroup) => (
     <div key={group.id}>
       <button
         onClick={() => handleGroupToggle(group.id)}
         className={getGroupClasses(group.id)}
-        title={currentCollapsed ? group.title }
+        title={currentCollapsed ? group.title : undefined}
       >
-        {/* TODO}
+        {/* TODO: Add icon support to NavigationGroup in future version */}
         {/* {showGroupIcons && group.icon && (
-          <span className={currentCollapsed ? '' }>
+          <span className={currentCollapsed ? '' : 'mr-3'}>
             {group.icon}
           </span>
         )} */}
@@ -274,7 +287,8 @@ export const Sidebar= ({
             <div className="sidebar__group-title">{group.title}</div>
             <ChevronRightIcon
               className={`sidebar__group-arrow ${
-                currentExpandedGroups.includes(group.id) ? 'sidebar__group-arrow--expanded' }`}
+                currentExpandedGroups.includes(group.id) ? 'sidebar__group-arrow--expanded' : ''
+              }`}
             />
           </>
         )}
@@ -308,16 +322,16 @@ export const Sidebar= ({
           <button
             onClick={handleCollapseToggle}
             className="sidebar__toggle-button"
-            aria-label={currentCollapsed ? 'Expand sidebar' }
+            aria-label={currentCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
           >
-            {toggleIcon || (currentCollapsed ? <ChevronRightIcon className="sidebar__toggle-icon" /> ="sidebar__toggle-icon" />)}
+            {toggleIcon || (currentCollapsed ? <ChevronRightIcon className="sidebar__toggle-icon" /> : <ChevronLeftIcon className="sidebar__toggle-icon" />)}
           </button>
         </div>
       )}
 
       {/* Navigation Items */}
       <nav className="sidebar__navigation">
-        {groups && groups.length > 0 ? groups.map(renderMenuGroup) )}
+        {groups && groups.length > 0 ? groups.map(renderMenuGroup) : items.map(renderMenuItem)}
       </nav>
 
       {/* Footer */}
@@ -337,7 +351,7 @@ export const Sidebar= ({
         {isOverlayOpen && (
           <div
             className="sidebar__overlay-backdrop"
-            onClick={overlayCloseOnOutsideClick ? handleOverlayClose }
+            onClick={overlayCloseOnOutsideClick ? handleOverlayClose : undefined}
           />
         )}
 
@@ -360,7 +374,7 @@ export const Sidebar= ({
 
   // Desktop sidebar
   return (
-    <div className={`sidebar__wrapper ${sticky ? 'sidebar__wrapper--sticky' }`}>
+    <div className={`sidebar__wrapper ${sticky ? 'sidebar__wrapper--sticky' : ''}`}>
       {sidebarContent}
     </div>
   );