@nuskin/foundation-ui-components 1.33.0-1253-feature.3 → 2.0.0

package/src/common/carousal/specs/RenderBrand.spec.tsx

@@ -1,22 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { RenderBrand } from '../RenderBrand';
-
-const mockEntry = {
-    title: 'Epoch',
-    backgroundImage: 'https://media.nuskin.com/m/549aa3e5184434d8/webimage-brand-epoch-optweb.png',
-    brandImage: 'https://media.nuskin.com/m/63a454ff90d038b4/webimage-brand-epoch.png',
-};
-
-const mockIndex = 0;
-
-describe('RenderBrand function', () => {
-    it('should render a BrandProductCard component with given props', () => {
-        render(RenderBrand(mockEntry, mockIndex));
-
-        const card = screen.getByRole('brand-card');
-        const title = screen.getByText(mockEntry.title);
-
-        expect(card).toBeInTheDocument();
-        expect(title).toBeInTheDocument();
-    });
-});

package/src/common/carousal/stories/NsCarousal1.stories.tsx

@@ -1,34 +0,0 @@
-import { ReactElement } from 'react';
-
-import { NsCarousal } from '@/common/';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { brandEntries } from '../../card/stories/data';
-import { RenderBrand } from '../RenderBrand';
-import settings from '../slickSetting';
-
-type ComponentType = typeof NsCarousal;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Containers/NsCarousal/Brand',
-    component: NsCarousal,
-    argTypes: {},
-    decorators: [
-        (Story): ReactElement => (
-            <div style={{ width: 800 }}>
-                <Story />
-            </div>
-        ),
-    ],
-} as MetaStory;
-
-export const Default: Story = {
-    args: {
-        entries: brandEntries,
-        renderEntry: RenderBrand,
-        allEntryLink: '',
-        settings: settings,
-    },
-};

package/src/common/carousal/stories/NsScrollingCarousal.stories.tsx

@@ -1,80 +0,0 @@
-import { ReactElement } from 'react';
-
-import { NsScrollingCarousal, NsTextStrip } from '@/common/';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import type { Meta, StoryObj } from '@storybook/react';
-
-type ComponentType = typeof NsScrollingCarousal;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-const renderSlide = (slide: any, i: number): ReactElement => <NsTextStrip key={i} {...slide} />;
-
-const slides = [
-    {
-        description: 'Download the app to access everything Nike',
-        link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'Hello Nike App' },
-        alignment: 'center',
-    },
-    {
-        description: '',
-        link: {
-            href: 'https://www.nike.com/in/help/a/shipping-delivery-gs',
-            title: 'Shop All Our New Markdowns, New Styles on Sale: Up to 40% Off (empty description)',
-        },
-        alignment: 'center',
-    },
-    {
-        // description: 'Applies to orders of ₹ 14 000.00 or more. ',
-        link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'Free Delivery' },
-        alignment: 'center',
-    },
-    {
-        description:
-            'Download the app to access everything Nike Download the app to access everything Nike Download the app to access everything Nike Download the app to access everything Nike',
-        link: {
-            href: 'https://www.nike.com/in/help/a/shipping-delivery-gs',
-            title: ' Hello Nike AppHello Nike App Hello Nike App Hello Nike App',
-        },
-        alignment: 'center',
-    },
-    {
-        description: '',
-        link: {
-            href: 'https://www.nike.com/in/help/a/shipping-delivery-gs',
-            title: 'Shop All Our New Markdowns, New Styles on Sale: Up to 40% Off (empty description)',
-        },
-        alignment: 'center',
-    },
-    {
-        link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'Free Delivery' },
-        alignment: 'center',
-    },
-    {
-        description: 'Empty href Empty href Empty href Empty href Empty href Empty href Empty href Empty href',
-        link: { href: '', title: '' },
-        alignment: 'center',
-    },
-];
-export default {
-    title: 'Components/Containers/NsCarousal/NsScrollingCarousal',
-    component: NsScrollingCarousal,
-    decorators: [withCenterDecorator],
-    argTypes: {},
-    args: {
-        slides,
-        renderSlide,
-        stillSeconds: 6,
-        scrollSeconds: 4,
-        additionalProps: {
-            testid: 'scrolling-carousal',
-        },
-    },
-    render: (args): ReactElement => (
-        <div style={{ width: '90vw' }}>
-            <NsScrollingCarousal {...args} />
-        </div>
-    ),
-} as MetaStory;
-
-export const ScrollingText: Story = {};

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

