@sonardigital/carbon-ui 1.1.56 → 1.1.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonardigital/carbon-ui",
-  "version": "1.1.56",
+  "version": "1.1.57",
   "description": "",
   "main": "src/index.ts",
   "files": [
@@ -57,7 +57,7 @@
     "react": "^19.1.0",
     "react-hook-form": "^7.63.0",
     "react-icons": "^5.5.0",
-    "react-router": "^7.6.0",
+    "react-router": "^7.9.4",
     "react-router-dom": "^7.6.0",
     "typescript": "^5.4.5"
   }

package/src/components/layout/drawer/components/DrawerContent.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DrawerProps, Drawer as MuiDrawer } from '@mui/material';
+import { useDrawerContext } from '../hooks/useDrawerContext';
+
+export function DrawerContent({ children, ...props }: DrawerProps): React.ReactElement {
+  const { isOpen, close } = useDrawerContext();
+
+  return (
+    <MuiDrawer open={isOpen} onClose={close} {...props}>
+      {children}
+    </MuiDrawer>
+  );
+}

package/src/components/layout/{Drawer_ → drawer}/components/DrawerTrigger.tsx

@@ -8,19 +8,11 @@ interface DialogTriggerProps {
   closeIcon?: React.ReactNode;
 }
 
-export default function DrawerTrigger({
-  children,
-  openIcon,
-  closeIcon,
-}: DialogTriggerProps): React.ReactElement {
-  const { isOpen, toggleDrawer } = useDrawerContext();
+export function DrawerTrigger({ children, openIcon, closeIcon }: DialogTriggerProps): React.ReactElement {
+  const { isOpen, toggle } = useDrawerContext();
 
   return (
-    <ButtonBase
-      sx={{ posiion: 'relative', alignSelf: 'center' }}
-      disableRipple
-      onClick={() => toggleDrawer()}
-    >
+    <ButtonBase sx={{ posiion: 'relative', alignSelf: 'center' }} disableRipple onClick={() => toggle()}>
       {children}
       {!isOpen ? openIcon : closeIcon}
     </ButtonBase>

package/src/components/layout/{Drawer_ → drawer}/components/index.ts

@@ -1,3 +1,2 @@
 export * from './DrawerContent';
 export * from './DrawerTrigger';
-export * from './DrawerProvider';

package/src/components/layout/{Drawer_ → drawer}/hooks/useDrawer.ts

@@ -1,25 +1,25 @@
 import { useState } from 'react';
-import { DrawerContextType } from '../context/DrawerContext';
+import { DrawerContextType } from '../provider/DrawerContext';
 
 export const useDrawer = (): DrawerContextType => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const openDrawer = (): void => {
+  const open = (): void => {
     setIsOpen(true);
   };
 
-  const closeDrawer = (): void => {
+  const close = (): void => {
     setIsOpen(false);
   };
 
-  const toggleDrawer = (): void => {
+  const toggle = (): void => {
     setIsOpen((prevState) => !prevState);
   };
 
   return {
     isOpen,
-    openDrawer,
-    closeDrawer,
-    toggleDrawer,
+    open,
+    close,
+    toggle,
   };
 };

package/src/components/layout/{Drawer_ → drawer}/hooks/useDrawerContext.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import DrawerContext, { DrawerContextType } from '../context/DrawerContext';
+import DrawerContext, { DrawerContextType } from '../provider/DrawerContext';
 
 export const useDrawerContext = (): DrawerContextType => {
   const context = useContext(DrawerContext);

package/src/components/layout/{Drawer_ → drawer}/index.ts

@@ -1,3 +1,3 @@
 export * from './components';
 export * from './hooks';
-export * from './context';
+export * from './provider';

package/src/components/layout/{Drawer_/context → drawer/provider}/DrawerContext.ts

@@ -2,16 +2,16 @@ import { Context, createContext } from 'react';
 
 export interface DrawerContextType {
   isOpen: boolean;
-  openDrawer: () => void;
-  closeDrawer: () => void;
-  toggleDrawer: () => void;
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
 }
 
 const DrawerContext: Context<DrawerContextType> = createContext<DrawerContextType>({
   isOpen: false,
-  openDrawer: () => {},
-  closeDrawer: () => {},
-  toggleDrawer: () => {},
+  open: () => {},
+  close: () => {},
+  toggle: () => {},
 });
 
 export default DrawerContext;

package/src/components/layout/{Drawer_/components → drawer/provider}/DrawerProvider.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Stack } from '@mui/material';
 import { useDrawer } from '../hooks/useDrawer';
-import DrawerContext, { DrawerContextType } from '../context/DrawerContext';
+import DrawerContext, { DrawerContextType } from './DrawerContext';
 
 interface DrawerProviderProps {
   children: React.ReactNode;
   methods?: DrawerContextType;
 }
 
-export default function DrawerProvider({
+export function DrawerProvider({
   methods,
   children,
 }: DrawerProviderProps): React.ReactElement<DrawerProviderProps> {

package/src/components/layout/drawer/provider/index.ts

@@ -0,0 +1,2 @@
+export * from './DrawerContext';
+export * from './DrawerProvider';

package/src/components/layout/index.ts

@@ -1,7 +1,8 @@
-export * from './Drawer_';
+export * from './drawer';
 export * from './Dropdown';
 export * from './ScrollToTop/ScrollToTop';
 export * from './error-boundary';
 export * from './delay';
 export * from './Modal';
 export * from './bottom-navigation/BottomNavigation';
+export * from './multisteps';

package/src/components/layout/multisteps/components/MultistepsBar.tsx

@@ -0,0 +1,29 @@
+import { Grid, Stack } from '@mui/material';
+import Step from './MultistepsStep';
+import { useMultistepsContext } from '../hooks';
+
+export default function MultistepsBar(): React.ReactElement {
+  const { steps, jump, setHover, currentStepIndex } = useMultistepsContext();
+
+  return (
+    <Stack flexDirection="row" justifyContent="space-between" height="auto" paddingY={2} gap={2}>
+      <Grid container width="100%" spacing={1}>
+        {steps.map((_, i) => (
+          <Grid size={{ xs: 12 / steps.length }} key={i}>
+            <Stack
+              flexDirection="column"
+              gap={2}
+              height="auto"
+              paddingBottom={{ xs: 0 }}
+              onMouseEnter={() => setHover(i + 1)}
+              onMouseLeave={() => setHover(null)}
+              onClick={() => jump(i + 1)}
+            >
+              <Step key={i} index={i + 1} isActive={i <= currentStepIndex - 1} />
+            </Stack>
+          </Grid>
+        ))}
+      </Grid>
+    </Stack>
+  );
+}

package/src/components/layout/multisteps/components/MultistepsBottomSteps.tsx

@@ -0,0 +1,12 @@
+import { Stack } from '@mui/material';
+import { BottomNavigation } from '../../bottom-navigation/BottomNavigation';
+
+export function MultistepsBottomNavigation({ children }: { children: React.ReactNode }): React.ReactElement {
+  return (
+    <BottomNavigation>
+      <Stack direction="row" width="100%" gap={2} justifyContent="end">
+        {children}
+      </Stack>
+    </BottomNavigation>
+  );
+}

package/src/components/layout/multisteps/components/MultistepsContent.tsx

@@ -0,0 +1,13 @@
+import { useMultistepsContext } from '../hooks/useMultistepsContext';
+
+export function MultistepsContent({
+  step,
+  children,
+}: {
+  step: number;
+  children: React.ReactElement;
+}): React.ReactElement {
+  const { currentStepIndex } = useMultistepsContext();
+
+  return step === currentStepIndex ? children : <></>;
+}

package/src/components/layout/multisteps/components/MultistepsStep.tsx

@@ -0,0 +1,28 @@
+import { Stack } from '@mui/material';
+import { useMultistepsContext } from '../hooks';
+import { Cursor } from '../../../atoms';
+
+export default function MultistepsStep({
+  index,
+  isActive,
+}: {
+  index: number;
+  isActive: boolean;
+}): React.ReactElement {
+  const { hover } = useMultistepsContext();
+  return (
+    <Cursor>
+      <Stack
+        height={9}
+        sx={{
+          borderRadius: 100,
+          transition: '0.2s',
+          '&:hover': {
+            bgcolor: isActive ? 'primary.main' : 'primary.main',
+          },
+        }}
+        bgcolor={isActive || index < (hover || 0) ? 'primary.main' : 'grey.200'}
+      />
+    </Cursor>
+  );
+}

package/src/components/layout/multisteps/components/MultistepsStepper.tsx

@@ -0,0 +1,61 @@
+import { KeyboardArrowRight } from '@mui/icons-material';
+import { CheckOutlined } from '@mui/icons-material';
+import { KeyboardArrowLeft } from '@mui/icons-material';
+import { IconButton, MobileStepper, MobileStepperProps } from '@mui/material';
+import { useMultistepsContext } from '../hooks';
+
+interface StepperProps
+  extends Omit<MobileStepperProps, 'backButton' | 'nextButton' | 'steps' | 'activeStep'> {
+  value?: number;
+}
+
+export function MultistepsStepper({ position, ...props }: StepperProps): React.ReactElement {
+  const { steps, currentStepIndex, goNext, goBack } = useMultistepsContext();
+
+  const handleNext = (): void => {
+    goNext();
+  };
+
+  const handleBack = (): void => {
+    goBack();
+  };
+
+  const isLastStep = currentStepIndex === steps.length;
+
+  return (
+    <MobileStepper
+      variant="progress"
+      steps={steps.length}
+      position={position || 'static'}
+      activeStep={currentStepIndex - 1}
+      sx={{
+        boxShadow: 0,
+        padding: 0,
+      }}
+      slotProps={{
+        progress: {
+          sx: {
+            width: { xs: '50%', sm: '60%', md: '85%' },
+            borderRadius: 100,
+            height: 6.5,
+          },
+        },
+      }}
+      backButton={
+        <IconButton size="large" onClick={handleBack} disabled={currentStepIndex - 1 === 0}>
+          <KeyboardArrowLeft sx={{ width: 23, height: 23, color: 'grey.700' }} />
+        </IconButton>
+      }
+      nextButton={
+        <IconButton size="large" onClick={handleNext} disabled={isLastStep}>
+          {isLastStep ? (
+            <CheckOutlined sx={{ width: 22, height: 22, color: 'grey.700' }} />
+          ) : (
+            <KeyboardArrowRight sx={{ width: 23, height: 23, color: 'grey.700' }} />
+          )}
+        </IconButton>
+      }
+      {...props}
+    />
+  );
+}

package/src/components/layout/multisteps/components/index.ts

@@ -0,0 +1,5 @@
+export * from './MultistepsContent';
+export * from './MultistepsBar';
+export * from './MultistepsStep';
+export * from './MultistepsBottomSteps';
+export * from './MultistepsStepper';

package/src/components/layout/multisteps/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useMultisteps';
+export * from './useMultistepsContext';

package/src/components/layout/multisteps/hooks/useMultisteps.ts

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router';
+import { useMultistepsProps } from '../provider/MultistepsProvider';
+import { MultistepsContextType } from '../provider/MultistepsContext';
+
+export const useMultisteps = ({ steps }: useMultistepsProps): MultistepsContextType => {
+  const location = useLocation();
+  const queries = new URLSearchParams(location.search);
+  const navigate = useNavigate();
+
+  const index =
+    Number(queries.get('step')) > 0 && Number(queries.get('step')) <= steps?.length
+      ? Number(queries.get('step'))
+      : 1;
+
+  const [hover, setHover] = useState<number | null>(null);
+
+  useEffect(() => {
+    queries.set('step', String(index));
+    navigate(`${location.pathname}?${queries.toString()}`, {
+      replace: true,
+    });
+  }, []);
+
+  const goNext = (): void => {
+    if (index === steps.length) return;
+    queries.set('step', String(index + 1));
+    navigate(`${location.pathname}?${queries.toString()}`, {
+      replace: true,
+    });
+  };
+
+  const goBack = (): void => {
+    const newIndex = index - 1 < 1 ? 1 : index - 1;
+    queries.set('step', String(newIndex));
+    navigate(`${location.pathname}?${queries.toString()}`, {
+      replace: true,
+    });
+  };
+
+  const jump = (index: number): void => {
+    if (index < 0 && index === steps.length) return;
+    queries.set('step', String(index));
+    navigate(`${location.pathname}?${queries.toString()}`, {
+      replace: true,
+    });
+  };
+
+  return {
+    steps,
+    currentStepIndex: index,
+    hover,
+    setHover,
+    goBack,
+    jump,
+    goNext,
+  };
+};

package/src/components/layout/multisteps/hooks/useMultistepsContext.ts

@@ -0,0 +1,12 @@
+import { Context, ContextType, useContext } from 'react';
+import { MultistepsContext, MultistepsContextType } from '../provider/MultistepsContext';
+
+export const useMultistepsContext = (): ContextType<Context<MultistepsContextType>> => {
+  const context = useContext(MultistepsContext);
+
+  if (!context) {
+    throw new Error('useMultisteps must be used within a MultistepsWrapper');
+  }
+
+  return context;
+};

package/src/components/layout/multisteps/index.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './provider';
+export * from './hooks';

package/src/components/layout/multisteps/provider/MultistepsContext.ts

@@ -0,0 +1,22 @@
+import { Context, createContext } from 'react';
+import { Step } from './MultistepsProvider';
+
+export interface MultistepsContextType {
+  steps: Step[];
+  currentStepIndex: number;
+  hover: number | null;
+  setHover: (index: number | null) => void;
+  goNext: () => void;
+  goBack: () => void;
+  jump: (index: number) => void;
+}
+
+export const MultistepsContext: Context<MultistepsContextType> = createContext<MultistepsContextType>({
+  steps: [],
+  currentStepIndex: 1,
+  hover: null,
+  setHover: () => {},
+  goBack: () => {},
+  jump: () => {},
+  goNext: () => {},
+});

package/src/components/layout/multisteps/provider/MultistepsProvider.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { MultistepsContext, MultistepsContextType } from './MultistepsContext';
+
+export interface Step {
+  title: string;
+}
+
+export interface useMultistepsProps {
+  steps: Step[];
+}
+
+interface MultistepsProviderProps {
+  methods: MultistepsContextType;
+  children: React.ReactElement | React.ReactElement[] | false | (React.ReactElement | false)[];
+}
+
+export function MultistepsProvider({
+  methods,
+  children,
+}: MultistepsProviderProps): React.ReactElement<MultistepsContextType> {
+  return <MultistepsContext.Provider value={methods}>{children}</MultistepsContext.Provider>;
+}

package/src/components/layout/multisteps/provider/index.ts

@@ -0,0 +1 @@
+export * from './MultistepsProvider';

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useAccordion';

package/src/hooks/useAccordion.ts

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+
+interface UseAccordionReturn {
+  index: number | false;
+  setIndex: (value: number) => void;
+}
+
+export const useAccordion = (): UseAccordionReturn => {
+  const [index, setIndex] = useState<number>(0);
+
+  return {
+    index,
+    setIndex,
+  };
+};

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './theme';
 export * from './provider';
 export * from './components';
+export * from './hooks';

package/src/components/layout/Drawer_/components/DrawerContent.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { DrawerProps, Drawer as MuiDrawer } from '@mui/material';
-import { useDrawerContext } from '../hooks/useDrawerContext';
-
-export default function DrawerContent({ children, ...props }: DrawerProps): React.ReactElement {
-  const { isOpen, closeDrawer } = useDrawerContext();
-
-  return (
-    <MuiDrawer open={isOpen} onClose={closeDrawer} {...props}>
-      {children}
-    </MuiDrawer>
-  );
-}

package/src/components/layout/Drawer_/context/index.ts

@@ -1 +0,0 @@
-export * from './DrawerContext';