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

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

@@ -1,24 +0,0 @@
-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', () => {
-        render(
-            <NsColumnControl columnClass="ns-col-lg-1-1-1 ns-col-md-1-1 ns-col-sm-1">
-                <DivArray elementsCount={4} />
-            </NsColumnControl>
-        );
-        const element = screen.getByTestId('ns-column-control');
-        expect(element).toHaveStyle('grid-template-columns: 1fr 1fr 1fr;}');
-    });
-    it('renders an column with proper grid value', () => {
-        console.warn = jest.fn();
-        render(
-            <NsColumnControl columnClass="">
-                <DivArray elementsCount={4} />
-            </NsColumnControl>
-        );
-        expect(console.warn).toHaveBeenCalledWith(expect.stringContaining('Received invalid className'));
-    });
-});

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

@@ -1,24 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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/stories/NsColumnControl.stories.tsx

@@ -1,65 +0,0 @@
-import { ReactElement } from 'react';
-
-import { NsColumnControl } from '@/common/index';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { childrenMapping, selectDivOptions } from './common';
-import { DivArray } from './DivArray';
-
-type ComponentType = typeof NsColumnControl;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Data Display/Column/NsColumnControl',
-    component: NsColumnControl,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        columnClass: {
-            control: 'text',
-            defaultValue: 'ns-col-lg-1-1-1 ns-col-md-1-1 ns-col-sm-1',
-        },
-        children: {
-            control: {
-                type: 'select',
-                options: selectDivOptions,
-            },
-            defaultValue: (<DivArray elementsCount={8} />) as ReactElement,
-            mapping: childrenMapping,
-        },
-    },
-    args: {
-        columnClass: 'ns-col-lg-1-1-1 ns-col-md-1-1 ns-col-sm-1',
-        children: (<DivArray elementsCount={12} />) as ReactElement,
-    },
-} as MetaStory;
-
-export const ResponsiveColumnControl: Story = {};
-export const SingleColumnControl: Story = {
-    args: { columnClass: '' },
-};
-export const TwoColumn11: Story = {
-    args: { columnClass: 'ns-col-lg-1-1' },
-};
-export const TwoColumn21: Story = {
-    args: { columnClass: 'ns-col-lg-2-1' },
-};
-export const ThreeColumn111: Story = {
-    args: { columnClass: 'ns-col-lg-1-1-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 ThreeColumn11Responsive: Story = {
-    args: { columnClass: 'ns-col-lg-1-1 ns-col-md-1' },
-};
-export const FourColumn1111: Story = {
-    args: { columnClass: 'ns-col-lg-1-1-1-1' },
-};
-export const FourColumn1111Responsive: Story = {
-    args: { columnClass: 'ns-col-lg-1-1-1-1 ns-col-md-1-1 ns-col-sm-1' },
-};

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

@@ -1,66 +0,0 @@
-import { ReactElement } from 'react';
-
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { NsFlexColumns } from '../';
-import { childrenMapping, selectDivOptions } from './common';
-import { DivArray, DivArrayRandom } from './DivArray';
-
-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} />) as ReactElement,
-            mapping: childrenMapping,
-        },
-    },
-    args: {
-        columnClass: '',
-        children: (<DivArrayRandom elementsCount={12} />) as ReactElement,
-    },
-} as MetaStory;
-
-export const DefaultColumnControl: Story = {
-    args: {
-        children: (<DivArray elementsCount={8} />) as ReactElement,
-    },
-};
-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' },
-};

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

@@ -1,75 +0,0 @@
-import { ReactElement } from 'react';
-
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import type {
-    Meta,
-    StoryObj,
-} from '@storybook/react';
-
-import { NsGridColumns } from '../';
-import {
-    childrenMapping,
-    selectDivOptions,
-} from './common';
-import {
-    DivArray,
-    DivArrayRandom,
-} from './DivArray';
-
-type ComponentType = typeof NsGridColumns;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Data Display/Column/NsGridColumns',
-    component: NsGridColumns,
-    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} />) as ReactElement,
-            mapping: childrenMapping,
-        },
-    },
-    args: {
-        columnClass: '',
-        children: (<DivArrayRandom elementsCount={12} />) as ReactElement,
-    },
-} as MetaStory;
-
-export const DefaultColumnControl: Story = {
-    args: {
-        children: (<DivArray elementsCount={8} />) as ReactElement,
-    },
-};
-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' },
-};

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

@@ -1,14 +0,0 @@
-import { DivArray } from './DivArray';
-
-/* an array from 1 to n */
-export const selectDivOptions = Array(16)
-    .fill(0)
-    .map((_, index) => index + 1);
-
-/* this component is used only as a utility to show column control in storybook */
-export const childrenMapping = selectDivOptions.reduce((childrenMappingObject, elementCount) => {
-    return {
-        ...childrenMappingObject,
-        [elementCount]: <DivArray elementsCount={elementCount} />,
-    };
-}, {});

