@nuskin/foundation-ui-components 1.3.0 → 1.4.1

package/package.json

@@ -1,8 +1,7 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.3.0",
+    "version": "1.4.1",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
-    "private": false,
     "main": "src/common/index.ts",
     "repository": {
         "type": "git",
@@ -47,7 +46,7 @@
         "@mui/material": "5.4.2",
         "@mui/utils": "^5.14.1",
         "@next/font": "13.2.4",
-        "@nuskin/foundation-theme": "1.0.0-develop.5",
+        "@nuskin/foundation-theme": "^1.0.0",
         "framer-motion": "^10.8.5",
         "next": "13.2.4",
         "react": "18.2.0",
@@ -103,5 +102,6 @@
     "files": [
         "src/common"
     ],
-    "readme": "./README.md"
+    "readme": "./README.md",
+    "packageManager": "yarn@3.6.3"
 }

package/src/common/auth-dropdown/NsAuthDropdown.tsx

@@ -25,26 +25,26 @@ const NsAuthDropdown = ({
     darkModeEnabled = true,
 }: NsAuthDropdownProps) => {
     const [isOpen, setIsOpen] = useState(false);
-    const dropdowneRef = useRef<HTMLDivElement | null>(null);
+    const dropdownRef = useRef<HTMLDivElement | null>(null);
 
     const handleToggle = useCallback(() => {
         setIsOpen(!isOpen);
     }, [isOpen]);
 
-    const handleClose = () => {
+    const handleClose = useCallback(() => {
         setIsOpen(false);
-    };
+    },[]);
 
-    useOnClickOutside(dropdowneRef, handleClose);
+    useOnClickOutside(dropdownRef?.current, handleClose);
 
     const handleOnMouseLeave = useCallback(() => {
         if (closeOnMouseLeave) {
             handleClose();
         }
-    }, [closeOnMouseLeave]);
+    }, [closeOnMouseLeave, handleClose]);
 
     return (
-        <AuthDropdownContainer ref={dropdowneRef}>
+        <AuthDropdownContainer ref={dropdownRef}>
             <AuthHead data-testid="auth-head" onClick={handleToggle} darkModeEnabled={darkModeEnabled}>
                 <Button>{titleText}</Button>
                 <NsIcon testId="chevron-icon" name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />

package/src/common/button/NsButton.stories.tsx

@@ -6,7 +6,6 @@ import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 import { nuskinTheme } from '@nuskin/foundation-theme';
-
 const { palette } = nuskinTheme;
 
 type ComponentType = typeof NsButton;
@@ -40,7 +39,9 @@ export default {
     },
 } as MetaStory;
 
