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

package/src/common/cart-icon/NsCartIcon.spec.tsx

@@ -1,29 +1,18 @@
 import { NsCartIcon } from './';
-import { render, screen } from '../../../test-utils';
+import { render, screen } from '@/test-utils/index';
 
 const { getByTestId } = screen;
 describe('NsCartIcon', () => {
     it('renders Cart icon when item count is 0', () => {
         render(<NsCartIcon itemCount={0} color="primary" size="large" />);
-        const cartIcon = getByTestId('cart-icon');
+        const cartIcon = getByTestId('cart-badge-icon');
         expect(cartIcon).toBeInTheDocument();
     });
-    it('renders Cart icon with optional values', () => {
-        render(<NsCartIcon itemCount={0} />);
-        const cartIcon = getByTestId('cart-icon');
-        expect(cartIcon).toBeInTheDocument();
-    });
-
-    it('renders Cart Badge icon when item count is greater than 0', () => {
-        render(<NsCartIcon itemCount={5} color="primary" size="large" />);
-        const cartBadgeIcon = getByTestId('cart-badge-icon');
-        expect(cartBadgeIcon).toBeInTheDocument();
-    });
 
     it('renders item count badge when item count is greater than 0', () => {
-        render(<NsCartIcon itemCount={5} color="primary" size="large" />);
-        const itemCountBadge = getByTestId('item-count-badge');
-        expect(itemCountBadge).toBeInTheDocument();
-        expect(itemCountBadge.textContent).toBe('5');
+        const itemCount = 5;
+        const { getByText } = render(<NsCartIcon itemCount={5} color="primary" size="large" />);
+        const badgeContentElement = getByText(itemCount.toString());
+        expect(badgeContentElement).toHaveTextContent('5'); // Adjust the value as per your badge content
     });
 });

package/src/common/cart-icon/NsCartIcon.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 { NsCartIcon } from './';
 
 type ComponentType = typeof NsCartIcon;
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsCartIcon',
+    title: 'Components/Data Display/NsCartIcon',
     component: NsCartIcon,
     decorators: [withCenterDecorator],
     argTypes: {
@@ -19,7 +19,7 @@ export default {
         },
     },
     args: {
-        itemCount: 1,
+        itemCount: 5,
         color: 'primary',
         size: 'large',
     },

package/src/common/cart-icon/NsCartIcon.styled.ts

@@ -1,40 +1,14 @@
-import { Theme } from '@mui/material';
+import { Badge, Theme } from '@mui/material';
 import { styled, FoundationTheme } from '@nuskin/foundation-theme';
-import { NsIconSizeType } from '../icon/types';
 
 type ItemCountParams = {
-    size: NsIconSizeType;
-    color: FoundationTheme.PaletteColors;
     theme?: Theme;
+    bgcolor: FoundationTheme.PaletteColors;
 };
 
