@nuskin/foundation-ui-components 1.0.0-develop.5 → 1.0.0-develop.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.0.0-develop.5",
+    "version": "1.0.0-develop.6",
     "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/autocomplete/NsAutocomplete.spec.tsx

@@ -14,6 +14,8 @@ describe('CustomAutocomplete', () => {
                 onSelect={() => {}}
                 placeholder="autocomplete-input"
                 renderOptions={OptionUiComponent}
+                inputValue=""
+                value=""
             />
         );
         const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
@@ -27,6 +29,8 @@ describe('CustomAutocomplete', () => {
                 onSelect={() => {}}
                 renderOptions={OptionUiComponent}
                 placeholder="autocomplete-input"
+                inputValue=""
+                value=""
             />
         );
         const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
@@ -48,6 +52,8 @@ describe('CustomAutocomplete', () => {
                 options={AutocompleteMockList}
                 renderOptions={OptionUiComponent}
                 placeholder="autocomplete-input"
+                inputValue=""
+                value=""
             />
         );
         const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
@@ -71,6 +77,8 @@ describe('CustomAutocomplete', () => {
                     show: true,
                     onSeeMore: () => ({}),
                 }}
+                inputValue=""
+                value=""
             />
         );
         const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
@@ -94,6 +102,8 @@ describe('CustomAutocomplete', () => {
                     show: true,
                     onClear: () => ({}),
                 }}
+                inputValue=""
+                value=""
             />
         );
         const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');

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

@@ -4,15 +4,16 @@
  * @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 { NsAutocomplete } from './';
 import { AutocompleteMockList } from './mock/MockData';
 import { OptionUiComponent } from './mock/MockUI';
-import { NsAutocompleteProps } from './types.d';
+import { NsAutocompleteProps, OptionsProps } from './types.d';
 import { NsIcon } from '../icon';
+import { IconButton } from '@mui/material';
 
 type ComponentType = typeof NsAutocomplete;
 type Story = StoryObj<ComponentType>;
@@ -31,24 +32,61 @@ 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'/>,
+        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 onSelect = (value: string | OptionsProps | null) => {
+        setSelectedOption(value);
+        setSearchTerms((value = ''));
+    };
+
+    const handleInputChange = (newValue: string) => {
+        setSearchTerms(newValue);
+    };
+
+    const onInputClear = () => {
+        setSelectedOption(null);
+        setSearchTerms('');
+    };
+
+    return (
+        <div>
+            <NsAutocomplete
+                {...args}
+                onChange={handleInputChange}
+                onSelect={onSelect}
+                renderOptions={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.tsx

@@ -1,4 +1,4 @@
-import React, { useState, PropsWithChildren, useRef } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { Autocomplete, AutocompleteRenderGroupParams, List, AutocompleteRenderInputParams } from '@mui/material';
 import { NsTypography, NsButton } from '../';
 import { NsAutocompleteProps, OptionsProps, ComponentBoxProps } from './types.d';
@@ -18,23 +18,23 @@ const NsAutocomplete = ({
     className,
     iconStart,
     iconEnd,
+    inputValue,
+    value,
 }: PropsWithChildren<NsAutocompleteProps>) => {
-    const inputRef = useRef(null);
-
-    const [selectedOption, setSelectedOption] = useState<OptionsProps | null>(null);
     const OptionUI = renderOptions;
 
-    const handleSelect = (event: React.SyntheticEvent<Element, Event>, value: OptionsProps | null) => {
-        setSelectedOption(value);
+    const handleSelect = (event: React.SyntheticEvent<Element, Event>, value: string | OptionsProps | null) => {
         onSelect ? onSelect(value) : null;
     };
 
+    const handleInputChange = (event: React.SyntheticEvent<Element, Event>, newInputValue: string) => {
+        onChange ? onChange(newInputValue) : null;
+    };
+
     const renderInput = (params: AutocompleteRenderInputParams) => (
         <StyledTextField
             {...params}
-            onChange={onChange}
             placeholder={placeholder}
-            inputRef={inputRef}
             InputProps={{
                 ...params.InputProps,
                 startAdornment: iconStart,
@@ -61,23 +61,23 @@ const NsAutocomplete = ({
                     {group}
                 </NsTypography>
             ) : null}
-            <span>{children}</span>
+            <ul className="p-0">{children}</ul>
         </li>
     );
 
     const renderClearButton = () => {
-        const { show, onClear, text = 'See More Results' } = clear || {};
+        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'} weight="bold">
                         {text}
                     </NsTypography>
                 </NsButton>
-            </div>
+            </li>
         );
     };
 
@@ -87,13 +87,13 @@ const NsAutocomplete = ({
             return null;
         }
         return (
-            <div className="text-center p-3">
+            <li className="text-center p-3">
                 <NsButton onClick={onSeeMore} data-testid="autocomplete-loadmore-id">
                     <NsTypography variant="p-xs" weight="bold">
                         {text}
                     </NsTypography>
                 </NsButton>
-            </div>
+            </li>
         );
     };
 
@@ -120,7 +120,10 @@ const NsAutocomplete = ({
             ListboxComponent={renderListBoxComponent}
             renderGroup={renderGroupName}
             onChange={handleSelect}
-            value={selectedOption}
+            onInputChange={handleInputChange}
+            value={value}
+            inputValue={inputValue}
+            freeSolo
         />
     );
 };

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

@@ -6,27 +6,29 @@ import { ComponentsProps } from '@mui/material';
 export type NsAutocompleteProps = {
     id?: string;
     options: OptionsProps[];
-    loading?:boolean;
+    loading?: boolean;
     renderOptions: React.ComponentType<any>;
-    noOptionsText ?:string;
+    noOptionsText?: string;
     // eslint-disable-next-line no-unused-vars
-    onSelect?: (params: OptionsProps | null) => void;
+    onSelect?: (params: string | OptionsProps | null) => void;
     // eslint-disable-next-line no-unused-vars
-    onChange?: (params) => void;
+    onChange?: (params: string) => void;
     clear?: {
         text: string;
         show?: boolean; //default to false
-        onClear: () => {};
+        onClear: () => void;
     };
     seeMore?: {
         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 = {

package/src/common/breadcrumb/NsBreadcrumb.tsx

@@ -18,8 +18,8 @@ const NsBreadcrumb = (props: PropsWithChildren<NsBreadcrumbProps>) => {
     const { items, iconVisibility } = props;
 
     const theme = useTheme();
-    const neutral80 = color('neutral', '80')(theme);
-    const neutral60 = color('neutral', '60')(theme);
+    const neutral80 = color('neutral', '80')({ theme });
+    const neutral60 = color('neutral', '60')({ theme });
 
     const getLabel = (item: ItemProps) => {
         if (item?.href) {