@campxdev/react-blueprint 3.0.0-alpha.5 → 3.0.0-alpha.6

package/src/components/Layout/AppLayout/components/Sidebar/StyledComponents.tsx

@@ -31,7 +31,18 @@ type ButtonProps = {
   onClick?: () => void;
 } & React.HTMLAttributes<HTMLButtonElement>;
 
-// Main sidebar container
+/**
+ * SidebarContainer Component
+ *
+ * Main container for the sidebar with flex layout, rounded corners, and overflow hidden.
+ * Serves as the root wrapper for all sidebar content including header, menu, and footer.
+ *
+ * @param {React.ReactNode} children - Content to render inside the sidebar
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {React.HTMLAttributes<HTMLDivElement>} props - Additional HTML div attributes
+ *
+ * @returns {React.ReactElement} A flex container for sidebar content
+ */
 export const SidebarContainer: React.FC<BaseProps> = ({
   children,
   className,
@@ -50,7 +61,19 @@ export const SidebarContainer: React.FC<BaseProps> = ({
   );
 };
 
-// Menu bar container with scrolling
+/**
+ * MenuBarContainer Component
+ *
+ * Scrollable container for menu items with custom scrollbar styling. Includes responsive
+ * design with different width and margin behavior on mobile vs desktop. Custom scrollbar
+ * uses theme colors with thin width.
+ *
+ * @param {React.ReactNode} children - Menu items to render inside the container
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {React.HTMLAttributes<HTMLDivElement>} props - Additional HTML div attributes
+ *
+ * @returns {React.ReactElement} A vertically scrollable menu container
+ */
 export const MenuBarContainer: React.FC<BaseProps> = ({
   children,
   className,
@@ -77,7 +100,19 @@ export const MenuBarContainer: React.FC<BaseProps> = ({
   );
 };
 
-// Menu header with back button
+/**
+ * MenuHeaderContainer Component
+ *
+ * Header container for displaying nested menu titles with back navigation.
+ * Provides fixed height with flex layout for centered or start-aligned content.
+ * Includes hover background effect.
+ *
+ * @param {React.ReactNode} children - Header content (typically back button and title)
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {React.HTMLAttributes<HTMLDivElement>} props - Additional HTML div attributes
+ *
+ * @returns {React.ReactElement} A header container for menu navigation
+ */
 export const MenuHeaderContainer: React.FC<BaseProps> = ({
   children,
   className,
@@ -96,7 +131,18 @@ export const MenuHeaderContainer: React.FC<BaseProps> = ({
   );
 };
 
-// Menu item containers
+/**
+ * MenuItemContainer Component
+ *
+ * Wrapper container for individual menu items with flex centering and rounded corners.
+ * Provides consistent spacing and layout for menu items.
+ *
+ * @param {React.ReactNode} children - Menu item content
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {React.HTMLAttributes<HTMLDivElement>} props - Additional HTML div attributes
+ *
+ * @returns {React.ReactElement} A centered flex container for a menu item
+ */
 export const MenuItemContainer: React.FC<BaseProps> = ({
   children,
   className,
@@ -109,6 +155,18 @@ export const MenuItemContainer: React.FC<BaseProps> = ({
   );
 };
 
+/**
+ * MenuItemButton Component
+ *
+ * Styled button for menu items with flex layout, whitespace handling, and rounded appearance.
+ * Based on Button component with ghost variant and custom padding.
+ *
+ * @param {React.ReactNode} children - Button content (icon and/or text)
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {React.HTMLAttributes<HTMLButtonElement>} props - Additional button attributes
+ *
+ * @returns {React.ReactElement} A styled button for menu navigation
+ */
 export const MenuItemButton: React.FC<ButtonProps> = ({
   children,
   className,
@@ -128,6 +186,18 @@ export const MenuItemButton: React.FC<ButtonProps> = ({
   );
 };
 
+/**
+ * MenuItemIcon Component
+ *
+ * Container for menu item icons with flex centering and right margin.
+ * Ensures icons are properly sized and aligned within menu items.
+ *
+ * @param {React.ReactNode} children - Icon element
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {React.HTMLAttributes<HTMLDivElement>} props - Additional HTML div attributes
+ *
+ * @returns {React.ReactElement} A centered flex container for an icon
+ */
 export const MenuItemIcon: React.FC<BaseProps> = ({
   children,
   className,
@@ -143,7 +213,20 @@ export const MenuItemIcon: React.FC<BaseProps> = ({
   );
 };
 
-// Link components for navigation
+/**
+ * MenuLink Component
+ *
+ * React Router Link component styled as a menu item. Shows different background color
+ * when the route matches the current location. Includes hover effects and transitions.
+ *
+ * @param {boolean} [match] - Whether the link destination matches current route
+ * @param {string} [to=''] - Route path to navigate to
+ * @param {React.ReactNode} children - Link content
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {any} props - Additional Link properties
+ *
+ * @returns {React.ReactElement} A styled navigation link
+ */
 export const MenuLink: React.FC<StyledLinkButtonProps> = ({
   match,
   to = '',
@@ -167,7 +250,20 @@ export const MenuLink: React.FC<StyledLinkButtonProps> = ({
   );
 };
 
-// Sub menu containers
+/**
+ * SubMenuContainer Component
+ *
+ * Container for sub-menu items that can expand/collapse or navigate.
+ * Shows different background color when active/matched. Used for menu items
+ * with expandable sub-items or internal navigation.
+ *
+ * @param {boolean} [match] - Whether the sub-menu is currently active/matched
+ * @param {React.ReactNode} children - Sub-menu content
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {any} props - Additional HTML attributes
+ *
+ * @returns {React.ReactElement} A styled container for sub-menu items
+ */
 export const SubMenuContainer: React.FC<StyledLinkButtonProps> = ({
   match,
   children,
@@ -189,7 +285,19 @@ export const SubMenuContainer: React.FC<StyledLinkButtonProps> = ({
   );
 };
 
-// Sub menu items
+/**
+ * SubMenuItemContainer Component
+ *
+ * Container for a list of sub-menu items that appear below a parent menu item.
+ * Includes left border, gap spacing, and left margin for visual hierarchy.
+ * Used to display expandable/collapsible sub-menu items.
+ *
+ * @param {React.ReactNode} children - Sub-menu item elements
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {React.HTMLAttributes<HTMLDivElement>} props - Additional HTML div attributes
+ *
+ * @returns {React.ReactElement} A flex column container for sub-menu items
+ */
 export const SubMenuItemContainer: React.FC<BaseProps> = ({
   children,
   className,
@@ -208,7 +316,18 @@ export const SubMenuItemContainer: React.FC<BaseProps> = ({
   );
 };
 
-// Hover icons
+/**
+ * HoverIcon Component
+ *
+ * Container for icons that appear on hover within menu items.
+ * Hidden by default and shown only when parent element is hovered.
+ *
+ * @param {React.ReactNode} children - Icon element to show on hover
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {React.HTMLAttributes<HTMLDivElement>} props - Additional HTML div attributes
+ *
+ * @returns {React.ReactElement} A hidden flex container that shows on hover
+ */
 export const HoverIcon: React.FC<BaseProps> = ({
   children,
   className,
@@ -227,7 +346,18 @@ export const HoverIcon: React.FC<BaseProps> = ({
   );
 };
 
-// Animation wrapper
+/**
+ * AnimationWrapper Component
+ *
+ * Generic wrapper component for content that may have animation effects.
+ * Provides full width and height to accommodate animated children.
+ *
+ * @param {React.ReactNode} children - Content to wrap with animation support
+ * @param {string} [className] - Additional CSS classes to apply
+ * @param {React.HTMLAttributes<HTMLDivElement>} props - Additional HTML div attributes
+ *
+ * @returns {React.ReactElement} A full-size flex container for animated content
+ */
 export const AnimationWrapper: React.FC<BaseProps> = ({
   children,
   className,

package/src/components/Layout/AppLayout/components/UserProfilePopup.tsx

@@ -29,6 +29,40 @@ export interface UserProfilePopupProps {
   collapsed?: boolean;
 }
 
+/**
+ * UserProfilePopup Component
+ *
+ * User profile dropdown menu component displayed in the sidebar footer. Shows user avatar/initials,
+ * and provides a menu with Account section, optional Active Devices, custom profile actions, and Logout.
+ * Automatically adapts layout when sidebar is collapsed (centered alignment, avatar only).
+ *
+ * @param {string} userFullName - User's full name (required, used for avatar text and display)
+ * @param {string} [email=''] - User's email address (shown in account section)
+ * @param {React.ReactNode[]} [profileActions=[]] - Custom menu items to include in the dropdown
+ * @param {() => void} [onLogout] - Callback handler when user clicks logout
+ * @param {string} [profileUrl] - URL to user's profile image (uses initials fallback if not provided)
+ * @param {string} [avatarClassName=''] - Additional CSS classes for the avatar component
+ * @param {boolean} [showActiveDevices=false] - Whether to show the "Active Devices" menu item
+ * @param {() => void} [onActiveDevicesClick] - Callback handler when user clicks active devices
+ * @param {() => void} [onAccountClick] - Callback handler when user clicks the account section
+ * @param {boolean} [collapsed] - Whether the sidebar is in collapsed state (affects layout)
+ *
+ * @returns {React.ReactElement} A dropdown menu anchored to user avatar with profile options
+ *
+ * @example
+ * ```tsx
+ * <UserProfilePopup
+ *   userFullName="Jane Smith"
+ *   email="jane@example.com"
+ *   profileUrl="/avatar.jpg"
+ *   showActiveDevices={true}
+ *   onLogout={handleLogout}
+ *   onAccountClick={navigateToSettings}
+ *   onActiveDevicesClick={showDevices}
+ *   collapsed={false}
+ * />
+ * ```
+ */
 export const UserProfilePopup: React.FC<UserProfilePopupProps> = ({
   collapsed,
   userFullName,

package/src/components/Layout/AppLayout/context/SidebarContext.tsx

@@ -13,6 +13,27 @@ interface SidebarProviderProps {
   initialCollapsed?: boolean;
 }
 
+/**
+ * SidebarProvider Component
+ *
+ * React Context provider that manages global sidebar collapse state and provides methods
+ * to toggle and set the collapse state. Wraps the application or specific layout sections
+ * to enable sidebar state management across the component tree.
+ *
+ * @param {React.ReactNode} children - Child components that will have access to sidebar context
+ * @param {boolean} [initialCollapsed=false] - Initial collapsed state of the sidebar
+ *
+ * @returns {React.ReactElement} Context provider wrapping children with sidebar state
+ *
+ * @example
+ * ```tsx
+ * <SidebarProvider initialCollapsed={isMobile}>
+ *   <AppLayout>
+ *     <Content />
+ *   </AppLayout>
+ * </SidebarProvider>
+ * ```
+ */
 export const SidebarProvider: React.FC<SidebarProviderProps> = ({
   children,
   initialCollapsed = false,
@@ -30,6 +51,33 @@ export const SidebarProvider: React.FC<SidebarProviderProps> = ({
   );
 };
 
+/**
+ * useSidebar Hook
+ *
+ * Custom React hook to access the sidebar context state and methods.
+ * Must be used within a SidebarProvider component, otherwise it throws an error.
+ *
+ * @returns {{
+ *   collapsed: boolean;
+ *   toggleSidebar: () => void;
+ *   setCollapsed: (collapsed: boolean) => void;
+ * }} Object containing sidebar state and methods to control it
+ *
+ * @throws {Error} If used outside of SidebarProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { collapsed, toggleSidebar, setCollapsed } = useSidebar();
+ *
+ *   return (
+ *     <button onClick={toggleSidebar}>
+ *       {collapsed ? 'Expand' : 'Collapse'}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
 export const useSidebar = () => {
   const context = useContext(SidebarContext);
   if (!context) {

package/src/components/Layout/AppLayout/types.ts

@@ -22,7 +22,7 @@ export interface AppLayoutProps {
   menu: SideMenuItemProps[];
 
   /**User profile parameters */
-  userProfileParams: UserProfilePopupProps;
+  userProfileParams?: UserProfilePopupProps;
 
   /** Switchers section customization - receives collapsed state */
   actions?: ReactNode | ((params: { collapsed: boolean }) => ReactNode);

package/src/components/Layout/PageContent/PageContent.tsx

@@ -7,6 +7,25 @@ interface PageContentProps {
   className?: string;
 }
 
+/**
+ * PageContent Component
+ *
+ * Main content area wrapper that provides responsive padding, scrolling behavior, and custom scrollbar styling.
+ * Automatically adjusts height based on screen size to account for page header and other UI elements.
+ * Includes thin scrollbar styling using Tailwind's scrollbar utilities.
+ *
+ * @param {React.ReactNode} children - Content to render inside the page content area
+ * @param {string} [className=''] - Additional CSS classes to apply to the container
+ *
+ * @returns {React.ReactElement} A scrollable content container with responsive height and styling
+ *
+ * @example
+ * ```tsx
+ * <PageContent className="bg-white">
+ *   <YourPageContent />
+ * </PageContent>
+ * ```
+ */
 const PageContent = ({ children, className }: PageContentProps) => {
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
 

package/src/components/Layout/PageHeader/PageHeader.tsx

@@ -33,6 +33,52 @@ interface PageHeaderProps {
   };
 }
 
+/**
+ * PageHeader Component
+ *
+ * Header component for page content that displays breadcrumbs and action bar with search,
+ * filter, add button, and custom action menus. Supports Redux integration for maintaining
+ * search and filter state across re-renders. Responsive design with mobile optimization.
+ *
+ * @param {string} [uniqueId] - Optional unique identifier for Redux state management of this header
+ * @param {number} pathTrimCount - Number of path segments to trim from breadcrumb
+ * @param {React.ReactElement} [breadcrumbAction] - Optional element to display next to breadcrumbs
+ * @param {SearchBarProps & { uniqueId?: string; searchText?: string }} [searchBarProps] - Configuration for search bar including placeholder
+ * @param {{
+ *   label?: string;
+ *   startIcon?: React.ReactNode;
+ *   components: React.ReactElement[];
+ * }} [filterButtonProps] - Configuration for filter dropdown with filter components
+ * @param {{
+ *   label?: string;
+ *   onClick: () => void;
+ * }} [addButtonProps] - Configuration for add/create button
+ * @param {{
+ *   menu: React.ReactNode[] | ((props: { close: () => void }) => React.ReactNode[]);
+ * }} [actionProps] - Configuration for additional action menu
+ *
+ * @returns {React.ReactElement} A responsive header with breadcrumbs and action controls
+ *
+ * @example
+ * ```tsx
+ * <PageHeader
+ *   uniqueId="users-list"
+ *   pathTrimCount={1}
+ *   searchBarProps={{
+ *     placeholder: "Search users...",
+ *     uniqueId: "users-list"
+ *   }}
+ *   filterButtonProps={{
+ *     label: "Filters",
+ *     components: [<StatusFilter />, <RoleFilter />]
+ *   }}
+ *   addButtonProps={{
+ *     label: "Add User",
+ *     onClick: handleAddUser
+ *   }}
+ * />
+ * ```
+ */
 const PageHeader = ({
   uniqueId,
   pathTrimCount,

package/src/components/Layout/PageHeader/components/SearchBar.tsx

@@ -3,6 +3,28 @@ import { setSearchForUniqueId } from '../../../../redux/slices/pageHeaderSlice';
 import { RootState } from '../../../../redux/store';
 import { SearchBar, type SearchBarProps } from '../../../export';
 
+/**
+ * PageHeaderSearchBar Component
+ *
+ * Redux-integrated search bar component that automatically manages search state in Redux store.
+ * The search value is persisted and retrieved using the provided uniqueId, allowing search state
+ * to survive component re-renders and navigation.
+ *
+ * @param {string} [uniqueId='default'] - Unique identifier for Redux state persistence (should match PageHeader uniqueId)
+ * @param {string} [searchText='Search'] - Placeholder text for the search input
+ * @param {SearchBarProps} props - Additional SearchBar component props
+ *
+ * @returns {React.ReactElement} A controlled search bar connected to Redux store
+ *
+ * @example
+ * ```tsx
+ * <PageHeaderSearchBar
+ *   uniqueId="users-list"
+ *   searchText="Search users..."
+ *   onSearch={handleSearch}
+ * />
+ * ```
+ */
 export const PageHeaderSearchBar = ({
   uniqueId = 'default',
   searchText = 'Search',

package/src/components/Layout/UserBox/UserBox.tsx

@@ -5,6 +5,46 @@ import { Typography } from '../../DataDisplay/Typography/Typography';
 import { DropdownMenu } from '../../Navigation/DropDownMenu/DropDownMenu';
 import { DropdownMenuItem } from '../../Navigation/DropDownMenu/DropdownMenuItem';
 
+/**
+ * UserBox Component
+ *
+ * User profile information and dropdown menu component with customizable sections.
+ * Displays user avatar with fallback to initials, supports optional designation,
+ * active devices toggle, custom actions, and logout. Avatar click can trigger
+ * custom handler or open the dropdown menu.
+ *
+ * @param {string} fullName - User's full name (required, used for avatar initials and display)
+ * @param {string} [designation=''] - User's job designation or title (optional)
+ * @param {any[]} [institutionsData] - Optional array of institution data (for future use)
+ * @param {React.ReactNode[]} actions - Array of custom menu item elements to include in dropdown
+ * @param {() => void} [onLogoutClick] - Callback handler when logout menu item is clicked
+ * @param {string} [profileUrl] - URL to user's profile image (uses initials fallback if not provided)
+ * @param {React.ReactNode} [changePassword] - Optional change password component/element
+ * @param {any} [profileSx={}] - Custom styles/className to apply to avatar element
+ * @param {boolean} [avatar=true] - Whether to show the avatar in the account menu section
+ * @param {boolean} [navigationIcon=true] - Whether to show the navigation icon next to account info
+ * @param {boolean} [showActiveDevices=true] - Whether to show the "Active Devices" menu item
+ * @param {() => void} [onAccountClick] - Callback handler when account section is clicked
+ * @param {() => void} [onActiveDevicesClick] - Callback handler when active devices item is clicked
+ * @param {() => void} [onChangeInstitutionClick] - Callback handler for changing institution (future use)
+ * @param {() => void} [onAvatarClick] - Callback handler when avatar is clicked (prevents menu opening if provided)
+ *
+ * @returns {React.ReactElement} A user profile dropdown menu component
+ *
+ * @example
+ * ```tsx
+ * <UserBox
+ *   fullName="John Doe"
+ *   designation="Software Engineer"
+ *   profileUrl="/avatars/john.jpg"
+ *   onLogoutClick={handleLogout}
+ *   onAccountClick={navigateToSettings}
+ *   onActiveDevicesClick={showActiveDevices}
+ *   actions={[<CustomMenuAction1 />, <CustomMenuAction2 />]}
+ *   showActiveDevices={true}
+ * />
+ * ```
+ */
 export default function UserBox({
   fullName,
   onLogoutClick,

package/src/components/Navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -22,12 +22,45 @@ import { ReactElement } from 'react';
 import { getBreadcrumbsCharacter } from '../../../utils/export';
 import { MenuToggleButton } from '../../Layout/AppLayout/components/MenuToggleButton';
 
+/**
+ * Props for the Breadcrumbs component
+ */
 export type BreadcrumbsProps = {
+  /** Number of path segments to trim from the beginning of the current URL path */
   pathTrimCount: number;
+  /** Optional CSS class names for the container element */
   containerClassName?: string;
+  /** Optional React element to render as an action button/component on the right side */
   action?: ReactElement;
 };
 
+/**
+ * Breadcrumbs component that displays a navigation breadcrumb trail based on the current URL path.
+ *
+ * Automatically generates breadcrumb items from the URL pathname and displays them with navigation links.
+ * When there are more than 2 breadcrumb items, it shows the first item, a dropdown menu with middle items,
+ * and the last item to save space.
+ *
+ * @component
+ * @param {BreadcrumbsProps} props - The component props
+ * @param {number} props.pathTrimCount - Number of path segments to trim from the beginning of the URL path
+ * @param {string} [props.containerClassName] - Optional CSS class names to apply to the container div
+ * @param {ReactElement} [props.action] - Optional React element displayed on the right side of the breadcrumb
+ *
+ * @returns {React.ReactElement} A div containing the breadcrumb navigation component with a menu toggle button and breadcrumb list
+ *
+ * @example
+ * // Basic usage
+ * <Breadcrumbs pathTrimCount={1} />
+ *
+ * @example
+ * // With custom action button
+ * <Breadcrumbs
+ *   pathTrimCount={2}
+ *   action={<button>Export</button>}
+ *   containerClassName="bg-gray-50 border-b"
+ * />
+ */
 export const Breadcrumbs = ({
   pathTrimCount,
   containerClassName,

package/src/components/Navigation/Calendar/Calendar.tsx

@@ -8,6 +8,69 @@ import { cn } from '../../../lib/utils';
 import './Calendar.css';
 import { CalendarProps } from './types';
 
+/**
+ * Calendar component that provides a fully-featured calendar interface with FullCalendar integration.
+ *
+ * This component displays an interactive calendar with support for events, drag-and-drop,
+ * resizing, and various view modes (month, week, day). It offers extensive customization options
+ * for appearance, behavior, and event handling.
+ *
+ * @component
+ * @param {CalendarProps} props - The component props
+ * @param {CalendarEvent[]} [props.events] - Array of calendar events to display. Defaults to empty array
+ * @param {(eventInfo: CalendarEventClickInfo) => void} [props.onEventClick] - Callback fired when an event is clicked
+ * @param {(dropInfo: CalendarEventDropInfo) => void} [props.onEventDrop] - Callback fired when an event is drag-dropped
+ * @param {(resizeInfo: CalendarEventResizeInfo) => void} [props.onEventResize] - Callback fired when an event is resized
+ * @param {(dateInfo: CalendarDateClickInfo) => void} [props.onDateClick] - Callback fired when a date is clicked
+ * @param {(selectInfo: CalendarDateSelectInfo) => void} [props.onDateSelect] - Callback fired when a date range is selected
+ * @param {(events: EventApi[]) => void} [props.onEventsSet] - Callback fired when the list of events changes
+ * @param {CalendarView} [props.initialView='dayGridMonth'] - Initial view mode to display (dayGridMonth, timeGridWeek, timeGridDay, listWeek)
+ * @param {CalendarView[]} [props.views] - Array of available view modes to show in view switcher
+ * @param {CalendarHeaderToolbar | boolean} [props.headerToolbar] - Header toolbar configuration object or false to hide it
+ * @param {boolean} [props.editable=false] - Whether events can be dragged/resized to modify dates
+ * @param {boolean} [props.selectable=false] - Whether users can select date ranges by clicking and dragging
+ * @param {boolean} [props.selectMirror=true] - Whether to show a visual mirror while selecting date ranges
+ * @param {boolean} [props.eventResizable=false] - Whether events can be resized by dragging their edges
+ * @param {boolean} [props.eventDraggable=false] - Whether events can be dragged to change their dates
+ * @param {boolean | number} [props.dayMaxEvents=true] - Maximum number of events to show per day (true for auto, false for unlimited)
+ * @param {string | number} [props.height='auto'] - Height of the calendar (CSS string or number in pixels)
+ * @param {number} [props.aspectRatio] - Aspect ratio for the calendar dimensions
+ * @param {React.HTMLAttributes<HTMLDivElement>} [props.containerProps] - Additional HTML attributes for the container div
+ * @param {string} [props.locale='en'] - Locale/language code for calendar text (e.g., 'en', 'es', 'fr')
+ * @param {string} [props.timezone='local'] - Timezone for displaying dates ('local' or standard timezone identifier)
+ * @param {0 | 1 | 2 | 3 | 4 | 5 | 6} [props.firstDayOfWeek=0] - First day of the week (0=Sunday, 1=Monday, etc.)
+ * @param {(eventInfo: any) => React.ReactNode} [props.eventContent] - Custom render function for event content
+ * @param {(dayInfo: any) => React.ReactNode} [props.dayCellContent] - Custom render function for day cell content
+ * @param {boolean} [props.showNavigationButtons=true] - Whether to show previous/next navigation buttons
+ * @param {boolean} [props.showViewSwitcher=true] - Whether to show view mode selector buttons
+ * @param {boolean} [props.showToday=true] - Whether to show the "today" button
+ * @param {boolean} [props.weekends=true] - Whether to display weekend days
+ * @param {any} [props.businessHours] - Business hours configuration
+ * @param {any} [props.eventConstraint] - Constraint rules for event dragging
+ * @param {any} [props.selectConstraint] - Constraint rules for date selection
+ *
+ * @returns {React.ReactElement} A div container with the FullCalendar component
+ *
+ * @example
+ * // Basic calendar with events
+ * <Calendar
+ *   events={[
+ *     { id: '1', title: 'Meeting', start: '2024-01-15' }
+ *   ]}
+ *   onEventClick={(info) => console.log(info.event.title)}
+ * />
+ *
+ * @example
+ * // Editable calendar with custom height
+ * <Calendar
+ *   events={events}
+ *   editable={true}
+ *   eventDraggable={true}
+ *   eventResizable={true}
+ *   height={600}
+ *   onEventDrop={(info) => updateEventDate(info)}
+ * />
+ */
 export const Calendar: React.FC<CalendarProps> = ({
   events = [],