@nuskin/foundation-ui-components 1.6.1 → 1.8.0-688-v1.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.6.1",
+    "version": "1.8.0-688-v1.1",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {
@@ -42,62 +42,62 @@
     "dependencies": {
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
-        "@mui/icons-material": "^5.11.11",
-        "@mui/material": "5.4.2",
-        "@mui/utils": "^5.14.1",
-        "@next/font": "13.2.4",
-        "@nuskin/foundation-theme": "^1.0.1",
-        "framer-motion": "^10.8.5",
-        "next": "13.2.4",
+        "@mui/icons-material": "^5.14.14",
+        "@mui/material": "5.14.14",
+        "@mui/utils": "^5.14.13",
+        "@next/font": "13.5.5",
+        "@nuskin/foundation-theme": "1.2.0",
+        "@types/react": "^18.2.28",
+        "@types/react-dom": "^18.2.13",
+        "cliui": "^8.0.1",
+        "framer-motion": "^10.16.4",
+        "next": "13.5.5",
         "react": "18.2.0",
-        "react-dom": "18.2.0",
+        "react-dom": "^18.2.0",
         "react-material-ui-carousel": "^3.4.2",
         "react-slick": "^0.29.0",
         "slick-carousel": "^1.8.1",
-        "typescript": "4.9.5"
+        "typescript": "^5.2.2"
     },
     "devDependencies": {
-        "@babel/core": "^7.21.0",
-        "@babel/preset-env": "^7.20.2",
-        "@babel/preset-react": "^7.18.6",
-        "@babel/preset-typescript": "^7.21.0",
-        "@emotion/jest": "^11.10.5",
+        "@babel/core": "^7.23.2",
+        "@babel/preset-env": "^7.23.2",
+        "@babel/preset-react": "^7.22.15",
+        "@babel/preset-typescript": "^7.23.2",
+        "@emotion/jest": "^11.11.0",
         "@nuskin/eslint-config": "^1.0.0-setup.1",
-        "@storybook/addon-actions": "^7.0.7",
-        "@storybook/addon-essentials": "^7.0.7",
-        "@storybook/addon-interactions": "^7.0.7",
-        "@storybook/addon-links": "^7.0.7",
-        "@storybook/addon-mdx-gfm": "^7.0.7",
-        "@storybook/jest": "^0.1.0",
-        "@storybook/nextjs": "^7.0.7",
-        "@storybook/react": "^7.0.24",
-        "@storybook/test-runner": "^0.10.0",
-        "@storybook/testing-library": "^0.1.0",
-        "@testing-library/jest-dom": "^5.16.5",
+        "@storybook/addon-actions": "^7.5.0-alpha.6",
+        "@storybook/addon-essentials": "^7.5.0-alpha.6",
+        "@storybook/addon-interactions": "^7.5.0-alpha.6",
+        "@storybook/addon-links": "^7.5.0-alpha.6",
+        "@storybook/jest": "^0.2.3",
+        "@storybook/nextjs": "^7.5.0-alpha.6",
+        "@storybook/react": "^7.5.0-alpha.6",
+        "@storybook/test-runner": "^0.13.1-next.1",
+        "@storybook/testing-library": "^0.2.2",
+        "@testing-library/dom": "^9.3.3",
+        "@testing-library/jest-dom": "^6.1.4",
         "@testing-library/react": "^14.0.0",
         "@testing-library/react-hooks": "^8.0.1",
-        "@types/jest": "^29.5.0",
-        "@types/lodash": "^4.14.191",
-        "@types/node": "18.15.0",
-        "@types/ramda": "^0.29.3",
-        "@types/react": "18.0.28",
-        "@types/react-dom": "18.0.11",
+        "@types/jest": "^29.5.5",
+        "@types/lodash": "^4.14.199",
+        "@types/node": "^20.8.6",
+        "@types/ramda": "^0.29.6",
         "@types/react-slick": "^0.23.10",
-        "@types/react-test-renderer": "^18.0.0",
-        "@types/testing-library__jest-dom": "^5.14.5",
-        "babel-jest": "^29.5.0",
-        "babel-loader": "^9.1.2",
+        "@types/react-test-renderer": "^18.0.3",
+        "babel-jest": "^29.7.0",
+        "babel-loader": "^9.1.3",
         "babel-plugin-emotion": "^11.0.0",
-        "chromatic": "^6.17.3",
-        "eslint": "8.36.0",
-        "eslint-config-next": "13.2.4",
-        "eslint-config-prettier": "^8.7.0",
+        "chromatic": "^7.4.0",
+        "eslint": "^8.51.0",
+        "eslint-config-next": "^13.5.5",
+        "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-json": "^3.1.0",
-        "eslint-plugin-prettier": "^4.2.1",
-        "eslint-plugin-storybook": "^0.6.11",
-        "jest": "^29.5.0",
-        "jest-environment-jsdom": "^29.5.0",
-        "storybook": "^7.0.7"
+        "eslint-plugin-prettier": "^5.0.1",
+        "eslint-plugin-storybook": "^0.6.15",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "storybook": "^7.5.0-alpha.6"
     },
     "files": [
         "src/common"

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

@@ -1,62 +1,40 @@
-import React from 'react';
-import userEvent from '@testing-library/user-event';
-import { act } from 'react-dom/test-utils';
 import { render, screen, waitFor } from '@/test-utils/index';
-import { OptionUiComponent } from './mock/MockUI';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
 import { AutocompleteMockList } from './mock/MockData';
+import { OptionUiComponent } from './mock/MockUI';
 import NsAutocomplete from './NsAutocomplete';
 
+const commonProps = {
+    value: '',
+    inputValue: '',
+    onInputChange: jest.fn(),
+    onChange: jest.fn(),
+    options: AutocompleteMockList,
+    placeholder: 'autocomplete-input',
+    OptionsUI: OptionUiComponent,
+};
 describe('CustomAutocomplete', () => {
     it('1. should render autocomplete component', () => {
-        render(
-            <NsAutocomplete
-                options={AutocompleteMockList}
-                placeholder="autocomplete-input"
-                OptionsUI={OptionUiComponent}
-                inputValue=""
-                value=""
-            />
-        );
+        render(<NsAutocomplete {...commonProps} />);
         const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
         expect(autocompleteInput).toBeInTheDocument();
     });
-    it('2. check that onChange gets called', () => {
-        const onSelectMock = jest.fn();
-        const onChangeMock = jest.fn();
-        render(
-            <NsAutocomplete
-                options={AutocompleteMockList}
-                onSelect={onSelectMock}
-                onChange={onChangeMock}
-                placeholder="autocomplete-input"
-                OptionsUI={OptionUiComponent}
-                inputValue=""
-                value=""
-            />
-        );
+    it('2. check that onInputChange gets called', async () => {
+        const onInputChangeMock = jest.fn();
+        render(<NsAutocomplete {...commonProps} onInputChange={onInputChangeMock} />);
         const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
         expect(autocompleteInput).toBeInTheDocument();
-        act(() => {
-            userEvent.type(autocompleteInput, 'GS Facial');
-        });
-        expect(onChangeMock).toHaveBeenCalled();
-    });
+        await userEvent.type(autocompleteInput, 'GS Facial');
+        expect(onInputChangeMock).toHaveBeenCalled();
+    }, 10000);
 
     it('3. displays options when typing in the input', async () => {
-        render(
-            <NsAutocomplete
-                options={AutocompleteMockList}
-                onSelect={() => {}}
-                OptionsUI={OptionUiComponent}
-                placeholder="autocomplete-input"
-                inputValue=""
-                value=""
-            />
-        );
+        const onInputChangeMock = jest.fn();
+        render(<NsAutocomplete {...commonProps} onInputChange={onInputChangeMock} />);
         const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
-        act(() => {
-            userEvent.type(autocompleteInput, 'GS Facial');
-        });
+        await userEvent.type(autocompleteInput, 'GS Facial');
         await waitFor(
             () => {
                 const option1 = screen.getByText('GS Facial Gels 2pk Subscription');
@@ -67,75 +45,52 @@ describe('CustomAutocomplete', () => {
     }, 40000);
 
     it('4. selects an option when clicking on it', async () => {
-        const onSelectMock = jest.fn();
-        render(
-            <NsAutocomplete
-                onSelect={onSelectMock}
-                options={AutocompleteMockList}
-                OptionsUI={OptionUiComponent}
-                placeholder="autocomplete-input"
-                inputValue=""
-                value=""
-            />
-        );
+        const onChangeMock = jest.fn();
+        render(<NsAutocomplete {...commonProps} onChange={onChangeMock} />);
         const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
-        act(() => {
-            userEvent.type(autocompleteInput, 'GS Facial');
-        });
-        await waitFor(() => {
+        await userEvent.type(autocompleteInput, 'GS Facial');
+        await waitFor(async () => {
             const optionLi = screen.getByText('GS Facial Spa');
-            userEvent.click(optionLi);
+            await userEvent.click(optionLi);
         });
-        expect(onSelectMock).toHaveBeenCalled();
+        expect(onChangeMock).toHaveBeenCalled();
     }, 40000);
 
     it('5. should load more options when clicking load more button', async () => {
         render(
             <NsAutocomplete
-                options={AutocompleteMockList}
-                OptionsUI={OptionUiComponent}
-                placeholder="autocomplete-input"
                 seeMore={{
                     text: '',
                     show: true,
                     onSeeMore: () => ({}),
                 }}
-                inputValue=""
-                value=""
+                {...commonProps}
             />
         );
         const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
-        act(() => {
-            userEvent.type(autocompleteInput, 'GS Facial');
-        });
-        await waitFor(() => {
+        await userEvent.type(autocompleteInput, 'GS Facial');
+        await waitFor(async () => {
             const loadMoreButton = screen.getByTestId('autocomplete-loadmore-id');
-            userEvent.click(loadMoreButton);
+            await userEvent.click(loadMoreButton);
         });
     }, 40000);
 
     it('6. should clear options when clicking clear button', async () => {
         render(
             <NsAutocomplete
-                options={AutocompleteMockList}
-                OptionsUI={OptionUiComponent}
-                placeholder="autocomplete-input"
                 clear={{
                     text: '',
                     show: true,
                     onClear: () => ({}),
                 }}
-                inputValue=""
-                value=""
+                {...commonProps}
             />
         );
         const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
-        act(() => {
-            userEvent.type(autocompleteInput, 'GS Facial');
-        });
-        await waitFor(() => {
+        await userEvent.type(autocompleteInput, 'GS Facial');
+        await waitFor(async () => {
             const clearButton = screen.getByTestId('autocomplete-clear-id');
-            userEvent.click(clearButton);
+            await userEvent.click(clearButton);
         });
     }, 40000);
 });

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

@@ -1,7 +1,9 @@
 import { styled } from '@nuskin/foundation-theme';
+
 import { NsInputField } from '../input';
 
 // TODO: why is .muiautocomplete-popupindicator added?
+// TODO: ${({ theme }) => getGenomeColor(theme, 'N100')}; use forceMode light
 export const StyledTextField = styled(NsInputField)`
     .MuiAutocomplete-inputRoot {
         padding-right: 10px !important;

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -1,7 +1,8 @@
-import { Autocomplete, AutocompleteRenderInputParams, List } from '@mui/material';
-import React, { HTMLAttributes, PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
+import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
+import { noop } from 'lodash';
+import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
 
-import { ClearButton } from './helper/ClearButton';
+import { AutoCompleteButton } from './helper/AutoCompleteButton';
 import { renderGroupBy, renderGroupName, renderOptionLabel } from './helper/renderGroupName';
 import { SeeMoreButton } from './helper/SeeMoreButton';
 import { StyledTextField } from './NsAutocomplete.styled';
@@ -13,7 +14,7 @@ const NsAutocomplete = ({
     OptionsUI,
     loading,
     noOptionsText,
-    onSelect,
+    onInputChange,
     onChange,
     clear,
     seeMore,
@@ -34,24 +35,6 @@ const NsAutocomplete = ({
         }
     }, [options, scrollTopPosition]);
 
-    const handleSelect = useCallback(
-        (event: React.SyntheticEvent, value: string | OptionsProps | null) => {
-            if (typeof onSelect === 'function') {
-                onSelect(value);
-            }
-        },
-        [onSelect]
-    );
-
-    const onInputChange = useCallback(
-        (event: React.SyntheticEvent, newInputValue: string) => {
-            if (typeof onChange === 'function') {
-                onChange(newInputValue);
-            }
-        },
-        [onChange]
-    );
-
     const renderInput = (params: AutocompleteRenderInputParams) => (
         <StyledTextField
             {...params}
@@ -71,47 +54,62 @@ const NsAutocomplete = ({
         </li>
     );
 
-    const renderListBoxComponent = ({ children, ...otherProps }: ComponentBoxProps) => (
-        <List {...otherProps} ref={listboxRef}>
-            <ClearButton show={clear?.show} text={clear?.text} onClear={clear?.onClear} />
-            {children}
-            <SeeMoreButton
-                onSeeMore={seeMore?.onSeeMore}
-                show={seeMore?.show}
-                text={seeMore?.text}
-                options={options}
-                setScrollTopPosition={setScrollTopPosition}
-                listboxRef={listboxRef}
-            />
-        </List>
-    );
+    const renderListBoxComponent = ({ children, ...rest }: ComponentBoxProps) => {
+        return (
+            <ul
+                aria-labelledby={rest['aria-labelledby']}
+                onMouseDown={rest.onMouseDown}
+                role={rest.role}
+                id={rest.id}
+                className={rest.className}
+                ref={listboxRef}
+            >
+                <AutoCompleteButton
+                    show={clear?.show ?? false}
+                    text={clear?.text ?? 'Clear All'}
+                    onClick={clear?.onClear ?? noop}
+                    testId="autocomplete-clear-id"
+                />
+                {children}
+                <SeeMoreButton
+                    onSeeMore={seeMore?.onSeeMore}
+                    show={seeMore?.show}
+                    text={seeMore?.text}
+                    options={options}
+                    setScrollTopPosition={setScrollTopPosition}
+                    listboxRef={listboxRef}
+                />
+            </ul>
+        );
+    };
 
     return (
-        <Autocomplete
-            id={id}
-            disablePortal
-            className={className}
-            options={options}
-            loading={loading}
-            noOptionsText={noOptionsText}
-            groupBy={renderGroupBy}
-            getOptionLabel={renderOptionLabel}
-            renderOption={renderOption}
-            renderInput={renderInput}
-            ListboxComponent={renderListBoxComponent}
-            ListboxProps={{ scrollTopPosition } as HTMLAttributes<HTMLUListElement>} // Pass the current scroll position
-            renderGroup={renderGroupName}
-            onChange={handleSelect}
-            onInputChange={onInputChange}
-            value={value}
-            inputValue={inputValue}
-            filterOptions={
-                isFilterEnabled
-                    ? undefined // Use default filtering behavior
-                    : (options) => options
-            }
-            freeSolo
-        />
+        <>
+            <Autocomplete
+                id={id}
+                disablePortal
+                className={className}
+                options={options}
+                loading={loading}
+                noOptionsText={noOptionsText}
+                groupBy={renderGroupBy}
+                getOptionLabel={renderOptionLabel}
+                renderOption={renderOption}
+                renderInput={renderInput}
+                ListboxComponent={renderListBoxComponent}
+                renderGroup={renderGroupName}
+                onChange={onChange}
+                onInputChange={onInputChange}
+                value={value}
+                inputValue={inputValue}
+                filterOptions={
+                    isFilterEnabled
+                        ? undefined // Use default filtering behavior
+                        : (options) => options
+                }
+                freeSolo
+            />
+        </>
     );
 };
 

package/src/common/autocomplete/helper/{ClearButton.tsx → AutoCompleteButton.tsx}

@@ -1,18 +1,20 @@
 import { NsButton, NsTypography } from '../..';
 
-type ClearButtonProps = {
-    text?: string;
-    show?: boolean;
-    onClear?(): void;
+type AutoCompleteButtonProps = {
+    text: string;
+    show: boolean;
+    onClick(): void;
+    testId?: string;
 };
-export const ClearButton = (props: ClearButtonProps) => {
-    const { show, onClear, text = 'Clear All' } = props ?? {};
+
+export const AutoCompleteButton = (props: AutoCompleteButtonProps) => {
+    const { show, onClick, text, testId } = props;
     if (!show) {
         return null;
     }
     return (
         <li className="text-right p-3">
-            <NsButton onClick={onClear} data-testid="autocomplete-clear-id">
+            <NsButton onClick={onClick} data-testid={testId}>
                 <NsTypography variant="p-xs" weight="bold">
                     {text}
                 </NsTypography>

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

@@ -1,11 +1,13 @@
 import { Dispatch, MutableRefObject, SetStateAction, useCallback } from 'react';
-import { NsButton, NsTypography } from '../..';
+
+import { OptionsProps } from '../..';
+import { AutoCompleteButton } from './AutoCompleteButton';
 
 type SeeMoreButtonProps = {
     text?: string;
     show?: boolean;
     onSeeMore?(): void;
-    options: any[];
+    options: OptionsProps[];
     setScrollTopPosition: Dispatch<SetStateAction<number>>;
     listboxRef: MutableRefObject<HTMLUListElement | null>;
 };
@@ -32,16 +34,5 @@ export const SeeMoreButton = (props: SeeMoreButtonProps) => {
             onSeeMore();
         }
     }, [listboxRef, onSeeMore, options?.length, setScrollTopPosition]);
-    if (!show) {
-        return null;
-    }
-    return (
-        <li className="text-center p-3">
-            <NsButton onClick={handleSeeMore} data-testid="autocomplete-loadmore-id">
-                <NsTypography variant="p-xs" weight="bold">
-                    {text}
-                </NsTypography>
-            </NsButton>
-        </li>
-    );
+    return <AutoCompleteButton show={show} text={text} onClick={handleSeeMore} testId="autocomplete-loadmore-id" />;
 };

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

@@ -1,4 +1,5 @@
 import { AutocompleteRenderGroupParams } from '@mui/material';
+
 import { NsTypography, OptionsProps } from '../..';
 
 export const renderGroupName = ({ key, group, children }: AutocompleteRenderGroupParams) => (
@@ -12,6 +13,7 @@ export const renderGroupName = ({ key, group, children }: AutocompleteRenderGrou
     </li>
 );
 
-export const renderOptionLabel = (option: OptionsProps) => option.value;
+export const renderOptionLabel = (option: string | OptionsProps) =>
+    typeof option === 'string' ? option : option?.value ?? '';
 
-export const renderGroupBy = (option: OptionsProps) => option.group as string;
+export const renderGroupBy = (option: OptionsProps) => (option?.group ?? '') as string;

package/src/common/autocomplete/stories/{ACWithoutClose.tsx → NoCloseAutoComplete.tsx}

@@ -1,12 +1,12 @@
 import { NsAutocompleteProps, OptionsProps } from '../types';
-import React, { useState } from 'react';
+import React, { useState, SyntheticEvent } from 'react';
 
 import { NsAutocomplete } from '..';
 import { OptionUiComponent } from '../mock/MockUI';
 
 const PAGE_SIZE = 6;
 
-export const ACWithoutClose = (args: NsAutocompleteProps) => {
+export const NoCloseAutoComplete = (args: NsAutocompleteProps) => {
     const [selectedOption, setSelectedOption] = useState<string | OptionsProps | null>(null);
     const [searchTerms, setSearchTerms] = useState<string>('');
     const [pageNo, setPageNo] = useState(PAGE_SIZE);
@@ -23,12 +23,12 @@ export const ACWithoutClose = (args: NsAutocompleteProps) => {
         },
     } as NsAutocompleteProps;
 
-    const onSelect = (value: string | OptionsProps | null) => {
+    const onChange = (event: SyntheticEvent<Element, Event>, value: string | OptionsProps | null) => {
         setSelectedOption(value);
         setSearchTerms((value = ''));
     };
 
-    const handleInputChange = (newValue: string) => {
+    const onInputChange = (event: SyntheticEvent<Element, Event>, newValue: string) => {
         setSearchTerms(newValue);
     };
 
@@ -37,8 +37,8 @@ export const ACWithoutClose = (args: NsAutocompleteProps) => {
             <NsAutocomplete
                 {...AutoCompleteProps}
                 options={args.options.slice(0, pageNo)}
-                onChange={handleInputChange}
-                onSelect={onSelect}
+                onInputChange={onInputChange}
+                onChange={onChange}
                 OptionsUI={OptionUiComponent}
                 value={selectedOption}
                 inputValue={searchTerms}

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

@@ -7,7 +7,7 @@ import { NsAutocomplete } from '..';
 import { AutocompleteMockList } from '../mock/MockData';
 import { NsIcon } from '../../icon';
 import { RenderAutoComplete } from './RenderAutoComplete';
-import { ACWithoutClose } from './ACWithoutClose';
+import { NoCloseAutoComplete } from './NoCloseAutoComplete';
 
 type ComponentType = typeof NsAutocomplete;
 type Story = StoryObj<ComponentType>;
@@ -63,7 +63,7 @@ export default {
         },
         iconStart: <NsIcon name="search" />,
         iconEnd: <NsIcon name="roundedClose" size="small" colorOverride="#F5F5F5" />,
-        placeholder: 'search',
+        placeholder: 'Search',
     },
 } as MetaStory;
 
@@ -72,5 +72,5 @@ export const Autocomplete: Story = {
 };
 
 export const WithoutClose: Story = {
-    render: ACWithoutClose,
+    render: NoCloseAutoComplete,
 };

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

@@ -1,6 +1,6 @@
 import { NsAutocompleteProps, OptionsProps } from '../types';
 import { IconButton } from '@mui/material';
-import React, { useState } from 'react';
+import React, { useState, SyntheticEvent } from 'react';
 
 import { NsAutocomplete } from '..';
 import { NsIcon } from '../../icon';
@@ -25,12 +25,12 @@ export const RenderAutoComplete = (args: NsAutocompleteProps) => {
         },
     } as NsAutocompleteProps;
 
-    const onSelect = (value: string | OptionsProps | null) => {
+    const onChange = (event: SyntheticEvent<Element, Event>, value: string | OptionsProps | null) => {
         setSelectedOption(value);
         setSearchTerms((value = ''));
     };
 
-    const handleInputChange = (newValue: string) => {
+    const onInputChange = (event: SyntheticEvent<Element, Event>, newValue: string) => {
         setSearchTerms(newValue);
     };
 
@@ -44,8 +44,8 @@ export const RenderAutoComplete = (args: NsAutocompleteProps) => {
             <NsAutocomplete
                 {...AutoCompleteProps}
                 options={args.options.slice(0, pageNo)}
-                onChange={handleInputChange}
-                onSelect={onSelect}
+                onInputChange={onInputChange}
+                onChange={onChange}
                 OptionsUI={OptionUiComponent}
                 iconEnd={
                     <IconButton onClick={onInputClear}>