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

package/src/common/select/specs/NsSelect.spec.tsx

@@ -1,183 +0,0 @@
-import { RenderSelectOptionArgType } from '../types';
-import { fireEvent, render, screen, waitFor } from '@/test-utils/index';
-import React from 'react';
-
-import { NsSelect, NsSelectOption } from '../..';
-
-const renderSelectOption = (option: RenderSelectOptionArgType) => {
-    return (
-        <NsSelectOption
-            key={option.value}
-            value={option.value}
-            index={option.index ?? -1}
-            label={option.label}
-            onClick={option.onClick}
-        />
-    );
-};
-const createOptionTestId = (value: string) => `option-${value}`;
-const selectCommonProps = {
-    selected: { label: 'Option 1', value: 'Option1', index: 0 },
-    options: [
-        { value: 'Option1', label: 'Option 1' },
-        { value: 'Option2', label: 'Option 2' },
-        { value: 'Option3', label: 'Option 3' },
-    ],
-    onSelect: jest.fn(),
-    RenderOption: renderSelectOption,
-};
-describe('NsSelect', () => {
-    const onSelect = jest.fn();
-    const selected = { label: '', value: '' };
-
-    const options = [
-        { value: 'Option1', label: 'Option 1' },
-        { value: 'Option2', label: 'Option 2' },
-        { value: 'Option3', label: 'Option 3' },
-    ];
-
-    it('1. renders the placeholder text when no value is selected', () => {
-        render(
-            <NsSelect
-                placeholder="Select an option"
-                selected={selected}
-                onSelect={onSelect}
-                options={options}
-                RenderOption={renderSelectOption}
-            />
-        );
-
-        expect(screen.getByText('Select an option')).toBeInTheDocument();
-    });
-
-    it('2. clicking outside the select container closes the dropdown', async () => {
-        const { getByTestId, queryByTestId, container } = render(
-            <div>
-                <button className="extra"></button>
-                <NsSelect {...selectCommonProps} />
-            </div>
-        );
-        const selectButton = getByTestId('select-head');
-        fireEvent.mouseDown(selectButton);
-        const outsideElement = container.querySelector('button.extra');
-        if (outsideElement) fireEvent.click(outsideElement);
-        // check if the dropdown is closed
-        expect(queryByTestId(createOptionTestId(selectCommonProps.options[1].value))).toBeNull();
-    });
-
-    it('3. renders the selected value label', () => {
-        render(<NsSelect {...selectCommonProps} />);
-
-        expect(screen.getByText(selectCommonProps.selected.label)).toBeInTheDocument();
-    });
-
-    it('4. clicking on select button opens the dropdown', () => {
-        const { getByTestId, getByText } = render(<NsSelect {...selectCommonProps} />);
-        const selectButton = getByTestId('select-head');
-        fireEvent.mouseDown(selectButton);
-
-        // Check if the dropdown is opened (isOpen state is true)
-        const dropdownList = getByTestId('select-menu-list');
-        expect(dropdownList).toBeInTheDocument();
-
-        // Check if the options are rendered in the dropdown
-        selectCommonProps.options.slice(1).forEach((option) => {
-            const optionElement = getByText(option.label);
-            expect(optionElement).toBeInTheDocument();
-        });
-    });
-
-    it('5. disabling the select component prevents interaction', () => {
-        const { getByTestId, queryByTestId } = render(<NsSelect {...selectCommonProps} disabled />);
-        const selectButton = getByTestId('select-head');
-        fireEvent.mouseDown(selectButton);
-
-        // Check if the dropdown does not open (select list is not present)
-        const dropdownList = queryByTestId('select-menu-list');
-        expect(dropdownList).toBeNull();
-
-        expect(selectCommonProps.onSelect).not.toHaveBeenCalled();
-    });
-
-    it('6. menu closes on mouse leave when closeOnMouseLeave is set to true', async () => {
-        const { getByTestId } = render(<NsSelect {...selectCommonProps} closeOnMouseLeave />);
-
-        const selectHead = getByTestId('select-head');
-        fireEvent.mouseDown(selectHead);
-        const selectList = screen.queryByTestId('select-menu-list');
-        const option1 = screen.queryByTestId(createOptionTestId(selectCommonProps.options[0].value));
-        const option2 = screen.queryByTestId(createOptionTestId(selectCommonProps.options[1].value));
-        const option3 = screen.queryByTestId(createOptionTestId(selectCommonProps.options[2].value));
-        if (selectList) fireEvent.mouseLeave(selectList);
-
-        await waitFor(() => {
-            expect(option1).not.toBeInTheDocument();
-            expect(option2).not.toBeInTheDocument();
-            expect(option3).not.toBeInTheDocument();
-        });
-    });
-
-    it('7. select does not open when disabled', () => {
-        render(<NsSelect {...selectCommonProps} disabled />);
-
-        const selectHead = screen.getByTestId('select-head');
-        fireEvent.mouseDown(selectHead);
-
-        expect(screen.queryByTestId('select-menu-list')).not.toBeInTheDocument();
-    });
-
-    it('8. opens the select on "ArrowDown" key press', () => {
-        render(<NsSelect {...selectCommonProps} />);
-
-        const selectHead = screen.getByTestId('select-head');
-        fireEvent.mouseDown(selectHead, { key: 'arrowDown' });
-
-        expect(selectHead).toBeInTheDocument();
-    });
-
-    it('9. selects the next option on arrow right click', () => {
-        const { getByTestId, container } = render(<NsSelect {...selectCommonProps} hasArrows />);
-
-        const selectHead = getByTestId('select-head');
-        fireEvent.mouseDown(selectHead);
-
-        const rightArrow = container.querySelector('.RightArrow');
-        if (rightArrow) fireEvent.click(rightArrow);
-
-        expect(selectCommonProps.onSelect).toHaveBeenCalledWith({ ...selectCommonProps.options[1], index: 1 });
-    });
-
-    it('10. selects the previous option on arrow left click', () => {
-        const { getByTestId } = render(<NsSelect {...selectCommonProps} hasArrows reverseArrowControls />);
-
-        const selectHead = getByTestId('select-head');
-        fireEvent.mouseDown(selectHead);
-        const option3 = getByTestId(createOptionTestId(selectCommonProps.options[2].value));
-        fireEvent.click(option3);
-
-        const leftArrow = document.getElementsByClassName('LeftArrow')[0];
-        fireEvent.click(leftArrow);
-
-        expect(selectCommonProps.onSelect).toHaveBeenCalledWith({ ...selectCommonProps.options[1], index: 1 });
-    });
-
-    it('11. renders an error message with red styles', () => {
-        const errorMessage = 'Invalid value';
-
-        const { getByText } = render(<NsSelect {...selectCommonProps} hasArrows errorMessage={errorMessage} />);
-
-        const errorText = getByText(errorMessage);
-        expect(errorText).toBeInTheDocument();
-    });
-    it('12. selecting an option calls the onSelect callback', () => {
-        const { getByTestId } = render(<NsSelect {...selectCommonProps} hasArrows />);
-
-        const selectHead = getByTestId('select-head');
-        fireEvent.mouseDown(selectHead);
-
-        const option1 = getByTestId(createOptionTestId(selectCommonProps.options[2].value));
-        fireEvent.click(option1);
-
-        expect(selectCommonProps.onSelect).toHaveBeenCalledWith({ ...selectCommonProps.options[2], index: 2 });
-    });
-});

