@nuskin/foundation-ui-components 1.0.0-develop.2 → 1.0.0-develop.4

package/src/common/column-control/types.d.ts

@@ -18,22 +18,7 @@ export type NsColumnControlProps = PropsWithChildren<{
      *  ns-col-md-(column-ratio) (for tablet screens >= 600px),
      *  and ns-col-sm-(column-ratio) (for mobile screens i.e < 600px)
      * sample values
-     * 'ns-col-lg-2-1',
-    'ns-col-lg-1-2',
-    'ns-col-lg-1-1',
-    'ns-col-lg-1-1-1',
-    'ns-col-lg-2-1-1',
-    'ns-col-lg-1-1-1-1',
-    'ns-col-md-1',
-    'ns-col-md-1-1',
-    'ns-col-md-1-2',
-    'ns-col-md-2-1',
-    'ns-col-md-1-1-1',
-    'ns-col-md-2-1-1',
-    'ns-col-sm-1',
-    'ns-col-sm-1-1',
-    'ns-col-sm-1-2',
-    'ns-col-sm-2-1',
+     * 'ns-col-lg-2-1', 'ns-col-lg-1-2', 'ns-col-lg-1-1',
      */
     columnClass: string;
     gap?: number;
@@ -45,3 +30,17 @@ export type sizeObjectType = {
     tabletFractions?: number[];
     mobileFractions?: number[];
 };
+
+export type NsFlexColumnsProps = PropsWithChildren<{
+    /**
+     * follows the convention of ns-col-lg-{column-ratio}
+     * sample value for column-ratio = 2-1 ==>ns-col-lg-2-1
+     */
+    columnClass: string;
+    gap: number;
+    /* when this boolean is true, column control takes full width of page instead of being restricted to 1200px */
+    isFullWidth?: boolean;
+}> &
+    AdditionalProps;
+
+export type NsGridColumnsProps = NsFlexColumnsProps;

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

@@ -6,5 +6,6 @@ export type AdditionalProps = {
     additionalProps?: {
         ariaLabel?: string;
         testid?: string;
+        className?: string;
     } & ContentStackLiveTags;
 };

package/src/common/dropdown/stories/NsDropdown.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsDropdown, NsDropdownOption } from '../';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsDropdown;
 type Story = StoryObj<ComponentType>;

package/src/common/dropdown/stories/NsDropdownCountry.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsDropdown, NsDropdownOption } from '../';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsDropdown;
 type Story = StoryObj<ComponentType>;

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

@@ -0,0 +1,145 @@
+import React from 'react';
+import { render, screen, act } from '@testing-library/react';
+import NsEmailSimple from './NsEmailSimple';
+import { userEvent } from '@storybook/testing-library';
+import { emailPattern } from '../validations/regex';
+
+describe('NsEmailSimple', () => {
+    let mockCheckEmail = jest.fn().mockResolvedValue([true, false]);
+    let propsData = {
+        disabled: false,
+        label: 'Email',
+        required: true,
+        maxLength: 50,
+        invalidEmailMessage: 'Please enter a valid email',
+        dupedEmailMessage: 'Email ID already exists',
+        requiredErrorMessage: 'Email field is required',
+        checkEmail: mockCheckEmail,
+    };
+    it('renders email field with invalid regex error', async () => {
+        render(<NsEmailSimple {...propsData} />);
+        const emailField = (await screen.findByTestId('email-field-test')) as HTMLInputElement;
+        expect(emailField).toBeInTheDocument;
+        const inputElement = emailField.querySelector('input');
+        if (!inputElement) {
+            return;
+        }
+        act(() => {
+            userEvent.type(inputElement, 'test');
+            userEvent.tab();
+        });
+
+        expect(inputElement).toHaveValue('test');
+
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.type(inputElement, 'test@gm');
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('test@gm');
+
+        mockCheckEmail = jest.fn().mockResolvedValue([true, true]);
+        render(<NsEmailSimple {...propsData} />);
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.type(inputElement, 'test!gmail');
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('test!gmail');
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('');
+
+        mockCheckEmail = jest.fn().mockResolvedValue([true, false]);
+        render(<NsEmailSimple {...propsData} />);
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.type(inputElement, 'test@gmail.co');
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('test@gmail.co');
+    });
+    it('renders email field with invalid error', async () => {
+        let mockCheckEmail1 = jest.fn().mockResolvedValue([false, false]);
+        let propsData1 = {
+            disabled: false,
+            label: 'Email',
+            required: true,
+            maxLength: 50,
+            invalidEmailMessage: 'Please enter a valid email',
+            dupedEmailMessage: 'Email ID already exists',
+            requiredErrorMessage: 'Email field is required',
+            checkEmail: mockCheckEmail1,
+        };
+        render(<NsEmailSimple {...propsData1} />);
+        const emailField = (await screen.findByTestId('email-field-test')) as HTMLInputElement;
+        expect(emailField).toBeInTheDocument;
+        const inputElement = emailField.querySelector('input');
+        if (!inputElement) {
+            return;
+        }
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.type(inputElement, 'test@gmail.com');
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('test@gmail.com');
+        expect(inputElement.value).toMatch(emailPattern);
+    });
+    it('renders email field without error', async () => {
+        let mockCheckEmail1 = jest.fn().mockResolvedValue([true, true]);
+        let propsData1 = {
+            disabled: false,
+            label: 'Email',
+            required: true,
+            maxLength: 50,
+            invalidEmailMessage: 'Please enter a valid email',
+            dupedEmailMessage: 'Email ID already exists',
+            requiredErrorMessage: 'Email field is required',
+            checkEmail: mockCheckEmail1,
+        };
+        render(<NsEmailSimple {...propsData1} />);
+        const emailField = (await screen.findByTestId('email-field-test')) as HTMLInputElement;
+        expect(emailField).toBeInTheDocument;
+        const inputElement = emailField.querySelector('input');
+        if (!inputElement) {
+            return;
+        }
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.type(inputElement, 'test@gmail.com');
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('test@gmail.com');
+        expect(inputElement.value).toMatch(emailPattern);
+    });
+    it('renders email field with API error', async () => {
+        let mockCheckEmail1 = jest.fn().mockResolvedValue(undefined);
+        let propsData1 = {
+            disabled: false,
+            label: 'Email',
+            required: true,
+            maxLength: 50,
+            invalidEmailMessage: 'Please enter a valid email',
+            dupedEmailMessage: 'Email ID already exists',
+            requiredErrorMessage: 'Email field is required',
+            checkEmail: mockCheckEmail1,
+        };
+        render(<NsEmailSimple {...propsData1} />);
+        const emailField = (await screen.findByTestId('email-field-test')) as HTMLInputElement;
+        expect(emailField).toBeInTheDocument;
+        const inputElement = emailField.querySelector('input');
+        if (!inputElement) {
+            return;
+        }
+        act(() => {
+            userEvent.clear(inputElement);
+            userEvent.type(inputElement, 'test@gmail.com');
+            userEvent.tab();
+        });
+        expect(inputElement).toHaveValue('test@gmail.com');
+        expect(inputElement.value).toMatch(emailPattern);
+    });
+});

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

