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

package/src/common/table/helper.ts

@@ -1,33 +0,0 @@
-/* eslint-disable no-unused-vars */
-import type { OrderType } from './types.d';
-
-export function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
-    if (b[orderBy] < a[orderBy]) {
-        return -1;
-    }
-    if (b[orderBy] > a[orderBy]) {
-        return 1;
-    }
-    return 0;
-}
-
-export function getComparator<Key extends keyof any>(
-    order: OrderType,
-    orderBy: Key
-): (a: { [key in Key]: number | string }, b: { [key in Key]: number | string }) => number {
-    return order === 'desc'
-        ? (a, b) => descendingComparator(a, b, orderBy)
-        : (a, b) => -descendingComparator(a, b, orderBy);
-}
-
-export function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
-    const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
-    stabilizedThis.sort((a, b) => {
-        const order = comparator(a[0], b[0]);
-        if (order !== 0) {
-            return order;
-        }
-        return a[1] - b[1];
-    });
-    return stabilizedThis.map((el) => el[0]);
-}

package/src/common/table/index.ts

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

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

@@ -1,57 +0,0 @@
-/* eslint-disable no-unused-vars */
-import { React } from 'React'
-
-export interface Header {
-    label: string;
-    id: string | number;
-    numeric: boolean;
-    sortable?: boolean;
-}
-
-export interface Item {
-    [key: string]: string | number;
-}
-  
-export interface NsTableProps {
-    headers: Header[];
-    items: Item[];
-    rows: number;
-    itemKey: string;
-    rowsPerPageOptions: number[];
-    isExpandableAll?: boolean;
-    showActions?: boolean;
-    showExpandedContent?: boolean;
-    loading?: boolean;
-    expandableContent: (selectedItem: Item, index: number) => React.ReactNode;
-    actionClick: (item: Item) => React.ReactNode;
-}
-
-export type OrderType = 'asc' | 'desc';
-
-export interface NsTableHeaderProps {
-    onRequestSort: (event: React.MouseEvent<unknown>, property: keyof Item) => void;
-    order: OrderType;
-    orderBy: string;
-    rowCount: number;
-    headCells: readonly Header[];
-}
-
-export interface NsTablePaginationProps {
-    rowsPerPageOptions: number[],
-    count: number;
-    rowsPerPage: number;
-    page: number,
-    onPageChange: (number) => void;
-}
-
-export interface NsTableRowProps {
-    expandableContent: (selectedItem: Item, index: number) => React.ReactNode;
-    isExpand: boolean;
-    handleClick: (index: number) => void;
-    row: Item;
-    index: number;
-    itemKeyList: string[];
-    showActions: boolean;
-    showExpandedContent: boolean;
-    actionClick: (item: Item) => React.ReactNode;
-}

package/src/common/text-strip/NsTextStrip.spec.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { NsTextStrip } from '@/common/';
-import { render, screen } from '@testing-library/react';
-
-describe('NsTextStrip component', () => {
-    it('renders text description and link', () => {
-        const description = 'Download the app to access everything Nike';
-        const link = { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'Free Delivery' };
-        const { container } = render(<NsTextStrip link={link} description={description} />);
-        const element = screen.getByText(link.title);
-        expect(element).toBeInTheDocument();
-        const descElement = screen.getByText(description);
-        expect(descElement).toBeInTheDocument();
-        const anchorElement = container.querySelector('a');
-        expect(anchorElement).toHaveAttribute('href', link.href);
-    });
-    it('does not have anchor when link is undefined', () => {
-        const description = 'Download the app to access everything Nike';
-        let link = { title: 'Free Delivery' };
-        render(<NsTextStrip link={link} description={description} />);
-        const element = screen.getByText(link.title);
-        expect(element).toBeInTheDocument();
-        const descElement = screen.getByText(description);
-        expect(descElement).toBeInTheDocument();
-    });
-});

package/src/common/text-strip/NsTextStrip.stories.tsx

