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

package/src/common/accordion/stories/NsAccordion.stories.tsx

@@ -1,65 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsAccordion, AccordionVariant } from '../..';
-import { getAccordionData } from './data';
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-const meta = {
-    title: 'Components/Containers/Accordion',
-    component: NsAccordion,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        allowMultipleExpanded: {
-            control: 'boolean',
-            description: `if true, then multiple sections can remain open at a same time, and if false,
-            opening a section will close other sections of the accordion`,
-        },
-        items: {
-            description: ` this should be an array of objects, each object should have 3 properties,
-            title, body and isDefaultOpen`,
-        },
-        variant: {
-            control: 'select',
-            options: [...Object.values(AccordionVariant)],
-        },
-        level: {
-            control: 'number',
-            description: `level = 1 means no padding on left from parent to child,
-            level = 2 means padding of 16px, level = 3 means padding of 32px and so on ..`,
-        },
-    },
-    args: {
-        variant: AccordionVariant.Basic,
-        invert: false,
-        level: 2,
-    },
-} satisfies MetaStory;
-
-export default meta;
-
-type MetaStory = Meta<typeof NsAccordion>;
-type Story = StoryObj<typeof meta>;
-
-export const SingleOpen: Story = {
-    args: {
-        allowMultipleExpanded: false,
-        items: getAccordionData(),
-        invert: false,
-    },
-    play: ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-        const el1 = canvas.getByText('Example - 1 JSX');
-        expect(el1).toBeInTheDocument();
-        expect(el1.closest('header')).toHaveAttribute('aria-expanded', 'true');
-        const el2 = canvas.getByText('Example - 2');
-        expect(el2).toBeInTheDocument();
-        expect(el2.closest('header')).toHaveAttribute('aria-expanded', 'false');
-    },
-};
-
-export const MultipleOpen: Story = {
-    args: {
-        allowMultipleExpanded: true,
-        items: getAccordionData(),
-    },
-};

package/src/common/accordion/stories/NsAccordionHeader.stories.tsx

@@ -1,44 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { AccordionVariant, NsAccordionHeader, NsIconVariants } from '../..';
-
-type ComponentType = typeof NsAccordionHeader;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Containers/Accordion/NsAccordionHeader',
-    component: NsAccordionHeader,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        title: { control: 'string' },
-        openedIconName: {
-            control: 'select',
-            options: Object.keys(NsIconVariants),
-        },
-        closedIconName: {
-            control: 'select',
-            options: Object.keys(NsIconVariants),
-        },
-    },
-    args: {
-        title: 'Nuskin',
-        variant: AccordionVariant.Compact,
-        onClick: () => {
-            console.log('accordion header clicked');
-        },
-        startIcon: {
-            name: 'home',
-        },
-        openedIconName: 'arrowUp',
-        closedIconName: 'arrowDown',
-        isOpen: false,
-    },
-} as MetaStory;
-
-export const ClosedHeader: Story = {};
-export const OpenedHeader: Story = {
-    args: {
-        isOpen: true,
-    },
-};

package/src/common/accordion/stories/NsAccordionItem.stories.tsx

@@ -1,48 +0,0 @@
-import { ReactElement } from 'react';
-
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { AccordionVariant, NsAccordionItem } from '../../';
-import NsAccordionStory from './NsAccordion.stories';
-
-type ComponentType = typeof NsAccordionItem;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Containers/Accordion/NsAccordionItem',
-    component: NsAccordionItem,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        isOpen: {
-            control: 'boolean',
-            description: 'if true renders NsAccordionItem in open state, and close state otherwise',
-        },
-        content: {},
-        title: {
-            control: 'string',
-            description: 'text used for header of section',
-        },
-        level: NsAccordionStory.argTypes.level,
-        variant: NsAccordionStory.argTypes.variant,
-    },
-} as MetaStory;
-
-export const OpenSection: Story = {
-    args: {
-        variant: AccordionVariant.Compact,
-        isOpen: true,
-        content: (<div className="p-2">Nuskin Description</div>) as ReactElement,
-        title: 'Nuskin',
-    },
-};
-
-export const ClosedSection: Story = {
-    args: {
-        variant: AccordionVariant.Compact,
-        isOpen: false,
-        content: (<div className="p-2">Nuskin Description</div>) as ReactElement,
-        title: 'Nuskin',
-    },
-};

