@nuskin/foundation-ui-components 1.0.2 → 1.1.1

package/src/common/card/styled/NsFfgStyled.tsx

@@ -1,8 +1,6 @@
 import { Box } from '@mui/material';
 import { styled } from '@nuskin/foundation-theme';
 
-const options = {};
-
 const Component = () => {
     return {
         backgroundClip: 'border-box',
@@ -10,9 +8,10 @@ const Component = () => {
         border: '1px solid #eff2f7',
         borderRadius: '1rem',
         boxShadow: '0 0.75rem 1.5rem rgba(18, 38, 63, .03)',
+        cursor: 'pointer',
         display: 'flex',
         flexDirection: 'column' as 'column', // https://github.com/cssinjs/jss/issues/1344
-        marginBottom: '2rem',
+        marginBottom: '16px',
         transition: 'all .2s ease',
         textAlign: 'center' as 'center',
         wordWrap: 'break-word' as 'break-word',
@@ -22,15 +21,19 @@ const Component = () => {
             '.action-link': {
                 color: '#2CD5C4',
                 textDecoration: 'none',
+                fontWeight: 600,
             },
         },
         '.body-text': {
-            padding: '0 1.5rem 3rem',
-            fontSize: '1rem',
+            padding: '0 1.5rem 4rem',
+            fontSize: '16px',
             color: '#8492a6',
         },
         '.top-image': {
-            padding: '1.5rem 3rem',
+            padding: '3rem 1.5rem',
+            img: {
+                maxWidth: '100%',
+            },
         },
         '.action-link': {
             color: '#3c4858',
@@ -41,4 +44,4 @@ const Component = () => {
         },
     };
 };
-export const NsFfgStyled = styled(Box, options)<{}>(Component);
+export const NsFfgStyled = styled(Box)(Component);

package/src/common/card/types.d.ts

@@ -1,9 +1,12 @@
-import { AdditionalProps } from '../common.types';
-
+import { AdditionalProps, CslpTag } from '../common.types';
 export type NsFfgCardProps = AdditionalProps & {
     topImageUrl: string;
     topImageAlt: string;
     text: string;
-    actionLink: string;
-    actionText?: string;
+    cardLink: { href: string; title: string };
+    onClick(): void;
+    cslp?: {
+        card_text: CslpTag;
+        action_text: CslpTag;
+    };
 };

package/src/common/carousal/NsCarousal.tsx

@@ -1,11 +1,12 @@
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { useRef, useCallback, ReactNode } from 'react';
+import { useRef, useCallback } from 'react';
 import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import defaultCarousalSettings from './slickSetting';
 import CarousalControl from './CarousalControl';
+import { NsCarousalProps } from './types';
 
 const SlickContainer = styled(Box)(() => {
     return {
@@ -16,15 +17,8 @@ const SlickContainer = styled(Box)(() => {
         },
     };
 });
-interface CarousalProps<T = any> {
-    entries: T[];
-    // eslint-disable-next-line no-unused-vars
-    renderEntry(entry: T, index: number): ReactNode;
-    allEntryLink: string;
-    settings: any;
-}
 
-export default function NsCarousal({ entries, renderEntry, allEntryLink, settings }: CarousalProps) {
+export default function NsCarousal({ entries, renderEntry, allEntryLink, settings }: NsCarousalProps) {
     const sliderRef = useRef();
     const prev = useCallback(() => {
         if (sliderRef.current) {

package/src/common/carousal/stories/NSCarousal.stories.tsx

@@ -9,7 +9,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsCarousal/Brand',
+    title: 'Components/Containers/NsCarousal/Brand',
     component: NsCarousal,
     argTypes: {},
 } as MetaStory;

package/src/common/carousal/stories/NsScrollingCarousal.stories.tsx

@@ -34,7 +34,7 @@ export const slides = [
     },
 ];
 export default {
-    title: 'Components/NsCarousal/NsScrollingCarousal',
+    title: 'Components/Containers/NsCarousal/NsScrollingCarousal',
     component: NsScrollingCarousal,
     decorators: [withCenterDecorator],
     argTypes: {},

package/src/common/cart-icon/NsCartIcon.spec.tsx

@@ -5,25 +5,14 @@ const { getByTestId } = screen;
 describe('NsCartIcon', () => {
     it('renders Cart icon when item count is 0', () => {
         render(<NsCartIcon itemCount={0} color="primary" size="large" />);
-        const cartIcon = getByTestId('cart-icon');
+        const cartIcon = getByTestId('cart-badge-icon');
         expect(cartIcon).toBeInTheDocument();
     });
-    it('renders Cart icon with optional values', () => {
-        render(<NsCartIcon itemCount={0} />);
-        const cartIcon = getByTestId('cart-icon');
-        expect(cartIcon).toBeInTheDocument();
-    });
-
-    it('renders Cart Badge icon when item count is greater than 0', () => {
-        render(<NsCartIcon itemCount={5} color="primary" size="large" />);
-        const cartBadgeIcon = getByTestId('cart-badge-icon');
-        expect(cartBadgeIcon).toBeInTheDocument();
-    });
 
     it('renders item count badge when item count is greater than 0', () => {
-        render(<NsCartIcon itemCount={5} color="primary" size="large" />);
-        const itemCountBadge = getByTestId('item-count-badge');
-        expect(itemCountBadge).toBeInTheDocument();
-        expect(itemCountBadge.textContent).toBe('5');
+        const itemCount = 5;
+        const { getByText } = render(<NsCartIcon itemCount={5} color="primary" size="large" />);
+        const badgeContentElement = getByText(itemCount.toString());
+        expect(badgeContentElement).toHaveTextContent('5'); // Adjust the value as per your badge content
     });
 });

package/src/common/cart-icon/NsCartIcon.stories.tsx

@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsCartIcon',
+    title: 'Components/Data Display/NsCartIcon',
     component: NsCartIcon,
     decorators: [withCenterDecorator],
     argTypes: {
@@ -19,7 +19,7 @@ export default {
         },
     },
     args: {
-        itemCount: 1,
+        itemCount: 5,
         color: 'primary',
         size: 'large',
     },

package/src/common/cart-icon/NsCartIcon.styled.ts

@@ -1,40 +1,14 @@
-import { Theme } from '@mui/material';
+import { Badge, Theme } from '@mui/material';
 import { styled, FoundationTheme } from '@nuskin/foundation-theme';
-import { NsIconSizeType } from '../icon/types';
 
 type ItemCountParams = {
-    size: NsIconSizeType;
-    color: FoundationTheme.PaletteColors;
     theme?: Theme;
+    bgcolor: FoundationTheme.PaletteColors;
 };
 
-export const CartIconContainer = styled.div`
-    position: relative;
-    display: inline-block;
-`;
-
-const BadgeFontSizeMap = {
-    small: '8px',
-    medium: '10px',
-    large: '12px',
-    xLarge: '14px',
-};
-
-const BadgePosMap = {
-    small: '-8px',
-    medium: '-6px',
-    large: '-4px',
-    xLarge: '-1px',
-};
-
-export const ItemCount = styled.span<ItemCountParams>`
-    color: ${({ color, theme }) => theme?.palette?.[color]?.main};
-    font-size: ${({ size }) => BadgeFontSizeMap[size]};
-    right: ${({ size }) => BadgePosMap[size]};
-    text-align: center;
-    font-weight: 600;
-    position: absolute;
-    width: 32px;
-    height: auto;
-    top: -4px;
+export const StyledBadge = styled(Badge) <ItemCountParams>`
+    & .MuiBadge-badge {
+        background-color: ${({ bgcolor, theme }) => theme?.palette?.[bgcolor]?.main};
+        color: ${({ bgcolor, theme }) => theme?.palette?.[bgcolor]?.contrastText};
+    }
 `;

package/src/common/cart-icon/NsCartIcon.tsx

@@ -1,21 +1,12 @@
 import { NsIcon } from '../icon';
-import { CartIconContainer, ItemCount } from './NsCartIcon.styled';
+import { StyledBadge } from './NsCartIcon.styled';
 import { NsCartIconProps } from './types.d';
 
-const NsCartIcon = ({ itemCount, size = 'large', color = 'primary' }: NsCartIconProps) => {
+const NsCartIcon = ({ itemCount = 0, size = 'large', color = 'primary', maxItemCount = 999 }: NsCartIconProps) => {
     return (
-        <CartIconContainer>
-            {itemCount > 0 ? (
-                <NsIcon testId="cart-badge-icon" name="cartBadge" color={color} size={size} />
-            ) : (
-                <NsIcon testId="cart-icon" name="cart" color={color} size={size} />
-            )}
-            {itemCount > 0 && (
-                <ItemCount data-testid="item-count-badge" color={color} size={size}>
-                    {itemCount}
-                </ItemCount>
-            )}
-        </CartIconContainer>
+        <StyledBadge badgeContent={itemCount} max={maxItemCount} bgcolor={color}>
+            <NsIcon testId="cart-badge-icon" name="cart" size={size} color={color} />
+        </StyledBadge>
     );
 };
 

package/src/common/cart-icon/types.d.ts

@@ -4,4 +4,5 @@ export type NsCartIconProps = {
     itemCount: number;
     size?: 'small' | 'medium' | 'large' | 'xLarge';
     color?: FoundationTheme.PaletteColors;
+    maxItemCount?:number;
 };

package/src/common/checkbox/NsCheckbox.stories.tsx

@@ -13,7 +13,7 @@ type MetaStory = Meta<ComponentType>;
 const labelText = 'Checkbox Label';
 // In this case, we're only passing the label prop.
 export default {
-    title: 'Components/NsCheckbox',
+    title: 'Components/Inputs/NsCheckbox',
     component: NsCheckbox,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/checkbox/NsCheckbox.styled.tsx

@@ -1,19 +1,18 @@
 /**
  * @author [vijayaprathap Kumar] (vpkumar@nuskin.com)
- * checkbox.tsx
  * @description Styled Components for Checkbox
  */
 import DoneIcon from '@mui/icons-material/Done';
 
-import { styled } from '@nuskin/foundation-theme';
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
 import { NsFlag } from '../flag';
-
+const { paletteColor, buttonColor } = ColorUtils;
 /**
  * Wrapper BpIcon for checkbox.tsx
  * @params ( theme: { palette }) / Provide the color's to contaier from @nuskin/foundation-theme
  */
 
-export const BpIcon = styled(DoneIcon)(({ theme: { palette } }) => ({
+export const BpIcon = styled(DoneIcon)(({ theme }) => ({
     border: '1px solid #8C8C8C',
     path: {
         display: 'none',
@@ -25,31 +24,31 @@ export const BpIcon = styled(DoneIcon)(({ theme: { palette } }) => ({
         outline: '3px solid #94D6E9',
     },
     'input:disabled ~ &': {
-        background: palette?.primary?.buttonState?.hovered,
+        background: buttonColor('primary', 'hovered')({ theme }),
     },
 }));
 
 /**
  * Wrapper BpCheckedIcon for checkbox.tsx
- * @params ( theme: { palette }) / Provide the color's to contaier from @nuskin/foundation-theme
+ * @params ( theme: { palette }) / Provide the color's to container from @nuskin/foundation-theme
  */
 
-export const BpCheckedIcon = styled(BpIcon)(({ theme: { palette } }) => ({
+export const BpCheckedIcon = styled(BpIcon)(({ theme }) => ({
     path: {
         display: 'block',
     },
-    background: palette?.primary?.main ?? '#fff',
-    color: palette?.primary?.contrastText ?? '#000',
+    background: paletteColor('primary', 'main')({ theme }),
+    color: paletteColor('primary', 'contrastText')({ theme }),
 }));
 
-export const StyledLabel = styled('span')<{ $hasDisabled: boolean }>`
-    ${({ $hasDisabled, theme: { palette } }) =>
-        $hasDisabled &&
-        `
-    color: ${palette?.primary?.buttonState?.hovered};
-`}
-`;
+const getLabelColor = (isDisabled: boolean, color: string) => (!isDisabled ? '' : `color: ${color}`);
 
+export const StyledLabel = styled('span')<{ isDisabled: boolean }>`
+    ${({ isDisabled, theme }) => {
+        const color = buttonColor('primary', 'hovered')({ theme });
+        return getLabelColor(isDisabled, color);
+    }}
+`;
 export const StyledFlagLabel = styled(NsFlag)`
     margin-right: 16px;
 `;

package/src/common/checkbox/NsCheckbox.tsx

@@ -54,7 +54,7 @@ const NsCheckbox = (props: PropsWithChildren<NsCheckboxProps>) => {
         () => (
             <NsTypography variant="p-l">
                 <StyledFlagLabel {...flag} size={size} testId={`${name}-flag-label`} />
-                <StyledLabel className="checkbox-label-text" $hasDisabled={disabled}>
+                <StyledLabel className="checkbox-label-text" isDisabled={disabled}>
                     {label}
                 </StyledLabel>
             </NsTypography>

package/src/common/column-control/stories/DivArray.stories.tsx

@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/Column/NDivs',
+    title: 'Components/Data Display/Column/NDivs',
     component: DivArray,
     decorators: [withCenterDecorator],
     args: {

package/src/common/column-control/stories/NsColumnControl.stories.tsx

@@ -9,7 +9,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/Column/NsColumnControl',
+    title: 'Components/Data Display/Column/NsColumnControl',
     component: NsColumnControl,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/column-control/stories/NsFlexColumns.stories.tsx

@@ -9,7 +9,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/Column/NsFlexColumns',
+    title: 'Components/Data Display/Column/NsFlexColumns',
     component: NsFlexColumns,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/column-control/stories/NsGridColumns.stories.tsx

@@ -9,7 +9,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/Column/NsGridColumns',
+    title: 'Components/Data Display/Column/NsGridColumns',
     component: NsGridColumns,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/column-control/styled/common.ts

@@ -21,7 +21,7 @@ export const commonStyles = {
    ['1','2'] => ['27%','53%']
  */
 export function getPercentArray(fractionArray?: string[] | number[]) {
-    let numbers = fractionArray?.map((numberString) => +numberString)?.filter((num) => 0 < num && num < 10) ?? [];
+    const numbers = fractionArray?.map((numberString) => +numberString)?.filter((num) => 0 < num && num < 10) ?? [];
     const sum = numbers.reduce((currentSum, currentNumber) => currentSum + currentNumber, 0);
     return numbers.map((currentNumber) => ((currentNumber / sum) * 80).toFixed(2) + '%');
 }

package/src/common/column-control/utils.ts

@@ -40,15 +40,15 @@ const sizeKeyMap: Record<ValueOf<typeof sizeKeyPrefix>, string> = {
  * @returns {fractions:['1','1','1'], tabletFractions:['1','1'], mobileFractions:['1'] }
  */
 export const getColumnSizes = (inputColumnClass: string): sizeObjectType => {
-    let columnClass = inputColumnClass.trim() as NsColumnControlProps['columnClass'];
+    const columnClass = inputColumnClass.trim();
     const validClasses = columnClass
         .split(' ')
         .filter((e) => Object.values(sizeKeyPrefix).some((prefix) => e.startsWith(prefix)));
     const sizeObject: sizeObjectType = validClasses.reduce((acc: any, current: string) => {
-        for (let key of Object.values(sizeKeyPrefix)) {
+        for (const key of Object.values(sizeKeyPrefix)) {
             if (current.startsWith(key)) {
-                let interClass = current.replace(key, '');
-                let sizes = interClass.split('-').filter((e) => /^[1-9]$/.test(e));
+                const interClass = current.replace(key, '');
+                const sizes = interClass.split('-').filter((e) => /^[1-9]$/.test(e));
                 acc[sizeKeyMap[key]] = sizes;
                 break;
             }

package/src/common/common.types.d.ts

@@ -1,12 +1,21 @@
-export type ContentStackLiveTags = {
-    'data-cslp'?: string;
-};
+import { FoundationTheme } from '@nuskin/foundation-theme';
+
+export type CslpTag = { 'data-cslp': string };
 
 export type AdditionalProps = {
-    darkModeEnabled?: boolean;
     additionalProps?: {
         ariaLabel?: string;
         testid?: string;
         className?: string;
-    } & ContentStackLiveTags;
+        'data-testid'?: string;
+    } & Partial<CslpTag>;
+    cslp?: Record<string, CslpTag>;
+} & DarkModeEnabledOption;
+
+export type Themed = {
+    theme: FoundationTheme.Theme;
+};
+
+export type DarkModeEnabledOption = {
+    darkModeEnabled?: boolean;
 };

package/src/common/dropdown/NsDropdown.styled.tsx

@@ -1,5 +1,6 @@
 import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
-const { getPaletteColor, getAppColor } = ColorUtils;
+import { Themed } from '../common.types';
+const { color, paletteColor, isDarkMode } = ColorUtils;
 
 export const DropdownContainer = styled.div<{ disabled: boolean }>`
     position: relative;
@@ -7,15 +8,22 @@ export const DropdownContainer = styled.div<{ disabled: boolean }>`
     opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
 `;
 
+/** this function also used for SelectHead */
+export const getDropdownHeadBorder = ({ type, theme }: { type: string } & Themed) => {
+    if (type === 'outlined') {
+        const borderColor = color('primary', 'black')({ theme });
+        return `1px solid ${borderColor}`;
+    }
+    return 'none';
+};
 export const DropdownHead = styled.div<{ type: string; disabled: boolean }>`
     cursor: ${({ disabled }) => (disabled ? 'inherit' : 'pointer')};
     padding: 5px 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border: ${({ type, theme }) =>
-        type === 'outlined' ? `1px solid ${getAppColor(theme, 'primary', 'black')}` : 'none'};
-    color: ${({ theme }) => getPaletteColor(theme, 'primary')};
+    border: ${getDropdownHeadBorder}
+    color: ${paletteColor('primary')};
 `;
 
 export const DropdownButton = styled.div`
@@ -25,27 +33,19 @@ export const DropdownButton = styled.div`
 export const DropdownList = styled.div<{ borderColor: FoundationTheme.PaletteColors }>`
     position: absolute;
     z-index: 100;
-    border: 1px solid ${({ borderColor, theme }) => getPaletteColor(theme, borderColor)};
+    border: 1px solid ${({ borderColor, theme }) => paletteColor(borderColor)({ theme })};
     padding: 0;
     margin: 0;
     width: 100%;
-    color: ${({ theme }) => getPaletteColor(theme, 'primary', 'main')};
-    background-color: ${({ theme }) => getPaletteColor(theme, 'primary', 'contrastText')};
+    color: ${paletteColor('primary', 'main')};
+    background-color: ${paletteColor('primary', 'contrastText')};
 `;
-const getIsLight = (theme: FoundationTheme.Theme) => {
-    const { palette = { primary: { main: '', contrastText: '' } } } = theme;
-    return palette.primary.main === getAppColor(theme, 'primary', 'black');
-};
 
 const getDividerColor = (theme: FoundationTheme.Theme) => {
-    const isLight = getIsLight(theme);
-    const dividerColor = isLight ? getAppColor(theme, 'neutral', '30') : getAppColor(theme, 'neutral', '20');
-    return dividerColor;
+    return color('neutral', isDarkMode({ theme }) ? '20' : '30')({ theme });
 };
 const getListBgColor = (theme: FoundationTheme.Theme) => {
-    const isLight = getIsLight(theme);
-    const bgColor = isLight ? getAppColor(theme, 'accentColorB', '10') : getAppColor(theme, 'accentColorB', '50');
-    return bgColor;
+    return color('accentColorB', isDarkMode({ theme }) ? '50' : '10')({ theme });
 };
 export const ListItemContainer = styled.div<{ showListDivider: boolean }>`
     cursor: pointer;
@@ -61,7 +61,12 @@ export const ListItemContainer = styled.div<{ showListDivider: boolean }>`
     }
 `;
 
+const getBorder = ({ isSelected, theme }: { isSelected: boolean } & Themed) => {
+    const borderColor = paletteColor('primary')({ theme });
+    return isSelected ? `2px solid ${borderColor}` : 'none';
+};
+
 export const ListItem = styled.span<{ isSelected: boolean }>`
     padding: 5px 10px;
-    border-left: ${({ isSelected, theme }) => (isSelected ? `2px solid ${getPaletteColor(theme, 'primary')}` : 'none')};
+    border-left: ${getBorder};
 `;

package/src/common/dropdown/stories/NsDropdown.stories.tsx

@@ -8,7 +8,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsDropdown',
+    title: 'Components/Inputs/NsDropdown',
     decorators: [withCenterDecorator],
     component: NsDropdown,
     argTypes: {

package/src/common/dropdown/stories/NsDropdownCountry.stories.tsx

@@ -8,7 +8,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsDropdown',
+    title: 'Components/Inputs/NsDropdown',
     decorators: [withCenterDecorator],
     component: NsDropdown,
     argTypes: {

package/src/common/flag/NsFlag.stories.tsx

@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsFlag',
+    title: 'Components/Data Display/NsFlag',
     component: NsFlag,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/hooks/index.ts

@@ -0,0 +1,2 @@
+export {default as useWindowSize} from './useWindowSize';
+export {default as useAccordionMap} from './useAccordionMap';

package/src/common/hooks/specs/useWindowSize.spec.tsx

@@ -0,0 +1,19 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import useWindowSize from '../useWindowSize';
+
+describe('useWindowSize', () => {
+    it('should return the window size', () => {
+        const { result } = renderHook(useWindowSize);
+        expect(result.current).toEqual({ width: window.innerWidth, height: window.innerHeight });
+    });
+
+    it('should update the window size when the window is resized', () => {
+        const { result } = renderHook(() => useWindowSize());
+        act(() => {
+            window.innerWidth = 500;
+            window.innerHeight = 500;
+            window.dispatchEvent(new Event('resize'));
+        });
+        expect(result.current).toEqual({ width: 500, height: 500 });
+    });
+});

package/src/common/hooks/useAccordionMap.tsx

@@ -0,0 +1,39 @@
+import { useState, useEffect, useCallback } from 'react';
+
+type ItemMap = Record<string, boolean>;
+type UseAccordionProp = {
+    allowMultipleExpanded?: boolean;
+    defaultOpenIds?: string[];
+};
+const reducer = (map: ItemMap, id: string) => {
+    map[id] = true;
+    return map;
+};
+
+const useAccordionMap = ({ allowMultipleExpanded, defaultOpenIds }: UseAccordionProp) => {
+    const mapSetter = useCallback(() => {
+        let ids = defaultOpenIds;
+        if (!allowMultipleExpanded) {
+            ids = ids?.slice(0, 1) ?? [];
+        }
+        return ids?.reduce(reducer, {}) ?? {};
+    }, [defaultOpenIds, allowMultipleExpanded]);
+
+    const [itemStateMap, setItemMap] = useState<ItemMap>(mapSetter);
+
+    const toggleOpen = (index: string | number) => {
+        const key = index + '';
+        if (allowMultipleExpanded) {
+            setItemMap((prevState) => ({ ...prevState, [key]: !prevState[key] }));
+        } else {
+            setItemMap({ [key]: !itemStateMap[index] });
+        }
+    };
+
+    useEffect(() => {
+        setItemMap(mapSetter);
+    }, [mapSetter]);
+    return { itemStateMap, toggleOpen };
+};
+
+export default useAccordionMap;

package/src/common/hooks/useWindowSize.tsx

@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react';
+
+const useWindowSize = () => {
+    const [windowSize, setWindowSize] = useState({
+        width: window.innerWidth,
+        height: window.innerHeight,
+    });
+
+    useEffect(() => {
+        function handleResize() {
+            setWindowSize({
+                width: window?.innerWidth || 300,
+                height: window?.innerHeight || 300,
+            });
+        }
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', handleResize);
+        }
+
+        return () => {
+            if (typeof window !== 'undefined') {
+                window.removeEventListener('resize', handleResize);
+            }
+        };
+    }, []);
+
+    return windowSize;
+};
+
+export default useWindowSize;