@nuskin/foundation-ui-components 1.6.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.6.0",
+    "version": "1.7.0",
     "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/card/NsBrandCard.tsx

@@ -0,0 +1,94 @@
+import { ShoppingCart } from '@mui/icons-material';
+import Box from '@mui/material/Box';
+import { styled } from '@nuskin/foundation-theme';
+import { NsTypography } from '../';
+import NsBrandWrapper from './NsBrandWrapper';
+import NsBrandLogo from './NsBrandLogo';
+import NsBgCard from './NsBgCard';
+import NsButton from '../button/NsButton';
+import cardSizes from './cardSizes';
+
+type NsBrandCardProps = {
+    title?: string;
+    brandImageUrl: string;
+    backgroundImageUrl: string;
+    size?: 'small' | 'large';
+    button?: boolean;
+    onClick?: () => void;
+};
+
+const CardContainer = styled((props: any) => <Box {...props} />)(({ size }) => {
+    const { small, large } = cardSizes;
+    let width, height;
+
+    if (size === 'small') {
+        width = small.width;
+        height = small.height;
+    } else {
+        width = large.width;
+        height = large.height;
+    }
+
+    return {
+        width,
+        display: 'flex',
+        alignItems: 'start',
+        justifyContent: 'center',
+        position: 'relative',
+        flexDirection: 'column',
+        '.brand-title': {
+            marginTop: '15px',
+            fontSize: '20px',
+            display: 'inline-block',
+            wordBreak: 'break-word',
+        },
+        ':hover': {
+            '.brand-title': {
+                opacity: '0.7',
+            },
+        },
+        '.cta': {
+            marginTop: '15px',
+        },
+        '.image': {
+            width,
+            height,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+        },
+    };
+});
+export default function NsBrandCard({
+    title,
+    brandImageUrl,
+    backgroundImageUrl,
+    button,
+    size,
+    onClick,
+}: NsBrandCardProps) {
+    return (
+        <CardContainer role="brand-card" component="div" data-testid="brand-card" size={size} onClick={onClick}>
+            <NsBgCard backgroundImageUrl={backgroundImageUrl} className="image">
+                <NsBrandWrapper>
+                    <NsBrandLogo component="img" image={brandImageUrl} />
+                </NsBrandWrapper>
+            </NsBgCard>
+            {title ? (
+                <NsTypography variant="h3" className="brand-title">
+                    {title}
+                </NsTypography>
+            ) : null}
+            {button ? (
+                <NsButton
+                    className="cta"
+                    darkModeEnabled={false}
+                    variant="outlined"
+                    fullWidth={true}
+                    endIcon={<ShoppingCart />}
+                >
+                    Add to Cart
+                </NsButton>
+            ) : null}
+        </CardContainer>
+    );
+}

package/src/common/card/NsCheckoutCard.tsx

@@ -0,0 +1,92 @@
+import Box from '@mui/material/Box';
+import { styled } from '@nuskin/foundation-theme';
+import { NsIcon, NsIconNameType, NsLink } from '../';
+import { useState } from 'react';
+
+type NsCheckoutCardProps = {
+    icon: NsIconNameType;
+    title: string;
+    address: string;
+    onClick: () => void;
+};
+
+const CardContainer = styled(Box)(() => {
+    return {
+        backgroundColor: '#fff',
+        display: 'flex',
+        width: '345px',
+        height: 'auto',
+        border: '2px solid #B2B2B2',
+        borderRadius: '2px',
+        '.left-bar': {
+            width: '4px',
+            height: 'auto',
+            backgroundColor: '#22D55C',
+        },
+        '.content': {
+            display: 'flex',
+            flexDirection: 'row',
+            gap: '10px',
+            margin: '10px',
+            width: '100%',
+        },
+        '.text-content': {
+            width: '100%',
+        },
+        '.title': {
+            fontSize: '14px',
+            fontWeight: '700',
+        },
+        '.address': {
+            fontSize: '13px',
+            fontWeight: '400',
+        },
+        '.action-link': {
+            color: '#7123D9',
+            fontSize: '14px',
+            fontWeight: '700',
+            letterSpacing: '0.7',
+        },
+        '.icon-right': {
+            marginLeft: 'auto',
+        },
+        '.icon': {
+            ':hover': {
+                cursor: 'pointer',
+            },
+        },
+    };
+});
+
+export default function NsCheckoutCard({ title, address, icon, onClick }: NsCheckoutCardProps) {
+    const [dropdownIcon, setDropdownIcon] = useState(false);
+    const handleClick = () => {
+        setDropdownIcon(!dropdownIcon);
+    };
+
+    return (
+        <CardContainer role="checkout-card" component="div" data-testid="checkout-card" onClick={onClick}>
+            <div className="left-bar"></div>
+            <div className="content">
+                <span>
+                    <NsIcon name={icon} />
+                </span>
+                <div className="text-content">
+                    <article className="title">{title}</article>
+                    <article className="address">{address}</article>
+                    <NsLink className="action-link" href={''}>
+                        CHANGE
+                    </NsLink>
+                </div>
+                <span className="icon-right">
+                    <NsIcon
+                        name={dropdownIcon ? 'arrowUp' : 'arrowDown'}
+                        className="icon"
+                        onClick={handleClick}
+                        testId="dropdown-icon"
+                    />
+                </span>
+            </div>
+        </CardContainer>
+    );
+}