@nuskin/foundation-ui-components 1.0.0-develop.1 → 1.0.0-develop.3

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

@@ -0,0 +1,29 @@
+/* eslint-disable max-len */
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+/**
+ *
+ * @param props {fill: color to be filled for icon, color: color of the tick icon}
+ */
+const HamburgerIcon = (props: SvgIconProps) => {
+    return (
+        <SvgIcon viewBox="0 0 24 24" {...props} data-testid="hamburgerIcon" xmlns="http://www.w3.org/2000/svg">
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M0 1C0 0.447715 0.447715 0 1 0H19C19.5523 0 20 0.447715 20 1C20 1.55228 19.5523 2 19 2H1C0.447715 2 0 1.55228 0 1Z"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M0 9C0 8.44772 0.447715 8 1 8H19C19.5523 8 20 8.44772 20 9C20 9.55228 19.5523 10 19 10H1C0.447715 10 0 9.55228 0 9Z"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M0 17C0 16.4477 0.447715 16 1 16H19C19.5523 16 20 16.4477 20 17C20 17.5523 19.5523 18 19 18H1C0.447715 18 0 17.5523 0 17Z"
+            />
+        </SvgIcon>
+    );
+};
+
+export default HamburgerIcon;

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

@@ -0,0 +1,30 @@
+/* eslint-disable max-len */
+import { useTheme } from '@mui/material/styles';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+/**
+ *
+ * @param props {fill: color to be filled for icon, color: color of the tick icon}
+ */
+const UserIcon = (props: SvgIconProps) => {
+    const { palette } = useTheme();
+    const strokeColor = palette.primary.main;
+    return (
+        <SvgIcon viewBox="0 0 24 24" {...props} data-testid="userIcon" xmlns="http://www.w3.org/2000/svg">
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23Z"
+                stroke={strokeColor}
+                strokeWidth="2"
+            />
+            <path
+                d="M19 20C18.9425 19.3229 19 17.5669 17.3793 17.2226C14.7126 16.6144 13.931 16.4078 14.1034 14.2272C15.8046 13.0796 15.7816 11.0252 15.7471 8.74139C15.7471 6.67508 14.0695 5 12 5C9.93052 5 8.25287 6.67508 8.25287 8.74139C8.25287 11.0367 8.25287 13.137 9.89655 14.2272C10.0575 16.4078 9.28736 16.6144 6.62069 17.2226C5 17.5669 5.05747 19.3229 5 20"
+                stroke={strokeColor}
+                strokeWidth="2"
+                strokeLinecap="round"
+            />
+        </SvgIcon>
+    );
+};
+
+export default UserIcon;

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