package/src/common/select/specs/NsSelectOption.spec.tsx

@@ -1,32 +0,0 @@
-import { fireEvent, render } from '@/test-utils/index';
-import React from 'react';
-
-import { NsSelectOption } from '../';
-
-describe('NsSelectOption', () => {
-    it('1. renders NsSelectOption component without errors', () => {
-        const value = 'option1';
-        const label = 'Option 1';
-        const onClick = jest.fn();
-        const { getByTestId, getByText } = render(
-            <NsSelectOption value={value} label={label} index={1} onClick={onClick} />
-        );
-
-        // Check if the option container element exists
-        const optionContainer = getByTestId(`option-${value}`);
-        expect(optionContainer).toBeInTheDocument();
-
-        // Check if the option label is rendered correctly
-        const optionLabel = getByText(label);
-        expect(optionLabel).toBeInTheDocument();
-    });
-    it('2. clicking on NsSelectOption selects the option', () => {
-        const value = 'option1';
-        const label = 'Option 1';
-        const onClick = jest.fn();
-        const { getByTestId } = render(<NsSelectOption value={value} label={label} onClick={onClick} index={1} />);
-        const optionElement = getByTestId(`option-${value}`);
-        fireEvent.click(optionElement);
-        expect(onClick).toHaveBeenCalled();
-    });
-});