@@ -1,23 +0,0 @@
-import { ReactNode } from 'react';
-import { AdditionalProps } from '../common.types';
-
-export type NsCarousalProps<T = any> = {
-    entries: T[];
-    // eslint-disable-next-line no-unused-vars
-    renderEntry(entry: T, index: number): ReactNode;
-    allEntryLink: string;
-    settings: any;
-};
-
-export type NsScrollingCarousalProps<T = any> = {
-    slides: T;
-    // eslint-disable-next-line no-unused-vars
-    renderSlide(slide: T, index: number): ReactNode;
-    /* time it takes while scrolling */
-    scrollSeconds: number;
-    /* time for which slide stays still before scrolling */
-    stillSeconds: number;
-    settings: any;
-    /* value in number, specifying how much the dots should be from bottom of slides container */
-    dotsBottomPixel?: number;
-} & AdditionalProps;

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

@@ -1,19 +0,0 @@
-import { render, screen } from '@/test-utils/index';
-
-import { NsCartIcon } from './';
-
-const { getByTestId } = screen;
-describe('NsCartIcon', () => {
-    it('1. renders Cart icon when item count is 0', () => {
-        render(<NsCartIcon />);
-        const cartIcon = getByTestId('cart-badge-icon');
-        expect(cartIcon).toBeInTheDocument();
-    });
-
-    it('2. renders item count badge when item count is greater than 0', () => {
-        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,28 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsCartIcon } from './';
-
-type ComponentType = typeof NsCartIcon;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Data Display/NsCartIcon',
-    component: NsCartIcon,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        itemCount: { control: 'number', defaultValue: 1 },
-        size: { control: 'select', options: ['small', 'medium', 'large', 'xLarge'] },
-        color: {
-            control: 'select',
-            options: ['primary', 'secondary', 'success', 'error', 'warning', 'info'],
-        },
-    },
-    args: {
-        itemCount: 0,
-        color: 'primary',
-        size: 'large',
-    },
-} as MetaStory;
-
-export const CartIcon: Story = {};

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

@@ -1,15 +0,0 @@
-import { Badge, Theme } from '@mui/material';
-import { ColorUtils, FoundationTheme, styled } from '@nuskin/foundation-theme';
-
-type ItemCountParams = {
-    theme?: Theme;
-    bgcolor: FoundationTheme.PaletteColors;
-};
-const { paletteColor } = ColorUtils;
-export const StyledBadge = styled(Badge)<ItemCountParams>`
-    & .MuiBadge-badge {
-        cursor: pointer;
-        background-color: ${({ bgcolor, theme }) => paletteColor(bgcolor)({ theme })};
-        color: ${({ bgcolor, theme }) => paletteColor(bgcolor, 'contrastText')({ theme })};
-    }
-`;

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

@@ -1,24 +0,0 @@
-import { ReactElement } from 'react';
-
-import { IconButton } from '@mui/material';
-
-import { NsIcon } from '../icon';
-import { StyledBadge } from './NsCartIcon.styled';
-import { NsCartIconProps } from './types.d';
-
-const NsCartIcon = ({
-    itemCount = 0,
-    size = 'large',
-    color = 'primary',
-    maxItemCount = 999,
-}: NsCartIconProps): ReactElement => {
-    return (
-        <IconButton aria-label="cart">
-            <StyledBadge badgeContent={itemCount} max={maxItemCount} bgcolor={color} showZero>
-                <NsIcon testId="cart-badge-icon" name="cart" size={size} color={color} />
-            </StyledBadge>
-        </IconButton>
-    );
-};
-
-export default NsCartIcon;

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

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

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

@@ -1,8 +0,0 @@
-import { FoundationTheme } from '@nuskin/foundation-theme';
-
-export type NsCartIconProps = {
-    itemCount?: number;
-    size?: 'small' | 'medium' | 'large' | 'xLarge';
-    color?: FoundationTheme.PaletteColors;
-    maxItemCount?: number;
-};

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

@@ -1,57 +0,0 @@
-/**
- * @author [vijayaprathap Kumar] (vpkumar@nuskin.com)
- * checkbox.tsx
- * @description
- */
-
-import React from 'react';
-
-import { render, fireEvent, noop } from '@/test-utils/index';
-import NsCheckbox from './NsCheckbox';
-
-// Test suite for CustomCheckbox
-describe('CustomCheckbox', () => {
-    it('1. should render checkbox with label', () => {
-        const { getByLabelText } = render(
-            <NsCheckbox name="test-checkbox" label="Test Checkbox" onChange={noop} checked />
-        );
-        expect(getByLabelText('Test Checkbox')).toBeInTheDocument();
-    });
-
-    // Test case to check if the component renders an unchecked checkbox
-    test('2. should render unchecked checkbox', () => {
-        // Render the CustomCheckbox component with checked=false and an empty handleChange function
-        const { getByLabelText } = render(
-            <NsCheckbox name="test-checkbox" label="Test Checkbox" checked={false} onChange={noop} />
-        );
-        const checkbox = getByLabelText('Test Checkbox');
-        // Assert that the checkbox is not checked
-        expect(checkbox).not.toBeChecked();
-    });
-
-    // Test case to check if the component renders a checked checkbox
-    test('3. it should render checked checkbox', () => {
-        // Render the CustomCheckbox component with checked=true and an empty handleChange function
-        const { getByLabelText } = render(
-            <NsCheckbox name="test-checkbox" label="Test Checkbox" checked onChange={noop} />
-        );
-        const checkbox = getByLabelText('Test Checkbox');
-        // Assert that the checkbox is not checked
-        expect(checkbox).toBeChecked();
-    });
-
-    // Test case to check if the handleChange function is called when the checkbox is clicked
-    test('calls handleChange when checkbox is clicked', () => {
-        // Create a mock handleChange function using Jest's mock function
-        const handleChange = jest.fn();
-        // Render the CustomCheckbox component with checked=false and the mock handleChange function
-        const { getByLabelText } = render(
-            <NsCheckbox name="test-checkbox" label="Test Checkbox" checked={false} onChange={handleChange} />
-        );
-        const checkbox = getByLabelText('Test Checkbox');
-        // Simulate a click event on the checkbox
-        fireEvent.click(checkbox);
-        // Assert that the handleChange function has been called
-        expect(handleChange).toHaveBeenCalled();
-    });
-});

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

@@ -1,55 +0,0 @@
-import React, { ReactElement, useState } from 'react';
-
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { expect } from '@storybook/jest';
-import type { Meta, StoryObj } from '@storybook/react';
-import { within } from '@storybook/testing-library';
-
-import { NsCheckbox } from './';
-
-type ComponentType = typeof NsCheckbox;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-const labelText = 'Checkbox Label';
-// In this case, we're only passing the label prop.
-export default {
-    title: 'Components/Inputs/NsCheckbox',
-    component: NsCheckbox,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        disabled: { control: 'boolean' },
-        flag: {
-            message: { control: 'text' },
-            color: { control: 'select' },
-        },
-    },
-    args: {
-        label: labelText,
-        disabled: false,
-        ariaLabel: 'primary checkbox',
-        size: 'medium',
-        flag: {
-            message: 'New',
-            color: 'accentColorA',
-        },
-    },
-} as MetaStory;
-
-const RenderCheckbox = (args: any): ReactElement => {
-    const [isChecked, setIsChecked] = useState(false);
-    const handleChange = (event: { target: { checked: boolean } }) => {
-        const isChecked = event.target.checked;
-        setIsChecked(isChecked);
-    };
-
-    return <NsCheckbox {...args} checked={isChecked} onChange={handleChange} name="test-checkbox" />;
-};
-export const Checkbox: Story = {
-    render: RenderCheckbox,
-    play: ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const el = canvas.getByText(labelText);
-        expect(el).toBeInTheDocument();
-    },
-};

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

