@nuskin/foundation-ui-components 1.0.0-cft-35.11 → 1.0.0-cft-35.13

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.0.0-cft-35.11",
-    "description": "It is a foundation library written in react, that provides commom components to all UI pages",
+    "version": "1.0.0-cft-35.13",
+    "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "private": false,
     "main": "src/common/index.ts",
     "repository": {
@@ -10,8 +10,8 @@
     },
     "homepage": "https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/blob/master/README.md",
     "author": {
-        "email": "rpalanisamy@nuskin.com",
-        "name": "Ruthraj Palanisamy"
+        "name": "Ruthraj Palanisamy",
+        "email": "rpalanisamy@nuskin.com"
     },
     "publishConfig": {
         "access": "public"
@@ -27,11 +27,11 @@
         "build": "next build",
         "start": "next start",
         "lint": "next lint",
-        "storybook": "start-storybook -p 6007",
         "test": "jest",
         "test:coverage": "yarn test --coverage",
         "test:watch": "jest --watch",
-        "build-storybook": "build-storybook"
+        "storybook": "storybook dev -p 6007",
+        "build-storybook": "storybook build"
     },
     "dependencies": {
         "@emotion/react": "^11.10.6",
@@ -57,14 +57,16 @@
         "@babel/preset-typescript": "^7.21.0",
         "@emotion/jest": "^11.10.5",
         "@nuskin/eslint-config": "^1.0.0-setup.1",
-        "@storybook/addon-actions": "^6.5.16",
-        "@storybook/addon-essentials": "^6.5.16",
-        "@storybook/addon-interactions": "^6.5.16",
-        "@storybook/addon-links": "^6.5.16",
-        "@storybook/builder-webpack5": "^6.5.16",
-        "@storybook/manager-webpack5": "^6.5.16",
-        "@storybook/react": "^6.5.16",
-        "@storybook/testing-library": "^0.0.13",
+        "@storybook/addon-actions": "^7.0.7",
+        "@storybook/addon-essentials": "^7.0.7",
+        "@storybook/addon-interactions": "^7.0.7",
+        "@storybook/addon-links": "^7.0.7",
+        "@storybook/addon-mdx-gfm": "^7.0.7",
+        "@storybook/jest": "^0.1.0",
+        "@storybook/nextjs": "^7.0.7",
+        "@storybook/react": "^7.0.7",
+        "@storybook/test-runner": "^0.10.0",
+        "@storybook/testing-library": "^0.1.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^14.0.0",
         "@types/lodash": "^4.14.191",
@@ -77,6 +79,7 @@
         "babel-jest": "^29.5.0",
         "babel-loader": "^9.1.2",
         "babel-plugin-emotion": "^11.0.0",
+        "chromatic": "^6.17.3",
         "eslint": "8.36.0",
         "eslint-config-next": "13.2.4",
         "eslint-config-prettier": "^8.7.0",
@@ -84,9 +87,11 @@
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-storybook": "^0.6.11",
         "jest": "^29.5.0",
-        "jest-environment-jsdom": "^29.5.0"
+        "jest-environment-jsdom": "^29.5.0",
+        "storybook": "^7.0.7"
     },
     "files": [
         "src/common"
-    ]
+    ],
+    "readme": "./README.md"
 }

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

