@nuskin/foundation-ui-components 1.0.0-develop.1 → 1.0.0-develop.11

package/src/common/table/NsTable.styled.ts

@@ -0,0 +1,127 @@
+// TODO: const ariel = #f8e9f8;
+
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
+
+import { 
+    Table,
+    TableContainer,
+    TableSortLabel,
+    TableRow,
+    TableCell
+} from '@mui/material';
+import Pagination from '@mui/material/Pagination';
+import LinearProgress from '@mui/material/LinearProgress';
+
+const { color } = ColorUtils;
+
+export const StyledTableContainer= styled(TableContainer)`
+    background-color: ${color('primary', 'white')};
+`;
+
+export const StyledTable = styled(Table)`
+    size: medium;
+`;
+
+export const StyledTableSortLabel = styled(TableSortLabel)`
+    font-size: 12px;
+    text-transform: uppercase;
+    font-weight: 600;
+    line-height: 16px;
+    letter-spacing: 0.05em;
+    color: rgba(0, 0, 0, 0.54);
+    &:hover {
+    color: ${color('primary', 'black')};
+    }
+`;
+
+export const StyledTableLabel = styled.span`
+    font-size: 12px;
+    text-transform: uppercase;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0.05em;
+    color: rgba(0, 0, 0, 0.54);
+    &:hover {
+        cursor: default;
+    }
+`;
+
+export const StyledPageComponent = styled.div`
+    background-color: ${color('primary', 'white')};
+`;
+
+export const StyledEmptyRow = styled(TableRow)<{emptyRows: number}>`
+    height: ${({ emptyRows }) => 48 * emptyRows}px;
+`;
+
+// [Todo-Arun] - Move f8e9f8 to custom color palette
+export const StyledTableRow  = styled(TableRow)`
+    &:hover {
+        background-color: #f8e9f8 !important;
+    }
+`;
+
+export const StyledTableLastCell = styled(TableCell)`
+    display: flex;
+    height: 49px;
+    align-items: center;
+    padding: 0 24px;
+    margin-bottom: -0.5px;
+
+    .action {
+        margin-left: auto;
+    }
+`;
+
+export const StyledOriginalTableCell = styled(TableCell)`
+  height: 48px;
+  padding: 0 24px;
+`;
+
+export const StyledPagination = styled(Pagination)`
+    .MuiPagination-ul {
+        display: flex;
+        justify-content: flex-end;
+        background-color: ${color('primary', 'white')};
+    }
+    & .MuiPaginationItem-previousNext {
+        margin: 0.3rem 10px;
+        width: 2rem;
+        height: 2rem;
+        border-radius: 4px;
+    }
+    & .MuiPaginationItem-page {
+        border-radius: 0px;
+        width: auto;
+        min-width: 34px;
+        padding: 0 5px;
+        font-size: 16px;
+        line-height: 17px;
+        border-color: ${color('primary', 'black')};
+    }
+    & .MuiPaginationItem-root.Mui-selected {
+        background-color: ${color('primary', 'black')};
+        color: ${color('primary', 'white')};
+    }
+`;
+
+export const StyledExpandCell= styled(TableCell)`
+    padding-bottom: 0;
+    padding-top: 0;
+    &.remove {
+        border: 0;
+    }
+`;
+
+export const StyledProgressCell = styled(TableCell)`
+    padding: 0;
+    border: 0;
+`;
+
+export const StyledLinearProgress = styled(LinearProgress)`
+  && {
+    width: 100%;
+    height: 7px;
+    border-radius: 4px;
+  }
+`;

package/src/common/table/NsTable.tsx

