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

package/src/common/table/NsTable.stories.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import NsTable from './NsTable';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+
+type ComponentType = typeof NsTable;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+const headers = [
+    {
+        label: 'Dessert (100g serving)',
+        id: 'name',
+        numeric: false
+    },
+    { label: 'Calories', id: 'calories' , numeric: true},
+    { label: 'Fat (g)', id: 'fat', numeric: true },
+    { label: 'Carbs (g)', id: 'carbs', numeric: true },
+    { label: 'Protein (g)', id: 'protein', numeric: true },
+    { label: 'Iron (%)', id: 'iron', numeric: false },
+];
+  
+const items = [
+    {
+        name: 'Frozen Yogurt',
+        calories: 159,
+        fat: 6.0,
+        carbs: 24,
+        protein: 4.0,
+        iron: '1%',
+    },
+    {
+        name: 'Ice cream sandwich',
+        calories: 237,
+        fat: 9.0,
+        carbs: 37,
+        protein: 4.3,
+        iron: '1%',
+    },
+    {
+        name: 'Eclair',
+        calories: 262,
+        fat: 16.0,
+        carbs: 23,
+        protein: 6.0,
+        iron: '7%',
+    },
+    {
+        name: 'Cupcake',
+        calories: 305,
+        fat: 3.7,
+        carbs: 67,
+        protein: 4.3,
+        iron: '8%',
+    },
+    {
+        name: 'Gingerbread',
+        calories: 356,
+        fat: 16.0,
+        carbs: 49,
+        protein: 3.9,
+        iron: '16%',
+    },
+    {
+        name: 'Jelly bean',
+        calories: 375,
+        fat: 0.0,
+        carbs: 94,
+        protein: 0.0,
+        iron: '0%',
+    },
+    {
+        name: 'Lollipop',
+        calories: 392,
+        fat: 0.2,
+        carbs: 98,
+        protein: 0,
+        iron: '2%',
+    },
+    {
+        name: 'Honeycomb',
+        calories: 408,
+        fat: 3.2,
+        carbs: 87,
+        protein: 6.5,
+        iron: '45%',
+    },
+    {
+        name: 'Donut',
+        calories: 452,
+        fat: 25.0,
+        carbs: 51,
+        protein: 4.9,
+        iron: '22%',
+    },
+    {
+        name: 'KitKat',
+        calories: 518,
+        fat: 26.0,
+        carbs: 65,
+        protein: 7,
+        iron: '6%',
+    },
+];
+
+export default {
+    title: 'Components/NsTable',
+    component: NsTable,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        rows: { 
+            control: 'select',
+            options: [5, 10, 25]
+        },
+    },
+    args: {
+        headers: headers,
+        items: items,
+        rows: 5,
+        itemKey: 'name',
+        rowsPerPageOptions: [5, 10, 25]
+    }
+} as MetaStory;
+
+export const NasTable: Story = {};

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

@@ -0,0 +1,33 @@
+import { styled } from '@nuskin/foundation-theme';
+import { getAppColor } from '@nuskin/foundation-theme/src/utils/color-utils';
+import { 
+    Table,
+    TableContainer,
+    TableSortLabel,
+    TableRow
+} from '@mui/material';
+
+export const StyledTableContainer= styled(TableContainer)`
+    background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
+`;
+
+export const StyledTable = styled(Table)`
+    size: medium;
+`;
+
+export const StyledTableSortLabel = styled(TableSortLabel)`
+  font-size: 12px;
+  text-transform: uppercase;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0.05em;
+  color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+`;
+
+export const StyledPageComponent = styled.div`
+    background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
+`;
+
+export const StyledEmptyRow = styled(TableRow)<{emptyRows: number}>`
+  height: ${({ emptyRows }) => 53 * emptyRows}px;
+`;

package/src/common/table/NsTable.tsx

