@nuskin/foundation-ui-components 1.33.0-1253-feature.3 → 2.0.0

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

@@ -1,72 +0,0 @@
-import React, { ReactElement, useState } from 'react';
-
-import { NsInputField } from '../input';
-import { fieldStateType } from '../input/types';
-import { emailPattern } from '../validations/regex';
-import { NsEmailSimpleProps } from './types';
-
-const NsEmailSimple = (props: NsEmailSimpleProps): ReactElement => {
-    const {
-        disabled,
-        label,
-        required,
-        maxLength,
-        invalidEmailMessage,
-        dupedEmailMessage,
-        requiredErrorMessage,
-        checkEmail,
-        additionalProps,
-    } = props;
-    const [fieldState, setFieldState] = useState<fieldStateType>();
-    const [errorMsg, setErrorMessage] = useState('');
-
-    const handleBlur = async (e: React.FocusEvent<HTMLInputElement>) => {
-        const emailInput = e.target.value.toLowerCase().trim();
-        let fieldStateValue: fieldStateType;
-        let errorMessageValue = '';
-        if (required && !emailInput) {
-            fieldStateValue = 'error';
-            errorMessageValue = requiredErrorMessage;
-        } else if (!emailPattern.test(emailInput)) {
-            fieldStateValue = 'error';
-            errorMessageValue = invalidEmailMessage;
-        } else if (typeof checkEmail === 'function') {
-            try {
-                const [isValid, isAvailable] = await checkEmail();
-                if (!isValid) {
-                    fieldStateValue = 'error';
-                    errorMessageValue = invalidEmailMessage;
-                } else if (!isAvailable) {
-                    fieldStateValue = 'error';
-                    errorMessageValue = dupedEmailMessage;
-                } else {
-                    fieldStateValue = undefined;
-                    errorMessageValue = '';
-                }
-            } catch (error) {
-                console.error('API error', error);
-            }
-        } else {
-            //TODO What happens when user does not pass valid checkEmail function
-        }
-        setFieldState(fieldStateValue);
-        setErrorMessage(errorMessageValue);
-    };
-    return (
-        <NsInputField
-            required={required}
-            disabled={disabled}
-            label={label}
-            onBlur={handleBlur}
-            inputProps={{ maxLength }}
-            additionalProps={{ testid: additionalProps?.testid ?? 'email-field-test' }}
-            helperText={errorMsg}
-            fieldState={fieldState}
-            InputProps={{
-                endAdornment: null,
-            }}
-        />
-    );
-};
-
-export default NsEmailSimple;

package/src/common/email-simple/index.ts

@@ -1,2 +0,0 @@
-export { default as NsEmailSimple } from './NsEmailSimple';
-export type { NsEmailSimpleProps } from './types.d';

package/src/common/email-simple/types.d.ts

@@ -1,14 +0,0 @@
-import { TextFieldProps } from '@mui/material';
-import { AdditionalProps } from '../common.types';
-
-export type NsEmailSimpleProps = Pick<TextFieldProps> &
-    AdditionalProps & {
-        disabled?: boolean;
-        label?: string;
-        required?: boolean;
-        maxLength?: number;
-        invalidEmailText?: string;
-        dupedEmailText?: string;
-        requiredErrorMessage?: string;
-        checkEmail?: Function;
-    };

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

@@ -1,27 +0,0 @@
-import { render } from '@/test-utils/index';
-import React from 'react';
-
-import { NsFlag } from '../';
-
-describe('FlagComponent', () => {
-    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);
-
-        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.stories.tsx

@@ -1,22 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsFlag } from './';
-
-type ComponentType = typeof NsFlag;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Data Display/NsFlag',
-    component: NsFlag,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        color: { name: 'Color Variants' },
-    },
-    args: {
-        message: 'Nuskin',
-        color: 'accentColorA',
-    },
-} as MetaStory;
-
-export const Flags: Story = {};

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

