@nuskin/foundation-ui-components 1.29.1 → 1.30.0

package/src/common/column-control/stories/NsColumnControl.stories.tsx

@@ -1,8 +1,11 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { ReactElement } from 'react';
+
 import { NsColumnControl } from '@/common/index';
-import { DivArray } from './DivArray';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { childrenMapping, selectDivOptions } from './common';
+import { DivArray } from './DivArray';
 
 type ComponentType = typeof NsColumnControl;
 type Story = StoryObj<ComponentType>;
@@ -22,13 +25,13 @@ export default {
                 type: 'select',
                 options: selectDivOptions,
             },
-            defaultValue: <DivArray elementsCount={8} />,
+            defaultValue: (<DivArray elementsCount={8} />) as ReactElement,
             mapping: childrenMapping,
         },
     },
     args: {
         columnClass: 'ns-col-lg-1-1-1 ns-col-md-1-1 ns-col-sm-1',
-        children: <DivArray elementsCount={12} />,
+        children: (<DivArray elementsCount={12} />) as ReactElement,
     },
 } as MetaStory;
 

package/src/common/column-control/stories/NsFlexColumns.stories.tsx

@@ -1,8 +1,11 @@
-import type { StoryObj, Meta } from '@storybook/react';
+import { ReactElement } from 'react';
+
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsFlexColumns } from '..';
-import { DivArray, DivArrayRandom } from './DivArray';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { NsFlexColumns } from '../';
 import { childrenMapping, selectDivOptions } from './common';
+import { DivArray, DivArrayRandom } from './DivArray';
 
 type ComponentType = typeof NsFlexColumns;
 type Story = StoryObj<ComponentType>;
@@ -26,19 +29,19 @@ export default {
                 type: 'select',
                 options: selectDivOptions,
             },
-            defaultValue: <DivArrayRandom elementsCount={8} />,
+            defaultValue: (<DivArrayRandom elementsCount={8} />) as ReactElement,
             mapping: childrenMapping,
         },
     },
     args: {
         columnClass: '',
-        children: <DivArrayRandom elementsCount={12} />,
+        children: (<DivArrayRandom elementsCount={12} />) as ReactElement,
     },
 } as MetaStory;
 
 export const DefaultColumnControl: Story = {
     args: {
-        children: <DivArray elementsCount={8} />,
+        children: (<DivArray elementsCount={8} />) as ReactElement,
     },
 };
 export const TwoColumn11: Story = {

package/src/common/column-control/stories/NsGridColumns.stories.tsx

@@ -1,8 +1,20 @@
-import type { StoryObj, Meta } from '@storybook/react';
+import { ReactElement } from 'react';
+
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsGridColumns } from '..';
-import { DivArray, DivArrayRandom } from './DivArray';
-import { childrenMapping, selectDivOptions } from './common';
+import type {
+    Meta,
+    StoryObj,
+} from '@storybook/react';
+
+import { NsGridColumns } from '../';
+import {
+    childrenMapping,
+    selectDivOptions,
+} from './common';
+import {
+    DivArray,
+    DivArrayRandom,
+} from './DivArray';
 
 type ComponentType = typeof NsGridColumns;
 type Story = StoryObj<ComponentType>;
@@ -26,19 +38,19 @@ export default {
                 type: 'select',
                 options: selectDivOptions,
             },