@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from 'react';
+import { TableBody, TableRow, TableCell } from '@mui/material';
+import { StyledTable, StyledTableContainer, StyledEmptyRow } from './NsTable.styled';
+import type { NsTableProps, Item, OrderType } from './types.d';
+import { stableSort, getComparator } from './helper';
+import NsTableHeader from './NsTableHeader';
+import NsCheckBox from '../checkbox/NsCheckbox';
+import NsTablePagination from './NsTablePagination';
+
+export default function NsTable({
+    headers = [],
+    items = [],
+    rows,
+    isShowSelector = true,
+    isPagination = false,
+    rowsPerPageOptions,
+    itemKey,
+}: NsTableProps) {
+    const [order, setOrder] = useState<OrderType>('asc');
+    const [orderBy, setOrderBy] = useState<keyof Item>(itemKey);
+    const [selected, setSelected] = useState<readonly (string | number)[]>([]);
+    const [page, setPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(rows);
+    const [itemKeyList, setItemKeyList] = useState<string[]>([]);
+
+    useEffect(() => {
+        if (items.length) setItemKeyList(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 handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (event.target.checked) {
+            const newSelected = items.map((n) => n[itemKey as string]);
+            setSelected(newSelected);
+            return;
+        }
+        setSelected([]);
+    };
+
+    const handleClick = (event: React.MouseEvent<unknown>, name: string | number) => {
+        const selectedIndex = selected.indexOf(name);
+        let newSelected: readonly (string | number)[] = [];
+
+        if (selectedIndex === -1) {
+            newSelected = newSelected.concat(selected, name);
+        } else if (selectedIndex === 0) {
+            newSelected = newSelected.concat(selected.slice(1));
+        } else if (selectedIndex === selected.length - 1) {
+            newSelected = newSelected.concat(selected.slice(0, -1));
+        } else if (selectedIndex > 0) {
+            newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
+        }
+
+        setSelected(newSelected);
+    };
+
+    const handleChangePage = (event: unknown, newPage: number) => {
+        setPage(newPage);
+    };
+
+    const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setRowsPerPage(parseInt(event.target.value, 10));
+        setPage(0);
+    };
+
+    const isSelected = (name: string | number) => selected.indexOf(name) !== -1;
+
+    const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - items.length) : 0;
+
+    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}
+                        numSelected={selected.length}
+                        order={order}
+                        orderBy={orderBy as string}
+                        onSelectAllClick={handleSelectAllClick}
+                        onRequestSort={handleRequestSort}
+                        rowCount={items.length}
+                        isShowSelector={isShowSelector}
+                    />
+                    <TableBody>
+                        {visibleRows.map((row, index) => {
+                            const isItemSelected = isSelected(row[itemKey]);
+                            const labelId = `table-checkbox-${index}`;
+                            const tableRowTestId = `table-row-${index}`;
+                            return (
+                                <TableRow
+                                    hover
+                                    onClick={(event) => handleClick(event, row[itemKey])}
+                                    role="checkbox"
+                                    aria-checked={isItemSelected}
+                                    tabIndex={-1}
+                                    key={row[itemKey]}
+                                    selected={isItemSelected}
+                                    sx={{ cursor: 'pointer' }}
+                                    data-testid={tableRowTestId}
+                                >
+                                    {isShowSelector ? (
+                                        <TableCell padding="checkbox">
+                                            <NsCheckBox
+                                                checked={isItemSelected}
+                                                testid={labelId}
+                                                name={labelId}
+                                                label=""
+                                                className="ml-0 !important"
+                                            />
+                                        </TableCell>
+                                    ) : null}
+                                    {itemKeyList.map((id, index) => {
+                                        return (
+                                            <TableCell align="left" key={index}>
+                                                {row[id]}
+                                            </TableCell>
+                                        );
+                                    })}
+                                </TableRow>
+                            );
+                        })}
+                        {emptyRows > 0 ? (
+                            <StyledEmptyRow emptyRows={emptyRows}>
+                                <TableCell colSpan={itemKeyList.length} />
+                            </StyledEmptyRow>
+                        ) : null}
+                    </TableBody>
+                </StyledTable>
+            </StyledTableContainer>
+            {isPagination ? (
+                <NsTablePagination
+                    rowsPerPageOptions={rowsPerPageOptions}
+                    count={items.length}
+                    rowsPerPage={rowsPerPage}
+                    page={page}
+                    onPageChange={handleChangePage}
+                    onRowsPerPageChange={handleChangeRowsPerPage}
+                />
+            ) : null}
+        </div>
+    );
+}

package/src/common/table/NsTableHeader.tsx

