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

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

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

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

@@ -4,21 +4,25 @@
  * @description NsAutocomplete component.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsAutocomplete } from './';
 import { AutocompleteMockList } from './mock/MockData';
 import { OptionUiComponent } from './mock/MockUI';
-import { NsAutocompleteProps } from './types';
+import { NsAutocompleteProps, OptionsProps } from './types.d';
+import { NsIcon } from '../icon';
+import { IconButton } from '@mui/material';
 
 type ComponentType = typeof NsAutocomplete;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
+const PAGE_SIZE = 6;
+
 export default {
-    title: 'Components/NsAutocomplete',
+    title: 'Components/Inputs/NsAutocomplete',
     component: NsAutocomplete,
     decorators: [withCenterDecorator],
     argTypes: {
@@ -30,22 +34,75 @@ export default {
         options: AutocompleteMockList,
         seeMore: {
             text: 'See More Results',
-            show: false,
+            show: true,
             onSeeMore: () => {
                 throw new Error('Function not implemented.');
             },
         },
         clear: {
             text: 'Clear Recent Searches',
-            show: false,
+            show: true,
             onClear: () => {
                 throw new Error('Function not implemented.');
             },
         },
+        iconStart: <NsIcon name="search" />,
+        iconEnd: <NsIcon name="close" size="small" />,
         placeholder: 'search',
     },
 } as MetaStory;
 
+const RenderAutocomplete = (args: NsAutocompleteProps) => {
+    const [selectedOption, setSelectedOption] = useState<string | OptionsProps | null>(null);
+    const [searchTerms, setSearchTerms] = useState<string>('');
+    const [pageNo, setPageNo] = useState(PAGE_SIZE);
+
+    const onSeeMoreHandler = () => {
+        setPageNo(PAGE_SIZE + PAGE_SIZE);
+    };
+
+    const AutoCompleteProps = {
+        ...args,
+        seeMore: {
+            ...args.seeMore,
+            onSeeMore: onSeeMoreHandler,
+        },
+    } as NsAutocompleteProps;
+
+    const onSelect = (value: string | OptionsProps | null) => {
+        setSelectedOption(value);
+        setSearchTerms((value = ''));
+    };
+
+    const handleInputChange = (newValue: string) => {
+        setSearchTerms(newValue);
+    };
+
+    const onInputClear = () => {
+        setSelectedOption(null);
+        setSearchTerms('');
+    };
+
+    return (
+        <div>
+            <NsAutocomplete
+                {...AutoCompleteProps}
+                options={args.options.slice(0, pageNo)}
+                onChange={handleInputChange}
+                onSelect={onSelect}
+                OptionsUI={OptionUiComponent}
+                iconEnd={
+                    <IconButton onClick={onInputClear}>
+                        <NsIcon name="close" size="small" />
+                    </IconButton>
+                }
+                value={selectedOption}
+                inputValue={searchTerms}
+            />
+        </div>
+    );
+};
+
 export const Autocomplete: Story = {
-    render: (args: NsAutocompleteProps) => <NsAutocomplete {...args} renderOptions={OptionUiComponent} />,
+    render: RenderAutocomplete,
 };

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

@@ -0,0 +1,12 @@
+import { styled } from '@nuskin/foundation-theme';
+
+import { NsInputField } from '../input';
+
+export const StyledTextField = styled(NsInputField)`
+    .MuiAutocomplete-inputRoot {
+        padding-right: 10px !important;
+    }
+    .muiautocomplete-popupindicator {
+        display: none;
+    }
+`;

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -1,92 +1,140 @@
-import * as React from 'react';
-import { NsInputField } from '../input';
+import React, { HTMLAttributes, PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 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 { NsButton } from '../button';
+import { NsTypography, NsButton } from '../';
+import { NsAutocompleteProps, OptionsProps, ComponentBoxProps } from './types.d';
+import { StyledTextField } from './NsAutocomplete.styled';
+
+const renderOptionLabel = (option: OptionsProps) => option.value;
+
+const renderGroupBy = (option: OptionsProps) => option.group as string;
 
 const NsAutocomplete = ({
     id = 'custom_autocomplete_dropdown',
-    options = [],
-    renderOptions,
+    options,
+    OptionsUI,
+    loading,
+    noOptionsText,
     onSelect,
+    onChange,
     clear,
     seeMore,
     placeholder,
     className,
+    iconStart,
+    iconEnd,
+    inputValue,
+    value,
 }: PropsWithChildren<NsAutocompleteProps>) => {
-    const inputRef = useRef(null);
+    const [scrollTopPosition, setScrollTopPosition] = useState(0);
+    const listboxRef = useRef<HTMLUListElement | null>(null);
 
-    const [selectedOption, setSelectedOption] = useState<OptionsProps | null>(null);
-    const OptionUI = renderOptions;
+    useEffect(() => {
+        if (listboxRef?.current && options.length > 0) {
+            listboxRef.current.scrollTop = scrollTopPosition;
+        }
+    }, [options, scrollTopPosition]);
 
-    const handleSelect = (event: React.SyntheticEvent<Element, Event>, value: OptionsProps | null) => {
-        setSelectedOption(value);
-        onSelect ? onSelect(value) : null;
-    };
+    const handleSelect = useCallback(
+        (event: React.SyntheticEvent, value: string | OptionsProps | null) => {
+            if (typeof onSelect === 'function') {
+                onSelect(value);
+            }
+        },
+        [onSelect]
+    );
+
+    const handleInputChange = useCallback(
+        (event: React.SyntheticEvent, newInputValue: string) => {
+            if (typeof onChange === 'function') {
+                onChange(newInputValue);
+            }
+        },
+        [onChange]
+    );
 
     const renderInput = (params: AutocompleteRenderInputParams) => (
-        <NsInputField {...params} placeholder={placeholder} inputRef={inputRef} />
+        <StyledTextField
+            {...params}
+            placeholder={placeholder}
+            InputProps={{
+                ...params.InputProps,
+                startAdornment: iconStart,
+                endAdornment: iconEnd,
+            }}
+        />
     );
 
-    const renderOption = (props: ComponentboxProps, option: OptionsProps) => (
-        <li {...props}>
-            <OptionUI {...props} option={option} />
+    // TODO: @vijayprathap need to check if we can remove object spread of ...props and ...params in renderInput
+    const renderOption = (props: ComponentBoxProps, option: OptionsProps) => (
+        <li {...props} key={props.id}>
+            {OptionsUI ? <OptionsUI {...props} option={option} /> : null}
         </li>
     );
 
-    const renderOptionLabel = (option: OptionsProps) => option.value;
-
-    const renderGroupBy = (option: OptionsProps) => option.group as string;
-
     const renderGroupName = ({ key, group, children }: AutocompleteRenderGroupParams) => (
         <li key={key}>
             {group ? (
-                <NsTypography variant="p-s" className="p-3">
+                <NsTypography variant="p-m" weight="bold" className="p-3">
                     {group}
                 </NsTypography>
             ) : null}
-            <span>{children}</span>
+            <ul className="p-0">{children}</ul>
         </li>
     );
 
-    const renderClearButton = () => {
-        const { show, onClear, text = 'See More Results' } = clear || {};
+    const renderClearButton = useCallback(() => {
+        const { show, onClear, text = 'Clear Search' } = clear || {};
         if (!show) {
             return null;
         }
         return (
-            <div className="text-right p-3">
+            <li className="text-right p-3">
                 <NsButton onClick={onClear} data-testid="autocomplete-clear-id">
-                    <NsTypography variant={'p-xs'}>{text}</NsTypography>
+                    <NsTypography variant="p-xs" weight="bold">
+                        {text}
+                    </NsTypography>
                 </NsButton>
-            </div>
+            </li>
         );
-    };
+    }, [clear]);
+
+    const handleSeeMore = useCallback(() => {
+        const { onSeeMore } = seeMore || {};
+        // Remember the current scroll position
+        if (options?.length > 0 && listboxRef?.current) {
+            const lastScrollPosition = listboxRef.current?.scrollTop;
+            if (lastScrollPosition) {
+                setScrollTopPosition(lastScrollPosition);
+            }
+        }
+        if (onSeeMore && typeof onSeeMore === 'function') {
+            onSeeMore();
+        }
+    }, [seeMore, options]);
 
-    const renderSeeMoreButton = () => {
-        const { show, onSeeMore, text = 'See More Results' } = seeMore || {};
+    const renderSeeMoreButton = useCallback(() => {
+        const { show, text = 'See More Results' } = seeMore || {};
         if (!show) {
             return null;
         }
+
         return (
-            <div className="text-center p-3">
-                <NsButton onClick={onSeeMore} data-testid="autocomplete-loadmore-id">
-                    <NsTypography variant="p-xs">{text}</NsTypography>
+            <li className="text-center p-3">
+                <NsButton onClick={handleSeeMore} data-testid="autocomplete-loadmore-id">
+                    <NsTypography variant="p-xs" weight="bold">
+                        {text}
+                    </NsTypography>
                 </NsButton>
-            </div>
+            </li>
         );
-    };
+    }, [seeMore, handleSeeMore]);
 
-    const renderListBoxComponent = ({ children, ...otherProps }: ComponentboxProps) => (
-        <>
+    const renderListBoxComponent = ({ children, ...otherProps }: ComponentBoxProps) => (
+        <List {...otherProps} ref={listboxRef}>
             {renderClearButton()}
-            <List {...otherProps}>
-                {children}
-                {renderSeeMoreButton()}
-            </List>
-        </>
+            {children}
+            {renderSeeMoreButton()}
+        </List>
     );
 
     return (
@@ -95,14 +143,20 @@ const NsAutocomplete = ({
             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}
-            value={selectedOption}
+            onInputChange={handleInputChange}
+            value={value}
+            inputValue={inputValue}
+            freeSolo
         />
     );
 };

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/autocomplete/mock/MockData.ts

@@ -4,24 +4,25 @@ export const AutocompleteMockList: OptionsProps[] = [
     {
         id: '1',
         value: 'GS Facial Gels 2pk Subscription',
-        // eslint-disable-next-line max-len
+        group: 'Popular Searches',
         image: 'https://www.nuskin.com/content/products/86/99/01/86990168/_jcr_content/fullImage.img.160.160.png.64.64.png',
     },
     {
         id: '2',
         value: 'GS Facial',
-        // eslint-disable-next-line max-len
+        group: 'Popular Searches',
         image: 'https://www.nuskin.com/content/products/01/55/00/01550014/_jcr_content/fullImage.img.160.160.png.64.64.png',
     },
     {
         id: '3',
-        value: 'GS Facial Spa', // eslint-disable-next-line max-len
+        value: 'GS Facial Spa',
+        group: 'Popular Searches',
         image: 'https://www.nuskin.com/content/products/01/10/12/01101251/_jcr_content/fullImage.img.160.160.png.64.64.png',
     },
     {
         id: '4',
         value: 'Nu Skin® Facial Spa',
-        group: 'Popular Searches', // eslint-disable-next-line max-len
+        group: 'Popular Searches',
         image: 'https://www.nuskin.com/content/products/01/55/00/01550013/_jcr_content/fullImage.img.160.160.png.64.64.png',
         icon: 'cart',
         groupBgColor: '#000',
@@ -29,7 +30,7 @@ export const AutocompleteMockList: OptionsProps[] = [
     {
         id: '5',
         value: 'AP 24® Whitening Fluoride Toothpaste',
-        group: 'Popular Searches', // eslint-disable-next-line max-len
+        group: 'Popular Searches',
         image: 'https://www.nuskin.com/content/products/86/99/01/86990100/_jcr_content/fullImage.img.160.160.png.64.64.png',
         icon: 'cart',
         groupBgColor: '#000',
@@ -37,10 +38,52 @@ export const AutocompleteMockList: OptionsProps[] = [
     {
         id: '6',
         value: 'PowerMask + LumiSpa Normal Subscription',
-        group: 'Popular Searches', // eslint-disable-next-line max-len
+        group: 'Popular Searches',
         image: 'https://www.nuskin.com/content/products/01/00/16/01001647/jcr:content/fullImage.img.160.160.png/1611763135883-cache.png.64.64.png',
         icon: 'cart',
         groupBgColor: '#000',
     },
-];
 
+    {
+        id: '7',
+        value: 'Rejuvenating Cream',
+        group: 'Popular Searches',
+        image: 'https://www.nuskin.com/content/products/86/99/01/86990168/_jcr_content/fullImage.img.160.160.png.64.64.png',
+    },
+    {
+        id: '8',
+        value: 'Epoch® Firewalker® Foot Cream',
+        group: 'Popular Searches',
+        image: 'https://www.nuskin.com/content/products/01/55/00/01550014/_jcr_content/fullImage.img.160.160.png.64.64.png',
+    },
+    {
+        id: '9',
+        value: 'Tri-Phasic White® Night Cream',
+        group: 'Popular Searches',
+        image: 'https://www.nuskin.com/content/products/01/10/12/01101251/_jcr_content/fullImage.img.160.160.png.64.64.png',
+    },
+    {
+        id: '10',
+        value: 'ThirstFix Hydrating Gel Cream (Sample Size)',
+        group: 'Popular Searches',
+        image: 'https://www.nuskin.com/content/products/01/55/00/01550013/_jcr_content/fullImage.img.160.160.png.64.64.png',
+        icon: 'cart',
+        groupBgColor: '#000',
+    },
+    {
+        id: '11',
+        value: 'Epoch® Baby Hair',
+        group: 'Popular Searches',
+        image: 'https://www.nuskin.com/content/products/86/99/01/86990100/_jcr_content/fullImage.img.160.160.png.64.64.png',
+        icon: 'cart',
+        groupBgColor: '#000',
+    },
+    {
+        id: '12',
+        value: '180° Face Wash',
+        group: 'Popular Searches',
+        image: 'https://www.nuskin.com/content/products/01/00/16/01001647/jcr:content/fullImage.img.160.160.png/1611763135883-cache.png.64.64.png',
+        icon: 'cart',
+        groupBgColor: '#000',
+    },
+];

package/src/common/autocomplete/mock/MockUI.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import { ListStyled } from './Mock.styled';
 import { NsTypography } from '../../typography';
 import { NsIcon } from '../../icon';
@@ -5,7 +6,7 @@ import { ListUiProps } from '../types';
 
 const OptionUiComponent = ({ option }: ListUiProps) => {
     return (
-        <ListStyled className="checker">
+        <ListStyled>
             <div className="item-description" role="link" tabIndex={0}>
                 <NsTypography aria-label="Nu Skin Tumbler" variant="p-m" colorOverride="#63666A">
                     <img src={option.image} alt="No-image" />

package/src/common/autocomplete/{types.ts → types.d.ts}

@@ -1,26 +1,36 @@
 import React, { HTMLAttributes } from 'react';
+
+import { ComponentsProps } from '@mui/material';
+
 import { AdditionalProps } from '../common.types';
 import { NsIconNameType } from '../icon';
-import { ComponentsProps } from '@mui/material';
 
 export type NsAutocompleteProps = {
     id?: string;
     options: OptionsProps[];
-    renderOptions: React.ComponentType<any>;
+    loading?: boolean;
+    OptionsUI: React.ComponentType<any>;
+    noOptionsText?: string;
+    // eslint-disable-next-line no-unused-vars
+    onSelect?: (params: string | OptionsProps | null) => void;
     // eslint-disable-next-line no-unused-vars
-    onSelect?: (params: OptionsProps | null) => void;
+    onChange?: (params: string) => void;
     clear?: {
-        text: string;
+        text?: string;
         show?: boolean; //default to false
-        onClear: () => {};
+        onClear: () => void;
     };
     seeMore?: {
-        text: string;
+        text?: string;
         show?: boolean; //default to false
-        onSeeMore: () => {};
+        onSeeMore: () => void;
     };
     placeholder?: string;
     className?: string;
+    iconStart?: string | React.ReactNode;
+    iconEnd?: string | React.ReactNode;
+    inputValue: string;
+    value: string | OptionsProps | null;
 } & AdditionalProps;
 
 export type ListUiProps = {
@@ -36,4 +46,4 @@ export type OptionsProps = {
     groupBgColor?: string;
 };
 
-export type ComponentboxProps = ComponentsProps & HTMLAttributes<HTMLElement>;
+export type ComponentBoxProps = ComponentsProps & HTMLAttributes<HTMLElement>;