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

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

@@ -1,63 +0,0 @@
-import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
-import { NsRadioGroup } from './';
-import { FoundationTheme } from '@nuskin/foundation-theme';
-
-describe('NsRadioGroup', () => {
-    const options = [
-        { id: 'Option1', label: 'Option 1', value: 'Option1' },
-        { id: 'Option2', label: 'Option 2', value: 'Option2' },
-        { id: 'Option3', label: 'Option 3', value: 'Option3' },
-    ];
-
-    const props = {
-        disable: false,
-        items: options,
-        name: 'test',
-        label: 'I choose to signup as',
-        color: '#272525' as FoundationTheme.PaletteColors,
-        helperText: 'help text for more information',
-        size: 24,
-        labelFontSize: 16,
-        additionalProps: {
-            testid: 'radio-group',
-        },
-    };
-    const onChange = jest.fn();
-
-    it('1. renders options correctly', () => {
-        render(<NsRadioGroup {...props} onChange={onChange} />);
-
-        options.forEach((option) => {
-            const radioOption = screen.getByLabelText(option.label) as HTMLInputElement;
-            expect(radioOption).toBeInTheDocument();
-            expect(radioOption.value).toBe(option.value);
-        });
-    });
-    it('2. renders options correctly without additional slot', () => {
-        render(<NsRadioGroup {...props} onChange={onChange} helperText={''} />);
-
-        options.forEach((option) => {
-            const radioOption = screen.getByLabelText(option.label) as HTMLInputElement;
-            expect(radioOption).toBeInTheDocument();
-            expect(radioOption.value).toBe(option.value);
-        });
-    });
-
-    it('3. calls OnChange when selecting option', () => {
-        render(<NsRadioGroup {...props} onChange={onChange} />);
-
-        const radioOption = screen.getByLabelText('Option 2') as HTMLInputElement;
-        fireEvent.click(radioOption);
-        expect(onChange).toHaveBeenCalledTimes(1);
-    });
-
-    it('4. does not call Onchange when the same option is clicked', () => {
-        const onChange = jest.fn();
-        render(<NsRadioGroup {...props} onChange={onChange} />);
-
-        const radioOption = screen.getByLabelText('Option 1') as HTMLInputElement;
-        fireEvent.click(radioOption);
-        expect(onChange).not.toHaveBeenCalled();
-    });
-});

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