-export const button: Story = {};
+export const button: Story = {
+    args: {},
+};
 
 export const IconOnlyButton: Story = {
     render: (args: any) => (

package/src/common/button/NsButton.tsx

@@ -4,13 +4,38 @@ import { useTheme } from '@mui/material/styles';
 import StyledButton from './NsButton.styled';
 
 import { NsButtonProps } from './types.d';
+import { NsIcon } from '../icon';
 
 const NsButton = ({ children, darkModeEnabled = true, ...props }: PropsWithChildren<NsButtonProps>) => {
-    const { color } = props;
+    const { color, startIconName, endIconName, variant } = props;
     const { palette } = useTheme();
     const btnColor = color && palette?.[color] ? color : 'primary';
+    let iconColor = btnColor;
+    if (variant === 'contained') {
+        if (btnColor === 'secondary') {
+            iconColor = 'primary';
+        } else {
+            iconColor = 'secondary';
+        }
+    }
+    let startIcon = props.startIcon;
+    if (!startIcon && startIconName) {
+        startIcon = <NsIcon name={startIconName} color={iconColor} size={props.size} />;
+    }
+    let endIcon = props.endIcon;
+    if (!endIcon && endIconName) {
+        endIcon = <NsIcon name={endIconName} color={iconColor} size={props.size} />;
+    }
+
     return (
-        <StyledButton {...props} color={btnColor} disableRipple darkModeEnabled={darkModeEnabled}>
+        <StyledButton
+            {...props}
+            startIcon={startIcon}
+            endIcon={endIcon}
+            color={btnColor}
+            disableRipple
+            darkModeEnabled={darkModeEnabled}
+        >
             {children}
         </StyledButton>
     );

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

@@ -1,22 +1,26 @@
 import { ButtonProps as MUIButtonProps } from '@mui/material';
+import { NsIconProps } from '../icon';
 
 export type NsButtonProps = Pick<
-  MUIButtonProps,
-  | 'size'
-  | 'variant'
-  | 'disabled'
-  | 'fullWidth'
-  | 'color'
-  | 'type'
-  | 'onBlur'
-  | 'onClick'
-  | 'onChange'
-  | 'onFocus'
-  | 'aria-label'
-  | 'className'
-  | 'startIcon'
-  | 'endIcon'
+    MUIButtonProps,
+    | 'aria-label'
+    | 'className'
+    | 'color'
+    | 'disabled'
+    | 'endIcon'
+    | 'fullWidth'
+    | 'href'
+    | 'onBlur'
+    | 'onClick'
+    | 'onChange'
+    | 'onFocus'
+    | 'size'
+    | 'startIcon'
+    | 'type'
+    | 'variant'
 > & {
-  iconOnly?: boolean;
-  darkModeEnabled?: boolean;
+    iconOnly?: boolean;
+    darkModeEnabled?: boolean;
+    startIconName?: NsIconProps['name'];
+    endIconName?: NsIconProps['name'];
 };

package/src/common/card/NsFfgCard.tsx

@@ -1,4 +1,4 @@
-import { NsNextImage, NsLink } from '../';
+import { NsLink, NsImage } from '../';
 import { NsFfgStyled } from './styled/NsFfgStyled';
 import { NsFfgCardProps } from './types.d';
 
@@ -10,7 +10,7 @@ const NsFfgCard = ({ cardLink, text, topImageUrl, topImageAlt, additionalProps,
             className={additionalProps?.className ?? ''}
         >
             <header className="top-image">
-                <NsNextImage height={192} width={288} alt={topImageAlt} src={topImageUrl} />
+                <NsImage height={192} width={288} alt={topImageAlt} src={topImageUrl} />
             </header>
             <article className="body-text" {...cslp?.card_text}>
                 {text}

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

@@ -0,0 +1,14 @@
+import { Badge, Theme } from '@mui/material';
+import { ColorUtils, styled, FoundationTheme } from '@nuskin/foundation-theme';
+
+type ItemCountParams = {
+    theme?: Theme;
+    bgcolor: FoundationTheme.PaletteColors;
+};
+const { paletteColor } = ColorUtils;
+export const StyledBadge = styled(Badge)<ItemCountParams>`
+    & .MuiBadge-badge {
+        background-color: ${({ bgcolor, theme }) => paletteColor(bgcolor)({ theme })};
+        color: ${({ bgcolor, theme }) => paletteColor(bgcolor, 'contrastText')({ theme })};
+    }
+`;

package/src/common/dropdown/NsDropdown.tsx

@@ -19,24 +19,24 @@ const NsDropdown: React.FC<DropdownProps> = ({
 }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [value, setValue] = useState(selectedValue || '');
-    const dropdowneRef = useRef<HTMLDivElement | null>(null);
+    const dropdownRef = useRef<HTMLDivElement | null>(null);
 
     const handleToggle = useCallback(() => {
         if (disabled) return;
         setIsOpen((x) => !x);
     }, [disabled]);
 
-    const handleClose = () => {
+    const handleClose = useCallback(() => {
         setIsOpen(false);
-    };
+    }, []);
 
-    useOnClickOutside(dropdowneRef, handleClose);
+    useOnClickOutside(dropdownRef?.current, handleClose);
 
     const handleOnMouseLeave = useCallback(() => {
         if (closeOnMouseLeave) {
             handleClose();
         }
-    }, [closeOnMouseLeave]);
+    }, [closeOnMouseLeave, handleClose]);
 
     const handleSelect = (input: string) => {
         onSelect(input);
@@ -45,7 +45,7 @@ const NsDropdown: React.FC<DropdownProps> = ({
     };
 
     return (
-        <DropdownContainer disabled={disabled} ref={dropdowneRef}>
+        <DropdownContainer disabled={disabled} ref={dropdownRef}>
             <DropdownHead data-testid="dropdown-head" disabled={disabled} type={type} onClick={handleToggle}>
                 <DropdownButton>{selectedLabel || placeholder}</DropdownButton>
                 <NsIcon testId="chevron-icon" name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />

package/src/common/email-simple/NsEmailSimple.tsx

@@ -43,7 +43,7 @@ const NsEmailSimple = (props: NsEmailSimpleProps) => {
                     errorMessageValue = '';
                 }
             } catch (error) {
-                console.log('API error', error);
+                console.error('API error', error);
             }
         } else {
             //TODO What happens when user does not pass valid checkEmail function

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

@@ -1,10 +1,10 @@
+import { render } from '@/test-utils/index';
 import React from 'react';
 
-import { render } from '@/test-utils/index';
 import { NsFlag } from '../';
 
 describe('FlagComponent', () => {
-    it('renders a div element with background color and text', () => {
+    it('1. renders a div element with background color and text', () => {
         const text = 'NU SKIN';
         const { getByText } = render(<NsFlag message="NU SKIN" color="accentColorA" />);
         const divElement = getByText(text);
@@ -12,4 +12,16 @@ describe('FlagComponent', () => {
         expect(divElement).toBeInTheDocument();
         expect(divElement).toHaveTextContent(text);
     });
+    it('2. should render a flag with default size, color, and testId when only message prop is provided', () => {
+        const props = {
+            message: 'Test Message',
+        };
+        const { getByTestId } = render(<NsFlag {...props} />);
+        const flag = getByTestId('ns-flag-component');
+        expect(flag).toBeInTheDocument();
+        expect(flag).toHaveStyle('height: 20px');
+        expect(flag).toHaveStyle('color: #ffffff');
+        expect(flag).toHaveStyle('background: #f56767');
+        expect(flag).toHaveTextContent(props.message);
+    });
 });

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

@@ -27,7 +27,7 @@ const FlagHeightMap = {
 };
 
 const getFlagHeight = ({ $size }: { $size: NsFlagSize }) => {
-    return FlagHeightMap[$size] || FlagHeightMap['small' as NsFlagSize];
+    return FlagHeightMap[$size];
 };
 
 const makeFlagSize = ({ $size }: { $size: NsFlagSize }) => {
@@ -36,10 +36,7 @@ const makeFlagSize = ({ $size }: { $size: NsFlagSize }) => {
 };
 
 const makeFlagBorder = ({ $size, $bgColor = 'accentColorA', theme }: NsFlagThemeParams) => {
-    if (theme) {
-        return `${makeFlagSize({ $size })}px solid ${paletteColor($bgColor)({ theme })}`;
-    }
-    return '';
+    return `${makeFlagSize({ $size })}px solid ${paletteColor($bgColor)({ theme })}`;
 };
 
 export const StyledFlag = styled('span')<NsFlagThemeParams>`

package/src/common/hooks/useOnClickOutside.tsx

@@ -1,28 +1,25 @@
-import { RefObject, useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 
 export type Handler = () => void;
 
-export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
-    ref: RefObject<T>,
+export function useOnClickOutside(
+    element: HTMLDivElement | null,
     handler: Handler = () => {},
     mouseEvent: 'click' | 'mousedown' | 'mouseup' = 'click'
 ): void {
-    const handleEventListener = useCallback(
-        (event: MouseEvent) => {
-            const el = ref?.current;
-            if (!el || el.contains(event.target as Node)) {
+    useEffect(() => {
+        const eventListener = (event: MouseEvent) => {
+            // Do nothing if clicking ref's element or descendent elements
+            if (!element || element.contains(event.target as Node)) {
                 return;
             }
             handler?.();
-        },
-        [ref, handler]
-    );
-    useEffect(() => {
+        };
         if (document) {
-            document.addEventListener(mouseEvent, handleEventListener);
+            document.addEventListener(mouseEvent, eventListener);
             return () => {
-                document.removeEventListener(mouseEvent, handleEventListener);
+                document.removeEventListener(mouseEvent, eventListener);
             };
         }
-    }, [mouseEvent, handleEventListener]);
+    }, [mouseEvent, handler, element]);
 }

package/src/common/icon/NsIcon.spec.tsx

@@ -1,11 +1,12 @@
 import { render, screen } from '@/test-utils/index';
+import { fireEvent } from '@storybook/testing-library';
 import React from 'react';
 
 import { NsIcon, NsIconNameType, NsIconVariants } from './';
 
 describe('NsIcon Component', () => {
     it('1. renders cartBadge icon with custom size and color', () => {
-        const { getByTestId } = render(<NsIcon name="cart" size="medium" color="secondary" />);
+        const { getByTestId } = render(<NsIcon name="cart" size={'medium'} color="secondary" />);
         const icon = getByTestId('icon');
         const svgIcon = icon.querySelector('svg');
         // expect(svgIcon).toHaveClass('MuiSvgIcon-colorSecondary');
@@ -35,8 +36,16 @@ describe('NsIcon Component', () => {
         consoleErrorSpy.mockRestore();
     });
     it('5. renders default color of alertErrorIcon', () => {
-        const { getByTestId } = render(<NsIcon name="alertError" size="medium" />);
+        const { getByTestId } = render(<NsIcon name="alertError" size={'medium'} />);
         const icon = getByTestId('alertError');
         expect(icon).toBeInTheDocument();
     });
+    it('6. calls onClick event handler', () => {
+        const onClick = jest.fn();
+        const { getByTestId } = render(<NsIcon name="alertError" size="medium" onClick={onClick} />);
+        const icon = getByTestId('alertError');
+        expect(icon).toBeInTheDocument();
+        fireEvent.click(icon);
+        expect(onClick).toHaveBeenCalled();
+    });
 });

package/src/common/icon/NsIcon.stories.tsx

@@ -1,3 +1,4 @@
+import { PaletteColors } from '@nuskin/foundation-theme';
 import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsIcon, NsIconVariants } from './';
@@ -18,7 +19,7 @@ export default {
         },
         color: {
             control: 'select',
-            options: ['primary', 'secondary', 'success', 'error', 'warning', 'info'],
+            options: PaletteColors,
         },
         colorOverride: {
             control: 'color',

package/src/common/icon/NsIcon.styled.tsx

@@ -1,19 +1,22 @@
 import { styled } from '@nuskin/foundation-theme';
 import { NsIconSizeType } from './types.d';
 
-const iconSize = {
+export const iconSize: Record<NsIconSizeType, string> = {
     small: '16px',
     medium: '20px',
     large: '24px',
     xLarge: '30px',
 };
+type IconWrapperType = { size: NsIconSizeType };
 
-export const IconContainer = styled.div<{ size: NsIconSizeType }>`
-    display: flex;
-    place-content: center;
-    place-items: center;
-    svg {
-        width: ${({ size }) => iconSize[size]};
-        height: ${({ size }) => iconSize[size]};
-    }
-`;
+export const IconWrapper = styled('div')<IconWrapperType>(({ size }) => {
+    return {
+        display: 'flex',
+        placeContent: 'center',
+        placeItems: 'center',
+        svg: {
+            width: iconSize[size],
+            height: iconSize[size],
+        },
+    };
+});

package/src/common/icon/NsIcon.tsx

@@ -1,19 +1,22 @@
 import { useTheme } from '@mui/material';
 import { ColorUtils } from '@nuskin/foundation-theme';
-import { IconContainer } from './NsIcon.styled';
+
+import { IconWrapper } from './NsIcon.styled';
 import IconVariants from './NsIconVariants';
-import { NsIconProps } from './types.d';
+import { NsIconNameType, NsIconProps } from './types.d';
 
 const { paletteColor } = ColorUtils;
+
 const NsIcon = ({
     name,
-    size = 'large',
+    size,
     color = 'primary',
     testId = 'icon',
     className,
     colorOverride,
+    onClick = () => {},
 }: NsIconProps) => {
-    const Icon = IconVariants[name];
+    const Icon = IconVariants[name as NsIconNameType];
     const theme = useTheme();
     const iconColor = paletteColor(color)({ theme });
     if (!Icon) {
@@ -21,9 +24,9 @@ const NsIcon = ({
     }
 
     return (
-        <IconContainer data-testid={testId} size={size} className={className}>
+        <IconWrapper data-testid={testId} size={size || 'large'} className={className} onClick={onClick}>
             <Icon color={colorOverride ? colorOverride : (iconColor as any)} />
-        </IconContainer>
+        </IconWrapper>
     );
 };
 

package/src/common/icon/icons/UserIcon.tsx

@@ -6,7 +6,13 @@ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
  */
 const UserIcon = (props: SvgIconProps) => {
     return (
-        <SvgIcon viewBox="0 0 24 24" data-testid="userIcon" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <SvgIcon
+            viewBox="0 0 24 24"
+            data-testid="userIcon"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+            fill="transparent"
+        >
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"
@@ -17,6 +23,7 @@ const UserIcon = (props: SvgIconProps) => {
             <path
                 d="M19 20C18.9425 19.3229 19 17.5669 17.3793 17.2226C14.7126 16.6144 13.931 16.4078 14.1034 14.2272C15.8046 13.0796 15.7816 11.0252 15.7471 8.74139C15.7471 6.67508 14.0695 5 12 5C9.93052 5 8.25287 6.67508 8.25287 8.74139C8.25287 11.0367 8.25287 13.137 9.89655 14.2272C10.0575 16.4078 9.28736 16.6144 6.62069 17.2226C5 17.5669 5.05747 19.3229 5 20"
                 stroke={props.color}
+                fill={props.color}
                 strokeWidth="2"
                 strokeLinecap="round"
             />

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

@@ -1,15 +1,16 @@
 import { FoundationTheme } from '@nuskin/foundation-theme';
+import { HTMLProps } from 'react';
+
 import { NsIconVariants } from '.';
 
 export type NsIconSizeType = 'small' | 'medium' | 'large' | 'xLarge';
 
 export type NsIconNameType = keyof typeof NsIconVariants;
 
-export type NsIconProps = {
+export type NsIconProps = HTMLProps & {
     name: NsIconNameType;
     size?: NsIconSizeType;
     color?: FoundationTheme.PaletteColors;
     testId?: string;
-    className?: string;
     colorOverride?: string;
 };

package/src/common/progress/NsProgress.spec.tsx

@@ -4,7 +4,7 @@ import Progress from './NsProgress';
 
 describe(' NsProgress Component', () => {
     test('should render Progress bar', () => {
-        render(<Progress color="primary" value={10}></Progress>);
+        render(<Progress barColor="primary" value={10}></Progress>);
 
         const pbar = screen.getByRole('progressbar');
 
@@ -16,7 +16,7 @@ describe(' NsProgress Component', () => {
         const value = 50;
 
         // Render the StyledProgress component with the value prop
-        const { container } = render(<Progress color="primary" value={value} />);
+        const { container } = render(<Progress barColor="primary" value={value} />);
 
         // Get the progress bar element
         const progressBar = container.querySelector('.MuiLinearProgress-bar');

package/src/common/progress/NsProgress.stories.tsx

@@ -1,6 +1,7 @@
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import type { StoryObj, Meta } from '@storybook/react';
 import NsProgress from './NsProgress';
+import { PaletteColors } from '@nuskin/foundation-theme';
 
 type ComponentType = typeof NsProgress;
 type Story = StoryObj<ComponentType>;
@@ -8,10 +9,12 @@ type MetaStory = Meta<ComponentType>;
 
 export default {
     component: NsProgress,
-    title: 'Input/NsProgress',
+    title: 'Components/Inputs/NsProgress',
     decorators: [withCenterDecorator],
     argTypes: {
-        color: {
+        barColor: {
+            control: 'select',
+            options: PaletteColors,
             description: 'defines the color for the completed progress',
         },
         height: {
@@ -21,6 +24,8 @@ export default {
             description: 'value of the progress done',
         },
         backgroundColor: {
+            control: 'select',
+            options: PaletteColors,
             description: 'color of incomplete progress',
         },
     },
@@ -28,9 +33,9 @@ export default {
 
 export const ProgressBar: Story = {
     args: {
-        color: 'primary',
-        backgroundColor: '#19dbdb',
-        value: undefined,
+        barColor: 'primary',
+        backgroundColor: 'secondary',
+        value: 40,
         height: '10px',
         body: <span>{'% Complete'}</span>,
     },

package/src/common/progress/NsProgress.styled.tsx

@@ -2,8 +2,9 @@ import { styled, ColorUtils } from '@nuskin/foundation-theme';
 import { LinearProgress } from '@mui/material';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { NsProgressProps } from './types';
+import { NsTypography } from '../typography';
 
-const { color } = ColorUtils;
+const { color, paletteColor } = ColorUtils;
 export const StyledCheckCircle = styled(CheckCircleIcon)`
     color: ${color('neutral', '50')};
     padding-top: 0.6em;
@@ -11,29 +12,46 @@ export const StyledCheckCircle = styled(CheckCircleIcon)`
     justify-self: flex-end;
 `;
 
-export const PercentDiv = styled('div')`
-    color: ${color('primary', '100')};
+export const ProgressInfo = styled(NsTypography)`
     display: flex;
     justify-content: flex-end;
-    font-family: Inter;
-    font-size: 12px;
-    font-style: normal;
     font-weight: 700;
     text-transform: uppercase;
 `;
 
 export const StyledLinearProgress = styled(LinearProgress)<Omit<NsProgressProps, 'value'>>(
-    ({ height, backgroundColor, color }) => ({
+    ({ height, backgroundColor, barColor, theme }) => ({
         width: '334px',
         height,
-        backgroundColor,
-        borderRadius: '3px',
+        backgroundColor: paletteColor(backgroundColor)({ theme }),
+        borderRadius: '8px',
         display: 'inline-block',
 
         '.MuiLinearProgress-bar': {
-            backgroundColor: color,
+            backgroundColor: paletteColor(barColor)({ theme }),
         },
     })
 );
-
-export default StyledLinearProgress;
+export const StyledProgress = styled('div')(() => {
+    return {
+        display: 'grid',
+        gridTemplateRows: '30px 30px',
+        '.progress-info': {
+            justifyContent: 'flex-end',
+            display: 'flex',
+            alignItems: 'center',
+        },
+        '.progress-bar': {
+            display: 'flex',
+            alignItems: 'center',
+            '.MuiSvgIcon-root': {
+                padding: '0',
+                margin: '0',
+                height: '100%',
+                position: 'relative',
+                left: '-4px',
+                scale: '1.3',
+            },
+        },
+    };
+});