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

package/src/common/alert/NsAlert.stories.tsx

@@ -1,45 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import NsAlert from './NsAlert';
-
-type ComponentType = typeof NsAlert;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Feedback/NsAlert',
-    component: NsAlert,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        context: {
-            control: 'select',
-            options: ['error', 'info', 'notice', 'success', 'warning'],
-        },
-        type: {
-            control: 'select',
-            options: ['auto', 'banner', 'card'],
-        },
-    },
-    args: {
-        context: 'info',
-        title: 'Information',
-        threshold: 600,
-        type: 'banner',
-        visible: true,
-        onDismiss: () => {},
-        body: (
-            <span>{`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-         ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-          laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
-          qui officia deserunt mollit anim id est laborum.`}</span>
-        ) as ReactElement,
-        foot: (<span>Some message goes here.</span>) as ReactElement,
-    },
-} as MetaStory;
-
-export const Alert: Story = {};

package/src/common/alert/NsAlert.styled.tsx

@@ -1,114 +0,0 @@
-/* eslint-disable max-len */
-import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
-
-const { color } = ColorUtils;
-
-import type { AlertContainerParams, AlertType, AlertParams, TypeMapCSS } from './types';
-const gutterWidth = '10px';
-const closeButtonWidth = '12px';
-const iconWidth = '24px';
-
-const TypeMap: TypeMapCSS = {
-    banner: {
-        minHeight: '114px',
-        padding: '15px 45px',
-        contentColumnStart: 'row-center',
-        contentColumnEnd: 'row-center',
-        barPosition: 'top',
-        footVisibility: 'block',
-    },
-    card: {
-        minHeight: '72px',
-        padding: '24px 24px',
-        contentColumnStart: 'row-left',
-        contentColumnEnd: 'row-right',
-        barPosition: 'left',
-        footDisplay: 'none',
-    },
-};
-
-const contextType = {
-    error: 'red',
-    info: 'info',
-    notice: 'info',
-    success: 'success',
-    warning: 'warning',
-};
-
-export const AlertContainer = styled.div<AlertContainerParams>`
-    display: ${({ visible }) => (visible ? 'block' : 'none')};
-    * {
-        box-sizing: border-box;
-        webkit-font-smoothing: antialiased;
-    }
-    text-align: left;
-`;
-
-export const Alert = styled.div<AlertParams>`
-    position: relative;
-    display: grid;
-    grid-template-columns: [row-left] ${iconWidth} [space] ${gutterWidth} [row-center] auto [space] ${gutterWidth} [row-right] ${closeButtonWidth};
-    grid-template-rows: [row1] auto;
-    grid-auto-row: auto;
-    grid-auto-flow: row;
-    background-color: ${color('primary', 'white')};
-    border: 1px solid ${color('primary', 'black')};
-    min-height: ${({ type }) => TypeMap?.[type]?.minHeight};
-    padding: ${({ type }) => TypeMap?.[type]?.padding};
-    color: ${(props) => color(contextType?.[props?.context] as FoundationTheme.AppColors, '40')(props)} };
-`;
-
-export const AlertCloseButton = styled.div`
-    grid-column-start: row-right;
-    grid-column-end: row-right;
-    grid-row-start: row1;
-    grid-row-end: row1;
-    align-self: center;
-    cursor: pointer;
-`;
-
-export const AlertIcon = styled.div`
-    grid-column-start: row-left;
-    grid-column-end: row-left;
-    grid-row-start: row1;
-    grid-row-end: row1;
-    width: ${iconWidth};
-    height: ${iconWidth};
-`;
-
-export const AlertHead = styled.div`
-    grid-column-start: row-center;
-    grid-column-end: row-center;
-    grid-row-start: row1;
-    grid-row-end: row1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    .alert-head-title {
-        color: ${color('primary', 'black')};
-    }
-`;
-
-export const AlertContent = styled.div<{ type: AlertType }>`
-    margin-top: 8px;
-    color: ${color('primary', 'black')};
-    grid-column-start: ${({ type }) => TypeMap?.[type]?.contentColumnStart};
-    grid-column-end: ${({ type }) => TypeMap?.[type]?.contentColumnEnd};
-`;
-
-export const AlertFoot = styled.div<{ type: AlertType }>`
-    margin-top: 8px;
-    color: ${color('primary', 'black')};
-    display: ${({ type }) => TypeMap?.[type]?.['footDisplay']};
-    font-family: ${({ theme }) => theme?.fonts?.sectionFonts?.body};
-    font-weight: 300;
-    font-size: 14px;
-    line-height: 18px;
-`;
-
-export const AlertBody = styled.div`
-    font-family: ${({ theme }) => theme?.fonts?.sectionFonts?.body};
-    font-weight: 300;
-    font-size: 16px;
-    line-height: 21px;
-`;

