@nuskin/foundation-ui-components 1.1.0 → 1.2.0

package/src/common/progress/NsProgress.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { NsProgressProps } from './types';
+import StyledLinearProgress, { PercentDiv, StyledCheckCircle } from './NsProgress.styled';
+
+const NsProgress = (props: NsProgressProps) => {
+    const { color, backgroundColor, height, value, body } = props;
+    return (
+        <>
+            <PercentDiv>
+                {value}
+                {body}
+            </PercentDiv>
+            <StyledLinearProgress
+                variant="determinate"
+                role="progressbar"
+                color={color}
+                value={value}
+                height={height}
+                backgroundColor={backgroundColor}
+            />
+            <StyledCheckCircle />
+        </>
+    );
+};
+
+export default NsProgress;

package/src/common/progress/index.ts

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

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

@@ -0,0 +1,21 @@
+import { FoundationTheme } from '@nuskin/foundation-theme';
+import { ReactNode } from 'react';
+
+declare module '@mui/material/LinearProgress' {
+    // eslint-disable-next-line no-unused-vars
+    interface LinearProgressPropsColorOverrides {
+        neutral: true;
+        accentColorA: true;
+        accentColorB: true;
+        accentColorC: true;
+        accentColorD: true;
+    }
+}
+
+export type NsProgressProps = {
+    color?: FoundationTheme.PaletteColors;
+    backgroundColor?: string;
+    height?: string;
+    value: number;
+    body?: ReactNode;
+};

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

@@ -3,14 +3,12 @@ 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,
@@ -27,38 +25,39 @@ describe('NsRadioGroup', () => {
     };
     const onChange = jest.fn();
 
-    it('renders options correctly', () => {
-        render(
-            <NsRadioGroup  {...props} onChange={onChange}
-            />,
-        );
+    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)
-        })
-
-    })
+            expect(radioOption.value).toBe(option.value);
+        });
+    });
+    it('2. renders options correctly without additional slot', () => {
+        render(<NsRadioGroup {...props} onChange={onChange} additionalSlot={''} />);
 
-    it('calls OnChange when selecting option', () => {
+        options.forEach((option) => {
+            const radioOption = screen.getByLabelText(option.label) as HTMLInputElement;
+            expect(radioOption).toBeInTheDocument();
+            expect(radioOption.value).toBe(option.value);
+        });
+    });
 
-        render(<NsRadioGroup {...props} onChange={onChange} />)
+    it('3. calls OnChange when selecting option', () => {
+        render(<NsRadioGroup {...props} onChange={onChange} />);
 
-        const radioOption = screen.getByLabelText('Option 2') as HTMLInputElement
+        const radioOption = screen.getByLabelText('Option 2') as HTMLInputElement;
         fireEvent.click(radioOption);
         expect(onChange).toHaveBeenCalledTimes(1);
+    });
 
-    })
-
-    it('does not call Onchange when the same option is clicked', () => {
+    it('4. does not call Onchange when the same option is clicked', () => {
         const onChange = jest.fn();
-        render(<NsRadioGroup {...props} onChange={onChange} />)
+        render(<NsRadioGroup {...props} onChange={onChange} />);
 
-        const radioOption = screen.getByLabelText('Option 1') as HTMLInputElement
-        fireEvent.click(radioOption)
+        const radioOption = screen.getByLabelText('Option 1') as HTMLInputElement;
+        fireEvent.click(radioOption);
         expect(onChange).not.toHaveBeenCalled();
-    })
-
-
-})
+    });
+});

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

@@ -1,8 +1,7 @@
-
 import type { StoryObj, Meta } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-import { NsRadioGroup } from './'
+import { NsRadioGroup } from './';
 import { FoundationTheme } from '@nuskin/foundation-theme';
 
 type ComponentType = typeof NsRadioGroup;
