@campxdev/react-blueprint 2.3.11 → 3.0.0-alpha.2

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

@@ -0,0 +1,230 @@
+import { cn } from '@/lib/utils';
+import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
+import { Button } from '@/shadcn-components/Input/Button/Button';
+import { Check, ChevronLeft, ChevronRight } from 'lucide-react';
+import React, { useEffect, useRef, useState } from 'react';
+import { StepperVariantProps } from './Stepper';
+import {
+  getConnectorClasses,
+  getStepState,
+  handleStepClick as handleStepClickUtil,
+} from './utils';
+
+const HorizontalStepper: React.FC<StepperVariantProps> = ({
+  activeStep,
+  steps,
+  containerClassName,
+  onStepClick,
+  allowNavigation = true,
+}) => {
+  // Refs to track indicator positions
+  const indicatorRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const [connectorPositions, setConnectorPositions] = useState<
+    { left: number; width: number; top: number }[]
+  >([]);
+  const currentStep = steps[activeStep];
+  const currentState = getStepState(activeStep, activeStep);
+  const canGoPrevious = activeStep > 0;
+  const canGoNext = activeStep < steps.length - 1;
+
+  // Calculate connector positions based on indicator refs
+  useEffect(() => {
+    const calculatePositions = () => {
+      if (indicatorRefs.current.length > 0) {
+        const spacing = 6; // Spacing in pixels on each side of the connector
+
+        const positions = indicatorRefs.current
+          .slice(0, -1)
+          .map((indicator, index) => {
+            if (!indicator || !indicatorRefs.current[index + 1]) {
+              return { left: 0, width: 0, top: 0 };
+            }
+
+            const currentRect = indicator.getBoundingClientRect();
+            const nextRect =
+              indicatorRefs.current[index + 1]!.getBoundingClientRect();
+            const containerRect =
+              indicator.offsetParent?.getBoundingClientRect();
+
+            if (!containerRect) {
+              return { left: 0, width: 0, top: 0 };
+            }
+
+            const left = currentRect.right - containerRect.left + spacing;
+            const width = nextRect.left - currentRect.right - spacing * 2;
+            const top =
+              currentRect.top - containerRect.top + currentRect.height / 2;
+
+            return { left, width, top };
+          });
+
+        setConnectorPositions(positions);
+      }
+    };
+
+    // Calculate positions initially
+    calculatePositions();
+
+    // Recalculate on window resize
+    window.addEventListener('resize', calculatePositions);
+
+    // Cleanup listener on unmount
+    return () => {
+      window.removeEventListener('resize', calculatePositions);
+    };
+  }, [steps, activeStep]);
+
+  const handlePrevious = () => {
+    if (canGoPrevious && onStepClick) {
+      onStepClick(activeStep - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (canGoNext && onStepClick) {
+      onStepClick(activeStep + 1);
+    }
+  };
+
+  const handleStepClick = (stepIndex: number) => {
+    handleStepClickUtil(stepIndex, allowNavigation, onStepClick);
+  };
+
+  return (
+    <div className={cn('w-full', containerClassName)}>
+      {/* Mobile View - Single step with navigation arrows (below md breakpoint) */}
+      <div className="md:hidden">
+        <div className="flex flex-col items-center">
+          {/* Indicator with Navigation Arrows */}
+          <div className="flex items-center justify-center gap-4">
+            {/* Previous Button */}
+            <Button
+              onClick={handlePrevious}
+              disabled={!canGoPrevious}
+              className="hover:bg-transparent"
+              variant={'ghost'}
+              size={'icon'}
+              aria-label="Previous step"
+            >
+              <ChevronLeft className="w-5 h-5" />
+            </Button>
+            {/* Step Indicator */}
+            <Button
+              variant={currentState === 'inactive' ? 'secondary' : 'default'}
+              className="h-8 w-8 rounded-full  duration-200"
+            >
+              {activeStep + 1}
+            </Button>
+
+            {/* Next Button */}
+            <Button
+              onClick={handleNext}
+              disabled={!canGoNext}
+              className="hover:bg-transparent"
+              variant={'ghost'}
+              size={'icon'}
+              aria-label="Next step"
+            >
+              <ChevronRight className="w-5 h-5" />
+            </Button>
+          </div>
+
+          {/* Step Content */}
+          <div className="flex flex-col gap-1 mt-3 text-center px-2">
+            <Typography
+              variant={currentState === 'inactive' ? 'muted' : 'small'}
+            >
+              {currentStep.label}
+            </Typography>
+            {currentStep.description && (
+              <Typography
+                variant={'small'}
+                className={cn(
+                  currentState === 'inactive'
+                    ? 'text-muted-foreground/60'
+                    : 'text-muted-foreground',
+                  'text-xs',
+                )}
+              >
+                {currentStep.description}
+              </Typography>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Desktop View - All steps with connectors (md breakpoint and above) */}
+      <div className="hidden md:block">
+        <div className="flex items-start justify-between relative">
+          {steps.map((step, index) => {
+            const state = getStepState(index, activeStep);
+            const isClickable = allowNavigation && onStepClick;
+
+            return (
+              <div key={index} className="flex items-start flex-1">
+                <div className="flex flex-col items-center">
+                  {/* Step Indicator */}
+                  <Button
+                    ref={(el) => (indicatorRefs.current[index] = el)}
+                    onClick={
+                      isClickable ? () => handleStepClick(index) : () => {}
+                    }
+                    variant={state === 'inactive' ? 'secondary' : 'default'}
+                    className="h-8 w-8 rounded-full duration-200"
+                  >
+                    {state === 'completed' ? (
+                      <Check className="w-4 h-4" />
+                    ) : (
+                      index + 1
+                    )}
+                  </Button>
+
+                  {/* Step Content */}
+                  <div className="flex flex-col gap-1 mt-3 text-center px-2">
+                    <Typography
+                      variant={state === 'inactive' ? 'muted' : 'small'}
+                    >
+                      {step.label}
+                    </Typography>
+                    {step.description && (
+                      <Typography
+                        variant={'small'}
+                        className={cn(
+                          state === 'inactive'
+                            ? 'text-muted-foreground/60'
+                            : 'text-muted-foreground',
+                          'text-xs',
+                        )}
+                      >
+                        {step.description}
+                      </Typography>
+                    )}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+
+          {/* Connectors - Positioned absolutely based on calculated positions */}
+          {connectorPositions.map((position, index) => (
+            <div
+              key={`connector-${index}`}
+              className={cn(
+                'absolute h-0.5 rounded-full transition-colors duration-200',
+                getConnectorClasses(index, activeStep),
+              )}
+              style={{
+                left: `${position.left}px`,
+                width: `${position.width}px`,
+                top: `${position.top}px`,
+              }}
+              aria-hidden="true"
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HorizontalStepper;

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

@@ -1,120 +1,53 @@
-import {
-  Box,
-  Stepper as MuiStepper,
-  Step,
-  StepLabel,
-  SxProps,
-  Typography,
-} from '@mui/material';
-import { Connector, StepIcon, StyledStepContent } from './StepperComponents';
+import React from 'react';
+import HorizontalStepper from './HorizontalStepper';
+import VerticalStepper from './VerticalStepper';
 
-interface StepperProps {
-  /** Orientation of the stepper */
-  orientation: 'vertical' | 'horizontal';
+/**
+ * Interface for individual step items
+ */
+export interface StepItem {
+  /** The label text for the step */
+  label: string;
+  /** Optional description text shown below the label */
+  description?: string;
+}
+
+/**
+ * Props for the Stepper Variant components
+ */
+export interface StepperVariantProps {
   /** 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;
+  /** Additional className for the container */
+  containerClassName?: string;
   /** 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 type StepperProps = StepperVariantProps & {
+  /** Orientation of the stepper - horizontal or vertical */
+  orientation?: 'vertical' | 'horizontal';
+};
 
 /**
- * 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={{}}
- * />
- * ```
+ * Main Stepper component that handles both horizontal and vertical orientations
  */
+const Stepper: React.FC<StepperProps> = ({
+  orientation = 'horizontal',
+  ...props
+}) => {
+  if (orientation === 'vertical') {
+    return <VerticalStepper {...props} />;
+  }
 
-export const Stepper = ({
-  orientation,
-  steps,
-  activeStep = 0,
-  containerSx,
-  onStepClick,
-  allowNavigation = true,
-}: StepperProps) => {
-  const isVertical = orientation === 'vertical';
+  return <HorizontalStepper {...props} />;
+};
 
-  const handleStepClick = (stepIndex: number) => {
-    if (allowNavigation && onStepClick) {
-      onStepClick(stepIndex);
-    }
-  };
+// Export individual components
+export { HorizontalStepper, VerticalStepper };
 
-  return (
-    <Box
-      sx={{
-        ...(isVertical ? { maxWidth: '300px' } : {}),
-        ...containerSx,
-      }}
-    >
-      <MuiStepper
-        activeStep={activeStep}
-        orientation={orientation}
-        alternativeLabel={!isVertical}
-        connector={<Connector isVertical={isVertical} />}
-      >
-        {steps?.map((item, index) => (
-          <Step key={index} expanded>
-            <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}
-              isLastStep={index === steps?.length - 1}
-            >
-              <Typography fontSize={'12px'} variant="label2">
-                {item?.description}
-              </Typography>
-            </StyledStepContent>
-          </Step>
-        ))}
-      </MuiStepper>
-    </Box>
-  );
-};
+// Default export
+export { Stepper };

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

@@ -0,0 +1,97 @@
+import { cn } from '@/lib/utils';
+import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
+import { Button } from '@/shadcn-components/Input/Button/Button';
+import { Check } from 'lucide-react';
+import React from 'react';
+import { StepperVariantProps } from './Stepper';
+import {
+  getConnectorClasses,
+  getStepState,
+  handleStepClick as handleStepClickUtil,
+} from './utils';
+
+const VerticalStepper: React.FC<StepperVariantProps> = ({
+  activeStep,
+  steps,
+  containerClassName,
+  onStepClick,
+  allowNavigation = true,
+}) => {
+  const handleStepClick = (stepIndex: number) => {
+    handleStepClickUtil(stepIndex, allowNavigation, onStepClick);
+  };
+
+  return (
+    <div className={cn('w-full', containerClassName)}>
+      <div className="flex flex-col">
+        {steps.map((step, index) => {
+          const state = getStepState(index, activeStep);
+          const isLast = index === steps.length - 1;
+          const isClickable = allowNavigation && onStepClick;
+
+          return (
+            <div key={index} className="flex">
+              {/* Left side: Indicator + Connector */}
+              <div className="flex flex-col items-center">
+                {/* Step Indicator */}
+                <Button
+                  onClick={
+                    isClickable ? () => handleStepClick(index) : () => {}
+                  }
+                  variant={state === 'inactive' ? 'secondary' : 'default'}
+                  className="h-8 w-8 rounded-full duration-200"
+                >
+                  {state === 'completed' ? (
+                    <Check className="w-4 h-4" />
+                  ) : (
+                    index + 1
+                  )}
+                </Button>
+
+                {/* Vertical Connector */}
+                {!isLast && (
+                  <div
+                    className={cn(
+                      'w-0.5 flex-1 min-h-[2rem] rounded-full transition-colors duration-200 my-2',
+                      getConnectorClasses(index, activeStep),
+                    )}
+                    aria-hidden="true"
+                  />
+                )}
+              </div>
+
+              {/* Right side: Content */}
+              <div
+                className={cn(
+                  'ml-4',
+                  step.description ? 'mt-1' : 'mt-2.5',
+                  !isLast && 'pb-3',
+                  'flex flex-col gap-1',
+                )}
+              >
+                <Typography variant={state === 'inactive' ? 'muted' : 'small'}>
+                  {step.label}
+                </Typography>
+                {step.description && (
+                  <Typography
+                    variant={'small'}
+                    className={cn(
+                      state === 'inactive'
+                        ? 'text-muted-foreground/60'
+                        : 'text-muted-foreground',
+                      'text-xs',
+                    )}
+                  >
+                    {step.description}
+                  </Typography>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default VerticalStepper;

package/src/components/Navigation/Stepper/utils.ts

@@ -0,0 +1,67 @@
+// Type for step state
+export type StepState = 'completed' | 'active' | 'inactive';
+
+/**
+ * Determines the state of a step based on the active step index
+ */
+export const getStepState = (
+  stepIndex: number,
+  activeStep: number,
+): StepState => {
+  if (stepIndex < activeStep) return 'completed';
+  if (stepIndex === activeStep) return 'active';
+  return 'inactive';
+};
+
+/**
+ * Returns the appropriate CSS classes for step indicator based on state
+ */
+export const getIndicatorClasses = (state: StepState): string => {
+  switch (state) {
+    case 'completed':
+    case 'active':
+      return 'bg-primary text-primary-foreground border-primary';
+    case 'inactive':
+    default:
+      return 'bg-muted text-muted-foreground border-muted hover:bg-muted/80';
+  }
+};
+
+/**
+ * Returns the appropriate CSS classes for connector based on completion status
+ */
+export const getConnectorClasses = (
+  stepIndex: number,
+  activeStep: number,
+): string => {
+  return stepIndex < activeStep ? 'bg-primary' : 'bg-muted';
+};
+
+/**
+ * Returns the appropriate CSS classes for step label based on state
+ */
+export const getLabelClasses = (state: StepState): string => {
+  return state === 'inactive' ? 'text-muted-foreground' : 'text-foreground';
+};
+
+/**
+ * Returns the appropriate CSS classes for step description based on state
+ */
+export const getDescriptionClasses = (state: StepState): string => {
+  return state === 'inactive'
+    ? 'text-muted-foreground/60'
+    : 'text-muted-foreground';
+};
+
+/**
+ * Handles step click with navigation check
+ */
+export const handleStepClick = (
+  stepIndex: number,
+  allowNavigation: boolean,
+  onStepClick?: (stepIndex: number) => void,
+): void => {
+  if (allowNavigation && onStepClick) {
+    onStepClick(stepIndex);
+  }
+};