package/src/common/accordion/stories/NsCollapse.stories.tsx

@@ -1,53 +0,0 @@
-import { ReactElement } from 'react';
-
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { AccordionContentTypeObject, AccordionVariant, NsCollapse } from '../';
-import NsAccordionStory from './NsAccordion.stories';
-
-type ComponentType = typeof NsCollapse;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Containers/Accordion/NsCollapse',
-    component: NsCollapse,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        isOpen: {
-            control: 'boolean',
-            description: 'if true renders NsCollapse in open state, and close state otherwise',
-        },
-        content: {
-            control: 'React Node',
-            description: 'Content for NsCollapse',
-        },
-        allowMultipleExpanded: {
-            control: 'boolean',
-            description: 'This prop is useful when content is an array of accordion items',
-        },
-        type: {
-            control: 'select',
-            values: Object.values(AccordionContentTypeObject),
-            description: 'This type should exactly match the content type to have accordion work correctly',
-        },
-        level: NsAccordionStory.argTypes.level,
-        variant: NsAccordionStory.argTypes.variant,
-    },
-    args: {
-        variant: AccordionVariant.Compact,
-    },
-} as MetaStory;
-export const Closed: Story = {
-    args: {
-        isOpen: false,
-        content: (<div className="p-2">Nuskin Description</div>) as ReactElement,
-    },
-};
-export const Open: Story = {
-    args: {
-        isOpen: true,
-        content: (<div className="p-2">Nuskin Description</div>) as ReactElement,
-    },
-};

package/src/common/accordion/stories/NsToggleSection.stories.tsx

@@ -1,27 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { AccordionVariant, NsToggleSection } from '../..';
-import NsAccordionStory from './NsAccordion.stories';
-import { ReactElement } from 'react';
-
-type ComponentType = typeof NsToggleSection;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Containers/Accordion/NsToggleSection',
-    component: NsToggleSection,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        level: NsAccordionStory.argTypes.level,
-        variant: NsAccordionStory.argTypes.variant,
-        title: { control: 'string' },
-    },
-    args: {
-        variant: AccordionVariant.Compact,
-        title: 'Nuskin',
-        content: (<div className="p-2">Nuskin Details</div>) as ReactElement,
-    },
-} as MetaStory;
-
-export const DefaultAccordion: Story = {};

package/src/common/accordion/stories/data.tsx

