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

package/src/common/email-simple/NsEmailSimple.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { NsEmailSimpleProps } from './types';
+import { NsInputField } from '../input';
+import { fieldStateType } from '../input/types';
+import { emailPattern } from '../validations/regex';
+
+const NsEmailSimple = (props: NsEmailSimpleProps) => {
+    const {
+        disabled,
+        label,
+        required,
+        maxLength,
+        invalidEmailMessage,
+        dupedEmailMessage,
+        requiredErrorMessage,
+        checkEmail,
+        additionalProps,
+    } = props;
+    const [fieldState, setFieldState] = useState<fieldStateType>();
+    const [errorMsg, setErrorMessage] = useState('');
+
+    const handleBlur = async (e: React.FocusEvent<HTMLInputElement>) => {
+        const emailInput = e.target.value.toLowerCase().trim();
+        let fieldStateValue: fieldStateType;
+        let errorMessageValue = '';
+        if (required && !emailInput) {
+            fieldStateValue = 'error';
+            errorMessageValue = requiredErrorMessage;
+        } else if (!emailPattern.test(emailInput)) {
+            fieldStateValue = 'error';
+            errorMessageValue = invalidEmailMessage;
+        } else if (typeof checkEmail === 'function') {
+            try {
+                const [isValid, isAvailable] = await checkEmail();
+                if (!isValid) {
+                    fieldStateValue = 'error';
+                    errorMessageValue = invalidEmailMessage;
+                } else if (!isAvailable) {
+                    fieldStateValue = 'error';
+                    errorMessageValue = dupedEmailMessage;
+                } else {
+                    fieldStateValue = undefined;
+                    errorMessageValue = '';
+                }
+            } catch (error) {
+                console.log('API error', error);
+            }
+        } else {
+            //TODO What happens when user does not pass valid checkEmail function
+        }
+        setFieldState(fieldStateValue);
+        setErrorMessage(errorMessageValue);
+    };
+    return (
+        <NsInputField
+            required={required}
+            disabled={disabled}
+            label={label}
+            onBlur={handleBlur}
+            inputProps={{ maxLength }}
+            additionalProps={{ testid: additionalProps?.testid ?? 'email-field-test' }}
+            helperText={errorMsg}
+            fieldState={fieldState}
+            InputProps={{
+                endAdornment: null,
+            }}
+        />
+    );
+};
+
+export default NsEmailSimple;

package/src/common/email-simple/index.ts

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

package/src/common/email-simple/types.d.ts

@@ -0,0 +1,14 @@
+import { TextFieldProps } from '@mui/material';
+import { AdditionalProps } from '../common.types';
+
+export type NsEmailSimpleProps = Pick<TextFieldProps> &
+    AdditionalProps & {
+        disabled?: boolean;
+        label?: string;
+        required?: boolean;
+        maxLength?: number;
+        invalidEmailText?: string;
+        dupedEmailText?: string;
+        requiredErrorMessage?: string;
+        checkEmail?: Function;
+    };

package/src/common/flag/NsFlag.spec.tsx

@@ -1,35 +1,15 @@
-/**
- * @author [vijayaprathap Kumar] (vpkumar@nuskin.com)
- * Flag.spec.tsx
- * @description In this test case,
- * we use the render function to render the MyComponent with the desired background color and text.
- */
-
 import React from 'react';
-import nuskinTheme from '@nuskin/foundation-theme/src/themes/genome-foundation';
 
 import { render } from '@/test-utils/index';
-import NsFlag from './NsFlag';
-
-const { palette } = nuskinTheme;
+import { NsFlag } from '../';
 
