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

package/package.json

@@ -1,8 +1,10 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.33.0-1253-feature.3",
+    "version": "2.0.0",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
-    "main": "src/common/index.ts",
+    "types": "dist/index.d.ts",
+    "main": "dist/index.js",
+    "module": "dist/index.esm.js",
     "repository": {
         "type": "git",
         "url": "git@code.tls.nuskin.io:ns-am/content-foundation/foundation-ui-components.git"
@@ -26,13 +28,14 @@
         "build-prod": "yarn build-storybook --mode=production",
         "build-test": "yarn build-storybook",
         "build": "next build",
+        "build:package": "tsup",
         "dev": "next dev",
         "export": "next export",
         "lint": "next lint",
         "storybook": "storybook dev -p 6007",
         "sb": "yarn storybook",
         "start": "next start",
-        "test": "next build && jest --coverage",
+        "test": "jest --coverage",
         "test:pattern": "jest --coverage --testNamePattern accordion/*",
         "test:watch": "jest --watch",
         "test:update-snapshot": "jest -u",
@@ -46,20 +49,17 @@
         "@mui/icons-material": "^5.14.16",
         "@mui/material": "5.14.16",
         "@mui/utils": "5.14.16",
-        "@nuskin/foundation-theme": "1.6.0",
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.2.0",
         "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",
         "react-slick": "^0.29.0",
         "react-window": "^1.8.10",
         "slick-carousel": "^1.8.1",
-        "typescript": "^5.4.2"
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
     },
     "devDependencies": {
         "@babel/core": "^7.23.2",
@@ -67,7 +67,9 @@
         "@babel/preset-react": "^7.22.15",
         "@babel/preset-typescript": "^7.23.2",
         "@emotion/jest": "^11.11.0",
+        "next": "14.2.26",
         "@nuskin/eslint-config": "^1.0.0-setup.1",
+        "@nuskin/foundation-theme": "1.7.0",
         "@storybook/addon-actions": "^7.5.1",
         "@storybook/addon-essentials": "^7.5.1",
         "@storybook/addon-interactions": "^7.5.1",
@@ -100,10 +102,31 @@
         "eslint-plugin-storybook": "^0.6.15",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
-        "storybook": "^7.5.1"
+        "storybook": "^7.5.1",
+        "tsup": "8.3.6",
+        "typescript": "^5.4.2"
+    },
+    "peerDependencies": {
+        "@nuskin/foundation-theme": "1.7.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "typescript": "^5.4.2"
     },
     "files": [
-        "src/common"
+        "dist",
+        "README.md",
+        "package.json"
     ],
+    "resolutions": {
+        "@emotion/react": "11.11.4",
+        "micromatch": "4.0.8",
+        "next": "14.2.26",
+        "axios": "1.8.2",
+        "image-size": "1.2.1",
+        "@babel/runtime": "7.26.10",
+        "@babel/helpers": "7.26.10",
+        "esbuild": "0.25.0",
+        "nanoid": "3.3.8"
+    },
     "readme": "./README.md"
 }

package/src/common/accordion/NsAccordion.tsx