@@ -0,0 +1,61 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import NsEmailSimple from './NsEmailSimple';
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+
+async function checkEmail() {
+    const isServiceValid = Promise.resolve(true);
+    const isEmailAvailable = Promise.resolve(true);
+    return [isServiceValid, isEmailAvailable];
+}
+type ComponentType = typeof NsEmailSimple;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    component: NsEmailSimple,
+    title: 'Components/Inputs/NsEmailSimple',
+    decorators: [withCenterDecorator],
+    play: ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const el = canvas.getByTestId('email-field-test');
+        expect(el).toBeInTheDocument();
+    },
+
+    argTypes: {
+        disabled: {
+            description: 'Indicates whether the email field is enabled/disabled',
+        },
+        label: {
+            description: 'Label of the email component',
+        },
+        required: {
+            description: 'Indicates whether the email field is mandatory or not',
+        },
+        maxLength: {
+            description: 'Maximum number of characters allowed',
+        },
+        invalidEmailMessage: {
+            description: 'Displayed when an invalid email is entered',
+        },
+        dupedEmailMessage: {
+            description: 'Displayed when a duplicate email is entered',
+        },
+        requiredErrorMessage: {
+            description: 'Displayed when email is not entered',
+        },
+    },
+    args: {
+        disabled: false,
+        label: 'Email',
+        required: true,
+        maxLength: 50,
+        invalidEmailMessage: 'Please enter a valid email',
+        dupedEmailMessage: 'Email ID already exists',
+        requiredErrorMessage: 'Email field is required',
+        checkEmail: checkEmail,
+    },
+} as MetaStory;
+
+export const NsEmail: Story = {};

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,14 @@
-/**
- * @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.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsFlag } from './';
 
 type ComponentType = typeof NsFlag;

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/NsIcon.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsIcon, NsIconVariants } from './';
 
 type ComponentType = typeof NsIcon;

package/src/common/image/NsImage.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsImage } from './';
 
 type ComponentType = typeof NsImage;

package/src/common/image/NsNextImage.stories.tsx

@@ -1,5 +1,5 @@
 import { NsNextImage } from '.';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import type { StoryObj, Meta } from '@storybook/react';
 
 type ComponentType = typeof NsNextImage;

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/NsInputField.stories.tsx

@@ -1,37 +1,40 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsInputField } from '.';
 import { NsIcon } from '../icon';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsInputField;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsInputField',
+    title: 'Components/Inputs/NsInputField',
     component: NsInputField,
-    decorators: [(story) => <div style={{ margin: '20px' }}>{story()}</div>],
-
-    args: {},
+    decorators: [withCenterDecorator],
+    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,
@@ -17,11 +19,26 @@ export type NsInputFieldProps = Omit<
     | 'select'
     | 'SelectProps'
 > & {
+    /**
+     * has default undefined value, and we can update the value to success
+     * on successful validation and update value to 'error' in case of error
+     */
+
     fieldState?: fieldStateType;
     iconStart?: ReactNode;
+    /**
+     * assign react component for end icon
+     */
     iconEnd?: ReactNode;
+    /**
+     * assign react component for side icon
+     */
+
     iconSide?: ReactNode;
     /** purpose of showOptional props is to show additional text 'optional' in the label,
      *  if required = false and this flag is true */
     showOptional?: boolean;
-};
+    defaultValue?: string;
+    rows?: number;
+    id?: string;
+} & AdditionalProps;

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

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsLabel } from '.';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsLabel;
 type Story = StoryObj<ComponentType>;
@@ -8,12 +9,14 @@ type MetaStory = Meta<ComponentType>;
 export default {
     component: NsLabel,
     title: 'Components/NsLabel',
+    decorators: [withCenterDecorator],
 } as MetaStory;
 
 export const Default: Story = {
     args: {
         children: 'Label',
         required: false,
+        size: 16,
     },
 };
 
@@ -21,6 +24,7 @@ export const Optional: Story = {
     args: {
         children: 'Label',
         showOptional: true,
+        size: 16,
     },
 };
 
@@ -29,5 +33,6 @@ export const Required: Story = {
         children: 'Label',
         showOptional: true,
         required: true,
+        size: 16,
     },
 };