package/src/common/alert/NsAlert.tsx

@@ -1,93 +0,0 @@
-import React, {
-    ReactElement,
-    useEffect,
-    useState,
-} from 'react';
-
-import useWindowSize from '../hooks/useWindowSize';
-import { NsIcon } from '../icon';
-import { NsTypography } from '../typography';
-import Header, {
-    colorMap,
-    iconMap,
-} from './Header';
-import {
-    Alert,
-    AlertBody,
-    AlertCloseButton,
-    AlertContainer,
-    AlertContent,
-    AlertFoot,
-    AlertHead,
-    AlertIcon,
-} from './NsAlert.styled';
-import type {
-    AlertType,
-    ContextType,
-    NsAlertProps,
-} from './types.d';
-
-export default function NsAlert({
-    context = 'info',
-    title = 'Information',
-    threshold = 600,
-    type = 'banner',
-    visible = false,
-    head,
-    body,
-    foot,
-    onDismiss = undefined,
-}: NsAlertProps): ReactElement {
-    const [alertType, setAlertType] = useState('banner');
-    const windowSize = useWindowSize();
-
-    const hasDismissListener = typeof onDismiss === 'function';
-
-    useEffect(() => {
-        if (!context) {
-            console.error(`Invalid prop value for 'context': ${context}`);
-        }
-        if (!type) {
-            console.error(`Invalid prop value for 'type': ${type}`);
-        }
-        if (type === 'auto') {
-            setAlertType(windowSize.width < threshold ? 'card' : 'banner');
-        } else {
-            setAlertType(type);
-        }
-    }, [threshold, type, windowSize.width, context]);
-
-    return (
-        <AlertContainer visible={visible} data-testid="alert-container">
-            <Alert type={alertType as AlertType} context={context as ContextType}>
-                <AlertIcon>
-                    <NsIcon
-                        name={iconMap[context] || iconMap.default}
-                        color={colorMap[context] || colorMap.default}
-                        size="large"
-                    />
-                </AlertIcon>
-                <AlertHead>
-                    <Header
-                        head={
-                            <NsTypography variant="body-xl" className="alert-head-title" weight="bold" noSpacing>
-                                {title}
-                            </NsTypography>
-                        }
-                    >
-                        {head}
-                    </Header>
-                </AlertHead>
-                {hasDismissListener && (
-                    <AlertCloseButton data-testid="alert-close-button" onClick={onDismiss}>
-                        <NsIcon name="close" size="small" cursor="pointer" />
-                    </AlertCloseButton>
-                )}
-                <AlertContent type={alertType as AlertType}>
-                    <AlertBody>{body}</AlertBody>
-                    {foot ? <AlertFoot type={alertType as AlertType}>{foot}</AlertFoot> : null}
-                </AlertContent>
-            </Alert>
-        </AlertContainer>
-    );
-}

package/src/common/alert/index.ts

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

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

@@ -1,45 +0,0 @@
-import { ReactNode, CSSProperties } from 'react';
-
-export interface NsAlertProps {
-    context?: string;
-    title?: string;
-    threshold?: number;
-    type?: string;
-    visible?: boolean;
-    head?: ReactNode;
-    body?: ReactNode;
-    onDismiss?: () => void;
-    foot?: ReactNode;
-}
-
-export interface HeaderProps {
-    children?: ReactNode; // Default slot content
-    head?: ReactNode; // Content for the "head" named slot (optional)
-}
-
-export type AlertContainerParams = {
-    visible: boolean;
-};
-
-export type ContextType = 'error' | 'info' | 'notice' | 'success' | 'warning';
-export type AlertType = 'auto' | 'banner' | 'card';
-
-export type AlertParams = {
-    context: ContextType;
-    type: AlertType;
-};
-
-export type CustomCSSProperties = CSSProperties & {
-    minHeight?: string;
-    contentColumnStart?: string;
-    contentColumnEnd?: string;
-    barPosition?: string;
-    footVisibility?: string;
-    footDisplay?: string;
-};
-
-export interface TypeMapCSS {
-    banner: CustomCSSProperties;
-    card: CustomCSSProperties;
-    auto?: CustomCSSProperties;
-}

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