@@ -1,73 +0,0 @@
-/**
- * @author [vijayaprathap Kumar] (vpkumar@nuskin.com)
- * Flag.styled.tsx
- @description Styled Components for Flag
- */
-
-import { Theme } from '@mui/material';
-import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
-
-import { NsFlagSize } from './types.d';
-
-const { paletteColor } = ColorUtils;
-
-type NsFlagThemeParams = {
-    $size: NsFlagSize;
-    $bgColor?: FoundationTheme.PaletteColors;
-    theme?: Theme;
-};
-
-// Scale value used to divide size from props for create tag tail as per Flag width and height;
-const FLAG_SCALE_VALUE = 2;
-
-const FlagHeightMap = {
-    small: 20,
-    medium: 24,
-    large: 28,
-};
-
-const getFlagHeight = ({ $size }: { $size: NsFlagSize }) => {
-    return FlagHeightMap[$size];
-};
-
-const makeFlagSize = ({ $size }: { $size: NsFlagSize }) => {
-    const sizeValue = getFlagHeight({ $size });
-    return sizeValue / FLAG_SCALE_VALUE;
-};
-
-const makeFlagBorder = ({ $size, $bgColor = 'accentColorA', theme }: NsFlagThemeParams) => {
-    return `${makeFlagSize({ $size })}px solid ${paletteColor($bgColor)({ theme })}`;
-};
-
-export const StyledFlag = styled('span')<NsFlagThemeParams>`
-    min-width: 29px;
-    height: ${getFlagHeight}px;
-    color: ${({ $bgColor = 'accentColorA', theme }) => paletteColor($bgColor, 'contrastText')({ theme })};
-    background: ${({ $bgColor = 'accentColorA', theme }) => paletteColor($bgColor)({ theme })};
-    position: relative;
-    padding: 0 15px;
-    display: inline-grid;
-    align-content: space-around;
-    :before {
-        position: absolute;
-        top: 0;
-        right: -${makeFlagSize}px;
-        content: '';
-        width: 0;
-        height: 0;
-        display: block;
-        border-right: ${makeFlagSize}px solid transparent;
-        border-top: ${makeFlagBorder};
-    }
-    :after {
-        position: absolute;
-        top: 0;
-        right: -${makeFlagSize}px;
-        content: '';
-        width: 0;
-        height: ${makeFlagSize}px;
-        display: block;
-        border-right: ${makeFlagSize}px solid transparent;
-        border-bottom: ${makeFlagBorder};
-    }
-`;

package/src/common/flag/NsFlag.tsx

@@ -1,24 +0,0 @@
-/**
- * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
- * flag.tsx
- * @description NsFlag component with a themed background
- */
-
-import React, { PropsWithChildren, ReactElement } from 'react';
-
-import { StyledFlag } from './NsFlag.styled';
-import { NsFlagProps } from './types.d';
-
-const NsFlag = (props: PropsWithChildren<NsFlagProps>): ReactElement | null => {
-    const { className = '', size = 'small', color = 'accentColorA', message, testId = 'ns-flag-component' } = props;
-    if (!message) {
-        return null;
-    }
-    return (
-        <StyledFlag $size={size} $bgColor={color} data-testid={testId} className={className}>
-            {message}
-        </StyledFlag>
-    );
-};
-
-export default NsFlag;

package/src/common/flag/index.ts

@@ -1,2 +0,0 @@
-export { default as NsFlag } from './NsFlag';
-export type { NsFlagProps, NsFlagSize } from './types.d';

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

@@ -1,16 +0,0 @@
-/**
- * @description Extend the FlagProps interface to include message, color and size prop.
- */
-
-import { FoundationTheme } from '@nuskin/foundation-theme';
-
-export type NsFlagSize = 'small' | 'medium' | 'large';
-
-export type NsFlagProps = {
-    className?: string;
-    size?: NsFlagSize;
-    message?: string;
-    testId?: string;
-    /** Displays background color for flag container */
-    color?: FoundationTheme.PaletteColors;
-};

package/src/common/hooks/index.ts

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

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

@@ -1,19 +0,0 @@
-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

@@ -1,39 +0,0 @@
-import { useCallback, useEffect, useState } 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/useOnClickOutside.tsx