package/src/common/column-control/styled/StyledFlex.tsx

@@ -1,46 +0,0 @@
-import { Box } from '@mui/material';
-import { styled } from '@nuskin/foundation-theme';
-import { sizeObjectType } from '../types';
-import { commonStyles, getPercentArray } from './common';
-import { shouldNotForwardPropsWithKeys } from '../../../common/util';
-
-type StyledFlexProps = {
-    sizes: sizeObjectType;
-    gap?: number;
-    isFullWidth: boolean;
-};
-
-const options = {
-    shouldForwardProp: shouldNotForwardPropsWithKeys<StyledFlexProps>(['sizes']),
-};
-
-/* main wrapper for column control using css flex */
-export const StyledFlex = styled(
-    Box as any,
-    options
-)<StyledFlexProps>(({ sizes, gap, isFullWidth }: StyledFlexProps) => {
-    const gridGap = gap ? `${gap}px` : '2rem';
-    const fraction = getPercentArray(sizes.fractions);
-    const flexResponsive = { flexGrow: 1, flexShrink: 1 };
-    const maxWidth = isFullWidth ? '100%' : '1200px';
-    const style: any = {
-        gap: gridGap,
-        ...commonStyles,
-        maxWidth,
-        display: 'flex',
-        paddingInline: '20px',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-        '> *': {
-            display: 'flex',
-            minWidth: '220px',
-        },
-    };
-    fraction.forEach((f, i) => {
-        style[`> :nth-of-type(${fraction.length}n+${i + 1})`] = {
-            flexBasis: `calc(${fraction[i]} - ${gridGap})`,
-            ...flexResponsive,
-        };
-    });
-    return style;
-});

package/src/common/column-control/styled/StyledGrid.tsx

@@ -1,41 +0,0 @@
-import { Box } from '@mui/material';
-import { styled } from '@nuskin/foundation-theme';
-import { sizeObjectType } from '../types';
-import { commonStyles, getPercentArray } from './common';
-import { shouldNotForwardPropsWithKeys } from '../../../common/util';
-
-type StyledGridProps = {
-    sizes: sizeObjectType;
-    gap?: number;
-    isFullWidth: boolean;
-};
-const options = {
-    shouldForwardProp: shouldNotForwardPropsWithKeys<StyledGridProps>(['sizes']),
-};
-
-/* main wrapper for column control using css grid */
-export const StyledGrid = styled(
-    Box as any,
-    options
-)<StyledGridProps>(({ sizes, gap, isFullWidth }: StyledGridProps) => {
-    const gridGap = gap ?? '2rem';
-    const maxWidth = isFullWidth ? '100%' : '1200px';
-    return {
-        gap: gridGap,
-        ...commonStyles,
-        maxWidth,
-        display: 'grid',
-        /* here we are creating gridTemplateColumns as calc(40% - 20px) calc(40% - 20px), */
-        gridTemplateColumns: getPercentArray(sizes.fractions)
-            ?.map((fractionPercent) => `calc(${fractionPercent} - 20px)`)
-            .join(''),
-        justifyContent: 'center',
-        '> *': {
-            minWidth: '220px',
-            width: 'auto !important',
-        },
-        '.span-2': {
-            gridColumn: 'span 2',
-        },
-    } as any;
-});

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

@@ -1,27 +0,0 @@
-const mobileBreakPoint = '600px';
-
-export const commonStyles = {
-    margin: '32px auto',
-
-    [`@media (max-width: ${mobileBreakPoint})`]: {
-        display: 'flex',
-        flexDirection: 'column',
-        flexWrap: 'wrap',
-        margin: '2rem 1rem',
-        '> * ': {
-            flex: '1 1 0 !important',
-        },
-    },
-};
-/*
-   we have kept extra margin by taking 80% instead of 100%, because margins and padding,
-   and gaps also take up space, so we should be left with appropriate space
-   example:
-   ['1','1'] => ['40%','40%']
-   ['1','2'] => ['27%','53%']
- */
-export function getPercentArray(fractionArray?: string[] | number[]): string[] {
-    const numbers = fractionArray?.map((numberString) => +numberString)?.filter((num) => 0 < num && num < 10) ?? [];
-    const sum = numbers.reduce((currentSum, currentNumber) => currentSum + currentNumber, 0);
-    return numbers.map((currentNumber) => ((currentNumber / sum) * 80).toFixed(2) + '%');
-}

package/src/common/column-control/types.d.ts