@@ -0,0 +1,133 @@
+import React, { useState, useEffect } from 'react';
+import { TableBody, TableCell, TableRow } from '@mui/material';
+import {
+    StyledTable,
+    StyledTableContainer,
+    StyledEmptyRow,
+    StyledProgressCell,
+    StyledLinearProgress,
+} from './NsTable.styled';
+import type { NsTableProps, Item, OrderType } from './types';
+import { stableSort, getComparator } from './helper';
+import NsTableHeader from './NsTableHeader';
+import NsTablePagination from './NsTablePagination';
+import ExpandableRow from './NsExpandableRow';
+import Grid from '@mui/material/Grid';
+
+export default function NsTable({
+    headers = [],
+    items = [],
+    rows,
+    rowsPerPageOptions,
+    itemKey,
+    expandableContent,
+    actionClick,
+    showActions = true,
+    showExpandedContent = true,
+    loading = false,
+    isExpandableAll = false,
+}: NsTableProps) {
+    const [order, setOrder] = useState<OrderType>('asc');
+    const [orderBy, setOrderBy] = useState<keyof Item>(itemKey);
+    const [expandMap, setExpandMap] = useState<{ [key: number]: boolean }>({});
+    const [page, setPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(rows);
+    const itemKeyList = React.useMemo(() => {
+        return items.length ? Object.keys(items[0]) : [];
+    }, [items]);
+
+    useEffect(() => {
+        setRowsPerPage(rows);
+        setPage(0);
+    }, [rows]);
+
+    const handleRequestSort = (event: React.MouseEvent<unknown>, property: keyof Item) => {
+        const isAsc = orderBy === property && order === 'asc';
+        setOrder(isAsc ? 'desc' : 'asc');
+        setOrderBy(property);
+    };
+
+    const handleClick = (index: number) => {
+        if (isExpandableAll) {
+            setExpandMap((prevState) => ({ ...prevState, [index]: !prevState[index] }));
+        } else {
+            setExpandMap({ [index]: !expandMap[index] });
+        }
+    };
+
+    const handleChangePage = (newPage: number) => {
+        setPage(newPage - 1);
+    };
+
+    const emptyRows = getEmptyRows();
+
+    const visibleRows = React.useMemo(
+        () =>
+            stableSort(items, getComparator(order, orderBy)).slice(
+                page * rowsPerPage,
+                page * rowsPerPage + rowsPerPage
+            ),
+        [order, orderBy, page, rowsPerPage, items]
+    );
+
+    return (
+        <div>
+            <StyledTableContainer>
+                <StyledTable>
+                    <NsTableHeader
+                        headCells={headers}
+                        order={order}
+                        orderBy={orderBy as string}
+                        onRequestSort={handleRequestSort}
+                        rowCount={items.length}
+                    />
+                    <TableBody>
+                        {loading ? (
+                            <TableRow>
+                                <StyledProgressCell colSpan={itemKeyList.length}>
+                                    <Grid container>
+                                        <Grid item xs={12}>
+                                            <StyledLinearProgress />
+                                        </Grid>
+                                    </Grid>
+                                </StyledProgressCell>
+                            </TableRow>
+                        ) : null}
+                        {visibleRows.map((row, index) => {
+                            return (
+                                <ExpandableRow
+                                    key={index}
+                                    expandableContent={expandableContent}
+                                    isExpand={expandMap[index]}
+                                    handleClick={handleClick}
+                                    row={row}
+                                    index={index}
+                                    itemKeyList={itemKeyList}
+                                    actionClick={actionClick}
+                                    showActions={showActions}
+                                    showExpandedContent={showExpandedContent}
+                                />
+                            );
+                        })}
+                        {emptyRows > 0 ? (
+                            <StyledEmptyRow emptyRows={emptyRows}>
+                                <TableCell colSpan={itemKeyList.length} />
+                            </StyledEmptyRow>
+                        ) : null}
+                    </TableBody>
+                </StyledTable>
+            </StyledTableContainer>
+            <NsTablePagination
+                rowsPerPageOptions={rowsPerPageOptions}
+                count={items.length}
+                rowsPerPage={rowsPerPage}
+                page={page + 1}
+                onPageChange={handleChangePage}
+            />
+        </div>
+    );
+
+    function getEmptyRows() {
+        return page > 0 ? Math.max(0, (1 + page) * rowsPerPage - items.length) : 0;
+    }
+}

package/src/common/table/NsTableHeader.tsx

@@ -0,0 +1,41 @@
+import type { NsTableHeaderProps, Item } from './types';
+import React from 'react';
+import { TableHead, TableRow, Box, TableCell } from '@mui/material';
+import { StyledTableSortLabel, StyledTableLabel } from './NsTable.styled';
+import { visuallyHidden } from '@mui/utils';
+
+export default function NsTableHeader(props: NsTableHeaderProps) {
+    const { order, orderBy, headCells, onRequestSort } = props;
+    const createSortHandler = (property: keyof Item) => (event: React.MouseEvent<unknown>) => {
+        onRequestSort(event, property);
+    };
+
+    return (
+        <TableHead>
+            <TableRow>
+                {headCells.map((headCell) =>
+                    headCell.sortable ? (
+                        <TableCell key={headCell.id} sortDirection={orderBy === headCell.id ? order : false}>
+                            <StyledTableSortLabel
+                                active={orderBy === headCell.id}
+                                direction={orderBy === headCell.id ? order : 'asc'}
+                                onClick={createSortHandler(headCell.id)}
+                            >
+                                {headCell.label}
+                                {orderBy === headCell.id ? (
+                                    <Box component="span" sx={visuallyHidden}>
+                                        {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                                    </Box>
+                                ) : null}
+                            </StyledTableSortLabel>
+                        </TableCell>
+                    ) : (
+                        <TableCell key={headCell.id} sortDirection={false}>
+                            <StyledTableLabel>{headCell.label}</StyledTableLabel>
+                        </TableCell>
+                    )
+                )}
+            </TableRow>
+        </TableHead>
+    );
+}

package/src/common/table/NsTablePagination.tsx

@@ -0,0 +1,28 @@
+import type { NsTablePaginationProps } from './types'
+import React from 'react'
+import { StyledPagination } from './NsTable.styled'
+
+export default function NsTablePagination(props: NsTablePaginationProps) {
+    const {
+        count,
+        rowsPerPage,
+        page,
+        onPageChange,
+    } = props;
+
+    const totalPage = Math.ceil(count / rowsPerPage);
+    const handleChange = (event: React.ChangeEvent<unknown>, value: number) => {
+        onPageChange(value);
+    };
+
+    return (
+        <StyledPagination
+            count={totalPage}
+            page={page} 
+            variant="outlined"
+            onChange={handleChange}
+            shape="rounded"
+            color="primary"
+        />
+    );
+}

package/src/common/table/helper.ts

@@ -0,0 +1,33 @@
+/* eslint-disable no-unused-vars */
+import type { OrderType } from './types.d';
+
+export function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
+    if (b[orderBy] < a[orderBy]) {
+        return -1;
+    }
+    if (b[orderBy] > a[orderBy]) {
+        return 1;
+    }
+    return 0;
+}
+
+export function getComparator<Key extends keyof any>(
+    order: OrderType,
+    orderBy: Key
+): (a: { [key in Key]: number | string }, b: { [key in Key]: number | string }) => number {
+    return order === 'desc'
+        ? (a, b) => descendingComparator(a, b, orderBy)
+        : (a, b) => -descendingComparator(a, b, orderBy);
+}
+
+export function stableSort<T>(array: readonly T[], comparator: (a: T, b: T) => number) {
+    const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
+    stabilizedThis.sort((a, b) => {
+        const order = comparator(a[0], b[0]);
+        if (order !== 0) {
+            return order;
+        }
+        return a[1] - b[1];
+    });
+    return stabilizedThis.map((el) => el[0]);
+}

package/src/common/table/index.ts

@@ -0,0 +1,2 @@
+export { default as NsTable } from './NsTable';
+export type { NsTableProps } from './types.d';

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

@@ -0,0 +1,57 @@
+/* eslint-disable no-unused-vars */
+import { React } from 'React'
+
+export interface Header {
+    label: string;
+    id: string | number;
+    numeric: boolean;
+    sortable?: boolean;
+}
+
+export interface Item {
+    [key: string]: string | number;
+}
+  
+export interface NsTableProps {
+    headers: Header[];
+    items: Item[];
+    rows: number;
+    itemKey: string;
+    rowsPerPageOptions: number[];
+    isExpandableAll?: boolean;
+    showActions?: boolean;
+    showExpandedContent?: boolean;
+    loading?: boolean;
+    expandableContent: (selectedItem: Item, index: number) => React.ReactNode;
+    actionClick: (item: Item) => React.ReactNode;
+}
+
+export type OrderType = 'asc' | 'desc';
+
+export interface NsTableHeaderProps {
+    onRequestSort: (event: React.MouseEvent<unknown>, property: keyof Item) => void;
+    order: OrderType;
+    orderBy: string;
+    rowCount: number;
+    headCells: readonly Header[];
+}
+
+export interface NsTablePaginationProps {
+    rowsPerPageOptions: number[],
+    count: number;
+    rowsPerPage: number;
+    page: number,
+    onPageChange: (number) => void;
+}
+
+export interface NsTableRowProps {
+    expandableContent: (selectedItem: Item, index: number) => React.ReactNode;
+    isExpand: boolean;
+    handleClick: (index: number) => void;
+    row: Item;
+    index: number;
+    itemKeyList: string[];
+    showActions: boolean;
+    showExpandedContent: boolean;
+    actionClick: (item: Item) => React.ReactNode;
+}

package/src/common/text-strip/NsTextStrip.spec.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { NsTextStrip } from '@/common/';
+
+describe('NsTextStrip component', () => {
+    it('renders text description and link', () => {
+        const text = 'Free Delivery';
+        const description = 'Download the app to access everything Nike';
+        const link = { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'View Details' };
+        render(<NsTextStrip link={link} description={description} text={text} />);
+        const element = screen.getByText(text);
+        expect(element).toBeInTheDocument();
+        const descElement = screen.getByText(description);
+        expect(descElement).toBeInTheDocument();
+        const anchorElement = screen.getByText(link.title);
+        expect(anchorElement.tagName).toBe('A');
+        expect(anchorElement).toHaveAttribute('href', link.href);
+    });
+    it('does not have anchor when link is undefined', () => {
+        const text = 'Free Delivery';
+        const description = 'Download the app to access everything Nike';
+        let link = { title: 'hi' };
+        render(<NsTextStrip link={link} description={description} text={text} />);
+        const element = screen.getByText(text);
+        expect(element).toBeInTheDocument();
+        const descElement = screen.getByText(description);
+        expect(descElement).toBeInTheDocument();
+        expect(() => screen.getByText(link.title)).toThrow();
+    });
+});

package/src/common/text-strip/NsTextStrip.stories.tsx

@@ -0,0 +1,33 @@
+/**
+ * NsTextStrip.stories.tsx
+ * @description NsTextStrip component.
+ */
+
+import type { StoryObj, Meta } from '@storybook/react';
+import { NsTextStrip } from '@/common/';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+
+type ComponentType = typeof NsTextStrip;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Data Display/NsTextStrip',
+    component: NsTextStrip,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        alignment: {
+            control: 'select',
+            options: ['center', 'start', 'end'],
+            description: 'specify whether items should be in center, start or end',
+        },
+    },
+    args: {
+        text: 'Free Delivery',
+        description: 'Download the app to access everything Nike',
+        link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'View Details' },
+        alignment: 'center',
+    },
+} as MetaStory;
+
+export const DefaultTextStrip: Story = {};

