@nuskin/foundation-ui-components 1.0.0-cft-35.13 → 1.0.0-develop.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.0.0-cft-35.13",
+    "version": "1.0.0-develop.2",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "private": false,
     "main": "src/common/index.ts",

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent, screen, act } from '../../../test-utils';
+import { render, fireEvent, screen, act } from '@/test-utils/index';
 // import { act } from 'react-dom/test-utils';
 import NsAlert from './NsAlert';
 
@@ -67,34 +67,35 @@ describe('NsAlert', () => {
 
     test('adds and removes event listener on mount/unmount', () => {
         act(() => {
-            render(<NsAlert 
-                context="notice"
-                title="Success Alert"
-                threshhold={700}
-                type="card"
-                visible={false}
-                head={<span>Alert Head</span>}
-                body={<p>Alert Body</p>}
-            />);
+            render(
+                <NsAlert
+                    context="notice"
+                    title="Success Alert"
+                    threshhold={700}
+                    type="card"
+                    visible={false}
+                    head={<span>Alert Head</span>}
+                    body={<p>Alert Body</p>}
+                />
+            );
         });
-    
+
         expect(addEventListenerMock).toHaveBeenCalledWith('resize', expect.any(Function));
-    
-    
+
         expect(removeEventListenerMock).toHaveBeenCalledWith('resize', expect.any(Function));
     });
 
     test('updates windowWidth on resize', () => {
         const originalInnerWidth = window.innerWidth;
         window.innerWidth = 500; // Set a desired window width for testing
-    
+
         act(() => {
             render(<NsAlert />);
         });
-    
+
         // Simulate a resize event by restoring the original innerWidth
         window.innerWidth = originalInnerWidth;
-    
+
         act(() => {
             window.dispatchEvent(new Event('resize'));
         });

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

@@ -29,12 +29,12 @@ export default {
         visible: true,
         onDismiss: () => {},
         body:
-        <p>{`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+        <span>{`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
           laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
           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.`}</p>,
+          qui officia deserunt mollit anim id est laborum.`}</span>,
         foot: <span>Some message goes here.</span>
     }
 } as MetaStory;

package/src/common/alert/NsAlert.styled.ts

@@ -3,40 +3,40 @@ import { styled, css } from '@nuskin/foundation-theme';
 import { getAppColor } from '@nuskin/foundation-theme/src/utils/color-utils';
 import { FoundationTheme } from '@nuskin/foundation-theme/src/themes';
 
-import type { AlertContainerParams, AlertType, AlertParams, TypeMapCSS } from './types';
-const gutter_width=  '10px';
+import type { AlertContainerParams, AlertType, AlertParams, TypeMapCSS } from './types.d';
+const gutter_width = '10px';
 const close_button_width = '12px';
 const icon_width = '24px';
 
 const TypeMap: TypeMapCSS = {
     banner: {
-        'min-height' : '114px',
-        'padding' : '15px 45px',
+        'min-height': '114px',
+        padding: '15px 45px',
         'content-column-start': 'row-center',
         'content-column-end': 'row-center',
         'bar-position': 'top',
-        'foot-visibility': 'block'
+        'foot-visibility': 'block',
     },
     card: {
-        'min-height' : '72px',
-        'padding' : '24px 24px',
+        'min-height': '72px',
+        padding: '24px 24px',
         'content-column-start': 'row-left',
         'content-column-end': 'row-right',
         'bar-position': 'left',
         'foot-display': 'none',
-    }
-}
+    },
+};
 
 const contextType = {
     error: 'red',
     info: 'info',
     notice: 'info',
     success: 'success',
-    warning: 'warning'
-}
+    warning: 'warning',
+};
 
 export const AlertContainer = styled.div<AlertContainerParams>`
-    display: ${({ visible }) => visible ? 'block' : 'none'};
+    display: ${({ visible }) => (visible ? 'block' : 'none')};
     * {
         box-sizing: border-box;
         webkit-font-smoothing: antialiased;
@@ -45,9 +45,9 @@ export const AlertContainer = styled.div<AlertContainerParams>`
 `;
 
 const fontFamilyStyles = css`