@@ -1,55 +0,0 @@
-/**
- * @author [vijayaprathap Kumar] (vpkumar@nuskin.com)
- * @description Styled Components for Checkbox
- */
-import DoneIcon from '@mui/icons-material/Done';
-
-import { styled, ColorUtils } from '@nuskin/foundation-theme';
-import { NsFlag } from '../flag';
-const { paletteColor, buttonColor, getGenomeColor } = 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 }) => ({
-    border: '1px solid #8C8C8C',
-    path: {
-        display: 'none',
-    },
-    'input:hover ~ &': {
-        border: '1px solid #94D6E9',
-    },
-    'input:focus ~ &': {
-        outline: '3px solid #94D6E9',
-    },
-    'input:disabled ~ &': {
-        background: buttonColor('primary', 'hovered')({ theme }),
-    },
-}));
-
-/**
- * Wrapper BpCheckedIcon for checkbox.tsx
- * @params ( theme: { palette }) / Provide the color's to container from @nuskin/foundation-theme
- */
-
-export const BpCheckedIcon = styled(BpIcon)(({ theme }) => ({
-    path: {
-        display: 'block',
-    },
-    background: getGenomeColor(theme, 'N100'),
-    // background: paletteColor('primary', 'main')({ theme }),
-    color: paletteColor('primary', 'contrastText')({ theme }),
-}));
-
-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