@@ -1,46 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { AdditionalProps } from '../common.types';
-
-/*
-    options to be shown on content stack
-		1 Column (100%)
-		2 Columns (50%, 50%)
-		2 Columns (33%, 67%)
-		2 Columns (67%, 33%)
-		3 Columns (33%, 33%, 33%)
-		3 Columns (50%, 25%, 25%)
-		3 Columns (25%, 25%, 50%)
-		4 Columns (25%, 25%, 25%, 25%)
-*/
-export type NsColumnControlProps = PropsWithChildren<{
-    /**
-     * follows the convention of ns-col-lg-(column-ratio) (for large screens >= 960px),
-     *  ns-col-md-(column-ratio) (for tablet screens >= 600px),
-     *  and ns-col-sm-(column-ratio) (for mobile screens i.e < 600px)
-     * sample values
-     * 'ns-col-lg-2-1', 'ns-col-lg-1-2', 'ns-col-lg-1-1',
-     */
-    columnClass: string;
-    gap?: number;
-}> &
-    AdditionalProps;
-
-export type sizeObjectType = {
-    fractions?: number[];
-    tabletFractions?: number[];
-    mobileFractions?: number[];
-};
-
-export type NsFlexColumnsProps = PropsWithChildren<{
-    /**
-     * follows the convention of ns-col-lg-{column-ratio}
-     * sample value for column-ratio = 2-1 ==>ns-col-lg-2-1
-     */
-    columnClass: string;
-    gap: number;
-    /* when this boolean is true, column control takes full width of page instead of being restricted to 1200px */
-    isFullWidth?: boolean;
-}> &
-    AdditionalProps;
-
-export type NsGridColumnsProps = NsFlexColumnsProps;

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

@@ -1,66 +0,0 @@
-import { ValueOf } from 'next/dist/shared/lib/constants';
-import { NsColumnControlProps, sizeObjectType } from './types.d';
-
-export const columnClasses: NsColumnControlProps['columnClass'][] = [
-    'ns-col-lg-2-1',
-    'ns-col-lg-1-2',
-    'ns-col-lg-1-1',
-    'ns-col-lg-1-1-1',
-    'ns-col-lg-2-1-1',
-    'ns-col-lg-1-1-1-1',
-    'ns-col-md-1',
-    'ns-col-md-1-1',
-    'ns-col-md-1-2',
-    'ns-col-md-2-1',
-    'ns-col-md-1-1-1',
-    'ns-col-md-2-1-1',
-    'ns-col-sm-1',
-    'ns-col-sm-1-1',
-    'ns-col-sm-1-2',
-    'ns-col-sm-2-1',
-];
-const sizeKeyPrefix = {
-    desktop: 'ns-col-lg-',
-    tablet: 'ns-col-md-',
-    mobile: 'ns-col-sm-',
-} as const;
-
-const sizeKeyMap: Record<ValueOf<typeof sizeKeyPrefix>, string> = {
-    [sizeKeyPrefix.desktop]: 'fractions',
-    [sizeKeyPrefix.tablet]: 'tabletFractions',
-    [sizeKeyPrefix.mobile]: 'mobileFractions',
-};
-
-/**
- * getColumnSizes function, we parse the input class and
- * return an object containing optionally containing 3 keys namely [fractions, tabletFractions, mobileFractions]
- * value of each of the key is an array of fractions example ['1','1']
- * meaning that the column should be divided into two fractions each of 1fr
- * @param inputColumnClass = a string that is mix of ns-col-lg-1-1-1 ns-col-md-1-1 ns-col-sm-1 etc
- * @returns {fractions:['1','1','1'], tabletFractions:['1','1'], mobileFractions:['1'] }
- */
-export const getColumnSizes = (inputColumnClass: string): sizeObjectType => {
-    const columnClass = inputColumnClass.trim();
-    const validClasses = columnClass
-        .split(' ')
-        .filter((e) => Object.values(sizeKeyPrefix).some((prefix) => e.startsWith(prefix)));
-    const sizeObject: sizeObjectType = validClasses.reduce((acc: any, current: string) => {
-        for (const key of Object.values(sizeKeyPrefix)) {
-            if (current.startsWith(key)) {
-                const interClass = current.replace(key, '');
-                const sizes = interClass.split('-').filter((e) => /^[1-9]$/.test(e));
-                acc[sizeKeyMap[key]] = sizes;
-                break;
-            }
-        }
-        return acc;
-    }, {});
-    if (Object.keys(sizeObject).length < 1) {
-        /* based on string passed as className, no valid size array could be extracted */
-        console.warn(
-            'Received invalid className, valid column-control className starts with ' +
-                Object.values(sizeKeyPrefix).join(', ')
-        );
-    }
-    return sizeObject;
-};

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

@@ -1,21 +0,0 @@
-import { FoundationTheme } from '@nuskin/foundation-theme';
-
-export type CslpTag = { 'data-cslp': string };
-
-export type AdditionalProps = {
-    additionalProps?: {
-        ariaLabel?: string;
-        testid?: string;
-        className?: string;
-        'data-testid'?: string;
-    } & Partial<CslpTag>;
-    cslp?: Record<string, CslpTag>;
-} & DarkModeEnabledOption;
-
-export type Themed = {
-    theme: FoundationTheme.Theme;
-};
-
-export type DarkModeEnabledOption = {
-    darkModeEnabled?: boolean;
-};