@nuskin/foundation-ui-components 1.33.0-1253-feature.3 → 2.0.0

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

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

@@ -1,156 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
-import { NsIcon } from '../icon';
-import NsTable from './NsTable';
-import { Item } from './types';
-
-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): ReactElement => {
-            return (
-                <div key={index}>
-                    <p>
-                        Data: {selectedItem.name} , {selectedItem.calories}
-                    </p>
-                    <p>Index: {index}</p>
-                    <p>Expandable: True</p>
-                </div>
-            );
-        },
-        actionClick: (row: Item): ReactElement => {
-            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

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

@@ -1,150 +0,0 @@
-import React, {
-    ReactElement,
-    useEffect,
-    useState,
-} from 'react';
-
-import {
-    TableBody,
-    TableCell,
-    TableRow,
-} from '@mui/material';
-import Grid from '@mui/material/Grid';
-
-import {
-    getComparator,
-    stableSort,
-} from './helper';
-import ExpandableRow from './NsExpandableRow';
-import {
-    StyledEmptyRow,
-    StyledLinearProgress,
-    StyledProgressCell,
-    StyledTable,
-    StyledTableContainer,
-} from './NsTable.styled';
-import NsTableHeader from './NsTableHeader';
-import NsTablePagination from './NsTablePagination';
-import type {
-    Item,
-    NsTableProps,
-    OrderType,
-} from './types';
-
-export default function NsTable({
-    headers = [],
-    items = [],
-    rows,
-    rowsPerPageOptions,
-    itemKey,
-    expandableContent,
-    actionClick,
-    showActions = true,
-    showExpandedContent = true,
-    loading = false,
-    isExpandableAll = false,
-}: NsTableProps): ReactElement {
-    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

@@ -1,54 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import {
-    Box,
-    TableCell,
-    TableHead,
-    TableRow,
-} from '@mui/material';
-import { visuallyHidden } from '@mui/utils';
-
-import {
-    StyledTableLabel,
-    StyledTableSortLabel,
-} from './NsTable.styled';
-import type {
-    Item,
-    NsTableHeaderProps,
-} from './types';
-
-export default function NsTableHeader(props: NsTableHeaderProps): ReactElement {
-    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

@@ -1,24 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { StyledPagination } from './NsTable.styled';
-import type { NsTablePaginationProps } from './types';
-
-export default function NsTablePagination(props: NsTablePaginationProps): ReactElement {
-    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"
-        />
-    );
-}