@@ -1,68 +0,0 @@
-/**
- * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
- * checkbox.tsx
- * @description
- */
-
-import React, { PropsWithChildren, ReactElement, useCallback } from 'react';
-
-import MUICheckbox from '@mui/material/Checkbox';
-import FormControlLabel from '@mui/material/FormControlLabel';
-
-import { NsTypography } from '../';
-import { BpCheckedIcon, BpIcon, StyledFlagLabel, StyledLabel } from './NsCheckbox.styled';
-import { NsCheckboxProps } from './types.d';
-
-const NsCheckbox = (props: PropsWithChildren<NsCheckboxProps>): ReactElement => {
-    const {
-        name,
-        label,
-        onChange,
-        checked,
-        ariaLabel = 'nuskin checkbox',
-        flag,
-        disabled = false,
-        size = 'small',
-        testid = 'nuskin-checkbox',
-        className = '',
-    } = props;
-
-    const renderCheckbox = useCallback(
-        () => (
-            <MUICheckbox
-                name={name}
-                color="default"
-                checked={checked}
-                onChange={onChange}
-                disabled={disabled}
-                disableRipple
-                checkedIcon={<BpCheckedIcon />}
-                icon={<BpIcon />}
-                inputProps={
-                    {
-                        'aria-label': ariaLabel,
-                        'data-testid': testid,
-                    } as React.InputHTMLAttributes<HTMLInputElement>
-                }
-                size={size}
-            />
-        ),
-        [ariaLabel, checked, disabled, name, onChange, size, testid]
-    );
-
-    const renderCheckboxLabel = useCallback(
-        () => (
-            <NsTypography variant="body-l">
-                <StyledFlagLabel {...flag} size={size} testId={`${name}-flag-label`} />
-                <StyledLabel className="checkbox-label-text" isDisabled={disabled}>
-                    {label}
-                </StyledLabel>
-            </NsTypography>
-        ),
-        [disabled, flag, label, name, size]
-    );
-
-    return <FormControlLabel className={className} control={renderCheckbox()} label={renderCheckboxLabel()} />;
-};
-
-export default NsCheckbox;

package/src/common/checkbox/index.ts

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

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