@@ -1,54 +0,0 @@
-import React from 'react';
-import { render, fireEvent, screen } from '@/test-utils/index';
-import { NsAuthDropdown } from './';
-
-describe('NsAuthDropdown', () => {
-    const props = {
-        signInRedirectLink: '/signIn',
-        signUpRedirectLink: '/signUp',
-        signInBtnText: 'Sign In',
-        signUpLinkText: 'Sign Up',
-        signUpLinkPrefixText: 'Do not have an account?',
-        titleText: 'Welcome',
-    };
-
-    it('1. should render component with title text', () => {
-        render(<NsAuthDropdown {...props} />);
-        expect(screen.getByText('Welcome')).toBeInTheDocument();
-    });
-
-    it('2. should render the sign in button with text', () => {
-        render(<NsAuthDropdown {...props} />);
-        const authHead = screen.getByTestId('auth-head');
-        fireEvent.click(authHead);
-        expect(screen.getByTestId('sign-in-btn')).toBeInTheDocument();
-        expect(screen.getByTestId('sign-in-btn')).toHaveTextContent(props.signInBtnText);
-        expect(screen.getByTestId('signup-link')).toHaveTextContent(props.signUpLinkText);
-    });
-
-    it('3. should have the correct href attribute in SignUpLink', () => {
-        render(<NsAuthDropdown {...props} />);
-        const authHead = screen.getByTestId('auth-head');
-        fireEvent.click(authHead);
-        const signUpLink = screen.getByTestId('signup-link');
-        expect(signUpLink).toHaveAttribute('href', '/signUp');
-    });
-    it('4. should close dropdown on mouse leave', () => {
-        const { container } = render(<NsAuthDropdown {...props} closeOnMouseLeave={true} />);
-        const authHead = screen.getByTestId('auth-head');
-        fireEvent.click(authHead);
-        expect(screen.getByTestId('sign-in-btn')).toHaveTextContent('Sign In');
-        const wrapper = container.querySelector('.auth-wrapper');
-        if (wrapper) fireEvent.mouseLeave(wrapper);
-        expect(container.querySelector('.auth-wrapper')).toBeNull();
-    });
-    it('5. should not close dropdown on mouse leave', () => {
-        const { container } = render(<NsAuthDropdown {...props} closeOnMouseLeave={false} />);
-        const authHead = screen.getByTestId('auth-head');
-        fireEvent.click(authHead);
-        expect(screen.getByTestId('sign-in-btn')).toHaveTextContent('Sign In');
-        const wrapper = container.querySelector('.auth-wrapper');
-        if (wrapper) fireEvent.mouseLeave(wrapper);
-        expect(container.querySelector('.auth-wrapper')).not.toBeNull();
-    });
-});

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

@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { NsAuthDropdown } from './';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-
-type ComponentType = typeof NsAuthDropdown;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Data Display/NsAuthDropdown',
-    component: NsAuthDropdown,
-    decorators: [withCenterDecorator],
-    argTypes: {},
-    args: {
-        signInRedirectLink: '/signIn',
-        signUpRedirectLink: '/signUp',
-        signInBtnText: 'Sign In',
-        signUpLinkText: 'Sign up today!',
-        signUpLinkPrefixText: 'New customer?',
-        titleText: 'SIGN UP / SIGN IN',
-        closeOnMouseLeave: true,
-    },
-} as MetaStory;
-
-export const AuthDropdown: Story = {};

package/src/common/auth-dropdown/NsAuthDropdown.styled.ts

