@campxdev/react-blueprint 2.3.0 → 2.3.2

package/dist/esm/types/src/components/Layout/AppHeader/AppHeader.d.ts

@@ -4,6 +4,7 @@ export type AppHeaderProps = {
     actions?: ReactNode[];
     profileActions?: ReactNode[];
     appsMenu?: ReactNode;
+    centerContent?: ReactNode;
     clientLogoUrl?: string;
     clientName?: string;
     userFullName: string;
@@ -19,4 +20,4 @@ export type AppHeaderProps = {
     onChangeInstitutionClick?: () => void;
     onAvatarClick?: () => void;
 };
-export declare const AppHeader: ({ actions, profileActions, profileSx, clientLogoUrl, onLogoutClick, designation, clientName, userFullName, collapsed, institutionsData, showActiveDevices, headerSx, onAccountClick, onActiveDevicesClick, onChangeInstitutionClick, onAvatarClick, }: AppHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AppHeader: ({ actions, profileActions, profileSx, clientLogoUrl, onLogoutClick, designation, clientName, userFullName, collapsed, institutionsData, showActiveDevices, headerSx, centerContent, onAccountClick, onActiveDevicesClick, onChangeInstitutionClick, onAvatarClick, }: AppHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/Layout/AppLayout/components/AppBar.d.ts

@@ -3,6 +3,8 @@ import { SideMenuItemProps } from './Sidebar/interfaces';
 interface AppBarProps {
     /** Right section component (actions, profile, etc.) */
     rightSection?: React.ReactNode;
+    /** Center section component (workspace switcher, etc.) */
+    centerSection?: React.ReactNode;
     /** Menu items for mobile drawer */
     menu?: SideMenuItemProps[];
     /** Custom className for the AppBar */

package/dist/esm/types/src/components/Layout/AppLayout/types.d.ts

@@ -17,6 +17,8 @@ export interface AppLayoutProps {
     menu: SideMenuItemProps[];
     /** AppBar customization - Primary approach */
     rightSection?: ReactNode;
+    /** AppBar center section customization */
+    centerSection?: ReactNode;
     /** Layout customization */
     mainContainerSx?: any;
     /** Help documentation configuration for route-based contextual help */

package/dist/esm/types/src/components/Navigation/Stepper/Stepper.d.ts

@@ -1,13 +1,49 @@
 import { SxProps } from '@mui/material';
 interface StepperProps {
+    /** Orientation of the stepper */
     orientation: 'vertical' | 'horizontal';
+    /** Current active step index (0-based) */
     activeStep: number;
+    /** Array of step items with labels and optional descriptions */
     steps: StepItem[];
+    /** Additional styles for the container */
     containerSx: SxProps;
+    /** Callback function called when a step is clicked. Receives the step index as parameter */
+    onStepClick?: (stepIndex: number) => void;
+    /** Whether to allow navigation by clicking on steps. Defaults to true */
+    allowNavigation?: boolean;
 }
 interface StepItem {
+    /** The label text for the step */
     label: string;
+    /** Optional description text shown below the label */
     description?: string;
 }
-export declare const Stepper: ({ orientation, steps, activeStep, containerSx, }: StepperProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Enhanced Stepper component with navigation capabilities
+ *
+ * Features:
+ * - Click on any step to navigate to it (when allowNavigation is true)
+ * - Supports both vertical and horizontal orientations
+ * - Customizable styling through containerSx prop
+ * - Optional step descriptions
+ *
+ * @example
+ * ```tsx
+ * const [activeStep, setActiveStep] = useState(0);
+ *
+ * <Stepper
+ *   orientation="vertical"
+ *   activeStep={activeStep}
+ *   steps={[
+ *     { label: "Step 1", description: "First step" },
+ *     { label: "Step 2", description: "Second step" }
+ *   ]}
+ *   onStepClick={(stepIndex) => setActiveStep(stepIndex)}
+ *   allowNavigation={true}
+ *   containerSx={{}}
+ * />
+ * ```
+ */
+export declare const Stepper: ({ orientation, steps, activeStep, containerSx, onStepClick, allowNavigation, }: StepperProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/src/components/Navigation/Stepper/StepperComponents.d.ts

@@ -9,5 +9,7 @@ interface ConnectorProps {
     isVertical: boolean;
 }
 export declare const Connector: import("@mui/styled-engine").StyledComponent<import("@mui/material").StepConnectorProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ConnectorProps, {}, {}>;
-export declare function StepIcon(props: StepIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function StepIcon(props: StepIconProps & {
+    onClick?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/types/src/stories/Navigation/Stepper.stories.d.ts

@@ -4,6 +4,9 @@ declare const meta: Meta<typeof Stepper>;
 export default meta;
 type Story = StoryObj<typeof Stepper>;
 export declare const VerticalStepper: Story;
+export declare const InteractiveVerticalStepper: Story;
 export declare const VerticalStepperWithNoDescription: Story;
 export declare const HorizontalStepper: Story;
+export declare const InteractiveHorizontalStepper: Story;
+export declare const NonNavigableStepper: Story;
 export declare const HorizontalStepperWithNoDescription: Story;

package/dist/index.d.ts

@@ -941,6 +941,8 @@ interface AppLayoutProps {
     menu: SideMenuItemProps$1[];
     /** AppBar customization - Primary approach */
     rightSection?: ReactNode;
+    /** AppBar center section customization */
+    centerSection?: ReactNode;
     /** Layout customization */
     mainContainerSx?: any;
     /** Help documentation configuration for route-based contextual help */
@@ -1056,6 +1058,7 @@ type AppHeaderProps = {
     actions?: ReactNode[];
     profileActions?: ReactNode[];
     appsMenu?: ReactNode;
+    centerContent?: ReactNode;
     clientLogoUrl?: string;
     clientName?: string;
     userFullName: string;
@@ -1071,7 +1074,7 @@ type AppHeaderProps = {
     onChangeInstitutionClick?: () => void;
     onAvatarClick?: () => void;
 };
-declare const AppHeader: ({ actions, profileActions, profileSx, clientLogoUrl, onLogoutClick, designation, clientName, userFullName, collapsed, institutionsData, showActiveDevices, headerSx, onAccountClick, onActiveDevicesClick, onChangeInstitutionClick, onAvatarClick, }: AppHeaderProps) => react_jsx_runtime.JSX.Element;
+declare const AppHeader: ({ actions, profileActions, profileSx, clientLogoUrl, onLogoutClick, designation, clientName, userFullName, collapsed, institutionsData, showActiveDevices, headerSx, centerContent, onAccountClick, onActiveDevicesClick, onChangeInstitutionClick, onAvatarClick, }: AppHeaderProps) => react_jsx_runtime.JSX.Element;
 
 declare const Sidebar: ({ menu, collapsed, setCollapsed, }: {
     menu: SideMenuItemProps[];
@@ -1432,16 +1435,52 @@ type PreviewFilesProps = {
 declare const PreviewFiles: ({ files, label, onChange, showDownload, hideDelete, sx, ...props }: PreviewFilesProps) => react_jsx_runtime.JSX.Element;
 
 interface StepperProps {
+    /** Orientation of the stepper */
     orientation: 'vertical' | 'horizontal';
+    /** Current active step index (0-based) */
     activeStep: number;
+    /** Array of step items with labels and optional descriptions */
     steps: StepItem[];
+    /** Additional styles for the container */
     containerSx: SxProps;
+    /** Callback function called when a step is clicked. Receives the step index as parameter */
+    onStepClick?: (stepIndex: number) => void;
+    /** Whether to allow navigation by clicking on steps. Defaults to true */
+    allowNavigation?: boolean;
 }
 interface StepItem {
+    /** The label text for the step */
     label: string;
+    /** Optional description text shown below the label */
     description?: string;
 }
-declare const Stepper: ({ orientation, steps, activeStep, containerSx, }: StepperProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Enhanced Stepper component with navigation capabilities
+ *
+ * Features:
+ * - Click on any step to navigate to it (when allowNavigation is true)
+ * - Supports both vertical and horizontal orientations
+ * - Customizable styling through containerSx prop
+ * - Optional step descriptions
+ *
+ * @example
+ * ```tsx
+ * const [activeStep, setActiveStep] = useState(0);
+ *
+ * <Stepper
+ *   orientation="vertical"
+ *   activeStep={activeStep}
+ *   steps={[
+ *     { label: "Step 1", description: "First step" },
+ *     { label: "Step 2", description: "Second step" }
+ *   ]}
+ *   onStepClick={(stepIndex) => setActiveStep(stepIndex)}
+ *   allowNavigation={true}
+ *   containerSx={{}}
+ * />
+ * ```
+ */
+declare const Stepper: ({ orientation, steps, activeStep, containerSx, onStepClick, allowNavigation, }: StepperProps) => react_jsx_runtime.JSX.Element;
 
 interface CustomTabProps extends Omit<TabProps, 'component'> {
     key: string | number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "React UI component library for CampX applications",
   "author": "CampX",
   "license": "MIT",

package/src/components/Layout/AppHeader/AppHeader.tsx

@@ -8,6 +8,7 @@ export type AppHeaderProps = {
   actions?: ReactNode[];
   profileActions?: ReactNode[];
   appsMenu?: ReactNode;
+  centerContent?: ReactNode;
   clientLogoUrl?: string;
   clientName?: string;
   userFullName: string;
@@ -38,6 +39,7 @@ export const AppHeader = ({
   institutionsData,
   showActiveDevices = true,
   headerSx,
+  centerContent,
   // Destructuring the new onClick props
   onAccountClick,
   onActiveDevicesClick,
@@ -57,6 +59,13 @@ export const AppHeader = ({
         {clientName}
       </Typography>
 
+      {/* Center Content Section */}
+      {centerContent && (
+        <Stack alignItems={'center'} justifyContent={'center'} flex={1}>
+          {centerContent}
+        </Stack>
+      )}
+
       <Stack alignItems={'center'} gap={'12px'} flexDirection={'row'}>
         {actions.map((action) => action)}
 

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

@@ -8,6 +8,7 @@ export const AppLayout: React.FC<AppLayoutProps> = ({
   children,
   menu,
   rightSection,
+  centerSection,
   mainContainerSx = {},
   helpDocsConfig,
 }) => {
@@ -30,7 +31,11 @@ export const AppLayout: React.FC<AppLayoutProps> = ({
   return (
     <AppLayoutContainer>
       {/* AppBar - Full width at the top */}
-      <AppBar rightSection={rightSection} menu={menu} />
+      <AppBar
+        rightSection={rightSection}
+        centerSection={centerSection}
+        menu={menu}
+      />
 
       {/* Main Content - Single column, centered with max-width */}
       <MainContent

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

@@ -17,6 +17,7 @@ const AppBarContainer = styled('header')(({ theme }: { theme?: any }) => ({
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
+  position: 'relative', // Add relative positioning for absolute center positioning
   width: '100%',
   height: '64px',
   minHeight: '64px',
@@ -39,6 +40,8 @@ const AppBarContainer = styled('header')(({ theme }: { theme?: any }) => ({
 interface AppBarProps {
   /** Right section component (actions, profile, etc.) */
   rightSection?: React.ReactNode;
+  /** Center section component (workspace switcher, etc.) */
+  centerSection?: React.ReactNode;
   /** Menu items for mobile drawer */
   menu?: SideMenuItemProps[];
   /** Custom className for the AppBar */
@@ -49,6 +52,7 @@ interface AppBarProps {
 
 export const AppBar: React.FC<AppBarProps> = ({
   rightSection,
+  centerSection,
   menu = [],
   className = 'appHeaderV2',
   sx = {},
@@ -79,9 +83,31 @@ export const AppBar: React.FC<AppBarProps> = ({
         {isMobile ? <CampxIconV2 /> : <CampxFullLogoIconV2 size={28} />}
       </Stack>
 
+      {/* Center section - Custom content from props */}
+      {centerSection && (
+        <Stack
+          direction="row"
+          alignItems="center"
+          gap="12px"
+          sx={{
+            position: 'absolute',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            zIndex: 1,
+          }}
+        >
+          {centerSection}
+        </Stack>
+      )}
+
       {/* Right section - Custom content from props */}
       {rightSection && (
-        <Stack direction="row" alignItems="center" gap="12px">
+        <Stack
+          direction="row"
+          alignItems="center"
+          gap="12px"
+          sx={{ zIndex: 2 }}
+        >
           {rightSection}
         </Stack>
       )}

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

@@ -23,6 +23,9 @@ export interface AppLayoutProps {
   /** AppBar customization - Primary approach */
   rightSection?: ReactNode;
 
+  /** AppBar center section customization */
+  centerSection?: ReactNode;
+
   /** Layout customization */
   mainContainerSx?: any;
 

package/src/components/Navigation/Stepper/Stepper.tsx

@@ -9,25 +9,70 @@ import {
 import { Connector, StepIcon, StyledStepContent } from './StepperComponents';
 
 interface StepperProps {
+  /** Orientation of the stepper */
   orientation: 'vertical' | 'horizontal';
+  /** Current active step index (0-based) */
   activeStep: number;
+  /** Array of step items with labels and optional descriptions */
   steps: StepItem[];
+  /** Additional styles for the container */
   containerSx: SxProps;
+  /** Callback function called when a step is clicked. Receives the step index as parameter */
+  onStepClick?: (stepIndex: number) => void;
+  /** Whether to allow navigation by clicking on steps. Defaults to true */
+  allowNavigation?: boolean;
 }
 
 interface StepItem {
+  /** The label text for the step */
   label: string;
+  /** Optional description text shown below the label */
   description?: string;
 }
 
+/**
+ * Enhanced Stepper component with navigation capabilities
+ *
+ * Features:
+ * - Click on any step to navigate to it (when allowNavigation is true)
+ * - Supports both vertical and horizontal orientations
+ * - Customizable styling through containerSx prop
+ * - Optional step descriptions
+ *
+ * @example
+ * ```tsx
+ * const [activeStep, setActiveStep] = useState(0);
+ *
+ * <Stepper
+ *   orientation="vertical"
+ *   activeStep={activeStep}
+ *   steps={[
+ *     { label: "Step 1", description: "First step" },
+ *     { label: "Step 2", description: "Second step" }
+ *   ]}
+ *   onStepClick={(stepIndex) => setActiveStep(stepIndex)}
+ *   allowNavigation={true}
+ *   containerSx={{}}
+ * />
+ * ```
+ */
+
 export const Stepper = ({
   orientation,
   steps,
   activeStep = 0,
   containerSx,
+  onStepClick,
+  allowNavigation = true,
 }: StepperProps) => {
   const isVertical = orientation === 'vertical';
 
+  const handleStepClick = (stepIndex: number) => {
+    if (allowNavigation && onStepClick) {
+      onStepClick(stepIndex);
+    }
+  };
+
   return (
     <Box
       sx={{
@@ -43,7 +88,21 @@ export const Stepper = ({
       >
         {steps?.map((item, index) => (
           <Step key={index} expanded>
-            <StepLabel StepIconComponent={StepIcon}>{item?.label}</StepLabel>
+            <StepLabel
+              StepIconComponent={(props) => (
+                <StepIcon {...props} onClick={() => handleStepClick(index)} />
+              )}
+              onClick={() => handleStepClick(index)}
+              sx={{
+                cursor: allowNavigation && onStepClick ? 'pointer' : 'default',
+                '& .MuiStepLabel-label': {
+                  cursor:
+                    allowNavigation && onStepClick ? 'pointer' : 'default',
+                },
+              }}
+            >
+              {item?.label}
+            </StepLabel>
             <StyledStepContent
               isVertical={isVertical}
               activeStep={index < activeStep}

package/src/components/Navigation/Stepper/StepperComponents.tsx

@@ -40,14 +40,16 @@ export const Connector = styled(StepConnector)<ConnectorProps>(
   ({ theme, isVertical }) => ({
     [`&.${stepConnectorClasses.active}`]: {
       [`& .${stepConnectorClasses.line}`]: {
-        [isVertical ? 'borderLeft' : 'border']:
-          `1px solid ${theme.palette.primary.light}`,
+        [isVertical
+          ? 'borderLeft'
+          : 'border']: `1px solid ${theme.palette.primary.light}`,
       },
     },
     [`&.${stepConnectorClasses.completed}`]: {
       [`& .${stepConnectorClasses.line}`]: {
-        [isVertical ? 'borderLeft' : 'border']:
-          `1px solid ${theme.palette.primary.light}`,
+        [isVertical
+          ? 'borderLeft'
+          : 'border']: `1px solid ${theme.palette.primary.light}`,
       },
     },
     ...(isVertical
@@ -66,8 +68,8 @@ export const Connector = styled(StepConnector)<ConnectorProps>(
   }),
 );
 
-export function StepIcon(props: StepIconProps) {
-  const { active, completed, className } = props;
+export function StepIcon(props: StepIconProps & { onClick?: () => void }) {
+  const { active, completed, className, onClick } = props;
 
   const getIcon = () => {
     if (completed) return <CompletedStateIcon />;
@@ -75,12 +77,23 @@ export function StepIcon(props: StepIconProps) {
     return <UnCheckedRadioIcon />;
   };
 
-  return <StepIconRoot className={className}>{getIcon()}</StepIconRoot>;
+  return (
+    <StepIconRoot
+      className={className}
+      onClick={onClick}
+      sx={{
+        cursor: onClick ? 'pointer' : 'default',
+      }}
+    >
+      {getIcon()}
+    </StepIconRoot>
+  );
 }
 
-const StepIconRoot = styled('div')<{}>(({ theme }) => ({
+const StepIconRoot = styled('div')<{ sx?: any }>(({ theme, sx }) => ({
   width: 20,
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
+  ...sx,
 }));

package/src/stories/Navigation/Stepper.stories.tsx

@@ -1,10 +1,20 @@
 import { Meta, StoryObj } from '@storybook/react/*';
+import { useState } from 'react';
 import { Stepper } from '../../components/Navigation/Stepper/Stepper';
 
 const meta: Meta<typeof Stepper> = {
   title: 'Navigation/Stepper',
   component: Stepper,
-  argTypes: {},
+  argTypes: {
+    allowNavigation: {
+      control: 'boolean',
+      description: 'Allow clicking on steps to navigate',
+    },
+    onStepClick: {
+      action: 'step-clicked',
+      description: 'Callback when a step is clicked',
+    },
+  },
 };
 
 export default meta;
@@ -42,6 +52,30 @@ export const VerticalStepper: Story = {
     orientation: 'vertical',
     steps,
     activeStep: 2,
+    allowNavigation: true,
+  },
+};
+
+// Interactive Stepper with navigation
+export const InteractiveVerticalStepper: Story = {
+  render: (args) => {
+    const [activeStep, setActiveStep] = useState(0);
+
+    return (
+      <Stepper
+        {...args}
+        activeStep={activeStep}
+        onStepClick={(stepIndex) => {
+          setActiveStep(stepIndex);
+          args.onStepClick?.(stepIndex);
+        }}
+      />
+    );
+  },
+  args: {
+    orientation: 'vertical',
+    steps,
+    allowNavigation: true,
   },
 };
 
@@ -61,6 +95,39 @@ export const HorizontalStepper: Story = {
   },
 };
 
+// Interactive Horizontal Stepper with navigation
+export const InteractiveHorizontalStepper: Story = {
+  render: (args) => {
+    const [activeStep, setActiveStep] = useState(1);
+
+    return (
+      <Stepper
+        {...args}
+        activeStep={activeStep}
+        onStepClick={(stepIndex) => {
+          setActiveStep(stepIndex);
+          args.onStepClick?.(stepIndex);
+        }}
+      />
+    );
+  },
+  args: {
+    orientation: 'horizontal',
+    steps,
+    allowNavigation: true,
+  },
+};
+
+// Stepper with navigation disabled
+export const NonNavigableStepper: Story = {
+  args: {
+    orientation: 'vertical',
+    steps,
+    activeStep: 2,
+    allowNavigation: false,
+  },
+};
+
 export const HorizontalStepperWithNoDescription: Story = {
   args: {
     ...HorizontalStepper.args,