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

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

@@ -1,126 +0,0 @@
-import React from 'react';
-import { render, fireEvent, screen, waitFor } from '@/test-utils/index';
-import NsDropdown from './NsDropdown';
-import NsDropdownOption from './NsDropdownOption';
-
-function createDropdownOptions(options: { value: string; label: string }[]) {
-    return options.map((option) => (
-        <NsDropdownOption key={option.value} value={option.value}>
-            {option.label}
-        </NsDropdownOption>
-    ));
-}
-
-describe('NsDropdown', () => {
-    const onSelect = jest.fn();
-    const selectedLabel = '';
-
-    const options = [
-        { value: 'Option 1', label: 'Option 1' },
-        { value: 'Option 2', label: 'Option 2' },
-        { value: 'Option 3', label: 'Option 3' },
-    ];
-
-    it('1. Should render the placeholder text when no value is selected', () => {
-        render(
-            <NsDropdown placeholder="Select an option" selectedLabel={selectedLabel} onSelect={onSelect}>
-                {createDropdownOptions(options)}
-            </NsDropdown>
-        );
-
-        expect(screen.getByText('Select an option')).toBeInTheDocument();
-    });
-
-    it('2. Should render the selected value label', () => {
-        render(
-            <NsDropdown selectedLabel={selectedLabel} onSelect={onSelect}>
-                {createDropdownOptions(options)}
-            </NsDropdown>
-        );
-        const dropdownHead = screen.getByTestId('dropdown-head');
-        fireEvent.click(dropdownHead);
-        const dropdownOptionContainer = screen.getByTestId('dropdown-option-container-0');
-
-        fireEvent.click(dropdownOptionContainer);
-        expect(onSelect).toHaveBeenCalledWith('Option 1');
-    });
-
-    it('3. Should open and close Dropdown on click', () => {
-        render(
-            <NsDropdown selectedLabel={selectedLabel} onSelect={onSelect}>
-                {createDropdownOptions(options)}
-            </NsDropdown>
-        );
-
-        const dropdownHead = screen.getByTestId('dropdown-head');
-        fireEvent.click(dropdownHead);
-
-        expect(screen.getByTestId('option-Option 1')).toBeInTheDocument();
-        expect(screen.getByTestId('option-Option 2')).toBeInTheDocument();
-        expect(screen.getByTestId('option-Option 3')).toBeInTheDocument();
-
-        fireEvent.click(dropdownHead);
-        expect(screen.queryByTestId('option-Option 1')).not.toBeInTheDocument();
-        expect(screen.queryByTestId('option-Option 2')).not.toBeInTheDocument();
-        expect(screen.queryByTestId('option-Option 3')).not.toBeInTheDocument();
-    });
-
-    it('4. Should close dropdown on mouse leave when closeOnMouseLeave is set to true', async () => {
-        render(
-            <NsDropdown closeOnMouseLeave selectedLabel={selectedLabel} onSelect={onSelect}>
-                {createDropdownOptions(options)}
-            </NsDropdown>
-        );
-
-        const dropdownHead = screen.getByTestId('dropdown-head');
-        fireEvent.click(dropdownHead);
-
-        const dropdownList = screen.getByTestId('dropdown-list');
-        fireEvent.mouseLeave(dropdownList);
-
-        await waitFor(() => {
-            expect(screen.queryByTestId('option-Option 1')).not.toBeInTheDocument();
-            expect(screen.queryByTestId('option-Option 2')).not.toBeInTheDocument();
-            expect(screen.queryByTestId('option-Option 3')).not.toBeInTheDocument();
-        });
-    });
-    it('5. Should not close dropdown on mouse leave when closeOnMouseLeave is set to false', () => {
-        render(
-            <NsDropdown selectedLabel={selectedLabel} onSelect={onSelect} closeOnMouseLeave={false}>
-                {createDropdownOptions(options)}
-            </NsDropdown>
-        );
-
-        const dropdownHead = screen.getByTestId('dropdown-head');
-        fireEvent.click(dropdownHead);
-
-        const dropdownList = screen.getByTestId('dropdown-list');
-        fireEvent.mouseLeave(dropdownList);
-
-        expect(screen.getByTestId('option-Option 1')).toBeInTheDocument();
-        expect(screen.getByTestId('option-Option 2')).toBeInTheDocument();
-        expect(screen.getByTestId('option-Option 3')).toBeInTheDocument();
-    });
-    it('6. Should not open dropdown when disabled is set to true', () => {
-        render(
-            <NsDropdown selectedLabel={selectedLabel} onSelect={onSelect} disabled>
-                {createDropdownOptions(options)}
-            </NsDropdown>
-        );
-
-        const dropdownHead = screen.getByTestId('dropdown-head');
-        fireEvent.click(dropdownHead);
-
-        expect(screen.queryByTestId('dropdown-list')).not.toBeInTheDocument();
-    });
-    it('7. Should apply no border style when type is not outlined', () => {
-        render(
-            <NsDropdown selectedLabel={selectedLabel} onSelect={onSelect} type="unfilled">
-                {createDropdownOptions(options)}
-            </NsDropdown>
-        );
-
-        const dropdownHead = screen.getByTestId('dropdown-head');
-        expect(dropdownHead).toHaveStyle('border: none');
-    });
-});

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