@@ -1,145 +0,0 @@
-import { AccordionItem } from '../types';
-import { ReactElement } from 'react';
-
-import { AccordionContentTypeObject, NsIconProps } from '../..';
-
-const getItem = () => {
-    return {
-        id: parseInt(Math.random() * 10000000 + '') + '',
-    };
-};
-const getIcon = (name = '', color = '') => {
-    return {
-        name: (name || 'home') as NsIconProps['name'],
-        color: (color || 'primary') as NsIconProps['color'],
-    };
-};
-export const getTextContent = (text = '') => {
-    return {
-        type: AccordionContentTypeObject.text as AccordionItem['type'],
-        content: text || dummyText,
-    };
-};
-const getJsxContent = (text = ''): ReactElement => {
-    return <div className="p-4">{text || 'Content type can be jsx, text, html or Accordion'}</div>;
-};
-export const dummyText = `1. Theme can be set to either ‘gray’ or ‘stripe’, adjusting only the appearance of
-the topmost set of accordions.\n
-2. Accordions can be nested repeatedly, internal accordions follow the ‘gray’ theme.\n
-3. Color can be inverted by setting boolean ‘invert’ attribute. This inversion affects all levels of the accordion.\n
-4. Per level offset of accordion can be changed by setting the level attribute.\n
-Defaults to 1 which is zero offset - all level titles appear stacked directly over each other.`;
-function createAccordionItem1(): AccordionItem {
-    return {
-        ...getItem(),
-        icon: getIcon(),
-        title: 'Example - 1 JSX',
-        content: getJsxContent(),
-        type: AccordionContentTypeObject.jsx,
-        isDefaultOpen: true,
-    };
-}
-function createAccordionItem2(): AccordionItem {
-    return {
-        ...getItem(),
-        isDefaultOpen: true,
-        icon: getIcon(),
-        title: 'Example - 2',
-        type: AccordionContentTypeObject.accordion,
-        content: [
-            { ...getItem(), title: 'Example - 2.1', ...getTextContent() },
-            {
-                ...getItem(),
-                icon: getIcon('hamburgerIcon', 'success'),
-                title: 'Example - 2.2',
-                type: AccordionContentTypeObject.jsx,
-                content: <div className="p-2">Example 2.2 Content</div>,
-            },
-        ],
-    };
-}
-function createAccordionItem3(): AccordionItem {
-    return {
-        ...getItem(),
-        icon: getIcon('hamburgerIcon', 'success'),
-        title: 'Example - 3',
-        type: AccordionContentTypeObject.accordion,
-        content: [
-            createAccordionItem3_1(),
-            {
-                ...getItem(),
-
-                title: 'Example - 3.2',
-                type: AccordionContentTypeObject.text,
-                content: dummyText,
-            },
-        ],
-    };
-}
-
-export function createAccordionItem3_1(): AccordionItem {
-    return {
-        ...getItem(),
-        title: 'Example - 3.1',
-        allowMultipleExpanded: true,
-        type: AccordionContentTypeObject.accordion,
-        content: [
-            {
-                ...getItem(),
-                title: 'Example - 3.1.1',
-                type: AccordionContentTypeObject.text,
-                content: dummyText,
-            },
-            {
-                ...getItem(),
-                title: 'Example - 3.1.2',
-                type: AccordionContentTypeObject.text,
-                content: dummyText,
-            },
-        ],
-    };
-}
-
-function createAccordionItem4(): AccordionItem {
-    return {
-        ...getItem(),
-        icon: getIcon(),
-        title: 'Example - 4',
-        type: AccordionContentTypeObject.accordion,
-        content: [
-            createAccordionItem4_1(),
-            {
-                ...getItem(),
-                title: 'Example - 4.2',
-                type: AccordionContentTypeObject.html,
-                content: '<h2>Lorem ipsum dolor sit amet.</h2>',
-            },
-        ],
-    };
-}
-
-function createAccordionItem4_1(): AccordionItem {
-    return {
-        ...getItem(),
-        title: 'Example - 4.1',
-        type: AccordionContentTypeObject.accordion,
-        content: [
-            {
-                ...getItem(),
-
-                title: 'Example - 4.1.1',
-                type: AccordionContentTypeObject.text,
-                content: dummyText,
-            },
-            {
-                ...getItem(),
-                type: AccordionContentTypeObject.jsx,
-                content: <div className="p-3">Example 4.1.2. content</div>,
-                title: 'Example - 4.1.2',
-            },
-        ],
-    };
-}
-export function getAccordionData(): AccordionItem[] {
-    return [createAccordionItem1(), createAccordionItem2(), createAccordionItem3(), createAccordionItem4()];
-}

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