@@ -1,61 +0,0 @@
-/**
- * NsTextStrip.stories.tsx
- * @description NsTextStrip component.
- */
-
-import { NsTextStrip } from '@/common/';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import type { Meta, StoryObj } from '@storybook/react';
-
-type ComponentType = typeof NsTextStrip;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Data Display/NsTextStrip',
-    component: NsTextStrip,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        alignment: {
-            control: 'select',
-            options: ['center', 'start', 'end'],
-            description: 'specify whether items should be in center, start or end',
-        },
-    },
-    args: {
-        description: 'Download the app to access everything Nike. View Details',
-        link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'Free Delivery' },
-        alignment: 'center',
-    },
-} as MetaStory;
-
-export const DefaultTextStrip: Story = {};
-export const NoDescription: Story = {
-    args: {
-        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',
-    },
-};
-export const LongDescription: Story = {
-    args: {
-        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: 'Shop All Our New Markdowns, New Styles on Sale: Up to 40% Off (empty description)',
-        },
-        alignment: 'center',
-    },
-};
-
-export const NoTitle: Story = {
-    args: {
-        description: 'Empty href Empty href Empty href Empty href Empty href Empty href Empty href Empty href',
-        link: { href: '', title: '' },
-        alignment: 'center',
-    },
-};

package/src/common/text-strip/NsTextStrip.tsx

@@ -1,61 +0,0 @@
-/**
- * NsTextStrip.tsx
- * @description NsTextStrip component for scrolling text CTA
- */
-
-import React, { ReactElement } from 'react';
-
-import {
-    ColorUtils,
-    styled,
-} from '@nuskin/foundation-theme';
-
-import { NsLink } from '../link';
-import { NsTypography } from '../typography';
-import { NsTextStripProps } from './types.d';
-
-const { getGenomeColor } = ColorUtils;
-
-const StyledHeader = styled(NsLink)`
-    background: ${({ theme }) => getGenomeColor(theme, 'N20')};
-    min-height: 60px;
-    padding: 4px 12px;
-    a {
-        text-decoration: underline;
-        font-weight: 600;
-    }
-    .text-strip-title {
-        max-width: 90%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    .text-strip-description {
-        max-width: 90%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-`;
-
-const NsTextStrip = (props: NsTextStripProps): ReactElement => {
-    const { alignment = 'center', description, link, className = '' } = props;
-
-    return (
-        <StyledHeader
-            href={link?.href ?? ''}
-            className={`${className} items-${alignment} justify-center min-h-16 flex flex-col gap-1`}
-        >
-            {link?.title ? (
-                <NsTypography weight="bold" variant="label-m" className="text-strip-title whitespace-nowrap" noSpacing>
-                    {link.title}
-                </NsTypography>
-            ) : null}
-            {description ? (
-                <NsTypography className="text-strip-description whitespace-nowrap" variant="body-m" noSpacing>
-                    {description}
-                </NsTypography>
-            ) : null}
-        </StyledHeader>
-    );
-};
-
-export default NsTextStrip;

package/src/common/text-strip/index.ts

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

package/src/common/text-strip/types.d.ts

@@ -1,16 +0,0 @@
-import { AdditionalProps } from '../common.types';
-
-export type AlignmentType = 'start' | 'center' | 'end';
-
-export type TextCtaDataType = {
-    link: {
-        href?: string;
-        title?: string;
-    };
-    description?: string;
-};
-export type NsTextStripProps = {
-    alignment?: AlignmentType;
-    className?: string;
-} & AdditionalProps &
-    TextCtaDataType;

package/src/common/toast/Fade.tsx

