@nuskin/foundation-ui-components 1.0.0-cft-35.13 → 1.0.0-develop.10

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

@@ -0,0 +1,193 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '@/test-utils/index';
+import NsSelect from './NsSelect';
+import NsSelectOption from './NsSelectOption';
+
+function createSelectOptions(options: { value: string; label: string }[]) {
+    return options.map((option) => <NsSelectOption key={option.value} value={option.value} label={option.label} />);
+}
+
+describe('NsSelectOption', () => {
+    test('renders NsSelectOption component without errors', () => {
+        const value = 'option1';
+        const label = 'Option 1';
+        const { getByTestId, getByText } = render(<NsSelectOption value={value} label={label} />);
+
+        // 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();
+    });
+    test('clicking on NsSelectOption selects the option', () => {
+        const value = 'option1';
+        const label = 'Option 1';
+        const onSelect = jest.fn();
+        const { getByTestId } = render(<NsSelectOption value={value} label={label} onSelect={onSelect} />);
+        const optionElement = getByTestId(`option-${value}`);
+        fireEvent.click(optionElement);
+        expect(onSelect).toHaveBeenCalledWith(value);
+    });
+});
+
+describe('NsSelect', () => {
+    const onSelect = jest.fn();
+    const selectedValue = '';
+    const selectedLabel = '';
+
+    const options = [
+        { value: 'Option1', label: 'Option 1' },
+        { value: 'Option2', label: 'Option 2' },
+        { value: 'Option3', label: 'Option 3' },
+    ];
+
+    it('renders the placeholder text when no value is selected', () => {
+        render(
+            <NsSelect
+                placeholder="Select an option"
+                selectedValue={selectedValue}
+                selectedLabel={selectedLabel}
+                onSelect={onSelect}
+            >
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        expect(screen.getByText('Select an option')).toBeInTheDocument();
+    });
+
+    test('clicking outside the select container closes the dropdown', () => {
+        // const value = 'option1';
+        // const label = 'Option 1';
+        const onSelect = jest.fn();
+        const selectedLabel = 'Option 1';
+        const { getByTestId, queryByTestId } = render(
+            <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect} />
+        );
+        const selectButton = getByTestId('select-head');
+        fireEvent.mouseDown(selectButton);
+        const outsideElement = document.createElement('div');
+        fireEvent.mouseDown(outsideElement);
+        // Add assertions to check if the dropdown is closed (isOpen state is false)
+        expect(queryByTestId('option-Option1')).toBeNull();
+    });
+
+    it('renders the selected value label', () => {
+        const selectedLabel = 'Option 1';
+        render(
+            <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect}>
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        expect(screen.getByText(selectedLabel)).toBeInTheDocument();
+    });
+
+    test('clicking on select button opens the dropdown', () => {
+        const { getByTestId, getByText } = render(
+            <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect}>
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+        const selectButton = getByTestId('select-head');
+        fireEvent.mouseDown(selectButton);
+
+        // Check if the dropdown is opened (isOpen state is true)
+        const dropdownList = getByTestId('select-list');
+        expect(dropdownList).toBeInTheDocument();
+
+        // Check if the options are rendered in the dropdown
+        const option1 = getByText('Option 1');
+        const option2 = getByText('Option 2');
+        expect(option1).toBeInTheDocument();
+        expect(option2).toBeInTheDocument();
+    });
+
+    test('disabling the select component prevents interaction', () => {
+        const onSelect = jest.fn();
+        const { getByTestId, queryByTestId } = render(
+            <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect} disabled>
+                <NsSelectOption value="option1" label="Option 1" onSelect={onSelect} />
+                <NsSelectOption value="option2" label="Option 2" onSelect={onSelect} />
+            </NsSelect>
+        );
+        const selectButton = getByTestId('select-head');
+        fireEvent.mouseDown(selectButton);
+
+        // Check if the dropdown does not open (select list is not present)
+        const dropdownList = queryByTestId('select-list');
+        expect(dropdownList).toBeNull();
+
+        // Check if the onSelect callback is not called
+        expect(onSelect).not.toHaveBeenCalled();
+    });
+
+    it('select closes on mouse leave when closeOnMouseLeave is set to true', async () => {
+        render(
+            <NsSelect closeOnMouseLeave selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect}>
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        const selectHead = screen.getByTestId('select-head');
+        fireEvent.click(selectHead);
+
+        // const selectList = screen.queryByTestId ('select-list');
+        const option1 = screen.queryByTestId('option-Option1');
+        const option2 = screen.queryByTestId('option-Option2');
+        const option3 = screen.queryByTestId('option-Option3');
+        fireEvent.click(selectHead);
+
+        await waitFor(() => {
+            expect(option1).not.toBeInTheDocument();
+            expect(option2).not.toBeInTheDocument();
+            expect(option3).not.toBeInTheDocument();
+        });
+    });
+    it('select does not open when disabled', () => {
+        render(
+            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} disabled>
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        const selectHead = screen.getByTestId('select-head');
+        fireEvent.click(selectHead);
+
+        expect(screen.queryByTestId('select-list')).not.toBeInTheDocument();
+    });
+
+    it('opens the select on "ArrowDown" key press', () => {
+        render(
+            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect}>
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        const selectHead = screen.getByTestId('select-head');
+        fireEvent.keyDown(selectHead, { key: 'arrowDown' });
+
+        expect(selectHead).toBeInTheDocument();
+    });
+
+    test('renders SelectContainer with error styles when errorMessage is present', () => {
+        const errorMessage = 'Invalid value';
+        render(
+            <NsSelect
+                selectedValue={selectedValue}
+                selectedLabel={selectedLabel}
+                onSelect={onSelect}
+                errorMessage={errorMessage}
+            >
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        const selectContainer = screen.getByTestId('select-container');
+
+        expect(selectContainer).toHaveStyle('borderColor: red');
+        expect(selectContainer).toHaveStyle('color: red');
+    });
+});

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

