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

package/src/components/Charts/BarChart/VerticalBarChart.tsx

@@ -23,10 +23,54 @@ import type {
   TitleProps,
 } from '../types/types';
 
+/**
+ * Data object for VerticalBarChart
+ * @typedef {Object} VerticalBarChartData
+ * @property {string|number} [key] - Dynamic data properties
+ */
 export interface VerticalBarChartData {
   [key: string]: string | number;
 }
 
+/**
+ * Props for the VerticalBarChart component
+ * @typedef {Object} VerticalBarChartProps
+ * @property {VerticalBarChartData[]} data - Array of data objects to display
+ * @property {string[]} dataKeys - Array of keys from data objects to visualize as bars
+ * @property {string} xAxisKey - The key to use for X-axis (category) labels
+ * @property {ChartConfig} config - Chart configuration with color mappings for data keys
+ * @property {number} [height=400] - Chart height in pixels
+ * @property {MarginProps} [margin={top: 20, right: 30, bottom: 20, left: 30}] - Chart margins
+ * @property {number} [barSize] - Width of each bar in pixels
+ * @property {number} [barGap=4] - Gap between bars in pixels
+ * @property {number|string} [barCategoryGap='10%'] - Gap between bar groups (pixels or percentage)
+ * @property {number|number[]} [radius=4] - Border radius for bars (single value or [top-left, top-right, bottom-right, bottom-left])
+ * @property {string} [stackId] - ID for stacking multiple bars together
+ * @property {boolean} [showGrid=true] - Whether to show the cartesian grid
+ * @property {string|number} [gridStrokeDasharray='3 3'] - Grid line dash pattern
+ * @property {Function} [xAxisTickFormatter] - Function to format X-axis tick labels
+ * @property {Function} [yAxisTickFormatter] - Function to format Y-axis tick labels
+ * @property {boolean} [showLabels=false] - Whether to show value labels on bars
+ * @property {'top'|'bottom'|'left'|'right'|'inside'|'outside'|'insideLeft'|'insideRight'|'insideTop'|'insideBottom'|'center'} [labelPosition='top'] - Position of bar labels
+ * @property {Function} [labelFormatter] - Function to format label values
+ * @property {boolean} [showTooltip=true] - Whether to show tooltip on hover
+ * @property {boolean|object} [tooltipCursor=false] - Tooltip cursor appearance
+ * @property {boolean} [hideTooltipLabel=false] - Whether to hide the label in tooltip
+ * @property {'line'|'dot'|'dashed'} [tooltipIndicator='dashed'] - Tooltip indicator style
+ * @property {LegendProps} [legend] - Legend configuration props
+ * @property {boolean} [showLegend=false] - Whether to display the legend
+ * @property {string} [title] - Chart title text
+ * @property {TitleProps} [titleProps={variant: 'h3', className: ''}] - Title styling props
+ * @property {string} [subtitle] - Chart subtitle text
+ * @property {SubTitleProps} [subtitleProps={variant: 'muted', className: ''}] - Subtitle styling props
+ * @property {string} [className] - CSS class for the container
+ * @property {boolean} [activeBar=false] - Enable/disable active bar highlighting
+ * @property {number} [activeBarIndex] - Index of the initially active bar
+ * @property {Function} [onBarClick] - Callback function when a bar is clicked
+ * @property {number} [animationDuration=750] - Duration of animations in milliseconds
+ * @property {'ease'|'ease-in'|'ease-out'|'ease-in-out'|'linear'} [animationEasing='ease-in-out'] - Easing function for animations
+ * @property {boolean} [accessibilityLayer=true] - Enable accessibility features
+ */
 export interface VerticalBarChartProps {
   // Core data
   data: VerticalBarChartData[];
@@ -101,6 +145,72 @@ export interface VerticalBarChartProps {
   accessibilityLayer?: boolean;
 }
 
+/**
+ * VerticalBarChart Component
+ * Displays data as vertical bars with comprehensive customization for grid, labels, tooltips, legends, and animations.
+ * Supports active bar highlighting with state management for user interaction.
+ *
+ * @component
+ * @param {VerticalBarChartProps} props - The component props
+ * @param {VerticalBarChartData[]} props.data - Array of data objects to display
+ * @param {string[]} props.dataKeys - Keys from data objects to visualize as bars
+ * @param {string} props.xAxisKey - The key for X-axis category labels
+ * @param {ChartConfig} props.config - Chart color and display configuration
+ * @param {number} [props.height] - Chart height in pixels
+ * @param {MarginProps} [props.margin] - Chart margin spacing
+ * @param {number} [props.barSize] - Width of each bar in pixels
+ * @param {number} [props.barGap] - Spacing between adjacent bars
+ * @param {number|string} [props.barCategoryGap] - Spacing between bar groups
+ * @param {number|number[]} [props.radius] - Border radius for bar corners
+ * @param {string} [props.stackId] - ID for stacked bars
+ * @param {boolean} [props.showGrid] - Show/hide background grid
+ * @param {string|number} [props.gridStrokeDasharray] - Grid line dash pattern
+ * @param {Function} [props.xAxisTickFormatter] - Custom X-axis label formatter
+ * @param {Function} [props.yAxisTickFormatter] - Custom Y-axis label formatter
+ * @param {boolean} [props.showLabels] - Show/hide value labels on bars
+ * @param {string} [props.labelPosition] - Label position relative to bars
+ * @param {Function} [props.labelFormatter] - Custom label value formatter
+ * @param {boolean} [props.showTooltip] - Show/hide tooltip
+ * @param {boolean|object} [props.tooltipCursor] - Tooltip cursor style
+ * @param {boolean} [props.hideTooltipLabel] - Hide/show tooltip label
+ * @param {'line'|'dot'|'dashed'} [props.tooltipIndicator] - Tooltip indicator style
+ * @param {LegendProps} [props.legend] - Legend configuration
+ * @param {boolean} [props.showLegend] - Show/hide legend
+ * @param {string} [props.title] - Chart title
+ * @param {TitleProps} [props.titleProps] - Title styling
+ * @param {string} [props.subtitle] - Chart subtitle
+ * @param {SubTitleProps} [props.subtitleProps] - Subtitle styling
+ * @param {string} [props.className] - Container CSS class
+ * @param {boolean} [props.activeBar] - Enable active bar highlighting
+ * @param {number} [props.activeBarIndex] - Initial active bar index
+ * @param {Function} [props.onBarClick] - Click handler callback
+ * @param {number} [props.animationDuration] - Animation duration in ms
+ * @param {'ease'|'ease-in'|'ease-out'|'ease-in-out'|'linear'} [props.animationEasing] - Animation easing
+ * @param {boolean} [props.accessibilityLayer] - Enable accessibility features
+ * @returns {React.ReactElement} Rendered vertical bar chart
+ *
+ * @example
+ * const data = [
+ *   { month: 'Jan', sales: 400, revenue: 2400 },
+ *   { month: 'Feb', sales: 300, revenue: 1398 }
+ * ];
+ * const config = {
+ *   sales: { label: 'Sales', color: '#3b82f6' },
+ *   revenue: { label: 'Revenue', color: '#10b981' }
+ * };
+ *
+ * return (
+ *   <VerticalBarChart
+ *     data={data}
+ *     dataKeys={['sales', 'revenue']}
+ *     xAxisKey="month"
+ *     config={config}
+ *     title="Monthly Sales & Revenue"
+ *     showLabels={true}
+ *     activeBar={true}
+ *   />
+ * );
+ */
 const VerticalBarChart: React.FC<VerticalBarChartProps> = ({
   data,
   dataKeys,

package/src/components/Charts/LineChart/LineChart.tsx

@@ -26,6 +26,32 @@ import {
   TitleProps,
 } from '../types/types';
 
+/**
+ * Props for the LineChart component
+ * @typedef {Object} LineChartProps
+ * @property {string} [title='Line Chart'] - Chart title text
+ * @property {boolean} [showSubtitle=false] - Whether to display subtitle
+ * @property {string} [subTitle=''] - Chart subtitle text
+ * @property {TitleProps} [titleProps={variant: 'large'}] - Title styling props
+ * @property {SubTitleProps} [subTitleProps={variant: 'small'}] - Subtitle styling props
+ * @property {ChartConfig} config - Chart configuration with color mappings for data keys
+ * @property {number} [width=700] - Chart width in pixels
+ * @property {number} [height=500] - Chart height in pixels
+ * @property {string} dataKey - The key in data objects to use for X-axis values
+ * @property {any[]} data - Array of data objects to display
+ * @property {LineItem[]} lines - Array of line configurations with curve types and colors
+ * @property {boolean} [showToolTip=true] - Whether to show tooltip on hover
+ * @property {boolean} [showLegend=true] - Whether to display the legend
+ * @property {CartesianGridProps} [cartesianGrid={showCartesianGrid: false}] - Grid configuration
+ * @property {AxisLabelProps} [axisLabelProps] - X and Y axis label configuration
+ * @property {BaseAxisProps} [baseAxisProps] - Base axis customization props
+ * @property {LegendProps} [legendSx] - Legend styling props
+ * @property {string} [className] - CSS class for the container
+ * @property {MarginProps} [margin={top: 20, right: 30, bottom: 20, left: 30}] - Chart margins
+ * @property {boolean} [hideTooltipLabel=false] - Whether to hide the label in tooltip
+ * @property {'line'|'dot'|'dashed'} [tooltipIndicator='line'] - Tooltip indicator style
+ * @property {boolean} [accessibilityLayer=true] - Enable accessibility features
+ */
 export type LineChartProps = {
   // Core data
   title?: string;
@@ -64,6 +90,14 @@ export type LineChartProps = {
   accessibilityLayer?: boolean;
 };
 
+/**
+ * Configuration for a single line in the LineChart
+ * @typedef {Object} LineItem
+ * @property {CurveType} type - Curve type for the line ('linear', 'monotone', 'natural', 'step', 'stepBefore', 'stepAfter', 'basisOpen', 'basis', 'basisClosed')
+ * @property {string} dataKey - The key in data objects to use for Y-axis values
+ * @property {string} stroke - Line color (CSS color value)
+ * @property {any} [activeDot] - Configuration for the active dot on hover
+ */
 type LineItem = {
   type: CurveType;
   dataKey: string;
@@ -71,6 +105,61 @@ type LineItem = {
   activeDot?: any;
 };
 
+/**
+ * LineChart Component
+ * Displays one or more lines with customizable curve types, colors, and interactive features.
+ * Supports grid, tooltips, legends, and labeled axes.
+ *
+ * @component
+ * @param {LineChartProps} props - The component props
+ * @param {string} [props.title] - Chart title
+ * @param {boolean} [props.showSubtitle] - Show/hide subtitle
+ * @param {string} [props.subTitle] - Chart subtitle
+ * @param {TitleProps} [props.titleProps] - Title styling
+ * @param {SubTitleProps} [props.subTitleProps] - Subtitle styling
+ * @param {ChartConfig} props.config - Chart color configuration
+ * @param {number} [props.width] - Chart width in pixels
+ * @param {number} [props.height] - Chart height in pixels
+ * @param {string} props.dataKey - X-axis data key
+ * @param {any[]} props.data - Chart data array
+ * @param {LineItem[]} props.lines - Line configurations
+ * @param {boolean} [props.showToolTip] - Show/hide tooltip
+ * @param {boolean} [props.showLegend] - Show/hide legend
+ * @param {CartesianGridProps} [props.cartesianGrid] - Grid settings
+ * @param {AxisLabelProps} [props.axisLabelProps] - Axis labels
+ * @param {BaseAxisProps} [props.baseAxisProps] - Axis customization
+ * @param {LegendProps} [props.legendSx] - Legend styling
+ * @param {string} [props.className] - Container CSS class
+ * @param {MarginProps} [props.margin] - Chart margins
+ * @param {boolean} [props.hideTooltipLabel] - Hide tooltip label
+ * @param {'line'|'dot'|'dashed'} [props.tooltipIndicator] - Tooltip indicator style
+ * @param {boolean} [props.accessibilityLayer] - Enable accessibility features
+ * @returns {React.ReactElement} Rendered line chart
+ *
+ * @example
+ * const data = [
+ *   { month: 'Jan', sales: 400, revenue: 2400 },
+ *   { month: 'Feb', sales: 300, revenue: 1398 }
+ * ];
+ * const config = {
+ *   sales: { label: 'Sales', color: '#3b82f6' },
+ *   revenue: { label: 'Revenue', color: '#10b981' }
+ * };
+ * const lines = [
+ *   { dataKey: 'sales', stroke: '#3b82f6', type: 'monotone' },
+ *   { dataKey: 'revenue', stroke: '#10b981', type: 'monotone' }
+ * ];
+ *
+ * return (
+ *   <LineChart
+ *     data={data}
+ *     dataKey="month"
+ *     lines={lines}
+ *     config={config}
+ *     title="Sales & Revenue Trend"
+ *   />
+ * );
+ */
 export const LineChart = ({
   title = 'Line Chart',
   showSubtitle = false,

package/src/components/Charts/PieChart/PieChart.tsx

@@ -15,6 +15,26 @@ import {
   TitleProps,
 } from '../types/types';
 
+/**
+ * Props for the PieChart component
+ * @typedef {Object} PieChartProps
+ * @property {string} [title='Pie Chart'] - Chart title text
+ * @property {boolean} [showSubtitle=false] - Whether to display subtitle
+ * @property {string} [subTitle=''] - Chart subtitle text
+ * @property {TitleProps} [titleProps={variant: 'large'}] - Title styling props
+ * @property {SubTitleProps} [subTitleProps={variant: 'small'}] - Subtitle styling props
+ * @property {MarginProps} [margin] - Chart margins
+ * @property {number} [width=500] - Chart width in pixels
+ * @property {number} [height=500] - Chart height in pixels
+ * @property {PieProps} pie1 - Configuration for the primary pie (required)
+ * @property {PieProps} [pie2] - Configuration for the secondary pie (optional, for donut charts)
+ * @property {string} [className] - CSS class for the container
+ * @property {boolean} [showLegend=true] - Whether to display the legend
+ * @property {LegendProps} [legendSx] - Legend styling props
+ * @property {boolean} [showToolTip=true] - Whether to show tooltip on hover
+ * @property {ChartConfig} config - Chart configuration with color mappings
+ * @property {boolean} [hideTooltipLabel=false] - Whether to hide the label in tooltip
+ */
 export type PieChartProps = {
   title?: string;
   showSubtitle?: boolean;
@@ -34,6 +54,22 @@ export type PieChartProps = {
   hideTooltipLabel?: boolean;
 };
 
+/**
+ * Configuration for a single pie in the PieChart
+ * @typedef {Object} PieProps
+ * @property {any[]} data - Array of data objects for the pie slices
+ * @property {string} dataKey - The key in data objects to use for slice values
+ * @property {string} [nameKey] - The key in data objects to use for slice labels
+ * @property {number} [innerRadius] - Inner radius for donut charts (creates hollow center)
+ * @property {number} [outerRadius] - Outer radius of the pie
+ * @property {string} [fill] - Default fill color for pie slices
+ * @property {boolean} [label] - Whether to show labels on pie slices
+ * @property {string} [cx='50%'] - X-coordinate of pie center (percentage or pixels)
+ * @property {string} [cy='50%'] - Y-coordinate of pie center (percentage or pixels)
+ * @property {number} [startAngle] - Starting angle of the pie in degrees
+ * @property {number} [endAngle] - Ending angle of the pie in degrees
+ * @property {string[]} [colors] - Array of colors for pie slices (cycles if fewer than slices)
+ */
 type PieProps = {
   data: any[];
   dataKey: string;
@@ -49,6 +85,56 @@ type PieProps = {
   colors?: string[];
 };
 
+/**
+ * PieChart Component
+ * Displays data as one or two pie/donut charts with customizable colors, labels, and legend.
+ * Supports single pie, donut, or dual-pie layouts.
+ *
+ * @component
+ * @param {PieChartProps} props - The component props
+ * @param {string} [props.title] - Chart title
+ * @param {boolean} [props.showSubtitle] - Show/hide subtitle
+ * @param {string} [props.subTitle] - Chart subtitle
+ * @param {TitleProps} [props.titleProps] - Title styling
+ * @param {SubTitleProps} [props.subTitleProps] - Subtitle styling
+ * @param {MarginProps} [props.margin] - Chart margins
+ * @param {number} [props.width] - Chart width in pixels
+ * @param {number} [props.height] - Chart height in pixels
+ * @param {PieProps} props.pie1 - Primary pie configuration
+ * @param {PieProps} [props.pie2] - Secondary pie configuration (creates dual-pie)
+ * @param {string} [props.className] - Container CSS class
+ * @param {boolean} [props.showLegend] - Show/hide legend
+ * @param {LegendProps} [props.legendSx] - Legend styling
+ * @param {boolean} [props.showToolTip] - Show/hide tooltip
+ * @param {ChartConfig} props.config - Chart color configuration
+ * @param {boolean} [props.hideTooltipLabel] - Hide tooltip label
+ * @returns {React.ReactElement} Rendered pie chart
+ *
+ * @example
+ * const data = [
+ *   { name: 'Slice A', value: 400 },
+ *   { name: 'Slice B', value: 300 },
+ *   { name: 'Slice C', value: 300 }
+ * ];
+ * const config = {
+ *   name: { label: 'Category', color: '#3b82f6' },
+ *   value: { label: 'Value', color: '#10b981' }
+ * };
+ *
+ * return (
+ *   <PieChart
+ *     pie1={{
+ *       data: data,
+ *       dataKey: 'value',
+ *       nameKey: 'name',
+ *       colors: ['#3b82f6', '#10b981', '#f59e0b']
+ *     }}
+ *     config={config}
+ *     title="Sales Distribution"
+ *     showLegend={true}
+ *   />
+ * );
+ */
 export const PieChart = ({
   title = 'Pie Chart',
   showSubtitle = false,

package/src/components/Charts/TreeMap/TreeMap.tsx

@@ -10,6 +10,29 @@ import { Treemap as ReTreeMap } from 'recharts';
 import { AnimationTiming } from 'recharts/types/util/types';
 import { MarginProps, SubTitleProps, TitleProps } from '../types/types';
 
+/**
+ * Props for the TreeMap component
+ * @typedef {Object} TreeMapProps
+ * @property {any} data - Hierarchical data structure for the treemap (should have children property for nested data)
+ * @property {string|number} dataKey - The key to use for treemap cell sizing
+ * @property {ChartConfig} config - Chart configuration with color mappings
+ * @property {string} [title='Tree Map'] - Chart title text
+ * @property {boolean} [showSubtitle=false] - Whether to display subtitle
+ * @property {string} [subTitle=''] - Chart subtitle text
+ * @property {TitleProps} [titleProps={variant: 'large'}] - Title styling props
+ * @property {SubTitleProps} [subTitleProps={variant: 'small'}] - Subtitle styling props
+ * @property {number} [width=400] - Chart width in pixels
+ * @property {number} [height=200] - Chart height in pixels
+ * @property {MarginProps} [margin] - Chart margins
+ * @property {number} [aspectRatio] - Aspect ratio of treemap cells
+ * @property {string} [fill='#F8C12D'] - Default fill color for cells
+ * @property {string} [stroke='#fff'] - Border color for cells
+ * @property {string[]} [colors] - Array of colors for cells (overrides fill if provided)
+ * @property {string} [className] - CSS class for the container
+ * @property {boolean} [showToolTip=true] - Whether to show tooltip on hover
+ * @property {boolean} [isAnimationActive=false] - Whether to animate cells
+ * @property {AnimationTiming} [animationEasing='linear'] - Animation easing function
+ */
 export interface TreeMapProps {
   // Core data
   data: any;
@@ -41,6 +64,57 @@ export interface TreeMapProps {
   animationEasing?: AnimationTiming;
 }
 
+/**
+ * TreeMap Component
+ * Displays hierarchical data as a treemap visualization where cell sizes represent values.
+ * Each cell can be colored based on configured colors or a single fill color.
+ *
+ * @component
+ * @param {TreeMapProps} props - The component props
+ * @param {any} props.data - Hierarchical data structure with nested children
+ * @param {string|number} props.dataKey - Key for cell sizing calculation
+ * @param {ChartConfig} props.config - Chart color configuration
+ * @param {string} [props.title] - Chart title
+ * @param {boolean} [props.showSubtitle] - Show/hide subtitle
+ * @param {string} [props.subTitle] - Chart subtitle
+ * @param {TitleProps} [props.titleProps] - Title styling
+ * @param {SubTitleProps} [props.subTitleProps] - Subtitle styling
+ * @param {number} [props.width] - Chart width in pixels
+ * @param {number} [props.height] - Chart height in pixels
+ * @param {MarginProps} [props.margin] - Chart margins
+ * @param {number} [props.aspectRatio] - Cell aspect ratio
+ * @param {string} [props.fill] - Default cell fill color
+ * @param {string} [props.stroke] - Cell border color
+ * @param {string[]} [props.colors] - Array of colors for cells
+ * @param {string} [props.className] - Container CSS class
+ * @param {boolean} [props.showToolTip] - Show/hide tooltip
+ * @param {boolean} [props.isAnimationActive] - Enable/disable animations
+ * @param {AnimationTiming} [props.animationEasing] - Animation easing function
+ * @returns {React.ReactElement} Rendered treemap chart
+ *
+ * @example
+ * const data = {
+ *   name: 'Root',
+ *   children: [
+ *     { name: 'Category A', value: 400 },
+ *     { name: 'Category B', value: 300 },
+ *     { name: 'Category C', value: 200 }
+ *   ]
+ * };
+ * const config = {
+ *   value: { label: 'Value', color: '#3b82f6' }
+ * };
+ *
+ * return (
+ *   <TreeMap
+ *     data={data}
+ *     dataKey="value"
+ *     config={config}
+ *     title="Market Share"
+ *     colors={['#3b82f6', '#10b981', '#f59e0b']}
+ *   />
+ * );
+ */
 const TreeMap: React.FC<TreeMapProps> = ({
   title = 'Tree Map',
   titleProps = { variant: 'large' },
@@ -105,6 +179,22 @@ const TreeMap: React.FC<TreeMapProps> = ({
 
 export default TreeMap;
 
+/**
+ * CustomizedContent Component
+ * Renders custom content for treemap cells with text labels and borders.
+ * Only displays text for depth level 1 to avoid cluttering smaller cells.
+ *
+ * @param {Object} props - Treemap cell props
+ * @param {number} props.depth - Nesting depth of the cell
+ * @param {number} props.x - X coordinate of the cell
+ * @param {number} props.y - Y coordinate of the cell
+ * @param {number} props.width - Width of the cell
+ * @param {number} props.height - Height of the cell
+ * @param {string} props.name - Name/label of the cell
+ * @param {string} props.fill - Fill color of the cell
+ * @param {string} props.stroke - Border color of the cell
+ * @returns {React.ReactElement} SVG group element with rectangle and text
+ */
 const CustomizedContent = (props: any) => {
   const { depth, x, y, width, height, name, fill, stroke } = props;
 

package/src/components/DataDisplay/Accordion/Accordion.tsx

@@ -8,6 +8,16 @@ import {
 import { ReactNode, useEffect, useState } from 'react';
 import { Typography } from '../Typography/Typography';
 
+/**
+ * Props for individual accordion items
+ * @typedef {Object} AccordionItemProps
+ * @property {ReactNode} title - The title/header content of the accordion item
+ * @property {ReactNode} content - The main content displayed when item is expanded
+ * @property {ReactNode} [actions] - Optional action buttons or elements displayed in the header
+ * @property {string[]} [errorKeys] - Array of error field keys associated with this item
+ * @property {string} [className] - Optional CSS class for the accordion item container
+ * @property {string} [contentClassName] - Optional CSS class for the content section
+ */
 export type AccordionItemProps = {
   title: ReactNode;
   content: ReactNode;
@@ -17,6 +27,14 @@ export type AccordionItemProps = {
   contentClassName?: string;
 };
 
+/**
+ * Props for the Accordion component
+ * @typedef {Object} AccordionProps
+ * @property {AccordionItemProps[]} data - Array of accordion items to display
+ * @property {string} [className] - Optional CSS class for the accordion container
+ * @property {number} [defaultExpandedIndex] - Index of item to expand by default
+ * @property {string} [errorField] - Error field name to auto-expand item containing this error
+ */
 type AccordionProps = {
   data: AccordionItemProps[];
   className?: string;
@@ -24,6 +42,42 @@ type AccordionProps = {
   errorField?: string;
 };
 
+/**
+ * Accordion component for displaying collapsible sections
+ * Auto-expands section containing error field, supports custom actions per item
+ *
+ * @component
+ * @param {AccordionProps} props - Accordion configuration
+ * @param {AccordionItemProps[]} props.data - Array of accordion items with title, content, and optional actions
+ * @param {string} [props.className] - Additional CSS class for the accordion wrapper
+ * @param {number} [props.defaultExpandedIndex] - Index of the item to expand on initial render (0-based)
+ * @param {string} [props.errorField] - Field name containing error; matching item will auto-expand
+ * @returns {JSX.Element} Accordion component with collapsible sections
+ *
+ * @example
+ * // Basic accordion
+ * <Accordion
+ *   data={[
+ *     { title: "Section 1", content: "Content 1" },
+ *     { title: "Section 2", content: "Content 2" }
+ *   ]}
+ *   defaultExpandedIndex={0}
+ * />
+ *
+ * @example
+ * // With actions and error handling
+ * <Accordion
+ *   data={[
+ *     {
+ *       title: "Personal Info",
+ *       content: <PersonForm />,
+ *       actions: <Button>Edit</Button>,
+ *       errorKeys: ["firstName", "lastName"]
+ *     }
+ *   ]}
+ *   errorField="firstName"
+ * />
+ */
 export const Accordion = ({
   data,
   className,

package/src/components/DataDisplay/ActivityLogView/ActivityLogFilter.tsx

@@ -4,6 +4,16 @@ import { useState } from 'react';
 import { Button } from '../../Input/Button/Button';
 import { DatePicker } from '../../Input/DatePicker/DatePicker';
 
+/**
+ * Props for ActivityLogFilter component
+ * @typedef {Object} ActivityLogFilterProps
+ * @property {Date | null} fromDate - Current filter start date
+ * @property {Date | null} toDate - Current filter end date
+ * @property {(date: Date | null) => void} setFromDate - Update start date
+ * @property {(date: Date | null) => void} setToDate - Update end date
+ * @property {() => void} fetchNextPage - Callback to apply filters
+ * @property {boolean} isLoading - Whether data is loading
+ */
 interface ActivityLogFilterProps {
   fromDate: Date | null;
   toDate: Date | null;
@@ -13,6 +23,31 @@ interface ActivityLogFilterProps {
   isLoading: boolean;
 }
 
+/**
+ * ActivityLogFilter component for date range filtering
+ * Provides popover with date pickers and apply/clear buttons
+ *
+ * @component
+ * @param {ActivityLogFilterProps} props - Filter configuration
+ * @param {Date | null} props.fromDate - Start date filter
+ * @param {Date | null} props.toDate - End date filter
+ * @param {(date: Date | null) => void} props.setFromDate - Handler for start date change
+ * @param {(date: Date | null) => void} props.setToDate - Handler for end date change
+ * @param {() => void} props.fetchNextPage - Handler to apply filters
+ * @param {boolean} props.isLoading - Disable controls while loading
+ * @returns {JSX.Element} Filter button with date picker popover
+ *
+ * @example
+ * // Activity filter with date range
+ * <ActivityLogFilter
+ *   fromDate={startDate}
+ *   toDate={endDate}
+ *   setFromDate={setStart}
+ *   setToDate={setEnd}
+ *   fetchNextPage={() => applyFilters()}
+ *   isLoading={false}
+ * />
+ */
 export const ActivityLogFilter = ({
   fromDate,
   toDate,