@@ -0,0 +1,134 @@
+import React from 'react';
+import { render, fireEvent, screen, act } from '../../../test-utils';
+// import { act } from 'react-dom/test-utils';
+import NsAlert from './NsAlert';
+
+const addEventListenerMock = jest.spyOn(window, 'addEventListener');
+const removeEventListenerMock = jest.spyOn(window, 'removeEventListener');
+
+describe('NsAlert', () => {
+    test('renders alert with provided props', () => {
+        render(
+            <NsAlert
+                context="error"
+                title="Error Alert"
+                threshhold={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('calls onDismiss function when dismissed', () => {
+        const onDismissMock = jest.fn();
+        render(
+            <NsAlert
+                context="info"
+                title="Info Alert"
+                threshhold={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('hides alert when not visible', () => {
+        render(
+            <NsAlert
+                context="success"
+                title="Success Alert"
+                threshhold={700}
+                type="card"
+                visible={false}
+                head={<span>Alert Head</span>}
+                body={<p>Alert Body</p>}
+            />
+        );
+
+        expect(screen.getByTestId('alert-container')).toHaveStyle('display: none');
+    });
+
+    test('adds and removes event listener on mount/unmount', () => {
+        act(() => {
+            render(<NsAlert 
+                context="notice"
+                title="Success Alert"
+                threshhold={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('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('get props error in console for types', () => {
+        render(
+            <NsAlert
+                context="warning"
+                title="warning Alert"
+                threshhold={800}
+                type="noCard"
+                visible
+                head={<span>Alert Head</span>}
+                body={<p>Alert Body</p>}
+            />
+        );
+
+        expect(screen.getByTestId('alert-container')).toHaveStyle('display: block');
+    });
+
+    test('get props error in console for context', () => {
+        render(
+            <NsAlert
+                context="warningError"
+                title="warning Alert"
+                threshhold={800}
+                type="card"
+                visible
+                head={<span>Alert Head</span>}
+                body={<p>Alert Body</p>}
+            />
+        );
+
+        expect(screen.getByTestId('alert-container')).toHaveStyle('display: block');
+    });
+});

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import NsAlert from './NsAlert';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+
+type ComponentType = typeof NsAlert;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/NsAlert',
+    component: NsAlert,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        context: { 
+            control: 'select',
+            options: ['error', 'info', 'notice', 'success', 'warning']
+        },
+        type: { 
+            control: 'select',
+            options: ['auto', 'banner', 'card']
+        }
+    },
+    args: {
+        context: 'info',
+        title: 'Information',
+        threshhold: 600,
+        type: 'banner',
+        visible: true,
+        onDismiss: () => {},
+        body:
+        <p>{`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+         ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+          laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
+          qui officia deserunt mollit anim id est laborum.`}</p>,
+        foot: <span>Some message goes here.</span>
+    }
+} as MetaStory;
+
+export const AuthDropdown: Story = {};

package/src/common/alert/NsAlert.styled.ts

@@ -0,0 +1,124 @@
+/* eslint-disable max-len */
+import { styled, css } from '@nuskin/foundation-theme';
+import { getAppColor } from '@nuskin/foundation-theme/src/utils/color-utils';
+import { FoundationTheme } from '@nuskin/foundation-theme/src/themes';
+
+import type { AlertContainerParams, AlertType, AlertParams, TypeMapCSS } from './types';
+const gutter_width=  '10px';
+const close_button_width = '12px';
+const icon_width = '24px';
+
+const TypeMap: TypeMapCSS = {
+    banner: {
+        'min-height' : '114px',
+        'padding' : '15px 45px',
+        'content-column-start': 'row-center',
+        'content-column-end': 'row-center',
+        'bar-position': 'top',
+        'foot-visibility': 'block'
+    },
+    card: {
+        'min-height' : '72px',
+        'padding' : '24px 24px',
+        'content-column-start': 'row-left',
+        'content-column-end': 'row-right',
+        'bar-position': 'left',
+        'foot-display': 'none',
+    }
+}
+
+const contextType = {
+    error: 'red',
+    info: 'info',
+    notice: 'info',
+    success: 'success',
+    warning: 'warning'
+}
+
+export const AlertContainer = styled.div<AlertContainerParams>`
+    display: ${({ visible }) => visible ? 'block' : 'none'};
+    * {
+        box-sizing: border-box;
+        webkit-font-smoothing: antialiased;
+    }
+    text-align: left;
+`;
+
+const fontFamilyStyles = css`
+  font-family: "proxima-nova", "OpenSans", "Pridi", "NotoSans", "NotoSansSC", "NotoSansHebrew",
+    "NotoSansJapanese", "Hiragino Kaku Gothic Pro", "Yu Gothic Medium", "Yu Gothic", Meiryo, "source-han-sans-japanese",
+    "source-han-sans-korean", "source-han-sans-simplified-c", Helvetica, Arial, sans-serif;
+`;
+
+export const Alert = styled.div<AlertParams>`
+    position: relative;
+    display: grid;
+    grid-template-columns: [row-left] ${icon_width} [space] ${gutter_width} [row-center] auto [space] ${gutter_width} [row-right] ${close_button_width};
+    grid-template-rows: [row1] auto;
+    grid-auto-row: auto;
+    grid-auto-flow: row;
+    background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
+    border: 1px solid ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+    min-height: ${({ type }) => TypeMap?.[type]?.['min-height']};
+    padding: ${({ type }) => TypeMap?.[type]?.['padding']};
+    color: ${({ context, theme }) => getAppColor(theme, contextType?.[context] as FoundationTheme.AppColors, '40')} };
+`;
+
+export const AlertCloseButton = styled.div`
+    grid-column-start: row-right;
+    grid-column-end: row-right;
+    grid-row-start: row1;
+    grid-row-end: row1;
+    align-self: center;
+    cursor: pointer;
+`;
+
+export const AlertIcon = styled.div`
+    grid-column-start: row-left;
+    grid-column-end: row-left;
+    grid-row-start: row1;
+    grid-row-end: row1;
+    width: ${icon_width};
+    height: ${icon_width};
+`;
+
+export const AlertHead = styled.div`
+    grid-column-start: row-center;
+    grid-column-end: row-center;
+    grid-row-start: row1;
+    grid-row-end: row1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    span {
+        ${fontFamilyStyles}
+        color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+        font-weight: 600;
+        font-size: 18px;
+        line-height: 20px;
+    }
+`;
+
+export const AlertContent = styled.div<{type: AlertType}>`
+    margin-top: 8px;
+    color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+    grid-column-start: ${({ type }) => TypeMap?.[type]?.['content-column-start']}; 
+    grid-column-end: ${({ type }) => TypeMap?.[type]?.['content-column-end']};
+`;
+
+export const AlertFoot = styled.div<{type: AlertType}>`
+    margin-top: 8px;
+    color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};;
+    display: ${({ type }) => TypeMap?.[type]?.['foot-display']};
+    ${fontFamilyStyles}
+    font-weight: 300;
+    font-size: 14px;
+    line-height: 18px;
+`;
+
+export const AlertBody = styled.div`
+    ${fontFamilyStyles}
+    font-weight: 300;
+    font-size: 16px;
+    line-height: 21px;
+`;

package/src/common/alert/NsAlert.tsx

@@ -0,0 +1,155 @@
+/* eslint-disable react/require-default-props */
+import React, { useEffect, useState } from 'react';
+import { 
+    AlertContainer,
+    Alert,
+    AlertIcon,
+    AlertHead,
+    AlertCloseButton,
+    AlertContent,
+    AlertFoot,
+    AlertBody
+} from './NsAlert.styled'
+import type { NsAlertProps, HeaderProps, ContextType, AlertType } from './types';
+import { NsIcon } from '../icon';
+import { NsIconNameType } from '../icon/types'
+import { FoundationTheme } from '@nuskin/foundation-theme/src/themes';
+
+const Header: React.FC<HeaderProps> = ({ children, head }) => (
+    <>
+        {children}
+        {head}
+    </>
+);
+
+function isValidContextValue(value: string): boolean {
+    return (value as ContextType) !== undefined;
+}
+
+function isValidTypeValue(value: string):boolean {
+    return (value as AlertType) !== undefined;
+}
+
+const colorMap:{ [key: string]: FoundationTheme.PaletteColors } = {
+    error: 'error',
+    notice: 'info',
+    success: 'secondary',
+    warning: 'warning',
+    default: 'info',
+};
+
+const iconMap:{ [key: string]: NsIconNameType } = {
+    error: 'alertError',
+    success: 'success',
+    warning: 'warning',
+    default: 'infoFilled',
+};
+
+export default function NsAlert({
+    context = 'info',
+    title = 'Information',
+    threshhold = 600,
+    type = 'banner',
+    visible = false,
+    head,
+    body,
+    foot,
+    onDismiss = undefined
+}: NsAlertProps) {
+    const [alertType, setAlertType] = useState('banner');
+    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+    const hasDismissListener = typeof onDismiss === 'function';
+
+    const getColor = () => {
+        return colorMap[context] || colorMap.default;
+    };
+
+    const getIcon = () => {
+        return iconMap[context] || iconMap.default;
+    };
+
+    const getTitleText = () => {
+        if (title) {
+            return title;
+        }
+    };
+
+    const handleDismiss = () => {
+        if (hasDismissListener) {
+            onDismiss();
+        }
+    };
+
+    const handleResize = () => {
+        setWindowWidth(window.innerWidth);
+    };
+
+    useEffect(() => {
+        let aType = ''
+        if (type === 'auto') {
+            aType = windowWidth < threshhold ? 'card' : 'banner';
+        } else {
+            aType = type;
+        }
+        setAlertType(aType)
+    }, [threshhold, type, windowWidth])
+
+    useEffect(() => {
+        if (!isValidContextValue(context)) {
+            console.error(`Invalid prop value for 'context': ${context}`);
+        }
+
+        if (!isValidTypeValue(type)) {
+            console.error(`Invalid prop value for 'type': ${type}`);
+        }
+    }, [context, type]);
+
+    useEffect(() => {
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+
+    return (
+        <AlertContainer visible={visible} data-testid="alert-container">
+            <Alert type={alertType as AlertType} context={context as ContextType}>
+                <AlertIcon>
+                    <NsIcon
+                        name={getIcon()}
+                        color={getColor()}
+                        size="large"
+                    />
+                </AlertIcon>
+                <AlertHead>
+                    <Header head={<span>{getTitleText()}</span>}>
+                        {head}
+                    </Header>
+                </AlertHead>
+                {
+                    hasDismissListener ? (
+                        <AlertCloseButton data-testid="alert-close-button" onClick={handleDismiss}>
+                            <NsIcon
+                                name='close'
+                                size='small'
+                            />
+                        </AlertCloseButton>
+                    ) : null
+                }
+                <AlertContent type={alertType as AlertType}>
+                    <AlertBody>
+                        {body}
+                    </AlertBody>
+                    {
+                        foot ?  (
+                            <AlertFoot type={alertType as AlertType}>
+                                {foot}
+                            </AlertFoot>
+                        ) : null
+                    }
+                </AlertContent>
+            </Alert>
+        </AlertContainer>
+    );
+}

package/src/common/alert/index.ts

@@ -0,0 +1,2 @@
+export { default as  NsAlert} from './NsAlert';
+export type { NsAlertProps } from './types';

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

@@ -0,0 +1,45 @@
+import { ReactNode, CSSProperties } from 'react';
+
+export interface NsAlertProps {
+    context?: string,
+    title?: string,
+    threshhold?: number,
+    type?: string,
+    visible?: boolean,
+    head?: ReactNode,
+    body?: ReactNode,
+    onDismiss?: () => void,
+    foot?: ReactNode
+}
+
+export interface HeaderProps {
+    children?: ReactNode; // Default slot content
+    head?: ReactNode; // Content for the "head" named slot (optional)
+}
+
+export type AlertContainerParams = {
+    visible: boolean
+};
+
+export type ContextType = 'error' | 'info' | 'notice'| 'success' | 'warning';
+export type AlertType = 'auto' | 'banner' | 'card';
+
+export type AlertParams = {
+    context: ContextType,
+    type: AlertType
+}
+
+export type CustomCSSProperties = CSSProperties & {
+    'min-height'?: string;
+    'content-column-start'? : string;
+    'content-column-end'? : string;
+    'bar-position'? : string;
+    'foot-visibility'? : string;
+    'foot-display'? : string;
+};
+
+export interface TypeMapCSS {
+    banner: CustomCSSProperties,
+    card: CustomCSSProperties,
+    auto?: CustomCSSProperties
+}

package/src/common/auth-dropdown/NsAuthDropdown.stories.tsx

@@ -1,11 +1,15 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { NsAuthDropdown } from './';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+
+type ComponentType = typeof NsAuthDropdown;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
 
 export default {
     title: 'Components/NsAuthDropdown',
     component: NsAuthDropdown,
-    decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
+    decorators: [withCenterDecorator],
     argTypes: {},
     args: {
         signInRedirectLink: '/signIn',
@@ -16,6 +20,6 @@ export default {
         titleText: 'SIGN UP / SIGN IN',
         closeOnMouseLeave: true,
     },
-} as ComponentMeta<typeof NsAuthDropdown>;
+} as MetaStory;
 
-export const AuthDropdown: ComponentStory<typeof NsAuthDropdown> = (args) => <NsAuthDropdown {...args} />;
+export const AuthDropdown: Story = {};

package/src/common/auth-dropdown/NsAuthDropdown.tsx

@@ -37,7 +37,7 @@ const NsAuthDropdown = ({
         <AuthDropdownContainer>
             <AuthHead data-testid="auth-head" onClick={handleToggle}>
                 <Button>{titleText}</Button>
-                <NsIcon testId="chevron-icon" name={isOpen ? 'arrowDown' : 'arrowUp'} color="primary" />
+                <NsIcon testId="chevron-icon" name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />
                 {isOpen ? (
                     <div onMouseLeave={closeDropdown}>
                         <Triangle />