@nuskin/foundation-ui-components 1.29.1 → 1.30.0

package/src/common/icon/icons/home.tsx

@@ -1,7 +1,9 @@
+import { ReactElement } from 'react';
+
 /* eslint-disable max-len */
-import { SvgIconProps, SvgIcon } from '@mui/material';
+import { SvgIcon, SvgIconProps } from '@mui/material';
 
-const Home = (props: SvgIconProps) => {
+const Home = (props: SvgIconProps): ReactElement => {
     return (
         <SvgIcon viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="home" {...props}>
             <path

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { BynderMedia } from './BynderMedia';
+import { ImageData1 } from '../card/fixtures/ImageData1';
+
+describe('BynderMedia', () => {
+    const imageDetail = ImageData1;
+    const suffix = 'mockSuffix';
+    const className = 'mockClassName';
+    const testId = 'mockTestId';
+    const liveTag = { 'data-cslp': 'cslp' };
+
+    it('1. renders video element for type VIDEO', () => {
+        const selected = { url: 'mockVideoUrl', type: 'VIDEO' };
+        const previewUrls = ['mockPreviewUrl1', 'mockPreviewUrl2'];
+        const isPublic = true;
+        const { container } = render(
+            <BynderMedia
+                imageDetail={{ ...imageDetail, files: {}, selected: selected as any, previewUrls, isPublic }}
+                suffix={suffix}
+                className={className}
+                testId={testId}
+                liveTag={liveTag}
+            />
+        );
+        expect(container.querySelector('video')).toBeInTheDocument();
+    });
+
+    it('2. renders default element for non-VIDEO type', () => {
+        const { container } = render(
+            <BynderMedia
+                imageDetail={imageDetail}
+                suffix={suffix}
+                className={className}
+                testId={testId}
+                liveTag={liveTag}
+            />
+        );
+        expect(container.querySelector('video')).not.toBeInTheDocument();
+        expect(container.querySelector('img')).toBeInTheDocument();
+    });
+});

package/src/common/image/BynderMedia.tsx

@@ -0,0 +1,48 @@
+import { ReactElement } from 'react';
+
+import { CslpTag } from '../common.types';
+/* eslint-disable @next/next/no-img-element */
+import { getImageType, getMediaUrl, getUrlBasedOnDerivative } from './bynder-util';
+import { BynderImageDataType } from './types';
+
+type BynderMediaProps = {
+    imageDetail: BynderImageDataType;
+    suffix?: string;
+    className?: string;
+    testId?: string;
+    liveTag?: CslpTag;
+};
+export const BynderMedia = ({ imageDetail, suffix, className, testId, liveTag }: BynderMediaProps): ReactElement => {
+    const { files, name, selected, previewUrls, isPublic } = imageDetail;
+    const { url = '', fit, position, altText = '', bgColor, type } = selected ?? {};
+    const imageDerivativeType = getImageType(url, name, files);
+    const mediaUrl = getMediaUrl(selected, isPublic, previewUrls);
+    let transformedMediaUrl = getUrlBasedOnDerivative(mediaUrl, imageDerivativeType, suffix ?? '');
+    if (type === 'VIDEO') {
+        return (
+            <video
+                loop
+                autoPlay
+                muted
+                width="100%"
+                {...liveTag}
+                style={{ backgroundColor: bgColor, objectFit: fit, objectPosition: position }}
+                className={`${className || ''} bynder-image`}
+                data-testid={testId || 'test-bynder-video'}
+            >
+                <source src={transformedMediaUrl} type="video/mp4" />
+                <source src={transformedMediaUrl} type="video/ogg" />
+            </video>
+        );
+    }
+    return (
+        <img
+            {...liveTag}
+            data-testid={testId || 'test-bynder-image'}
+            className={`${className || ''} bynder-image`}
+            src={transformedMediaUrl}
+            alt={altText}
+            style={{ backgroundColor: bgColor, objectFit: fit, objectPosition: position }}
+        />
+    );
+};

package/src/common/image/NsImage.tsx

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react';
+import { ReactElement } from 'react';
 
-import { NsImageProps } from './types.d';
+import { NsImageProps } from './types';
 
 // eslint-disable-next-line no-unused-vars
-const NsImage = ({ src, width, height, alt, variant, ...rest }: NsImageProps): ReactNode => {
+const NsImage = ({ src, width, height, alt, variant, ...rest }: NsImageProps): ReactElement => {
     let cHeight, cWidth;
     switch (variant) {
         case 'product':

package/src/common/image/NsNextImage.tsx

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

package/src/common/image/bynder-util.spec.ts

@@ -0,0 +1,187 @@
+import {
+    getBynderAltText,
+    extractBynderDescription,
+    getBasicDATWidthHeight,
+    parseJsonString,
+    getImageType,
+    getUrlBasedOnDerivative,
+    getMediaUrl,
+} from './bynder-util';
+import { ImageType } from './types';
+
+describe('A. bynder-util.getBasicDATWidthHeight', () => {
+    it('1. should return an scale transform with given height and width', () => {
+        const result = getBasicDATWidthHeight(500, 600);
+        expect(result).toEqual('io=transform:scale,width:500,height:600');
+    });
+    it('2. should return an fill transform with given height and width', () => {
+        const result = getBasicDATWidthHeight(500, 600, 'fill');
+        expect(result).toEqual('io=transform:fill,width:500,height:600');
+    });
+    it('3. should return a url with default width and height when default value is missing', () => {
+        const result = getBasicDATWidthHeight();
+        expect(result).toEqual('io=transform:scale,width:900,height:800');
+    });
+});
+
+describe('B. bynder-util.parseJsonString', () => {
+    it('1. should successfully parse a valid JSON string', () => {
+        const jsonString = '{"name": "John", "age": 30}';
+        expect(parseJsonString(jsonString)).toEqual({ name: 'John', age: 30 });
+    });
+    it('2. should return an empty object when parsing an empty string', () => {
+        const jsonString = '';
+        expect(parseJsonString(jsonString)).toEqual({});
+    });
+});
+
+describe('C. bynder-util.getBynderAltText', () => {
+    it('1. should return the value of textMetaproperties if available', () => {
+        const obj = {
+            image: [{ description: 'description', textMetaproperties: [{ name: 'SEO_Tags', value: 'SEO tag value' }] }],
+        };
+        expect(getBynderAltText('image')(obj)).toEqual('SEO tag value');
+    });
+
+    it('2. should return an empty string if textMetaproperties is not available', () => {
+        const obj = {};
+        expect(getBynderAltText('image')(obj)).toEqual('');
+    });
+});
+
+describe('D. bynder-util.extractBynderDescription', () => {
+    it('1. should return the description if available', () => {
+        const obj = { image: [{ description: 'description' }] };
+        expect(extractBynderDescription('image')(obj)).toEqual('description');
+    });
+
+    it('2. should return an empty string if description is not available', () => {
+        const obj = {};
+        expect(extractBynderDescription('image')(obj)).toEqual('');
+    });
+});
+
+describe('E. bynder-util.getImageType', () => {
+    it('1. should return transformBaseUrl if url contains transformBaseUrl', () => {
+        const url =
+            'https://media.nuskin.com/transform/PDP_Key_Ingredients_Image/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1';
+        const fileName = 'mail-40th-240207-1';
+        const files = {
+            transformBaseUrl: {
+                url: 'https://media.nuskin.com/transform/PDP_Key_Ingredients_Image/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1',
+            },
+        };
+        expect(getImageType(url, fileName, files)).toEqual(ImageType.transformBaseUrl);
+    });
+
+    it('2. should return customTransformation if url contains customTransformation', () => {
+        const url =
+            'https://media.nuskin.com/transform/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1?io=overlay:text,content:abc,font:Open Sans,size:64,color:FFFFFFFF,gravity:center,padding:20,angle:0';
+        const fileName = 'mail-40th-240207-1';
+        const files = {
+            customTransformation: {
+                url: 'https://media.nuskin.com/transform/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1',
+            },
+        };
+        expect(getImageType(url, fileName, files)).toEqual(ImageType.customTransformation);
+    });
+
+    it('3. should return key if present in file', () => {
+        const url =
+            'https://media.nuskin.com/transform/PDP_Key_Ingredients_Image/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1';
+        const fileName = 'mail-40th-240207-1';
+        const files = {
+            base: {
+                url: 'https://media.nuskin.com/transform/PDP_Key_Ingredients_Image/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1',
+            },
+        };
+        expect(getImageType(url, fileName, files)).toEqual('base');
+    });
+    it('4. should return defaultPreset if key not present in files', () => {
+        const url =
+            'https://media.nuskin.com/transform/PDP_Key_Ingredients_Image/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1';
+        const fileName = 'mail-40th-240207-1';
+        const files = {
+            base: {
+                url: 'https://media.nuskin.com/transform/s_Image/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1',
+            },
+        };
+        expect(getImageType(url, fileName, files)).toEqual(ImageType.defaultPreset);
+    });
+});
+
+describe('F. bynder-util.getUrlBasedOnDerivative', () => {
+    it('1. should append suffix to custom transformed url', () => {
+        const url =
+            'https://media.nuskin.com/transform/PDP_Key_Ingredients_Image/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1?io=overlay:text,content:abc,font:Open Sans,size:64,color:FFFFFFFF,gravity:center,padding:20,angle:0';
+        const suffix = 'io=transform:fill,width:90,height:90';
+        const derivedUrl = getUrlBasedOnDerivative(url, ImageType.customTransformation, suffix);
+        expect(derivedUrl).toEqual(`${url}&${suffix}`);
+    });
+
+    it('2. should append suffix to base url', () => {
+        const url =
+            'https://media.nuskin.com/transform/PDP_Key_Ingredients_Image/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1';
+        const suffix = 'io=transform:fill,width:90,height:90';
+        const derivedUrl = getUrlBasedOnDerivative(url, ImageType.transformBaseUrl, suffix);
+        expect(derivedUrl).toEqual(`${url}?${suffix}`);
+    });
+
+    it('3. should return url as it is', () => {
+        const url =
+            'https://media.nuskin.com/transform/PDP_Key_Ingredients_Image/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1';
+        const suffix = 'io=transform:fill,width:90,height:90';
+        const derivedUrl = getUrlBasedOnDerivative(url, ImageType.defaultPreset, suffix);
+        expect(derivedUrl).toEqual(url);
+    });
+});
+
+describe('G. bynder-util.getMediaUrl', () => {
+    it('1. should return url if asset is public', () => {
+        const url =
+            'https://media.nuskin.com/transform/PDP_Key_Ingredients_Image/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1';
+        const isPublic = true;
+        const previewUrls = [
+            'https://media.nuskin.com/transform/PDP_Key_Ingredients_Image/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1',
+        ];
+        const mediaUrl = getMediaUrl({ url } as any, isPublic, previewUrls);
+        expect(mediaUrl).toEqual(url);
+    });
+    it('2. should return Url if asset is not public and filetype not mentioned', () => {
+        const url =
+            'https://media.nuskin.com/transform/PDP_Key_Ingredients_Image/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1';
+        const isPublic = false;
+        const previewUrls = [
+            'https://media.nuskin.com/transform/PDP_Key_Ingredients_Image/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1',
+        ];
+        const mediaUrl = getMediaUrl({ url } as any, isPublic, previewUrls);
+        expect(mediaUrl).toEqual(url);
+    });
+
+    it('3. should return previewUrl if asset is video and is not public', () => {
+        const url =
+            'https://media.nuskin.com/transform/PDP_Key_Ingredients_Image/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1';
+        const isPublic = false;
+        const previewUrls = [
+            'https://media.nuskin.com/transform/PDP_Key_Ingredients_Image/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1',
+        ];
+        const mediaUrl = getMediaUrl({ url, type: 'VIDEO' } as any, isPublic, previewUrls);
+        expect(mediaUrl).toEqual(previewUrls[0]);
+    });
+    it('4. should return url if asset is video and is public', () => {
+        const url =
+            'https://media.nuskin.com/transform/PDP_Key_Ingredients_Image/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1';
+        const isPublic = true;
+        const previewUrls = [''];
+        const mediaUrl = getMediaUrl({ url, type: 'VIDEO' } as any, isPublic, previewUrls);
+        expect(mediaUrl).toEqual(url);
+    });
+    it('5. should return empty string if selected is empty object', () => {
+        const mediaUrl = getMediaUrl({} as any, false, []);
+        expect(mediaUrl).toEqual('');
+    });
+    it('6. should return empty string if selected is undefined', () => {
+        const mediaUrl = getMediaUrl(undefined, false, []);
+        expect(mediaUrl).toEqual('');
+    });
+});

package/src/common/image/bynder-util.ts

@@ -0,0 +1,98 @@
+/* eslint-disable no-unused-vars */
+import compose from 'ramda/src/compose';
+import find from 'ramda/src/find';
+import pathOr from 'ramda/src/pathOr';
+import propEq from 'ramda/src/propEq';
+import { BynderImageDataType, ImageType } from './types';
+
+export const parseJsonString = (dataString: string) => {
+    try {
+        return JSON.parse(dataString);
+    } catch (error) {
+        console.error('error parsing data ', error);
+        return {};
+    }
+};
+
+/** alt text */
+export const getBynderAltText = (propKey: string) =>
+    compose(pathOr('', ['value']), find(propEq('SEO_Tags', 'name')), pathOr([], [propKey, 0, 'textMetaproperties']));
+
+export const extractBynderDescription = (key: string) => pathOr('', [key, '0', 'description']);
+
+/** end alt text */
+
+/** DAT specific */
+
+export const getBasicDATWidthHeight = (width: number = 900, height: number = 800, transform = 'scale') =>
+    `io=transform:${transform},width:${width},height:${height}`;
+
+/** determine whether the image is
+     * 1. custom transformation ('customTransformation') ==> further transformation cannot be applied
+    https://media.nuskin.com/transform/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1?io=overlay:text,content:abc,font:Open Sans,size:64,color:FFFFFFFF,gravity:center,padding:20,angle:0
+
+    * 2. base transform url ('transformBaseUrl') ==> transformation can be applied in the component
+ * "https://media.nuskin.com/transform/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1"
+
+* 3. bynder defined preset ('preset') ==> further transformation cannot be applied
+    "https://media.nuskin.com/transform/PDP_Key_Ingredients_Image/3ea706a3-770e-4b66-b112-427ef840f4b6/mail-40th-240207-1"
+
+    * 4. custom preset ('defaultPreset') example: thumbnail, small, mini, original , webImage, ==> further transformation can be applied
+
+    * returns either 'customTransformation' | 'transformBaseUrl' | or preset type of the image example webImage, thumbnail
+    * */
+export const getImageType = (url: string, fileName: string, files: Record<string, any>) => {
+    if (url.includes(`${fileName}?io=`)) {
+        return ImageType.customTransformation;
+    } else {
+        const parts = url.split('/');
+        if (parts[3] === 'transform' && parts[5] === fileName) {
+            // url?.toLowerCase().includes(`transform/${databaseId}/${fileName}`.toLowerCase()) this check creates error in sometimes url does not have - which is present in database id
+
+            return ImageType.transformBaseUrl;
+        } else {
+            return retrieveImageKey(files, url);
+        }
+    }
+};
+export const retrieveImageKey = (files: Record<string, any>, url: string) => {
+    for (const key in files) {
+        if (files[key].url === url) {
+            return key;
+        }
+    }
+    return ImageType.defaultPreset;
+};
+
+export const getUrlBasedOnDerivative = (url: string, imageDerivativeType: string, suffix: string) => {
+    if (imageDerivativeType === ImageType.customTransformation) {
+        return `${url}&${suffix}`;
+    } else if (imageDerivativeType === ImageType.transformBaseUrl) {
+        return `${url}?${suffix}`;
+    }
+    return url;
+};
+
+/** end DAT */
+
+/**
+ *
+ * @param selected : object containing select image url
+ * @param isPublic : whether asset is marked public, if it is video and marked public, then mov or gif can be selected otherwise, only webImage can be selected in that case we have to show previewUrl
+ * @returns returns selected video or image, if asset is video and is not public, then returns previewUrl
+ */
+export function getMediaUrl(
+    selected: BynderImageDataType['selected'],
+    isPublic: boolean,
+    previewUrls: BynderImageDataType['previewUrls']
+): string {
+    const { url = '', type: fileType = '' } = selected ?? {};
+    if (fileType === 'VIDEO') {
+        if (isPublic) {
+            return url;
+        } else {
+            return previewUrls?.[0] || '';
+        }
+    }
+    return url;
+}

package/src/common/image/index.ts

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

package/src/common/image/types.ts

@@ -0,0 +1,78 @@
+/* eslint-disable no-unused-vars */
+import { ImageProps } from 'next/image';
+
+export type NsNextImageProps = Pick<
+    ImageProps,
+    | 'src'
+    | 'height'
+    | 'width'
+    | 'alt'
+    | 'priority'
+    | 'sizes'
+    | 'quality'
+    | 'placeholder'
+    | 'style'
+    | 'loading'
+    | 'blurDataURL'
+    | 'fill'
+    | 'unoptimized'
+    | 'loader'
+> & { id?: string; className?: string };
+
+export type NsImageProps = {
+    alt: string;
+    className?: string;
+    fill?: boolean;
+    height?: number | string;
+    id?: string;
+    src: string;
+    variant?: 'product' | 'award' | 'icon' | 'fill';
+    width?: number | string;
+};
+
+/** types */
+export type DATOptions = { width?: number; height?: number; transform: 'fill' | 'scale' };
+export type BynderImageDataType = {
+    /** selected is manually added, using additionalInfo from bynder */
+    selected?: {
+        url: string;
+        fileSize: number | null;
+        width: number | null;
+        height: number | null;
+        imageType?: string;
+        type: 'VIDEO' | 'IMAGE';
+        altText?: string;
+        fit: 'cover' | 'contain' | 'scale-down' | 'none';
+        position: string;
+        bgColor: string;
+    };
+    isPublic: boolean;
+    __typename?: 'Image';
+    id: string;
+    name: string;
+    description: string | null;
+    databaseId: string;
+    originalUrl?: string;
+    type: 'VIDEO' | 'IMAGE' | 'DOCUMENT';
+    url?: string;
+    previewUrls?: string[];
+    extensions?: string[];
+    textMetaproperties?: ({
+        name: string;
+        value: string;
+    } | null)[];
+    files: {
+        [key: string]: {
+            url: string;
+            width: number | null;
+            height: number | null;
+            fileSize: number | null;
+        };
+    };
+};
+
+export enum ImageType {
+    defaultPreset = 'defaultPreset',
+    customTransformation = 'customTransformation',
+    transformBaseUrl = 'transformBaseUrl',
+}

package/src/common/input/InputWrapper.tsx

@@ -1,5 +1,6 @@
 import { Box } from '@mui/material';
-import { styled, nuskinTheme, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
+import { ColorUtils, FoundationTheme, nuskinTheme, styled } from '@nuskin/foundation-theme';
+
 import { fieldStateType } from './types.d';
 
 const { isDarkMode } = ColorUtils;

package/src/common/input/NsInputField.tsx

@@ -1,7 +1,15 @@
-import { FormHelperText, TextField } from '@mui/material';
+import { ReactElement } from 'react';
+
+import {
+    FormHelperText,
+    TextField,
+} from '@mui/material';
 
 import { NsLabel } from '../label';
-import { AdornmentPropsType, getAdornmentProps } from './getAdornmentProps';
+import {
+    AdornmentPropsType,
+    getAdornmentProps,
+} from './getAdornmentProps';
 import InputFieldWrapper from './InputFieldWrapper';
 import InputWrapper from './InputWrapper';
 import { NsInputFieldProps } from './types.d';
@@ -11,7 +19,7 @@ import { NsInputFieldProps } from './types.d';
  * @param props { placeholder, fieldState, iconStart, iconEnd, iconSide }
  * @returns Input Field
  */
-const NsInputField = (props: NsInputFieldProps) => {
+const NsInputField = (props: NsInputFieldProps): ReactElement => {
     const {
         autoComplete,
         autoFocus,

package/src/common/label/NsLabel.tsx

@@ -1,8 +1,13 @@
-import { CSSProperties } from 'react';
+import {
+    CSSProperties,
+    ReactElement,
+} from 'react';
 
 import { FormLabel } from '@mui/material';
-
-import { styled, ColorUtils } from '@nuskin/foundation-theme';
+import {
+    ColorUtils,
+    styled,
+} from '@nuskin/foundation-theme';
 
 import { NsLabelProps } from './types.d';
 
@@ -26,7 +31,7 @@ const StyledLabel = styled(FormLabel)<{ fontSize?: number; style?: CSSProperties
     } as any; // TODO: may be this "any" has to be fixed from foundation-theme
 });
 
-const NsLabel = (props: NsLabelProps) => {
+const NsLabel = (props: NsLabelProps): ReactElement => {
     const { required, showOptional, children, size } = props;
     return (
         <StyledLabel fontSize={size} {...props} required={required}>

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

@@ -4,12 +4,16 @@
  * @description NsLink component.
  */
 
-import React from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
+import React, { ReactElement } from 'react';
+
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import type {
+    Meta,
+    StoryObj,
+} from '@storybook/react';
 
-import { NsLink } from './';
 import { NsTypography } from '../typography';
+import { NsLink } from './';
 
 type ComponentType = typeof NsLink;
 type Story = StoryObj<ComponentType>;
@@ -35,7 +39,7 @@ export default {
 } as MetaStory;
 
 export const Links: Story = {
-    render: (args: any) => (
+    render: (args: any): ReactElement => (
         <NsTypography variant="title-l">
             <NsLink {...args} href={args.href} />
         </NsTypography>
@@ -43,7 +47,7 @@ export const Links: Story = {
 };
 
 export const ReactComponentLink: Story = {
-    render: (args: any) => (
+    render: (args: any):ReactElement => (
         <NsLink {...args} href={args.href} passHref>
             <NsTypography variant="title-l">Test Link</NsTypography>
         </NsLink>

package/src/common/link/NsLink.tsx

@@ -3,12 +3,18 @@
  * @description Exports one components - NsLink
  */
 
-import React, { PropsWithChildren } from 'react';
+import React, {
+    PropsWithChildren,
+    ReactElement,
+} from 'react';
 
-import { StyledLink, StyledNextLink } from './NsLink.styled';
+import {
+    StyledLink,
+    StyledNextLink,
+} from './NsLink.styled';
 import { NsLinkProps } from './types.d';
 
-const NsLink = (props: PropsWithChildren<NsLinkProps>) => {
+const NsLink = (props: PropsWithChildren<NsLinkProps>): ReactElement => {
     const {
         className,
         href,

package/src/common/modal/NsModal.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import Dialog from '@mui/material/Dialog';
 
 import { ModalVariantMap } from './model/NsModalVariantMap';
 import { NsModalProps } from './types';
 
-const NsModal = (props: NsModalProps) => {
+const NsModal = (props: NsModalProps): ReactElement => {
     const {
         open,
         handleClose,

package/src/common/modal/helper-component/NsModalContentBox.tsx

@@ -1,10 +1,15 @@
-import { useMemo } from 'react';
+import {
+    ReactElement,
+    useMemo,
+} from 'react';
+
 import { DialogContent } from '@mui/material';
+
+import { NsTypography } from '../../';
 import { NsModalComponentProps } from '../types';
 import NsModalTitle from './NsModalTitle';
-import { NsTypography } from '../..';
 
-const NsModalContentBox = ({ handleClose, statusInfo }: NsModalComponentProps) => {
+const NsModalContentBox = ({ handleClose, statusInfo }: NsModalComponentProps): ReactElement => {
     const { title, description } = statusInfo || {};
 
     const header = useMemo(() => {