@nuskin/foundation-ui-components 1.0.0-develop.1 → 1.0.0-develop.11

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;
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsImage',
+    title: 'Components/Data Display/NsImage',
     component: NsImage,
     decorators: [withCenterDecorator],
     args: {

package/src/common/image/NsImage.tsx

@@ -1,19 +1,31 @@
-import { NsImageProps } from './types';
+import { NsImageProps } from './types.d';
 
 // eslint-disable-next-line no-unused-vars
 const NsImage = ({ src, width, height, alt, variant, ...rest }: NsImageProps) => {
-    let cHeight: string | number | undefined = height,
-        cWidth: string | number | undefined = width;
-    if (variant === 'product') {
-        (cHeight = 300), (cWidth = 300);
-    } else if (variant === 'icon') {
-        (cHeight = 60), (cWidth = 60);
-    } else if (variant === 'award') {
-        (cHeight = 130), (cWidth = 130);
-    } else if (variant === 'fill') {
-        (cHeight = 'auto'), (cWidth = '100%');
+    let cHeight, cWidth;
+    switch (variant) {
+        case 'product':
+            cHeight = 300;
+            cWidth = 300;
+            break;
+        case 'icon':
+            cHeight = 60;
+            cWidth = 60;
+            break;
+        case 'award':
+            cHeight = 130;
+            cWidth = 130;
+            break;
+        case 'fill':
+            cHeight = 'auto';
+            cWidth = '100%';
+            break;
+        default:
+            cHeight = height;
+            cWidth = width;
+            break;
     }
     // eslint-disable-next-line @next/next/no-img-element
-    return <img src={src} alt={alt} height={cHeight} width={cWidth} />;
+    return <img src={src} alt={alt} height={cHeight} width={cWidth} {...rest} />;
 };
 export default NsImage;

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

@@ -1,4 +1,4 @@
-import { render, screen } from '../../../test-utils';
+import { render, screen } from '@/test-utils/index';
 import NsNextImage from './NsNextImage';
 describe('NsNextImage', () => {
     it('test image element renders', () => {

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;
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsNextImage',
+    title: 'Components/Data Display/NsNextImage',
     component: NsNextImage,
     decorators: [withCenterDecorator],
 } as MetaStory;

package/src/common/image/NsNextImage.tsx

@@ -1,4 +1,4 @@
-import { NsNextImageProps } from './types';
+import { NsNextImageProps } from './types.d';
 import Image from 'next/image';
 
 const NsNextImage = ({ src, width, height, alt, fill, priority, ...props }: NsNextImageProps) => {

package/src/common/image/index.ts

@@ -1,3 +1,3 @@
 export { default as NsNextImage } from './NsNextImage';
-export type { NsImageProps, NsNextImageProps } from './types';
+export type { NsImageProps, NsNextImageProps } from './types.d';
 export { default as NsImage } from './NsImage';

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,4 +1,7 @@
+export * from './accordion';
+export * from './alert';
 export * from './auth-dropdown';
+export * from './autocomplete';
 export * from './banner';
 export * from './breadcrumb';
 export * from './brand-components';
@@ -8,21 +11,22 @@ export * from './carousal';
 export * from './cart-icon';
 export * from './column-control';
 export * from './checkbox';
+export * from './common.types.d';
 export * from './dropdown';
+export * from './email-simple';
 export * from './flag';
+export * from './hooks';
 export * from './icon';
-export * from './input';
 export * from './image';
-export * from './link';
+export * from './input';
 export * from './label';
-export * from './autocomplete';
-
-/* Dropdown Components */
-export * from './dropdown';
-export * from './auth-dropdown';
-export * from './alert';
+export * from './link';
+export * from './modal';
 export * from './nav-tab';
 export * from './nav-product-card';
+export * from './radiogroup';
+export * from './spinner';
+export * from './text-strip';
+export * from './table';
 export * from './typography';
-
-export * from './common.types';
+export * from './utility';

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/InputWrapper.tsx

@@ -1,20 +1,25 @@
 import { Box } from '@mui/material';
-import { styled, nuskinTheme } from '@nuskin/foundation-theme';
-import { fieldStateType } from './types';
+import { styled, nuskinTheme, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
+import {fieldStateType} from './types.d';
 
+const { isDarkMode } = ColorUtils;
 const { colors } = nuskinTheme;
 
 const options = {
     shouldForwardProp: (propKey: string) => propKey !== 'fieldState',
 };
 
-const getInputBorderColor = (palette: any, fieldState: fieldStateType, isLight = true): string => {
+const getInputBorderColor = (
+    palette: FoundationTheme.Theme['palette'],
+    fieldState: fieldStateType,
+    isLight = true
+): string => {
     if (fieldState === 'success') {
-        return isLight ? colors.success[40] : colors.success[40];
+        return colors.success[40];
     } else if (fieldState === 'error') {
         return isLight ? colors.red[40] : colors.red[20];
     } else {
-        return palette.primary.main;
+        return palette?.primary.main ?? '';
     }
 };
 
@@ -28,7 +33,7 @@ const InputWrapper = styled(
 )<InputWrapperType>(({ theme, fieldState }) => {
     /* default value added so that unit tests do not fail */
     const { palette = { primary: { main: '', contrastText: '' } } } = theme;
-    const isLight = palette.primary.main === colors.primary.black;
+    const isLight = isDarkMode({ theme });
     const inputFocusedBorder = isLight ? colors.accentColorB[20] : colors.accentColorB[30];
     const inputDisabledBg = isLight ? colors.neutral[30] : colors.neutral[70];
     const inputDisabledBorder = isLight ? colors.neutral[60] : colors.neutral[80];
@@ -56,7 +61,7 @@ const InputWrapper = styled(
                     },
                 },
                 fieldset: {
-                    border: `1px solid ${getInputBorderColor(palette as any, fieldState, isLight)}`,
+                    border: `1px solid ${getInputBorderColor(palette, fieldState, isLight)}`,
                 },
                 input: {
                     color: palette.primary.main,

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

@@ -1,9 +1,9 @@
 import { TextField, FormHelperText } from '@mui/material';
 import InputWrapper from './InputWrapper';
-import { NsInputFieldProps } from './types';
+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 });
+    const 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

@@ -1,6 +1,6 @@
 import { NsIcon, NsIconNameType } from '../icon';
 import { InputAdornment } from '@mui/material';
-import { fieldStateType } from './types';
+import { fieldStateType } from './types.d';
 import { ReactNode } from 'react';
 
 type IconMapType = {
@@ -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/index.ts

@@ -1,2 +1,2 @@
 export { default as NsInputField } from './NsInputField';
-export type { NsInputFieldProps } from './types';
+export type { NsInputFieldProps } from './types.d';

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>;
@@ -7,13 +8,15 @@ type MetaStory = Meta<ComponentType>;
 
 export default {
     component: NsLabel,
-    title: 'Components/NsLabel',
+    title: 'Components/Inputs/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,
     },
 };

package/src/common/label/NsLabel.tsx

@@ -1,33 +1,34 @@
-import { InputLabel } from '@mui/material';
-import { NsLabelProps } from './types';
-import { styled, nuskinTheme } from '@nuskin/foundation-theme';
+import { CSSProperties } from 'react';
 
-const { colors } = nuskinTheme;
+import { FormLabel } from '@mui/material';
 
-const StyledLabel = styled(InputLabel)(({ theme }: any) => {
-    const isLight = theme.palette?.primary?.main === '#252525';
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
+
+import { NsLabelProps } from './types.d';
+
+const { paletteColor, isDarkMode, color } = ColorUtils;
+
+const StyledLabel = styled(FormLabel)<{ fontSize?: number; style?: CSSProperties }>(({ theme, fontSize, style }) => {
+    const isLight = !isDarkMode({ theme });
     return {
-        fontSize: '14px',
-        color: theme.palette?.primary?.main ?? '#252525',
+        fontSize: fontSize ? `${fontSize}px` : '14px',
+        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/index.ts

@@ -1,2 +1,2 @@
 export { default as NsLabel } from './NsLabel';
-export type { NsLabelProps } from './types';
+export type { NsLabelProps } from './types.d';

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/link/NsLink.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { styled } from '@nuskin/foundation-theme';
 
-import { render } from '../../../test-utils/index';
+import { render } from '@/test-utils/index';
 import { NsLink } from './';
 
 const CustomLink = styled.a`

package/src/common/link/NsLink.stories.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 import { NsLink } from './';
 import { NsTypography } from '../typography';
@@ -16,7 +16,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsLink',
+    title: 'Components/Data Display/NsLink',
     component: NsLink,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/link/NsLink.tsx

@@ -6,7 +6,7 @@
 import React, { PropsWithChildren } from 'react';
 
 import { StyledLink, StyledNextLink } from './NsLink.styled';
-import { NsLinkProps } from './types';
+import { NsLinkProps } from './types.d';
 
 /**
  * @component NsLink

package/src/common/link/index.ts

@@ -1,2 +1,2 @@
 export { default as NsLink } from './NsLink';
-export type { NsLinkProps } from './types';
+export type { NsLinkProps } from './types.d';

package/src/common/modal/NsModal.spec.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@/test-utils/index';
+import NsModal from './NsModal';
+import { NsModalData } from './stories/mock';
+import { NsModalProps } from './types';
+
+describe('NsModal', () => {
+    const onHandleClose = jest.fn();
+
+    const NsModalProp = NsModalData as NsModalProps;
+
+    test('1. check NsModal component open', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('nsmodal-dialog')).toBeInTheDocument();
+    });
+
+    test('2. should render NsModal default component', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-default')).toBeInTheDocument();
+    });
+
+    test('3. should render NsModal status component', () => {
+        const VariantProps: NsModalProps = {
+            ...NsModalProp,
+            variant: 'info',
+        };
+        const { getByTestId } = render(<NsModal {...VariantProps} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-status')).toBeInTheDocument();
+    });
+
+    test('4. should render NsModal title with close button', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-title')).toBeInTheDocument();
+        expect(getByTestId('modal-close-button')).toBeInTheDocument();
+    });
+
+    test('5. should render NsModal body content', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-body-content')).toBeInTheDocument();
+    });
+
+    test('6. should render NsModal footer', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-footer')).toBeInTheDocument();
+    });
+});

package/src/common/modal/NsModal.styled.tsx

@@ -0,0 +1,28 @@
+import { styled } from '@nuskin/foundation-theme';
+import { NsButton } from '../button';
+import { DialogActions } from '@mui/material';
+
+export const NsInfoWrapper = styled.div`
+    display: flex;
+    .status-icon {
+        padding: 16px 0px 0px 24px;
+    }
+    .title-icon {
+        padding-right: 10px;
+    }
+`;
+
+export const CloseButton = styled(NsButton)`
+    position: absolute;
+    right: 8px;
+    top: 8px;
+`;
+
+export const ModalFooter = styled(DialogActions)`
+    display: flex;
+    justify-content: space-around;
+    padding: 20px 0px 10px 0px;
+    button {
+        width: 100%;
+    }
+`;