@nuskin/foundation-ui-components 1.5.0 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.5.0",
+    "version": "1.6.1",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {

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

@@ -1,7 +1,7 @@
 import { styled } from '@nuskin/foundation-theme';
-
 import { NsInputField } from '../input';
 
+// TODO: why is .muiautocomplete-popupindicator added?
 export const StyledTextField = styled(NsInputField)`
     .MuiAutocomplete-inputRoot {
         padding-right: 10px !important;
@@ -9,4 +9,8 @@ export const StyledTextField = styled(NsInputField)`
     .muiautocomplete-popupindicator {
         display: none;
     }
+    .styled-text-field.MuiOutlinedInput-root input#custom_autocomplete_dropdown::placeholder {
+        opacity: 1;
+        color: #252525;
+    }
 `;

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -1,12 +1,11 @@
+import { Autocomplete, AutocompleteRenderInputParams, List } from '@mui/material';
 import React, { HTMLAttributes, PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
-import { Autocomplete, AutocompleteRenderGroupParams, List, AutocompleteRenderInputParams } from '@mui/material';
-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;
+import { ClearButton } from './helper/ClearButton';
+import { renderGroupBy, renderGroupName, renderOptionLabel } from './helper/renderGroupName';
+import { SeeMoreButton } from './helper/SeeMoreButton';
+import { StyledTextField } from './NsAutocomplete.styled';
+import { ComponentBoxProps, NsAutocompleteProps, OptionsProps } from './types.d';
 
 const NsAutocomplete = ({
     id = 'custom_autocomplete_dropdown',
@@ -30,7 +29,7 @@ const NsAutocomplete = ({
     const listboxRef = useRef<HTMLUListElement | null>(null);
 
     useEffect(() => {
-        if (listboxRef?.current && options.length > 0) {
+        if (listboxRef.current && options.length > 0) {
             listboxRef.current.scrollTop = scrollTopPosition;
         }
     }, [options, scrollTopPosition]);
@@ -44,7 +43,7 @@ const NsAutocomplete = ({
         [onSelect]
     );
 
-    const handleInputChange = useCallback(
+    const onInputChange = useCallback(
         (event: React.SyntheticEvent, newInputValue: string) => {
             if (typeof onChange === 'function') {
                 onChange(newInputValue);
@@ -59,82 +58,31 @@ const NsAutocomplete = ({
             placeholder={placeholder}
             InputProps={{
                 ...params.InputProps,
+                className: 'styled-text-field',
                 startAdornment: iconStart,
                 endAdornment: iconEnd,
             }}
         />
     );
 
-    // 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 renderGroupName = ({ key, group, children }: AutocompleteRenderGroupParams) => (
-        <li key={key}>
-            {group ? (
-                <NsTypography variant="p-m" weight="bold" className="p-3">
-                    {group}
-                </NsTypography>
-            ) : null}
-            <ul className="p-0">{children}</ul>
-        </li>
-    );
-
-    const renderClearButton = useCallback(() => {
-        const { show, onClear, text = 'Clear Search' } = clear || {};
-        if (!show) {
-            return null;
-        }
-        return (
-            <li className="text-right p-3">
-                <NsButton onClick={onClear} data-testid="autocomplete-clear-id">
-                    <NsTypography variant="p-xs" weight="bold">
-                        {text}
-                    </NsTypography>
-                </NsButton>
-            </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 = useCallback(() => {
-        const { show, text = 'See More Results' } = seeMore || {};
-        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>
-        );
-    }, [seeMore, handleSeeMore]);
-
     const renderListBoxComponent = ({ children, ...otherProps }: ComponentBoxProps) => (
         <List {...otherProps} ref={listboxRef}>
-            {renderClearButton()}
+            <ClearButton show={clear?.show} text={clear?.text} onClear={clear?.onClear} />
             {children}
-            {renderSeeMoreButton()}
+            <SeeMoreButton
+                onSeeMore={seeMore?.onSeeMore}
+                show={seeMore?.show}
+                text={seeMore?.text}
+                options={options}
+                setScrollTopPosition={setScrollTopPosition}
+                listboxRef={listboxRef}
+            />
         </List>
     );
 
@@ -154,7 +102,7 @@ const NsAutocomplete = ({
             ListboxProps={{ scrollTopPosition } as HTMLAttributes<HTMLUListElement>} // Pass the current scroll position
             renderGroup={renderGroupName}
             onChange={handleSelect}
-            onInputChange={handleInputChange}
+            onInputChange={onInputChange}
             value={value}
             inputValue={inputValue}
             filterOptions={

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

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

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

@@ -0,0 +1,47 @@
+import { Dispatch, MutableRefObject, SetStateAction, useCallback } from 'react';
+import { NsButton, NsTypography } from '../..';
+
+type SeeMoreButtonProps = {
+    text?: string;
+    show?: boolean;
+    onSeeMore?(): void;
+    options: any[];
+    setScrollTopPosition: Dispatch<SetStateAction<number>>;
+    listboxRef: MutableRefObject<HTMLUListElement | null>;
+};
+
+export const SeeMoreButton = (props: SeeMoreButtonProps) => {
+    const {
+        show = false,
+        text = 'See More Results',
+        onSeeMore,
+        options,
+        listboxRef,
+        setScrollTopPosition,
+    } = props || {};
+
+    const handleSeeMore = useCallback(() => {
+        /*  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();
+        }
+    }, [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>
+    );
+};

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

@@ -0,0 +1,17 @@
+import { AutocompleteRenderGroupParams } from '@mui/material';
+import { NsTypography, OptionsProps } from '../..';
+
+export const renderGroupName = ({ key, group, children }: AutocompleteRenderGroupParams) => (
+    <li key={key}>
+        {group ? (
+            <NsTypography variant="p-m" weight="bold" className="p-3">
+                {group}
+            </NsTypography>
+        ) : null}
+        <ul className="p-0">{children}</ul>
+    </li>
+);
+
+export const renderOptionLabel = (option: OptionsProps) => option.value;
+
+export const renderGroupBy = (option: OptionsProps) => option.group as string;

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

@@ -0,0 +1,49 @@
+import { NsAutocompleteProps, OptionsProps } from '../types';
+import React, { useState } from 'react';
+
+import { NsAutocomplete } from '..';
+import { OptionUiComponent } from '../mock/MockUI';
+
+const PAGE_SIZE = 6;
+
+export const ACWithoutClose = (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);
+    };
+
+    return (
+        <div>
+            <NsAutocomplete
+                {...AutoCompleteProps}
+                options={args.options.slice(0, pageNo)}
+                onChange={handleInputChange}
+                onSelect={onSelect}
+                OptionsUI={OptionUiComponent}
+                value={selectedOption}
+                inputValue={searchTerms}
+                iconEnd={undefined}
+            />
+        </div>
+    );
+};

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

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsAutocomplete } from '..';
+import { AutocompleteMockList } from '../mock/MockData';
+import { NsIcon } from '../../icon';
+import { RenderAutoComplete } from './RenderAutoComplete';
+import { ACWithoutClose } from './ACWithoutClose';
+
+type ComponentType = typeof NsAutocomplete;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Inputs/NsAutocomplete',
+    component: NsAutocomplete,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        children: {
+            control: 'text',
+        },
+        options: {
+            description: 'An array of objects representing the available options for the autocomplete.',
+        },
+        OptionsUI: {
+            description: '(optional): A custom component to render each option in the dropdown.',
+        },
+        loading: {
+            description: '(optional): A boolean indicating whether the autocomplete is in a loading state.',
+        },
+        noOptionsText: { description: '(optional): The text to display when there are no options available.' },
+        onSelect: { description: '(optional): A callback function to be called when an option is selected.' },
+        onChange: { description: '(optional): A callback function to be called when the input value changes.' },
+        clear: { description: '(optional): An object containing properties for the clear button.' },
+        seeMore: { description: '(optional): An object containing properties for the "see more" button.' },
+        placeholder: { description: '(optional): The placeholder text for the input field.' },
+        className: { description: '(optional): Additional CSS class name(s) for the autocomplete component.' },
+        iconStart: {
+            description: '(optional): An icon or React node to be displayed at the start of the input field.',
+        },
+        iconEnd: { description: '(optional): An icon or React node to be displayed at the end of the input field.' },
+        inputValue: { description: ' The current value of the input field.' },
+        value: { description: ': The currently selected option.' },
+        isFilterEnabled: { description: ' (optional): A boolean indicating whether filtering of options is enabled.' },
+    },
+    args: {
+        options: AutocompleteMockList,
+        seeMore: {
+            text: 'See More Results',
+            show: true,
+            onSeeMore: () => {
+                throw new Error('Function not implemented.');
+            },
+        },
+        clear: {
+            text: 'Clear Recent Searches',
+            show: true,
+            onClear: () => {
+                throw new Error('Function not implemented.');
+            },
+        },
+        iconStart: <NsIcon name="search" />,
+        iconEnd: <NsIcon name="roundedClose" size="small" colorOverride="#F5F5F5" />,
+        placeholder: 'search',
+    },
+} as MetaStory;
+
+export const Autocomplete: Story = {
+    render: RenderAutoComplete,
+};
+
+export const WithoutClose: Story = {
+    render: ACWithoutClose,
+};

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

@@ -0,0 +1,60 @@
+import { NsAutocompleteProps, OptionsProps } from '../types';
+import { IconButton } from '@mui/material';
+import React, { useState } from 'react';
+
+import { NsAutocomplete } from '..';
+import { NsIcon } from '../../icon';
+import { OptionUiComponent } from '../mock/MockUI';
+
+const PAGE_SIZE = 6;
+
+export 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="roundedClose" size="xLarge" colorOverride="#F5F5F5" />
+                    </IconButton>
+                }
+                value={selectedOption}
+                inputValue={searchTerms}
+            />
+        </div>
+    );
+};

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

@@ -31,7 +31,7 @@ export type NsAutocompleteProps = {
     iconEnd?: string | React.ReactNode;
     inputValue: string;
     value: string | OptionsProps | null;
-    isFilterEnabled?:boolean
+    isFilterEnabled?: boolean;
 } & AdditionalProps;
 
 export type ListUiProps = {

package/src/common/icon/NsIconVariants.ts

@@ -21,6 +21,7 @@ import UserIcon from './icons/UserIcon';
 import HamburgerIcon from './icons/HamburgerIcon';
 import UserOutline from './icons/UserOutline';
 import Check from './icons/Check';
+import RoundedClose from './icons/RoundedClose';
 import ChevronRight from './icons/ChevronRight';
 
 const IconVariants = {
@@ -47,6 +48,7 @@ const IconVariants = {
     userIcon: UserIcon,
     userOutline: UserOutline,
     warning: WarningIcon,
+    roundedClose: RoundedClose,
     chevronRight: ChevronRight,
 };
 

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

@@ -0,0 +1,28 @@
+/* eslint-disable max-len */
+
+import { SvgIconProps, SvgIcon } from '@mui/material';
+
+const RoundedClose = (props: SvgIconProps) => {
+    return (
+        <SvgIcon
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+            data-testid="roundedClose"
+        >
+            <path
+                d="M4.4443 18.3147C6.08879 19.4135 8.02219 20 10 20C12.6505 19.9946 15.1909 18.9393 17.0651 17.0651C18.9393 15.1909 19.9946 12.6505 20 10C20 8.02219 19.4135 6.08879 18.3147 4.4443C17.2159 2.79981 15.6541 1.51809 13.8268 0.761209C11.9996 0.00433284 9.98891 -0.1937 8.0491 0.192152C6.10929 0.578004 4.32746 1.53041 2.92893 2.92894C1.53041 4.32746 0.578004 6.10929 0.192152 8.0491C-0.1937 9.98891 0.00433242 11.9996 0.761209 13.8268C1.51809 15.6541 2.79981 17.2159 4.4443 18.3147Z"
+                fill={props.color}
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M6.18907 6.11091C6.5796 5.72039 7.21276 5.72039 7.60329 6.11091L10.0782 8.58579L12.553 6.11091C12.9436 5.72039 13.5767 5.72039 13.9672 6.11091C14.3578 6.50144 14.3578 7.1346 13.9672 7.52513L11.4924 10L13.9672 12.4749C14.3578 12.8654 14.3578 13.4986 13.9672 13.8891C13.5767 14.2796 12.9436 14.2796 12.553 13.8891L10.0782 11.4142L7.60329 13.8891C7.21276 14.2796 6.5796 14.2796 6.18908 13.8891C5.79855 13.4986 5.79855 12.8654 6.18907 12.4749L8.66395 10L6.18907 7.52513C5.79855 7.1346 5.79855 6.50144 6.18907 6.11091Z"
+                fill="#252525"
+            />
+        </SvgIcon>
+    );
+};
+
+export default RoundedClose;

package/src/common/input/InputWrapper.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@mui/material';
 import { styled, nuskinTheme, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
-import {fieldStateType} from './types.d';
+import { fieldStateType } from './types.d';
 
 const { isDarkMode } = ColorUtils;
 const { colors } = nuskinTheme;

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

@@ -1,108 +0,0 @@
-/**
- * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
- * NsAutocomplete.stories.tsx
- * @description NsAutocomplete component.
- */
-
-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, 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/Inputs/NsAutocomplete',
-    component: NsAutocomplete,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        children: {
-            control: 'text',
-        },
-    },
-    args: {
-        options: AutocompleteMockList,
-        seeMore: {
-            text: 'See More Results',
-            show: true,
-            onSeeMore: () => {
-                throw new Error('Function not implemented.');
-            },
-        },
-        clear: {
-            text: 'Clear Recent Searches',
-            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: RenderAutocomplete,
-};