@@ -0,0 +1,48 @@
+import type { NsTableHeaderProps, Item } from './types.d';
+import React from 'react';
+import { TableHead, TableRow, Box, TableCell } from '@mui/material';
+import { StyledTableSortLabel } from './NsTable.styled';
+import { visuallyHidden } from '@mui/utils';
+import NsCheckBox from '../checkbox/NsCheckbox';
+
+export default function NsTableHeader(props: NsTableHeaderProps) {
+    const { order, orderBy, numSelected, rowCount, headCells, isShowSelector, onRequestSort, onSelectAllClick } = props;
+    const createSortHandler = (property: keyof Item) => (event: React.MouseEvent<unknown>) => {
+        onRequestSort(event, property);
+    };
+
+    return (
+        <TableHead>
+            <TableRow>
+                {isShowSelector ? (
+                    <TableCell padding="checkbox">
+                        <NsCheckBox
+                            checked={rowCount > 0 && numSelected > 0}
+                            onChange={onSelectAllClick}
+                            testid="header-checkbox"
+                            name="header-checkbox"
+                            label=""
+                            className="ml-0 !important"
+                        />
+                    </TableCell>
+                ) : null}
+                {headCells.map((headCell) => (
+                    <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>
+                ))}
+            </TableRow>
+        </TableHead>
+    );
+}

package/src/common/table/NsTablePagination.tsx

@@ -0,0 +1,20 @@
+import type { NsTablePaginationProps } from './types.d';
+import React from 'react';
+import { StyledPageComponent } from './NsTable.styled';
+import { TablePagination } from '@mui/material';
+
+export default function NsTablePagination(props: NsTablePaginationProps) {
+    const { rowsPerPageOptions, count, rowsPerPage, page, onPageChange, onRowsPerPageChange } = props;
+
+    return (
+        <TablePagination
+            rowsPerPageOptions={rowsPerPageOptions}
+            component={StyledPageComponent}
+            count={count}
+            rowsPerPage={rowsPerPage}
+            page={page}
+            onPageChange={onPageChange}
+            onRowsPerPageChange={onRowsPerPageChange}
+        />
+    );
+}

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,44 @@
+/* eslint-disable no-unused-vars */
+import { React } from 'React'
+
+export interface Header {
+    label: string;
+    id: string | number;
+    numeric: boolean;
+}
+  
+export interface Item {
+    [key: string]: string | number;
+}
+  
+export interface NsTableProps {
+    headers: Header[];
+    items: Item[];
+    rows: number;
+    itemKey: string;
+    isShowSelector: boolean;
+    rowsPerPageOptions: number[];
+    isPagination?: boolean;
+}
+
+export type OrderType = 'asc' | 'desc';
+
+export interface NsTableHeaderProps {
+    numSelected: number;
+    onRequestSort: (event: React.MouseEvent<unknown>, property: keyof Item) => void;
+    onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    order: OrderType;
+    orderBy: string;
+    rowCount: number;
+    headCells: readonly Header[];
+    isShowSelector: boolean;
+}
+
+export interface NsTablePaginationProps {
+    rowsPerPageOptions: number[],
+    count: number;
+    rowsPerPage: number;
+    page: number,
+    onPageChange: (unknown, number) => void;
+    onRowsPerPageChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}

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,32 @@
+/**
+ * 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/NsTextStrip',
+    component: NsTextStrip,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        children: {
+            control: 'text', // use the text control to edit children prop
+        },
+    },
+    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',
+        justify: 'center',
+    },
+} as MetaStory;
+
+export const DefaultTextStrip: Story = {};

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

@@ -0,0 +1,41 @@
+/**
+ * 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, FoundationTheme } from '@nuskin/foundation-theme';
+const { getPaletteColor, getAppColor } = ColorUtils;
+const getIsLight = (theme: FoundationTheme.Theme) => {
+    const { palette = { primary: { main: '', contrastText: '' } } } = theme;
+    return palette.primary.main === getAppColor(theme, 'primary', 'black');
+};
+const StyledHeader = styled.header`
+    background: ${({ theme }) => (getIsLight(theme) ? '#f5f5f5' : getPaletteColor(theme, 'primary', 'contrastText'))};
+    padding: 10px;
+    a {
+        text-decoration: underline;
+        font-weight: 600;
+    }
+`;
+const NsTextStrip = (props: NsTextStripProps) => {
+    const { alignment = 'center', text, description, link, className = '' } = props;
+
+    return (
+        <StyledHeader className={`${className} justify-${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,14 @@
+import { AdditionalProps } from '../common.types';
+
+export type AlignmentType = 'start' | 'center' | 'end';
+
+export type NsTextStripProps = {
+    alignment?: AlignmentType;
+    className?: string;
+    link?: {
+        href?: string;
+        title?: string;
+    };
+    text?: string;
+    description?: string;
+} & AdditionalProps;

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,5 +1,5 @@
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
-import { NsTypographyProps } from './types';
+import { NsTypographyProps } from './types.d';
 
 const { getPaletteColor } = ColorUtils;
 

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/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';