-export const CartIconContainer = styled.div`
-    position: relative;
-    display: inline-block;
-`;
-
-const BadgeFontSizeMap = {
-    small: '8px',
-    medium: '10px',
-    large: '12px',
-    xLarge: '14px',
-};
-
-const BadgePosMap = {
-    small: '-8px',
-    medium: '-6px',
-    large: '-4px',
-    xLarge: '-1px',
-};
-
-export const ItemCount = styled.span<ItemCountParams>`
-    color: ${({ color, theme }) => theme?.palette?.[color]?.main};
-    font-size: ${({ size }) => BadgeFontSizeMap[size]};
-    right: ${({ size }) => BadgePosMap[size]};
-    text-align: center;
-    font-weight: 600;
-    position: absolute;
-    width: 32px;
-    height: auto;
-    top: -4px;
+export const StyledBadge = styled(Badge) <ItemCountParams>`
+    & .MuiBadge-badge {
+        background-color: ${({ bgcolor, theme }) => theme?.palette?.[bgcolor]?.main};
+        color: ${({ bgcolor, theme }) => theme?.palette?.[bgcolor]?.contrastText};
+    }
 `;

package/src/common/cart-icon/NsCartIcon.tsx

@@ -1,21 +1,12 @@
 import { NsIcon } from '../icon';
-import { CartIconContainer, ItemCount } from './NsCartIcon.styled';
-import { NsCartIconProps } from './types';
+import { StyledBadge } from './NsCartIcon.styled';
+import { NsCartIconProps } from './types.d';
 
-const NsCartIcon = ({ itemCount, size = 'large', color = 'primary' }: NsCartIconProps) => {
+const NsCartIcon = ({ itemCount = 0, size = 'large', color = 'primary', maxItemCount = 999 }: NsCartIconProps) => {
     return (
-        <CartIconContainer>
-            {itemCount > 0 ? (
-                <NsIcon testId="cart-badge-icon" name="cartBadge" color={color} size={size} />
-            ) : (
-                <NsIcon testId="cart-icon" name="cart" color={color} size={size} />
-            )}
-            {itemCount > 0 && (
-                <ItemCount data-testid="item-count-badge" color={color} size={size}>
-                    {itemCount}
-                </ItemCount>
-            )}
-        </CartIconContainer>
+        <StyledBadge badgeContent={itemCount} max={maxItemCount} bgcolor={color}>
+            <NsIcon testId="cart-badge-icon" name="cart" size={size} color={color} />
+        </StyledBadge>
     );
 };
 

package/src/common/cart-icon/index.ts

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

package/src/common/cart-icon/types.d.ts

@@ -4,4 +4,5 @@ export type NsCartIconProps = {
     itemCount: number;
     size?: 'small' | 'medium' | 'large' | 'xLarge';
     color?: FoundationTheme.PaletteColors;
+    maxItemCount?:number;
 };

package/src/common/checkbox/NsCheckbox.spec.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { render, fireEvent, noop } from '../../../test-utils';
+import { render, fireEvent, noop } from '@/test-utils/index';
 import NsCheckbox from './NsCheckbox';
 
 // Test suite for CustomCheckbox
@@ -54,4 +54,4 @@ describe('CustomCheckbox', () => {
         // Assert that the handleChange function has been called
         expect(handleChange).toHaveBeenCalled();
     });
-});
+});

package/src/common/checkbox/NsCheckbox.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { within } from '@testing-library/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import type { StoryObj, Meta } from '@storybook/react';
 import { expect } from '@storybook/jest';
 
@@ -13,7 +13,7 @@ type MetaStory = Meta<ComponentType>;
 const labelText = 'Checkbox Label';
 // In this case, we're only passing the label prop.
 export default {
-    title: 'Components/NsCheckbox',
+    title: 'Components/Inputs/NsCheckbox',
     component: NsCheckbox,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/checkbox/NsCheckbox.styled.tsx

@@ -1,19 +1,18 @@
 /**
  * @author [vijayaprathap Kumar] (vpkumar@nuskin.com)
- * checkbox.tsx
  * @description Styled Components for Checkbox
  */
 import DoneIcon from '@mui/icons-material/Done';
 
-import { styled } from '@nuskin/foundation-theme';
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
 import { NsFlag } from '../flag';
-
+const { paletteColor, buttonColor } = ColorUtils;
 /**
  * Wrapper BpIcon for checkbox.tsx
  * @params ( theme: { palette }) / Provide the color's to contaier from @nuskin/foundation-theme
  */
 
-export const BpIcon = styled(DoneIcon)(({ theme: { palette } }) => ({
+export const BpIcon = styled(DoneIcon)(({ theme }) => ({
     border: '1px solid #8C8C8C',
     path: {
         display: 'none',
@@ -25,31 +24,31 @@ export const BpIcon = styled(DoneIcon)(({ theme: { palette } }) => ({
         outline: '3px solid #94D6E9',
     },
     'input:disabled ~ &': {
-        background: palette?.primary?.buttonState?.hovered,
+        background: buttonColor('primary', 'hovered')({ theme }),
     },
 }));
 
 /**
  * Wrapper BpCheckedIcon for checkbox.tsx
- * @params ( theme: { palette }) / Provide the color's to contaier from @nuskin/foundation-theme
+ * @params ( theme: { palette }) / Provide the color's to container from @nuskin/foundation-theme
  */
 
-export const BpCheckedIcon = styled(BpIcon)(({ theme: { palette } }) => ({
+export const BpCheckedIcon = styled(BpIcon)(({ theme }) => ({
     path: {
         display: 'block',
     },
-    background: palette.primary.main,
-    color: palette.primary.contrastText,
+    background: paletteColor('primary', 'main')({ theme }),
+    color: paletteColor('primary', 'contrastText')({ theme }),
 }));
 
-export const StyledLabel = styled('span')<{ $hasDisabled: boolean }>`
-    ${({ $hasDisabled, theme: { palette } }) =>
-        $hasDisabled &&
-        `
-    color: ${palette?.primary?.buttonState?.hovered};
-`}
-`;
+const getLabelColor = (isDisabled: boolean, color: string) => (!isDisabled ? '' : `color: ${color}`);
 
+export const StyledLabel = styled('span')<{ isDisabled: boolean }>`
+    ${({ isDisabled, theme }) => {
+        const color = buttonColor('primary', 'hovered')({ theme });
+        return getLabelColor(isDisabled, color);
+    }}
+`;
 export const StyledFlagLabel = styled(NsFlag)`
     margin-right: 16px;
 `;

package/src/common/checkbox/NsCheckbox.tsx

@@ -9,7 +9,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import { default as MUICheckbox } from '@mui/material/Checkbox';
 
 import { BpCheckedIcon, BpIcon, StyledLabel, StyledFlagLabel } from './NsCheckbox.styled';
-import { NsCheckboxProps } from './types';
+import { NsCheckboxProps } from './types.d';
 
 import { NsTypography } from '../';
 
@@ -54,7 +54,7 @@ const NsCheckbox = (props: PropsWithChildren<NsCheckboxProps>) => {
         () => (
             <NsTypography variant="p-l">
                 <StyledFlagLabel {...flag} size={size} testId={`${name}-flag-label`} />
-                <StyledLabel className="checkbox-label-text" $hasDisabled={disabled}>
+                <StyledLabel className="checkbox-label-text" isDisabled={disabled}>
                     {label}
                 </StyledLabel>
             </NsTypography>

package/src/common/checkbox/index.ts

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

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

@@ -1,15 +1,9 @@
-/**
- * @author [vijayaprathap Kumar] (vpkumar@nuskin.com)
- * types.d.ts
- * @description NsCheckbox Props extending Mui CheckboxProps interface.
- */
-
 import { CheckboxProps as MUICheckboxProps } from '@material-ui/core/Checkbox';
 
 import { NsFlagProps } from '../flag';
 
 // Define the props for the custom checkbox component
-export type NsCheckboxProps = Pick<MUICheckboxProps, 'label' | 'onChange'> & {
+export type NsCheckboxProps = Partial<Pick<MUICheckboxProps, 'label' | 'onChange'>> & {
     name: string;
     className?: string;
     checked: boolean;

package/src/common/column-control/NsColumnControl.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@nuskin/foundation-theme';
-import { NsColumnControlProps, sizeObjectType } from './types';
+import { NsColumnControlProps, sizeObjectType } from './types.d';
 import { getColumnSizes } from './utils';
 
 const options = {

package/src/common/column-control/NsFlexColumns.tsx

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { getColumnSizes } from './utils';
+import { StyledFlex } from './styled/StyledFlex';
+import { NsFlexColumnsProps } from './types';
+
+const NsFlexColumns = ({ columnClass, children, gap, additionalProps, isFullWidth }: NsFlexColumnsProps) => {
+    const sizes = useMemo(() => {
+        return getColumnSizes(columnClass ?? 'ns-col-lg-1-1');
+    }, [columnClass]);
+    return (
+        <StyledFlex
+            isFullWidth={isFullWidth || false}
+            gap={gap}
+            sizes={sizes}
+            className="ns-flex-columns"
+            data-testid={additionalProps?.testid ?? 'ns-flex-columns'}
+        >
+            {children}
+        </StyledFlex>
+    );
+};
+export default NsFlexColumns;

package/src/common/column-control/NsGridColumns.tsx

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { getColumnSizes } from './utils';
+import { StyledGrid } from './styled/StyledGrid';
+import { NsGridColumnsProps } from './types';
+
+const NsGridColumns = ({ columnClass, children, gap, isFullWidth, additionalProps }: NsGridColumnsProps) => {
+    const sizes = useMemo(() => {
+        return getColumnSizes(columnClass ?? 'ns-col-lg-1-1');
+    }, [columnClass]);
+    return (
+        <StyledGrid
+            isFullWidth={isFullWidth || false}
+            gap={gap}
+            sizes={sizes}
+            className="ns-grid-columns"
+            data-testid={additionalProps?.testid ?? 'ns-grid-columns'}
+        >
+            {children}
+        </StyledGrid>
+    );
+};
+export default NsGridColumns;

package/src/common/column-control/index.ts

@@ -1,2 +1,4 @@
 export { default as NsColumnControl } from './NsColumnControl';
-export type { NsColumnControlProps } from './types';
+export { default as NsFlexColumns } from './NsFlexColumns';
+export { default as NsGridColumns } from './NsGridColumns';
+export type { NsColumnControlProps } from './types.d';

package/src/common/column-control/{NsColumnControl.spec.tsx → specs/NsColumnControl.spec.tsx}

@@ -1,6 +1,6 @@
-import { render, screen } from '../../../test-utils';
-import { NsColumnControl } from './';
-import { DivArray } from './NDivs.story';
+import { NsColumnControl } from '@/common/index';
+import { render, screen } from '@/test-utils/index';
+import { DivArray } from '../stories/DivArray';
 
 describe('NsColumnControl component', () => {
     it('renders an column with proper grid value for tablet', () => {

package/src/common/column-control/specs/NsFlexColumns.spec.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '../../../../test-utils';
+import { NsFlexColumns } from '@/common/index';
+import { DivArray } from '../stories/DivArray';
+
+describe('NsFlexColumns component', () => {
+    it('renders an column with proper grid value for tablet', () => {
+        render(
+            <NsFlexColumns columnClass="ns-col-lg-1-1-1" gap={16}>
+                <DivArray elementsCount={4} />
+            </NsFlexColumns>
+        );
+        const element = screen.getByTestId('ns-flex-columns');
+        expect(element).toBeInTheDocument();
+    });
+    it('renders an column with proper grid value', () => {
+        console.warn = jest.fn();
+        render(
+            <NsFlexColumns columnClass="" gap={16}>
+                <DivArray elementsCount={4} />
+            </NsFlexColumns>
+        );
+        expect(console.warn).toHaveBeenCalledWith(expect.stringContaining('Received invalid className'));
+    });
+});

package/src/common/column-control/specs/NsGridColumns.spec.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '../../../../test-utils';
+import { NsGridColumns } from '@/common/index';
+import { DivArray } from '../stories/DivArray';
+
+describe('NsGridColumns component', () => {
+    it('renders an column with proper grid value for tablet', () => {
+        render(
+            <NsGridColumns columnClass="ns-col-lg-1-1-1" gap={16}>
+                <DivArray elementsCount={4} />
+            </NsGridColumns>
+        );
+        const element = screen.getByTestId('ns-grid-columns');
+        expect(element).toBeInTheDocument();
+    });
+    it('renders an column with proper grid value', () => {
+        console.warn = jest.fn();
+        render(
+            <NsGridColumns columnClass="" gap={16}>
+                <DivArray elementsCount={4} />
+            </NsGridColumns>
+        );
+        expect(console.warn).toHaveBeenCalledWith(expect.stringContaining('Received invalid className'));
+    });
+});

package/src/common/column-control/stories/DivArray.stories.tsx

@@ -0,0 +1,18 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import {DivArray} from './DivArray';
+
+type ComponentType = typeof DivArray;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Data Display/Column/NDivs',
+    component: DivArray,
+    decorators: [withCenterDecorator],
+    args: {
+        elementsCount: 2,
+    },
+} as MetaStory;
+
+export const Basic: Story = {};

package/src/common/column-control/stories/DivArray.tsx

@@ -0,0 +1,63 @@
+import { PropsWithChildren } from 'react';
+
+type DivArrayProps = {
+    elementsCount: number;
+};
+
+const getRandom = (n: number) => (Math.random() * n).toFixed(0);
+
+type DivComponentProps = PropsWithChildren<{ style: Record<string, any>; index: number }>;
+export const DivComponent = ({ style, index, children }: DivComponentProps) => {
+    const borderWidth = `${getRandom(5)}px`;
+    const padding = `${getRandom(20)}px`;
+    return (
+        <div
+            style={{
+                padding,
+                border: `${borderWidth} solid`,
+                borderColor: `hsl(${getRandom(359)},100%, 50%)`,
+                background: `hsla(${getRandom(359)},100%, 50%,0.3)`,
+                ...style,
+            }}
+        >
+            {index}
+            {children}
+        </div>
+    );
+};
+/**
+ * this component return a fragment containing n number of div, with each div numbered as per its index
+ * @param n: number of div to render
+ * @returns
+ */
+export const DivArray = ({ elementsCount }: DivArrayProps) => (
+    <>
+        {Array(elementsCount)
+            .fill(0)
+            .map((_, index) => (
+                <DivComponent key={index} index={index + 1} style={{}} />
+            ))}
+    </>
+);
+export const DivArrayRandom = ({ elementsCount }: DivArrayProps) => (
+    <>
+        {Array(elementsCount)
+            .fill(0)
+            .map((_, index) => {
+                const width = `${getRandom(700)}px`;
+                const height = `${getRandom(400)}px`;
+                return (
+                    <DivComponent
+                        key={index}
+                        index={index + 1}
+                        style={{
+                            width,
+                            height,
+                        }}
+                    >
+                        item no = {index + 1} with width = {width} and height = {height}
+                    </DivComponent>
+                );
+            })}
+    </>
+);

package/src/common/column-control/{NsColumnControl.stories.tsx → stories/NsColumnControl.stories.tsx}

@@ -1,25 +1,15 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
-import { NsColumnControl } from '.';
-import { DivArray } from './NDivs.story';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsColumnControl } from '@/common/index';
+import { DivArray } from './DivArray';
+import { childrenMapping, selectDivOptions } from './common';
 
 type ComponentType = typeof NsColumnControl;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
-/* an array from 1 to n */
-const selectDivOptions = Array(16)
-    .fill(0)
-    .map((e, i) => i + 1);
-const childrenMapping = selectDivOptions.reduce((a, c) => {
-    return {
-        ...a,
-        [c]: <DivArray elementsCount={c} />,
-    };
-}, {});
-
 export default {
-    title: 'Components/NsColumnControl',
+    title: 'Components/Data Display/Column/NsColumnControl',
     component: NsColumnControl,
     decorators: [withCenterDecorator],
     argTypes: {
@@ -42,7 +32,10 @@ export default {
     },
 } as MetaStory;
 
-export const SingleColumnControl: Story = {};
+export const ResponsiveColumnControl: Story = {};
+export const SingleColumnControl: Story = {
+    args: { columnClass: '' },
+};
 export const TwoColumn11: Story = {
     args: { columnClass: 'ns-col-lg-1-1' },
 };

package/src/common/column-control/stories/NsFlexColumns.stories.tsx

@@ -0,0 +1,63 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsFlexColumns } from '..';
+import { DivArray, DivArrayRandom } from './DivArray';
+import { childrenMapping, selectDivOptions } from './common';
+
+type ComponentType = typeof NsFlexColumns;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Data Display/Column/NsFlexColumns',
+    component: NsFlexColumns,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        columnClass: {
+            control: 'text',
+            defaultValue: 'ns-col-lg-1-1-1 ns-col-md-1-1 ns-col-sm-1',
+        },
+        gap: {
+            control: 'number',
+            defaultValue: 16,
+        },
+        children: {
+            control: {
+                type: 'select',
+                options: selectDivOptions,
+            },
+            defaultValue: <DivArrayRandom elementsCount={8} />,
+            mapping: childrenMapping,
+        },
+    },
+    args: {
+        columnClass: '',
+        children: <DivArrayRandom elementsCount={12} />,
+    },
+} as MetaStory;
+
+export const DefaultColumnControl: Story = {
+    args: {
+        children: <DivArray elementsCount={8} />,
+    },
+};
+export const TwoColumn11: Story = {
+    args: { columnClass: 'ns-col-lg-1-1' },
+};
+export const TwoColumn21: Story = {
+    args: { columnClass: 'ns-col-lg-2-1' },
+};
+
+export const ThreeColumn211: Story = {
+    args: { columnClass: 'ns-col-lg-2-1-1' },
+};
+export const ThreeColumn121: Story = {
+    args: { columnClass: 'ns-col-lg-1-2-1' },
+};
+export const ThreeColumn111: Story = {
+    args: { columnClass: 'ns-col-lg-1-1-1' },
+};
+
+export const FourColumn1111: Story = {
+    args: { columnClass: 'ns-col-lg-1-1-1-1' },
+};