@nuskin/foundation-ui-components 1.29.1 → 1.30.0

package/src/common/table/NsTable.tsx

@@ -1,18 +1,35 @@
-import React, { useState, useEffect } from 'react';
-import { TableBody, TableCell, TableRow } from '@mui/material';
+import React, {
+    ReactElement,
+    useEffect,
+    useState,
+} from 'react';
+
+import {
+    TableBody,
+    TableCell,
+    TableRow,
+} from '@mui/material';
+import Grid from '@mui/material/Grid';
+
+import {
+    getComparator,
+    stableSort,
+} from './helper';
+import ExpandableRow from './NsExpandableRow';
 import {
-    StyledTable,
-    StyledTableContainer,
     StyledEmptyRow,
-    StyledProgressCell,
     StyledLinearProgress,
+    StyledProgressCell,
+    StyledTable,
+    StyledTableContainer,
 } from './NsTable.styled';
-import type { NsTableProps, Item, OrderType } from './types';
-import { stableSort, getComparator } from './helper';
 import NsTableHeader from './NsTableHeader';
 import NsTablePagination from './NsTablePagination';
-import ExpandableRow from './NsExpandableRow';
-import Grid from '@mui/material/Grid';
+import type {
+    Item,
+    NsTableProps,
+    OrderType,
+} from './types';
 
 export default function NsTable({
     headers = [],
@@ -26,7 +43,7 @@ export default function NsTable({
     showExpandedContent = true,
     loading = false,
     isExpandableAll = false,
-}: NsTableProps) {
+}: NsTableProps): ReactElement {
     const [order, setOrder] = useState<OrderType>('asc');
     const [orderBy, setOrderBy] = useState<keyof Item>(itemKey);
     const [expandMap, setExpandMap] = useState<{ [key: number]: boolean }>({});

package/src/common/table/NsTableHeader.tsx

@@ -1,10 +1,23 @@
-import type { NsTableHeaderProps, Item } from './types';
-import React from 'react';
-import { TableHead, TableRow, Box, TableCell } from '@mui/material';
-import { StyledTableSortLabel, StyledTableLabel } from './NsTable.styled';
+import React, { ReactElement } from 'react';
+
+import {
+    Box,
+    TableCell,
+    TableHead,
+    TableRow,
+} from '@mui/material';
 import { visuallyHidden } from '@mui/utils';
 
-export default function NsTableHeader(props: NsTableHeaderProps) {
+import {
+    StyledTableLabel,
+    StyledTableSortLabel,
+} from './NsTable.styled';
+import type {
+    Item,
+    NsTableHeaderProps,
+} from './types';
+
+export default function NsTableHeader(props: NsTableHeaderProps): ReactElement {
     const { order, orderBy, headCells, onRequestSort } = props;
     const createSortHandler = (property: keyof Item) => (event: React.MouseEvent<unknown>) => {
         onRequestSort(event, property);

package/src/common/table/NsTablePagination.tsx

@@ -1,14 +1,10 @@
-import type { NsTablePaginationProps } from './types'
-import React from 'react'
-import { StyledPagination } from './NsTable.styled'
+import React, { ReactElement } from 'react';
 
-export default function NsTablePagination(props: NsTablePaginationProps) {
-    const {
-        count,
-        rowsPerPage,
-        page,
-        onPageChange,
-    } = props;
+import { StyledPagination } from './NsTable.styled';
+import type { NsTablePaginationProps } from './types';
+
+export default function NsTablePagination(props: NsTablePaginationProps): ReactElement {
+    const { count, rowsPerPage, page, onPageChange } = props;
 
     const totalPage = Math.ceil(count / rowsPerPage);
     const handleChange = (event: React.ChangeEvent<unknown>, value: number) => {
@@ -18,7 +14,7 @@ export default function NsTablePagination(props: NsTablePaginationProps) {
     return (
         <StyledPagination
             count={totalPage}
-            page={page} 
+            page={page}
             variant="outlined"
             onChange={handleChange}
             shape="rounded"

package/src/common/text-strip/NsTextStrip.tsx

@@ -3,9 +3,12 @@
  * @description NsTextStrip component for scrolling text CTA
  */
 
-import React from 'react';
+import React, { ReactElement } from 'react';
 
-import { ColorUtils, styled } from '@nuskin/foundation-theme';
+import {
+    ColorUtils,
+    styled,
+} from '@nuskin/foundation-theme';
 
 import { NsLink } from '../link';
 import { NsTypography } from '../typography';
@@ -33,7 +36,7 @@ const StyledHeader = styled(NsLink)`
     }
 `;
 
-const NsTextStrip = (props: NsTextStripProps) => {
+const NsTextStrip = (props: NsTextStripProps): ReactElement => {
     const { alignment = 'center', description, link, className = '' } = props;
 
     return (

package/src/common/toast/Fade.tsx

@@ -2,13 +2,10 @@
  * Credit to MUI team @ https://mui.com
  */
 import * as React from 'react';
-import { TransitionProps, TransitionStatus, Transition } from 'notistack';
-import {
-    useForkRef,
-    reflow,
-    getTransitionProps,
-    createTransition,
-} from './shared';
+
+import { Transition, TransitionProps, TransitionStatus } from 'notistack';
+
+import { createTransition, getTransitionProps, reflow, useForkRef } from './shared';
 
 const styles: Partial<Record<TransitionStatus, React.CSSProperties>> = {
     entering: {
@@ -19,7 +16,7 @@ const styles: Partial<Record<TransitionStatus, React.CSSProperties>> = {
     },
 };
 
-const Fade = React.forwardRef<HTMLDivElement, TransitionProps>((props, ref) => {
+const Fade = React.forwardRef<HTMLDivElement, TransitionProps>((props, ref): React.ReactElement => {
     const {
         children,
         in: inProp,

package/src/common/toast/ToastProvider.tsx

@@ -1,7 +1,8 @@
-import type { PropsWithChildren } from 'react';
-import { SnackbarProvider, SnackbarProviderProps, MaterialDesignContent } from 'notistack';
+import type { PropsWithChildren, ReactElement } from 'react';
 
-import { styled, ColorUtils, ScreenSize } from '@nuskin/foundation-theme';
+import { MaterialDesignContent, SnackbarProvider, SnackbarProviderProps } from 'notistack';
+
+import { ColorUtils, ScreenSize, styled } from '@nuskin/foundation-theme';
 
 const { getGenomeColor } = ColorUtils;
 
@@ -10,7 +11,7 @@ const ToastNotification = styled(MaterialDesignContent)`
     height: 46px;
     box-shadow: none;
     padding: 0 20px;
-    
+
     .toast-message-wrapper {
         width: 440px;
         text-overflow: ellipsis;
@@ -67,21 +68,21 @@ const ToastNotification = styled(MaterialDesignContent)`
     }
 `;
 
-const NsToastProvider = (props: PropsWithChildren<SnackbarProviderProps>) => {
-    const {
-        children,
-        autoHideDuration = 5000
-    } = props;
+const NsToastProvider = (props: PropsWithChildren<SnackbarProviderProps>): ReactElement => {
+    const { children, autoHideDuration = 5000 } = props;
     return (
-        <SnackbarProvider autoHideDuration={autoHideDuration} Components={{
-            success: ToastNotification,
-            error: ToastNotification,
-            info: ToastNotification,
-            warning: ToastNotification,
-        }}>
-            { children }
+        <SnackbarProvider
+            autoHideDuration={autoHideDuration}
+            Components={{
+                success: ToastNotification,
+                error: ToastNotification,
+                info: ToastNotification,
+                warning: ToastNotification,
+            }}
+        >
+            {children}
         </SnackbarProvider>
     );
 };
 
-export default NsToastProvider;
+export default NsToastProvider;

package/src/common/toast/specs/Toast.spec.tsx

@@ -5,126 +5,118 @@ import React, { PropsWithChildren, useEffect } from 'react';
 import { NsToastProvider, ToastOptions, useToast } from '../';
 
 const ToastWrapper = ({ children }: PropsWithChildren<{}>) => {
-    return (
-        <NsToastProvider>
-            { children }
-        </NsToastProvider>
-    );
-}
+    return <NsToastProvider>{children}</NsToastProvider>;
+};
 
-const ToastComponent = (props: {
-    variant: VariantType;
-    message?: string;
-    options?: ToastOptions;
-}) => {
+const ToastComponent = (props: { variant: VariantType; message?: string; options?: ToastOptions }) => {
     const { showToast } = useToast();
-    const {
-        variant,
-        message,
-        options,
-    } = props;
+    const { variant, message, options } = props;
     useEffect(() => {
         showToast(variant, message, options);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (
-        <div></div>
-    );
+    return <div></div>;
 };
 
 describe('Toast', () => {
     afterEach(() => {
         closeSnackbar();
     });
-    it('should render a toast and displays the message', () => {
+    it('1. should render a toast and displays the message', () => {
         render(
             <ToastWrapper>
-                <ToastComponent variant='success' message='Hello' />
+                <ToastComponent variant="success" message="Hello" />
             </ToastWrapper>
         );
         expect(screen.queryByText('Hello')).toBeInTheDocument();
-    });
-    it('should render a success toast', () => {
+    }, 100000);
+    it('2. should render a success toast', () => {
         const { container } = render(
             <ToastWrapper>
-                <ToastComponent variant='success' message='Hello' />
+                <ToastComponent variant="success" message="Hello" />
             </ToastWrapper>
         );
         expect(container.querySelector('.notistack-MuiContent-success')).toBeInTheDocument();
-    });
-    it('should render a error toast', () => {
+    }, 100000);
+    it('3. should render a error toast', () => {
         const { container } = render(
             <ToastWrapper>
-                <ToastComponent variant='error' message='Hello' />
+                <ToastComponent variant="error" message="Hello" />
             </ToastWrapper>
         );
         expect(container.querySelector('.notistack-MuiContent-error')).toBeInTheDocument();
-    });
-    it('should render a info toast', () => {
+    }, 100000);
+    it('4. should render a info toast', () => {
         const { container } = render(
             <ToastWrapper>
-                <ToastComponent variant='info' message='Hello' />
+                <ToastComponent variant="info" message="Hello" />
             </ToastWrapper>
         );
         expect(container.querySelector('.notistack-MuiContent-info')).toBeInTheDocument();
-    });
-    it('it should render a warning toast', () => {
+    }, 100000);
+    it('5. it should render a warning toast', () => {
         const { container } = render(
             <ToastWrapper>
-                <ToastComponent variant='warning' message='Hello' />
+                <ToastComponent variant="warning" message="Hello" />
             </ToastWrapper>
         );
         expect(container.querySelector('.notistack-MuiContent-warning')).toBeInTheDocument();
-    });
-    it('should render a warning toast and disappear after 3 seconds', async () => {
+    }, 100000);
+    it('6. should render a warning toast and disappear after 3 seconds', async () => {
         const { container } = render(
             <ToastWrapper>
-                <ToastComponent variant='warning' message='Hello' options={{ autoHideDuration: 3000 }}/>
+                <ToastComponent variant="warning" message="Hello" options={{ autoHideDuration: 3000 }} />
             </ToastWrapper>
         );
         expect(container.querySelector('.notistack-MuiContent-warning')).toBeInTheDocument();
         await new Promise((r) => setTimeout(r, 4000));
         expect(container.querySelector('.notistack-MuiContent-warning')).not.toBeInTheDocument();
-    });
-    it('should render a action buttons', async () => {
-       
+    }, 100000);
+    it('7. should render a action buttons', async () => {
         const { getByTestId } = render(
             <ToastWrapper>
-                <ToastComponent variant='warning' message='Hello' options={{ actions: [
-                    {
-                        label: 'Undo',
-                        onClick: () => alert('Undo clicked'),
-                    },
-                ] }}/>
+                <ToastComponent
+                    variant="warning"
+                    message="Hello"
+                    options={{
+                        actions: [
+                            {
+                                label: 'Undo',
+                                onClick: () => alert('Undo clicked'),
+                            },
+                        ],
+                    }}
+                />
             </ToastWrapper>
         );
         expect(getByTestId('action-button')).toBeInTheDocument();
-    });
-    it('should render close button', async () => {
+    }, 100000);
+    it('8. should render close button', async () => {
         const { getByTestId } = render(
             <ToastWrapper>
-                <ToastComponent variant='warning' message='Hello' options={
-                    {showCloseIcon: true,}}
-                />
+                <ToastComponent variant="warning" message="Hello" options={{ showCloseIcon: true }} />
             </ToastWrapper>
         );
         expect(getByTestId('icon')).toBeInTheDocument();
-    });
-    it('should render a action buttons and close button', async () => {
-       
+    }, 100000);
+    it('9. should render a action buttons and close button', async () => {
         const { getAllByRole } = render(
             <ToastWrapper>
-                <ToastComponent variant='warning' message='Hello' options={
-                    { actions: [
-                        {
-                            label: 'Undo',
-                            onClick: () => alert('Undo clicked'),
-                        },
-                    ],
-                    showCloseIcon: true,
-                    }}/>
+                <ToastComponent
+                    variant="warning"
+                    message="Hello"
+                    options={{
+                        actions: [
+                            {
+                                label: 'Undo',
+                                onClick: () => alert('Undo clicked'),
+                            },
+                        ],
+                        showCloseIcon: true,
+                    }}
+                />
             </ToastWrapper>
         );
         expect(getAllByRole('button')?.length).toBe(2);
-    });
+    }, 100000);
 });

package/src/common/toast/stories/Toast.stories.tsx

@@ -1,7 +1,10 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
+
 import { VariantType } from 'notistack';
-import type { StoryObj, Meta } from '@storybook/react';
-import { NsToastProvider, useToast,  ToastOptions } from '..';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { NsToastProvider, ToastOptions, useToast } from '../';
 
 type ComponentType = typeof NsToastProvider;
 type Story = StoryObj<ComponentType>;
@@ -13,15 +16,15 @@ type ToastProps = {
     options?: ToastOptions;
 };
 
-const ToastDecorator = (Story: React.FC) => {
+const ToastDecorator = (Story: React.FC): ReactElement => {
     return (
         <NsToastProvider>
             <Story />
         </NsToastProvider>
-    )
+    );
 };
 
-const ToastComponent = (props: ToastProps) => {
+const ToastComponent = (props: ToastProps): ReactElement => {
     const {
         variant,
         message = 'Toast Demo',
@@ -37,9 +40,7 @@ const ToastComponent = (props: ToastProps) => {
 
     return (
         <div>
-            <button onClick={toastHandler}>
-                Show Toast
-            </button>
+            <button onClick={toastHandler}>Show Toast</button>
         </div>
     );
 };
@@ -59,7 +60,7 @@ export default {
             actions: {
                 description: 'The buttons should  be passed to the Toast element',
             },
-        }
+        },
     },
     args: {
         variant: 'error',
@@ -74,7 +75,7 @@ export default {
                     onClick: () => alert('Undo clicked'),
                 },
             ],
-        }
+        },
     },
 } as MetaStory;
 

package/src/common/typography/GlobalFontInter.tsx

@@ -1,6 +1,11 @@
-import { GlobalStyles, css } from '@nuskin/foundation-theme';
+import { ReactElement } from 'react';
 
-const GlobalFontInter = () => (
+import {
+    css,
+    GlobalStyles,
+} from '@nuskin/foundation-theme';
+
+const GlobalFontInter = (): ReactElement => (
     <GlobalStyles
         styles={css`
             @import url('https://fonts.googleapis.com/css2?family=Inter');

package/src/common/typography/NsTypography.tsx

@@ -1,7 +1,14 @@
-import React, { PropsWithChildren } from 'react';
-import { HtmlTagVariant, NsTypographyProps } from './types.d';
-import { StyledTypography } from './Typography.styled';
+import React, {
+    PropsWithChildren,
+    ReactElement,
+} from 'react';
+
 import HtmlTagVariantMapping from './HtmlTagVariantMap';
+import {
+    HtmlTagVariant,
+    NsTypographyProps,
+} from './types.d';
+import { StyledTypography } from './Typography.styled';
 
 const NsTypography = ({
     children,
@@ -14,7 +21,7 @@ const NsTypography = ({
     colorOverride = '',
     noSpacing = false,
     renderHTMLNode,
-}: PropsWithChildren<NsTypographyProps>) => {
+}: PropsWithChildren<NsTypographyProps>): ReactElement => {
     const htmlTagVariant: HtmlTagVariant | undefined = renderHTMLNode ? HtmlTagVariantMapping[variant] : undefined;
 
     return (

package/src/common/videos/NsVideo.tsx

@@ -4,11 +4,14 @@
  * @description NsVideo component with a Iframe video url props
  */
 
-import { PropsWithChildren } from 'react';
+import {
+    PropsWithChildren,
+    ReactElement,
+} from 'react';
 
 import { NsVideoProps } from './types.d';
 
-const NsVideo = (props: PropsWithChildren<NsVideoProps>) => {
+const NsVideo = (props: PropsWithChildren<NsVideoProps>): ReactElement => {
     const { src, title, width, height, allowFullScreen } = props;
     return (
         <iframe

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

@@ -1,30 +0,0 @@
-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;
-};