@@ -1,20 +0,0 @@
-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'> & {
-    name: string;
-    className?: string;
-    checked: boolean;
-    /* Aria label for the checkbox area. */
-    ariaLabel?: string;
-    /* True if you want disable the checkbox and label . */
-    disabled?: boolean;
-    /* Size of the checkbox component. Either small / medium. */
-    size?: 'small' | 'medium';
-    /* Flag component props */
-    flag?: NsFlagProps;
-    /*  Test Id for testing purpose */
-    testid?: string;
-};

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

@@ -1,64 +0,0 @@
-import { ReactElement, useMemo } from 'react';
-
-import { Box } from '@mui/material';
-import { styled } from '@nuskin/foundation-theme';
-
-import { shouldNotForwardPropsWithKeys } from '../util';
-import { NsColumnControlProps, sizeObjectType } from './types.d';
-import { getColumnSizes } from './utils';
-
-type StyledDivProps = {
-    sizes: sizeObjectType;
-    gap?: number;
-};
-
-const options = {
-    shouldForwardProp: shouldNotForwardPropsWithKeys<StyledDivProps>(['sizes']),
-};
-
-const descMaxWidthBreakpoints = [960, 600];
-
-/* media queries */
-const mediaQuery = descMaxWidthBreakpoints.map((bp) => `@media (max-width: ${bp}px)`);
-
-const StyledDiv = styled(
-    Box as any,
-    options
-)<StyledDivProps>(({ sizes, gap }: StyledDivProps) => {
-    const gridTemplateColumns = sizes['fractions']?.map((e) => `${e}fr`).join(' ');
-    const tabletTemplateColumns = sizes['tabletFractions']?.map((e) => `${e}fr`).join(' ');
-    const mobileTemplateColumns = sizes['mobileFractions']?.map((e) => `${e}fr`).join(' ');
-    return {
-        display: 'grid',
-        maxWidth: Array.isArray(sizes?.fractions) && sizes.fractions?.length <= 2 ? '1200px' : '2400px',
-        margin: '32px auto',
-        gap: gap ?? '2rem',
-        overflow: 'scroll',
-        gridTemplateColumns,
-        [mediaQuery[0]]: {
-            gridTemplateColumns: tabletTemplateColumns,
-        },
-        [mediaQuery[1]]: {
-            gridTemplateColumns: mobileTemplateColumns,
-        },
-    };
-});
-
-const NsColumnControl = ({ columnClass, children, gap, additionalProps }: NsColumnControlProps): ReactElement => {
-    const sizes = useMemo(() => {
-        return getColumnSizes(columnClass);
-    }, [columnClass]);
-
-    return (
-        <StyledDiv
-            sizes={sizes}
-            gap={gap}
-            data-testid={additionalProps?.testid ?? 'ns-column-control'}
-            className={columnClass}
-        >
-            {children}
-        </StyledDiv>
-    );
-};
-
-export default NsColumnControl;

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

@@ -1,29 +0,0 @@
-import { ReactElement, useMemo } from 'react';
-
-import { StyledFlex } from './styled/StyledFlex';
-import { NsFlexColumnsProps } from './types';
-import { getColumnSizes } from './utils';
-
-const NsFlexColumns = ({
-    columnClass,
-    children,
-    gap,
-    additionalProps,
-    isFullWidth,
-}: NsFlexColumnsProps): ReactElement => {
-    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

@@ -1,29 +0,0 @@
-import { ReactElement, useMemo } from 'react';
-
-import { StyledGrid } from './styled/StyledGrid';
-import { NsGridColumnsProps } from './types';
-import { getColumnSizes } from './utils';
-
-const NsGridColumns = ({
-    columnClass,
-    children,
-    gap,
-    isFullWidth,
-    additionalProps,
-}: NsGridColumnsProps): ReactElement => {
-    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,4 +0,0 @@
-export { default as NsColumnControl } from './NsColumnControl';
-export { default as NsFlexColumns } from './NsFlexColumns';
-export { default as NsGridColumns } from './NsGridColumns';
-export type { NsColumnControlProps } from './types.d';