package/src/common/select/stories/NsSelect.stories.tsx

@@ -1,89 +0,0 @@
-import React, { ReactElement, useState } from 'react';
-
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { NsSelect, NsSelectOption, SelectProps } from '../';
-import { countries } from './countries';
-
-type ComponentType = typeof NsSelect;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Inputs/NsSelect',
-    decorators: [withCenterDecorator],
-    component: NsSelect,
-    argTypes: {
-        type: { control: 'select', options: ['unfilled', 'outlined'] },
-        disabled: { control: 'boolean' },
-        selectBorderColor: {
-            control: 'select',
-            options: ['primary', 'secondary', 'accentColorA', 'accentColorB', 'accentColorC'],
-        },
-        placeholder: { control: 'text' },
-        closeOnMouseLeave: { control: 'boolean' },
-        showListDivider: { control: 'boolean' },
-        label: { control: 'text' },
-        name: { control: 'text' },
-        menuProps: { control: 'text' },
-        reverseArrowControls: { control: 'boolean' },
-        validateOnBlur: { control: 'boolean' },
-        autoComplete: { control: 'text' },
-        rules: { control: 'array' },
-        hasArrows: { control: 'boolean' },
-    },
-    parameters: {
-        options: countries,
-    },
-    args: {
-        type: 'outlined',
-        disabled: false,
-        selectBorderColor: 'primary',
-        closeOnMouseLeave: false,
-        showListDivider: true,
-        selected: { label: '', value: '', index: 0 },
-        label: 'State',
-        placeholder: '',
-        name: '',
-        menuProps: 'auto',
-        reverseArrowControls: false,
-        validateOnBlur: false,
-        autoComplete: '',
-        rules: [],
-        hasArrows: false,
-    },
-} as MetaStory;
-
-const AppSelect = (props: SelectProps): ReactElement => {
-    const { selected } = props;
-
-    const [data, setData] = useState(selected);
-    const onSelect = (x: any) => {
-        setData(x);
-    };
-    return (
-        <NsSelect
-            {...props}
-            selected={data}
-            onSelect={onSelect}
-            label={props.label}
-            options={props.options}
-            RenderOption={(props) => {
-                return <NsSelectOption {...props} key={props?.value} onClick={props.onClick} />;
-            }}
-        />
-    );
-};
-export const Select: Story = {
-    render: (args, context) => {
-        const options = context.parameters.options;
-        return <AppSelect {...args} options={options} />;
-    },
-};
-export const SelectWithArrows: Story = {
-    render: (args, context) => {
-        const options = context.parameters.options;
-        return <AppSelect {...args} options={options} hasArrows />;
-    },
-};

package/src/common/select/stories/countries.ts

@@ -1,53 +0,0 @@
-export const countries = [
-    { label: 'Alabama', value: 'AL' },
-    { label: 'Alaska', value: 'AK' },
-    { label: 'Arizona', value: 'AZ' },
-    { label: 'Arkansas', value: 'AR' },
-    { label: 'California', value: 'CA' },
-    { label: 'Colorado', value: 'CO' },
-    { label: 'Connecticut', value: 'CT' },
-    { label: 'Delaware', value: 'DE' },
-    { label: 'District of Columbia', value: 'DC' },
-    { label: 'Florida', value: 'FL' },
-    { label: 'Georgia', value: 'GA' },
-    { label: 'Hawaii', value: 'HI' },
-    { label: 'Idaho', value: 'ID' },
-    { label: 'Illinois', value: 'IL' },
-    { label: 'Indiana', value: 'IN' },
-    { label: 'Iowa', value: 'IA' },
-    { label: 'Kansas', value: 'KA' },
-    { label: 'Kentucky', value: 'KY' },
-    { label: 'Louisiana', value: 'LA' },
-    { label: 'Maine', value: 'ME' },
-    { label: 'Maryland', value: 'MY' },
-    { label: 'Massachusetts', value: 'MA' },
-    { label: 'Michigan', value: 'MC' },
-    { label: 'Minnesota', value: 'MN' },
-    { label: 'Mississippi', value: 'MI' },
-    { label: 'Missouri', value: 'MO' },
-    { label: 'Montana', value: 'MT' },
-    { label: 'Nebraska', value: 'NE' },
-    { label: 'Nevada', value: 'NA' },
-    { label: 'New Hampshire', value: 'NH' },
-    { label: 'New Jersey', value: 'NJ' },
-    { label: 'New Mexico', value: 'NM' },
-    { label: 'New York', value: 'NY' },
-    { label: 'North Carolina', value: 'NC' },
-    { label: 'North Dakota', value: 'CD' },
-    { label: 'Ohio', value: 'OH' },
-    { label: 'Oklahoma', value: 'OK' },
-    { label: 'Oregon', value: 'OR' },
-    { label: 'Pennsylvania', value: 'PA' },
-    { label: 'Rhode Island', value: 'RI' },
-    { label: 'South Carolina', value: 'SC' },
-    { label: 'South Dakota', value: 'SD' },
-    { label: 'Tennessee', value: 'TN' },
-    { label: 'Texas', value: 'TX' },
-    { label: 'Utah', value: 'UT' },
-    { label: 'Vermont', value: 'VT' },
-    { label: 'Virginia', value: 'VA' },
-    { label: 'Washington', value: 'WA' },
-    { label: 'West Virginia', value: 'WV' },
-    { label: 'Wisconsin', value: 'WN' },
-    { label: 'Wyoming', value: 'WY' },
-];

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