@@ -1,90 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-
-import { AdditionalProps, CslpTag } from '../common.types';
-import { NsIconNameType, NsIconProps } from '../icon';
-import { Variants } from '../typography';
-import { AccordionContentType, AccordionVariantType } from './enums';
-
-export type AccordionItem = {
-    allowMultipleExpanded?: boolean;
-    type: AccordionContentType;
-    id: string;
-    content: string | AccordionItem[] | ReactElement | null;
-    icon?: NsIconProps;
-    title: string | ReactElement;
-    isDefaultOpen?: boolean;
-    $?: {
-        rte: CslpTag;
-        item_title: CslpTag;
-    };
-};
-
-export type NsAccordionProps = AdditionalProps & {
-    invert: boolean;
-    level: number;
-    variant: AccordionVariantType;
-    items?: AccordionItem[];
-    isChild?: boolean;
-    headerTypographyVariant?: Variants;
-    /** NsIcon's icon name to be shown in opened state */
-    openedIconName?: NsIconNameType;
-    /** NsIcon's icon name to be shown in closed state */
-    closedIconName?: NsIconNameType;
-    allowMultipleExpanded: boolean;
-    showEndIconWhenEmpty?: boolean;
-};
-
-type CommonAccordionType = {
-    invert: boolean;
-    level: number;
-    variant: AccordionVariantType;
-    content: AccordionItem['content'];
-};
-
-export type NsAccordionHeaderProps = AdditionalProps & {
-    title: string | ReactNode;
-    // eslint-disable-next-line no-unused-vars
-    onClick: (...args: any[]) => void;
-    /** a flag for the header, based on which header can change properties */
-    isOpen: boolean;
-    /** NsIcon's icon name to be shown in opened state */
-    openedIconName?: NsIconNameType;
-    /** NsIcon's icon name to be shown in closed state */
-    closedIconName?: NsIconNameType;
-    headerTypographyVariant?: Variants;
-    startIcon?: NsIconProps;
-    showEndIconWhenEmpty?: boolean;
-    content: AccordionItem['content'];
-} & Pick<CommonAccordionType, 'invert' | 'variant'>;
-
-export type NsCollapseProps = AdditionalProps & {
-    isOpen: boolean;
-    isChild: boolean;
-    allowMultipleExpanded?: boolean;
-    type: AccordionContentType;
-} & CommonAccordionType;
-
-export type NsToggleSectionProps = AdditionalProps & {
-    title: string | ReactNode;
-    /** if true, NsToggle is rendered in open state, that collapsible section is visible */
-    defaultOpen?: boolean;
-    isChild: boolean;
-    type: AccordionContentType;
-} & Pick<CommonAccordionType, 'invert' | 'variant' | 'content'>;
-
-export type NsAccordionItemProps = AdditionalProps & {
-    isOpen: boolean;
-    // eslint-disable-next-line no-unused-vars
-    toggleOpen(index: number, isOpen: boolean): void;
-    title: string | ReactNode;
-    headerTypographyVariant?: Variants;
-    /** NsIcon's icon name to be shown in opened state */
-    openedIconName?: NsIconNameType;
-    /** NsIcon's icon name to be shown in closed state */
-    closedIconName?: NsIconNameType;
-    startIcon?: NsIconProps;
-    isChild: boolean;
-    type: AccordionContentType;
-    allowMultipleExpanded?: boolean;
-    showEndIconWhenEmpty?: boolean;
-} & CommonAccordionType;

package/src/common/alert/Header.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { FoundationTheme } from '@nuskin/foundation-theme';
-
-import type { HeaderProps } from './types.d';
-import { NsIconNameType } from '../icon/types';
-
-export const colorMap: { [key: string]: FoundationTheme.PaletteColors } = {
-    error: 'error',
-    notice: 'info',
-    success: 'secondary',
-    warning: 'warning',
-    default: 'info',
-};
-
-export const iconMap: { [key: string]: NsIconNameType } = {
-    error: 'alertError',
-    success: 'success',
-    warning: 'warning',
-    default: 'infoFilled',
-};
-
-const Header: React.FC<HeaderProps> = ({ children, head }) => (
-    <>
-        {children}
-        {head}
-    </>
-);
-
-export default Header;

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