@@ -0,0 +1,104 @@
+import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
+import { Themed } from '../common.types';
+import { getDropdownHeadBorder } from '../dropdown/NsDropdown.styled';
+const { color, paletteColor, isDarkMode } = ColorUtils;
+
+export const SelectContainer = styled.div<{ disabled: boolean }>`
+    position: relative;
+    display: inline-block;
+    opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
+`;
+
+export const SelectHead = 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')};
+    width: 207px;
+    position: relative;
+    z-index: 2;
+`;
+
+export const SelectButton = styled.div`
+    padding-right: 10px;
+`;
+
+export const SelectList = styled.div<{ borderColor: FoundationTheme.PaletteColors }>`
+    position: absolute;
+    z-index: 100;
+    border: 1px solid ${({ borderColor, theme }) => paletteColor(borderColor)({ theme })};
+    padding: 0;
+    margin: 0;
+    width: -webkit-fill-available;
+    color: ${paletteColor('primary')};
+    background-color: ${paletteColor('primary', 'contrastText')};
+`;
+
+const getDividerColor = (props: { theme: FoundationTheme.Theme }) => {
+    return !isDarkMode(props) ? color('neutral', '30')(props) : color('neutral', '20')(props);
+};
+
+const getListBgColor = (props: { theme: FoundationTheme.Theme }) => {
+    return !isDarkMode(props) ? color('accentColorB', '10')(props) : color('accentColorB', '50')(props);
+};
+type ContainerParam = { borderBottom: string; bgColor: string; color: string; hoveredBg: string };
+function createListContainerStyle({ borderBottom, bgColor, color, hoveredBg }: ContainerParam) {
+    return `
+    cursor: pointer;
+    padding: 5px 0;
+    border-bottom: 1px solid ${borderBottom};
+    background-color: ${bgColor};
+    color: ${color};
+
+    &:hover {
+        background-color: ${hoveredBg};
+    }
+
+    &:last-child {
+        border-bottom: none;
+    }
+`;
+}
+export const ListItemContainer = styled.div<{ showListDivider: boolean; isSelected: boolean }>`
+    ${({ showListDivider, isSelected, theme }) => {
+        const borderBottom = showListDivider ? getDividerColor({ theme }) : 'none';
+        const bgColor = isSelected ? paletteColor('primary')({ theme }) : 'white';
+        const color = isSelected ? 'white' : 'black';
+        const hoveredBg = getListBgColor({ theme });
+        return createListContainerStyle({ borderBottom, bgColor, color, hoveredBg });
+    }}
+`;
+const getListItemBgColor = ({ isSelected, theme }: { isSelected: boolean } & Themed) => {
+    if (isSelected) {
+        return paletteColor('primary')({ theme });
+    }
+    return getListBgColor({ theme });
+};
+
+const getListItemBorderLeftColor = ({ isSelected, theme }: { isSelected: boolean } & Themed) => {
+    if (isSelected) {
+        const color = paletteColor('primary')({ theme });
+        return `2px solid ${color}`;
+    }
+    return 'none';
+};
+
+export const ListItem = styled.div<{ isSelected: boolean }>(({ isSelected, theme }) => ({
+    padding: '5px 10px',
+    borderLeft: getListItemBorderLeftColor({ isSelected, theme }),
+    backgroundColor: isSelected ? paletteColor('primary', 'main')({ theme }) : 'white',
+    color: isSelected ? 'white' : 'black',
+    '&:hover': {
+        backgroundColor: getListItemBgColor({ isSelected, theme }),
+        fontWeight: 'bold',
+    },
+}));
+
+export const SelectLabel = styled.label`
+    display: block;
+    margin-bottom: 5px;
+    color: ${paletteColor('primary')} !important;
+`;

package/src/common/select/NsSelect.tsx

@@ -0,0 +1,117 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { SelectContainer, SelectButton, SelectList, SelectHead, SelectLabel } from './NsSelect.styled';
+import { NsIcon } from '../icon';
+import { SelectProps } from './types.d';
+
+const NsSelect: React.FC<SelectProps> = ({
+    selectedValue,
+    selectedLabel,
+    onSelect,
+    children,
+    disabled = false,
+    type = 'outlined',
+    placeholder = '',
+    selectBorderColor = 'accentColorB',
+    closeOnMouseLeave = false,
+    showListDivider = true,
+    label,
+    readOnly = false,
+    errorMessage,
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [value, setValue] = useState(selectedValue || '');
+    const selectContainerRef = useRef<HTMLDivElement>(null);
+    const selectHeadRef = useRef<HTMLDivElement>(null);
+
+    const closeSelect = () => {
+        if (closeOnMouseLeave) {
+            setIsOpen(false);
+        }
+    };
+
+    const handleSelect = (input: string) => {
+        onSelect(input);
+        setIsOpen(false);
+        setValue(input);
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const handleClickOutside = (event: MouseEvent) => {
+        if (
+            selectContainerRef.current &&
+            !selectContainerRef.current.contains(event.target as Node) &&
+            isOpen
+        ) {
+            setIsOpen(false);
+        }
+    };
+
+    const handleMouseClick = () => {
+        if (disabled) return;
+        setIsOpen(!isOpen);
+        if (!isOpen) {
+            setTimeout(() => {
+                selectHeadRef.current?.focus();
+            }, 0);
+        }
+    };
+
+    useEffect(() => {
+        document.addEventListener('click', handleClickOutside);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, [handleClickOutside, isOpen]);
+
+    return (
+        <SelectContainer
+            data-testid="select-container"
+            disabled={disabled || readOnly}
+            ref={selectContainerRef}
+            style={{
+                borderColor: errorMessage ? 'red' : undefined,
+                color: errorMessage ? 'red' : 'inherit',
+            }}
+        >
+            {label && <SelectLabel style={{ color: errorMessage ? 'red' : 'inherit' }}>{label}</SelectLabel>}
+            <SelectHead
+                data-testid="select-head"
+                disabled={disabled || readOnly}
+                type={type}
+                onMouseDown={handleMouseClick}
+                tabIndex={0}
+                ref={selectHeadRef}
+            >
+                <SelectButton>{selectedLabel || placeholder}</SelectButton>
+                {!readOnly && (
+                    <NsIcon testId="chevron-icon" name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />
+                )}
+            </SelectHead>
+            {isOpen ? (
+                <SelectList
+                    data-testid="select-list"
+                    onMouseLeave={closeSelect}
+                    borderColor={selectBorderColor}
+                    className='selectList'
+                >
+                    <div style={{ maxHeight: '200px', overflowY: 'auto' }}>
+                        {React.Children.map(children, (child) => {
+                            if (React.isValidElement(child)) {
+                                return React.cloneElement(child, {
+                                    // @ts-ignore
+                                    onSelect: handleSelect,
+                                    selectedValue: value,
+                                    showListDivider,
+                                });
+                            }
+                            return null;
+                        })}
+                    </div>
+                </SelectList>
+            ) : null}
+            {errorMessage && <div style={{ color: 'red' }}>{errorMessage}</div>}
+        </SelectContainer>
+    );
+};
+
+export default NsSelect;

package/src/common/select/NsSelectOption.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ListItem, ListItemContainer } from './NsSelect.styled';
+import { SelectOptionProps } from './types.d';
+
+export const NsSelectOption: React.FC<SelectOptionProps> = ({
+    value,
+    label,
+    onSelect,
+    selectedValue,
+    showListDivider = true,
+}) => {
+    const handleClick = () => {
+        if (onSelect && typeof onSelect === 'function') {
+            onSelect(value);
+        }
+    };
+
+    return (
+        <ListItemContainer
+            data-testid={`option-${value}`}
+            isSelected={value === selectedValue}
+            showListDivider={showListDivider}
+            onClick={handleClick}
+        >
+            <ListItem isSelected={value === selectedValue}>{label}</ListItem>
+        </ListItemContainer>
+
+    );
+};
+export default NsSelectOption;

package/src/common/select/index.ts

@@ -0,0 +1,3 @@
+export { default as NsSelect } from './NsSelect';
+export { default as NsSelectOption } from './NsSelectOption';
+export type { SelectOptionProps, SelectProps } from './types.d';

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

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import NsSelect from '../NsSelect';
+import NsSelectOption from '../NsSelectOption';
+
+export default {
+    title: 'Components/Inputs/NsSelect',
+    decorators: [
+        (story) => <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{story()}</div>,
+    ],
+    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' },
+    },
+    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' },
+        ],
+    },
+    args: {
+        type: 'outlined',
+        disabled: false,
+        selectBorderColor: 'primary',
+        closeOnMouseLeave: false,
+        showListDivider: true,
+        selectedValue: '',
+        selectedLabel: '',
+        label: 'State',
+        placeholder: '',
+        name: '',
+        menuProps: 'auto',
+        reverseArrowControls: false,
+        itemText: 'Text',
+        itemValue: 'Value',
+        validateOnBlur: false,
+        autoComplete: '',
+        rules: [],
+    },
+} as ComponentMeta<typeof NsSelect>;
+
+export const Select: ComponentStory<typeof NsSelect> = (args, context) => {
+    const [selectedLabel, setSelectedLabel] = useState(args.selectedLabel);
+    const [selectedValue, setSelectedValue] = useState(args.selectedValue);
+
+    const options = context.parameters.options;
+    const handleSelect = (value: string) => {
+        setSelectedValue(value);
+        options.find((option: any) => {
+            if (option.value === value) {
+                setSelectedLabel(option.label);
+            }
+        });
+        console.log('Selected:', value);
+    };
+
+    return (
+        <NsSelect
+            {...args}
+            selectedValue={selectedValue}
+            selectedLabel={selectedLabel}
+            onSelect={handleSelect}
+            label={args.label}
+        >
+            {options.map((option: any) => (
+                <NsSelectOption key={option.value} value={option.value} label={option.label} />
+            ))}
+        </NsSelect>
+    );
+};

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

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { FoundationTheme } from '@nuskin/foundation-theme';
+
+export interface SelectProps {
+    selectedValue: string;
+    selectedLabel: string;
+    onSelect: (arg: string) => 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;
+    itemText?: string;
+    itemValue?: string;
+    validateOnBlur?: boolean;
+    autoComplete?: string;
+    rules?: any[];
+}
+
+export interface SelectOptionProps {
+    value: string;
+    label: string;
+    selectedValue?: string;
+    onSelect?: (arg: string) => void; // eslint-disable-line
+    showListDivider?: boolean;
+}

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

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

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