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

package/src/common/toast/specs/Toast.spec.tsx

@@ -1,122 +0,0 @@
-import { VariantType, closeSnackbar } from 'notistack';
-import { render, screen } from '@/test-utils/index';
-import React, { PropsWithChildren, useEffect } from 'react';
-
-import { NsToastProvider, ToastOptions, useToast } from '../';
-
-const ToastWrapper = ({ children }: PropsWithChildren<{}>) => {
-    return <NsToastProvider>{children}</NsToastProvider>;
-};
-
-const ToastComponent = (props: { variant: VariantType; message?: string; options?: ToastOptions }) => {
-    const { showToast } = useToast();
-    const { variant, message, options } = props;
-    useEffect(() => {
-        showToast(variant, message, options);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return <div></div>;
-};
-
-describe('Toast', () => {
-    afterEach(() => {
-        closeSnackbar();
-    });
-    it('1. should render a toast and displays the message', () => {
-        render(
-            <ToastWrapper>
-                <ToastComponent variant="success" message="Hello" />
-            </ToastWrapper>
-        );
-        expect(screen.queryByText('Hello')).toBeInTheDocument();
-    }, 100000);
-    it('2. should render a success toast', () => {
-        const { container } = render(
-            <ToastWrapper>
-                <ToastComponent variant="success" message="Hello" />
-            </ToastWrapper>
-        );
-        expect(container.querySelector('.notistack-MuiContent-success')).toBeInTheDocument();
-    }, 100000);
-    it('3. should render a error toast', () => {
-        const { container } = render(
-            <ToastWrapper>
-                <ToastComponent variant="error" message="Hello" />
-            </ToastWrapper>
-        );
-        expect(container.querySelector('.notistack-MuiContent-error')).toBeInTheDocument();
-    }, 100000);
-    it('4. should render a info toast', () => {
-        const { container } = render(
-            <ToastWrapper>
-                <ToastComponent variant="info" message="Hello" />
-            </ToastWrapper>
-        );
-        expect(container.querySelector('.notistack-MuiContent-info')).toBeInTheDocument();
-    }, 100000);
-    it('5. it should render a warning toast', () => {
-        const { container } = render(
-            <ToastWrapper>
-                <ToastComponent variant="warning" message="Hello" />
-            </ToastWrapper>
-        );
-        expect(container.querySelector('.notistack-MuiContent-warning')).toBeInTheDocument();
-    }, 100000);
-    it('6. should render a warning toast and disappear after 3 seconds', async () => {
-        const { container } = render(
-            <ToastWrapper>
-                <ToastComponent variant="warning" message="Hello" options={{ autoHideDuration: 3000 }} />
-            </ToastWrapper>
-        );
-        expect(container.querySelector('.notistack-MuiContent-warning')).toBeInTheDocument();
-        await new Promise((r) => setTimeout(r, 4000));
-        expect(container.querySelector('.notistack-MuiContent-warning')).not.toBeInTheDocument();
-    }, 100000);
-    it('7. should render a action buttons', async () => {
-        const { getByTestId } = render(
-            <ToastWrapper>
-                <ToastComponent
-                    variant="warning"
-                    message="Hello"
-                    options={{
-                        actions: [
-                            {
-                                label: 'Undo',
-                                onClick: () => alert('Undo clicked'),
-                            },
-                        ],
-                    }}
-                />
-            </ToastWrapper>
-        );
-        expect(getByTestId('action-button')).toBeInTheDocument();
-    }, 100000);
-    it('8. should render close button', async () => {
-        const { getByTestId } = render(
-            <ToastWrapper>
-                <ToastComponent variant="warning" message="Hello" options={{ showCloseIcon: true }} />
-            </ToastWrapper>
-        );
-        expect(getByTestId('icon')).toBeInTheDocument();
-    }, 100000);
-    it('9. should render a action buttons and close button', async () => {
-        const { getAllByRole } = render(
-            <ToastWrapper>
-                <ToastComponent
-                    variant="warning"
-                    message="Hello"
-                    options={{
-                        actions: [
-                            {
-                                label: 'Undo',
-                                onClick: () => alert('Undo clicked'),
-                            },
-                        ],
-                        showCloseIcon: true,
-                    }}
-                />
-            </ToastWrapper>
-        );
-        expect(getAllByRole('button')?.length).toBe(2);
-    }, 100000);
-});

package/src/common/toast/stories/Toast.stories.tsx

@@ -1,82 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { VariantType } from 'notistack';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { NsToastProvider, ToastOptions, useToast } from '../';
-
-type ComponentType = typeof NsToastProvider;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-type ToastProps = {
-    variant?: VariantType;
-    message?: string;
-    options?: ToastOptions;
-};
-
-const ToastDecorator = (Story: React.FC): ReactElement => {
-    return (
-        <NsToastProvider>
-            <Story />
-        </NsToastProvider>
-    );
-};
-
-const ToastComponent = (props: ToastProps): ReactElement => {
-    const {
-        variant,
-        message = 'Toast Demo',
-        options = {
-            autoHideDuration: 2000,
-        },
-    } = props;
-    const { showToast } = useToast();
-
-    const toastHandler = () => {
-        showToast(variant, message, options);
-    };
-
-    return (
-        <div>
-            <button onClick={toastHandler}>Show Toast</button>
-        </div>
-    );
-};
-
-export default {
-    title: 'Components/Feedback/NsToast',
-    component: ToastComponent,
-    decorators: [ToastDecorator],
-    argTypes: {
-        variant: { control: 'select', options: ['success', 'error', 'warning', 'info'] },
-        message: { control: 'text' },
-        options: {
-            autoHideDuration: { control: 'number' },
-            persist: { control: 'boolean' },
-            className: { control: 'text' },
-            showCloseIcon: { control: 'boolean' },
-            actions: {
-                description: 'The buttons should  be passed to the Toast element',
-            },
-        },
-    },
-    args: {
-        variant: 'error',
-        message: 'Toast component',
-        options: {
-            autoHideDuration: 2000,
-            persist: false,
-            showCloseIcon: false,
-            actions: [
-                {
-                    label: 'Undo',
-                    onClick: () => alert('Undo clicked'),
-                },
-            ],
-        },
-    },
-} as MetaStory;
-
-export const NsToast: Story = {};

package/src/common/toast/useToast.tsx

@@ -1,65 +0,0 @@
-import { JSX } from 'react';
-import { closeSnackbar, enqueueSnackbar, VariantType } from 'notistack';
-import Fade from './Fade';
-import NsIcon from '../icon/NsIcon';
-import NsButton from '../button/NsButton';
-
-type ToastActionLink = {
-    label: string;
-    onClick?: () => void;
-};
-
-export type ToastOptions = {
-    className?: string;
-    autoHideDuration?: number | null;
-    persist?: boolean;
-    showCloseIcon?: boolean;
-    actions?: ToastActionLink[];
-}
-
-
-const useToast = () => {
-    const closeToast = (toastId?: string) => {
-        closeSnackbar(toastId);
-    };
-    const generateActionButtons = (showCloseIcon: boolean = false, variant: VariantType = 'success', actions?: ToastActionLink[]) => {
-        let actionButtons: JSX.Element[] = [];
-        if (actions?.length) {
-            actionButtons = actions.map((action) => (
-                <NsButton data-testid="action-button" variant="text" color={variant as any} key={action?.label} onClick={() => action.onClick?.()}>
-                    {action.label}
-                </NsButton>
-            ));
-        }
-        if (showCloseIcon) {
-            actionButtons.push (
-                <NsButton variant="text" onClick={() => closeToast()}>
-                    <NsIcon name="close" size="small" cursor="pointer" />
-                </NsButton>
-            );
-        }
-        return actionButtons?.length ? actionButtons : null;
-    };
-    const showToast = (variant: VariantType = 'default', message?: string, options?: ToastOptions) => {
-
-        try {
-            return enqueueSnackbar(<div className='toast-message-wrapper'>{message}</div>, {
-                variant,
-                ...options,
-                anchorOrigin: { horizontal: 'center', vertical: 'bottom' },
-                preventDuplicate: true,
-                TransitionComponent: Fade,
-                action: generateActionButtons(options?.showCloseIcon, variant, options?.actions),
-            });
-        } catch (err) {
-            console.error('CFT::UI:COMPONENTS showToast should be used inside NsToastProvider');
-        } 
-    };
-    
-    return {
-        showToast,
-        closeToast
-    };
-};
-
-export default useToast;

package/src/common/typography/GlobalFontInter.tsx

@@ -1,15 +0,0 @@
-import { ReactElement } from 'react';
-
-import {
-    css,
-    GlobalStyles,
-} from '@nuskin/foundation-theme';
-
-const GlobalFontInter = (): ReactElement => (
-    <GlobalStyles
-        styles={css`
-            @import url('https://fonts.googleapis.com/css2?family=Inter');
-        `}
-    />
-);
-export default GlobalFontInter;

package/src/common/typography/HtmlTagVariantMap.tsx

@@ -1,24 +0,0 @@
-import { HtmlTagVariant } from './types';
-
-const HtmlTagVariantMapping: Record<string, HtmlTagVariant> = {
-    h1: 'h1',
-    h2: 'h2',
-    h3: 'h3',
-    h4: 'h4',
-    h5: 'h5',
-    h6: 'h6',
-    CTA: 'span',
-    'title-l': 'h3',
-    'title-m': 'h5',
-    'title-s': 'h6',
-    'label-l': 'label',
-    'label-m': 'label',
-    'label-s': 'label',
-    'body-xl': 'p',
-    'body-l': 'p',
-    'body-m': 'p',
-    'body-s': 'p',
-    'body-xs': 'p',
-};
-
-export default HtmlTagVariantMapping;

package/src/common/typography/NsTypography.spec.tsx

@@ -1,37 +0,0 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-
-import NsTypography from './NsTypography';
-
-describe('GlobalFontInter', () => {
-    it('0. should match snapshot', () => {
-        const text = 'Hello Typo!';
-        const { container } = render(<NsTypography variant={'h1'}>{text}</NsTypography>);
-        expect(container).toMatchSnapshot();
-    });
-    it('1. renders without crashing', () => {
-        const text = 'Hello Typo!';
-        const { getByText } = render(<NsTypography variant={'h1'}>{text}</NsTypography>);
-        expect(getByText(text)).toBeInTheDocument();
-    });
-
-    it('2. renders without crashing with p-l variant', () => {
-        const text = 'Hello Typo!';
-        const { getByText } = render(
-            <NsTypography variant="h4" weight="bold" className="mt-2" decoration="underline" color="primary">
-                {text}
-            </NsTypography>
-        );
-        expect(getByText(text)).toBeInTheDocument();
-    });
-
-    it('3. should not render with default color primary when color is passed', () => {
-        const text = 'Hello Typo!';
-        const { getByText } = render(
-            <NsTypography variant="h4" weight="bold" className="mt-2" decoration="underline" color="accentColorA">
-                {text}
-            </NsTypography>
-        );
-        expect(getByText(text)).not.toHaveAttribute('color', 'primary');
-    });
-});

package/src/common/typography/NsTypography.stories.tsx

@@ -1,27 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsTypography } from './';
-
-type ComponentType = typeof NsTypography;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Data Display/NsTypography',
-    component: NsTypography,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        children: {
-            control: 'text',
-            name: 'Children/Text',
-            defaultValue: 'NsTypography',
-        },
-    },
-    args: {
-        children: 'NsTypography',
-        color: 'primary',
-        renderHTMLNode:true
-    },
-} as MetaStory;
-
-export const Typography: Story = {};