@@ -1,84 +0,0 @@
-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/Inputs/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',
-        },
-        helperText: {
-            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,
-        helperText: '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(
-                // eslint-disable-next-line max-len
-                '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

@@ -1,51 +0,0 @@
-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) => color('primary', !isDarkMode(props) ? 'black' : 'white')(props)};
-`;
-
-export const StyledFormControlLabel = styled(FormControlLabel)<{ darkModeEnabled?: boolean }>((props) => {
-    return {
-        color: paletteColor('primary')(props),
-        marginBottom: '10px',
-        '.MuiFormControlLabel-label.Mui-disabled': {
-            color: `${color('neutral', !isDarkMode(props) ? 60 : 20)(props)}`,
-        },
-    };
-});
-
-type StyledRadioPropsType = {
-    color: FoundationTheme.PaletteColors;
-    darkModeEnabled?: boolean;
-};
-
-export const StyledRadioGroup = styled(RadioGroup)<StyledRadioPropsType>(({ theme, color, darkModeEnabled }) => {
-    return {
-        marginTop: '10px',
-        '.MuiRadio-root.custom-radio.Mui-checked': {
-            color: paletteColor(color)({ theme, darkModeEnabled }),
-        },
-    };
-});

package/src/common/radiogroup/NsRadioGroup.tsx

@@ -1,65 +0,0 @@
-import { ReactElement } from 'react';
-
-import { FormControl } from '@mui/material';
-
-import { NsLabel } from '../label';
-import {
-    StyledFormControlLabel,
-    StyledHelperText,
-    StyledRadio,
-    StyledRadioGroup,
-    StyledSpan,
-} from './NsRadioGroup.styled';
-import { NsRadioGroupProps } from './types';
-
-const NsRadioGroup = (props: NsRadioGroupProps): ReactElement => {
-    const {
-        items,
-        helperText,
-        label,
-        onChange,
-        color,
-        disable,
-        size,
-        additionalProps,
-        labelFontSize,
-        darkModeEnabled = true,
-        row,
-    } = props;
-
-    return (
-        <>
-            <FormControl data-testid={additionalProps?.testid}>
-                <NsLabel size={labelFontSize as any}>{label}</NsLabel>
-                <StyledRadioGroup
-                    row={row}
-                    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>
-            {helperText ? (
-                <StyledHelperText className={`ml-${size}`}>
-                    <StyledSpan className="text-sm">{helperText}</StyledSpan>
-                </StyledHelperText>
-            ) : null}
-        </>
-    );
-};
-
-export default NsRadioGroup;

package/src/common/radiogroup/index.ts

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

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

@@ -1,19 +0,0 @@
-import { FoundationTheme } from '@nuskin/foundation-theme';
-import { RadioGroupProps } from '@mui/material';
-import { AdditionalProps } from '../common.types';
-
-export type NsRadioGroupProps = Pick<RadioGroupProps, 'name' | 'onChange' | 'value' | 'defaultValue' | 'row'> & {
-    disable: boolean;
-    helperText: string;
-    label: string;
-    items: RadioItems[];
-    color: FoundationTheme.PaletteColors;
-    size: number;
-    labelFontSize: number;
-} & AdditionalProps;
-
-export type RadioItems = {
-    label: string;
-    value: string | number;
-    id: string | number;
-};

package/src/common/search-bar/NsSeachBar.spec.tsx

@@ -1,9 +0,0 @@
-import { render } from '@/test-utils/index';
-import NsSearchBar from './NsSearchBar';
-
-describe('Search Bar Component', () => {
-    it('1. should render Search Bar Component', () => {
-        const { container } = render(<NsSearchBar />);
-        expect(container).toBeInTheDocument();
-    });
-});

package/src/common/search-bar/NsSearchBar.tsx

@@ -1,46 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import InputBase from '@mui/material/InputBase';
-import { styled } from '@nuskin/foundation-theme';
-
-const Search = styled('div')`
-    position: relative;
-    borderRadius: 0;
-    border: 1px solid;
-    margin-left: 10px;
-    display: flex;
-    width: 100%;
-)`;
-
-const SearchIconWrapper = styled('div')`
-    height: 100%;
-    position: absolute;
-    pointer-events: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-`;
-
-const StyledInputBase = styled(InputBase)(() => ({
-    color: 'inherit',
-    '& .MuiInputBase-input': {
-        padding: '1px 1px 1px 0',
-        paddingLeft: 'calc(1em + 10px)',
-        width: '100%',
-    },
-}));
-
-const NsSearchBar = (): ReactElement => {
-    return (
-        <div>
-            <Search>
-                <SearchIconWrapper>
-                    <span>search</span>
-                </SearchIconWrapper>
-                <StyledInputBase placeholder="Search…" inputProps={{ 'aria-label': 'search' }} />
-            </Search>
-        </div>
-    );
-};
-
-export default NsSearchBar;

package/src/common/select/DefaultRenderOption.tsx

@@ -1,8 +0,0 @@
-import { ReactElement } from 'react';
-
-import NsSelectOption from './NsSelectOption';
-import { RenderSelectOptionArgType } from './types';
-
-export const DefaultRenderOption = (props: RenderSelectOptionArgType): ReactElement => {
-    return <NsSelectOption {...props} key={props?.value} onClick={props.onClick} index={props.index ?? 0} />;
-};

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

@@ -1,102 +0,0 @@
-import { ColorUtils, FoundationTheme, styled } from '@nuskin/foundation-theme';
-import { HTMLAttributes } from 'react';
-
-import { getDropdownHeadBorder } from '../dropdown/NsDropdown.styled';
-
-const { paletteColor, themeColor } = ColorUtils;
-
-interface SelectLabelProps extends HTMLAttributes<HTMLLabelElement> {
-    errorMessage?: string;
-}
-
-export const SelectContainer = styled.div<{ disabled: boolean; errorMessage?: string }>`
-    position: relative;
-    display: inline-block;
-    opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
-    color: ${({ theme, errorMessage }) =>
-        errorMessage ? paletteColor('error')({ theme }) : paletteColor('primary')({ theme })};
-`;
-export const SelectMain = styled.div`
-    position: relative;
-    display: flex;
-`;
-
-export const ErrorContainer = styled.div`
-    color: ${paletteColor('error')};
-`;
-
-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};
-    background: ${paletteColor('primary', 'contrastText')};
-    color: ${paletteColor('primary')};
-    width: 207px;
-    position: relative;
-    z-index: 2;
-`;
-
-export const SelectButton = styled.div`
-    padding-right: 10px;
-`;
-
-export const StyledArrowContainer = styled.div`
-    display: flex;
-    align-items: center;
-    padding-top: 30px;
-`;
-
-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', 'main')};
-    background-color: ${paletteColor('primary', 'contrastText')};
-    max-height: 200px;
-    overflow-y: auto;
-`;
-
-export const SelectLabel = styled.label<SelectLabelProps>`
-    display: block;
-    margin-bottom: 5px;
-    color: ${({ theme, errorMessage }) =>
-        errorMessage ? paletteColor('error')({ theme }) : paletteColor('primary')({ theme })};
-}
-`;
-type StyledSelectOptionType = { showListDivider: boolean };
-export const StyledSelectOption = styled('div')<StyledSelectOptionType>(({ showListDivider, theme }) => {
-    const dividerColor = themeColor(
-        { colorType: 'neutral', variant: '30' },
-        { colorType: 'neutral', variant: '20' }
-    )({ theme });
-    const borderBottom = showListDivider ? dividerColor : 'none';
-    const hoveredBg = themeColor(
-        { colorType: 'accentColorB', variant: '20' },
-        { colorType: 'accentColorB', variant: '40' }
-    )({ theme });
-
-    return {
-        cursor: 'pointer',
-        borderBottom: `1px solid ${borderBottom}`,
-        backgroundColor: 'white',
-        color: 'black',
-        padding: '5px 10px',
-        '&.selected-option': {
-            backgroundColor: paletteColor('accentColorA')({ theme }),
-            color: 'white',
-        },
-        '&:hover': {
-            color: 'white',
-            backgroundColor: hoveredBg,
-        },
-        '&:last-child': {
-            borderBottom: 'none',
-        },
-    };
-});

package/src/common/select/NsSelect.tsx

@@ -1,166 +0,0 @@
-import React, {
-    MouseEvent,
-    ReactElement,
-    useCallback,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
-
-import { useOnClickOutside } from '../hooks/useOnClickOutside';
-import { NsIcon } from '../icon';
-import { Show } from '../utility';
-import {
-    arrowVisibility,
-    factorMap,
-} from './constant';
-import { DefaultRenderOption } from './DefaultRenderOption';
-import {
-    ErrorContainer,
-    SelectButton,
-    SelectContainer,
-    SelectHead,
-    SelectLabel,
-    SelectList,
-    SelectMain,
-    StyledArrowContainer,
-} from './NsSelect.styled';
-import {
-    LabelValueType,
-    SelectProps,
-} from './types.d';
-
-const NsSelect: React.FC<SelectProps> = ({
-    selected,
-    onSelect,
-    disabled = false,
-    type = 'outlined',
-    placeholder = '',
-    selectBorderColor = 'accentColorB',
-    closeOnMouseLeave = false,
-    showListDivider = true,
-    label,
-    readOnly = false,
-    errorMessage,
-    hasArrows,
-    // eslint-disable-next-line no-unused-vars
-    rules,
-    reverseArrowControls,
-    RenderOption = DefaultRenderOption,
-    options,
-}): ReactElement => {
-    const [isOpen, setIsOpen] = useState(false);
-    const optionIndex = useMemo(() => {
-        if (typeof selected?.index === 'number') return selected.index;
-        return options.findIndex((option) => option.value === selected.value);
-    }, [options, selected]);
-    const [value, setValue] = useState<LabelValueType>({ ...selected, index: optionIndex });
-    const selectContainerRef = useRef<HTMLDivElement>(null);
-    const selectHeadRef = useRef<HTMLDivElement>(null);
-
-    const closeMenuOnMouseLeave = useCallback(() => {
-        if (closeOnMouseLeave) {
-            setIsOpen(false);
-        }
-    }, [closeOnMouseLeave]);
-
-    const handleSelect = (val: LabelValueType) => {
-        onSelect(val);
-        setIsOpen(false);
-        setValue(val);
-    };
-    const closeMenu = useCallback(() => {
-        setIsOpen(false);
-    }, []);
-    useOnClickOutside(selectContainerRef.current, closeMenu);
-
-    const handleMouseClick = () => {
-        if (disabled) return;
-        setIsOpen(!isOpen);
-        if (!isOpen) {
-            setTimeout(() => {
-                selectHeadRef.current?.focus();
-            }, 0);
-        }
-    };
-    const handleArrowClick = (event: MouseEvent) => {
-        const direction = event.currentTarget?.className.includes('Right') ? 'right' : 'left';
-        const adder = factorMap[reverseArrowControls ? 'reverse' : 'forward'][direction];
-        const nextIndex = (selected?.index ?? -1) + adder;
-        if (nextIndex > -1 && nextIndex < options.length) {
-            handleSelect({ ...options[nextIndex], index: nextIndex });
-        }
-    };
-    return (
-        <SelectMain>
-            {hasArrows && (
-                <StyledArrowContainer
-                    onClick={handleArrowClick}
-                    className="LeftArrow"
-                    style={{
-                        visibility: arrowVisibility(options.length, 'left', reverseArrowControls, value?.index),
-                    }}
-                >
-                    <NsIcon name="arrowLeft" color="primary" />
-                </StyledArrowContainer>
-            )}
-            <SelectContainer
-                data-testid="select-container"
-                disabled={disabled || readOnly}
-                ref={selectContainerRef}
-                errorMessage={errorMessage}
-            >
-                {label && <SelectLabel errorMessage={errorMessage}>{label}</SelectLabel>}
-                <SelectHead
-                    data-testid="select-head"
-                    disabled={disabled || readOnly}
-                    type={type}
-                    onMouseDown={handleMouseClick}
-                    tabIndex={0}
-                    ref={selectHeadRef}
-                >
-                    <SelectButton>{value?.label || placeholder}</SelectButton>
-                    {!readOnly && <NsIcon name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />}
-                </SelectHead>
-                <Show when={isOpen}>
-                    <SelectList
-                        data-testid="select-menu-list"
-                        onMouseLeave={closeMenuOnMouseLeave}
-                        borderColor={selectBorderColor}
-                        className="selectList"
-                    >
-                        {options.map((opt, optionIndex) => {
-                            return (
-                                <RenderOption
-                                    key={opt.value}
-                                    value={opt.value}
-                                    label={opt.label}
-                                    index={optionIndex}
-                                    onClick={() =>
-                                        handleSelect({ label: opt.label, value: opt.value, index: optionIndex })
-                                    }
-                                    selected={value}
-                                    showListDivider={showListDivider}
-                                />
-                            );
-                        })}
-                    </SelectList>
-                </Show>
-                {errorMessage && <ErrorContainer>{errorMessage}</ErrorContainer>}
-            </SelectContainer>
-            {hasArrows && (
-                <StyledArrowContainer
-                    onClick={handleArrowClick}
-                    className="RightArrow"
-                    style={{
-                        visibility: arrowVisibility(options.length, 'right', reverseArrowControls, selected?.index),
-                    }}
-                >
-                    <NsIcon name="arrowRight" color="primary" />
-                </StyledArrowContainer>
-            )}
-        </SelectMain>
-    );
-};
-
-export default NsSelect;

package/src/common/select/NsSelectOption.tsx

@@ -1,26 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { StyledSelectOption } from './NsSelect.styled';
-import { SelectOptionProps } from './types.d';
-
-export const NsSelectOption: React.FC<SelectOptionProps> = ({
-    value,
-    label,
-    onClick,
-    selected,
-    showListDivider = true,
-}): ReactElement => {
-    const isSelected = value === selected?.value;
-    return (
-        <StyledSelectOption
-            className={isSelected ? 'selected-option' : ''}
-            data-testid={`option-${value}`}
-            showListDivider={showListDivider}
-            onClick={onClick}
-        >
-            {label}
-        </StyledSelectOption>
-    );
-};
-export default NsSelectOption;
-

package/src/common/select/constant.ts

@@ -1,30 +0,0 @@
-export const factorMap: any = {
-    reverse: {
-        right: -1,
-        left: 1,
-    },
-    forward: {
-        right: 1,
-        left: -1,
-    },
-};
-
-export const arrowVisibility = (
-    total: number,
-    direction: 'left' | 'right',
-    reverse: boolean = false,
-    currentIndex: number | undefined = -1
-) => {
-    if (direction === 'left') {
-        if (!reverse) {
-            return currentIndex < 1 ? 'hidden' : 'visible';
-        } else {
-            return currentIndex >= total - 1 ? 'hidden' : 'visible';
-        }
-    }
-    if (!reverse) {
-        return currentIndex >= total - 1 ? 'hidden' : 'visible';
-    } else {
-        return currentIndex < 1 ? 'hidden' : 'visible';
-    }
-};

package/src/common/select/index.ts

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