@@ -1,25 +0,0 @@
-import { useEffect } from 'react';
-
-export type Handler = () => void;
-
-export function useOnClickOutside(
-    element: HTMLDivElement | null,
-    handler: Handler = () => {},
-    mouseEvent: 'click' | 'mousedown' | 'mouseup' = 'click'
-): void {
-    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?.();
-        };
-        if (document) {
-            document.addEventListener(mouseEvent, eventListener);
-            return () => {
-                document.removeEventListener(mouseEvent, eventListener);
-            };
-        }
-    }, [mouseEvent, handler, element]);
-}

package/src/common/hooks/useWindowSize.tsx

@@ -1,30 +0,0 @@
-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;

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

@@ -1,51 +0,0 @@
-import React from 'react';
-
-import { render, screen } from '@/test-utils/index';
-import { fireEvent } from '@storybook/testing-library';
-
-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 icon = getByTestId('icon');
-        const svgIcon = icon.querySelector('svg');
-        // expect(svgIcon).toHaveClass('MuiSvgIcon-colorSecondary');
-        expect(svgIcon).toHaveClass('MuiSvgIcon-fontSizeMedium');
-    });
-
-    it('2. renders with testId', () => {
-        Object.keys(NsIconVariants).forEach((iconName) => {
-            render(<NsIcon name={iconName as NsIconNameType} />);
-            const icon = screen.getByTestId(iconName);
-            expect(icon).toBeInTheDocument();
-        });
-    });
-    it('3. renders with custom testId', () => {
-        const { getByTestId } = render(<NsIcon name="cart" testId="custom-icon" />);
-        const icon = getByTestId('custom-icon');
-        expect(icon).toBeInTheDocument();
-        expect(icon.innerHTML).toContain('svg');
-    });
-
-    it('4. throws an error if invalid icon name is provided', () => {
-        const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-        const { queryByTestId } = render(<NsIcon name="invalidIcon" />);
-        expect(queryByTestId('icon')).not.toBeInTheDocument();
-        expect(consoleErrorSpy).not.toHaveBeenCalled();
-        consoleErrorSpy.mockRestore();
-    });
-    it('5. renders default color of alertErrorIcon', () => {
-        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,77 +0,0 @@
-import { PaletteColors } from '@nuskin/foundation-theme';
-
-import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsIcon, NsIconVariants } from './';
-
-type ComponentType = typeof NsIcon;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Icons/NsIcon',
-    component: NsIcon,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        size: { control: 'select', options: ['small', 'medium', 'large', 'xLarge'] },
-        name: {
-            control: 'select',
-            options: Object.keys(NsIconVariants),
-        },
-        color: {
-            control: 'select',
-            options: PaletteColors,
-        },
-        colorOverride: {
-            control: 'color',
-        },
-        cursor: {
-            control: 'select',
-            options: [
-                'auto',
-                'default',
-                'none',
-                'context-menu',
-                'help',
-                'pointer',
-                'progress',
-                'wait',
-                'cell',
-                'crosshair',
-                'text',
-                'vertical-text',
-                'alias',
-                'copy',
-                'move',
-                'no-drop',
-                'not-allowed',
-                'grab',
-                'grabbing',
-                'e-resize',
-                'n-resize',
-                'ne-resize',
-                'nw-resize',
-                's-resize',
-                'se-resize',
-                'sw-resize',
-                'w-resize',
-                'ew-resize',
-                'ns-resize',
-                'nesw-resize',
-                'nwse-resize',
-                'col-resize',
-                'row-resize',
-                'all-scroll',
-                'zoom-in',
-                'zoom-out',
-            ],
-        },
-    },
-    args: {
-        size: 'large',
-        name: 'checkShield',
-        color: 'success',
-    },
-} as MetaStory;
-
-export const Icon: Story = {};

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

@@ -1,27 +0,0 @@
-import { styled } from '@nuskin/foundation-theme';
-
-import {
-    NsIconProps,
-    NsIconSizeType,
-} from './types.d';
-
-export const iconSize: Record<NsIconSizeType, string> = {
-    small: '16px',
-    medium: '20px',
-    large: '24px',
-    xLarge: '30px',
-};
-type IconWrapperType = { size: NsIconSizeType; cursor: NsIconProps['cursor'] };
-
-export const IconWrapper = styled('span')<IconWrapperType>(({ size, cursor }) => {
-    return {
-        display: 'flex',
-        placeContent: 'center',
-        placeItems: 'center',
-        cursor,
-        svg: {
-            width: iconSize[size],
-            height: iconSize[size],
-        },
-    };
-});