-  font-family: "proxima-nova", "OpenSans", "Pridi", "NotoSans", "NotoSansSC", "NotoSansHebrew",
-    "NotoSansJapanese", "Hiragino Kaku Gothic Pro", "Yu Gothic Medium", "Yu Gothic", Meiryo, "source-han-sans-japanese",
-    "source-han-sans-korean", "source-han-sans-simplified-c", Helvetica, Arial, sans-serif;
+    font-family: 'proxima-nova', 'OpenSans', 'Pridi', 'NotoSans', 'NotoSansSC', 'NotoSansHebrew', 'NotoSansJapanese',
+        'Hiragino Kaku Gothic Pro', 'Yu Gothic Medium', 'Yu Gothic', Meiryo, 'source-han-sans-japanese',
+        'source-han-sans-korean', 'source-han-sans-simplified-c', Helvetica, Arial, sans-serif;
 `;
 
 export const Alert = styled.div<AlertParams>`
@@ -99,16 +99,16 @@ export const AlertHead = styled.div`
     }
 `;
 
-export const AlertContent = styled.div<{type: AlertType}>`
+export const AlertContent = styled.div<{ type: AlertType }>`
     margin-top: 8px;
     color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
-    grid-column-start: ${({ type }) => TypeMap?.[type]?.['content-column-start']}; 
+    grid-column-start: ${({ type }) => TypeMap?.[type]?.['content-column-start']};
     grid-column-end: ${({ type }) => TypeMap?.[type]?.['content-column-end']};
 `;
 
-export const AlertFoot = styled.div<{type: AlertType}>`
+export const AlertFoot = styled.div<{ type: AlertType }>`
     margin-top: 8px;
-    color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};;
+    color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
     display: ${({ type }) => TypeMap?.[type]?.['foot-display']};
     ${fontFamilyStyles}
     font-weight: 300;
@@ -121,4 +121,4 @@ export const AlertBody = styled.div`
     font-weight: 300;
     font-size: 16px;
     line-height: 21px;
-`;
+`;

package/src/common/alert/NsAlert.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/require-default-props */
 import React, { useEffect, useState } from 'react';
