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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.0.0-develop.4",
+    "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",
@@ -31,7 +31,10 @@
         "test:coverage": "yarn test --coverage",
         "test:watch": "jest --watch",
         "storybook": "storybook dev -p 6007",
-        "build-storybook": "storybook build"
+        "build-storybook": "storybook build",
+        "export": "next export",
+        "prepare": "husky install",
+        "types:check": "tsc --pretty --noEmit"
     },
     "dependencies": {
         "@emotion/react": "^11.10.6",
@@ -39,8 +42,7 @@
         "@mui/icons-material": "^5.11.11",
         "@mui/material": "5.4.2",
         "@next/font": "13.2.4",
-        "@nuskin/foundation-theme": "1.0.0-cft-33.12",
-        "@types/jest": "^29.5.0",
+        "@nuskin/foundation-theme": "1.0.0-develop.5",
         "framer-motion": "^10.8.5",
         "next": "13.2.4",
         "react": "18.2.0",
@@ -69,8 +71,10 @@
         "@storybook/testing-library": "^0.1.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^14.0.0",
+        "@types/jest": "^29.5.0",
         "@types/lodash": "^4.14.191",
         "@types/node": "18.15.0",
+        "@types/ramda": "^0.29.3",
         "@types/react": "18.0.28",
         "@types/react-dom": "18.0.11",
         "@types/react-slick": "^0.23.10",
@@ -86,6 +90,7 @@
         "eslint-plugin-json": "^3.1.0",
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-storybook": "^0.6.11",
+        "husky": "^8.0.0",
         "jest": "^29.5.0",
         "jest-environment-jsdom": "^29.5.0",
         "storybook": "^7.0.7"

package/src/common/accordion/specs/NsAccordion.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent, screen } from '@/test-utils/index';
-import { NsAccordion, NsAccordionProps } from '@/common/index';
+import { AccordionVariant, NsAccordion, NsAccordionProps } from '@/common/index';
 
 const generateContentArray = (count: number) => {
     const arr = [] as NsAccordionProps['contentArray'];
@@ -22,6 +22,7 @@ describe('NsAccordion', () => {
         },
         allowMultipleExpanded: false,
         contentArray,
+        variant: AccordionVariant.Basic,
     };
 
     it('renders without error', () => {
@@ -68,6 +69,7 @@ describe('NsAccordion', () => {
             },
             allowMultipleExpanded: false,
             contentArray,
+            variant: AccordionVariant.Basic,
         };
         const { getAllByText } = render(<NsAccordion {...defaultProps} allowMultipleExpanded />);
         const [title1, title2, title3] = getAllByText(/Title /i);

package/src/common/accordion/specs/NsAccordionHeader.spec.tsx

@@ -1,18 +1,29 @@
 import React from 'react';
 import { render, fireEvent } from '@/test-utils/index';
-import { NsAccordionHeader } from '@/common/index';
+import { NsAccordionHeader, AccordionVariant } from '@/common/index';
 
 describe('NsAccordionHeader', () => {
     it('renders title correctly', () => {
         const onClick = jest.fn();
         const title = 'Section Header';
-        const { getByText } = render(<NsAccordionHeader title={title} onClick={onClick} />);
+        const { getByText } = render(
+            <NsAccordionHeader
+                variant={AccordionVariant.Basic}
+                title={title}
+                onClick={onClick}
+            />
+        );
         expect(getByText(title)).toBeInTheDocument();
     });
 
     it('calls onClick handler when clicked', () => {
         const onClick = jest.fn();
-        const { container } = render(<NsAccordionHeader title="Section Header" onClick={onClick} />);
+        const { container } = render(
+            <NsAccordionHeader
+                variant={AccordionVariant.Basic}
+                title="Section Header"
+                onClick={onClick}
+            />);
         const header = container.querySelector('header');
         if (header) {
             fireEvent.click(header);
@@ -25,6 +36,7 @@ describe('NsAccordionHeader', () => {
         const onClick = jest.fn();
         const { container } = render(
             <NsAccordionHeader
+                variant={AccordionVariant.Basic}
                 title="Section Header"
                 additionalProps={{ className: additionalClassName }}
                 onClick={onClick}
@@ -35,13 +47,17 @@ describe('NsAccordionHeader', () => {
 
     it('renders with expanded class when isOpen is true', () => {
         const onClick = jest.fn();
-        const { container } = render(<NsAccordionHeader title="Section Header" isOpen onClick={onClick} />);
+        const { container } = render(
+            <NsAccordionHeader variant={AccordionVariant.Basic} title="Section Header" isOpen onClick={onClick} />
+        );
         expect(container.querySelector('header')).toHaveClass('expanded');
     });
 
     it('renders with header icon', () => {
         const onClick = jest.fn();
-        const { getByTestId } = render(<NsAccordionHeader title="Section Header" onClick={onClick} />);
+        const { getByTestId } = render(
+            <NsAccordionHeader variant={AccordionVariant.Basic} title="Section Header" onClick={onClick} />
+        );
         expect(getByTestId('icon')).toBeInTheDocument();
     });
 });

package/src/common/accordion/specs/NsAccordionItem.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent } from '@/test-utils/index';
-import { NsAccordionItem } from '@/common/index';
+import { NsAccordionItem, AccordionVariant } from '@/common/index';
 
 describe('NsAccordionItem', () => {
     const title = 'Accordion Section Title';
@@ -8,7 +8,13 @@ describe('NsAccordionItem', () => {
 
     it('renders title correctly', () => {
         const { getByText } = render(
-            <NsAccordionItem isOpen={false} toggleOpen={() => {}} title={title} content={content} />
+            <NsAccordionItem
+                variant={AccordionVariant.Basic}
+                isOpen={false}
+                toggleOpen={() => {}}
+                title={title}
+                content={content}
+            />
         );
         expect(getByText(title)).toBeInTheDocument();
     });
@@ -16,7 +22,13 @@ describe('NsAccordionItem', () => {
     it('calls toggleOpen function when clicked on the section header', () => {
         const toggleOpen = jest.fn();
         const { getByText } = render(
-            <NsAccordionItem isOpen={false} toggleOpen={toggleOpen} title={title} content={content} />
+            <NsAccordionItem
+                variant={AccordionVariant.Basic}
+                isOpen={false}
+                toggleOpen={toggleOpen}
+                title={title}
+                content={content}
+            />
         );
         fireEvent.click(getByText(title));
         expect(toggleOpen).toHaveBeenCalledTimes(1);
@@ -24,14 +36,26 @@ describe('NsAccordionItem', () => {
 
     it('renders content when isOpen is true', () => {
         const { getByText } = render(
-            <NsAccordionItem isOpen={true} toggleOpen={() => {}} title={title} content={content} />
+            <NsAccordionItem
+                variant={AccordionVariant.Basic}
+                isOpen={true}
+                toggleOpen={() => {}}
+                title={title}
+                content={content}
+            />
         );
         expect(getByText(content)).toBeInTheDocument();
     });
 
     it('does not render content when isOpen is false', () => {
         const { queryByText } = render(
-            <NsAccordionItem isOpen={false} toggleOpen={() => {}} title={title} content={content} />
+            <NsAccordionItem
+                variant={AccordionVariant.Basic}
+                isOpen={false}
+                toggleOpen={() => {}}
+                title={title}
+                content={content}
+            />
         );
         expect(queryByText(content)).toBeNull();
     });

package/src/common/accordion/specs/NsCollapse.spec.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { render, screen } from '@/test-utils/index';
-import { NsCollapse } from '@/common/index';
+import { NsCollapse, AccordionVariant } from '@/common/index';
 
 describe('NsCollapse', () => {
     it('renders children when isOpen is true', () => {
         const { getByText } = render(
-            <NsCollapse isOpen>
+            <NsCollapse isOpen variant={AccordionVariant.Basic}>
                 <div>Child 1</div>
                 <div>Child 2</div>
             </NsCollapse>
@@ -16,7 +16,7 @@ describe('NsCollapse', () => {
 
     it('does not render children when isOpen is false', () => {
         render(
-            <NsCollapse isOpen={false}>
+            <NsCollapse isOpen={false} variant={AccordionVariant.Basic}>
                 <div>Child 1</div>
                 <div>Child 2</div>
             </NsCollapse>
@@ -27,7 +27,7 @@ describe('NsCollapse', () => {
     it('renders with additional class name', () => {
         const additionalClassName = 'custom-class';
         const { container } = render(
-            <NsCollapse additionalProps={{ className: additionalClassName }} isOpen>
+            <NsCollapse additionalProps={{ className: additionalClassName }} isOpen variant={AccordionVariant.Basic}>
                 <div>Child 1</div>
                 <div>Child 2</div>
             </NsCollapse>

package/src/common/accordion/specs/NsToggleSection.spec.tsx

@@ -1,19 +1,24 @@
 import React from 'react';
+
+import { AccordionVariant, NsToggleSection } from '@/common/index';
+
 import { render, fireEvent } from '@/test-utils/index';
-import { NsToggleSection } from '@/common/index';
 
 describe('NsToggleSection', () => {
     const title = 'Toggle Section Title';
     const content = 'Toggle Section Content';
 
     it('renders title correctly', () => {
-        const { getByText } = render(<NsToggleSection title={title}>{content}</NsToggleSection>);
+        const { getByText } = render(
+            <NsToggleSection variant={AccordionVariant.Basic} title={title}>{content}</NsToggleSection>
+        );
         expect(getByText(title)).toBeInTheDocument();
     });
 
     it('toggles content visibility when clicked on the section header', () => {
-        const { getByText, queryByText } = render(<NsToggleSection title={title}>{content}</NsToggleSection>);
-
+        const { getByText, queryByText } = render(
+            <NsToggleSection variant={AccordionVariant.Basic} title={title}>{content}</NsToggleSection>
+        );
         expect(queryByText(content)).toBeNull();
         fireEvent.click(getByText(title));
         expect(getByText(content)).toBeInTheDocument();
@@ -23,7 +28,7 @@ describe('NsToggleSection', () => {
 
     it('sets defaultOpen prop correctly', () => {
         const { getByText } = render(
-            <NsToggleSection title={title} defaultOpen>
+            <NsToggleSection variant={AccordionVariant.Basic} title={title} defaultOpen>
                 {content}
             </NsToggleSection>
         );

package/src/common/alert/NsAlert.spec.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render, fireEvent, screen, act } from '@/test-utils/index';
-// import { act } from 'react-dom/test-utils';
 import NsAlert from './NsAlert';
 
 const addEventListenerMock = jest.spyOn(window, 'addEventListener');

package/src/common/alert/NsAlert.styled.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
-import { styled, css } from '@nuskin/foundation-theme';
-import { getAppColor } from '@nuskin/foundation-theme/src/utils/color-utils';
-import { FoundationTheme } from '@nuskin/foundation-theme/src/themes';
+import { styled, css, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
+
+const { color } = ColorUtils;
 
 import type { AlertContainerParams, AlertType, AlertParams, TypeMapCSS } from './types.d';
 const gutter_width = '10px';
@@ -43,7 +43,7 @@ export const AlertContainer = styled.div<AlertContainerParams>`
     }
     text-align: left;
 `;
-
+//[Todo-Arun] - Fonts should be driven through @next/font and according to theme
 const fontFamilyStyles = css`
     font-family: 'proxima-nova', 'OpenSans', 'Pridi', 'NotoSans', 'NotoSansSC', 'NotoSansHebrew', 'NotoSansJapanese',
         'Hiragino Kaku Gothic Pro', 'Yu Gothic Medium', 'Yu Gothic', Meiryo, 'source-han-sans-japanese',
@@ -57,11 +57,11 @@ export const Alert = styled.div<AlertParams>`
     grid-template-rows: [row1] auto;
     grid-auto-row: auto;
     grid-auto-flow: row;
-    background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
-    border: 1px solid ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+    background-color: ${color('primary', 'white')};
+    border: 1px solid ${color('primary', 'black')};
     min-height: ${({ type }) => TypeMap?.[type]?.['min-height']};
     padding: ${({ type }) => TypeMap?.[type]?.['padding']};
-    color: ${({ context, theme }) => getAppColor(theme, contextType?.[context] as FoundationTheme.AppColors, '40')} };
+    color: ${(props) => color(contextType?.[props?.context] as FoundationTheme.AppColors, '40')(props)} };
 `;
 
 export const AlertCloseButton = styled.div`
@@ -92,7 +92,7 @@ export const AlertHead = styled.div`
     justify-content: center;
     span {
         ${fontFamilyStyles}
-        color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+        color: ${color('primary', 'black')};
         font-weight: 600;
         font-size: 18px;
         line-height: 20px;
@@ -101,14 +101,14 @@ export const AlertHead = styled.div`
 
 export const AlertContent = styled.div<{ type: AlertType }>`
     margin-top: 8px;
-    color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+    color: ${color('primary', 'black')};
     grid-column-start: ${({ type }) => TypeMap?.[type]?.['content-column-start']};
     grid-column-end: ${({ type }) => TypeMap?.[type]?.['content-column-end']};
 `;
 
 export const AlertFoot = styled.div<{ type: AlertType }>`
     margin-top: 8px;
-    color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+    color: ${color('primary', 'black')};
     display: ${({ type }) => TypeMap?.[type]?.['foot-display']};
     ${fontFamilyStyles}
     font-weight: 300;

package/src/common/alert/NsAlert.tsx

@@ -1,5 +1,6 @@
-/* eslint-disable react/require-default-props */
 import React, { useEffect, useState } from 'react';
+import { FoundationTheme } from '@nuskin/foundation-theme';
+
 import {
     AlertContainer,
     Alert,
@@ -13,7 +14,6 @@ import {
 import type { NsAlertProps, HeaderProps, ContextType, AlertType } from './types.d';
 import { NsIcon } from '../icon';
 import { NsIconNameType } from '../icon/types';
-import { FoundationTheme } from '@nuskin/foundation-theme/src/themes';
 
 const Header: React.FC<HeaderProps> = ({ children, head }) => (
     <>
@@ -57,7 +57,7 @@ export default function NsAlert({
     onDismiss = undefined,
 }: NsAlertProps) {
     const [alertType, setAlertType] = useState('banner');
-    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+    const [windowWidth, setWindowWidth] = useState(0);
 
     const hasDismissListener = typeof onDismiss === 'function';
 
@@ -106,6 +106,7 @@ export default function NsAlert({
     }, [context, type]);
 
     useEffect(() => {
+        setWindowWidth(window?.innerWidth);
         window.addEventListener('resize', handleResize);
         return () => {
             window.removeEventListener('resize', handleResize);

package/src/common/auth-dropdown/NsAuthDropdown.styled.ts

@@ -1,9 +1,10 @@
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
-import { getAppColor } from '@nuskin/foundation-theme/src/utils/color-utils';
-const { getPaletteColor } = ColorUtils;
 
+//[TODO-Arun] - Use from custom color variables
 const MAGENTA_COLOR = '#bb29bb';
 
+const { color, paletteColor } = ColorUtils;
+
 export const AuthDropdownContainer = styled.div`
     position: relative;
     display: inline-block;
@@ -19,7 +20,7 @@ export const AuthDropdown = styled.div`
     z-index: 600;
     top: calc(100% + 18px);
     right: 5%;
-    box-shadow: 0 0 5px 0 ${({ theme }) => getAppColor(theme, 'neutral', '20')};
+    box-shadow: 0 0 5px 0 ${color('neutral', '20')};
     transition: all 0.15s ease-in-out;
     padding: 25px;
 `;
@@ -39,21 +40,21 @@ export const Triangle = styled.div`
         position: absolute;
         width: 14px;
         height: 14px;
-        background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
+        background-color: ${color('primary', 'white')};
         transform: rotate(45deg);
         top: 17px;
         left: 5px;
-        box-shadow: 0 0 5px 0 ${({ theme }) => getAppColor(theme, 'neutral', '20')};
+        box-shadow: 0 0 5px 0 ${color('neutral', '20')};
     }
 `;
 
-export const AuthHead = styled.div`
+export const AuthHead = styled.div<{ darkModeEnabled: boolean }>`
     cursor: pointer;
     padding: 5px 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    color: ${({ theme }) => getPaletteColor(theme, 'primary')};
+    color: ${paletteColor('primary')};
 `;
 
 export const Button = styled.div`
@@ -69,17 +70,17 @@ export const SignInButton = styled(Link)`
     padding: 13px;
     width: 100%;
     background-color: ${MAGENTA_COLOR};
-    color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
+    color: ${color('primary', 'white')};
     border: 0;
     font-size: 16px;
     &:hover {
-        background-color: ${({ theme }) => getAppColor(theme, 'neutral', '70')};
+        background-color: ${color('neutral', '70')};
     }
 `;
 
 export const SignUpLinkContainer = styled.div`
     margin-top: 15px;
-    color: ${({ theme }) => getAppColor(theme, 'primary', 'main')};
+    color: ${color('primary', 'main')};
     font-size: 13px;
     line-height: 16px;
     text-align: left;
@@ -95,7 +96,7 @@ export const SignUpLink = styled(Link)`
     position: relative;
     transition: all 0.15s ease-in-out;
     &:hover {
-        color: ${({ theme }) => getAppColor(theme, 'neutral', '70')};
+        color: ${color('neutral', '70')};
         font-size: 14px;
     }
     &:hover::after {

package/src/common/auth-dropdown/NsAuthDropdown.tsx

@@ -20,6 +20,7 @@ const NsAuthDropdown = ({
     signUpLinkPrefixText,
     titleText,
     closeOnMouseLeave = false,
+    darkModeEnabled = true,
 }: NsAuthDropdownProps) => {
     const [isOpen, setIsOpen] = useState(false);
 
@@ -35,7 +36,7 @@ const NsAuthDropdown = ({
 
     return (
         <AuthDropdownContainer>
-            <AuthHead data-testid="auth-head" onClick={handleToggle}>
+            <AuthHead data-testid="auth-head" onClick={handleToggle} darkModeEnabled={darkModeEnabled}>
                 <Button>{titleText}</Button>
                 <NsIcon testId="chevron-icon" name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />
                 {isOpen ? (

package/src/common/auth-dropdown/types.d.ts

@@ -1,3 +1,5 @@
+import { AdditionalProps } from '../common.types';
+
 export type NsAuthDropdownProps = {
     signInRedirectLink: string;
     signUpRedirectLink: string;
@@ -6,4 +8,4 @@ export type NsAuthDropdownProps = {
     signUpLinkPrefixText: string;
     titleText: string;
     closeOnMouseLeave?: boolean;
-};
+} & AdditionalProps;

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,
 };