@nuskin/foundation-ui-components 1.23.0 → 1.24.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.23.0",
+    "version": "1.24.1",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {
@@ -52,6 +52,7 @@
         "cliui": "^8.0.1",
         "framer-motion": "^10.16.4",
         "next": "13.5.6",
+        "notistack": "^3.0.1",
         "react": "18.2.0",
         "react-dom": "^18.2.0",
         "react-material-ui-carousel": "^3.4.2",

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -34,6 +34,7 @@ const NsAutocomplete = ({
     noOptionsText,
     onInputChange,
     onChange,
+    onFocus,
     clear,
     seeMore,
     placeholder,
@@ -124,6 +125,7 @@ const NsAutocomplete = ({
                 onChange={onChange}
                 onInputChange={onInputChange}
                 value={value}
+                onFocus={onFocus ?? noop}
                 inputValue={inputValue}
                 filterOptions={
                     isFilterEnabled

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

@@ -28,6 +28,7 @@ export type NsAutocompleteProps = {
         reason: AutocompleteChangeReason,
         details?: AutocompleteChangeDetails<OptionsProps> | undefined
     ): void;
+    onFocus?:() => void;
     clear?: {
         text?: string;
         show?: boolean; //default to false

package/src/common/button/helper.ts

@@ -12,20 +12,20 @@ export function generateContainedStyle({
     hovered,
     pressed,
     focused,
-}: ContainedParams): string {
-    return `
-		background-color: ${backgroundColor};
-		color: ${textColor} !important;
-		&:hover {
-			background-color: ${hovered};
-		}
-		&:active {
-			background-color: ${pressed};
-		}
-		&:focus {
-			background-color: ${focused};
-		}
-	`;
+}: ContainedParams): Record<string, any> {
+    return {
+        backgroundColor,
+        color: `${textColor} !important`,
+        '&:hover': {
+            backgroundColor: `${hovered}`
+        },
+        '&:active': {
+            backgroundColor: `${pressed}`
+        },
+        '&:focus': {
+            backgroundColor: `${focused}`
+        }
+    };
 }
 type OutlinedParams = {
     borderColor: string;
@@ -34,18 +34,18 @@ type OutlinedParams = {
     activeColor: string;
 };
 export function generateOutlinedStyle({ borderColor, hovered, pressed, activeColor }: OutlinedParams) {
-    return `
-		border-color: ${borderColor};
-		color: ${borderColor};
-		&:hover {
-				border-color: ${hovered};
-				color: ${borderColor};
-		}
-		&:active {
-				border-color: ${pressed};
-				color: ${activeColor};
-		}
-`;
+    return {
+        borderColor: `${borderColor}`,
+        color: `${borderColor}`,
+        '&:hover': {
+            borderColor: `${hovered}`,
+            color: `${borderColor}`
+        },
+        '&:active': {
+            borderColor: `${pressed}`,
+            color: `${activeColor}`
+        }
+    }
 }
 
 type TextParams = {
@@ -54,29 +54,31 @@ type TextParams = {
     pressed: string;
 };
 
-export function generateTextStyles({ underlineColor, hovered, pressed }: TextParams): string {
-    return `
-    text-decoration: underline 1px !important;
-    text-underline-offset: 4px;
-    padding: 0;
-    min-width: auto;
-    background-color: transparent !important;
-    text-decoration-color: ${underlineColor};
-    color: ${underlineColor};
-    &:hover {
-      color: ${hovered};
-      text-decoration-color: ${hovered};
-    }
-    &:active {
-      color: ${underlineColor};
-      text-decoration-color: ${pressed};
-    }
-  `;
+export function generateTextStyles({ underlineColor, hovered, pressed }: TextParams):  Record<string, any> {
+    return {
+        textDecoration: 'underline 1px !important',
+        textUnderlineOffset: '4px',
+        minWidth: 'auto',
+        backgroundColor: 'transparent !important',
+        textDecorationColor: `${underlineColor}`,
+        color: `${underlineColor}`,
+        '&:hover': {
+            color: `${hovered}`,
+            textDecorationColor: `${hovered}`,
+            backgroundColor: 'transparent !important',
+            border: 0,
+        },
+        '&:active, &:focus': {
+            color: `${underlineColor}`,
+            textDecorationColor: `${pressed}`,
+            border: 'none !important',
+        }
+    };
 }
 
 export function generateIconOnlyStyles() {
-    return `
-			padding: 10px;
-	    min-width: unset;
-    `;
+    return {
+        padding: '10px',
+        minWidth: 'unset',
+    };
 }

package/src/common/index.ts

@@ -31,6 +31,7 @@ export * from './select';
 export * from './spinner';
 export * from './table';
 export * from './text-strip';
+export * from './toast';
 export * from './typography';
 export * from './utility';
 export * from './videos';

package/src/common/toast/Fade.tsx

@@ -0,0 +1,101 @@
+/**
+ * Credit to MUI team @ https://mui.com
+ */
+import * as React from 'react';
+import { TransitionProps, TransitionStatus, Transition } from 'notistack';
+import {
+    useForkRef,
+    reflow,
+    getTransitionProps,
+    createTransition,
+} from './shared';
+
+const styles: Partial<Record<TransitionStatus, React.CSSProperties>> = {
+    entering: {
+        opacity: 1,
+    },
+    entered: {
+        opacity: 1,
+    },
+};
+
+const Fade = React.forwardRef<HTMLDivElement, TransitionProps>((props, ref) => {
+    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

@@ -0,0 +1,76 @@
+import type { PropsWithChildren } from 'react';
+import { SnackbarProvider, SnackbarProviderProps, MaterialDesignContent } from 'notistack';
+
+import { styled, ColorUtils, ScreenSize } from '@nuskin/foundation-theme';
+
+const { getGenomeColor } = ColorUtils;
+
+const ToastNotification = styled(MaterialDesignContent)`
+    width: 610px;
+    height: 46px;
+    box-shadow: none;
+    padding: 0 20px;
+
+    @media (max-width: ${ScreenSize.md}px) {
+        width: 343px;
+    }
+
+    #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>) => {
+    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

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

package/src/common/toast/shared.ts

@@ -0,0 +1,124 @@
+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(',');
+}

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

@@ -0,0 +1,130 @@
+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('should render a toast and displays the message', () => {
+        render(
+            <ToastWrapper>
+                <ToastComponent variant='success' message='Hello' />
+            </ToastWrapper>
+        );
+        expect(screen.queryByText('Hello')).toBeInTheDocument();
+    });
+    it('should render a success toast', () => {
+        const { container } = render(
+            <ToastWrapper>
+                <ToastComponent variant='success' message='Hello' />
+            </ToastWrapper>
+        );
+        expect(container.querySelector('.notistack-MuiContent-success')).toBeInTheDocument();
+    });
+    it('should render a error toast', () => {
+        const { container } = render(
+            <ToastWrapper>
+                <ToastComponent variant='error' message='Hello' />
+            </ToastWrapper>
+        );
+        expect(container.querySelector('.notistack-MuiContent-error')).toBeInTheDocument();
+    });
+    it('should render a info toast', () => {
+        const { container } = render(
+            <ToastWrapper>
+                <ToastComponent variant='info' message='Hello' />
+            </ToastWrapper>
+        );
+        expect(container.querySelector('.notistack-MuiContent-info')).toBeInTheDocument();
+    });
+    it('it should render a warning toast', () => {
+        const { container } = render(
+            <ToastWrapper>
+                <ToastComponent variant='warning' message='Hello' />
+            </ToastWrapper>
+        );
+        expect(container.querySelector('.notistack-MuiContent-warning')).toBeInTheDocument();
+    });
+    it('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();
+    });
+    it('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();
+    });
+    it('should render close button', async () => {
+        const { getByTestId } = render(
+            <ToastWrapper>
+                <ToastComponent variant='warning' message='Hello' options={
+                    {showCloseIcon: true,}}
+                />
+            </ToastWrapper>
+        );
+        expect(getByTestId('icon')).toBeInTheDocument();
+    });
+    it('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);
+    });
+});

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { VariantType } from 'notistack';
+import type { StoryObj, Meta } from '@storybook/react';
+import { NsToastProvider, useToast,  ToastOptions } 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) => {
+    return (
+        <NsToastProvider>
+            <Story />
+        </NsToastProvider>
+    )
+};
+
+const ToastComponent = (props: ToastProps) => {
+    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

@@ -0,0 +1,64 @@
+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(message, {
+                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;