@@ -1,82 +0,0 @@
-import React, { ReactElement, useMemo } from 'react';
-
-import { AccordionItem, NsAccordionItem, NsAccordionProps, NsTypography, useAccordionMap } from '../';
-import { StyledAccordionWrapper } from './ToggleSection.styled';
-
-/**
- * NsAccordion can be used to show a list of items with title and body
- * it accepts a `boolean` prop `allowMultipleExpanded` which when true,
- * multiple sections of accordion can remain open at a time
- *
- * we can define certain section to remain open by default using `isDefaultOpen` in the
- * items
- * if there are multiple items available for default open, but `allowMultipleExpanded`
- * is false then only first item of default open is made open
- */
-const createKey = (item: AccordionItem, index: number) => item?.id + index;
-const NsAccordion = ({
-    allowMultipleExpanded,
-    invert,
-    level,
-    variant,
-    items,
-    headerTypographyVariant,
-    closedIconName,
-    openedIconName,
-    additionalProps,
-    isChild = false,
-    showEndIconWhenEmpty = false,
-}: NsAccordionProps): ReactElement => {
-    const defaultOpenIds = useMemo(() => {
-        return items
-            ?.map?.((content, index) => (content?.isDefaultOpen ? createKey(content, index) : null))
-            .filter((e) => e !== null) as string[];
-    }, [items]);
-
-    const { toggleOpen, itemStateMap } = useAccordionMap({ allowMultipleExpanded, defaultOpenIds });
-
-    return (
-        <StyledAccordionWrapper
-            variant={variant}
-            className="ns-accordion"
-            data-testid={additionalProps?.testid ?? 'ns-accordion-testid'}
-        >
-            {items?.map?.((item, index) => {
-                const key = createKey(item, index);
-                const isOpen = itemStateMap[key] ?? false;
-                return (
-                    <NsAccordionItem
-                        allowMultipleExpanded={item.allowMultipleExpanded}
-                        type={item.type}
-                        closedIconName={closedIconName}
-                        content={item.content}
-                        headerTypographyVariant={headerTypographyVariant}
-                        invert={invert}
-                        isOpen={isOpen}
-                        isChild={isChild}
-                        key={key}
-                        level={level}
-                        openedIconName={openedIconName}
-                        startIcon={item.icon}
-                        toggleOpen={() => toggleOpen(createKey(item, index))}
-                        title={
-                            <NsTypography
-                                weight="bold"
-                                variant="h6"
-                                className="nsa-item-title"
-                                additionalProps={{ ...item.$?.item_title }}
-                            >
-                                {item.title}
-                            </NsTypography>
-                        }
-                        cslp={{ content: item.$?.rte ?? { 'data-cslp': '' } }}
-                        variant={variant}
-                        showEndIconWhenEmpty={showEndIconWhenEmpty}
-                    />
-                );
-            })}
-        </StyledAccordionWrapper>
-    );
-};
-
-export default NsAccordion;

package/src/common/accordion/NsAccordionHeader.tsx

@@ -1,85 +0,0 @@
-import { ReactElement } from 'react';
-
-import { styled } from '@nuskin/foundation-theme';
-
-import { AccordionVariant, AccordionVariantType, NsAccordionHeaderProps, NsIcon, NsIconProps, NsTypography } from '../';
-import { isValidIconName } from '../icon/NsIconVariants';
-import { getAccordionColor } from './colorMap';
-
-type StyledType = { variant: AccordionVariantType; invert: boolean };
-
-const StyledHeader = styled('header')<StyledType>(({ theme, variant, invert }) => {
-    const { headBg, headText } = getAccordionColor({ theme, variant, invert, keys: ['headBg', 'headText'] });
-    let borderBottom = 'none';
-    if (variant === AccordionVariant.Compact) {
-        borderBottom = '1px solid rgb(0,0,0,0.125)';
-    }
-    return {
-        backgroundColor: headBg,
-        color: headText,
-        cursor: 'pointer',
-        display: 'grid',
-        gap: '4px',
-        gridTemplateColumns: 'auto 1fr 24px',
-        padding: '9px 16px',
-        borderBottom,
-        '.nsa-item-title': {
-            color: headText,
-        },
-    } as any;
-});
-
-/**
- * NsAccordionHeader is primarily used by NsToggleSection and NsAccordionItem
- * as a header, so it accepts `title` , `isOpen` and `onClick`
- */
-const NsAccordionHeader = ({
-    title,
-    onClick,
-    isOpen,
-    additionalProps,
-    openedIconName,
-    closedIconName,
-    variant,
-    headerTypographyVariant,
-    startIcon,
-    invert,
-    cslp,
-    showEndIconWhenEmpty,
-    content,
-}: NsAccordionHeaderProps): ReactElement => {
-    return (
-        <StyledHeader
-            invert={invert}
-            role="button"
-            aria-expanded={isOpen ? 'true' : 'false'}
-            className={`section-header ${isOpen ? 'expanded' : ''} ${additionalProps?.className ?? ''}`}
-            onClick={onClick}
-            variant={variant}
-        >
-            <HeaderIcon {...startIcon} invert={invert} />
-            {typeof title === 'string' ? (
-                <NsTypography variant={headerTypographyVariant ?? 'h4'} weight="bold" {...(cslp?.header ?? {})}>
-                    {title}
-                </NsTypography>
-            ) : (
-                title
-            )}
-            {content || showEndIconWhenEmpty ? (
-                <span className="header-icon">
-                    <NsIcon
-                        {...(invert ? { color: 'secondary' } : {})}
-                        name={isOpen ? openedIconName ?? 'arrowUp' : closedIconName ?? 'arrowDown'}
-                    />
-                </span>
-            ) : null}
-        </StyledHeader>
-    );
-};
-export default NsAccordionHeader;
-
-const HeaderIcon = (props: Partial<NsIconProps> & { invert: boolean }): ReactElement => {
-    const hasIcon = props?.name ? isValidIconName(props?.name) : false;
-    if (!hasIcon) return <span />;
-    return <NsIcon {...(props as NsIconProps)} {...(props.invert ? { color: 'secondary' } : {})} />;
-};