@@ -1,49 +0,0 @@
-import { FoundationTheme } from '@nuskin/foundation-theme';
-import { ReactNode } from 'react';
-
-export interface SelectProps {
-    selected: LabelValueType;
-    onSelect(arg: LabelValueType): void; // eslint-disable-line
-    children?: ReactNode | null;
-    disabled?: boolean;
-    type?: 'outlined' | 'unfilled';
-    placeholder?: string;
-    selectBorderColor?: FoundationTheme.PaletteColors;
-    closeOnMouseLeave?: boolean;
-    showListDivider?: boolean;
-    label?: string;
-    readOnly?: boolean;
-    name?: string;
-    errorMessage?: string;
-    menuProps?: string | object;
-    reverseArrowControls?: boolean;
-    validateOnBlur?: boolean;
-    autoComplete?: string;
-    // eslint-disable-next-line no-undef
-    rules?: Array;
-    hasArrows?: boolean;
-    options: LabelValueType[];
-    RenderOption?(x: any): any; // eslint-disable-line
-}
-
-export interface SelectOptionProps {
-    value: string;
-    label: string;
-    selected?: LabelValueType;
-    index: number;
-    onClick: () => void;
-    showListDivider?: boolean;
-}
-
-export type LabelValueType = {
-    label: string;
-    value: string;
-    id?: string;
-    index?: number;
-};
-
-export type RenderSelectOptionArgType = LabelValueType & {
-    onClick(): void;
-    showListDivider: boolean;
-    selected: LabelValueType;
-};

package/src/common/spinner/NsSpinner.spec.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { render, screen } from '@/test-utils/index';
-import NsSpinner from './NsSpinner';
-
-describe('NsSpinner', () => {
-    test('1.renders spinner', () => {
-        const { container } = render(<NsSpinner additionalProps={{ 'data-testid': 'spinner' }} />);
-
-        expect(screen.getByTestId('spinner')).toBeInTheDocument();
-        expect(container.getElementsByTagName('svg')).toHaveLength(1);
-        expect(screen.getByTestId('spinner')).toHaveStyle('width:100px');
-    });
-
-    test('2.renders spinner with different size', () => {
-        render(<NsSpinner size={200} additionalProps={{ 'data-testid': 'spinner' }} />);
-
-        expect(screen.getByTestId('spinner')).toBeInTheDocument();
-        expect(screen.getByTestId('spinner')).toHaveStyle('width:200px');
-        expect(screen.getByTestId('spinner')).toHaveStyle('height:200px');
-    });
-});

package/src/common/spinner/NsSpinner.stories.tsx

@@ -1,29 +0,0 @@
-import { ReactElement } from 'react';
-
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import NsSpinner from './NsSpinner';
-
-type ComponentType = typeof NsSpinner;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Feedback/NsSpinner',
-    component: NsSpinner,
-    decorators: [
-        (Story): ReactElement => (
-            <div className="flex place-content-center">
-                <Story />
-            </div>
-        ),
-        withCenterDecorator,
-    ],
-    argTypes: {},
-    args: {
-        size: 200,
-    },
-} as MetaStory;
-
-export const Spinner: Story = {};