-// Test suite for FlagComponent
 describe('FlagComponent', () => {
-    // Test case for rendering a div element with background color and text.
     it('renders a div element with background color and text', () => {
-        // Render FlagComponent with blue background color and "Nuskin" text
+        const text = 'NU SKIN';
         const { getByText } = render(<NsFlag message="NU SKIN" color="accentColorA" />);
+        const divElement = getByText(text);
 
-        // Get the rendered div element using its text
-        const divElement = getByText('NU SKIN');
-
-        // Assert that the div element is in the document
         expect(divElement).toBeInTheDocument();
-
-        // Assert that the div element has the expected background color
-        expect(divElement).toHaveStyle(`color: ${palette?.primary?.contrastText}`);
-
-        // Assert that the div element has the expected text content
-        expect(divElement).toHaveTextContent('NU SKIN');
+        expect(divElement).toHaveTextContent(text);
     });
 });

package/src/common/flag/NsFlag.styled.tsx

@@ -9,6 +9,8 @@ import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
 
 import { NsFlagSize } from './types.d';
 
+const { paletteColor } = ColorUtils;
+
 type NsFlagThemeParams = {
     $size: NsFlagSize;
     $bgColor?: FoundationTheme.PaletteColors;
@@ -33,11 +35,9 @@ const makeFlagSize = ({ $size }: { $size: NsFlagSize }) => {
     return sizeValue / FLAG_SCALE_VALUE;
 };
 
-const { getPaletteColor } = ColorUtils;
-
 const makeFlagBorder = ({ $size, $bgColor = 'accentColorA', theme }: NsFlagThemeParams) => {
     if (theme) {
-        return `${makeFlagSize({ $size })}px solid ${getPaletteColor(theme, $bgColor)}`;
+        return `${makeFlagSize({ $size })}px solid ${paletteColor($bgColor)({ theme })}`;
     }
     return '';
 };
@@ -45,8 +45,8 @@ const makeFlagBorder = ({ $size, $bgColor = 'accentColorA', theme }: NsFlagTheme
 export const StyledFlag = styled('span')<NsFlagThemeParams>`
     min-width: 29px;
     height: ${getFlagHeight}px;
-    color: ${({ $bgColor = 'accentColorA', theme }) => getPaletteColor(theme, $bgColor, 'contrastText')};
-    background: ${({ $bgColor = 'accentColorA', theme }) => getPaletteColor(theme, $bgColor)};
+    color: ${({ $bgColor = 'accentColorA', theme }) => paletteColor($bgColor, 'contrastText')({ theme })};
+    background: ${({ $bgColor = 'accentColorA', theme }) => paletteColor($bgColor)({ theme })};
     position: relative;
     padding: 0 15px;
     display: inline-grid;

package/src/common/flag/NsFlag.tsx

@@ -5,9 +5,7 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-
 import { StyledFlag } from './NsFlag.styled';
-
 import { NsFlagProps } from './types.d';
 
 const NsFlag = (props: PropsWithChildren<NsFlagProps>) => {

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

@@ -4,6 +4,7 @@ import { NsIconVariants } from '.';
 export type NsIconSizeType = 'small' | 'medium' | 'large' | 'xLarge';
 
 export type NsIconNameType = keyof typeof NsIconVariants;
+
 export type NsIconProps = {
     name: NsIconNameType;
     size?: NsIconSizeType;

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

@@ -15,6 +15,7 @@ export type NsNextImageProps = Pick<
     | 'blurDataURL'
     | 'fill'
     | 'unoptimized'
+    | 'loader'
 > & { id?: string; className?: string };
 
 export type NsImageProps = {

package/src/common/index.ts

@@ -1,3 +1,4 @@
+export * from './accordion';
 export * from './alert';
 export * from './auth-dropdown';
 export * from './autocomplete';
@@ -23,3 +24,5 @@ export * from './nav-product-card';
 export * from './text-strip';
 export * from './table';
 export * from './typography';
+export * from './email-simple';
+export * from './radiogroup';

package/src/common/input/InputFieldWrapper.tsx

@@ -1,6 +1,6 @@
 import { Stack } from '@mui/material';
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
-const { getPaletteColor, getAppColor } = ColorUtils;
+const { color, paletteColor } = ColorUtils;
 
 const InputFieldWrapper = styled(Stack)(({ theme }: any) => {
     return {
@@ -10,12 +10,12 @@ const InputFieldWrapper = styled(Stack)(({ theme }: any) => {
         '.MuiFormHelperText-root': {
             fontSize: '11px',
             marginTop: 0,
-            color: getPaletteColor(theme, 'primary', 'main'),
+            color: paletteColor('primary', 'main')({ theme }),
             '&.success': {
-                color: getAppColor(theme, 'success', '40') as string,
+                color: color('success', '40')({ theme }),
             },
             '&.error': {
-                color: getPaletteColor(theme, 'error', 'main'),
+                color: paletteColor('error', 'main')({ theme }),
             },
         },
     };

package/src/common/input/NsInputField.stories.tsx

@@ -8,31 +8,33 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsInputField',
+    title: 'Components/Inputs/NsInputField',
     component: NsInputField,
     decorators: [withCenterDecorator],
-
-    args: {},
+    args: {
+        helperText: '',
+        iconSide: <NsIcon name="trash" />,
+        focused: false,
+        placeholder: 'enter text',
+        disabled: false,
+        fullWidth: false,
+    },
     argTypes: {
         fieldState: { control: 'select', options: ['default', 'success', 'error'] },
         value: { control: 'text' },
+        helperText: { control: 'text', description: 'text shown below input' },
         required: { control: 'boolean' },
         disabled: { control: 'boolean' },
         fullWidth: { control: 'boolean' },
-        showOptional: { control: 'boolean' },
+        showOptional: { control: 'boolean', description: 'if true, an optional text is shown along with label' },
         focused: { control: 'boolean' },
     },
 } as MetaStory;
 
 export const Default: Story = {
     args: {
-        focused: false,
-        placeholder: 'enter text',
-        disabled: false,
-        fullWidth: false,
         value: 'Input value',
         fieldState: 'success',
-        iconSide: <NsIcon name="trash" />,
     },
 };
 

package/src/common/input/NsInputField.tsx

@@ -3,7 +3,7 @@ import InputWrapper from './InputWrapper';
 import { NsInputFieldProps } from './types.d';
 import { NsLabel } from '../label';
 import InputFieldWrapper from './InputFieldWrapper';
-import { getAdornmentProps } from './getAdornmentProps';
+import { AdornmentPropsType, getAdornmentProps } from './getAdornmentProps';
 
 /**
  * we are using fieldState in place of error prop
@@ -14,6 +14,7 @@ const NsInputField = (props: NsInputFieldProps) => {
     const {
         autoComplete,
         autoFocus,
+        additionalProps,
         defaultValue,
         disabled,
         fullWidth,
@@ -54,16 +55,22 @@ const NsInputField = (props: NsInputFieldProps) => {
     } = props;
     /** EndIcon is created so that we can automatically add success and error icon based of fieldState,
      *  it will override iconEnd. Also to note, InputProps is given to override both iconStart, iconEnd and EndIcon */
-    let EndIcon: any = getAdornmentProps({ disabled, fieldState, iconEnd, iconStart });
+    let EndIcon: AdornmentPropsType = getAdornmentProps({ disabled, fieldState, iconEnd, iconStart });
 
     return (
         <InputFieldWrapper>
             {label ? (
-                <NsLabel {...InputLabelProps} showOptional={showOptional} required={required} disabled={disabled}>
+                <NsLabel
+                    {...InputLabelProps}
+                    showOptional={showOptional}
+                    required={required}
+                    disabled={disabled}
+                    error={fieldState === 'error' && !disabled}
+                >
                     {label}
                 </NsLabel>
             ) : null}
-            <InputWrapper fieldState={fieldState} data-testid="ns-input-field">
+            <InputWrapper fieldState={fieldState} data-testid={additionalProps?.testid ?? 'ns-input-field'}>
                 <TextField
                     {...rest}
                     InputProps={{
@@ -97,7 +104,7 @@ const NsInputField = (props: NsInputFieldProps) => {
                 />
                 {iconSide}
             </InputWrapper>
-            {helperText ? (
+            {helperText && !disabled ? (
                 <FormHelperText {...FormHelperTextProps} className={fieldState}>
                     {helperText}
                 </FormHelperText>

package/src/common/input/getAdornmentProps.tsx

@@ -22,6 +22,10 @@ type props = {
  * @param param0
  * @returns
  */
+export type AdornmentPropsType = {
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+}
 export const getAdornmentProps = ({ disabled, fieldState, iconStart, iconEnd }: props) => {
     const icons = {
         startAdornment: iconStart ? <InputAdornment position="start">{iconStart}</InputAdornment> : null,

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

@@ -1,6 +1,8 @@
 import { ReactNode } from 'react';
 import { TextFieldProps } from '@mui/material';
+import { AdditionalProps } from '../common.types';
 
+// TODO: check if fieldStateType could be converted to enum, since we also have to account for undefined
 export type fieldStateType = undefined | 'error' | 'success';
 export type NsInputFieldProps = Omit<
     TextFieldProps,
@@ -39,4 +41,4 @@ export type NsInputFieldProps = Omit<
     defaultValue?: string;
     rows?: number;
     id?: string;
-};
+} & AdditionalProps;

package/src/common/label/NsLabel.stories.tsx

@@ -16,6 +16,7 @@ export const Default: Story = {
     args: {
         children: 'Label',
         required: false,
+        size: 16,
     },
 };
 
@@ -23,6 +24,7 @@ export const Optional: Story = {
     args: {
         children: 'Label',
         showOptional: true,
+        size: 16,
     },
 };
 
@@ -31,5 +33,6 @@ export const Required: Story = {
         children: 'Label',
         showOptional: true,
         required: true,
+        size: 16,
     },
 };

package/src/common/label/NsLabel.tsx

@@ -1,33 +1,34 @@
+import { CSSProperties } from 'react';
+
 import { FormLabel } from '@mui/material';
+
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
+
 import { NsLabelProps } from './types.d';
-import { styled, nuskinTheme } from '@nuskin/foundation-theme';
 
-const { colors } = nuskinTheme;
+const { paletteColor, isDarkMode, color } = ColorUtils;
 
-const StyledLabel = styled(FormLabel)<{ fontSize?: number }>(({ theme, fontSize }) => {
-    const isLight = theme.palette?.primary?.main === '#252525';
+const StyledLabel = styled(FormLabel)<{ fontSize?: number; style?: CSSProperties }>(({ theme, fontSize, style }) => {
+    const isLight = !isDarkMode({ theme });
     return {
         fontSize: fontSize ? `${fontSize}px` : '14px',
-        color: theme.palette?.primary?.main ?? '#252525',
+        textAlign: style?.textAlign ?? 'left',
+        color: paletteColor('primary', 'main')({ theme }),
         '.optional-label': {
-            color: isLight ? colors?.neutral?.[60] : colors?.neutral?.[50],
+            color: isLight ? color('neutral', '60')({ theme }) : color('neutral', '50')({ theme }),
         },
         '.MuiInputLabel-asterisk': {
-            color: isLight ? colors?.red?.[40] : colors?.red?.[20],
+            color: isLight ? color('error', '40')({ theme }) : color('error', '20')({ theme }),
         },
-    };
+        ...(style || {}),
+    } as any; // TODO: may be this "any" has to be fixed from foundation-theme
 });
-/**
- * NOTE: we are passing error = false, in props, because
- *  we do not want to change the color of label to red, in case of error
- * @param props
- * @returns
- */
+
 const NsLabel = (props: NsLabelProps) => {
-    const { required, showOptional } = props;
+    const { required, showOptional, children, size } = props;
     return (
-        <StyledLabel {...props} required={required} error={false}>
-            {props.children}
+        <StyledLabel {...props} fontSize={size} required={required}>
+            {children}
             {!required && showOptional ? <span className="optional-label">{' (Optional)'}</span> : null}
         </StyledLabel>
     );

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

@@ -2,8 +2,9 @@ import { InputLabelProps } from '@mui/material';
 import { PropsWithChildren } from 'react';
 
 export type NsLabelProps = PropsWithChildren &
-    Omit<InputLabelProps, 'sx' | 'classes' | 'color' | 'margin' | 'variant' | 'classes' | 'error'> & {
+    Omit<InputLabelProps, 'sx' | 'classes' | 'color' | 'margin' | 'variant' | 'classes'> & {
         /** purpose of showOptional props is to show additional text 'optional' in the label,
          *  if required = false and this flag is true */
         showOptional?: boolean;
+        size?: number;
     };

package/src/common/nav-tab/NsNavTab.spec.tsx

@@ -1,11 +1,8 @@
 import { fireEvent } from '@testing-library/react';
-import nuskinTheme from '@nuskin/foundation-theme/src/themes/genome-foundation';
 import { NsNavTabComponent } from './NsNavTab';
 import { NavTabs } from './types.d';
 import { render } from '@/test-utils/index';
 
-const { palette } = nuskinTheme;
-
 const tabs: NavTabs[] = [
     {
         tabName: 'Skin & Beauty',
@@ -54,7 +51,6 @@ describe('Nav Bar Component', () => {
         expect(li.length).toBe(4);
         li.forEach((list, i) => expect(list).toHaveTextContent(tabs[i].tabName));
         expect(container).toBeInTheDocument();
-        expect(getByTestId('Skin & Beauty-list').firstChild).toHaveStyle(`color: ${palette.primary.main}`);
         fireEvent.mouseOver(getByTestId('Skin & Beauty'));
         expect(getByTestId('nav-drawer')).toBeInTheDocument();
         fireEvent.mouseLeave(getByTestId('Skin & Beauty'));
@@ -65,6 +61,5 @@ describe('Nav Bar Component', () => {
         const { getByTestId } = render(<NsNavTabComponent showDrawer={false} className="mb-2" tabs={tabs} />);
         fireEvent.mouseOver(getByTestId('Skin & Beauty'));
         expect(getByTestId('underline')).toBeInTheDocument();
-        expect(getByTestId('underline')).toHaveStyle(`background-color: ${palette.success.main}`);
     });
 });

package/src/common/nav-tab/NsNavTab.styled.tsx

@@ -1,6 +1,9 @@
-import { FoundationTheme, styled } from '@nuskin/foundation-theme';
+import { FoundationTheme, styled, ColorUtils } from '@nuskin/foundation-theme';
 import { motion } from 'framer-motion';
 
+const { paletteColor } = ColorUtils;
+
+
 export const NavTabContainer = styled.div`
     .shadow {
         box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -23,7 +26,7 @@ export const NavTabUnderLine = styled(motion.div)<{ color?: FoundationTheme.Pale
     position: absolute;
     bottom: -2px;
     height: 2px;
-    background-color: ${({ theme: { palette }, color = 'primary' }) => palette?.[color]?.main};
+    background-color: ${({ theme, color = 'primary' }) => paletteColor(color)({ theme })};
 `;
 
 export const NavDrawer = styled.div`
@@ -37,7 +40,7 @@ export const NavDrawer = styled.div`
     width: 100%;
     max-height: 590px;
 
-    background-color: ${({ theme }) => theme?.palette?.primary.contrastText};
+    background-color: ${paletteColor('primary', 'contrastText')};
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
     transition: all 0.15s ease-in-out;
     overflow: hidden;
@@ -54,7 +57,7 @@ export const NavDrawerContainer = styled(motion.div)`
         z-index: 1;
     }
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-    background-color: ${({ theme }) => theme?.palette?.primary.contrastText};
+    background-color: ${paletteColor('primary', 'contrastText')};
     width: 100%;
     text-align: left;
     max-height: 590px;

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

@@ -0,0 +1,64 @@
+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,
+        additionalSlot: 'An additional slot allows for more text',
+        size: 24,
+        labelFontSize: 16,
+        additionalProps: {
+            testid: 'radio-group',
+        },
+    };
+    const onChange = jest.fn();
+
+    it('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('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('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();
+    })
+
+
+})