package/src/common/typography/NsTypography.tsx

@@ -1,44 +0,0 @@
-import React, {
-    PropsWithChildren,
-    ReactElement,
-} from 'react';
-
-import HtmlTagVariantMapping from './HtmlTagVariantMap';
-import {
-    HtmlTagVariant,
-    NsTypographyProps,
-} from './types.d';
-import { StyledTypography } from './Typography.styled';
-
-const NsTypography = ({
-    children,
-    weight = 'normal',
-    className = '',
-    variant = 'body-l',
-    decoration = 'none',
-    color = 'primary',
-    additionalProps = {},
-    colorOverride = '',
-    noSpacing = false,
-    renderHTMLNode,
-}: PropsWithChildren<NsTypographyProps>): ReactElement => {
-    const htmlTagVariant: HtmlTagVariant | undefined = renderHTMLNode ? HtmlTagVariantMapping[variant] : undefined;
-
-    return (
-        <StyledTypography
-            noSpacing={noSpacing}
-            as={htmlTagVariant}
-            className={className}
-            weight={weight}
-            variant={variant}
-            decoration={decoration}
-            colorOverride={colorOverride}
-            color={color}
-            {...additionalProps}
-        >
-            {children}
-        </StyledTypography>
-    );
-};
-
-export default NsTypography;