@@ -1,120 +0,0 @@
-import {
-    ColorUtils,
-    styled,
-} from '@nuskin/foundation-theme';
-
-import { DarkModeEnabledOption } from '../common.types';
-
-const { getGenomeColor } = ColorUtils;
-
-export const AuthDropdownContainer = styled.div`
-    position: relative;
-    display: inline-block;
-`;
-
-export const AuthDropdown = styled.div`
-    min-width: 280px;
-    background-color: white;
-    color: black;
-    text-align: center;
-    padding: 5px 0;
-    position: absolute;
-    z-index: 600;
-    top: calc(100% + 18px);
-    right: 5%;
-    box-shadow: 0 0 5px 0 ${({ theme }) => getGenomeColor(theme, 'N70')};
-    transition: all 0.15s ease-in-out;
-    padding: 25px;
-`;
-
-export const Triangle = styled.div`
-    position: absolute;
-    bottom: -18px;
-    left: 50%;
-    width: 24px;
-    height: 24px;
-    overflow: hidden;
-    transition: all 0.15s ease-in-out;
-    z-index: 700;
-    opacity: 1;
-    &::after {
-        content: '';
-        position: absolute;
-        width: 14px;
-        height: 14px;
-        background-color: ${({ theme }) => getGenomeColor(theme, 'N10')};
-        transform: rotate(45deg);
-        top: 17px;
-        left: 5px;
-        box-shadow: 0 0 5px 0 ${({ theme }) => getGenomeColor(theme, 'N70')};
-    }
-`;
-export const AuthHead = styled('div')<DarkModeEnabledOption>`
-    cursor: pointer;
-    padding: 5px 10px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    color: ${({ theme }) => getGenomeColor(theme, 'N100')};
-`;
-
-export const Button = styled.div`
-    padding-right: 10px;
-`;
-
-export const Link = styled.a`
-    text-decoration: none;
-`;
-
-export const SignInButton = styled(Link)`
-    display: block;
-    padding: 13px;
-    width: 100%;
-    background-color: ${({ theme }) => getGenomeColor(theme, 'N100')};
-    color: ${({ theme }) => getGenomeColor(theme, 'N10')};
-    border: 0;
-    font-size: 16px;
-    &:hover {
-        background-color: ${({ theme }) => getGenomeColor(theme, 'N60')};
-    }
-`;
-
-export const SignUpLinkContainer = styled.div`
-    margin-top: 15px;
-    color: ${({ theme }) => getGenomeColor(theme, 'N100')};
-    font-size: 13px;
-    line-height: 16px;
-    text-align: left;
-`;
-
-export const SignUpLink = styled(Link)`
-    cursor: pointer;
-    font-weight: 300;
-    font-size: 13px;
-    line-height: 16px;
-    text-decoration: none;
-    color: ${({ theme }) => getGenomeColor(theme, 'N100')};
-    position: relative;
-    transition: all 0.15s ease-in-out;
-    &:hover {
-        color: ${({ theme }) => getGenomeColor(theme, 'N60')};
-        font-size: 14px;
-    }
-    &:hover::after {
-        opacity: 1;
-        visibility: visible;
-    }
-    &::after {
-        content: '';
-        position: absolute;
-        bottom: -2px;
-        left: 0;
-        right: 0;
-        width: 100%;
-        height: 1px;
-        background-color: ${({ theme }) => getGenomeColor(theme, 'N100')};
-        transition: all 0.15s ease-in-out;
-        opacity: 0;
-        visibility: hidden;
-    }
-`;

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

@@ -1,72 +0,0 @@
-import { ReactElement, useCallback, useRef, useState } from 'react';
-
-import { useOnClickOutside } from '../hooks/useOnClickOutside';
-import { NsIcon } from '../icon';
-import {
-    AuthDropdown,
-    AuthDropdownContainer,
-    AuthHead,
-    Button,
-    SignInButton,
-    SignUpLink,
-    SignUpLinkContainer,
-    Triangle,
-} from './NsAuthDropdown.styled';
-import { NsAuthDropdownProps } from './types.d';
-
-const NsAuthDropdown = ({
-    signInRedirectLink,
-    signUpRedirectLink,
-    signInBtnText,
-    signUpLinkText,
-    signUpLinkPrefixText,
-    titleText,
-    closeOnMouseLeave = false,
-    darkModeEnabled = true,
-}: NsAuthDropdownProps): ReactElement => {
-    const [isOpen, setIsOpen] = useState(false);
-    const dropdownRef = useRef<HTMLDivElement | null>(null);
-
-    const handleToggle = useCallback(() => {
-        setIsOpen(!isOpen);
-    }, [isOpen]);
-
-    const handleClose = useCallback(() => {
-        setIsOpen(false);
-    }, []);
-
-    useOnClickOutside(dropdownRef?.current, handleClose);
-
-    const handleOnMouseLeave = useCallback(() => {
-        if (closeOnMouseLeave) {
-            handleClose();
-        }
-    }, [closeOnMouseLeave, handleClose]);
-
-    return (
-        <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" />
-                {isOpen ? (
-                    <div onMouseLeave={handleOnMouseLeave} className="auth-wrapper">
-                        <Triangle />
-                        <AuthDropdown>
-                            <SignInButton href={signInRedirectLink} data-testid="sign-in-btn">
-                                {signInBtnText}
-                            </SignInButton>
-                            <SignUpLinkContainer>
-                                {signUpLinkPrefixText}{' '}
-                                <SignUpLink data-testid="signup-link" href={signUpRedirectLink}>
-                                    {signUpLinkText}
-                                </SignUpLink>
-                            </SignUpLinkContainer>
-                        </AuthDropdown>
-                    </div>
-                ) : null}
-            </AuthHead>
-        </AuthDropdownContainer>
-    );
-};
-
-export default NsAuthDropdown;

