@nuskin/foundation-ui-components 1.0.0-develop.3 → 1.0.0-develop.5

package/src/common/radiogroup/NsRadioGroup.stories.tsx

@@ -0,0 +1,102 @@
+
+import type { StoryObj, Meta } from '@storybook/react';
+import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { NsRadioGroup } from './'
+import { FoundationTheme } from '@nuskin/foundation-theme';
+
+type ComponentType = typeof NsRadioGroup;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    component: NsRadioGroup,
+    title: 'Components/NsRadioGroup',
+    argTypes: {
+        disable: {
+            description:
+                'Indicates whether the radio button is enabled/disabled',
+
+        },
+        items: {
+            description:
+                'Value of the component to be emitted when selected.',
+        },
+        name: {
+            description:
+                'Name of the component',
+
+        },
+        label: {
+            description:
+                'Label of the radio group',
+
+        },
+        color: {
+            description:
+                'Color of the radio button',
+
+        },
+        size: {
+            description:
+                'Margin Left for Additional Slot text',
+
+        },
+        labelFontSize: {
+            description:
+                'Used to change font-size of the label'
+        },
+        additionalSlot: {
+            description:
+                'An additional slot allows for more text',
+
+        }
+    },
+} as MetaStory;
+
+export const RadioGroup: Story = {
+    args: {
+        disable: false,
+        items: [
+            {
+                id: 'individual',
+                label: `Vendeur à domicile indépendant mandataire (The VDI mandataire
+                     enters into sales or service agreements 
+                    with customers in the name and on behalf of the company.
+                     His remuneration will be based on commissions made
+                     on the sales of products to customers.)`,
+                value: 'individual',
+            },
+            {
+                id: ' retailer',
+                label: `Vendeur à domicile indépendant acheteur-revendeur
+                 (The VDI acheteur-revendeur sells the company's products in his own name and behalf. 
+                 His remuneration will be based on commissions and on the margins made on the sales of
+                  products to customers.)`,
+                value: 'retailer',
+            },
+        ],
+        name: 'test',
+        label: 'I choose to signup as',
+        color: '#272525' as FoundationTheme.PaletteColors,
+        additionalSlot: 'An additional slot allows for more text',
+        size: 10,
+        labelFontSize: 16,
+        additionalProps: {
+            testid: 'radio-group',
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.hover(canvas.getByTestId('radio-group'));
+        await expect(
+            canvas.getByText(
+                'Vendeur à domicile indépendant mandataire (The VDI mandataire enters into sales or service agreements with customers in the name and on behalf of the company. His remuneration will be based on commissions made on the sales of products to customers.)'
+            )
+        ).toBeInTheDocument();
+    },
+};
+
+
+
+

package/src/common/radiogroup/NsRadioGroup.styled.tsx

@@ -0,0 +1,50 @@
+import { Radio, FormControlLabel, FormLabel, RadioGroup } from '@mui/material';
+import { ColorUtils, FoundationTheme, styled } from '@nuskin/foundation-theme';
+
+const { paletteColor, isDarkMode, color } = ColorUtils;
+
+export const StyledHelperText = styled('div')`
+    margin-top :10px;
+    padding-left: 0.5em;
+    text-align: left;
+    justify-self: flex-start;
+)`;
+
+export const StyledSpan = styled('span')`
+    font-size: '16px';
+    font-weight: 300;
+    color: ${paletteColor('primary')};
+`;
+
+export const StyledLabel = styled(FormLabel)`
+    color: ${paletteColor('primary')},
+    marginBottom: '15px',
+    backgroundColor: 'transparent',
+`;
+
+export const StyledRadio = styled(Radio)`
+    color: ${(props) => !isDarkMode(props) ? color('primary', 'black')(props) : color('primary', 'white')(props)}
+`;
+
+export const StyledFormControlLabel = styled(FormControlLabel)<{ darkModeEnabled?: boolean }>((props) => {
+    return {
+        color: paletteColor('primary')(props),
+        marginBottom: '10px',
+        '.MuiFormControlLabel-label.Mui-disabled': {
+            color: `${!isDarkMode(props) ? color('neutral', 60)(props) : color('neutral', 20)(props)}`
+        },
+    };
+});
+
+export const StyledRadioGroup = styled(RadioGroup)<
+    { color: FoundationTheme.PaletteColors; darkModeEnabled?: boolean }
+>(
+    ({ theme, color, darkModeEnabled }) => {
+        return {
+            marginTop: '10px',
+            '.MuiRadio-root.custom-radio.Mui-checked': {
+                color: paletteColor(color)({ theme, darkModeEnabled })
+            },
+        };
+    }
+);

package/src/common/radiogroup/NsRadioGroup.tsx

@@ -0,0 +1,61 @@
+import { FormControl } from '@mui/material';
+
+import {
+    StyledHelperText,
+    StyledFormControlLabel,
+    StyledRadio,
+    StyledSpan,
+    StyledRadioGroup,
+} from './NsRadioGroup.styled';
+import { NsLabel } from '../label';
+
+import { NsRadioGroupProps } from './types';
+
+const NsRadioGroup = (props: NsRadioGroupProps) => {
+    const {
+        items,
+        additionalSlot,
+        label,
+        onChange,
+        color,
+        disable,
+        size,
+        additionalProps,
+        labelFontSize,
+        darkModeEnabled = true
+    } = props;
+
+    return (
+        <>
+            <FormControl data-testid={additionalProps?.testid}>
+                <NsLabel size={labelFontSize}>{label}</NsLabel>
+                <StyledRadioGroup
+                    aria-labelledby="radio-buttons-group-label"
+                    defaultValue={items?.[0]?.value}
+                    name="radio-buttons-group"
+                    onChange={onChange}
+                    color={color}
+                    darkModeEnabled={darkModeEnabled}
+                >
+                    {items?.map((item, index) => (
+                        <StyledFormControlLabel
+                            id={`${index} `}
+                            key={item?.id}
+                            value={item?.value}
+                            control={<StyledRadio className="custom-radio" />}
+                            label={item?.label}
+                            disabled={disable}
+                            darkModeEnabled={darkModeEnabled}
+                        />
+                    ))}
+                </StyledRadioGroup>
+            </FormControl>
+            {additionalSlot ? <StyledHelperText className={`ml-${size}`}>
+                <StyledSpan className="text-sm">{additionalSlot}</StyledSpan>
+            </StyledHelperText> : null}
+
+        </>
+    );
+};
+
+export default NsRadioGroup;

package/src/common/radiogroup/index.ts

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

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

@@ -0,0 +1,20 @@
+import { FoundationTheme } from '@nuskin/foundation-theme';
+import { AdditionalProps } from '../common.types';
+
+export type NsRadioGroupProps = {
+    disable : boolean ;
+    name : string; 
+    additionalSlot : string;
+    label : string ;
+    items: RadioItems[] ;
+    color: FoundationTheme.PaletteColors;
+    size : number;
+    labelFontSize:number,
+    onChange : () => void;
+} & AdditionalProps;
+
+export type RadioItems = {
+    label : string ; 
+    value :string | number ;
+    id: string | number;
+}

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

@@ -0,0 +1,200 @@
+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}>
+            </NsSelect>
+        );
+        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,85 @@
+import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
+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: ${({ type, theme }) =>
+        type === 'outlined' ? `1px solid ${color('primary', 'black')({ theme })}` : 'none'};
+    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}) => {
+    const dividerColor = !isDarkMode(props) ? color('neutral', '30')(props) : color('neutral', '20')(props);
+    return dividerColor;
+};
+
+const getListBgColor = (props: { theme: FoundationTheme.Theme }) => {
+    const bgColor = !isDarkMode(props) ? color('accentColorB', '10')(props) : color('accentColorB', '50')(props);
+    return bgColor;
+};
+
+export const ListItemContainer = styled.div<{ showListDivider: boolean; isSelected: boolean }>`
+     ${({ showListDivider, isSelected, theme }) => `
+        cursor: pointer;
+        padding: 5px 0;
+        border-bottom: 1px solid ${showListDivider ? getDividerColor({ theme }) : 'none'};
+        background-color: ${isSelected ? paletteColor('primary')({ theme }) : 'white'};
+        color: ${isSelected ? 'white' : 'black'};
+
+        &:hover {
+            background-color: ${getListBgColor({ theme })};
+        }
+
+        &:last-child {
+            border-bottom: none;
+        }
+    `}
+`;
+
+export const ListItem = styled.div<{ isSelected: boolean}>`
+    padding: 5px 10px;
+    border-left: ${({ isSelected, theme }) =>
+        isSelected ? `2px solid ${paletteColor('primary')({ theme })}` : 'none'};
+    background-color: ${({ isSelected, theme }) =>
+        isSelected ? paletteColor('primary', 'main')({ theme }) : 'white'};
+    color: ${({ isSelected }) => (isSelected ? 'white' : 'black')};
+    &:hover {
+        background-color: ${({ isSelected, theme }) =>
+        isSelected ? paletteColor('primary')({ theme }) : getListBgColor({ theme })};
+            font-weight: 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';