package/src/common/icon/NsIcon.tsx

@@ -1,44 +0,0 @@
-import { ReactElement } from 'react';
-
-import { useTheme } from '@mui/material';
-import { ColorUtils } from '@nuskin/foundation-theme';
-
-import { IconWrapper } from './NsIcon.styled';
-import IconVariants from './NsIconVariants';
-import { NsIconNameType, NsIconProps } from './types.d';
-
-const { paletteColor } = ColorUtils;
-
-const NsIcon = ({
-    name,
-    size,
-    color = 'primary',
-    testId = 'icon',
-    className,
-    colorOverride,
-    onClick = () => {},
-    cursor = 'pointer',
-    ...rest
-}: NsIconProps): ReactElement | null => {
-    const Icon = IconVariants[name as NsIconNameType];
-    const theme = useTheme();
-    const iconColor = paletteColor(color)({ theme });
-    if (!Icon) {
-        return null;
-    }
-
-    return (
-        <IconWrapper
-            {...rest}
-            data-testid={testId}
-            size={size || 'large'}
-            className={className}
-            onClick={onClick}
-            cursor={cursor}
-        >
-            <Icon color={colorOverride ? colorOverride : (iconColor as any)} />
-        </IconWrapper>
-    );
-};
-
-export default NsIcon;

package/src/common/icon/NsIconVariants.ts

@@ -1,56 +0,0 @@
-import ArrowDown from './icons/ArrowDown';
-import ArrowUp from './icons/ArrowUp';
-import ArrowLeft from './icons/ArrowLeft';
-import ArrowRight from './icons/ArrowRight';
-import Cart from './icons/Cart';
-import CartBadge from './icons/CartBadge';
-import InfoFilled from './icons/InfoFilled';
-import InfoOutlined from './icons/InfoOutlined';
-import CheckShield from './icons/CheckShield';
-import CheckVerified from './icons/CheckVerified';
-import SuccessIcon from './icons/SuccessIcon';
-import ErrorIcon from './icons/ErrorIcon';
-import TrashIcon from './icons/TrashIcon';
-import SearchIcon from './icons/SearchIcon';
-import SlashIcon from './icons/SlashIcon';
-import Home from './icons/home';
-import AlertErrorIcon from './icons/AlertErrorIcon';
-import WarningIcon from './icons/WarningIcon';
-import CloseIcon from './icons/CloseIcon';
-import UserIcon from './icons/UserIcon';
-import HamburgerIcon from './icons/HamburgerIcon';
-import UserOutline from './icons/UserOutline';
-import Check from './icons/Check';
-import RoundedClose from './icons/RoundedClose';
-import ChevronRight from './icons/ChevronRight';
-
-const IconVariants = {
-    arrowDown: ArrowDown,
-    arrowUp: ArrowUp,
-    arrowLeft: ArrowLeft,
-    arrowRight: ArrowRight,
-    alertError: AlertErrorIcon,
-    cart: Cart,
-    cartBadge: CartBadge,
-    close: CloseIcon,
-    check: Check,
-    checkShield: CheckShield,
-    checkVerified: CheckVerified,
-    error: ErrorIcon,
-    hamburgerIcon: HamburgerIcon,
-    home: Home,
-    infoFilled: InfoFilled,
-    infoOutlined: InfoOutlined,
-    search: SearchIcon,
-    success: SuccessIcon,
-    slash: SlashIcon,
-    trash: TrashIcon,
-    userIcon: UserIcon,
-    userOutline: UserOutline,
-    warning: WarningIcon,
-    roundedClose: RoundedClose,
-    chevronRight: ChevronRight,
-};
-
-export default IconVariants;
-export const isValidIconName = (name: string) => Object.keys(IconVariants).includes(name);