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

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

@@ -0,0 +1,174 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@/test-utils/index';
+import NsTable from './NsTable';
+import { Item } from './types';
+import { NsIcon } from '../icon';
+
+const expandableContent = (selectedItem: Item, index: number) => {
+    return (
+        <div key={index}>
+            <p>
+                Data: {selectedItem.name} , {selectedItem.calories}
+            </p>
+            <p>
+                Index: {index}
+            </p>
+            <p>
+                Expandable: True
+            </p>
+        </div>
+    )
+}
+
+const actionClick = (row: Item) => {
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation();
+        console.log(row)
+    }
+
+    return (
+        <button onClick={handleClick}>
+            <NsIcon
+                name='cart'
+                size='medium'
+            />
+        </button>
+    )
+}
+
+describe('NsTable', () => {
+    const headers = [
+        { id: 'name', label: 'Name', numeric: false, sortable: true },
+        { id: 'age', label: 'Age', numeric: true, sortable: true },
+    ];
+
+    const items = [
+        { name: 'John', age: 26 },
+        { name: 'Jane', age: 32 },
+        { name: 'Maria', age: 28 },
+        { name: 'Kevin', age: 31 },
+        { name: 'Suzan', age: 25 },
+        { name: 'Dan', age: 30 },
+        { name: 'Micheal', age: 39 },
+        { name: 'Sandy', age: 39 },
+    ];
+
+    const rows = 5;
+    const rowsPerPageOptions = [5, 10, 15];
+    const itemKey = 'name';
+
+    it('renders table with correct data', () => {
+        render(
+            <NsTable
+                headers={headers}
+                items={items}
+                rows={rows}
+                rowsPerPageOptions={rowsPerPageOptions}
+                itemKey={itemKey}
+                isExpandableAll={true}
+                loading={true}
+                showActions={false}
+                showExpandedContent={false}
+                expandableContent={expandableContent}
+                actionClick={actionClick}
+            />
+        );
+
+        expect(screen.getByText('Name')).toBeInTheDocument();
+        expect(screen.getByText('Age')).toBeInTheDocument();
+        expect(screen.getByText('Kevin')).toBeInTheDocument();
+        expect(screen.getByText('Maria')).toBeInTheDocument();
+        expect(screen.getByText('28')).toBeInTheDocument();
+        expect(screen.getByText('31')).toBeInTheDocument();
+    });
+
+    it('expandable true click', () => {
+        render(
+            <NsTable
+                headers={headers}
+                items={items}
+                rows={rows}
+                rowsPerPageOptions={rowsPerPageOptions}
+                itemKey={itemKey}
+                isExpandableAll={true}
+                expandableContent={expandableContent}
+                actionClick={actionClick}
+            />
+        );
+
+        
+        expect(screen.getByTestId('table-row-0')).toBeInTheDocument();
+
+        const button = screen.getByTestId('table-row-0');
+
+        fireEvent.click(button);
+        expect(screen.getByText('Expandable: True')).toBeInTheDocument();
+        fireEvent.click(button);
+    });
+
+    it('expandable false click', () => {
+        render(
+            <NsTable
+                headers={headers}
+                items={items}
+                rows={rows}
+                rowsPerPageOptions={rowsPerPageOptions}
+                itemKey={itemKey}
+                isExpandableAll={false}
+                expandableContent={expandableContent}
+                actionClick={actionClick}
+            />
+        );
+
+        expect(screen.getByTestId('table-row-0')).toBeInTheDocument();
+
+        const button = screen.getByTestId('table-row-0');
+
+        fireEvent.click(button);
+        expect(screen.getByText('Expandable: True')).toBeInTheDocument();
+        fireEvent.click(button);
+    });
+
+    it('pagination next button click event', async () => {
+        render(
+            <NsTable
+                headers={headers}
+                items={items}
+                rows={rows}
+                rowsPerPageOptions={rowsPerPageOptions}
+                itemKey={itemKey}
+                isExpandableAll={true}
+                expandableContent={expandableContent}
+                actionClick={actionClick}
+            />
+        );
+
+        expect(screen.getByTestId('NavigateNextIcon')).toBeInTheDocument();
+
+        const button = screen.getByTestId('NavigateNextIcon');
+        fireEvent.click(button);
+        expect(screen.getByText('Sandy')).toBeInTheDocument();
+    });
+
+    it('sort rows via age', () => {
+        render(
+            <NsTable
+                headers={headers}
+                items={items}
+                rows={rows}
+                rowsPerPageOptions={rowsPerPageOptions}
+                itemKey={itemKey}
+                isExpandableAll={true}
+                expandableContent={expandableContent}
+                actionClick={actionClick}
+            />
+        );
+
+        expect(screen.getByText('Age')).toBeInTheDocument();
+        const button = screen.getByText('Age');
+        fireEvent.click(button);
+
+        expect(screen.getByText('John')).toBeInTheDocument();
+        fireEvent.click(button);
+    });
+});

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

@@ -0,0 +1,161 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react';
+import NsTable from './NsTable';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { Item } from './types';
+import { NsIcon } from '../icon';
+
+type ComponentType = typeof NsTable;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+const headers = [
+    {
+        label: 'Dessert (100g serving)',
+        id: 'name',
+        numeric: false,
+        sortable: false
+    },
+    { label: 'Calories', id: 'calories' , numeric: true, sortable: true},
+    { label: 'Fat (g)', id: 'fat', numeric: true, sortable: true },
+    { label: 'Carbs (g)', id: 'carbs', numeric: true, sortable: true },
+    { label: 'Protein (g)', id: 'protein', numeric: true, sortable: true },
+    { label: 'Iron (%)', id: 'iron', numeric: false, sortable: true },
+];
+
+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/Data Display/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],
+        isExpandableAll: true,
+        showActions: true,
+        showExpandedContent: true,
+        loading: false,
+        expandableContent: (selectedItem: Item, index: number) => {
+            return (
+                <div key={index}>
+                    <p>
+                        Data: {selectedItem.name} , {selectedItem.calories}
+                    </p>
+                    <p>
+                        Index: {index}
+                    </p>
+                    <p>
+                        Expandable: True
+                    </p>
+                </div>
+            )
+        },
+        actionClick: (row: Item) => {
+            const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+                event.stopPropagation();
+                console.log(row)
+            }
+
+            return (
+                <button onClick={handleClick}>
+                    <NsIcon
+                        name='cart'
+                        size='medium'
+                    />
+                </button>
+            )
+        }
+    }
+} as MetaStory;
+
+export const NasTable: Story = {};

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