@nuskin/foundation-ui-components 1.1.0 → 1.2.0

package/src/common/select/NsSelect.styled.tsx

@@ -1,10 +1,27 @@
+import { HTMLAttributes } from 'react';
 import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
+import { Themed } from '../common.types';
+import { getDropdownHeadBorder } from '../dropdown/NsDropdown.styled';
 const { color, paletteColor, isDarkMode } = ColorUtils;
 
-export const SelectContainer = styled.div<{ disabled: boolean }>`
+interface SelectLabelProps extends HTMLAttributes<HTMLLabelElement> {
+    errorMessage?: string;
+}
+
+export const SelectContainer = styled.div<{ disabled: boolean; errorMessage?: string }>`
     position: relative;
     display: inline-block;
     opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
+    color: ${({ theme, errorMessage }) =>
+        errorMessage ? paletteColor('error')({ theme }) : paletteColor('primary')({ theme })};
+`;
+export const SelectMain = styled.div`
+    position: relative;
+    display: flex;
+`;
+
+export const ErrorContainer = styled.div`
+    color: ${paletteColor('error')};
 `;
 
 export const SelectHead = styled.div<{ type: string; disabled: boolean }>`
@@ -13,8 +30,7 @@ export const SelectHead = styled.div<{ type: string; disabled: boolean }>`
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border: ${({ type, theme }) =>
-        type === 'outlined' ? `1px solid ${color('primary', 'black')({ theme })}` : 'none'};
+    border: ${getDropdownHeadBorder}
     color: ${paletteColor('primary')};
     width: 207px;
     position: relative;
@@ -25,6 +41,18 @@ export const SelectButton = styled.div`
     padding-right: 10px;
 `;
 
+export const LeftArrowContainer = styled.div`
+    display: flex;
+    align-items: center;
+    padding-top: 30px;
+`;
+
+export const RightArrowContainer = styled.div`
+    display: flex;
+    align-items: center;
+    padding-top: 30px;
+`;
+
 export const SelectList = styled.div<{ borderColor: FoundationTheme.PaletteColors }>`
     position: absolute;
     z-index: 100;
@@ -32,54 +60,76 @@ export const SelectList = styled.div<{ borderColor: FoundationTheme.PaletteColor
     padding: 0;
     margin: 0;
     width: -webkit-fill-available;
-    color: ${paletteColor('primary')};
+    color: ${paletteColor('primary', 'main')};
     background-color: ${paletteColor('primary', 'contrastText')};
+    max-height: 200px;
+    overflow-y: auto;
 `;
 
-const getDividerColor = (props: { theme: FoundationTheme.Theme}) => {
-    const dividerColor = !isDarkMode(props) ? color('neutral', '30')(props) : color('neutral', '20')(props);
-    return dividerColor;
-};
-
-const getListBgColor = (props: { theme: FoundationTheme.Theme }) => {
-    const bgColor = !isDarkMode(props) ? color('accentColorB', '10')(props) : color('accentColorB', '50')(props);
-    return bgColor;
+const getDividerColor = ({ theme }: Themed) =>
+    isDarkMode({ theme }) ? color('neutral', '20')({ theme }) : color('neutral', '30')({ theme });
+const getListBgColor = (props: Themed) => {
+    return !isDarkMode(props) ? color('accentColorB', '10')(props) : color('accentColorB', '50')(props);
 };
+type ContainerParam = { borderBottom: string; bgColor: string; color: string; hoveredBg: string };
 
 export const ListItemContainer = styled.div<{ showListDivider: boolean; isSelected: boolean }>`
-     ${({ showListDivider, isSelected, theme }) => `
-        cursor: pointer;
-        padding: 5px 0;
-        border-bottom: 1px solid ${showListDivider ? getDividerColor({ theme }) : 'none'};
-        background-color: ${isSelected ? paletteColor('primary')({ theme }) : 'white'};
-        color: ${isSelected ? 'white' : 'black'};
-
-        &:hover {
-            background-color: ${getListBgColor({ theme })};
-        }
-
-        &:last-child {
-            border-bottom: none;
-        }
-    `}
+    ${({ showListDivider, isSelected, theme }) => {
+        const borderBottom = showListDivider ? getDividerColor({ theme }) : 'none';
+        const bgColor = isSelected ? paletteColor('primary')({ theme }) : 'white';
+        const color = isSelected ? 'white' : 'black';
+        const hoveredBg = getListBgColor({ theme });
+        return createListContainerStyle({ borderBottom, bgColor, color, hoveredBg });
+    }}
 `;
+function createListContainerStyle({ borderBottom, bgColor, color, hoveredBg }: ContainerParam) {
+    return `
+    cursor: pointer;
+    padding: 5px 0;
+    border-bottom: 1px solid ${borderBottom};
+    background-color: ${bgColor};
+    color: ${color};
 
-export const ListItem = styled.div<{ isSelected: boolean}>`
-    padding: 5px 10px;
-    border-left: ${({ isSelected, theme }) =>
-        isSelected ? `2px solid ${paletteColor('primary')({ theme })}` : 'none'};
-    background-color: ${({ isSelected, theme }) =>
-        isSelected ? paletteColor('primary', 'main')({ theme }) : 'white'};
-    color: ${({ isSelected }) => (isSelected ? 'white' : 'black')};
     &:hover {
-        background-color: ${({ isSelected, theme }) =>
-        isSelected ? paletteColor('primary')({ theme }) : getListBgColor({ theme })};
-            font-weight: bold; 
+        background-color: ${hoveredBg};
+    }
+
+    &:last-child {
+        border-bottom: none;
     }
 `;
+}
 