package/src/common/accordion/NsAccordionItem.tsx

@@ -1,65 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { NsAccordionItemProps, NsCollapse } from '../';
-import NsAccordionHeader from './NsAccordionHeader';
-import { StyledToggleSection } from './ToggleSection.styled';
-
-/**
- * this component is used by accordion to pass title
- * and content
- * cslp:{header:CslpTag, content:CslpTag}
- */
-const NsAccordionItem = ({
-    isOpen,
-    isChild,
-    toggleOpen,
-    title,
-    content,
-    variant,
-    headerTypographyVariant,
-    closedIconName,
-    openedIconName,
-    startIcon,
-    level,
-    additionalProps,
-    invert,
-    type,
-    cslp,
-    allowMultipleExpanded,
-    showEndIconWhenEmpty,
-}: NsAccordionItemProps): ReactElement => {
-    return (
-        <StyledToggleSection variant={variant}>
-            <NsAccordionHeader
-                invert={invert}
-                additionalProps={{ ...additionalProps, className: 'accordion-section ' + additionalProps?.className }}
-                closedIconName={closedIconName}
-                headerTypographyVariant={headerTypographyVariant}
-                isOpen={isOpen}
-                openedIconName={openedIconName}
-                onClick={toggleOpen}
-                title={title}
-                variant={variant}
-                startIcon={startIcon}
-                cslp={cslp}
-                showEndIconWhenEmpty={showEndIconWhenEmpty}
-                content={content}
-            />
-            {content || showEndIconWhenEmpty ? (
-                <NsCollapse
-                    type={type}
-                    isChild={isChild}
-                    isOpen={isOpen}
-                    variant={variant}
-                    level={level}
-                    invert={invert}
-                    content={content}
-                    cslp={cslp}
-                    allowMultipleExpanded={allowMultipleExpanded}
-                />
-            ) : null}
-        </StyledToggleSection>
-    );
-};
-
-export default NsAccordionItem;

package/src/common/accordion/NsCollapse.tsx