@@ -1,66 +0,0 @@
-import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
-import { Themed } from '../common.types';
-const { color, paletteColor, isDarkMode } = ColorUtils;
-
-export const DropdownContainer = styled.div<{ disabled: boolean }>`
-    position: relative;
-    display: inline-block;
-    opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
-    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-`;
-
-/** 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: ${getDropdownHeadBorder};
-    color: ${paletteColor('primary')};
-`;
-
-export const DropdownButton = styled.div`
-    padding-right: 10px;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-`;
-
-export const DropdownList = styled.div<{ borderColor: FoundationTheme.PaletteColors }>`
-    position: absolute;
-    z-index: 999;
-    border: 1px solid ${({ borderColor, theme }) => paletteColor(borderColor)({ theme })};
-    margin-top: 10px;
-    width: 100%;
-    color: ${paletteColor('primary', 'main')};
-    background-color: ${paletteColor('primary', 'contrastText')};
-`;
-
-const getListBgColor = (theme: FoundationTheme.Theme) => {
-    return color('accentColorB', isDarkMode({ theme }) ? '50' : '10')({ theme });
-};
-
-export const DropdownOptionContainer = styled.div`
-    cursor: pointer;
-    &:last-child {
-        border-bottom: none;
-    }
-`;
-
-export const ListItem = styled.div`
-    &:hover {
-        background-color: ${({ theme }) => getListBgColor(theme)};
-    }
-    &:active {
-        background-color: #7de3e8;
-    }
-    padding: 10px;
-`;

package/src/common/dropdown/NsDropdown.tsx

@@ -1,94 +0,0 @@
-import React, { ReactElement, useCallback, useRef, useState } from 'react';
-
-import { useOnClickOutside } from '../hooks/useOnClickOutside';
-import { NsIcon } from '../icon';
-import {
-    DropdownButton,
-    DropdownContainer,
-    DropdownHead,
-    DropdownList,
-    DropdownOptionContainer,
-} from './NsDropdown.styled';
-import { DropdownProps } from './types.d';
-
-const NsDropdown: React.FC<DropdownProps> = ({
-    selectedLabel,
-    onSelect,
-    children,
-    disabled = false,
-    type = 'outlined',
-    dropdownBorderColor = 'accentColorB',
-    closeOnMouseLeave = false,
-    className,
-    placeholder,
-}): ReactElement => {
-    const [isOpen, setIsOpen] = useState(false);
-    const dropdownRef = useRef<HTMLDivElement | null>(null);
-
-    const handleToggle = useCallback(() => {
-        if (disabled) return;
-        setIsOpen((x) => !x);
-    }, [disabled]);
-
-    const handleClose = useCallback(() => {
-        setIsOpen(false);
-    }, []);
-
-    useOnClickOutside(dropdownRef?.current, handleClose);
-
-    const handleOnMouseLeave = useCallback(() => {
-        if (closeOnMouseLeave) {
-            handleClose();
-        }
-    }, [closeOnMouseLeave, handleClose]);
-
-    const handleSelect = (input: string) => {
-        onSelect(input);
-        setIsOpen(false);
-    };
-
-    return (
-        <DropdownContainer disabled={disabled} ref={dropdownRef} className={className}>
-            <DropdownHead
-                data-testid="dropdown-head"
-                id="dropdown-head"
-                disabled={disabled}
-                type={type}
-                onClick={handleToggle}
-            >
-                <DropdownButton>{selectedLabel || placeholder}</DropdownButton>
-                <NsIcon
-                    testId="chevron-icon"
-                    id="chevron-icon"
-                    name="arrowDown"
-                    color="primary"
-                    cursor={disabled ? 'not-allowed' : 'pointer'}
-                />
-            </DropdownHead>
-            {isOpen ? (
-                <DropdownList
-                    data-testid="dropdown-list"
-                    id="dropdown-list"
-                    onMouseLeave={handleOnMouseLeave}
-                    borderColor={dropdownBorderColor}
-                >
-                    {children.map((child, key) => {
-                        const value = React.isValidElement(child) ? child.props.value : child;
-                        return (
-                            <DropdownOptionContainer
-                                data-testid={`dropdown-option-container-${key}`}
-                                className="dropdown-option-container"
-                                key={key}
-                                onClick={() => handleSelect(value)}
-                            >
-                                {child}
-                            </DropdownOptionContainer>
-                        );
-                    })}
-                </DropdownList>
-            ) : null}
-        </DropdownContainer>
-    );
-};
-
-export default NsDropdown;

package/src/common/dropdown/NsDropdownOption.tsx

@@ -1,13 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { ListItem } from './NsDropdown.styled';
-import { DropdownOptionProps } from './types.d';
-
-export const NsDropdownOption: React.FC<DropdownOptionProps> = ({ value, children }): ReactElement => {
-    return (
-        <ListItem data-testid={`option-${value}`} id="dropdown-item">
-            {children}
-        </ListItem>
-    );
-};
-export default NsDropdownOption;

package/src/common/dropdown/index.ts

@@ -1,3 +0,0 @@
-export { default as NsDropdown } from './NsDropdown';
-export { default as NsDropdownOption } from './NsDropdownOption';
-export type { DropdownOptionProps, DropdownProps } from './types.d';

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

@@ -1,67 +0,0 @@
-import React, { ReactElement, useState } from 'react';
-
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { NsDropdown, NsDropdownOption } from '../';
-
-type ComponentType = typeof NsDropdown;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Inputs/NsDropdown',
-    decorators: [withCenterDecorator],
-    component: NsDropdown,
-    argTypes: {
-        type: { control: 'select', options: ['unfilled', 'outlined'] },
-        disabled: { control: 'boolean' },
-        dropdownBorderColor: {
-            control: 'select',
-            options: ['primary', 'secondary', 'accentColorA', 'accentColorB', 'accentColorC'],
-        },
-        placeholder: { control: 'text' },
-        closeOnMouseLeave: { control: 'boolean' },
-    },
-    parameters: {
-        options: [
-            { label: 'Option 1', value: 'Option 1' },
-            { label: 'Option 2', value: 'Option 2' },
-            { label: 'Option 3', value: 'Option 3' },
-        ],
-    },
-    args: {
-        type: 'outlined',
-        disabled: false,
-        dropdownBorderColor: 'primary',
-        closeOnMouseLeave: false,
-        selectedLabel: '',
-        placeholder: 'options',
-    },
-} as MetaStory;
-
-const RenderStory = (args: any, context: any): ReactElement => {
-    const [selectedLabel, setSelectedLabel] = useState(args.selectedLabel);
-
-    const options = context.parameters.options;
-    const handleSelect = (value: string) => {
-        options.find((option: any) => {
-            if (option.value === value) {
-                setSelectedLabel(option.label);
-            }
-        });
-    };
-
-    return (
-        <NsDropdown {...args} selectedLabel={selectedLabel} onSelect={handleSelect}>
-            {options.map((option: any) => (
-                <NsDropdownOption key={option.value} value={option.value}>
-                    {option.label}
-                </NsDropdownOption>
-            ))}
-        </NsDropdown>
-    );
-};
-export const Dropdown: Story = {
-    render: RenderStory,
-};

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

@@ -1,64 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { NsDropdown, NsDropdownOption } from '../';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-
-type ComponentType = typeof NsDropdown;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Inputs/NsDropdown',
-    decorators: [withCenterDecorator],
-    component: NsDropdown,
-    argTypes: {
-        type: { control: 'select', options: ['unfilled', 'outlined'] },
-        disabled: { control: 'boolean' },
-        dropdownBorderColor: {
-            control: 'select',
-            options: ['primary', 'secondary', 'accentColorA', 'accentColorB', 'accentColorC'],
-        },
-        placeholder: { control: 'text' },
-        closeOnMouseLeave: { control: 'boolean' },
-    },
-    parameters: {
-        options: [
-            { label: 'English', value: 'english', country: 'United States (US)' },
-            { label: 'French', value: 'french', country: 'France (FR)' },
-            { label: 'German', value: 'german', country: 'Germany (DE)' },
-        ],
-    },
-    args: {
-        selectedLabel: 'United States (US) | English',
-        type: 'unfilled',
-        disabled: false,
-        dropdownBorderColor: 'accentColorB',
-        closeOnMouseLeave: true,
-    },
-} as MetaStory;
-
-const RenderStory = (args: any, context: any) => {
-    const [selectedLabel, setSelectedLabel] = useState(args.selectedLabel);
-
-    const options = context.parameters.options;
-    const handleSelect = (value: string) => {
-        options.find((option: any) => {
-            if (option.value === value) {
-                setSelectedLabel(`${option.country} | ${option.label}`);
-            }
-        });
-    };
-
-    return (
-        <NsDropdown {...args} selectedLabel={selectedLabel} onSelect={handleSelect}>
-            {options.map((option: any) => (
-                <NsDropdownOption key={option.value} value={option.value}>
-                    {option.label}
-                </NsDropdownOption>
-            ))}
-        </NsDropdown>
-    );
-};
-export const DropdownCountry: Story = {
-    render: RenderStory,
-};

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

@@ -1,23 +0,0 @@
-import { ReactNode } from 'react';
-import { FoundationTheme } from '@nuskin/foundation-theme';
-
-import { AdditionalProps } from '../common.types';
-
-export interface DropdownProps extends AdditionalProps {
-    selectedLabel: ReactNode;
-    onSelect: (arg: ReactNode) => void; // eslint-disable-line
-    children: ReactNode[];
-    disabled?: boolean;
-    type?: 'outlined' | 'unfilled';
-    placeholder?: string;
-    dropdownBorderColor?: FoundationTheme.PaletteColors;
-    closeOnMouseLeave?: boolean;
-    showListDivider?: boolean;
-    className?: string;
-    placeholder?: string;
-}
-
-export interface DropdownOptionProps {
-    value: string;
-    children: ReactNode;
-}

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

@@ -1,115 +0,0 @@
-import { userEvent } from '@storybook/testing-library';
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-
-import { emailPattern } from '../validations/regex';
-import NsEmailSimple from './NsEmailSimple';
-import { NsEmailSimpleProps } from './types';
-
-const getInput = (propsData: NsEmailSimpleProps) => {
-    const { container } = render(<NsEmailSimple {...propsData} />);
-    const inputElement = container.querySelector('input');
-    return inputElement;
-};
-// TODO: fix this spec
-describe('NsEmailSimple', () => {
-    let mockCheckEmail = jest.fn().mockResolvedValue([true, false]); // isValid, isAvailable
-    let propsData = {
-        disabled: false,
-        label: 'Email',
-        required: true,
-        maxLength: 50,
-        invalidEmailMessage: 'Please enter a valid email',
-        dupedEmailMessage: 'Email ID already exists',
-        requiredErrorMessage: 'Email field is required',
-        checkEmail: mockCheckEmail,
-    };
-    it('1. renders email field', async () => {
-        const { container } = render(<NsEmailSimple {...propsData} />);
-        const inputElement = container.querySelector('input');
-        expect(inputElement).toBeInTheDocument();
-        if (inputElement) {
-            const inputValue = 'test';
-            await userEvent.type(inputElement, inputValue);
-            await userEvent.tab();
-            expect(inputElement).toHaveValue(inputValue);
-            await userEvent.clear(inputElement);
-            expect(inputElement).toHaveValue('');
-
-            const inputValue2 = 'test@gmail.com';
-            await userEvent.type(inputElement, inputValue2);
-            await userEvent.tab();
-            expect(inputElement).toHaveValue(inputValue2);
-        }
-    });
-
-    it('2. renders email field with invalid regex error', async () => {
-        const inputElement = getInput(propsData);
-        if (!inputElement) {
-            return;
-        }
-        const mockCheckEmail = jest.fn().mockResolvedValue([true, true]); // isValid, isAvailable
-        render(<NsEmailSimple {...propsData} checkEmail={mockCheckEmail} />);
-        const wrongInputValue = 'test1!gmail.com';
-        await userEvent.clear(inputElement);
-        await userEvent.type(inputElement, wrongInputValue);
-        await userEvent.tab();
-        expect(inputElement).toHaveValue(wrongInputValue);
-    });
-    it('3. check email', async () => {
-        const inputElement = getInput(propsData);
-        if (!inputElement) {
-            return;
-        }
-        const mockCheckEmail2 = jest.fn().mockResolvedValue([true, false]); // isValid, isAvailable
-        render(<NsEmailSimple {...propsData} checkEmail={mockCheckEmail2} />);
-        await userEvent.clear(inputElement);
-        await userEvent.type(inputElement, 'test@gmail.co');
-        userEvent.tab();
-        expect(inputElement).toHaveValue('test@gmail.co');
-    });
-    it('4. renders email field with invalid error', async () => {
-        let mockCheckEmail = jest.fn().mockResolvedValue([false, false]); // isValid, isAvailable
-        let props = {
-            ...propsData,
-            checkEmail: mockCheckEmail,
-        };
-        render(<NsEmailSimple {...props} />);
-        const emailField = (await screen.findByTestId('email-field-test')) as HTMLInputElement;
-        expect(emailField).toBeInTheDocument;
-        const inputElement = emailField.querySelector('input');
-        if (!inputElement) {
-            return;
-        }
-        await userEvent.type(inputElement, 'test@gmail.com');
-        expect(inputElement.value).toMatch(emailPattern);
-    });
-    it('5. renders email field without error', async () => {
-        const mock = jest.fn().mockResolvedValue([true, true]);
-        const props = {
-            ...propsData,
-            checkEmail: mock,
-        };
-        const inputElement = getInput(props);
-        if (!inputElement) {
-            return;
-        }
-        await userEvent.type(inputElement, 'test@gmail.com');
-        expect(inputElement).toHaveValue('test@gmail.com');
-        expect(inputElement.value).toMatch(emailPattern);
-    });
-    it('6. renders email field with API error', async () => {
-        let mock = jest.fn().mockResolvedValue(undefined);
-        let props = {
-            ...propsData,
-            checkEmail: mock,
-        };
-        const inputElement = getInput(props);
-        if (!inputElement) {
-            return;
-        }
-        await userEvent.type(inputElement, 'test@gmail.com');
-        expect(inputElement).toHaveValue('test@gmail.com');
-        expect(inputElement.value).toMatch(emailPattern);
-    });
-});

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

@@ -1,61 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import NsEmailSimple from './NsEmailSimple';
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-
-async function checkEmail() {
-    const isServiceValid = Promise.resolve(true);
-    const isEmailAvailable = Promise.resolve(true);
-    return [isServiceValid, isEmailAvailable];
-}
-type ComponentType = typeof NsEmailSimple;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    component: NsEmailSimple,
-    title: 'Components/Inputs/NsEmailSimple',
-    decorators: [withCenterDecorator],
-    play: ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const el = canvas.getByTestId('email-field-test');
-        expect(el).toBeInTheDocument();
-    },
-
-    argTypes: {
-        disabled: {
-            description: 'Indicates whether the email field is enabled/disabled',
-        },
-        label: {
-            description: 'Label of the email component',
-        },
-        required: {
-            description: 'Indicates whether the email field is mandatory or not',
-        },
-        maxLength: {
-            description: 'Maximum number of characters allowed',
-        },
-        invalidEmailMessage: {
-            description: 'Displayed when an invalid email is entered',
-        },
-        dupedEmailMessage: {
-            description: 'Displayed when a duplicate email is entered',
-        },
-        requiredErrorMessage: {
-            description: 'Displayed when email is not entered',
-        },
-    },
-    args: {
-        disabled: false,
-        label: 'Email',
-        required: true,
-        maxLength: 50,
-        invalidEmailMessage: 'Please enter a valid email',
-        dupedEmailMessage: 'Email ID already exists',
-        requiredErrorMessage: 'Email field is required',
-        checkEmail: checkEmail,
-    },
-} as MetaStory;
-
-export const NsEmail: Story = {};