@nuskin/foundation-ui-components 1.29.1 → 1.30.0

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

@@ -1,12 +1,19 @@
+import { ReactElement } from 'react';
+
 import { DialogContent } from '@mui/material';
-import { ReactNode } from 'react';
 
 import { Show } from '../../utility';
 import { ModalFooter } from '../NsModal.styled';
 import { NsModalComponentProps } from '../types';
 import NsModalTitle from './NsModalTitle';
 
-const NsDefaultModal = ({ header, handleClose, body, footer, additionalProps }: NsModalComponentProps): ReactNode => {
+const NsDefaultModal = ({
+    header,
+    handleClose,
+    body,
+    footer,
+    additionalProps,
+}: NsModalComponentProps): ReactElement => {
     const { dividers } = additionalProps || {};
 
     return (

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

@@ -1,9 +1,11 @@
+import { ReactElement } from 'react';
+
 import { NsInfoWrapper } from '../NsModal.styled';
 import { NsModalComponentProps } from '../types';
 import NsModalContentBox from './NsModalContentBox';
 import NsModalStatusIcon from './NsModalStatusIcon';
 
-const NsStatusModal = ({ handleClose, statusInfo, variant }: NsModalComponentProps) => {
+const NsStatusModal = ({ handleClose, statusInfo, variant }: NsModalComponentProps): ReactElement => {
     return (
         <NsInfoWrapper data-testid="modal-status">
             <NsModalStatusIcon {...{ variant }} />

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

@@ -1,10 +1,10 @@
-import { ReactNode } from 'react';
+import { ReactElement } from 'react';
 
 import { NsIcon, NsIconNameType } from '../../';
 import { StatusIconMap } from '../model/NsModalVariantMap';
 import { NsModalComponentProps, NsModalVariant } from '../types';
 
-const NsModalStatusIcon = ({ variant }: NsModalComponentProps): ReactNode => {
+const NsModalStatusIcon = ({ variant }: NsModalComponentProps): ReactElement => {
     const iconName = variant ? StatusIconMap[variant] : null;
     return (
         <div className="status-icon">

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

@@ -1,10 +1,13 @@
-import { NsIcon } from '../..';
+import { ReactElement } from 'react';
+
 import { DialogTitle } from '@mui/material';
+
+import { NsIcon } from '../../';
+import { Show } from '../../utility';
 import { CloseButton, NsInfoWrapper } from '../NsModal.styled';
 import { NsModalComponentProps } from '../types';
-import { Show } from '../../utility';
 
-const NsModalTitle = ({ header, handleClose }: NsModalComponentProps) => {
+const NsModalTitle = ({ header, handleClose }: NsModalComponentProps): ReactElement => {
     const { show, children, isCloseIcon, iconName } = header || {};
     return (
         <Show when={show}>

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

@@ -1,10 +1,12 @@
-/* eslint-disable @next/next/no-img-element */
-import type { StoryObj, Meta } from '@storybook/react';
+import { ReactElement, useState } from 'react';
+
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import NsModal from '../NsModal';
-import { NsButton } from '../../button';
 import { Grid, Typography } from '@mui/material';
-import { useState } from 'react';
+/* eslint-disable @next/next/no-img-element */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { NsButton } from '../../button';
+import NsModal from '../NsModal';
 import { NsModalProps } from '../types';
 import { NsModalData } from './mock';
 
@@ -22,7 +24,7 @@ export default {
     },
 } as MetaStory;
 
-const RenderNsModal = (args: NsModalProps) => {
+const RenderNsModal = (args: NsModalProps): ReactElement => {
     const [isOpen, setOpen] = useState(false);
 
     const onModalHandler = () => {
@@ -75,7 +77,7 @@ export const ImageWidthText: Story = {
                         </Typography>
                     </Grid>
                 </Grid>
-            ),
+            ) as ReactElement,
         },
         footer: {
             show: false,

package/src/common/nav-product-card/NsNavProductCard.spec.tsx

@@ -1,9 +1,7 @@
-import { NsNavProductCard } from '.';
 import { render } from '@/test-utils/index';
 
-const productImage = `
-    https://media.nuskin.com/m/471880e8f6e689f4/Lumi-IO-normal-combo-cleansing-device-and-cleanser.png
-`;
+import { ImageData1 } from '../card/fixtures/ImageData1';
+import { NsNavProductCard } from './';
 
 describe('Product Card Component', () => {
     it('1. should render Product Card Component', () => {
@@ -15,7 +13,7 @@ describe('Product Card Component', () => {
                 }}
                 productDescription="ageLOC LumiSpa iO pairs an intelligent"
                 productName="ageLOC® LumiSpa® iO"
-                productImg={productImage}
+                productImg={ImageData1}
             />
         );
         expect(container).toBeInTheDocument();

package/src/common/nav-product-card/NsNavProductCard.stories.tsx

@@ -1,5 +1,7 @@
-import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ImageData1 } from '../card/fixtures/ImageData1';
 import { NsNavProductCard } from './';
 
 type ComponentType = typeof NsNavProductCard;
@@ -16,9 +18,7 @@ export default {
         productName: 'ageLOC® LumiSpa® iO',
         className: 'justify-center',
         // eslint-disable-next-line max-len -- disabling for links
-        productImg:
-            // eslint-disable-next-line max-len
-            'https://media.nuskin.com/m/471880e8f6e689f4/webimage-Nuskin-Ageloc-Lumi-IO-normal-combo-cleansing-device-and-cleanser.png',
+        productImg: ImageData1,
     },
 } as MetaStory;
 

package/src/common/nav-product-card/NsNavProductCard.tsx

@@ -1,19 +1,19 @@
-/* eslint-disable @next/next/no-img-element */
-import React, { PropsWithChildren } from 'react';
-import { NsImage, NsTypography } from '../';
+import React, { ReactElement } from 'react';
+
+import { NsTypography } from '../';
+import { BynderMedia } from '../image/BynderMedia';
 import { ProductCardContainer } from './NsNavProductCard.styled';
 import { NsNavProductCardProps } from './types.d';
 
-/* TODO: can we update NsImage with NsNextImage, once storybook 7 is in place */
 export const NsNavProductCard = ({
     productImg,
     productDescription,
     productName,
     className = '',
-}: PropsWithChildren<NsNavProductCardProps>) => {
+}: NsNavProductCardProps): ReactElement => {
     return (
         <ProductCardContainer className={className}>
-            <NsImage src={productImg} alt="product-img" />
+            <BynderMedia imageDetail={productImg} />
             <div className="text-container">
                 <NsTypography variant="h5" color="primary" className="mt-11 mb-3.5 underline-hover" weight="bold">
                     {productName}

package/src/common/nav-product-card/types.d.ts

@@ -1,7 +1,8 @@
 import { AdditionalProps } from '../common.types';
+import { BynderImageDataType } from '../image/types';
 
 export interface NsNavProductCardProps extends AdditionalProps {
-    productImg: string;
+    productImg: BynderImageDataType;
     productName: string;
     className?: string;
     productDescription: string;

package/src/common/nav-tab/NavDrawer.tsx

@@ -1,13 +1,20 @@
-import { ReactNode } from 'react';
+import {
+    ReactElement,
+    ReactNode,
+} from 'react';
+
 import { Show } from '../utility';
-import { NavDrawerContainer, NavDrawerStyled } from './NsNavTab.styled';
+import {
+    NavDrawerContainer,
+    NavDrawerStyled,
+} from './NsNavTab.styled';
 
 type NavDrawerProps = {
     active: string | null;
     showDrawer: boolean;
     content: ReactNode;
 };
-export const NavDrawer = ({ active, showDrawer, content }: NavDrawerProps) => {
+export const NavDrawer = ({ active, showDrawer, content }: NavDrawerProps): ReactElement => {
     return (
         <NavDrawerStyled data-testid="nav-drawer-container" className="nav-drawer">
             <Show when={Boolean(active) && showDrawer}>

package/src/common/nav-tab/NavTitles.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactElement } from 'react';
 
 import { NavTabs, NsLink, NsTypography } from '../';
 import { Show } from '../utility';
@@ -11,7 +11,7 @@ type NavTitlesProps = {
     tabTitleClassName?: string;
 };
 
-export const NavTitles = ({ tabs, setActive, active, tabTitleClassName }: NavTitlesProps): ReactNode => {
+export const NavTitles = ({ tabs, setActive, active, tabTitleClassName }: NavTitlesProps): ReactElement => {
     const NavTitleTypography = (tab: NavTabs) => (
         <NsTypography
             variant={tab.textVariant}

package/src/common/nav-tab/NsNavTab.tsx

@@ -1,16 +1,22 @@
-import React, { useCallback, useState } from 'react';
+import React, {
+    ReactElement,
+    useCallback,
+    useState,
+} from 'react';
+
 import { LayoutGroup } from 'framer-motion';
-import { NavTabContainer } from './NsNavTab.styled';
+
 import { NavDrawer } from './NavDrawer';
-import { NsNavTabComponentProps } from './types.d';
 import { NavTitles } from './NavTitles';
+import { NavTabContainer } from './NsNavTab.styled';
+import { NsNavTabComponentProps } from './types.d';
 
 export const NsNavTabComponent = ({
     tabs,
     className,
     tabTitleClassName,
     showDrawer = true,
-}: NsNavTabComponentProps) => {
+}: NsNavTabComponentProps): ReactElement => {
     const [active, setActive] = useState<string | null>(null);
 
     const activeTab = tabs?.find((tab) => tab.tabName === active);

package/src/common/progress/NsProgress.stories.tsx

@@ -1,7 +1,10 @@
+import { ReactElement } from 'react';
+
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import type { StoryObj, Meta } from '@storybook/react';
-import NsProgress from './NsProgress';
 import { PaletteColors } from '@nuskin/foundation-theme';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import NsProgress from './NsProgress';
 
 type ComponentType = typeof NsProgress;
 type Story = StoryObj<ComponentType>;
@@ -37,6 +40,6 @@ export const ProgressBar: Story = {
         backgroundColor: 'secondary',
         value: 40,
         height: '10px',
-        body: <span>{'% Complete'}</span>,
+        body: (<span>{'% Complete'}</span>) as ReactElement,
     },
 };

package/src/common/progress/NsProgress.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
+import { ProgressInfo, StyledCheckCircle, StyledLinearProgress, StyledProgress } from './NsProgress.styled';
 import { NsProgressProps } from './types';
-import { StyledLinearProgress, ProgressInfo, StyledCheckCircle, StyledProgress } from './NsProgress.styled';
 
-const NsProgress = (props: NsProgressProps) => {
+const NsProgress = (props: NsProgressProps): ReactElement => {
     const { barColor, backgroundColor, height, value, body } = props;
     return (
         <StyledProgress className="ns-progress">

package/src/common/radiogroup/NsRadioGroup.tsx

@@ -1,4 +1,5 @@
-import { NsRadioGroupProps } from './types';
+import { ReactElement } from 'react';
+
 import { FormControl } from '@mui/material';
 
 import { NsLabel } from '../label';
@@ -9,8 +10,9 @@ import {
     StyledRadioGroup,
     StyledSpan,
 } from './NsRadioGroup.styled';
+import { NsRadioGroupProps } from './types';
 
-const NsRadioGroup = (props: NsRadioGroupProps) => {
+const NsRadioGroup = (props: NsRadioGroupProps): ReactElement => {
     const {
         items,
         helperText,

package/src/common/search-bar/NsSearchBar.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
+
 import InputBase from '@mui/material/InputBase';
 import { styled } from '@nuskin/foundation-theme';
 
@@ -29,7 +30,7 @@ const StyledInputBase = styled(InputBase)(() => ({
     },
 }));
 
-const NsSearchBar: React.FC = () => {
+const NsSearchBar = (): ReactElement => {
     return (
         <div>
             <Search>

package/src/common/select/DefaultRenderOption.tsx

@@ -1,6 +1,8 @@
+import { ReactElement } from 'react';
+
 import NsSelectOption from './NsSelectOption';
 import { RenderSelectOptionArgType } from './types';
 
-export const DefaultRenderOption = (props: RenderSelectOptionArgType) => {
+export const DefaultRenderOption = (props: RenderSelectOptionArgType): ReactElement => {
     return <NsSelectOption {...props} key={props?.value} onClick={props.onClick} index={props.index ?? 0} />;
 };

package/src/common/select/NsSelect.tsx

@@ -1,21 +1,34 @@
-import React, { MouseEvent, useCallback, useMemo, useRef, useState } from 'react';
+import React, {
+    MouseEvent,
+    ReactElement,
+    useCallback,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
 
 import { useOnClickOutside } from '../hooks/useOnClickOutside';
 import { NsIcon } from '../icon';
 import { Show } from '../utility';
+import {
+    arrowVisibility,
+    factorMap,
+} from './constant';
+import { DefaultRenderOption } from './DefaultRenderOption';
 import {
     ErrorContainer,
-    StyledArrowContainer,
     SelectButton,
     SelectContainer,
     SelectHead,
     SelectLabel,
     SelectList,
     SelectMain,
+    StyledArrowContainer,
 } from './NsSelect.styled';
-import { LabelValueType, SelectProps } from './types.d';
-import { arrowVisibility, factorMap } from './constant';
-import { DefaultRenderOption } from './DefaultRenderOption';
+import {
+    LabelValueType,
+    SelectProps,
+} from './types.d';
 
 const NsSelect: React.FC<SelectProps> = ({
     selected,
@@ -35,7 +48,7 @@ const NsSelect: React.FC<SelectProps> = ({
     reverseArrowControls,
     RenderOption = DefaultRenderOption,
     options,
-}) => {
+}): ReactElement => {
     const [isOpen, setIsOpen] = useState(false);
     const optionIndex = useMemo(() => {
         if (typeof selected?.index === 'number') return selected.index;

package/src/common/select/NsSelectOption.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import { StyledSelectOption } from './NsSelect.styled';
 import { SelectOptionProps } from './types.d';
@@ -9,7 +9,7 @@ export const NsSelectOption: React.FC<SelectOptionProps> = ({
     onClick,
     selected,
     showListDivider = true,
-}) => {
+}): ReactElement => {
     const isSelected = value === selected?.value;
     return (
         <StyledSelectOption

package/src/common/select/stories/NsSelect.stories.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React, { ReactElement, useState } from 'react';
 
-import type { Meta, StoryObj } from '@storybook/react';
-import { NsSelectOption, NsSelect, SelectProps } from '../';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { NsSelect, NsSelectOption, SelectProps } from '../';
 import { countries } from './countries';
 
 type ComponentType = typeof NsSelect;
@@ -54,7 +55,7 @@ export default {
     },
 } as MetaStory;
 
-const AppSelect = (props: SelectProps) => {
+const AppSelect = (props: SelectProps): ReactElement => {
     const { selected } = props;
 
     const [data, setData] = useState(selected);

package/src/common/spinner/NsSpinner.stories.tsx

@@ -1,6 +1,9 @@
+import { ReactElement } from 'react';
+
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import type { Meta, StoryObj } from '@storybook/react';
+
 import NsSpinner from './NsSpinner';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsSpinner;
 type Story = StoryObj<ComponentType>;
@@ -10,7 +13,7 @@ export default {
     title: 'Components/Feedback/NsSpinner',
     component: NsSpinner,
     decorators: [
-        (Story) => (
+        (Story): ReactElement => (
             <div className="flex place-content-center">
                 <Story />
             </div>

package/src/common/spinner/NsSpinner.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
+
 import SpinnerIcon from './icons/Spinner';
 import { SpinnerContainer } from './NsSpinner.styled';
 import { NsSpinnerProps } from './types';
 
-const NsSpinner: React.FC<NsSpinnerProps> = ({ size = 100, additionalProps }) => {
+const NsSpinner: React.FC<NsSpinnerProps> = ({ size = 100, additionalProps }): ReactElement => {
     return (
         <SpinnerContainer size={size} className="spinner" {...additionalProps}>
             <SpinnerIcon />

package/src/common/spinner/icons/Spinner.tsx

@@ -1,7 +1,9 @@
+import { ReactElement } from 'react';
+
 /* eslint-disable max-len */
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 
-const SpinnerIcon = (props: SvgIconProps) => {
+const SpinnerIcon = (props: SvgIconProps): ReactElement => {
     return (
         <SvgIcon
             id="ns-spinner-1"

package/src/common/table/NsExpandableRow.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
+
 import { TableRow } from '@mui/material';
-import {
-    StyledTableRow,
-    StyledTableLastCell,
-    StyledExpandCell,
-    StyledOriginalTableCell
-} from './NsTable.styled'
-import type {
-    NsTableRowProps
-} from './types'
 import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 
+import {
+    StyledExpandCell,
+    StyledOriginalTableCell,
+    StyledTableLastCell,
+    StyledTableRow,
+} from './NsTable.styled';
+import type { NsTableRowProps } from './types';
+
 export default function ExpandableRow({
     expandableContent,
     isExpand,
@@ -21,8 +21,8 @@ export default function ExpandableRow({
     index,
     showActions,
     showExpandedContent,
-    actionClick
-}: NsTableRowProps) {
+    actionClick,
+}: NsTableRowProps): ReactElement {
     const tableRowTestId = `table-row-${index}`;
 
     return (
@@ -32,37 +32,31 @@ export default function ExpandableRow({
                 onClick={() => handleClick(index)}
                 tabIndex={-1}
                 key={index}
-                className='cursor-pointer'
+                className="cursor-pointer"
                 data-testid={tableRowTestId}
             >
-                {
-                    itemKeyList.map((id, i) => {
-                        return ((i === itemKeyList.length - 1) && showActions) ? (
-                            <StyledTableLastCell align="justify" key={id}>
-                                <span>{row[id]}</span>
-                                <span className='action'>{actionClick(row)}</span>
-                            </StyledTableLastCell>
-                        ) : (
-                            <StyledOriginalTableCell align="left" key={id}>{row[id]}</StyledOriginalTableCell>
-                        )
-                    })
-                }
+                {itemKeyList.map((id, i) => {
+                    return i === itemKeyList.length - 1 && showActions ? (
+                        <StyledTableLastCell align="justify" key={id}>
+                            <span>{row[id]}</span>
+                            <span className="action">{actionClick(row)}</span>
+                        </StyledTableLastCell>
+                    ) : (
+                        <StyledOriginalTableCell align="left" key={id}>
+                            {row[id]}
+                        </StyledOriginalTableCell>
+                    );
+                })}
             </StyledTableRow>
-            {
-                showExpandedContent ? (
-                    <TableRow>
-                        <StyledExpandCell colSpan={itemKeyList.length} className={!isExpand ? 'remove' : ''}>
-                            <Collapse in={isExpand} unmountOnExit>
-                                <Box className='m-px'>
-                                    {
-                                        expandableContent(row, index)
-                                    }
-                                </Box>
-                            </Collapse>
-                        </StyledExpandCell>
-                    </TableRow>
-                ) : null
-            }
+            {showExpandedContent ? (
+                <TableRow>
+                    <StyledExpandCell colSpan={itemKeyList.length} className={!isExpand ? 'remove' : ''}>
+                        <Collapse in={isExpand} unmountOnExit>
+                            <Box className="m-px">{expandableContent(row, index)}</Box>
+                        </Collapse>
+                    </StyledExpandCell>
+                </TableRow>
+            ) : null}
         </React.Fragment>
-    )
+    );
 }

package/src/common/table/NsTable.stories.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
+import React, { ReactElement } from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react';
-import NsTable from './NsTable';
+
 import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
-import { Item } from './types';
 import { NsIcon } from '../icon';
+import NsTable from './NsTable';
+import { Item } from './types';
 
 type ComponentType = typeof NsTable;
 type Story = StoryObj<ComponentType>;
@@ -14,9 +15,9 @@ const headers = [
         label: 'Dessert (100g serving)',
         id: 'name',
         numeric: false,
-        sortable: false
+        sortable: false,
     },
-    { label: 'Calories', id: 'calories' , numeric: true, sortable: true},
+    { label: 'Calories', id: 'calories', numeric: true, sortable: true },
     { label: 'Fat (g)', id: 'fat', numeric: true, sortable: true },
     { label: 'Carbs (g)', id: 'carbs', numeric: true, sortable: true },
     { label: 'Protein (g)', id: 'protein', numeric: true, sortable: true },
@@ -126,37 +127,30 @@ export default {
         showActions: true,
         showExpandedContent: true,
         loading: false,
-        expandableContent: (selectedItem: Item, index: number) => {
+        expandableContent: (selectedItem: Item, index: number): ReactElement => {
             return (
                 <div key={index}>
                     <p>
                         Data: {selectedItem.name} , {selectedItem.calories}
                     </p>
-                    <p>
-                        Index: {index}
-                    </p>
-                    <p>
-                        Expandable: True
-                    </p>
+                    <p>Index: {index}</p>
+                    <p>Expandable: True</p>
                 </div>
-            )
+            );
         },
-        actionClick: (row: Item) => {
+        actionClick: (row: Item): ReactElement => {
             const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
                 event.stopPropagation();
-                console.log(row)
-            }
+                console.log(row);
+            };
 
             return (
                 <button onClick={handleClick}>
-                    <NsIcon
-                        name='cart'
-                        size='medium'
-                    />
+                    <NsIcon name="cart" size="medium" />
                 </button>
-            )
-        }
-    }
+            );
+        },
+    },
 } as MetaStory;
 
 export const NasTable: Story = {};