@@ -1,98 +0,0 @@
-/**
- * Credit to MUI team @ https://mui.com
- */
-import * as React from 'react';
-
-import { Transition, TransitionProps, TransitionStatus } from 'notistack';
-
-import { createTransition, getTransitionProps, reflow, useForkRef } from './shared';
-
-const styles: Partial<Record<TransitionStatus, React.CSSProperties>> = {
-    entering: {
-        opacity: 1,
-    },
-    entered: {
-        opacity: 1,
-    },
-};
-
-const Fade = React.forwardRef<HTMLDivElement, TransitionProps>((props, ref): React.ReactElement => {
-    const {
-        children,
-        in: inProp,
-        timeout = 0,
-        style,
-        onEnter,
-        onEntered,
-        onExit,
-        onExited,
-        direction, // Take this out since this is a Slide-only prop
-        ...other
-    } = props;
-
-    const nodeRef = React.useRef<HTMLDivElement>(null);
-    const handleRefIntermediary = useForkRef((children as any).ref, ref);
-    const handleRef = useForkRef(nodeRef, handleRefIntermediary);
-
-    const handleEnter: TransitionProps['onEnter'] = (node, isAppearing) => {
-        reflow(node);
-
-        const transitionProps = getTransitionProps({
-            style,
-            timeout,
-            mode: 'enter',
-        });
-        node.style.webkitTransition = createTransition('opacity', transitionProps);
-        node.style.transition = createTransition('opacity', transitionProps);
-
-        if (onEnter) {
-            onEnter(node, isAppearing);
-        }
-    };
-
-    const handleExit: TransitionProps['onExit'] = (node) => {
-        const transitionProps = getTransitionProps({
-            style,
-            timeout,
-            mode: 'exit',
-        });
-        node.style.webkitTransition = createTransition('opacity', transitionProps);
-        node.style.transition = createTransition('opacity', transitionProps);
-
-        if (onExit) {
-            onExit(node);
-        }
-    };
-
-    return (
-        <Transition
-            appear
-            in={inProp}
-            nodeRef={nodeRef}
-            onEnter={handleEnter}
-            onEntered={onEntered}
-            onExit={handleExit}
-            onExited={onExited}
-            timeout={timeout}
-            {...other}
-        >
-            {(status, childProps) =>
-                React.cloneElement(children as any, {
-                    style: {
-                        opacity: 0,
-                        visibility: status === 'exited' && !inProp ? 'hidden' : undefined,
-                        ...styles[status],
-                        ...style,
-                        ...(children as any).props.style,
-                    },
-                    ref: handleRef,
-                    ...childProps,
-                })
-            }
-        </Transition>
-    );
-});
-
-Fade.displayName = 'Fade';
-
-export default Fade;

package/src/common/toast/ToastProvider.tsx

@@ -1,88 +0,0 @@
-import type { PropsWithChildren, ReactElement } from 'react';
-
-import { MaterialDesignContent, SnackbarProvider, SnackbarProviderProps } from 'notistack';
-
-import { ColorUtils, ScreenSize, styled } from '@nuskin/foundation-theme';
-
-const { getGenomeColor } = ColorUtils;
-
-const ToastNotification = styled(MaterialDesignContent)`
-    width: 610px;
-    height: 46px;
-    box-shadow: none;
-    padding: 0 20px;
-
-    .toast-message-wrapper {
-        width: 440px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-    }
-
-    @media (max-width: ${ScreenSize.md}px) {
-        width: 343px;
-
-        .toast-message-wrapper {
-            width: 190px;
-        }
-    }
-
-    #notistack-snackbar svg {
-        font-size: 24px !important;
-    }
-    &.notistack-MuiContent-success {
-        background-color: ${({ theme }) => getGenomeColor(theme, 'Success-10')};
-        border: 1px solid ${({ theme }) => getGenomeColor(theme, 'Success-30')};
-        color: ${({ theme }) => getGenomeColor(theme, 'Success-80')};
-
-        svg g {
-            stroke: ${({ theme }) => getGenomeColor(theme, 'Success-80')};
-        }
-    }
-    &.notistack-MuiContent-error {
-        background-color: ${({ theme }) => getGenomeColor(theme, 'Error-10')};
-        border: 1px solid ${({ theme }) => getGenomeColor(theme, 'Error-50')};
-        color: ${({ theme }) => getGenomeColor(theme, 'Error-60')};
-
-        svg g {
-            stroke: ${({ theme }) => getGenomeColor(theme, 'Error-60')};
-        }
-    }
-    &.notistack-MuiContent-warning {
-        background-color: ${({ theme }) => getGenomeColor(theme, 'Warning-10')};
-        border: 1px solid ${({ theme }) => getGenomeColor(theme, 'Warning-40')};
-        color: ${({ theme }) => getGenomeColor(theme, 'Warning-80')};
-
-        svg g {
-            stroke: ${({ theme }) => getGenomeColor(theme, 'Warning-80')};
-        }
-    }
-    &.notistack-MuiContent-info {
-        background-color: ${({ theme }) => getGenomeColor(theme, 'Info-10')};
-        border: 1px solid ${({ theme }) => getGenomeColor(theme, 'Info-40')};
-        color: ${({ theme }) => getGenomeColor(theme, 'Info-60')};
-
-        svg g {
-            stroke: ${({ theme }) => getGenomeColor(theme, 'Info-60')};
-        }
-    }
-`;
-
-const NsToastProvider = (props: PropsWithChildren<SnackbarProviderProps>): ReactElement => {
-    const { children, autoHideDuration = 5000 } = props;
-    return (
-        <SnackbarProvider
-            autoHideDuration={autoHideDuration}
-            Components={{
-                success: ToastNotification,
-                error: ToastNotification,
-                info: ToastNotification,
-                warning: ToastNotification,
-            }}
-        >
-            {children}
-        </SnackbarProvider>
-    );
-};
-
-export default NsToastProvider;