-            defaultValue: <DivArrayRandom elementsCount={8} />,
+            defaultValue: (<DivArrayRandom elementsCount={8} />) as ReactElement,
             mapping: childrenMapping,
         },
     },
     args: {
         columnClass: '',
-        children: <DivArrayRandom elementsCount={12} />,
+        children: (<DivArrayRandom elementsCount={12} />) as ReactElement,
     },
 } as MetaStory;
 
 export const DefaultColumnControl: Story = {
     args: {
-        children: <DivArray elementsCount={8} />,
+        children: (<DivArray elementsCount={8} />) as ReactElement,
     },
 };
 export const TwoColumn11: Story = {

package/src/common/column-control/styled/common.ts

@@ -20,7 +20,7 @@ export const commonStyles = {
    ['1','1'] => ['40%','40%']
    ['1','2'] => ['27%','53%']
  */
-export function getPercentArray(fractionArray?: string[] | number[]) {
+export function getPercentArray(fractionArray?: string[] | number[]): string[] {
     const numbers = fractionArray?.map((numberString) => +numberString)?.filter((num) => 0 < num && num < 10) ?? [];
     const sum = numbers.reduce((currentSum, currentNumber) => currentSum + currentNumber, 0);
     return numbers.map((currentNumber) => ((currentNumber / sum) * 80).toFixed(2) + '%');

package/src/common/dropdown/NsDropdown.tsx

@@ -1,15 +1,15 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { ReactElement, useCallback, useRef, useState } from 'react';
 
+import { useOnClickOutside } from '../hooks/useOnClickOutside';
+import { NsIcon } from '../icon';
 import {
-    DropdownContainer,
     DropdownButton,
-    DropdownList,
+    DropdownContainer,
     DropdownHead,
+    DropdownList,
     DropdownOptionContainer,
 } from './NsDropdown.styled';
-import { NsIcon } from '../icon';
 import { DropdownProps } from './types.d';
-import { useOnClickOutside } from '../hooks/useOnClickOutside';
 
 const NsDropdown: React.FC<DropdownProps> = ({
     selectedLabel,
@@ -21,7 +21,7 @@ const NsDropdown: React.FC<DropdownProps> = ({
     closeOnMouseLeave = false,
     className,
     placeholder,
-}) => {
+}): ReactElement => {
     const [isOpen, setIsOpen] = useState(false);
     const dropdownRef = useRef<HTMLDivElement | null>(null);
 

package/src/common/dropdown/NsDropdownOption.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import { DropdownOptionProps } from './types.d';
+import React, { ReactElement } from 'react';
+
 import { ListItem } from './NsDropdown.styled';
+import { DropdownOptionProps } from './types.d';
 
-export const NsDropdownOption: React.FC<DropdownOptionProps> = ({ value, children }) => {
+export const NsDropdownOption: React.FC<DropdownOptionProps> = ({ value, children }): ReactElement => {
     return (
         <ListItem data-testid={`option-${value}`} id="dropdown-item">
             {children}

package/src/common/dropdown/stories/NsDropdown.stories.tsx

@@ -1,7 +1,9 @@
-import React, { useState } from 'react';
+import React, { ReactElement, useState } from 'react';
+
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import type { Meta, StoryObj } from '@storybook/react';
+
 import { NsDropdown, NsDropdownOption } from '../';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsDropdown;
 type Story = StoryObj<ComponentType>;
@@ -38,7 +40,7 @@ export default {
     },
 } as MetaStory;
 
-const RenderStory = (args: any, context: any) => {
+const RenderStory = (args: any, context: any): ReactElement => {
     const [selectedLabel, setSelectedLabel] = useState(args.selectedLabel);
 
     const options = context.parameters.options;

package/src/common/email-simple/NsEmailSimple.tsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
-import { NsEmailSimpleProps } from './types';
+import React, { ReactElement, useState } from 'react';
+
 import { NsInputField } from '../input';
 import { fieldStateType } from '../input/types';
 import { emailPattern } from '../validations/regex';
+import { NsEmailSimpleProps } from './types';
 
-const NsEmailSimple = (props: NsEmailSimpleProps) => {
+const NsEmailSimple = (props: NsEmailSimpleProps): ReactElement => {
     const {
         disabled,
         label,

package/src/common/flag/NsFlag.tsx

@@ -4,11 +4,12 @@
  * @description NsFlag component with a themed background
  */
 
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, ReactElement } from 'react';
+
 import { StyledFlag } from './NsFlag.styled';
 import { NsFlagProps } from './types.d';
 
-const NsFlag = (props: PropsWithChildren<NsFlagProps>) => {
+const NsFlag = (props: PropsWithChildren<NsFlagProps>): ReactElement | null => {
     const { className = '', size = 'small', color = 'accentColorA', message, testId = 'ns-flag-component' } = props;
     if (!message) {
         return null;

package/src/common/hooks/useAccordionMap.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 type ItemMap = Record<string, boolean>;
 type UseAccordionProp = {

package/src/common/icon/NsIcon.tsx

@@ -5,10 +5,7 @@ import { ColorUtils } from '@nuskin/foundation-theme';
 
 import { IconWrapper } from './NsIcon.styled';
 import IconVariants from './NsIconVariants';
-import {
-    NsIconNameType,
-    NsIconProps,
-} from './types.d';
+import { NsIconNameType, NsIconProps } from './types.d';
 
 const { paletteColor } = ColorUtils;
 
@@ -22,7 +19,7 @@ const NsIcon = ({
     onClick = () => {},
     cursor = 'pointer',
     ...rest
-}: NsIconProps): ReactElement|null => {
+}: NsIconProps): ReactElement | null => {
     const Icon = IconVariants[name as NsIconNameType];
     const theme = useTheme();
     const iconColor = paletteColor(color)({ theme });

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

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 /* eslint-disable max-len */
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 
@@ -6,7 +8,7 @@ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
  * @param props { fill: color to be filled for icon, color: color of the tick icon}
  * @returns ErrorIcon, can be used in Input field, when input field is in error state
  */
-const AlertErrorIcon = (props: SvgIconProps) => {
+const AlertErrorIcon = (props: SvgIconProps):ReactElement => {
     return (
         <SvgIcon
             width="20"

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

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

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

@@ -1,6 +1,11 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
+import { ReactElement } from 'react';
 
-const ArrowLeft = (props: SvgIconProps) => {
+import {
+    SvgIcon,
+    SvgIconProps,
+} from '@mui/material';
+
+const ArrowLeft = (props: SvgIconProps):ReactElement => {
     return (
         <SvgIcon
             data-testid="arrowLeft"

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

@@ -1,6 +1,11 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
+import { ReactElement } from 'react';
 
-export const ArrowRight = (props: SvgIconProps) => {
+import {
+    SvgIcon,
+    SvgIconProps,
+} from '@mui/material';
+
+export const ArrowRight = (props: SvgIconProps):ReactElement => {
     return (
         <SvgIcon
             {...props}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,12 +1,17 @@
-import { SvgIcon, SvgIconProps } from '@mui/material';
+import { ReactElement } from 'react';
 
-export const ChevronRight = (props: SvgIconProps) => {
+import {
+    SvgIcon,
+    SvgIconProps,
+} from '@mui/material';
+
+export const ChevronRight = (props: SvgIconProps):ReactElement => {
     return (
         <SvgIcon
             {...props}
             data-testid="chevronRight"
-            viewBox="0 0 18 18" 
-            fill="none" 
+            viewBox="0 0 18 18"
+            fill="none"
             xmlns="http://www.w3.org/2000/svg"
         >
             <g id="arrow-right">

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

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

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

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 /* eslint-disable max-len */
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 
@@ -6,7 +8,7 @@ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
  * @param props { color: color to be filled for icon}
  * @returns ErrorIcon, can be used in Input field, when input field is in error state
  */
-const ErrorIcon = (props: SvgIconProps) => {
+const ErrorIcon = (props: SvgIconProps):ReactElement => {
     return (
         <SvgIcon
             width="20"

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

@@ -1,10 +1,13 @@
+import { ReactElement } from 'react';
+
 /* eslint-disable max-len */
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
 /**
  *
  * @param props {stroke}
  */
-const HamburgerIcon = (props: SvgIconProps) => {
+const HamburgerIcon = (props: SvgIconProps): ReactElement => {
     return (
         <SvgIcon viewBox="0 0 24 18" {...props} data-testid="hamburgerIcon" xmlns="http://www.w3.org/2000/svg">
             <path

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

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

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

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

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

@@ -1,9 +1,14 @@
+import { ReactElement } from 'react';
+
 /* figma link:
    https://www.figma.com/file/PYBXZQL5mleej9AlspDSuI/Equinox-Designs?type=design&node-id=82-1276&mode=design&t=k8Kqtpp3QmkKcOlT-4
 */
-import { SvgIcon, SvgIconProps } from '@mui/material';
+import {
+    SvgIcon,
+    SvgIconProps,
+} from '@mui/material';
 
-const RoundedClose = (props: SvgIconProps) => {
+const RoundedClose = (props: SvgIconProps): ReactElement => {
     return (
         <SvgIcon
             width="25"

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

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 /* eslint-disable max-len */
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 
@@ -6,7 +8,7 @@ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
  * @param props {fill: color to be filled for icon, color: color of the tick icon}
  * @returns SearchIcon, can be used in Input field, when input field is in success state
  */
-const SearchIcon = (props: SvgIconProps) => {
+const SearchIcon = (props: SvgIconProps): ReactElement=> {
     return (
         <SvgIcon
             width="24"

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

@@ -1,6 +1,11 @@
-import { SvgIconProps, SvgIcon } from '@mui/material';
+import { ReactElement } from 'react';
 
-const SlashIcon = (props: SvgIconProps) => {
+import {
+    SvgIcon,
+    SvgIconProps,
+} from '@mui/material';
+
+const SlashIcon = (props: SvgIconProps): ReactElement => {
     return (
         <SvgIcon viewBox="0 0 2 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} data-testid="slash">
             <path

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

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 /* eslint-disable max-len */
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 
@@ -6,7 +8,7 @@ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
  * @param props
  * @returns
  */
-const SuccessIcon = (props: SvgIconProps) => {
+const SuccessIcon = (props: SvgIconProps): ReactElement => {
     return (
         <SvgIcon
             width="20"

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

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 /* eslint-disable max-len */
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 
@@ -6,7 +8,7 @@ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
  * @param props {fill: color of the trash icon}
  * @returns returns TrashIcon, used for marking delete symbol
  */
-const TrashIcon = (props: SvgIconProps) => {
+const TrashIcon = (props: SvgIconProps): ReactElement => {
     return (
         <SvgIcon
             width="20"

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

@@ -1,10 +1,13 @@
+import { ReactElement } from 'react';
+
 /* eslint-disable max-len */
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
 /**
  *
  * @param props {fill: color to be filled for icon, color: color of the tick icon}
  */
-const UserIcon = (props: SvgIconProps) => {
+const UserIcon = (props: SvgIconProps): ReactElement => {
     return (
         <SvgIcon
             viewBox="0 0 24 24"

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

@@ -1,10 +1,12 @@
+import { ReactElement } from 'react';
+
 /* eslint-disable max-len */
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 
 /**
  *  * pass colorOverride = '#272525'
  */
-function UserOutline(props: SvgIconProps) {
+function UserOutline(props: SvgIconProps): ReactElement {
     return (
         <SvgIcon
             data-testid="userOutline"

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

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 /* eslint-disable max-len */
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 
@@ -6,7 +8,7 @@ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
  * @param props { fill: color to be filled for icon, color: color of the tick icon}
  * @returns ErrorIcon, can be used in Input field, when input field is in error state
  */
-const WarningIcon = (props: SvgIconProps) => {
+const WarningIcon = (props: SvgIconProps): ReactElement => {
     return (
         <SvgIcon
             width="20"