-import { 
+import {
     AlertContainer,
     Alert,
     AlertIcon,
@@ -8,11 +8,11 @@ import {
     AlertCloseButton,
     AlertContent,
     AlertFoot,
-    AlertBody
-} from './NsAlert.styled'
-import type { NsAlertProps, HeaderProps, ContextType, AlertType } from './types';
+    AlertBody,
+} from './NsAlert.styled';
+import type { NsAlertProps, HeaderProps, ContextType, AlertType } from './types.d';
 import { NsIcon } from '../icon';
-import { NsIconNameType } from '../icon/types'
+import { NsIconNameType } from '../icon/types';
 import { FoundationTheme } from '@nuskin/foundation-theme/src/themes';
 
 const Header: React.FC<HeaderProps> = ({ children, head }) => (
@@ -26,11 +26,11 @@ function isValidContextValue(value: string): boolean {
     return (value as ContextType) !== undefined;
 }
 
-function isValidTypeValue(value: string):boolean {
+function isValidTypeValue(value: string): boolean {
     return (value as AlertType) !== undefined;
 }
 
-const colorMap:{ [key: string]: FoundationTheme.PaletteColors } = {
+const colorMap: { [key: string]: FoundationTheme.PaletteColors } = {
     error: 'error',
     notice: 'info',
     success: 'secondary',
@@ -38,7 +38,7 @@ const colorMap:{ [key: string]: FoundationTheme.PaletteColors } = {
     default: 'info',
 };
 
-const iconMap:{ [key: string]: NsIconNameType } = {
+const iconMap: { [key: string]: NsIconNameType } = {
     error: 'alertError',
     success: 'success',
     warning: 'warning',
@@ -54,7 +54,7 @@ export default function NsAlert({
     head,
     body,
     foot,
-    onDismiss = undefined
+    onDismiss = undefined,
 }: NsAlertProps) {
     const [alertType, setAlertType] = useState('banner');
     const [windowWidth, setWindowWidth] = useState(window.innerWidth);
@@ -86,14 +86,14 @@ export default function NsAlert({
     };
 
     useEffect(() => {
-        let aType = ''
+        let aType = '';
         if (type === 'auto') {
             aType = windowWidth < threshhold ? 'card' : 'banner';
         } else {
             aType = type;
         }
-        setAlertType(aType)
-    }, [threshhold, type, windowWidth])
+        setAlertType(aType);
+    }, [threshhold, type, windowWidth]);
 
     useEffect(() => {
         if (!isValidContextValue(context)) {
@@ -116,38 +116,19 @@ export default function NsAlert({
         <AlertContainer visible={visible} data-testid="alert-container">
             <Alert type={alertType as AlertType} context={context as ContextType}>
                 <AlertIcon>
-                    <NsIcon
-                        name={getIcon()}
-                        color={getColor()}
-                        size="large"
-                    />
+                    <NsIcon name={getIcon()} color={getColor()} size="large" />
                 </AlertIcon>
                 <AlertHead>
-                    <Header head={<span>{getTitleText()}</span>}>
-                        {head}
-                    </Header>
+                    <Header head={<span>{getTitleText()}</span>}>{head}</Header>
                 </AlertHead>
-                {
-                    hasDismissListener ? (
-                        <AlertCloseButton data-testid="alert-close-button" onClick={handleDismiss}>
-                            <NsIcon
-                                name='close'
-                                size='small'
-                            />
-                        </AlertCloseButton>
-                    ) : null
-                }
+                {hasDismissListener ? (
+                    <AlertCloseButton data-testid="alert-close-button" onClick={handleDismiss}>
+                        <NsIcon name="close" size="small" />
+                    </AlertCloseButton>
+                ) : null}
                 <AlertContent type={alertType as AlertType}>
-                    <AlertBody>
-                        {body}
-                    </AlertBody>
-                    {
-                        foot ?  (
-                            <AlertFoot type={alertType as AlertType}>
-                                {foot}
-                            </AlertFoot>
-                        ) : null
-                    }
+                    <AlertBody>{body}</AlertBody>
+                    {foot ? <AlertFoot type={alertType as AlertType}>{foot}</AlertFoot> : null}
                 </AlertContent>
             </Alert>
         </AlertContainer>

package/src/common/alert/index.ts

@@ -1,2 +1,2 @@
-export { default as  NsAlert} from './NsAlert';
-export type { NsAlertProps } from './types';
+export { default as NsAlert } from './NsAlert';
+export type { NsAlertProps } from './types.d';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent, screen } from '../../../test-utils';
+import { render, fireEvent, screen } from '@/test-utils/index';
 import { NsAuthDropdown } from './';
 
 describe('NsAuthDropdown', () => {

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

@@ -10,7 +10,7 @@ import {
     SignUpLinkContainer,
     SignUpLink,
 } from './NsAuthDropdown.styled';
-import { NsAuthDropdownProps } from './types';
+import { NsAuthDropdownProps } from './types.d';
 
 const NsAuthDropdown = ({
     signInRedirectLink,

package/src/common/auth-dropdown/index.ts

@@ -1,2 +1,2 @@
 export { default as NsAuthDropdown } from './NsAuthDropdown';
-export type { NsAuthDropdownProps } from './types';
+export type { NsAuthDropdownProps } from './types.d';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
-import { NsAutocomplete } from './';
+import { NsAutocomplete } from '@/common/index';
 import { OptionUiComponent } from './mock/MockUI';
 import { AutocompleteMockList } from './mock/MockData';
 import userEvent from '@testing-library/user-event';
@@ -34,7 +34,7 @@ describe('CustomAutocomplete', () => {
             const option1 = screen.getByText('GS Facial Gels 2pk Subscription');
             expect(option1).toBeInTheDocument();
         });
-    });
+    }, 40000);
 
     test('selects an option when clicking on it', async () => {
         render(
@@ -50,7 +50,7 @@ describe('CustomAutocomplete', () => {
             const optionLi = screen.getByText('GS Facial Spa');
             userEvent.click(optionLi);
         });
-    });
+    }, 40000);
 
     test('should load more options when clicking load more button', async () => {
         render(
@@ -71,7 +71,7 @@ describe('CustomAutocomplete', () => {
             const loadMoreButton = screen.getByTestId('autocomplete-loadmore-id');
             userEvent.click(loadMoreButton);
         });
-    });
+    }, 40000);
 
     test('should clear options when clicking clear button', async () => {
         render(
@@ -92,5 +92,5 @@ describe('CustomAutocomplete', () => {
             const clearButton = screen.getByTestId('autocomplete-clear-id');
             userEvent.click(clearButton);
         });
-    });
+    }, 40000);
 });

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

@@ -11,7 +11,7 @@ import { withCenterDecorator } from '../../stories/decorators/withCenterDecorato
 import { NsAutocomplete } from './';
 import { AutocompleteMockList } from './mock/MockData';
 import { OptionUiComponent } from './mock/MockUI';
-import { NsAutocompleteProps } from './types';
+import { NsAutocompleteProps } from './types.d';
 
 type ComponentType = typeof NsAutocomplete;
 type Story = StoryObj<ComponentType>;

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -3,7 +3,7 @@ import { NsInputField } from '../input';
 import { Autocomplete, AutocompleteRenderGroupParams, List, AutocompleteRenderInputParams } from '@mui/material';
 import { useState, PropsWithChildren, useRef } from 'react';
 import { NsTypography } from '../typography';
-import { NsAutocompleteProps, OptionsProps, ComponentboxProps } from './types';
+import { NsAutocompleteProps, OptionsProps, ComponentboxProps } from './types.d';
 import { NsButton } from '../button';
 
 const NsAutocomplete = ({

package/src/common/autocomplete/index.ts

@@ -1 +1,2 @@
-export { default as NsAutocomplete } from './NsAutocomplete';
+export { default as NsAutocomplete } from './NsAutocomplete';
+export * from './types.d';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { NsBanner } from './';
+import { NsBanner } from '@/common/';
 
 describe('Hero component', () => {
     it('renders banner image and title', () => {

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

@@ -1,5 +1,5 @@
 import { styled } from '@nuskin/foundation-theme';
-import { AlignmentType } from './types';
+import { AlignmentType } from './types.d';
 
 export const StyledBanner = styled.section`
     position: relative;

package/src/common/banner/NsBanner.tsx

@@ -6,7 +6,7 @@
 
 import React, { PropsWithChildren } from 'react';
 
-import { NsBannerProps } from './types';
+import { NsBannerProps } from './types.d';
 import { StyledBanner, StyledHeroText } from './NsBanner.styled';
 import { NsImage } from '../';
 

package/src/common/banner/index.ts

@@ -1,2 +1,2 @@
 export { default as NsBanner } from './NsBanner';
-export type { NsBannerProps } from './types';
+export type { NsBannerProps } from './types.d';

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

@@ -5,7 +5,7 @@ import NSLogoPoweredBy from './icons/NSLogoPoweredBy';
 import NSLogoStacked from './icons/NSLogoStacked';
 import NSLogoWordMark from './icons/NSWordMark';
 import LogoContainer from './NsBrandContanier.styled';
-import { NsBrandComponentProps } from './types';
+import { NsBrandComponentProps } from './types.d';
 
 const VariantMap = {
     stacked: NSLogoStacked,

package/src/common/brand-components/index.ts

@@ -1,2 +1,2 @@
 export { default as NsBrandComponent } from './NsBrandComponent';
-export type { NsBrandComponentProps } from './types';
+export type { NsBrandComponentProps } from './types.d';

package/src/common/breadcrumb/NsBreadcrumb.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { NsBreadcrumb } from './';
-import { ItemProps } from './types';
+import { ItemProps } from './types.d';
 const { getByText } = screen;
 export const breadcrumbItems: ItemProps[] = [
     { label: 'Home', href: '/', icon: 'home' },

package/src/common/breadcrumb/NsBreadcrumb.tsx

@@ -8,7 +8,7 @@ import { PropsWithChildren } from 'react';
 
 import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbList } from './NsBreadcrumb.styled';
 import { NsTypography, NsLink, NsIcon } from '../';
-import { NsBreadcrumbProps, ItemProps } from './types';
+import { NsBreadcrumbProps, ItemProps } from './types.d';
 import { useTheme } from '@mui/material/styles';
 import { ColorUtils } from '@nuskin/foundation-theme';
 

package/src/common/breadcrumb/index.ts

@@ -1,2 +1,2 @@
 export { default as NsBreadcrumb } from './NsBreadcrumb';
-export type { NsBreadcrumbProps } from './types';
+export type { NsBreadcrumbProps } from './types.d';

package/src/common/button/NsButton.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '../../../test-utils/index';
+import { render, screen } from '@/test-utils/index';
 import nuskinTheme from '@nuskin/foundation-theme/src/themes/genome-foundation';
 import Button from './NsButton';
 

package/src/common/button/NsButton.styled.tsx

@@ -2,12 +2,9 @@ import { Button as MUIButton } from '@mui/material';
 
 import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
 import { ButtonConfig } from '@nuskin/foundation-theme/src/themes/types/button';
-import { NsButtonProps } from './types';
+import { NsButtonProps } from './types.d';
 
-const {
-    getPaletteColor,
-    getButtonStateColor,
-} = ColorUtils;
+const { getPaletteColor, getButtonStateColor } = ColorUtils;
 
 const getButtonConfig = (theme: FoundationTheme.Theme, attribute: keyof ButtonConfig) => {
     const { config } = theme || {};
@@ -16,23 +13,23 @@ const getButtonConfig = (theme: FoundationTheme.Theme, attribute: keyof ButtonCo
 
 const StyledButton = styled(MUIButton)<NsButtonProps>`
     gap: 10px;
-    border-radius: ${({ theme}) => getButtonConfig(theme, 'borderRadius')} || 0;
+    border-radius: ${({ theme }) => getButtonConfig(theme, 'borderRadius')} || 0;
     :focus {
-        border: 1px solid  ${({ theme}) => getButtonConfig(theme, 'focusColor')} !important;
+        border: 1px solid ${({ theme }) => getButtonConfig(theme, 'focusColor')} !important;
     }
     :disabled {
         background-color: ${({ theme, color }) => getButtonStateColor(theme, color, 'disabled')};
         color: ${({ theme, color }) => getButtonStateColor(theme, color, 'disabledText')};
     }
     ${({ theme: { config }, size }) => {
-        return size === 'medium' ? config?.components?.button?.size?.medium?.padding : ''
+        return size === 'medium' ? config?.components?.button?.size?.medium?.padding : '';
     }}
-    ${({ theme: { config}, size }) => {
-        return size === 'large' ? config?.components?.button?.size?.large?.padding : ''
+    ${({ theme: { config }, size }) => {
+        return size === 'large' ? config?.components?.button?.size?.large?.padding : '';
     }}
     ${({ variant, theme, color = 'primary' }) => {
-        return variant === 'contained' ?
-            `
+        return variant === 'contained'
+            ? `
                 background-color: ${getPaletteColor(theme, color)};
                 :hover {
                     background-color: ${getButtonStateColor(theme, color, 'hovered')};
@@ -44,7 +41,7 @@ const StyledButton = styled(MUIButton)<NsButtonProps>`
                     background-color: ${getButtonStateColor(theme, color, 'focused')};
                 }
             `
-            : ''
+            : '';
     }}
   ${({ variant, theme, color = 'primary' }) =>
         variant === 'outlined' &&

package/src/common/button/NsButton.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import StyledButton from './NsButton.styled';
-import { NsButtonProps } from './types';
+import { NsButtonProps } from './types.d';
 
 const NsButton = ({ children, ...props }: PropsWithChildren<NsButtonProps>) => {
     return (

package/src/common/button/index.ts

@@ -1,2 +1,2 @@
 export { default as NsButton } from './NsButton';
-export type { NsButtonProps } from './types';
+export type { NsButtonProps } from './types.d';

package/src/common/card/NsFfgCard.tsx

@@ -1,6 +1,6 @@
 import { NsNextImage, NsLink } from '../';
 import { NsFfgStyled } from './styled/NsFfgStyled';
-import { NsFfgCardProps } from './types';
+import { NsFfgCardProps } from './types.d';
 
 const NsFfgCard = ({ actionText, actionLink, text, topImageUrl, topImageAlt, additionalProps }: NsFfgCardProps) => {
     return (

package/src/common/carousal/NsScrollingCarousal.tsx

@@ -0,0 +1,37 @@
+import React, { useMemo } from 'react';
+import Slider from 'react-slick';
+import { NsScrollingCarousalProps } from '../';
+
+const NsScrollingCarousal = ({
+    slides,
+    scrollSeconds,
+    stillSeconds,
+    renderSlide,
+    settings,
+    additionalProps,
+}: NsScrollingCarousalProps) => {
+    const defaultSettings = useMemo(() => {
+        return {
+            ...settings,
+            autoplay: true,
+            autoplaySpeed: stillSeconds * 1000 || 2000, // autoplaySpeed = delay between scroll in milliseconds
+            accessibility: true,
+            adaptiveHeight: true,
+            arrows: true,
+            draggable: true,
+            dots: true,
+            infinite: true,
+            speed: scrollSeconds * 1000 || 500, // speed = animation speed in milliseconds
+            slidesToShow: 1,
+            slidesToScroll: 1,
+            swipeToSlide: true,
+        };
+    }, [stillSeconds, scrollSeconds, settings]);
+    return (
+        <div data-testid={additionalProps?.testid ?? 'scrolling-carousal-test-id'}>
+            <Slider {...defaultSettings}>{slides.map(renderSlide)}</Slider>
+        </div>
+    );
+};
+
+export default NsScrollingCarousal;

package/src/common/carousal/index.ts

@@ -1,2 +1,5 @@
 export { default as NsCarousal } from './NsCarousal';
+export { default as NsScrollingCarousal } from './NsScrollingCarousal';
 export { default as NsDefaultCarousalSettings } from './slickSetting';
+
+export type { NsCarousalProps, NsScrollingCarousalProps } from './types.d';

package/src/common/carousal/stories/NSCarousal.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { NsCarousal } from '../';
+import { NsCarousal } from '@/common/';
 import { brandEntries } from '../../card/stories/data';
 import { RenderBrand } from '../RenderBrand';
 import settings from '../slickSetting';