-export const SelectLabel = styled.label`
+const getListItemBgColor = ({ isSelected, theme }: { isSelected: boolean } & Themed) => {
+    if (isSelected) {
+        return paletteColor('primary')({ theme });
+    }
+    return getListBgColor({ theme });
+};
+
+const getListItemBorderLeftColor = ({ isSelected, theme }: { isSelected: boolean } & Themed) => {
+    if (isSelected) {
+        const color = paletteColor('primary')({ theme });
+        return `2px solid ${color}`;
+    }
+    return 'none';
+};
+
+export const SelectLabel = styled.label<SelectLabelProps>`
     display: block;
     margin-bottom: 5px;
-    color: ${paletteColor('primary')} !important;
+    color: ${({ theme, errorMessage }) =>
+        errorMessage ? paletteColor('error')({ theme }) : paletteColor('primary')({ theme })};
+}
 `;
+
+export const ListItem = styled.div<{ isSelected: boolean }>(({ isSelected, theme }) => ({
+    padding: '5px 10px',
+    borderLeft: getListItemBorderLeftColor({ isSelected, theme }),
+    backgroundColor: isSelected ? paletteColor('primary', 'main')({ theme }) : 'white',
+    color: isSelected ? 'white' : 'black',
+    '&:hover': {
+        backgroundColor: getListItemBgColor({ isSelected, theme }),
+        fontWeight: 'bold',
+    },
+}));

package/src/common/select/NsSelect.tsx

@@ -1,8 +1,17 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { SelectContainer, SelectButton, SelectList, SelectHead, SelectLabel } from './NsSelect.styled';
+import React, { useState, useRef, useEffect, Children } from 'react';
+import {
+    SelectContainer,
+    SelectButton,
+    SelectList,
+    SelectHead,
+    SelectLabel,
+    SelectMain,
+    LeftArrowContainer,
+    RightArrowContainer,
+    ErrorContainer,
+} from './NsSelect.styled';
 import { NsIcon } from '../icon';
 import { SelectProps } from './types.d';
-
 const NsSelect: React.FC<SelectProps> = ({
     selectedValue,
     selectedLabel,
@@ -17,9 +26,14 @@ const NsSelect: React.FC<SelectProps> = ({
     label,
     readOnly = false,
     errorMessage,
+    hasArrows,
+    // eslint-disable-next-line no-unused-vars
+    rules,
+    reverseArrowControls,
 }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [value, setValue] = useState(selectedValue || '');
+    const [selectedIndex, setSelectedIndex] = useState(-1);
     const selectContainerRef = useRef<HTMLDivElement>(null);
     const selectHeadRef = useRef<HTMLDivElement>(null);
 
@@ -29,19 +43,16 @@ const NsSelect: React.FC<SelectProps> = ({
         }
     };
 
-    const handleSelect = (input: string) => {
+    const handleSelect = (input: string, index: number) => {
         onSelect(input);
         setIsOpen(false);
         setValue(input);
+        setSelectedIndex(index);
     };
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleClickOutside = (event: MouseEvent) => {
-        if (
-            selectContainerRef.current &&
-            !selectContainerRef.current.contains(event.target as Node) &&
-            isOpen
-        ) {
+        if (selectContainerRef.current && !selectContainerRef.current.contains(event.target as Node) && isOpen) {
             setIsOpen(false);
         }
     };
@@ -55,6 +66,40 @@ const NsSelect: React.FC<SelectProps> = ({
             }, 0);
         }
     };
+    const handleArrowRightClick = () => {
+        if (selectedIndex !== -1) {
+            const nextIndex = reverseArrowControls ? selectedIndex - 1 : selectedIndex + 1;
+            const childrenArray = Children.toArray(children);
+            const optionAtIndex = childrenArray[nextIndex];
+            const { value } = (optionAtIndex as any)?.props ?? {};
+            handleSelect(value, nextIndex);
+        } else {
+            if (!reverseArrowControls) {
+                const nextIndex = selectedIndex + 1;
+                const childrenArray = Children.toArray(children);
+                const optionAtIndex = childrenArray[nextIndex];
+                const { value } = (optionAtIndex as any)?.props ?? {};
+                handleSelect(value, nextIndex);
+            }
+        }
+    };
+    const handleArrowLeftClick = () => {
+        if (selectedIndex !== -1) {
+            const nextIndex = reverseArrowControls ? selectedIndex + 1 : selectedIndex - 1;
+            const childrenArray = Children.toArray(children);
+            const optionAtIndex = childrenArray[nextIndex];
+            const { value } = (optionAtIndex as any)?.props ?? {};
+            handleSelect(value, nextIndex);
+        } else {
+            if (reverseArrowControls) {
+                const nextIndex = selectedIndex + 1;
+                const childrenArray = Children.toArray(children);
+                const optionAtIndex = childrenArray[nextIndex];
+                const { value } = (optionAtIndex as any)?.props ?? {};
+                handleSelect(value, nextIndex);
+            }
+        }
+    };
 
     useEffect(() => {
         document.addEventListener('click', handleClickOutside);
@@ -64,53 +109,73 @@ const NsSelect: React.FC<SelectProps> = ({
     }, [handleClickOutside, isOpen]);
 
     return (
-        <SelectContainer
-            data-testid="select-container"
-            disabled={disabled || readOnly}
-            ref={selectContainerRef}
-            style={{
-                borderColor: errorMessage ? 'red' : undefined,
-                color: errorMessage ? 'red' : 'inherit',
-            }}
-        >
-            {label && <SelectLabel style={{ color: errorMessage ? 'red' : 'inherit' }}>{label}</SelectLabel>}
-            <SelectHead
-                data-testid="select-head"
+        <SelectMain>
+            {hasArrows && (
+                <LeftArrowContainer
+                    onClick={handleArrowLeftClick}
+                    className="LeftArrow"
+                    style={{
+                        visibility:
+                            !reverseArrowControls && (selectedIndex === 0 || selectedIndex < 0) ? 'hidden' : 'visible',
+                    }}
+                >
+                    <NsIcon name="arrowLeft" color="primary" />
+                </LeftArrowContainer>
+            )}
+            <SelectContainer
+                data-testid="select-container"
                 disabled={disabled || readOnly}
-                type={type}
-                onMouseDown={handleMouseClick}
-                tabIndex={0}
-                ref={selectHeadRef}
+                ref={selectContainerRef}
+                errorMessage={errorMessage}
             >
-                <SelectButton>{selectedLabel || placeholder}</SelectButton>
-                {!readOnly && (
-                    <NsIcon testId="chevron-icon" name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />
-                )}
-            </SelectHead>
-            {isOpen ? (
-                <SelectList
-                    data-testid="select-list"
-                    onMouseLeave={closeSelect}
-                    borderColor={selectBorderColor}
-                    className='selectList'
+                {label && <SelectLabel errorMessage={errorMessage}>{label}</SelectLabel>}
+                <SelectHead
+                    data-testid="select-head"
+                    disabled={disabled || readOnly}
+                    type={type}
+                    onMouseDown={handleMouseClick}
+                    tabIndex={0}
+                    ref={selectHeadRef}
                 >
-                    <div style={{ maxHeight: '200px', overflowY: 'auto' }}>
-                        {React.Children.map(children, (child) => {
+                    <SelectButton>{selectedLabel || placeholder}</SelectButton>
+                    {!readOnly && <NsIcon name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />}
+                </SelectHead>
+                {isOpen ? (
+                    <SelectList
+                        data-testid="select-list"
+                        onMouseLeave={closeSelect}
+                        borderColor={selectBorderColor}
+                        className="selectList"
+                    >
+                        {React.Children.map(children, (child, index) => {
                             if (React.isValidElement(child)) {
                                 return React.cloneElement(child, {
                                     // @ts-ignore
-                                    onSelect: handleSelect,
+                                    onSelect: (input: string) => handleSelect(input, index),
                                     selectedValue: value,
                                     showListDivider,
+                                    index,
                                 });
                             }
                             return null;
                         })}
-                    </div>
-                </SelectList>
-            ) : null}
-            {errorMessage && <div style={{ color: 'red' }}>{errorMessage}</div>}
-        </SelectContainer>
+                    </SelectList>
+                ) : null}
+                {errorMessage && <ErrorContainer>{errorMessage}</ErrorContainer>}
+            </SelectContainer>
+            {hasArrows && (
+                <RightArrowContainer
+                    onClick={handleArrowRightClick}
+                    className="RightArrow"
+                    style={{
+                        visibility:
+                            reverseArrowControls && (selectedIndex === 0 || selectedIndex < 0) ? 'hidden' : 'visible',
+                    }}
+                >
+                    <NsIcon name="arrowRight" color="primary" />
+                </RightArrowContainer>
+            )}
+        </SelectMain>
     );
 };
 

package/src/common/select/NsSelectOption.tsx

@@ -24,7 +24,6 @@ export const NsSelectOption: React.FC<SelectOptionProps> = ({
         >
             <ListItem isSelected={value === selectedValue}>{label}</ListItem>
         </ListItemContainer>
-
     );
 };
 export default NsSelectOption;

package/src/common/select/stories/NsSelect.stories.tsx

@@ -1,13 +1,16 @@
 import React, { useState } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import NsSelect from '../NsSelect';
 import NsSelectOption from '../NsSelectOption';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+
+type ComponentType = typeof NsSelect;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
 
 export default {
     title: 'Components/Inputs/NsSelect',
-    decorators: [
-        (story) => <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{story()}</div>,
-    ],
+    decorators: [withCenterDecorator],
     component: NsSelect,
     argTypes: {
         type: { control: 'select', options: ['unfilled', 'outlined'] },
@@ -21,11 +24,12 @@ export default {
         showListDivider: { control: 'boolean' },
         label: { control: 'text' },
         name: { control: 'text' },
-        menuProps:{ control: 'text' },
-        reverseArrowControls:{ control: 'boolean' },
-        validateOnBlur:{ control: 'boolean' },
+        menuProps: { control: 'text' },
+        reverseArrowControls: { control: 'boolean' },
+        validateOnBlur: { control: 'boolean' },
         autoComplete: { control: 'text' },
-        rules: {control: 'array'},
+        rules: { control: 'array' },
+        hasArrows: { control: 'boolean' },
     },
     parameters: {
         options: [
@@ -91,26 +95,25 @@ export default {
         selectedValue: '',
         selectedLabel: '',
         label: 'State',
-        placeholder:'',
-        name:'',
-        menuProps:'auto',
+        placeholder: '',
+        name: '',
+        menuProps: 'auto',
         reverseArrowControls: false,
-        itemText:'Text',
-        itemValue:'Value',
+        itemText: 'Text',
+        itemValue: 'Value',
         validateOnBlur: false,
         autoComplete: '',
-        rules:[]
+        rules: [],
+        hasArrows: false,
     },
-} as ComponentMeta<typeof NsSelect>;
-
-export const Select: ComponentStory<typeof NsSelect> = (args, context) => {
-    const [selectedLabel, setSelectedLabel] = useState(args.selectedLabel);
-    const [selectedValue, setSelectedValue] = useState(args.selectedValue);
+} as MetaStory;
 
-    const options = context.parameters.options;
+const AppSelect = (props: any) => {
+    const [selectedLabel, setSelectedLabel] = useState(props.selectedLabel);
+    const [selectedValue, setSelectedValue] = useState(props.selectedValue);
     const handleSelect = (value: string) => {
         setSelectedValue(value);
-        options.find((option: any) => {
+        props.options.find((option: any) => {
             if (option.value === value) {
                 setSelectedLabel(option.label);
             }
@@ -120,15 +123,21 @@ export const Select: ComponentStory<typeof NsSelect> = (args, context) => {
 
     return (
         <NsSelect
-            {...args}
+            {...props}
             selectedValue={selectedValue}
             selectedLabel={selectedLabel}
             onSelect={handleSelect}
-            label={args.label}
+            label={props.label}
         >
-            {options.map((option: any) => (
+            {props.options.map((option: any) => (
                 <NsSelectOption key={option.value} value={option.value} label={option.label} />
             ))}
         </NsSelect>
     );
 };
+export const Select: Story = {
+    render: (args, context) => {
+        const options = context.parameters.options;
+        return <AppSelect options={options} {...args} />;
+    },
+};

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

@@ -5,7 +5,7 @@ export interface SelectProps {
     selectedValue: string;
     selectedLabel: string;
     onSelect: (arg: string) => void; // eslint-disable-line
-    children: ReactNode;
+    children?: ReactNode | null;
     disabled?: boolean;
     type?: 'outlined' | 'unfilled';
     placeholder?: string;
@@ -14,15 +14,17 @@ export interface SelectProps {
     showListDivider?: boolean;
     label?: string;
     readOnly?: boolean;
-    name?: string; 
+    name?: string;
     errorMessage?: string;
     menuProps?: string | object;
     reverseArrowControls?: boolean;
-    itemText?: string; 
+    itemText?: string;
     itemValue?: string;
     validateOnBlur?: boolean;
     autoComplete?: string;
-    rules?: any[];
+    // eslint-disable-next-line no-undef
+    rules?: Array;
+    hasArrows?: boolean;
 }
 
 export interface SelectOptionProps {

package/src/common/spinner/NsSpinner.spec.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, screen } from '@/test-utils/index';
+import NsSpinner from './NsSpinner';
+
+describe('NsSpinner', () => {
+    test('1.renders spinner', () => {
+        const { container } = render(<NsSpinner additionalProps={{ 'data-testid': 'spinner' }} />);
+
+        expect(screen.getByTestId('spinner')).toBeInTheDocument();
+        expect(container.getElementsByTagName('svg')).toHaveLength(1);
+        expect(screen.getByTestId('spinner')).toHaveStyle('width:100px');
+    });
+
+    test('2.renders spinner with different size', () => {
+        render(<NsSpinner size={200} additionalProps={{ 'data-testid': 'spinner' }} />);
+
+        expect(screen.getByTestId('spinner')).toBeInTheDocument();
+        expect(screen.getByTestId('spinner')).toHaveStyle('width:200px');
+        expect(screen.getByTestId('spinner')).toHaveStyle('height:200px');
+    });
+});

package/src/common/spinner/NsSpinner.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import NsSpinner from './NsSpinner';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+
+type ComponentType = typeof NsSpinner;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Feedback/NsSpinner',
+    component: NsSpinner,
+    decorators: [
+        (Story) => (
+            <div className="flex place-content-center">
+                <Story />
+            </div>
+        ),
+        withCenterDecorator,
+    ],
+    argTypes: {},
+    args: {
+        size: 200,
+    },
+} as MetaStory;
+
+export const Spinner: Story = {};