package/src/common/typography/Typography.styled.tsx

@@ -1,195 +0,0 @@
-import { ColorUtils, FoundationTheme, styled } from '@nuskin/foundation-theme';
-
-import { NsTypographyProps } from './types.d';
-
-const { paletteColor } = ColorUtils;
-
-type TypographyConfig = {
-    fontFamily: string;
-    fontSize?: number;
-    lineHeight?: number;
-    letterSpacingPercentage?: number;
-    paragraphSpacing?: number;
-    fontWeight?: number;
-};
-
-const defaultFont = 'Inter';
-const defaultTypographyStyles = {
-    h1: {
-        fontFamily: defaultFont,
-        fontSize: 42,
-        lineHeight: 48,
-        letterSpacingPercentage: 0,
-        paragraphSpacing: 0,
-    },
-    h2: {
-        fontFamily: defaultFont,
-        fontSize: 36,
-        lineHeight: 42,
-        letterSpacingPercentage: 0,
-        paragraphSpacing: 0,
-    },
-    h3: {
-        fontFamily: defaultFont,
-        fontSize: 32,
-        lineHeight: 38,
-        letterSpacingPercentage: 0,
-        paragraphSpacing: 0,
-    },
-    h4: {
-        fontFamily: defaultFont,
-        fontSize: 26,
-        lineHeight: 34,
-        letterSpacingPercentage: 0,
-        paragraphSpacing: 0,
-    },
-    h5: {
-        fontFamily: defaultFont,
-        fontSize: 22,
-        lineHeight: 28,
-        letterSpacingPercentage: 0,
-        fontWeight: 700,
-        paragraphSpacing: 0,
-    },
-    h6: {
-        fontFamily: defaultFont,
-        fontSize: 18,
-        lineHeight: 24,
-        letterSpacingPercentage: 0,
-        fontWeight: 600,
-        paragraphSpacing: 0,
-    },
-    'title-l': {
-        fontFamily: defaultFont,
-        fontSize: 22,
-        lineHeight: 28,
-        letterSpacingPercentage: 2,
-        fontWeight: 700,
-        paragraphSpacing: 0,
-    },
-    'title-m': {
-        fontFamily: defaultFont,
-        fontSize: 16,
-        lineHeight: 20,
-        letterSpacingPercentage: 4,
-        fontWeight: 700,
-        paragraphSpacing: 0,
-    },
-    'title-s': {
-        fontFamily: defaultFont,
-        fontSize: 16,
-        lineHeight: 16,
-        letterSpacingPercentage: 4,
-        fontWeight: 700,
-        paragraphSpacing: 0,
-    },
-    'label-l': {
-        fontFamily: defaultFont,
-        fontSize: 20,
-        lineHeight: 26,
-        letterSpacingPercentage: 0,
-        fontWeight: 600,
-        paragraphSpacing: 8,
-    },
-    'label-m': {
-        fontFamily: defaultFont,
-        fontSize: 16,
-        lineHeight: 22,
-        letterSpacingPercentage: 0,
-        fontWeight: 600,
-        paragraphSpacing: 8,
-    },
-    'label-s': {
-        fontFamily: defaultFont,
-        fontSize: 14,
-        lineHeight: 20,
-        letterSpacingPercentage: 0,
-        fontWeight: 700,
-        paragraphSpacing: 6,
-    },
-    'body-xl': {
-        fontFamily: defaultFont,
-        fontSize: 18,
-        lineHeight: 22,
-        letterSpacingPercentage: 0,
-        paragraphSpacing: 22,
-    },
-    'body-l': {
-        fontFamily: defaultFont,
-        fontSize: 16,
-        lineHeight: 22,
-        letterSpacingPercentage: 0,
-        paragraphSpacing: 20,
-    },
-    'body-m': {
-        fontFamily: defaultFont,
-        fontSize: 14,
-        lineHeight: 20,
-        letterSpacingPercentage: 0,
-        paragraphSpacing: 18,
-    },
-    'body-s': {
-        fontFamily: defaultFont,
-        fontSize: 12,
-        lineHeight: 16,
-        letterSpacingPercentage: 1,
-        paragraphSpacing: 16,
-    },
-    'body-xs': {
-        fontFamily: defaultFont,
-        fontSize: 10,
-        lineHeight: 14,
-        letterSpacingPercentage: 2,
-        paragraphSpacing: 14,
-    },
-    CTA: {
-        fontFamily: defaultFont,
-        fontSize: 14,
-        lineHeight: 20,
-        letterSpacingPercentage: 0.14,
-        fontWeight: 600,
-        paragraphSpacing: 0,
-    },
-};
-
-const fontWeightMap = {
-    light: 300,
-    normal: 400,
-    bold: 600,
-};
-
-const getVariantStyle = (
-    themeTypographyVariants: Record<FoundationTheme.TypographyVariants, TypographyConfig>,
-    variant: FoundationTheme.TypographyVariants
-) => {
-    const variantStyles = themeTypographyVariants?.[variant as FoundationTheme.TypographyVariants];
-    if (variantStyles) {
-        return variantStyles;
-    }
-    return defaultTypographyStyles[variant as FoundationTheme.TypographyVariants];
-};
-
-export const StyledTypography = styled('div')<NsTypographyProps>(
-    ({ theme, weight, variant, noSpacing, decoration, color, colorOverride }) => {
-        const fontStyles: TypographyConfig = getVariantStyle(theme?.fonts?.typographyVariants, variant) || {};
-        if (noSpacing) {
-            fontStyles.paragraphSpacing = 0;
-        }
-        if (weight) {
-            fontStyles.fontWeight = fontWeightMap[weight] || fontWeightMap.normal;
-        }
-        const updatedFontStyle = {
-            fontFamily: fontStyles?.fontFamily || defaultFont,
-            fontSize: `${fontStyles?.fontSize || 16}px`,
-            lineHeight: `${fontStyles?.lineHeight || 16}px`,
-            margin: fontStyles?.paragraphSpacing || 0,
-            fontWeight: fontStyles?.fontWeight || 400,
-            letterSpacing: fontStyles?.letterSpacingPercentage || 0,
-        };
-        return {
-            ...updatedFontStyle,
-            textDecorationLine: decoration,
-            color: colorOverride?.startsWith('#') ? colorOverride : paletteColor(color)({ theme }),
-        };
-    }
-);

