@nuskin/foundation-ui-components 1.3.0 → 1.4.1

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

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

@@ -0,0 +1,32 @@
+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,8 +1,9 @@
 import React, { useState } from 'react';
+
 import type { Meta, StoryObj } from '@storybook/react';
-import NsSelect from '../NsSelect';
-import NsSelectOption from '../NsSelectOption';
+import { NsSelectOption, NsSelect, SelectProps } from '../';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { countries } from './countries';
 
 type ComponentType = typeof NsSelect;
 type Story = StoryObj<ComponentType>;
@@ -32,59 +33,7 @@ export default {
         hasArrows: { control: 'boolean' },
     },
     parameters: {
-        options: [
-            { 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' },
-        ],
+        options: countries,
     },
     args: {
         type: 'outlined',
@@ -92,15 +41,12 @@ export default {
         selectBorderColor: 'primary',
         closeOnMouseLeave: false,
         showListDivider: true,
-        selectedValue: '',
-        selectedLabel: '',
+        selected: { label: '', value: '' },
         label: 'State',
         placeholder: '',
         name: '',
         menuProps: 'auto',
         reverseArrowControls: false,
-        itemText: 'Text',
-        itemValue: 'Value',
         validateOnBlur: false,
         autoComplete: '',
         rules: [],
@@ -108,36 +54,35 @@ export default {
     },
 } as MetaStory;
 
-const AppSelect = (props: any) => {
-    const [selectedLabel, setSelectedLabel] = useState(props.selectedLabel);
-    const [selectedValue, setSelectedValue] = useState(props.selectedValue);
-    const handleSelect = (value: string) => {
-        setSelectedValue(value);
-        props.options.find((option: any) => {
-            if (option.value === value) {
-                setSelectedLabel(option.label);
-            }
-        });
-        console.log('Selected:', value);
-    };
+const AppSelect = (props: SelectProps) => {
+    const { selected } = props;
 
+    const [data, setData] = useState(selected);
+    const onSelect = (x: any) => {
+        setData(x);
+    };
     return (
         <NsSelect
             {...props}
-            selectedValue={selectedValue}
-            selectedLabel={selectedLabel}
-            onSelect={handleSelect}
+            selected={data}
+            onSelect={onSelect}
             label={props.label}
-        >
-            {props.options.map((option: any) => (
-                <NsSelectOption key={option.value} value={option.value} label={option.label} />
-            ))}
-        </NsSelect>
+            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 options={options} {...args} />;
+        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

@@ -0,0 +1,53 @@
+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,10 +1,9 @@
-import { ReactNode } from 'react';
 import { FoundationTheme } from '@nuskin/foundation-theme';
+import { ReactNode } from 'react';
 
 export interface SelectProps {
-    selectedValue: string;
-    selectedLabel: string;
-    onSelect: (arg: string) => void; // eslint-disable-line
+    selected: LabelValueType;
+    onSelect(arg: LabelValueType): void; // eslint-disable-line
     children?: ReactNode | null;
     disabled?: boolean;
     type?: 'outlined' | 'unfilled';
@@ -18,19 +17,33 @@ export interface SelectProps {
     errorMessage?: string;
     menuProps?: string | object;
     reverseArrowControls?: boolean;
-    itemText?: string;
-    itemValue?: string;
     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;
-    selectedValue?: string;
-    onSelect?: (arg: string) => void; // eslint-disable-line
+    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/table/NsTable.stories.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import type { Meta, StoryObj } from '@storybook/react';
 import NsTable from './NsTable';
 import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';

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

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