@@ -1,121 +0,0 @@
-import {
-    isValidElement,
-    ReactElement,
-    useMemo,
-} from 'react';
-
-import { styled } from '@nuskin/foundation-theme';
-
-import {
-    AccordionContentTypeObject,
-    AccordionItem,
-    AccordionVariant,
-    AccordionVariantType,
-    NsAccordion,
-    NsCollapseProps,
-    NsTypography,
-} from '../';
-import { getAccordionColor } from './colorMap';
-
-const getLevelOffset = (level: number) => {
-    return level > 1 ? (level - 1) * 16 : 0;
-};
-type CollapsePropsType = { variant: AccordionVariantType; level: number; invert: boolean; isChild: boolean };
-
-export const StyledCollapse = styled('section')<CollapsePropsType>(({ theme, variant, level, invert, isChild }) => {
-    const { contentBg, contentText } = getAccordionColor({
-        theme,
-        invert,
-        variant,
-        keys: ['contentBg', 'contentText'],
-    });
-
-    let borderBottom = 'none';
-    if (variant === AccordionVariant.Compact) {
-        borderBottom = isChild ? 'none' : '1px solid rgb(0,0,0,0.125)';
-    }
-    return {
-        backgroundColor: contentBg,
-        color: contentText,
-        opacity: 0,
-        padding: '0 16px',
-        height: 0,
-        overflow: 'hidden',
-        transition: '0.3s',
-        '&.expanded': {
-            padding: `9px 0 9px ${getLevelOffset(level)}px`,
-            height: 'auto',
-            opacity: 1,
-            borderBottom,
-        },
-        '.nsa-content-padded': {
-            padding: '0 16px 16px',
-            color: contentText,
-            backgroundColor: contentBg,
-        },
-    };
-});
-
-/**
- * NsCollapse component adds css animation while showing children items if prop `isOpen` is true,
- * and while removing children if prop `isOpen` is false
- */
-const NsCollapse = ({
-    isOpen,
-    content,
-    additionalProps,
-    variant,
-    level,
-    invert,
-    isChild,
-    type,
-    cslp,
-    allowMultipleExpanded,
-}: NsCollapseProps): ReactElement => {
-    const body = useMemo(() => {
-        if (isValidElement(content)) {
-            return content as ReactElement;
-        }
-        if (type === AccordionContentTypeObject.html) {
-            return (
-                <NsTypography variant="body-m">
-                    <div
-                        className="nsa-content-padded"
-                        dangerouslySetInnerHTML={{ __html: content as string }}
-                        {...(cslp?.content ?? {})}
-                    />
-                </NsTypography>
-            );
-        } else if (type === AccordionContentTypeObject.text) {
-            return (
-                <NsTypography variant="body-m" className="p-4" {...(cslp?.content ?? {})}>
-                    {content as string}
-                </NsTypography>
-            );
-        } else if (type === AccordionContentTypeObject.accordion) {
-            return (
-                <NsAccordion
-                    isChild={true}
-                    invert={invert}
-                    level={level}
-                    variant={AccordionVariant.Gray}
-                    items={content as AccordionItem[]}
-                    allowMultipleExpanded={allowMultipleExpanded ?? false}
-                />
-            );
-        }
-        return null;
-    }, [allowMultipleExpanded, content, cslp?.content, invert, level, type]);
-    return (
-        <StyledCollapse
-            isChild={isChild}
-            level={level}
-            className={`ns-collapse ${isOpen ? 'expanded' : ''} ${additionalProps?.className ?? ''}`}
-            variant={variant}
-            invert={invert}
-        >
-            {body}
-        </StyledCollapse>
-    );
-};
-export default NsCollapse;

package/src/common/accordion/NsToggleSection.tsx

@@ -1,50 +0,0 @@
-import React, {
-    ReactElement,
-    useState,
-} from 'react';
-
-import {
-    NsAccordionItem,
-    NsToggleSectionProps,
-} from '../';
-
-/**
- * NsToggleSection takes prop `title` and prop `children` and toggles
- * children with animation when clicked on title
- *
- * it also has a `defaultOpen` prop, which when true, children is visible
- * by default, otherwise children is hidden by default and toggles between visible
- * and hidden on clicking title
- */
-const NsToggleSection = ({
-    title,
-    content,
-    additionalProps,
-    defaultOpen,
-    variant,
-    invert,
-    isChild,
-    type,
-}: NsToggleSectionProps): ReactElement => {
-    const [isExpanded, setIsExpanded] = useState(defaultOpen ?? false);
-
-    const toggleAccordion = () => {
-        setIsExpanded(!isExpanded);
-    };
-    return (
-        <NsAccordionItem
-            type={type}
-            level={2}
-            variant={variant}
-            additionalProps={additionalProps}
-            isOpen={isExpanded}
-            title={title}
-            content={content}
-            toggleOpen={toggleAccordion}
-            invert={invert}
-            isChild={isChild}
-        />
-    );
-};
-
-export default NsToggleSection;

