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

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

@@ -1,6 +1,9 @@
+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>;
@@ -9,15 +12,16 @@ const headers = [
     {
         label: 'Dessert (100g serving)',
         id: 'name',
-        numeric: false
+        numeric: false,
+        sortable: 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 },
+    { 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',
@@ -106,9 +110,9 @@ export default {
     component: NsTable,
     decorators: [withCenterDecorator],
     argTypes: {
-        rows: { 
+        rows: {
             control: 'select',
-            options: [5, 10, 25]
+            options: [5, 10, 25],
         },
     },
     args: {
@@ -116,7 +120,41 @@ export default {
         items: items,
         rows: 5,
         itemKey: 'name',
-        rowsPerPageOptions: [5, 10, 25]
+        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;
 

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

@@ -1,11 +1,16 @@
+// TODO: const ariel = #f8e9f8;
+
 import { styled } from '@nuskin/foundation-theme';
 import { getAppColor } from '@nuskin/foundation-theme/src/utils/color-utils';
 import { 
     Table,
     TableContainer,
     TableSortLabel,
-    TableRow
+    TableRow,
+    TableCell
 } from '@mui/material';
+import Pagination from '@mui/material/Pagination';
+import LinearProgress from '@mui/material/LinearProgress';
 
 export const StyledTableContainer= styled(TableContainer)`
     background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
@@ -16,18 +21,104 @@ export const StyledTable = styled(Table)`
 `;
 
 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: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+  }
+  `;
+
+export const StyledTableLabel = styled.span`
   font-size: 12px;
   text-transform: uppercase;
   font-weight: 700;
   line-height: 16px;
   letter-spacing: 0.05em;
-  color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+  color: rgba(0, 0, 0, 0.54);
+  &:hover {
+    cursor: default;
+  }
 `;
 
 export const StyledPageComponent = styled.div`
-    background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
+  background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
 `;
 
 export const StyledEmptyRow = styled(TableRow)<{emptyRows: number}>`
-  height: ${({ emptyRows }) => 53 * emptyRows}px;
+  height: ${({ emptyRows }) => 48 * emptyRows}px;
+`;
+
+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: ${({ theme }) => getAppColor(theme, '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: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+  }
+  & .MuiPaginationItem-root.Mui-selected {
+    background-color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+    color: ${({ theme }) => getAppColor(theme, '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,24 +1,43 @@
 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 { 
+    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 NsCheckBox from '../checkbox/NsCheckbox';
-import NsTablePagination from './NsTablePagination';
+import NsTablePagination from './NsTablePagination'
+import ExpandableRow from './NsExpandableRow'
+import Grid from '@mui/material/Grid';
 
 export default function NsTable({
     headers = [],
     items = [],
     rows,
-    isShowSelector = true,
-    isPagination = false,
     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 [selected, setSelected] = useState<readonly (string | number)[]>([]);
+    const [expandList, setExpandList] = useState<number[]>([]);
     const [page, setPage] = useState(0);
     const [rowsPerPage, setRowsPerPage] = useState(rows);
     const [itemKeyList, setItemKeyList] = useState<string[]>([]);
@@ -38,44 +57,28 @@ export default function NsTable({
         setOrderBy(property);
     };
 
-    const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
-        if (event.target.checked) {
-            const newSelected = items.map((n) => n[itemKey as string]);
-            setSelected(newSelected);
-            return;
+    const handleClick = (index: number) => {
+        if(isExpandableAll) {
+            let newList = expandList;
+            if(newList.includes(index)) {
+                let num = newList.indexOf(index);
+                if (num > -1) newList.splice(num, 1);
+            } else {
+                newList.push(index);
+            }
+            setExpandList([...newList]);
+        } else {
+            if(expandList.includes(index)) setExpandList([])
+            else setExpandList([index])
         }
-        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 handleChangePage = (newPage: number) => {
+        setPage(newPage-1);
     };
-
-    const isSelected = (name: string | number) => selected.indexOf(name) !== -1;
-
-    const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - items.length) : 0;
+    
+    const emptyRows =
+        page > 0 ? Math.max(0, (1 + page) * rowsPerPage - items.length) : 0;
 
     const visibleRows = React.useMemo(
         () =>
@@ -92,50 +95,39 @@ export default function NsTable({
                 <StyledTable>
                     <NsTableHeader
                         headCells={headers}
-                        numSelected={selected.length}
                         order={order}
                         orderBy={orderBy as string}
-                        onSelectAllClick={handleSelectAllClick}
                         onRequestSort={handleRequestSort}
                         rowCount={items.length}
-                        isShowSelector={isShowSelector}
                     />
                     <TableBody>
+                        {
+                            loading ? (
+                                <TableRow>
+                                    <StyledProgressCell colSpan={itemKeyList.length}>
+                                        <Grid container>
+                                            <Grid item xs={12}>
+                                                <StyledLinearProgress />
+                                            </Grid>
+                                        </Grid>
+                                    </StyledProgressCell>
+                                </TableRow>
+                            ) : null
+                        }
                         {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>
+                                <ExpandableRow
+                                    key={index}
+                                    expandableContent={expandableContent}
+                                    isExpand={expandList.includes(index)}
+                                    handleClick={handleClick}
+                                    row={row}
+                                    index={index}
+                                    itemKeyList={itemKeyList}
+                                    actionClick={actionClick}
+                                    showActions={showActions}
+                                    showExpandedContent={showExpandedContent}
+                                />
                             );
                         })}
                         {emptyRows > 0 ? (
@@ -146,16 +138,13 @@ export default function NsTable({
                     </TableBody>
                 </StyledTable>
             </StyledTableContainer>
-            {isPagination ? (
-                <NsTablePagination
-                    rowsPerPageOptions={rowsPerPageOptions}
-                    count={items.length}
-                    rowsPerPage={rowsPerPage}
-                    page={page}
-                    onPageChange={handleChangePage}
-                    onRowsPerPageChange={handleChangeRowsPerPage}
-                />
-            ) : null}
+            <NsTablePagination
+                rowsPerPageOptions={rowsPerPageOptions}
+                count={items.length}
+                rowsPerPage={rowsPerPage}
+                page={page+1}
+                onPageChange={handleChangePage}
+            />
         </div>
     );
 }

package/src/common/table/NsTableHeader.tsx

@@ -1,47 +1,61 @@
-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 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';
-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);
-    };
-
+    const {
+        order,
+        orderBy,
+        headCells,
+        onRequestSort,
+    } = 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>
-                ))}
+                {
+                    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,20 +1,28 @@
-import type { NsTablePaginationProps } from './types.d';
-import React from 'react';
-import { StyledPageComponent } from './NsTable.styled';
-import { TablePagination } from '@mui/material';
+import type { NsTablePaginationProps } from './types'
+import React from 'react'
+import { StyledPagination } from './NsTable.styled'
 
 export default function NsTablePagination(props: NsTablePaginationProps) {
-    const { rowsPerPageOptions, count, rowsPerPage, page, onPageChange, onRowsPerPageChange } = props;
+    const {
+        count,
+        rowsPerPage,
+        page,
+        onPageChange,
+    } = props;
+
+    const totalPage = Math.ceil(count / rowsPerPage);
+    const handleChange = (event: React.ChangeEvent<unknown>, value: number) => {
+        onPageChange(value);
+    };
 
     return (
-        <TablePagination
-            rowsPerPageOptions={rowsPerPageOptions}
-            component={StyledPageComponent}
-            count={count}
-            rowsPerPage={rowsPerPage}
-            page={page}
-            onPageChange={onPageChange}
-            onRowsPerPageChange={onRowsPerPageChange}
+        <StyledPagination
+            count={totalPage}
+            page={page} 
+            variant="outlined"
+            onChange={handleChange}
+            shape="rounded"
+            color="primary"
         />
     );
 }

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

@@ -5,8 +5,9 @@ export interface Header {
     label: string;
     id: string | number;
     numeric: boolean;
+    sortable?: boolean;
 }
-  
+
 export interface Item {
     [key: string]: string | number;
 }
@@ -16,22 +17,23 @@ export interface NsTableProps {
     items: Item[];
     rows: number;
     itemKey: string;
-    isShowSelector: boolean;
     rowsPerPageOptions: number[];
-    isPagination?: boolean;
+    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 {
-    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 {
@@ -39,6 +41,17 @@ export interface NsTablePaginationProps {
     count: number;
     rowsPerPage: number;
     page: number,
-    onPageChange: (unknown, number) => void;
-    onRowsPerPageChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    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.stories.tsx

@@ -5,7 +5,7 @@
 
 import type { StoryObj, Meta } from '@storybook/react';
 import { NsTextStrip } from '@/common/';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsTextStrip;
 type Story = StoryObj<ComponentType>;
@@ -16,8 +16,10 @@ export default {
     component: NsTextStrip,
     decorators: [withCenterDecorator],
     argTypes: {
-        children: {
-            control: 'text', // use the text control to edit children prop
+        alignment: {
+            control: 'select',
+            options: ['center', 'start', 'end'],
+            description: 'specify whether items should be in center, start or end',
         },
     },
     args: {
@@ -25,7 +27,6 @@ export default {
         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;