package/src/common/text-strip/NsTextStrip.tsx

@@ -0,0 +1,47 @@
+/**
+ * NsTextStrip.tsx
+ * @description NsTextStrip component for scrolling text CTA
+ */
+
+import React from 'react';
+
+import { NsTextStripProps } from './types.d';
+import { NsTypography } from '../typography';
+import { NsLink } from '../link';
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
+
+const { isDarkMode, paletteColor, color } = ColorUtils;
+
+const StyledHeader = styled.header`
+    background: ${(props) => (
+        !isDarkMode(props)
+            ? color('primary', 'gray')
+            : paletteColor('primary', 'contrastText')
+    )};
+    display: flex;
+    flex-direction: column;
+    min-height: 60px;
+    padding: 2px 10px 12px;
+    a {
+        text-decoration: underline;
+        font-weight: 600;
+    }
+`;
+
+const NsTextStrip = (props: NsTextStripProps) => {
+    const { alignment = 'center', text, description, link, className = '' } = props;
+
+    return (
+        <StyledHeader className={`${className} items-${alignment}`}>
+            <NsTypography variant="h5" weight="bold">
+                {text}
+            </NsTypography>
+            <NsTypography variant="p-xs">
+                {description}&nbsp;
+                {link?.href ? <NsLink href={link.href}>{link.title}</NsLink> : ''}
+            </NsTypography>
+        </StyledHeader>
+    );
+};
+
+export default NsTextStrip;

