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

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -1,20 +1,23 @@
-import * as React from 'react';
-import { NsInputField } from '../input';
+import React, { useState, PropsWithChildren, useRef } from 'react';
 import { Autocomplete, AutocompleteRenderGroupParams, List, AutocompleteRenderInputParams } from '@mui/material';
-import { useState, PropsWithChildren, useRef } from 'react';
-import { NsTypography } from '../typography';
-import { NsAutocompleteProps, OptionsProps, ComponentboxProps } from './types.d';
-import { NsButton } from '../button';
+import { NsTypography, NsButton } from '../';
+import { NsAutocompleteProps, OptionsProps, ComponentBoxProps } from './types.d';
+import { StyledTextField } from './NsAutocomplete.styled';
 
 const NsAutocomplete = ({
     id = 'custom_autocomplete_dropdown',
     options = [],
     renderOptions,
+    loading,
+    noOptionsText,
     onSelect,
+    onChange,
     clear,
     seeMore,
     placeholder,
     className,
+    iconStart,
+    iconEnd,
 }: PropsWithChildren<NsAutocompleteProps>) => {
     const inputRef = useRef(null);
 
@@ -27,10 +30,21 @@ const NsAutocomplete = ({
     };
 
     const renderInput = (params: AutocompleteRenderInputParams) => (
-        <NsInputField {...params} placeholder={placeholder} inputRef={inputRef} />
+        <StyledTextField
+            {...params}
+            onChange={onChange}
+            placeholder={placeholder}
+            inputRef={inputRef}
+            InputProps={{
+                ...params.InputProps,
+                startAdornment: iconStart,
+                endAdornment: iconEnd,
+            }}
+        />
     );
 
-    const renderOption = (props: ComponentboxProps, option: OptionsProps) => (
+    // TODO: @vijayprathap need to check if we can remove object spread of ...props and ...params in renderInput
+    const renderOption = (props: ComponentBoxProps, option: OptionsProps) => (
         <li {...props}>
             <OptionUI {...props} option={option} />
         </li>
@@ -43,7 +57,7 @@ const NsAutocomplete = ({
     const renderGroupName = ({ key, group, children }: AutocompleteRenderGroupParams) => (
         <li key={key}>
             {group ? (
-                <NsTypography variant="p-s" className="p-3">
+                <NsTypography variant="p-m" weight="bold" className="p-3">
                     {group}
                 </NsTypography>
             ) : null}
@@ -59,7 +73,9 @@ const NsAutocomplete = ({
         return (
             <div className="text-right p-3">
                 <NsButton onClick={onClear} data-testid="autocomplete-clear-id">
-                    <NsTypography variant={'p-xs'}>{text}</NsTypography>
+                    <NsTypography variant={'p-xs'} weight="bold">
+                        {text}
+                    </NsTypography>
                 </NsButton>
             </div>
         );
@@ -73,20 +89,20 @@ const NsAutocomplete = ({
         return (
             <div className="text-center p-3">
                 <NsButton onClick={onSeeMore} data-testid="autocomplete-loadmore-id">
-                    <NsTypography variant="p-xs">{text}</NsTypography>
+                    <NsTypography variant="p-xs" weight="bold">
+                        {text}
+                    </NsTypography>
                 </NsButton>
             </div>
         );
     };
 
-    const renderListBoxComponent = ({ children, ...otherProps }: ComponentboxProps) => (
-        <>
+    const renderListBoxComponent = ({ children, ...otherProps }: ComponentBoxProps) => (
+        <List {...otherProps}>
             {renderClearButton()}
-            <List {...otherProps}>
-                {children}
-                {renderSeeMoreButton()}
-            </List>
-        </>
+            {children}
+            {renderSeeMoreButton()}
+        </List>
     );
 
     return (
@@ -95,6 +111,8 @@ const NsAutocomplete = ({
             disablePortal
             className={className}
             options={options}
+            loading={loading}
+            noOptionsText={noOptionsText}
             groupBy={renderGroupBy}
             getOptionLabel={renderOptionLabel}
             renderOption={renderOption}

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

@@ -6,9 +6,13 @@ import { ComponentsProps } from '@mui/material';
 export type NsAutocompleteProps = {
     id?: string;
     options: OptionsProps[];
+    loading?:boolean;
     renderOptions: React.ComponentType<any>;
+    noOptionsText ?:string;
     // eslint-disable-next-line no-unused-vars
     onSelect?: (params: OptionsProps | null) => void;
+    // eslint-disable-next-line no-unused-vars
+    onChange?: (params) => void;
     clear?: {
         text: string;
         show?: boolean; //default to false
@@ -21,6 +25,8 @@ export type NsAutocompleteProps = {
     };
     placeholder?: string;
     className?: string;
+    iconStart?: string | React.ReactNode;
+    iconEnd?: string | React.ReactNode;
 } & AdditionalProps;
 
 export type ListUiProps = {
@@ -36,4 +42,4 @@ export type OptionsProps = {
     groupBgColor?: string;
 };
 
-export type ComponentboxProps = ComponentsProps & HTMLAttributes<HTMLElement>;
+export type ComponentBoxProps = ComponentsProps & HTMLAttributes<HTMLElement>;

package/src/common/brand-components/NsBrandComponent.tsx

@@ -1,10 +1,12 @@
 import React, { PropsWithChildren, useCallback } from 'react';
+
 import NSLogoHorizontal from './icons/NSLogoHorizontal';
 import NSLogoMark from './icons/NSLogoMark';
 import NSLogoPoweredBy from './icons/NSLogoPoweredBy';
 import NSLogoStacked from './icons/NSLogoStacked';
 import NSLogoWordMark from './icons/NSWordMark';
 import LogoContainer from './NsBrandContanier.styled';
+
 import { NsBrandComponentProps } from './types.d';
 
 const VariantMap = {
@@ -19,6 +21,7 @@ const NsBrandComponent = (props: PropsWithChildren<NsBrandComponentProps>) => {
     const { variant = 'stacked', size = '108px', color = 'primary' } = props;
     const renderBrand = useCallback(() => {
         const BrandComponent = VariantMap[variant || 'stacked'];
+        // [Todo - Add neutral as FoundationTheme.PaletteColor]
         return <BrandComponent color={color as any} />;
     }, [color, variant]);
     return <LogoContainer size={size}>{renderBrand()}</LogoContainer>;

package/src/common/breadcrumb/NsBreadcrumb.tsx

@@ -12,12 +12,14 @@ import { NsBreadcrumbProps, ItemProps } from './types.d';
 import { useTheme } from '@mui/material/styles';
 import { ColorUtils } from '@nuskin/foundation-theme';
 
+const { color } = ColorUtils;
+
 const NsBreadcrumb = (props: PropsWithChildren<NsBreadcrumbProps>) => {
     const { items, iconVisibility } = props;
 
     const theme = useTheme();
-    const neutral80 = ColorUtils.getAppColor(theme, 'neutral', '80') as string;
-    const neutral60 = ColorUtils.getAppColor(theme, 'neutral', '60') as string;
+    const neutral80 = color('neutral', '80')(theme);
+    const neutral60 = color('neutral', '60')(theme);
 
     const getLabel = (item: ItemProps) => {
         if (item?.href) {

package/src/common/button/NsButton.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@/test-utils/index';
-import nuskinTheme from '@nuskin/foundation-theme/src/themes/genome-foundation';
+import { nuskinTheme } from '@nuskin/foundation-theme';
 import Button from './NsButton';
 
 const { palette } = nuskinTheme;
@@ -8,28 +8,29 @@ const { palette } = nuskinTheme;
 describe('<Button />', () => {
     describe(' button primary', () => {
         test('should render default button styles', () => {
+            const text = 'Click Me';
             render(
                 <Button color="primary" variant="contained">
-                    Click Me
+                    {text}
                 </Button>
             );
 
-            const button = screen.getByText('Click Me');
-
+            const button = screen.getByText(text);
             expect(button).toBeInTheDocument();
-            expect(button).toHaveStyle(`color: ${palette.primary.contrastText}`);
-            expect(button).toHaveStyle(`background-color: ${palette.primary.main}`);
+            expect(button).toHaveStyle(`color: ${palette?.primary?.contrastText ?? ''}`);
+            expect(button).toHaveStyle(`background-color: ${palette?.primary?.main ?? ''}`);
         });
     });
     describe('button secondary', () => {
         test('should render default button styles', () => {
+            const text = 'Click Me';
             render(
                 <Button color="success" variant="contained" size="large">
-                    Click Me
+                    {text}
                 </Button>
             );
 
-            const button = screen.getByText('Click Me');
+            const button = screen.getByText(text);
 
             expect(button).toBeInTheDocument();
             expect(button).toHaveStyle(`color: ${palette.success.contrastText}`);
@@ -37,7 +38,7 @@ describe('<Button />', () => {
         });
     });
     describe('button outline success', () => {
-        test('should render outlined sucess button', () => {
+        test('should render outlined success button', () => {
             render(
                 <Button color="success" variant="outlined" size="large">
                     Click Me
@@ -48,11 +49,10 @@ describe('<Button />', () => {
 
             expect(button).toBeInTheDocument();
             expect(button).toHaveStyle(`color: ${palette.success.main}`);
-            expect(button).toHaveStyle(`border-color: ${palette.success.main}`);
         });
     });
     describe('button outline accentColorA', () => {
-        test('should render outlined sucess button', () => {
+        test('should render outlined success button', () => {
             render(
                 <Button color="accentColorA" variant="outlined" size="large">
                     Click Me
@@ -63,7 +63,6 @@ describe('<Button />', () => {
 
             expect(button).toBeInTheDocument();
             expect(button).toHaveStyle(`color: ${palette?.accentColorA?.main}`);
-            expect(button).toHaveStyle(`border-color: ${palette?.accentColorA?.main}`);
         });
     });
 });

package/src/common/button/NsButton.stories.tsx

@@ -37,7 +37,7 @@ export const button: Story = {};
 
 export const IconOnlyButton: Story = {
     render: (args) => (
-        <NsButton {...args} iconOnly>
+        <NsButton {...args} iconOnly darkModeEnabled={false}>
             <ShoppingCart />
         </NsButton>
     ),

package/src/common/button/NsButton.styled.tsx

@@ -1,10 +1,11 @@
 import { Button as MUIButton } from '@mui/material';
 
 import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
-import { ButtonConfig } from '@nuskin/foundation-theme/src/themes/types/button';
+import { ButtonConfig } from '@nuskin/foundation-theme/src/common/themes/types/button';
+
 import { NsButtonProps } from './types.d';
 
-const { getPaletteColor, getButtonStateColor } = ColorUtils;
+const { buttonColor, paletteColor } = ColorUtils;
 
 const getButtonConfig = (theme: FoundationTheme.Theme, attribute: keyof ButtonConfig) => {
     const { config } = theme || {};
@@ -18,8 +19,8 @@ const StyledButton = styled(MUIButton)<NsButtonProps>`
         border: 1px solid ${({ theme }) => getButtonConfig(theme, 'focusColor')} !important;
     }
     :disabled {
-        background-color: ${({ theme, color }) => getButtonStateColor(theme, color, 'disabled')};
-        color: ${({ theme, color }) => getButtonStateColor(theme, color, 'disabledText')};
+        background-color: ${(btnProps) => buttonColor(btnProps?.color, 'disabled')};
+        color: ${(btnProps) => buttonColor(btnProps?.color, 'disabledText')};
     }
     ${({ theme: { config }, size }) => {
         return size === 'medium' ? config?.components?.button?.size?.medium?.padding : '';
@@ -27,37 +28,38 @@ const StyledButton = styled(MUIButton)<NsButtonProps>`
     ${({ theme: { config }, size }) => {
         return size === 'large' ? config?.components?.button?.size?.large?.padding : '';
     }}
-    ${({ variant, theme, color = 'primary' }) => {
+    ${({ variant, theme, color = 'primary', darkModeEnabled }) => {
         return variant === 'contained'
             ? `
-                background-color: ${getPaletteColor(theme, color)};
+                background-color: ${paletteColor(color)({ theme, darkModeEnabled })};
+                color: ${paletteColor(color, 'contrastText')({ theme, darkModeEnabled })} !important;
                 :hover {
-                    background-color: ${getButtonStateColor(theme, color, 'hovered')};
+                    background-color: ${buttonColor(color, 'hovered')({ theme })};
                 }
                 :active {
-                    background-color: ${getButtonStateColor(theme, color, 'pressed')};
+                    background-color: ${buttonColor(color, 'pressed')({ theme })};
                 }
                 :focus {
-                    background-color: ${getButtonStateColor(theme, color, 'focused')};
+                    background-color: ${buttonColor(color, 'focused')({ theme })};
                 }
             `
             : '';
     }}
-  ${({ variant, theme, color = 'primary' }) =>
+  ${({ variant, theme, color = 'primary', darkModeEnabled }) =>
         variant === 'outlined' &&
         `
-            border-color: ${getPaletteColor(theme, color)};
-            color: ${getPaletteColor(theme, color)};
+            border-color: ${paletteColor(color)({ theme, darkModeEnabled })};
+            color: ${paletteColor(color)({ theme, darkModeEnabled })};
             :hover {
-                border-color: ${getButtonStateColor(theme, color, 'hovered')};
-                color: ${getPaletteColor(theme, color)};
+                border-color: ${buttonColor(color, 'hovered')({ theme })};
+                color: ${paletteColor(color)({ theme, darkModeEnabled })};
             }
             :active {
-                border-color: ${getButtonStateColor(theme, color, 'pressed')};
-                color: ${getPaletteColor(theme, color)};
+                border-color: ${buttonColor(color, 'pressed')({ theme })};
+                color: ${paletteColor(color)({ theme })};
             }
         `}
-  ${({ variant, theme, color = 'primary' }) =>
+  ${({ variant, theme, color = 'primary', darkModeEnabled }) =>
         variant === 'text' &&
         `
             text-decoration: underline 1px !important;
@@ -65,15 +67,15 @@ const StyledButton = styled(MUIButton)<NsButtonProps>`
             padding: 0;
             min-width: auto;
             background-color: transparent !important;
-            text-decoration-color: ${getPaletteColor(theme, color)};
-            color: ${getPaletteColor(theme, color)};
+            text-decoration-color: ${paletteColor(color)({ theme, darkModeEnabled })};
+            color: ${paletteColor(color)({ theme, darkModeEnabled })};
             :hover {
-                color:  ${getButtonStateColor(theme, color, 'hovered')};
-                text-decoration-color:  ${getButtonStateColor(theme, color, 'hovered')};
+                color:  ${buttonColor(color, 'hovered')({ theme })};
+                text-decoration-color:  ${buttonColor(color, 'hovered')({ theme })};
             }
             :active {
-                color: ${getPaletteColor(theme, color)};
-                text-decoration-color:  ${getButtonStateColor(theme, color, 'pressed')};
+                color: ${paletteColor(color)};
+                text-decoration-color:  ${buttonColor(color, 'pressed')({ theme })};
             }
         `}
   ${({ iconOnly }) =>

package/src/common/button/NsButton.tsx

@@ -1,10 +1,17 @@
 import { PropsWithChildren } from 'react';
+import { useTheme } from '@mui/material/styles';
+
 import StyledButton from './NsButton.styled';
+
 import { NsButtonProps } from './types.d';
+import { FoundationTheme } from '@nuskin/foundation-theme';
 
-const NsButton = ({ children, ...props }: PropsWithChildren<NsButtonProps>) => {
+const NsButton = ({ children, darkModeEnabled = true, ...props }: PropsWithChildren<NsButtonProps>) => {
+    const { color } = props;
+    const { palette } = useTheme();
+    const btnColor = (color && palette?.[color] ? color : 'primary') as FoundationTheme.PaletteColors;
     return (
-        <StyledButton {...props} disableRipple>
+        <StyledButton {...props} color={btnColor} disableRipple darkModeEnabled={darkModeEnabled}>
             {children}
         </StyledButton>
     );

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

@@ -16,4 +16,5 @@ export type NsButtonProps = Pick<
   | 'className'
 > & {
   iconOnly?: boolean;
+  darkModeEnabled?: boolean;
 };

package/src/common/checkbox/NsCheckbox.styled.tsx

@@ -38,8 +38,8 @@ export const BpCheckedIcon = styled(BpIcon)(({ theme: { palette } }) => ({
     path: {
         display: 'block',
     },
-    background: palette.primary.main,
-    color: palette.primary.contrastText,
+    background: palette?.primary?.main ?? '#fff',
+    color: palette?.primary?.contrastText ?? '#000',
 }));
 
 export const StyledLabel = styled('span')<{ $hasDisabled: boolean }>`

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

@@ -3,8 +3,10 @@ export type ContentStackLiveTags = {
 };
 
 export type AdditionalProps = {
+    darkModeEnabled?: boolean;
     additionalProps?: {
         ariaLabel?: string;
         testid?: string;
+        className?: string;
     } & ContentStackLiveTags;
 };

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

@@ -1,7 +1,9 @@
 import { ReactNode } from 'react';
 import { FoundationTheme } from '@nuskin/foundation-theme';
 
-export interface DropdownProps {
+import { AdditionalProps } from '../common.types';
+
+export interface DropdownProps extends AdditionalProps {
     selectedValue: string;
     selectedLabel: string;
     onSelect: (arg: string) => void; // eslint-disable-line

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 = {};