package/src/common/typography/__snapshots__/NsTypography.spec.tsx.snap

@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GlobalFontInter 0. should match snapshot 1`] = `
-.emotion-0 {
-  font-family: Inter;
-  font-size: 42px;
-  line-height: 48px;
-  margin: 0;
-  font-weight: 400;
-  letter-spacing: 0;
-  text-decoration-line: none;
-}
-
-<div>
-  <div
-    class=" emotion-0"
-    color="primary"
-  >
-    Hello Typo!
-  </div>
-</div>
-`;

package/src/common/typography/index.ts

@@ -1,3 +0,0 @@
-export { default as NsTypography } from './NsTypography';
-export type { NsTypographyProps, Variants } from './types.d';
-export { default as GlobalFontInter } from './GlobalFontInter';

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

@@ -1,37 +0,0 @@
-import { FoundationTheme } from '@nuskin/foundation-theme';
-import { AdditionalProps } from '../common.types';
-
-export type Variants =
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'h5'
-    | 'h6'
-    | 'title-l'
-    | 'title-m'
-    | 'title-s'
-    | 'label-l'
-    | 'label-m'
-    | 'label-s'
-    | 'body-xl'
-    | 'body-l'
-    | 'body-m'
-    | 'body-s'
-    | 'body-xs'
-    | 'CTA';
-
-export type HtmlTagVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p' | 'label';
-
-export type NsTypographyProps = {
-    variant: Variants;
-    decoration?: 'underline' | 'none';
-    weight?: 'bold' | 'normal' | 'light';
-    color?: FoundationTheme.PaletteColors;
-    component?: 'div' | 'span' | 'p';
-    as?: HtmlTagVariant;
-    className?: string;
-    colorOverride?: string;
-    renderHTMLNode?: boolean;
-    noSpacing?:boolean;
-} & AdditionalProps;

package/src/common/util.ts

@@ -1,3 +0,0 @@
-export function shouldNotForwardPropsWithKeys<T>(propArray: Array<keyof T>) {
-    return (propName: string) => !propArray.includes(propName as keyof T);
-}