package/src/common/text-strip/index.ts

@@ -0,0 +1,2 @@
+export { default as NsTextStrip } from './NsTextStrip';
+export type { NsTextStripProps } from './types.d';

package/src/common/text-strip/types.d.ts

@@ -0,0 +1,17 @@
+import { AdditionalProps } from '../common.types';
+
+export type AlignmentType = 'start' | 'center' | 'end';
+
+export type TextCtaDataType = {
+    link?: {
+        href?: string;
+        title?: string;
+    };
+    text?: string;
+    description?: string;
+};
+export type NsTextStripProps = {
+    alignment?: AlignmentType;
+    className?: string;
+} & AdditionalProps &
+    TextCtaDataType;

package/src/common/typography/NsTypography.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsTypography } from './';
 
 type ComponentType = typeof NsTypography;
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsTypography',
+    title: 'Components/Data Display/NsTypography',
     component: NsTypography,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/typography/NsTypography.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { NsTypographyProps } from './types';
+import { NsTypographyProps } from './types.d';
 import { StyledTypography } from './Typography.styled';
 
 const NsTypography = ({

package/src/common/typography/Typography.styled.tsx

@@ -1,7 +1,7 @@
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
-import { NsTypographyProps } from './types';
+import { NsTypographyProps } from './types.d';
 
-const { getPaletteColor } = ColorUtils;
+const { paletteColor } = ColorUtils;
 
 const variantStyles = {
     h1: 'font-size: 36px; line-height: 44px;',
@@ -29,8 +29,8 @@ const fontWeightMap = {
 
 export const StyledTypography = styled.div<NsTypographyProps>`
     font-family: Inter;
-    color: ${({ color, theme, colorOverride }) =>
-        colorOverride?.startsWith('#') ? colorOverride : getPaletteColor(theme, color)};
+    color: ${({ color, colorOverride }) =>
+        colorOverride?.startsWith('#') ? colorOverride : paletteColor(color)};
     font-weight: ${({ weight = 'normal' }) => fontWeightMap[weight]};
     font-style: ${({ fontStyle }) => fontStyle};
     ${({ variant = 'h1' }) => variantStyles[variant]};

package/src/common/typography/index.ts

@@ -1,3 +1,3 @@
 export { default as NsTypography } from './NsTypography';
-export type { NsTypographyProps, Variants } from './types';
+export type { NsTypographyProps, Variants } from './types.d';
 export { default as GlobalFontInter } from './GlobalFontInter';

package/src/common/util.ts

@@ -0,0 +1 @@
+export const skipDarkModeEnabled = (key: string) => key !== 'darkModeEnabled';

package/src/common/utility/Show.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren, ReactElement } from 'react';
+
+type ShowType = PropsWithChildren & {
+    when?: boolean;
+    elseContent?: ReactElement;
+};
+const Show = ({ when, children, elseContent }: ShowType): ReactElement => {
+    if (when) {
+        return <>{children}</>;
+    }
+    return <>{elseContent}</>;
+};
+export default Show;

package/src/common/utility/index.ts

@@ -0,0 +1 @@
+export { default as Show } from './Show';

package/src/common/validations/regex.ts

@@ -0,0 +1,3 @@
+export const emailPattern =
+        // eslint-disable-next-line max-len
+        /^[\s]*[A-Za-z0-9!#$%&*+/=?^_`{|}~-]+(?:\.[A-Za-z0-9!#$%&*+/=?^_`{|}~-]+)*@(?:[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?\.)+[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?[\s]*$/;

package/src/common/videos/NsVideo.stories.tsx

@@ -7,14 +7,14 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { NsVideo } from '.';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsVideo;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsVideo',
+    title: 'Components/Data Display/NsVideo',
     component: NsVideo,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/videos/NsVideo.tsx

@@ -6,7 +6,7 @@
 
 import { PropsWithChildren } from 'react';
 
-import { NsVideoProps } from './types';
+import { NsVideoProps } from './types.d';
 
 const NsVideo = (props: PropsWithChildren<NsVideoProps>) => {
     const { src, title, width, height, allowFullScreen } = props;

package/src/common/videos/index.ts

@@ -1,2 +1,2 @@
 export { default as NsVideo } from './NsVideo';
-export type { NsVideoProps } from './types';
+export type { NsVideoProps } from './types.d';