package/src/common/auth-dropdown/index.ts

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

package/src/common/auth-dropdown/types.d.ts

@@ -1,11 +0,0 @@
-import { AdditionalProps } from '../common.types';
-
-export type NsAuthDropdownProps = {
-    signInRedirectLink: string;
-    signUpRedirectLink: string;
-    signInBtnText: string;
-    signUpLinkText: string;
-    signUpLinkPrefixText: string;
-    titleText: string;
-    closeOnMouseLeave?: boolean;
-} & AdditionalProps;

package/src/common/autocomplete/NsAutocomplete.spec.tsx

@@ -1,91 +0,0 @@
-import React from 'react';
-
-import { render, screen, waitFor } from '@/test-utils/index';
-import userEvent from '@testing-library/user-event';
-
-import { AutocompleteMockList } from '../autocomplete/mock/MockData';
-import { OptionUiComponent } from '../autocomplete/mock/MockUI';
-import NsAutocomplete from '../autocomplete/NsAutocomplete';
-
-const commonProps = {
-    value: '',
-    inputValue: '',
-    onInputChange: jest.fn(),
-    onChange: jest.fn(),
-    options: AutocompleteMockList,
-    placeholder: 'autocomplete-input',
-    OptionsUI: OptionUiComponent,
-    // renderOption: (props: any) => <li {...props}>{props.value}</li>,
-};
-describe('CustomAutocomplete', () => {
-    it('1. should render autocomplete component', () => {
-        render(<NsAutocomplete {...commonProps} />);
-        const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
-        expect(autocompleteInput).toBeInTheDocument();
-    });
-    it('2. check that onInputChange gets called', async () => {
-        const onInputChangeMock = jest.fn();
-        render(<NsAutocomplete {...commonProps} onInputChange={onInputChangeMock} />);
-        const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
-        expect(autocompleteInput).toBeInTheDocument();
-        await userEvent.type(autocompleteInput, 'GS Facial');
-        expect(onInputChangeMock).toHaveBeenCalled();
-    }, 100000);
-
-    it('3. displays options when typing in the input', async () => {
-        const onInputChangeMock = jest.fn();
-        render(<NsAutocomplete {...commonProps} onInputChange={onInputChangeMock} />);
-        const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
-        await userEvent.type(autocompleteInput, 'GS Facial');
-        await waitFor(
-            () => {
-                const option1 = screen.getByText('GS Facial Gels 2pk Subscription');
-                expect(option1).toBeInTheDocument();
-            },
-            { timeout: 5000 }
-        );
-    }, 160000);
-
-    it('4. selects an option when clicking on it', async () => {
-        const onChangeMock = jest.fn();
-        render(<NsAutocomplete {...commonProps} onChange={onChangeMock} />);
-        const autocompleteInput = screen.getByPlaceholderText(commonProps.placeholder);
-        await userEvent.type(autocompleteInput, 'GS Facial');
-        await waitFor(async () => {
-            const optionLi = screen.getByText('GS Facial Spa');
-            await userEvent.click(optionLi);
-        });
-        expect(onChangeMock).toHaveBeenCalled();
-    }, 90000000);
-
-    it('5. should load more options when clicking load more button', async () => {
-        const seeMore = {
-            text: 'See More',
-            show: true,
-            onSeeMore: jest.fn(),
-        };
-        render(<NsAutocomplete seeMore={seeMore} {...commonProps} />);
-        const autocompleteInput = screen.getByPlaceholderText(commonProps.placeholder);
-        await userEvent.type(autocompleteInput, 'GS Facial');
-        await waitFor(async () => {
-            const loadMoreButton = screen.getByText(seeMore.text);
-            await userEvent.click(loadMoreButton);
-        });
-        expect(seeMore.onSeeMore).toHaveBeenCalled();
-    }, 9000000);
-
-    it('6. should clear options when clicking clear button', async () => {
-        const clear = {
-            text: 'Clear All',
-            show: true,
-            onClear: jest.fn(),
-        };
-        render(<NsAutocomplete clear={clear} {...commonProps} />);
-        const autocompleteInput = screen.getByPlaceholderText(commonProps.placeholder);
-        await userEvent.type(autocompleteInput, 'GS Facial');
-        await waitFor(async () => {
-            const clearButton = screen.getByText(clear.text);
-            await userEvent.click(clearButton);
-        });
-    }, 90000000);
-});