@@ -14,43 +13,29 @@ export default {
     title: 'Components/Inputs/NsRadioGroup',
     argTypes: {
         disable: {
-            description:
-                'Indicates whether the radio button is enabled/disabled',
-
+            description: 'Indicates whether the radio button is enabled/disabled',
         },
         items: {
-            description:
-                'Value of the component to be emitted when selected.',
+            description: 'Value of the component to be emitted when selected.',
         },
         name: {
-            description:
-                'Name of the component',
-
+            description: 'Name of the component',
         },
         label: {
-            description:
-                'Label of the radio group',
-
+            description: 'Label of the radio group',
         },
         color: {
-            description:
-                'Color of the radio button',
-
+            description: 'Color of the radio button',
         },
         size: {
-            description:
-                'Margin Left for Additional Slot text',
-
+            description: 'Margin Left for Additional Slot text',
         },
         labelFontSize: {
-            description:
-                'Used to change font-size of the label'
+            description: 'Used to change font-size of the label',
         },
         additionalSlot: {
-            description:
-                'An additional slot allows for more text',
-
-        }
+            description: 'An additional slot allows for more text',
+        },
     },
 } as MetaStory;
 
@@ -61,7 +46,7 @@ export const RadioGroup: Story = {
             {
                 id: 'individual',
                 label: `Vendeur à domicile indépendant mandataire (The VDI mandataire
-                     enters into sales or service agreements 
+                     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.)`,
@@ -70,7 +55,7 @@ export const RadioGroup: Story = {
             {
                 id: ' retailer',
                 label: `Vendeur à domicile indépendant acheteur-revendeur
-                 (The VDI acheteur-revendeur sells the company's products in his own name and behalf. 
+                 (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',
@@ -91,12 +76,9 @@ export const RadioGroup: Story = {
         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,5 +1,6 @@
 import { Radio, FormControlLabel, FormLabel, RadioGroup } from '@mui/material';
 import { ColorUtils, FoundationTheme, styled } from '@nuskin/foundation-theme';
+import { skipDarkModeEnabled } from '../util';
 
 const { paletteColor, isDarkMode, color } = ColorUtils;
 
@@ -23,7 +24,7 @@ export const StyledLabel = styled(FormLabel)`
 `;
 
 export const StyledRadio = styled(Radio)`
-    color: ${(props) => !isDarkMode(props) ? color('primary', 'black')(props) : color('primary', 'white')(props)}
+    color: ${(props) => color('primary', !isDarkMode(props) ? 'black' : 'white')(props)};
 `;
 
 export const StyledFormControlLabel = styled(FormControlLabel)<{ darkModeEnabled?: boolean }>((props) => {
@@ -31,20 +32,21 @@ export const StyledFormControlLabel = styled(FormControlLabel)<{ darkModeEnabled
         color: paletteColor('primary')(props),
         marginBottom: '10px',
         '.MuiFormControlLabel-label.Mui-disabled': {
-            color: `${!isDarkMode(props) ? color('neutral', 60)(props) : color('neutral', 20)(props)}`
+            color: `${color('neutral', !isDarkMode(props) ? 60 : 20)(props)}`,
+        },
+    };
+});
+const options = {
+    shouldForwardProp: skipDarkModeEnabled,
+};
+export const StyledRadioGroup = styled(
+    RadioGroup,
+    options
+)<{ color: FoundationTheme.PaletteColors; darkModeEnabled?: boolean }>(({ theme, color, darkModeEnabled }) => {
+    return {
+        marginTop: '10px',
+        '.MuiRadio-root.custom-radio.Mui-checked': {
+            color: paletteColor(color)({ theme, darkModeEnabled }),
         },
     };
 });
-
-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

@@ -22,7 +22,7 @@ const NsRadioGroup = (props: NsRadioGroupProps) => {
         size,
         additionalProps,
         labelFontSize,
-        darkModeEnabled = true
+        darkModeEnabled = true,
     } = props;
 
     return (
@@ -50,10 +50,11 @@ const NsRadioGroup = (props: NsRadioGroupProps) => {
                     ))}
                 </StyledRadioGroup>
             </FormControl>
-            {additionalSlot ? <StyledHelperText className={`ml-${size}`}>
-                <StyledSpan className="text-sm">{additionalSlot}</StyledSpan>
-            </StyledHelperText> : null}
-
+            {additionalSlot ? (
+                <StyledHelperText className={`ml-${size}`}>
+                    <StyledSpan className="text-sm">{additionalSlot}</StyledSpan>
+                </StyledHelperText>
+            ) : null}
         </>
     );
 };

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

@@ -2,8 +2,6 @@ import React from 'react';
 import InputBase from '@mui/material/InputBase';
 import { styled } from '@nuskin/foundation-theme';
 
-interface NsSearchBarProps {}
-
 const Search = styled('div')`
     position: relative;
     borderRadius: 0;
@@ -31,7 +29,7 @@ const StyledInputBase = styled(InputBase)(() => ({
     },
 }));
 
-const NsSearchBar: React.FC<NsSearchBarProps> = () => {
+const NsSearchBar: React.FC = () => {
     return (
         <div>
             <Search>

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

@@ -8,12 +8,10 @@ function createSelectOptions(options: { value: string; label: string }[]) {
 }
 
 describe('NsSelectOption', () => {
-    test('renders NsSelectOption component without errors', () => {
+    it('1. renders NsSelectOption component without errors', () => {
         const value = 'option1';
         const label = 'Option 1';
-        const { getByTestId, getByText } = render(
-            <NsSelectOption value={value} label={label} />
-        );
+        const { getByTestId, getByText } = render(<NsSelectOption value={value} label={label} />);
 
         // Check if the option container element exists
         const optionContainer = getByTestId(`option-${value}`);
@@ -23,18 +21,15 @@ describe('NsSelectOption', () => {
         const optionLabel = getByText(label);
         expect(optionLabel).toBeInTheDocument();
     });
-    test('clicking on NsSelectOption selects the option', () => {
+    it('2. 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 { getByTestId } = render(<NsSelectOption value={value} label={label} onSelect={onSelect} />);
         const optionElement = getByTestId(`option-${value}`);
         fireEvent.click(optionElement);
         expect(onSelect).toHaveBeenCalledWith(value);
     });
-    
 });
 
 describe('NsSelect', () => {
@@ -48,7 +43,7 @@ describe('NsSelect', () => {
         { value: 'Option3', label: 'Option 3' },
     ];
 
-    it('renders the placeholder text when no value is selected', () => {
+    it('1. renders the placeholder text when no value is selected', () => {
         render(
             <NsSelect
                 placeholder="Select an option"
@@ -63,14 +58,11 @@ describe('NsSelect', () => {
         expect(screen.getByText('Select an option')).toBeInTheDocument();
     });
 
-    test('clicking outside the select container closes the dropdown', () => {
-        // const value = 'option1';
-        // const label = 'Option 1';
+    it('2. clicking outside the select container closes the dropdown', () => {
         const onSelect = jest.fn();
         const selectedLabel = 'Option 1';
         const { getByTestId, queryByTestId } = render(
-            <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect}>
-            </NsSelect>
+            <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect} />
         );
         const selectButton = getByTestId('select-head');
         fireEvent.mouseDown(selectButton);
@@ -80,7 +72,7 @@ describe('NsSelect', () => {
         expect(queryByTestId('option-Option1')).toBeNull();
     });
 
-    it('renders the selected value label', () => {
+    it('3. renders the selected value label', () => {
         const selectedLabel = 'Option 1';
         render(
             <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect}>
@@ -91,7 +83,7 @@ describe('NsSelect', () => {
         expect(screen.getByText(selectedLabel)).toBeInTheDocument();
     });
 
-    test('clicking on select button opens the dropdown', () => {
+    it('4. clicking on select button opens the dropdown', () => {
         const { getByTestId, getByText } = render(
             <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect}>
                 {createSelectOptions(options)}
@@ -111,7 +103,7 @@ describe('NsSelect', () => {
         expect(option2).toBeInTheDocument();
     });
 
-    test('disabling the select component prevents interaction', () => {
+    it('5. disabling the select component prevents interaction', () => {
         const onSelect = jest.fn();
         const { getByTestId, queryByTestId } = render(
             <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect} disabled>
@@ -130,14 +122,9 @@ describe('NsSelect', () => {
         expect(onSelect).not.toHaveBeenCalled();
     });
 
-    it('select closes on mouse leave when closeOnMouseLeave is set to true', async () => {
+    it('6. select closes on mouse leave when closeOnMouseLeave is set to true', async () => {
         render(
-            <NsSelect
-                closeOnMouseLeave
-                selectedValue={selectedValue}
-                selectedLabel={selectedLabel}
-                onSelect={onSelect}
-            >
+            <NsSelect closeOnMouseLeave selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect}>
                 {createSelectOptions(options)}
             </NsSelect>
         );
@@ -157,7 +144,7 @@ describe('NsSelect', () => {
             expect(option3).not.toBeInTheDocument();
         });
     });
-    it('select does not open when disabled', () => {
+    it('7. select does not open when disabled', () => {
         render(
             <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} disabled>
                 {createSelectOptions(options)}
@@ -170,7 +157,7 @@ describe('NsSelect', () => {
         expect(screen.queryByTestId('select-list')).not.toBeInTheDocument();
     });
 
-    it('opens the select on "ArrowDown" key press', () => {
+    it('8. opens the select on "ArrowDown" key press', () => {
         render(
             <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect}>
                 {createSelectOptions(options)}
@@ -183,18 +170,105 @@ describe('NsSelect', () => {
         expect(selectHead).toBeInTheDocument();
     });
 
-    test('renders SelectContainer with error styles when errorMessage is present', () => {
-        const errorMessage = 'Invalid value';
+    it('9. closes the select when closeSelect is called', () => {
+        const { getByTestId } = render(
+            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} closeOnMouseLeave>
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        const selectContainer = getByTestId('select-container');
+        fireEvent.mouseLeave(selectContainer);
+
+        expect(screen.queryByTestId('select-list')).not.toBeInTheDocument();
+    });
+
+    it('10. does not open the select when disabled', () => {
         render(
-            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} errorMessage={errorMessage}>
+            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} disabled>
                 {createSelectOptions(options)}
             </NsSelect>
         );
 
-        const selectContainer = screen.getByTestId('select-container');
+        const selectHead = screen.getByTestId('select-head');
+        fireEvent.mouseDown(selectHead);
 
-        expect(selectContainer).toHaveStyle('borderColor: red');
-        expect(selectContainer).toHaveStyle('color: red');
+        expect(screen.queryByTestId('select-list')).not.toBeInTheDocument();
     });
 
+    it('11. selects the next option on arrow right click', () => {
+        // Render the NsSelect component with options and onSelect function
+        const onSelect = jest.fn();
+        const { getByTestId } = render(
+            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} hasArrows>
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        // Simulate the arrow right click on the NsSelect component
+        const selectHead = getByTestId('select-head');
+        fireEvent.mouseDown(selectHead);
+
+        const rightArrow = document.getElementsByClassName('RightArrow')[0];
+        fireEvent.click(rightArrow);
+
+        // Verify that the next option is selected and the onSelect function is called
+        expect(onSelect).toHaveBeenCalledWith('Option1');
+    });
+
+    it('12. selects the previous option on arrow left click', () => {
+        const { getByTestId } = render(
+            <NsSelect
+                selectedValue={selectedValue}
+                selectedLabel={selectedLabel}
+                onSelect={onSelect}
+                hasArrows
+                reverseArrowControls
+            >
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        const selectHead = getByTestId('select-head');
+        fireEvent.mouseDown(selectHead);
+
+        const leftArrow = document.getElementsByClassName('LeftArrow')[0];
+        fireEvent.click(leftArrow);
+
+        expect(onSelect).toHaveBeenCalledWith('Option1');
+    });
+
+    it('13. renders an error message with red styles', () => {
+        const errorMessage = 'Invalid value';
+        const { getByText } = render(
+            <NsSelect
+                selectedValue={selectedValue}
+                selectedLabel={selectedLabel}
+                onSelect={onSelect}
+                errorMessage={errorMessage}
+            >
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        // Check if the error message is rendered correctly with red styles
+        const errorText = getByText(errorMessage);
+        expect(errorText).toBeInTheDocument();
+    });
+    it('14. selecting an option calls the onSelect callback', () => {
+        const onSelect = jest.fn();
+        const { getByTestId } = render(
+            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect}>
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        const selectHead = getByTestId('select-head');
+        fireEvent.mouseDown(selectHead);
+
+        const option1 = getByTestId('option-Option1');
+        fireEvent.click(option1);
+
+        expect(onSelect).toHaveBeenCalledWith('Option1');
+    });
 });