package/src/common/toast/index.ts

@@ -1,3 +0,0 @@
-export { default as NsToastProvider } from './ToastProvider';
-export { default as useToast } from './useToast';
-export type { ToastOptions } from './useToast';

package/src/common/toast/shared.ts

@@ -1,124 +0,0 @@
-import { TransitionDuration } from 'notistack';
-import React from 'react';
-
-/**
- * passes {value} to {ref}
- *
- * Useful if you want to expose the ref of an inner component to the public API
- * while still using it inside the component.
- * @param ref A ref callback or ref object. If anything falsy, this is a no-op.
- */
-function setRef<T>(
-    ref:
-    | React.MutableRefObject<T | null>
-    | ((instance: T | null) => void)
-    | null
-    | undefined,
-    value: T | null
-): void {
-    if (typeof ref === 'function') {
-        ref(value);
-    } else if (ref) {
-        ref.current = value;
-    }
-}
-
-export function useForkRef<Instance>(
-    refA: React.Ref<Instance> | null | undefined,
-    refB: React.Ref<Instance> | null | undefined
-): React.Ref<Instance> | null {
-    /**
-   * This will create a new function if the ref props change and are defined.
-   * This means react will call the old forkRef with `null` and the new forkRef
-   * with the ref. Cleanup naturally emerges from this behavior.
-   */
-    return React.useMemo(() => {
-        if (refA == null && refB == null) {
-            return null;
-        }
-        return (refValue) => {
-            setRef(refA, refValue);
-            setRef(refB, refValue);
-        };
-    }, [refA, refB]);
-}
-
-interface ComponentProps {
-  style?: React.CSSProperties | undefined;
-  /**
-   * number: e.g. 400
-   * TransitionDuration: e.g. { enter: 200, exit: 400 }
-   */
-  timeout: number | TransitionDuration;
-  mode: 'enter' | 'exit';
-}
-
-interface TransitionPropsReturnType {
-  duration: number;
-  easing: string | undefined;
-  delay: string | undefined;
-}
-
-export function getTransitionProps(
-    props: ComponentProps
-): TransitionPropsReturnType {
-    const { timeout, style = {}, mode } = props;
-    return {
-        duration: typeof timeout === 'object' ? timeout[mode] || 0 : timeout,
-        easing: style.transitionTimingFunction,
-        delay: style.transitionDelay,
-    };
-}
-
-/**
- * CSS hack to force a repaint
- */
-export const reflow = (node: Element): void => {
-    // We have to do something with node.scrollTop.
-    // Otherwise it's removed from the compiled code by optimisers
-    // eslint-disable-next-line no-self-assign
-    node.scrollTop = node.scrollTop;
-};
-
-interface CreateTransitionOptions {
-  duration: number;
-  easing?: string;
-  delay?: string | number;
-}
-
-const defaultEasing = {
-    // This is the most common easing curve.
-    easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
-    // Objects enter the screen at full velocity from off-screen and
-    // slowly decelerate to a resting point.
-    easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
-    // Objects leave the screen at full velocity. They do not decelerate when off-screen.
-    easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
-    // The sharp curve is used by objects that may return to the screen at any time.
-    sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',
-};
-
-const formatMs = (milliseconds: number) => `${Math.round(milliseconds)}ms`;
-
-export function createTransition(
-    props: string | string[] = ['all'],
-    options?: CreateTransitionOptions
-): string {
-    const {
-        duration = 300,
-        easing = defaultEasing.easeInOut,
-        delay = 0,
-    } = options || {};
-
-    const properties = Array.isArray(props) ? props : [props];
-
-    return properties
-        .map((animatedProp) => {
-            const formattedDuration =
-        typeof duration === 'string' ? duration : formatMs(duration);
-            const formattedDelay =
-        typeof delay === 'string' ? delay : formatMs(delay);
-            return `${animatedProp} ${formattedDuration} ${easing} ${formattedDelay}`;
-        })
-        .join(',');
-}