package/src/common/accordion/ToggleSection.styled.tsx

@@ -1,32 +0,0 @@
-import { styled } from '@nuskin/foundation-theme';
-import { AccordionVariant, AccordionVariantType } from '../';
-
-const border = '1px solid rgb(0,0,0,0.125)';
-
-type StyledType = { variant: AccordionVariantType };
-
-export const StyledToggleSection = styled('section')<StyledType>(({ variant }) => {
-    if (variant === AccordionVariant.Compact) {
-        return { borderRight: border };
-    }
-    return {
-        margin: '5px 0',
-    };
-});
-
-export const StyledAccordionWrapper = styled('div')<StyledType>(({ variant }) => {
-    if (variant === AccordionVariant.Compact) {
-        return {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '0',
-            borderTop: border,
-            borderLeft: border,
-        };
-    }
-    return {
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '10px',
-    };
-});

package/src/common/accordion/colorMap.ts

@@ -1,60 +0,0 @@
-import {
-    AllColorKeyType,
-    ColorUtils,
-} from '@nuskin/foundation-theme';
-
-import { Themed } from '../common.types';
-import {
-    AccordionVariant,
-    AccordionVariantType,
-} from './enums';
-
-const { getGenomeColor } = ColorUtils;
-const compKeys = ['contentBg', 'contentText', 'headBg', 'headText'];
-type CompKeys = (typeof compKeys)[number];
-type VariantColors = Record<CompKeys, AllColorKeyType>;
-
-export const colorMap: Record<AccordionVariantType, VariantColors> = {
-    basic: {
-        contentBg: 'N20',
-        contentText: 'N90',
-        headBg: 'N10',
-        headText: 'N90',
-    },
-    compact: {
-        contentBg: 'N10',
-        contentText: 'N90',
-        headBg: 'N10',
-        headText: 'N90',
-    },
-    gray: {
-        contentBg: 'N40',
-        contentText: 'N80',
-        headBg: 'N30',
-        headText: 'N70',
-    },
-    stripe: {
-        contentBg: 'N30',
-        contentText: 'N70',
-        headBg: 'N10',
-        headText: 'N80',
-    },
-};
-
-type GetAccordionColor = {
-    variant: AccordionVariantType;
-    invert: boolean;
-    keys: CompKeys[];
-} & Themed;
-export const getAccordionColor = ({ theme, variant, invert, keys }: GetAccordionColor): Record<CompKeys, string> => {
-    const result: Record<string, string> = {};
-    if (!Object.values(AccordionVariant).includes(variant)) {
-        throw new Error(`Invalid variant ${variant}`);
-    }
-    for (const colorKey of keys) {
-        const appColorKey = colorMap[variant][colorKey];
-        const colorValue = getGenomeColor(theme, appColorKey, invert ? 'dark' : 'light');
-        result[colorKey] = colorValue;
-    }
-    return result;
-};

package/src/common/accordion/enums.ts

@@ -1,18 +0,0 @@
-export const AccordionVariant = {
-    Basic: 'basic',
-    Compact: 'compact',
-    Gray: 'gray',
-    Stripe: 'stripe',
-} as const;
-const variantValues = Object.values(AccordionVariant);
-export type AccordionVariantType = (typeof variantValues)[number];
-
-export const AccordionContentTypeObject = {
-    text: 'text',
-    html: 'html',
-    accordion: 'accordion',
-    jsx: 'jsx',
-};
-
-const contentValues = Object.values(AccordionContentTypeObject);
-export type AccordionContentType = (typeof contentValues)[number];

package/src/common/accordion/index.ts

@@ -1,7 +0,0 @@
-export { default as NsCollapse } from './NsCollapse';
-export { default as NsAccordionHeader } from './NsAccordionHeader';
-export { default as NsToggleSection } from './NsToggleSection';
-export { default as NsAccordionItem } from './NsAccordionItem';
-export { default as NsAccordion } from './NsAccordion';
-export * from './types.d';
-export * from './enums';