@nuskin/foundation-ui-components 1.29.1 → 1.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.29.1",
+    "version": "1.30.0",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {
@@ -100,12 +100,6 @@
         "jest-environment-jsdom": "^29.7.0",
         "storybook": "^7.5.1"
     },
-    "peerDependencies": {
-        "@mui/material": "5.14.16",
-        "@nuskin/foundation-theme": "1.6.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-    },
     "files": [
         "src/common"
     ],

package/src/common/accordion/NsAccordion.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { ReactElement, useMemo } from 'react';
 
 import { AccordionItem, NsAccordionItem, NsAccordionProps, NsTypography, useAccordionMap } from '../';
 import { StyledAccordionWrapper } from './ToggleSection.styled';
@@ -26,7 +26,7 @@ const NsAccordion = ({
     additionalProps,
     isChild = false,
     showEndIconWhenEmpty = false,
-}: NsAccordionProps) => {
+}: NsAccordionProps): ReactElement => {
     const defaultOpenIds = useMemo(() => {
         return items
             ?.map?.((content, index) => (content?.isDefaultOpen ? createKey(content, index) : null))

package/src/common/accordion/NsAccordionHeader.tsx

@@ -2,14 +2,7 @@ import { ReactElement } from 'react';
 
 import { styled } from '@nuskin/foundation-theme';
 
-import {
-    AccordionVariant,
-    AccordionVariantType,
-    NsAccordionHeaderProps,
-    NsIcon,
-    NsIconProps,
-    NsTypography,
-} from '../';
+import { AccordionVariant, AccordionVariantType, NsAccordionHeaderProps, NsIcon, NsIconProps, NsTypography } from '../';
 import { isValidIconName } from '../icon/NsIconVariants';
 import { getAccordionColor } from './colorMap';
 
@@ -54,7 +47,7 @@ const NsAccordionHeader = ({
     cslp,
     showEndIconWhenEmpty,
     content,
-}: NsAccordionHeaderProps) => {
+}: NsAccordionHeaderProps): ReactElement => {
     return (
         <StyledHeader
             invert={invert}

package/src/common/accordion/NsAccordionItem.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
-import { NsAccordionItemProps, NsCollapse } from '..';
+import React, { ReactElement } from 'react';
+
+import { NsAccordionItemProps, NsCollapse } from '../';
 import NsAccordionHeader from './NsAccordionHeader';
 import { StyledToggleSection } from './ToggleSection.styled';
 
@@ -26,7 +27,7 @@ const NsAccordionItem = ({
     cslp,
     allowMultipleExpanded,
     showEndIconWhenEmpty,
-}: NsAccordionItemProps) => {
+}: NsAccordionItemProps): ReactElement => {
     return (
         <StyledToggleSection variant={variant}>
             <NsAccordionHeader

package/src/common/accordion/NsCollapse.tsx

@@ -71,7 +71,7 @@ const NsCollapse = ({
     type,
     cslp,
     allowMultipleExpanded,
-}: NsCollapseProps) => {
+}: NsCollapseProps): ReactElement => {
     const body = useMemo(() => {
         if (isValidElement(content)) {
             return content as ReactElement;

package/src/common/accordion/NsToggleSection.tsx

@@ -1,5 +1,12 @@
-import React, { useState } from 'react';
-import { NsToggleSectionProps, NsAccordionItem } from '../';
+import React, {
+    ReactElement,
+    useState,
+} from 'react';
+
+import {
+    NsAccordionItem,
+    NsToggleSectionProps,
+} from '../';
 
 /**
  * NsToggleSection takes prop `title` and prop `children` and toggles
@@ -18,7 +25,7 @@ const NsToggleSection = ({
     invert,
     isChild,
     type,
-}: NsToggleSectionProps) => {
+}: NsToggleSectionProps): ReactElement => {
     const [isExpanded, setIsExpanded] = useState(defaultOpen ?? false);
 
     const toggleAccordion = () => {

package/src/common/accordion/stories/NsAccordionItem.stories.tsx

@@ -1,8 +1,10 @@
-import type { StoryObj, Meta } from '@storybook/react';
+import { ReactElement } from 'react';
+
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { AccordionVariant, NsAccordionItem } from '../../';
 import NsAccordionStory from './NsAccordion.stories';
-import { ReactElement } from 'react';
 
 type ComponentType = typeof NsAccordionItem;
 type Story = StoryObj<ComponentType>;
@@ -40,7 +42,7 @@ export const ClosedSection: Story = {
     args: {
         variant: AccordionVariant.Compact,
         isOpen: false,
-        content: <div className="p-2">Nuskin Description</div>,
+        content: (<div className="p-2">Nuskin Description</div>) as ReactElement,
         title: 'Nuskin',
     },
 };

package/src/common/accordion/stories/NsCollapse.stories.tsx

@@ -1,8 +1,10 @@
-import type { StoryObj, Meta } from '@storybook/react';
+import { ReactElement } from 'react';
+
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { AccordionContentTypeObject, AccordionVariant, NsCollapse } from '../';
 import NsAccordionStory from './NsAccordion.stories';
-import { ReactElement } from 'react';
 
 type ComponentType = typeof NsCollapse;
 type Story = StoryObj<ComponentType>;
@@ -46,6 +48,6 @@ export const Closed: Story = {
 export const Open: Story = {
     args: {
         isOpen: true,
-        content: <div className="p-2">Nuskin Description</div>,
+        content: (<div className="p-2">Nuskin Description</div>) as ReactElement,
     },
 };

package/src/common/alert/NsAlert.stories.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
+
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import type { Meta, StoryObj } from '@storybook/react';
+
 import NsAlert from './NsAlert';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsAlert;
 type Story = StoryObj<ComponentType>;
@@ -35,8 +37,8 @@ export default {
           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
           qui officia deserunt mollit anim id est laborum.`}</span>
-        ),
-        foot: <span>Some message goes here.</span>,
+        ) as ReactElement,
+        foot: (<span>Some message goes here.</span>) as ReactElement,
     },
 } as MetaStory;
 

package/src/common/alert/NsAlert.tsx

@@ -1,5 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import React, {
+    ReactElement,
+    useEffect,
+    useState,
+} from 'react';
 
+import useWindowSize from '../hooks/useWindowSize';
+import { NsIcon } from '../icon';
+import { NsTypography } from '../typography';
+import Header, {
+    colorMap,
+    iconMap,
+} from './Header';
 import {
     Alert,
     AlertBody,
@@ -10,12 +21,11 @@ import {
     AlertHead,
     AlertIcon,
 } from './NsAlert.styled';
-
-import type { NsAlertProps, ContextType, AlertType } from './types.d';
-import { NsIcon } from '../icon';
-import Header, { colorMap, iconMap } from './Header';
-import useWindowSize from '../hooks/useWindowSize';
-import { NsTypography } from '../typography';
+import type {
+    AlertType,
+    ContextType,
+    NsAlertProps,
+} from './types.d';
 
 export default function NsAlert({
     context = 'info',
@@ -27,7 +37,7 @@ export default function NsAlert({
     body,
     foot,
     onDismiss = undefined,
-}: NsAlertProps) {
+}: NsAlertProps): ReactElement {
     const [alertType, setAlertType] = useState('banner');
     const windowSize = useWindowSize();
 
@@ -58,11 +68,15 @@ export default function NsAlert({
                     />
                 </AlertIcon>
                 <AlertHead>
-                    <Header head={
-                        <NsTypography variant="body-xl" className='alert-head-title' weight="bold" noSpacing>
-                            {title}
-                        </NsTypography>
-                    }>{head}</Header>
+                    <Header
+                        head={
+                            <NsTypography variant="body-xl" className="alert-head-title" weight="bold" noSpacing>
+                                {title}
+                            </NsTypography>
+                        }
+                    >
+                        {head}
+                    </Header>
                 </AlertHead>
                 {hasDismissListener && (
                     <AlertCloseButton data-testid="alert-close-button" onClick={onDismiss}>

package/src/common/auth-dropdown/NsAuthDropdown.tsx

@@ -1,18 +1,18 @@
-import { useCallback, useRef, useState } from 'react';
+import { ReactElement, useCallback, useRef, useState } from 'react';
 
+import { useOnClickOutside } from '../hooks/useOnClickOutside';
 import { NsIcon } from '../icon';
 import {
+    AuthDropdown,
     AuthDropdownContainer,
     AuthHead,
     Button,
-    AuthDropdown,
-    Triangle,
     SignInButton,
-    SignUpLinkContainer,
     SignUpLink,
+    SignUpLinkContainer,
+    Triangle,
 } from './NsAuthDropdown.styled';
 import { NsAuthDropdownProps } from './types.d';
-import { useOnClickOutside } from '../hooks/useOnClickOutside';
 
 const NsAuthDropdown = ({
     signInRedirectLink,
@@ -23,7 +23,7 @@ const NsAuthDropdown = ({
     titleText,
     closeOnMouseLeave = false,
     darkModeEnabled = true,
-}: NsAuthDropdownProps) => {
+}: NsAuthDropdownProps): ReactElement => {
     const [isOpen, setIsOpen] = useState(false);
     const dropdownRef = useRef<HTMLDivElement | null>(null);
 
@@ -33,7 +33,7 @@ const NsAuthDropdown = ({
 
     const handleClose = useCallback(() => {
         setIsOpen(false);
-    },[]);
+    }, []);
 
     useOnClickOutside(dropdownRef?.current, handleClose);
 

package/src/common/autocomplete/NsAutocomplete.spec.tsx

@@ -56,7 +56,7 @@ describe('CustomAutocomplete', () => {
             await userEvent.click(optionLi);
         });
         expect(onChangeMock).toHaveBeenCalled();
-    }, 160000);
+    }, 90000000);
 
     it('5. should load more options when clicking load more button', async () => {
         const seeMore = {
@@ -72,7 +72,7 @@ describe('CustomAutocomplete', () => {
             await userEvent.click(loadMoreButton);
         });
         expect(seeMore.onSeeMore).toHaveBeenCalled();
-    }, 160000);
+    }, 9000000);
 
     it('6. should clear options when clicking clear button', async () => {
         const clear = {
@@ -87,5 +87,5 @@ describe('CustomAutocomplete', () => {
             const clearButton = screen.getByText(clear.text);
             await userEvent.click(clearButton);
         });
-    }, 160000);
+    }, 90000000);
 });

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -1,5 +1,6 @@
 import React, {
     PropsWithChildren,
+    ReactElement,
     useEffect,
     useRef,
     useState,
@@ -49,7 +50,7 @@ const NsAutocomplete = ({
     value,
     isFilterEnabled = true,
     fullWidth,
-}: PropsWithChildren<NsAutocompleteProps>) => {
+}: PropsWithChildren<NsAutocompleteProps>):ReactElement => {
     const [scrollTopPosition, setScrollTopPosition] = useState(0);
     const listboxRef = useRef<HTMLUListElement | null>(null);
 

package/src/common/autocomplete/helper/SeeMoreButton.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, MutableRefObject, SetStateAction, useCallback } from 'react';
+import { Dispatch, MutableRefObject, ReactElement, SetStateAction, useCallback } from 'react';
 
 import { ColorUtils, styled } from '@nuskin/foundation-theme';
 
@@ -28,7 +28,7 @@ type SeeMoreButtonProps = {
     listboxRef: MutableRefObject<HTMLUListElement | null>;
 };
 
-export const SeeMoreButton = (props: SeeMoreButtonProps) => {
+export const SeeMoreButton = (props: SeeMoreButtonProps): ReactElement | null => {
     const {
         show = false,
         text = 'See More Results',

package/src/common/autocomplete/helper/renderGroupName.tsx

@@ -1,6 +1,7 @@
+import { ReactElement } from 'react';
+
 import { AutocompleteRenderGroupParams } from '@mui/material';
 import { styled } from '@nuskin/foundation-theme';
-import { ReactNode } from 'react';
 
 import { OptionsProps } from '../../autocomplete';
 import { NsTypography } from '../../typography';
@@ -8,7 +9,7 @@ import { NsTypography } from '../../typography';
 const GroupNameTypography = styled(NsTypography)`
     margin: 4px 8px;
 `;
-export const renderGroupName = ({ key, group, children }: AutocompleteRenderGroupParams):ReactNode => (
+export const renderGroupName = ({ key, group, children }: AutocompleteRenderGroupParams): ReactElement => (
     <li key={key}>
         {group ? (
             <GroupNameTypography variant="body-m" weight="bold" className="p-0 m-0 border-solid">
@@ -19,7 +20,7 @@ export const renderGroupName = ({ key, group, children }: AutocompleteRenderGrou
     </li>
 );
 
-export const renderOptionLabel = (option: string | OptionsProps) =>
+export const renderOptionLabel = (option: string | OptionsProps): string =>
     typeof option === 'string' ? option : option?.value ?? '';
 
 export const renderGroupBy = (option: OptionsProps) => (option?.group ?? '') as string;

package/src/common/autocomplete/stories/NsAutocomplete.stories.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
-
-import type { StoryObj, Meta } from '@storybook/react';
+import React, { ReactElement } from 'react';
 
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsAutocomplete } from '..';
-import { AutocompleteMockList } from '../mock/MockData';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { NsAutocomplete } from '../';
 import { NsIcon } from '../../icon';
-import { RenderAutoComplete } from './RenderAutoComplete';
+import { AutocompleteMockList } from '../mock/MockData';
 import { NoCloseAutoComplete } from './NoCloseAutoComplete';
+import { RenderAutoComplete } from './RenderAutoComplete';
 
 type ComponentType = typeof NsAutocomplete;
 type Story = StoryObj<ComponentType>;
@@ -61,10 +61,10 @@ export default {
                 throw new Error('Function not implemented.');
             },
         },
-        iconStart: <NsIcon name="search" />,
-        iconEnd: <NsIcon name="roundedClose" size="small" colorOverride="#F5F5F5" />,
+        iconStart: (<NsIcon name="search" />) as ReactElement,
+        iconEnd: (<NsIcon name="roundedClose" size="small" colorOverride="#F5F5F5" />) as ReactElement,
         placeholder: 'Search',
-        fullWidth:false
+        fullWidth: false,
     },
 } as MetaStory;
 

package/src/common/banner/NsBanner.spec.tsx

@@ -1,28 +1,28 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { NsBanner } from '@/common/';
+import { ImageData1 } from '../card/fixtures/ImageData1';
 
 describe('Hero component', () => {
     const childText = 'Welcome to My Website';
-    const imageURL = 'https://example.com/banner.jpg';
     it('1. renders banner image and title', () => {
         const { getByAltText, getByText } = render(
-            <NsBanner imageUrl={imageURL} altText="Banner image">
+            <NsBanner image={ImageData1}>
                 <h1>{childText}</h1>
             </NsBanner>
         );
         const childElement = getByText(childText);
-        const imageElement = getByAltText('Banner image');
+        const imageElement = getByAltText(ImageData1.selected?.altText || '');
         expect(childElement).toBeInTheDocument();
         expect(imageElement).toBeInTheDocument();
     });
     it('2. renders banner image and title without altText', () => {
         const { getByAltText } = render(
-            <NsBanner imageUrl={imageURL}>
+            <NsBanner image={ImageData1}>
                 <h1>{childText}</h1>
             </NsBanner>
         );
-        const imageElement = getByAltText('NsBanner');
+        const imageElement = getByAltText(ImageData1.selected?.altText || '');
         expect(imageElement).toBeInTheDocument();
     });
 });

package/src/common/banner/NsBanner.stories.tsx

@@ -4,10 +4,13 @@
  * @description NsBanner component.
  */
 
-import React from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { NsBanner, NsTypography, NsButton } from '../';
+import React, { ReactElement } from 'react';
+
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { NsBanner, NsButton, NsTypography } from '../';
+import { ImageData1 } from '../card/fixtures/ImageData1';
 
 type ComponentType = typeof NsBanner;
 type Story = StoryObj<ComponentType>;
@@ -23,7 +26,7 @@ export default {
         },
     },
     args: {
-        imageUrl: 'https://media.nuskin.com/m/e2f6d26058b2e7d/webimage-us-collagen-strawberry-hompage-banner.png',
+        image: ImageData1,
         altText: 'NsBanner',
         alignment: 'center',
         justify: 'start',
@@ -37,7 +40,7 @@ export default {
                 </NsTypography>
                 <NsButton variant="contained">Contact me</NsButton>
             </div>
-        ),
+        ) as ReactElement,
     },
 } as MetaStory;
 

package/src/common/banner/NsBanner.tsx

@@ -4,33 +4,23 @@
  * @description NsBanner component with a image background
  */
 
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, ReactElement } from 'react';
 
-import { NsBannerProps } from './types.d';
+import { getBasicDATWidthHeight } from '../image/bynder-util';
+import { BynderMedia } from '../image/BynderMedia';
 import { StyledBanner, StyledHeroText } from './NsBanner.styled';
-import { NsImage } from '../';
+import { NsBannerProps } from './types.d';
 
-/* TODO: once we have storybook 7, we can try converting this NsImage to NsNextImage */
-const NsBanner = (props: PropsWithChildren<NsBannerProps>) => {
-    const {
-        children,
-        imageUrl,
-        altText,
-        alignment = 'center',
-        justify = 'start',
-        className = '',
-        additionalProps = {},
-    } = props;
+const NsBanner = (props: PropsWithChildren<NsBannerProps>): ReactElement => {
+    const { children, image, alignment = 'center', justify = 'start', className = '', additionalProps = {} } = props;
 
     return (
         <StyledBanner className={className}>
-            <NsImage
-                src={imageUrl}
-                alt={altText || 'NsBanner'}
-                id="bgImage"
-                width={0}
-                height={0}
+            <BynderMedia
+                className="image"
+                imageDetail={image}
                 {...additionalProps}
+                suffix={getBasicDATWidthHeight(1100, 600, 'scale')}
             />
             <StyledHeroText $alignment={alignment} $justify={justify}>
                 <div className="mx-14">{children}</div>

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

@@ -1,13 +1,13 @@
 import React from 'react';
 
 import { AdditionalProps } from '../common.types';
+import { BynderImageDataType } from '../image/types';
 
 export type AlignmentType = 'start' | 'center' | 'end';
 
 export type NsBannerProps = {
     children: React.ReactNode;
-    imageUrl: string;
-    altText?: string;
+    image: BynderImageDataType;
     alignment?: AlignmentType;
     justify?: AlignmentType;
     className?: string;

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

@@ -1,4 +1,8 @@
-import React, { PropsWithChildren, useCallback } from 'react';
+import React, {
+    PropsWithChildren,
+    ReactElement,
+    useCallback,
+} from 'react';
 
 import NSLogoHorizontal from './icons/NSLogoHorizontal';
 import NSLogoMark from './icons/NSLogoMark';
@@ -6,7 +10,6 @@ import NSLogoPoweredBy from './icons/NSLogoPoweredBy';
 import NSLogoStacked from './icons/NSLogoStacked';
 import NSLogoWordMark from './icons/NSWordMark';
 import LogoContainer from './NsBrandContainer.styled';
-
 import { NsBrandComponentProps } from './types.d';
 
 const VariantMap = {
@@ -17,7 +20,7 @@ const VariantMap = {
     poweredBy: NSLogoPoweredBy,
 };
 
-const NsBrandComponent = (props: PropsWithChildren<NsBrandComponentProps>) => {
+const NsBrandComponent = (props: PropsWithChildren<NsBrandComponentProps>):ReactElement => {
     const { variant = 'stacked', size = '108px', color = 'primary' } = props;
     const renderBrand = useCallback(() => {
         const BrandComponent = VariantMap[variant];

package/src/common/brand-components/icons/NSLogoHorizontal.tsx

@@ -1,8 +1,13 @@
 /* eslint-disable max-len */
 
-import { SvgIconProps, SvgIcon } from '@mui/material'
+import { ReactElement } from 'react';
 
-const NSLogoHorizontal = (props: SvgIconProps) => {
+import {
+    SvgIcon,
+    SvgIconProps,
+} from '@mui/material';
+
+const NSLogoHorizontal = (props: SvgIconProps):ReactElement => {
     return (
         <SvgIcon
             viewBox="0 0 135 30"

package/src/common/brand-components/icons/NSLogoMark.tsx

@@ -1,7 +1,9 @@
+import { ReactElement } from 'react';
+
 /* eslint-disable max-len */
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 
-const NSLogoMark = (props: SvgIconProps) => {
+const NSLogoMark = (props: SvgIconProps):ReactElement => {
     return (
         <SvgIcon
             viewBox="0 0 51 52"

package/src/common/brand-components/icons/NSLogoPoweredBy.tsx

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

package/src/common/brand-components/icons/NSLogoStacked.tsx

@@ -1,7 +1,9 @@
+import { ReactElement } from 'react';
+
 /* eslint-disable max-len */
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 
-const NSLogoStacked = (props: SvgIconProps) => {
+const NSLogoStacked = (props: SvgIconProps):ReactElement => {
     return (
         <SvgIcon
             viewBox="0 0 155 108"

package/src/common/brand-components/icons/NSWordMark.tsx

@@ -1,7 +1,9 @@
+import { ReactElement } from 'react';
+
 /* eslint-disable max-len */
-import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 
-const NSLogoWordMark = (props: SvgIconProps) => {
+const NSLogoWordMark = (props: SvgIconProps):ReactElement => {
     return (
         <SvgIcon
             viewBox="0 0 98 20"