@nuskin/foundation-ui-components 1.1.0 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.1.0",
+    "version": "1.1.1",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "private": false,
     "main": "src/common/index.ts",
@@ -22,19 +22,22 @@
     ],
     "license": "MIT",
     "scripts": {
-        "dev": "next dev",
-        "start": "next start",
-        "lint": "next lint",
-        "test": "next build && jest --coverage",
-        "test:watch": "jest --watch",
-        "storybook": "storybook dev -p 6007",
-        "sb": "yarn storybook",
+        "build-storybook": "storybook build -o dist",
         "build-dev": "yarn build-storybook",
         "build-prod": "yarn build-storybook --mode=production",
         "build-test": "yarn build-storybook",
-        "build-storybook": "storybook build -o dist",
+        "build": "next build",
+        "dev": "next dev",
         "export": "next export",
-        "prepare": "husky install",
+        "lint": "next lint",
+        "storybook": "storybook dev -p 6007",
+        "sb": "yarn storybook",
+        "start": "next start",
+        "test": "next build && jest --coverage",
+        "test:pattern": "jest --coverage --testNamePattern accordion/*",
+        "test:watch": "jest --watch",
+        "test:failed": "npx jest --onlyFailures",
+        "test:coverage": "yarn test --coverage",
         "types:check": "tsc --pretty --noEmit"
     },
     "dependencies": {
@@ -42,6 +45,7 @@
         "@emotion/styled": "^11.10.6",
         "@mui/icons-material": "^5.11.11",
         "@mui/material": "5.4.2",
+        "@mui/utils": "^5.14.1",
         "@next/font": "13.2.4",
         "@nuskin/foundation-theme": "1.0.0-develop.5",
         "framer-motion": "^10.8.5",
@@ -72,6 +76,7 @@
         "@storybook/testing-library": "^0.1.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^14.0.0",
+        "@testing-library/react-hooks": "^8.0.1",
         "@types/jest": "^29.5.0",
         "@types/lodash": "^4.14.191",
         "@types/node": "18.15.0",
@@ -91,7 +96,6 @@
         "eslint-plugin-json": "^3.1.0",
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-storybook": "^0.6.11",
-        "husky": "^8.0.0",
         "jest": "^29.5.0",
         "jest-environment-jsdom": "^29.5.0",
         "storybook": "^7.0.7"

package/src/common/accordion/NsAccordion.tsx

@@ -1,6 +1,5 @@
-import { useState, useEffect, useMemo } from 'react';
-import NsAccordionItem from './NsAccordionItem';
-import { NsAccordionProps } from './types';
+import React, { FC, useMemo } from 'react';
+import { NsAccordionItem, useAccordionMap, NsAccordionProps, AccordionItem } from '..';
 import { StyledAccordionWrapper } from './ToggleSection.styled';
 
 /**
@@ -9,44 +8,30 @@ import { StyledAccordionWrapper } from './ToggleSection.styled';
  * multiple sections of accordion can remain open at a time
  *
  * we can define certain section to remain open by default using `isDefaultOpen` in the
- * contentArray item
+ * 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 NsAccordion = ({
-    additionalProps,
+const createKey = (item: AccordionItem, index: number) => item?.id + index;
+const NsAccordion: FC<NsAccordionProps> = ({
     allowMultipleExpanded,
-    contentArray,
+    invert,
+    level,
     variant,
+    items,
     headerTypographyVariant,
     closedIconName,
     openedIconName,
-}: NsAccordionProps) => {
+    additionalProps,
+    isChild = false,
+}) => {
     const defaultOpenIds = useMemo(() => {
-        return contentArray
-            .map((content, index) => (content?.isDefaultOpen ? index : null))
-            .filter((e) => typeof e === 'number') as number[];
-    }, [contentArray]);
-    const [expandedIds, setExpandedIds] = useState<Array<number>>(defaultOpenIds);
+        return items
+            ?.map?.((content, index) => (content?.isDefaultOpen ? createKey(content, index) : null))
+            .filter((e) => e !== null) as string[];
+    }, [items]);
 
-    const toggleOpen = (sectionNumber: number, isExpanded: boolean) => {
-        if (allowMultipleExpanded) {
-            if (isExpanded) {
-                setExpandedIds(expandedIds.filter((existingNumber) => existingNumber !== sectionNumber));
-            } else {
-                setExpandedIds([...expandedIds, sectionNumber]);
-            }
-        } else {
-            if (isExpanded) {
-                setExpandedIds([]);
-            } else {
-                setExpandedIds([sectionNumber]);
-            }
-        }
-    };
-    useEffect(() => {
-        setExpandedIds(allowMultipleExpanded ? defaultOpenIds : [defaultOpenIds[0]]);
-    }, [allowMultipleExpanded, defaultOpenIds]);
+    const { toggleOpen, itemStateMap } = useAccordionMap({ allowMultipleExpanded, defaultOpenIds });
 
     return (
         <StyledAccordionWrapper
@@ -54,19 +39,26 @@ const NsAccordion = ({
             className="ns-accordion"
             data-testid={additionalProps?.testid ?? 'ns-accordion-testid'}
         >
-            {contentArray.map((content, index) => {
-                const isOpen = expandedIds.includes(index);
+            {items?.map?.((item, index) => {
+                const key = createKey(item, index);
+                const isOpen = itemStateMap[key] ?? false;
                 return (
                     <NsAccordionItem
-                        variant={variant}
-                        headerTypographyVariant={headerTypographyVariant}
+                        allowMultipleExpanded={item.allowMultipleExpanded}
+                        type={item.type}
                         closedIconName={closedIconName}
-                        openedIconName={openedIconName}
-                        key={index}
+                        content={item.content}
+                        headerTypographyVariant={headerTypographyVariant}
+                        invert={invert}
                         isOpen={isOpen}
-                        toggleOpen={() => toggleOpen(index, isOpen)}
-                        content={content?.body}
-                        title={content?.title}
+                        isChild={isChild}
+                        key={key}
+                        level={level}
+                        openedIconName={openedIconName}
+                        startIcon={item.icon}
+                        toggleOpen={() => toggleOpen(createKey(item, index))}
+                        title={<div className="nsa-item-title">{item.title}</div>}
+                        variant={variant}
                     />
                 );
             })}

package/src/common/accordion/NsAccordionHeader.tsx

@@ -1,18 +1,28 @@
-import { NsTypography, NsIcon, NsAccordionHeaderProps, AccordionVariant } from '..';
-import { styled, ColorUtils } from '@nuskin/foundation-theme';
-const { getPaletteColor } = ColorUtils;
+import { NsTypography, NsIcon, NsAccordionHeaderProps, AccordionVariant, NsIconProps, AccordionVariantType } from '..';
+import { styled } from '@nuskin/foundation-theme';
+import { isValidIconName } from '../icon/NsIconVariants';
+import { getAccordionColor } from './colorMap';
+const options = {
+    shouldForwardProp: (propKey: string) => !['variant', 'invert'].includes(propKey),
+};
+type StyledType = { variant: AccordionVariantType; invert: boolean };
 
-const StyledHeader = styled('header')<{ variant: AccordionVariant }>(({ theme, variant }) => {
-    const backgroundColor = getPaletteColor(theme, 'primary', 'contrastText') as string;
+const StyledHeader = styled(
+    'header',
+    options
+)<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,
+        backgroundColor: headBg,
+        color: headText,
         cursor: 'pointer',
         display: 'grid',
-        gridTemplateColumns: '1fr 24px',
+        gap: '4px',
+        gridTemplateColumns: 'auto 1fr 24px',
         padding: '9px 16px',
         borderBottom,
     } as any;
@@ -31,17 +41,22 @@ const NsAccordionHeader = ({
     closedIconName,
     variant,
     headerTypographyVariant,
+    startIcon,
+    invert,
+    cslp,
 }: NsAccordionHeaderProps) => {
     return (
         <StyledHeader
+            invert={invert}
             role="button"
             aria-expanded={isOpen ? 'true' : 'false'}
             className={`section-header ${isOpen ? 'expanded' : ''} ${additionalProps?.className ?? ''}`}
             onClick={onClick}
             variant={variant}
         >
+            <HeaderIcon {...startIcon} />
             {typeof title === 'string' ? (
-                <NsTypography variant={headerTypographyVariant ?? 'h4'} weight="bold">
+                <NsTypography variant={headerTypographyVariant ?? 'h4'} weight="bold" {...(cslp?.header ?? {})}>
                     {title}
                 </NsTypography>
             ) : (
@@ -54,3 +69,9 @@ const NsAccordionHeader = ({
     );
 };
 export default NsAccordionHeader;
+
+const HeaderIcon = (props: Partial<NsIconProps>) => {
+    const hasIcon = props?.name ? isValidIconName(props?.name) : false;
+    if (!hasIcon) return <span />;
+    return <NsIcon {...(props as NsIconProps)} />;
+};

package/src/common/accordion/NsAccordionItem.tsx

@@ -6,9 +6,11 @@ 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,
@@ -16,11 +18,19 @@ const NsAccordionItem = ({
     headerTypographyVariant,
     closedIconName,
     openedIconName,
+    startIcon,
+    level,
+    additionalProps,
+    invert,
+    type,
+    cslp,
+    allowMultipleExpanded,
 }: NsAccordionItemProps) => {
     return (
         <StyledToggleSection variant={variant}>
             <NsAccordionHeader
-                additionalProps={{ className: 'accordion-section' }}
+                invert={invert}
+                additionalProps={{ ...additionalProps, className: 'accordion-section ' + additionalProps?.className }}
                 closedIconName={closedIconName}
                 headerTypographyVariant={headerTypographyVariant}
                 isOpen={isOpen}
@@ -28,10 +38,20 @@ const NsAccordionItem = ({
                 onClick={toggleOpen}
                 title={title}
                 variant={variant}
+                startIcon={startIcon}
+                cslp={cslp}
+            />
+            <NsCollapse
+                type={type}
+                isChild={isChild}
+                isOpen={isOpen}
+                variant={variant}
+                level={level}
+                invert={invert}
+                content={content}
+                cslp={cslp}
+                allowMultipleExpanded={allowMultipleExpanded}
             />
-            <NsCollapse isOpen={isOpen} variant={variant}>
-                {content}
-            </NsCollapse>
         </StyledToggleSection>
     );
 };

package/src/common/accordion/NsCollapse.tsx

@@ -1,55 +1,116 @@
-import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
-import { AccordionVariant, NsCollapseProps } from './types.d';
-const { getAppColor, getPaletteColor } = ColorUtils;
-const getIsLight = (theme: FoundationTheme.Theme) => {
-    const { palette = { primary: { main: '', contrastText: '' } } } = theme;
-    return palette.primary.main === getAppColor(theme, 'primary', 'black');
+import { styled } from '@nuskin/foundation-theme';
+import {
+    AccordionVariant,
+    AccordionVariantType,
+    NsCollapseProps,
+    AccordionItem,
+    NsAccordion,
+    AccordionContentTypeObject,
+} from '../';
+import { getAccordionColor } from './colorMap';
+import { ReactElement, isValidElement, useMemo } from 'react';
+
+const getLevelOffset = (level: number) => {
+    return level > 1 ? (level - 1) * 16 : 0;
 };
+
 const options = {
-    shouldForwardProp: (key: string) => key !== 'variant',
+    shouldForwardProp: (key: string) => !['variant', 'level'].includes(key),
 };
+
 export const StyledCollapse = styled(
     'section',
     options
-)<{ variant: AccordionVariant }>(({ theme, variant }) => {
-    let backgroundColor = getIsLight(theme)
-        ? (getAppColor(theme, 'primary', 'gray') as string)
-        : (getAppColor(theme, 'primary', 'dark') as string);
-    let borderBottom = 'none';
-    if (variant === AccordionVariant.Compact) {
-        backgroundColor = getIsLight(theme)
-            ? (getAppColor(theme, 'primary', 'white') as string)
-            : (getAppColor(theme, 'primary', 'dark') as string);
-        borderBottom = '1px solid rgb(0,0,0,0.125)';
+)<{ variant: AccordionVariantType; level: number; invert: boolean; isChild: boolean }>(
+    ({ 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',
+            },
+        };
     }
-    return {
-        backgroundColor,
-        color: getPaletteColor(theme, 'primary', 'main') as string,
-        opacity: 0,
-        padding: '0 16px',
-        height: 0,
-        overflow: 'hidden',
-        transition: '0.3s',
-        '&.expanded': {
-            padding: '9px 16px',
-            height: 'auto',
-            opacity: 1,
-            borderBottom,
-        },
-    };
-});
+);
 
 /**
  * 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, children, additionalProps, variant }: NsCollapseProps) => {
+const NsCollapse = ({
+    isOpen,
+    content,
+    additionalProps,
+    variant,
+    level,
+    invert,
+    isChild,
+    type,
+    cslp,
+    allowMultipleExpanded,
+}: NsCollapseProps) => {
+    const body = useMemo(() => {
+        if (isValidElement(content)) {
+            return content as ReactElement;
+        }
+        if (type === AccordionContentTypeObject.html) {
+            return (
+                <div
+                    className="nsa-content-padded"
+                    dangerouslySetInnerHTML={{ __html: content as string }}
+                    {...(cslp?.content ?? {})}
+                />
+            );
+        } else if (type === AccordionContentTypeObject.text) {
+            return (
+                <div className="p-4" {...(cslp?.content ?? {})}>
+                    {content as string}
+                </div>
+            );
+        } else if (type === AccordionContentTypeObject.accordion) {
+            return (
+                <NsAccordion
+                    isChild={true}
+                    invert={invert}
+                    level={level}
+                    variant={AccordionVariant.Gray}
+                    items={content as AccordionItem[]}
+                    allowMultipleExpanded={allowMultipleExpanded ?? false}
+                />
+            );
+        }
+    }, [allowMultipleExpanded, content, cslp?.content, invert, level, type]);
     return (
         <StyledCollapse
+            isChild={isChild}
+            level={level}
             className={`ns-collapse ${isOpen ? 'expanded' : ''} ${additionalProps?.className ?? ''}`}
             variant={variant}
+            invert={invert}
         >
-            {isOpen ? children : null}
+            {body}
         </StyledCollapse>
     );
 };

package/src/common/accordion/NsToggleSection.tsx

@@ -9,7 +9,16 @@ import { NsToggleSectionProps, NsAccordionItem } from '../';
  * by default, otherwise children is hidden by default and toggles between visible
  * and hidden on clicking title
  */
-const NsToggleSection = ({ title, children, additionalProps, defaultOpen, variant }: NsToggleSectionProps) => {
+const NsToggleSection = ({
+    title,
+    content,
+    additionalProps,
+    defaultOpen,
+    variant,
+    invert,
+    isChild,
+    type,
+}: NsToggleSectionProps) => {
     const [isExpanded, setIsExpanded] = useState(defaultOpen ?? false);
 
     const toggleAccordion = () => {
@@ -17,12 +26,16 @@ const NsToggleSection = ({ title, children, additionalProps, defaultOpen, varian
     };
     return (
         <NsAccordionItem
+            type={type}
+            level={2}
             variant={variant}
-            additionalProps={{ ...additionalProps, className: 'toggle-section ' + additionalProps?.className ?? '' }}
+            additionalProps={additionalProps}
             isOpen={isExpanded}
             title={title}
-            content={children}
+            content={content}
             toggleOpen={toggleAccordion}
+            invert={invert}
+            isChild={isChild}
         />
     );
 };

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

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

package/src/common/accordion/colorMap.ts

@@ -0,0 +1,117 @@
+import {Themed} from '../common.types';
+import {AccordionVariantType} from './enums';
+import {ColorUtils, FoundationTheme} from '@nuskin/foundation-theme';
+const {isDarkMode, color} = ColorUtils;
+const compKeys = ['contentBg', 'contentText', 'headBg', 'headText'];
+type CompKeys = (typeof compKeys)[number];
+type VariantColors = Record<
+    CompKeys,
+    {
+        light: [FoundationTheme.AppColors, string];
+        dark: [FoundationTheme.AppColors, string];
+    }
+>;
+
+const colorObject: Record<string, [FoundationTheme.AppColors, string]> = {
+    n10: ['primary', 'dark'], // #121212
+    n20: ['primary', 'black'], // #252525
+    n40: ['neutral', '80'], // #444444
+    n45: ['neutral', '70'], // #5f5f5f
+    n50: ['neutral', '60'], // #8c8c8c
+    n80: ['neutral', '50'], // #b2b2b2
+    n85: ['neutral', '40'], // #e0e0e0
+    n90: ['neutral', '30'], // #ededed
+    n95: ['primary', 'gray'], // #f5f5f5
+    n100: ['primary', 'white'], // #fff
+};
+export const colorMap: Record<AccordionVariantType, VariantColors> = {
+    basic: {
+        contentBg: {
+            light: colorObject.n95,
+            dark: colorObject.n20,
+        },
+        contentText: {
+            light: colorObject.n10,
+            dark: colorObject.n95,
+        },
+        headBg: {
+            light: colorObject.n100,
+            dark: colorObject.n20,
+        },
+        headText: {
+            light: colorObject.n10,
+            dark: colorObject.n95,
+        },
+    },
+    compact: {
+        contentBg: {
+            light: colorObject.n100,
+            dark: colorObject.n10,
+        },
+        contentText: {
+            light: colorObject.n10,
+            dark: colorObject.n90,
+        },
+        headBg: {
+            light: colorObject.n100,
+            dark: colorObject.n10,
+        },
+        headText: {
+            light: colorObject.n10,
+            dark: colorObject.n90,
+        },
+    },
+    gray: {
+        contentBg: {
+            light: colorObject.n85,
+            dark: colorObject.n40,
+        },
+        contentText: {
+            light: colorObject.n40,
+            dark: colorObject.n85,
+        },
+        headBg: {
+            light: colorObject.n90,
+            dark: colorObject.n45,
+        },
+        headText: {
+            light: colorObject.n45,
+            dark: colorObject.n90,
+        },
+    },
+    stripe: {
+        contentBg: {
+            light: colorObject.n90,
+            dark: colorObject.n45,
+        },
+        contentText: {
+            light: colorObject.n45,
+            dark: colorObject.n90,
+        },
+        headBg: {
+            light: colorObject.n100,
+            dark: colorObject.n40,
+        },
+        headText: {
+            light: colorObject.n40,
+            dark: colorObject.n100,
+        },
+    },
+};
+
+type GetAccordionColor = {
+    variant: AccordionVariantType;
+    invert: boolean;
+    keys: CompKeys[];
+} & Themed;
+export const getAccordionColor = ({theme, variant, invert, keys}: GetAccordionColor): Record<CompKeys, string> => {
+    const isDark = invert ? !isDarkMode({theme}) : isDarkMode({theme});
+    const darkLabel = isDark ? 'dark' : 'light';
+    const result: Record<string, string> = {};
+    for (const colorKey of keys) {
+        const [appColorBg, appSubColorBg] = colorMap[variant][colorKey][darkLabel];
+        const colorValue = color(appColorBg, appSubColorBg)({theme});
+        result[colorKey] = colorValue;
+    }
+    return result;
+};

package/src/common/accordion/enums.ts

@@ -0,0 +1,18 @@
+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

@@ -4,3 +4,4 @@ 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';