@@ -1,167 +0,0 @@
-import React from 'react';
-import { render, fireEvent, screen, act } from '@/test-utils/index';
-import NsAlert from './NsAlert';
-
-const addEventListenerMock = jest.spyOn(window, 'addEventListener');
-const removeEventListenerMock = jest.spyOn(window, 'removeEventListener');
-
-describe('NsAlert', () => {
-    test('1. renders alert with provided props', () => {
-        render(
-            <NsAlert
-                context="error"
-                title="Error Alert"
-                threshold={800}
-                type="banner"
-                visible
-                head={<span>Alert Head</span>}
-                body={<p>Alert Body</p>}
-                foot={<span>Dismiss</span>}
-                onDismiss={() => {}}
-            />
-        );
-
-        expect(screen.getByText('Error Alert')).toBeInTheDocument();
-        expect(screen.getByText('Alert Head')).toBeInTheDocument();
-        expect(screen.getByText('Alert Body')).toBeInTheDocument();
-        expect(screen.getByText('Dismiss')).toBeInTheDocument();
-    });
-
-    test('2. calls onDismiss function when dismissed', () => {
-        const onDismissMock = jest.fn();
-        render(
-            <NsAlert
-                context="info"
-                title="Info Alert"
-                threshold={600}
-                type="auto"
-                visible
-                head={<span>Alert Head</span>}
-                body={<p>Alert Body</p>}
-                onDismiss={onDismissMock}
-            />
-        );
-
-        expect(screen.getByTestId('alert-close-button')).toBeInTheDocument();
-        const button = screen.getByTestId('alert-close-button');
-        fireEvent.click(button);
-        expect(onDismissMock).toHaveBeenCalled();
-    });
-
-    test('3. hides alert when not visible', () => {
-        render(
-            <NsAlert
-                context="success"
-                title="Success Alert"
-                threshold={700}
-                type="card"
-                visible={false}
-                head={<span>Alert Head</span>}
-                body={<p>Alert Body</p>}
-            />
-        );
-
-        expect(screen.getByTestId('alert-container')).toHaveStyle('display: none');
-    });
-
-    test('4. adds and removes event listener on mount/unmount', () => {
-        act(() => {
-            render(
-                <NsAlert
-                    context="notice"
-                    title="Success Alert"
-                    threshold={700}
-                    type="card"
-                    visible={false}
-                    head={<span>Alert Head</span>}
-                    body={<p>Alert Body</p>}
-                />
-            );
-        });
-
-        expect(addEventListenerMock).toHaveBeenCalledWith('resize', expect.any(Function));
-
-        expect(removeEventListenerMock).toHaveBeenCalledWith('resize', expect.any(Function));
-    });
-
-    test('5. updates windowWidth on resize and auto type and greater threshold to select card', () => {
-        const originalInnerWidth = window.innerWidth;
-        window.innerWidth = 500; // Set a desired window width for testing
-
-        act(() => {
-            render(<NsAlert threshold={2000} type="auto" />);
-        });
-
-        // Simulate a resize event by restoring the original innerWidth
-        window.innerWidth = originalInnerWidth;
-
-        act(() => {
-            window.dispatchEvent(new Event('resize'));
-        });
-    });
-    test('6. updates windowWidth on resize', () => {
-        const originalInnerWidth = window.innerWidth;
-        window.innerWidth = 500; // Set a desired window width for testing
-
-        act(() => {
-            render(<NsAlert />);
-        });
-
-        // Simulate a resize event by restoring the original innerWidth
-        window.innerWidth = originalInnerWidth;
-
-        act(() => {
-            window.dispatchEvent(new Event('resize'));
-        });
-    });
-
-    test('7. get props error in console for types', () => {
-        render(
-            <NsAlert
-                context="warning"
-                title="warning Alert"
-                threshold={800}
-                type="noCard"
-                visible
-                head={<span>Alert Head</span>}
-                body={<p>Alert Body</p>}
-            />
-        );
-
-        expect(screen.getByTestId('alert-container')).toHaveStyle('display: block');
-    });
-
-    test('8. get props error in console for context', () => {
-        render(
-            <NsAlert
-                context="warningError"
-                title="warning Alert"
-                threshold={800}
-                type="card"
-                visible
-                head={<span>Alert Head</span>}
-                body={<p>Alert Body</p>}
-            />
-        );
-
-        expect(screen.getByTestId('alert-container')).toHaveStyle('display: block');
-    });
-    test('9. console.error to be called twice', () => {
-        const original = console.error;
-        console.error = jest.fn();
-        render(
-            <NsAlert
-                context=""
-                title="warning Alert"
-                threshold={2000}
-                type=""
-                visible
-                head={<span>Alert Head</span>}
-                body={<p>Alert Body</p>}
-            />
-        );
-        expect(console.error).toHaveBeenCalledTimes(2);
-        console.error = original;
-        expect(screen.getByTestId('alert-container')).toHaveStyle('display: block');
-    });
-});