@@ -18,15 +18,24 @@ const WarningIcon = (props: SvgIconProps) => {
         >
             <g id="💎-icon/alert/WarningFill-yellow" transform="translate(1.000000, 1.000000)">
                 <g id="Warning2" transform="translate(0.000000, 1.200000)">
-                    <path d="M17.9465423,14.8670135 L9.44311247,0.246687943 C9.35049358,0.100809118 9.18936767,0.012383152 9.01617259,0.012383152 C8.84297751,0.012383152 8.68185161,
+                    <path
+                        d="M17.9465423,14.8670135 L9.44311247,0.246687943 C9.35049358,0.100809118 9.18936767,0.012383152 9.01617259,0.012383152 C8.84297751,0.012383152 8.68185161,
                     0.100809118 8.58923271,0.246687943 L0.0706452929,14.8670135 C-0.0142965839,15.0216954 -0.0118890438,15.2093943 0.0769925071,15.3618609 C0.165874058,
                     15.5143276 0.328282319,15.6093523 0.505163987,15.6123832 L17.5120236,15.6123832 C17.6889052,15.6093523 17.8513135,15.5143276 17.940195,15.3618609 C18.0290766,
-                    15.2093943 18.0314841,15.0216954 17.9465423,14.8670135 Z" id="Shape" fill="#FEBD00" fill-rule="nonzero"></path>
-                    <path d="M8.19,12.84 C8.16437588,12.6281014 8.2368299,12.4160897 8.38677958,12.2641927 C8.53672927,12.1122956 8.74778837,12.0371121 8.96,12.06 C9.16715704,
+                    15.2093943 18.0314841,15.0216954 17.9465423,14.8670135 Z"
+                        id="Shape"
+                        fill="#FEBD00"
+                        fillRule="nonzero"
+                    ></path>
+                    <path
+                        d="M8.19,12.84 C8.16437588,12.6281014 8.2368299,12.4160897 8.38677958,12.2641927 C8.53672927,12.1122956 8.74778837,12.0371121 8.96,12.06 C9.16715704,
                     12.0467652 9.37034806,12.1211477 9.52,12.265 C9.65709398,12.4241339 9.72701115,12.6303 9.715,12.84 C9.72048715,13.0522748 9.64341383,13.2584012 9.5,
                     13.415 C9.35312473,13.5641498 9.1489517,13.6425377 8.94,13.63 C8.72997224,13.6424095 8.52401376,13.5683367 8.37,13.425 C8.23531653,13.2613056 8.17063593,
-                    13.0510936 8.19,12.84 Z M9.415,11.195 L8.5,11.195 L8.25,5.96 L9.675,5.96 L9.415,11.195 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero">
-                    </path>
+                    13.0510936 8.19,12.84 Z M9.415,11.195 L8.5,11.195 L8.25,5.96 L9.675,5.96 L9.415,11.195 Z"
+                        id="Shape"
+                        fill="#FFFFFF"
+                        fillRule="nonzero"
+                    ></path>
                 </g>
             </g>
         </SvgIcon>

package/src/common/icon/index.ts

@@ -1,3 +1,3 @@
 export { default as NsIcon } from './NsIcon';
 export { default as NsIconVariants } from './NsIconVariants';
-export type { NsIconProps, NsIconNameType, NsIconSizeType } from './types';
+export type { NsIconProps, NsIconNameType, NsIconSizeType } from './types.d';

package/src/common/image/NsImage.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '../../../test-utils';
+import { render, screen } from '@/test-utils/index';
 import NsImage from './NsImage';
 describe('NsImage', () => {
     it('NsImage element renders', () => {

package/src/common/image/NsImage.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsImage } from './';
 
 type ComponentType = typeof NsImage;

package/src/common/image/NsImage.tsx

@@ -1,4 +1,4 @@
-import { NsImageProps } from './types';
+import { NsImageProps } from './types.d';
 
 // eslint-disable-next-line no-unused-vars
 const NsImage = ({ src, width, height, alt, variant, ...rest }: NsImageProps) => {

package/src/common/image/NsNextImage.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '../../../test-utils';
+import { render, screen } from '@/test-utils/index';
 import NsNextImage from './NsNextImage';
 describe('NsNextImage', () => {
     it('test image element renders', () => {

package/src/common/image/NsNextImage.stories.tsx

@@ -1,5 +1,5 @@
 import { NsNextImage } from '.';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import type { StoryObj, Meta } from '@storybook/react';
 
 type ComponentType = typeof NsNextImage;

package/src/common/image/NsNextImage.tsx

@@ -1,4 +1,4 @@
-import { NsNextImageProps } from './types';
+import { NsNextImageProps } from './types.d';
 import Image from 'next/image';
 
 const NsNextImage = ({ src, width, height, alt, fill, priority, ...props }: NsNextImageProps) => {

package/src/common/image/index.ts

@@ -1,3 +1,3 @@
 export { default as NsNextImage } from './NsNextImage';
-export type { NsImageProps, NsNextImageProps } from './types';
+export type { NsImageProps, NsNextImageProps } from './types.d';
 export { default as NsImage } from './NsImage';

package/src/common/index.ts

@@ -1,4 +1,6 @@
+export * from './alert';
 export * from './auth-dropdown';
+export * from './autocomplete';
 export * from './banner';
 export * from './breadcrumb';
 export * from './brand-components';
@@ -8,21 +10,16 @@ export * from './carousal';
 export * from './cart-icon';
 export * from './column-control';
 export * from './checkbox';
+export * from './common.types.d';
 export * from './dropdown';
 export * from './flag';
 export * from './icon';
-export * from './input';
 export * from './image';
-export * from './link';
+export * from './input';
 export * from './label';
-export * from './autocomplete';
-
-/* Dropdown Components */
-export * from './dropdown';
-export * from './auth-dropdown';
-export * from './alert';
+export * from './link';
 export * from './nav-tab';
 export * from './nav-product-card';
+export * from './text-strip';
+export * from './table';
 export * from './typography';
-
-export * from './common.types';

package/src/common/input/InputWrapper.tsx

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

package/src/common/input/NsInputField.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsInputField } from '.';
 import { NsIcon } from '../icon';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsInputField;
 type Story = StoryObj<ComponentType>;
@@ -9,7 +10,7 @@ type MetaStory = Meta<ComponentType>;
 export default {
     title: 'Components/NsInputField',
     component: NsInputField,
-    decorators: [(story) => <div style={{ margin: '20px' }}>{story()}</div>],
+    decorators: [withCenterDecorator],
 
     args: {},
     argTypes: {

package/src/common/input/NsInputField.tsx

@@ -1,6 +1,6 @@
 import { TextField, FormHelperText } from '@mui/material';
 import InputWrapper from './InputWrapper';
-import { NsInputFieldProps } from './types';
+import { NsInputFieldProps } from './types.d';
 import { NsLabel } from '../label';
 import InputFieldWrapper from './InputFieldWrapper';
 import { getAdornmentProps } from './getAdornmentProps';

package/src/common/input/getAdornmentProps.tsx

@@ -1,6 +1,6 @@
 import { NsIcon, NsIconNameType } from '../icon';
 import { InputAdornment } from '@mui/material';
-import { fieldStateType } from './types';
+import { fieldStateType } from './types.d';
 import { ReactNode } from 'react';
 
 type IconMapType = {

package/src/common/input/index.ts

@@ -1,2 +1,2 @@
 export { default as NsInputField } from './NsInputField';
-export type { NsInputFieldProps } from './types';
+export type { NsInputFieldProps } from './types.d';

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

@@ -17,11 +17,26 @@ export type NsInputFieldProps = Omit<
     | 'select'
     | 'SelectProps'
 > & {
+    /**
+     * has default undefined value, and we can update the value to success
+     * on successful validation and update value to 'error' in case of error
+     */
+
     fieldState?: fieldStateType;
     iconStart?: ReactNode;
+    /**
+     * assign react component for end icon
+     */
     iconEnd?: ReactNode;
+    /**
+     * assign react component for side icon
+     */
+
     iconSide?: ReactNode;
     /** purpose of showOptional props is to show additional text 'optional' in the label,
      *  if required = false and this flag is true */
     showOptional?: boolean;
+    defaultValue?: string;
+    rows?: number;
+    id?: string;
 };

package/src/common/label/NsLabel.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsLabel } from '.';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsLabel;
 type Story = StoryObj<ComponentType>;
@@ -8,6 +9,7 @@ type MetaStory = Meta<ComponentType>;
 export default {
     component: NsLabel,
     title: 'Components/NsLabel',
+    decorators: [withCenterDecorator],
 } as MetaStory;
 
 export const Default: Story = {

package/src/common/label/NsLabel.tsx

@@ -1,13 +1,13 @@
-import { InputLabel } from '@mui/material';
-import { NsLabelProps } from './types';
+import { FormLabel } from '@mui/material';
+import { NsLabelProps } from './types.d';
 import { styled, nuskinTheme } from '@nuskin/foundation-theme';
 
 const { colors } = nuskinTheme;
 
-const StyledLabel = styled(InputLabel)(({ theme }: any) => {
+const StyledLabel = styled(FormLabel)<{ fontSize?: number }>(({ theme, fontSize }) => {
     const isLight = theme.palette?.primary?.main === '#252525';
     return {
-        fontSize: '14px',
+        fontSize: fontSize ? `${fontSize}px` : '14px',
         color: theme.palette?.primary?.main ?? '#252525',
         '.optional-label': {
             color: isLight ? colors?.neutral?.[60] : colors?.neutral?.[50],

package/src/common/label/index.ts

@@ -1,2 +1,2 @@
 export { default as NsLabel } from './NsLabel';
-export type { NsLabelProps } from './types';
+export type { NsLabelProps } from './types.d';

package/src/common/link/NsLink.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { styled } from '@nuskin/foundation-theme';
 
-import { render } from '../../../test-utils/index';
+import { render } from '@/test-utils/index';
 import { NsLink } from './';
 
 const CustomLink = styled.a`

package/src/common/link/NsLink.stories.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 import { NsLink } from './';
 import { NsTypography } from '../typography';

package/src/common/link/NsLink.tsx

@@ -6,7 +6,7 @@
 import React, { PropsWithChildren } from 'react';
 
 import { StyledLink, StyledNextLink } from './NsLink.styled';
-import { NsLinkProps } from './types';
+import { NsLinkProps } from './types.d';
 
 /**
  * @component NsLink

package/src/common/link/index.ts

@@ -1,2 +1,2 @@
 export { default as NsLink } from './NsLink';
-export type { NsLinkProps } from './types';
+export type { NsLinkProps } from './types.d';

package/src/common/nav-product-card/NsNavProductCard.spec.tsx

@@ -1,5 +1,5 @@
 import { NsNavProductCard } from '.';
-import { render } from '../../../test-utils';
+import { render } from '@/test-utils/index';
 
 const productImage = `
     https://media.nuskin.com/m/471880e8f6e689f4/Lumi-IO-normal-combo-cleansing-device-and-cleanser.png

package/src/common/nav-product-card/NsNavProductCard.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsNavProductCard } from './';
 
 type ComponentType = typeof NsNavProductCard;

package/src/common/nav-product-card/NsNavProductCard.tsx

@@ -2,7 +2,7 @@
 import React, { PropsWithChildren } from 'react';
 import { NsImage, NsTypography } from '../';
 import { ProductCardContainer } from './NsNavProductCard.styled';
-import { NsNavProductCardProps } from './types';
+import { NsNavProductCardProps } from './types.d';
 
 /* TODO: can we update NsImage with NsNextImage, once storybook 7 is in place */
 export const NsNavProductCard = ({

package/src/common/nav-product-card/index.ts

@@ -1,2 +1,2 @@
 export { NsNavProductCard as NsNavProductCard } from './NsNavProductCard';
-export type { NsNavProductCardProps } from './types';
+export type { NsNavProductCardProps } from './types.d';

package/src/common/nav-tab/NsNavTab.spec.tsx

@@ -1,8 +1,8 @@
 import { fireEvent } from '@testing-library/react';
 import nuskinTheme from '@nuskin/foundation-theme/src/themes/genome-foundation';
 import { NsNavTabComponent } from './NsNavTab';
-import { NavTabs } from './types';
-import { render } from '../../../test-utils';
+import { NavTabs } from './types.d';
+import { render } from '@/test-utils/index';
 
 const { palette } = nuskinTheme;
 

package/src/common/nav-tab/NsNavTab.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsNavTab } from './';
 
 type ComponentType = typeof NsNavTab;

package/src/common/nav-tab/NsNavTab.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren, useState } from 'react';
 import { LayoutGroup } from 'framer-motion';
 import { NsTypography } from '../typography';
 import { NavDrawerContainer, NavTabContainer, NavTabLine, NavTabUnderLine, NavDrawer } from './NsNavTab.styled';
-import { NSNavTabComponentProps } from './types';
+import { NSNavTabComponentProps } from './types.d';
 
 export const NsNavTabComponent = (props: PropsWithChildren<NSNavTabComponentProps>) => {
     const { tabs, className, tabTitleClassName, showDrawer = true } = props;

package/src/common/nav-tab/index.ts

@@ -1,2 +1,2 @@
 export { NsNavTabComponent as NsNavTab } from './NsNavTab';
-export type { NSNavTabComponentProps, NavTabs } from './types';
+export type { NSNavTabComponentProps, NavTabs } from './types.d';

package/src/common/search-bar/NsSeachBar.spec.tsx

@@ -1,4 +1,4 @@
-import { render } from '../../../test-utils';
+import { render } from '@/test-utils/index';
 import NsSearchBar from './NsSearchBar';
 
 describe('Search Bar Component', () => {

package/src/common/table/NsTable.spec.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@/test-utils/index';
+import NsTable from './NsTable';
+
+describe('NsTable', () => {
+    const headers = [
+        { id: 'name', label: 'Name', numeric: false },
+        { id: 'age', label: 'Age', numeric: true },
+    ];
+
+    const items = [
+        { name: 'John', age: 26 },
+        { name: 'Jane', age: 32 },
+        { name: 'Maria', age: 28 },
+        { name: 'Kevin', age: 31 },
+        { name: 'Suzan', age: 25 },
+        { name: 'Dan', age: 30 },
+        { name: 'Micheal', age: 39 },
+        { name: 'Sandy', age: 39 },
+    ];
+
+    const rows = 5;
+    const isShowSelector = true;
+    const rowsPerPageOptions = [5, 10, 15];
+    const itemKey = 'name';
+
+    it('renders table with correct data', () => {
+        render(
+            <NsTable
+                headers={headers}
+                items={items}
+                rows={rows}
+                isShowSelector={isShowSelector}
+                rowsPerPageOptions={rowsPerPageOptions}
+                itemKey={itemKey}
+                isPagination
+            />
+        );
+
+        expect(screen.getByText('Name')).toBeInTheDocument();
+        expect(screen.getByText('Age')).toBeInTheDocument();
+        expect(screen.getByText('Kevin')).toBeInTheDocument();
+        expect(screen.getByText('Maria')).toBeInTheDocument();
+        expect(screen.getByText('28')).toBeInTheDocument();
+        expect(screen.getByText('31')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Rows per page: 5' })).toBeInTheDocument();
+    });
+
+    it('selects and deselects rows on click', () => {
+        render(
+            <NsTable
+                headers={headers}
+                items={items}
+                rows={rows}
+                isShowSelector={isShowSelector}
+                rowsPerPageOptions={rowsPerPageOptions}
+                itemKey={itemKey}
+                isPagination
+            />
+        );
+
+        expect(screen.getByText('Kevin')).toBeInTheDocument();
+        const button = screen.getByText('Kevin');
+        fireEvent.click(button);
+
+        expect(screen.getByTestId('table-row-3')).toHaveAttribute('aria-checked', 'true');
+        fireEvent.click(button);
+        expect(screen.getByTestId('table-row-3')).toHaveAttribute('aria-checked', 'false');
+    });
+
+    it('hide selectors', () => {
+        render(
+            <NsTable
+                headers={headers}
+                items={items}
+                rows={rows}
+                isShowSelector={!isShowSelector}
+                rowsPerPageOptions={rowsPerPageOptions}
+                itemKey={itemKey}
+                isPagination
+            />
+        );
+    });
+
+    it('selects all rows', () => {
+        render(
+            <NsTable
+                headers={headers}
+                items={items}
+                rows={rows}
+                isShowSelector={isShowSelector}
+                rowsPerPageOptions={rowsPerPageOptions}
+                itemKey={itemKey}
+                isPagination
+            />
+        );
+
+        expect(screen.getByTestId('header-checkbox')).toBeInTheDocument();
+
+        const button = screen.getByTestId('header-checkbox');
+
+        fireEvent.click(button);
+        expect(screen.getByTestId('table-checkbox-0')).toHaveClass('PrivateSwitchBase-input');
+    });
+
+    it('selects all rows when click all values', async () => {
+        render(
+            <NsTable
+                headers={headers}
+                items={items}
+                rows={rows}
+                isShowSelector={isShowSelector}
+                rowsPerPageOptions={rowsPerPageOptions}
+                itemKey={itemKey}
+                isPagination
+            />
+        );
+
+        expect(screen.getByTestId('KeyboardArrowRightIcon')).toBeInTheDocument();
+
+        const button = screen.getByTestId('KeyboardArrowRightIcon');
+        fireEvent.click(button);
+        expect(screen.getByText('Sandy')).toBeInTheDocument();
+    });
+
+    it('sort rows via age', () => {
+        render(
+            <NsTable
+                headers={headers}
+                items={items}
+                rows={rows}
+                isShowSelector={isShowSelector}
+                rowsPerPageOptions={rowsPerPageOptions}
+                itemKey={itemKey}
+                isPagination
+            />
+        );
+
+        expect(screen.getByText('Age')).toBeInTheDocument();
+        const button = screen.getByText('Age');
+        fireEvent.click(button);
+
+        expect(screen.getByText('John')).toBeInTheDocument();
+        fireEvent.click(button);
+    });
+});