@nuskin/foundation-ui-components 1.0.0-cft-35.13 → 1.0.0-develop.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.0.0-cft-35.13",
+    "version": "1.0.0-develop.10",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "private": false,
     "main": "src/common/index.ts",
@@ -10,8 +10,7 @@
     },
     "homepage": "https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/blob/master/README.md",
     "author": {
-        "name": "Ruthraj Palanisamy",
-        "email": "rpalanisamy@nuskin.com"
+        "name": "Josh Porter"
     },
     "publishConfig": {
         "access": "public"
@@ -23,24 +22,32 @@
     ],
     "license": "MIT",
     "scripts": {
-        "dev": "next dev",
+        "build-storybook": "storybook build -o dist",
+        "build-dev": "yarn build-storybook",
+        "build-prod": "yarn build-storybook --mode=production",
+        "build-test": "yarn build-storybook",
         "build": "next build",
-        "start": "next start",
+        "dev": "next dev",
+        "export": "next export",
         "lint": "next lint",
-        "test": "jest",
-        "test:coverage": "yarn test --coverage",
-        "test:watch": "jest --watch",
         "storybook": "storybook dev -p 6007",
-        "build-storybook": "storybook build"
+        "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": {
         "@emotion/react": "^11.10.6",
         "@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-cft-33.12",
-        "@types/jest": "^29.5.0",
+        "@nuskin/foundation-theme": "1.0.0-develop.5",
         "framer-motion": "^10.8.5",
         "next": "13.2.4",
         "react": "18.2.0",
@@ -69,8 +76,11 @@
         "@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",
+        "@types/ramda": "^0.29.3",
         "@types/react": "18.0.28",
         "@types/react-dom": "18.0.11",
         "@types/react-slick": "^0.23.10",

package/src/common/accordion/NsAccordion.tsx

@@ -0,0 +1,69 @@
+import React, { FC, useMemo } from 'react';
+import { NsAccordionItem, useAccordionMap, NsAccordionProps, AccordionItem } 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: FC<NsAccordionProps> = ({
+    allowMultipleExpanded,
+    invert,
+    level,
+    variant,
+    items,
+    headerTypographyVariant,
+    closedIconName,
+    openedIconName,
+    additionalProps,
+    isChild = false,
+}) => {
+    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={<div className="nsa-item-title">{item.title}</div>}
+                        variant={variant}
+                    />
+                );
+            })}
+        </StyledAccordionWrapper>
+    );
+};
+
+export default NsAccordion;

package/src/common/accordion/NsAccordionHeader.tsx

@@ -0,0 +1,77 @@
+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',
+    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: headBg,
+        color: headText,
+        cursor: 'pointer',
+        display: 'grid',
+        gap: '4px',
+        gridTemplateColumns: 'auto 1fr 24px',
+        padding: '9px 16px',
+        borderBottom,
+    } 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,
+}: 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" {...(cslp?.header ?? {})}>
+                    {title}
+                </NsTypography>
+            ) : (
+                title
+            )}
+            <span className="header-icon">
+                <NsIcon name={isOpen ? openedIconName ?? 'arrowUp' : closedIconName ?? 'arrowDown'} />
+            </span>
+        </StyledHeader>
+    );
+};
+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

@@ -0,0 +1,59 @@
+import React 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,
+}: NsAccordionItemProps) => {
+    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}
+            />
+            <NsCollapse
+                type={type}
+                isChild={isChild}
+                isOpen={isOpen}
+                variant={variant}
+                level={level}
+                invert={invert}
+                content={content}
+                cslp={cslp}
+                allowMultipleExpanded={allowMultipleExpanded}
+            />
+        </StyledToggleSection>
+    );
+};
+
+export default NsAccordionItem;

package/src/common/accordion/NsCollapse.tsx

@@ -0,0 +1,110 @@
+import { styled } from '@nuskin/foundation-theme';
+import { AccordionVariant, AccordionVariantType, NsCollapseProps, AccordionItem, NsAccordion } 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) => !['variant', 'level'].includes(key),
+};
+
+export const StyledCollapse = styled(
+    'section',
+    options
+)<{ 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',
+            },
+        };
+    }
+);
+
+/**
+ * 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) => {
+    const body = useMemo(() => {
+        if (isValidElement(content)) {
+            return content as ReactElement;
+        }
+        if (type === 'html') {
+            return (
+                <div
+                    className="nsa-content-padded"
+                    dangerouslySetInnerHTML={{ __html: content as string }}
+                    {...(cslp?.content ?? {})}
+                />
+            );
+        } else if (type === 'text') {
+            return (
+                <div className="p-4" {...(cslp?.content ?? {})}>
+                    {content as string}
+                </div>
+            );
+        } else if (type === '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}
+        >
+            {body}
+        </StyledCollapse>
+    );
+};
+export default NsCollapse;

package/src/common/accordion/NsToggleSection.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import { NsToggleSectionProps, NsAccordionItem } 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) => {
+    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

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

@@ -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,8 @@
+export const AccordionVariant = {
+    Basic: 'basic',
+    Compact: 'compact',
+    Gray: 'gray',
+    Stripe: 'stripe',
+} as const;
+const variantValues = Object.values(AccordionVariant);
+export type AccordionVariantType = (typeof variantValues)[number];

package/src/common/accordion/index.ts

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