@nuskin/foundation-ui-components 1.0.0-develop.3 → 1.0.0-develop.5

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.tsx

@@ -8,14 +8,16 @@ 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');
-};
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
+
+const { isDarkMode, paletteColor, color } = ColorUtils;
+
 const StyledHeader = styled.header`
-    background: ${({ theme }) => (getIsLight(theme) ? '#f5f5f5' : getPaletteColor(theme, 'primary', 'contrastText'))};
+    background: ${(props) => (
+        !isDarkMode(props)
+            ? color('primary', 'gray')
+            : paletteColor('primary', 'contrastText')
+    )};
     display: flex;
     flex-direction: column;
     min-height: 60px;
@@ -25,6 +27,7 @@ const StyledHeader = styled.header`
         font-weight: 600;
     }
 `;
+
 const NsTextStrip = (props: NsTextStripProps) => {
     const { alignment = 'center', text, description, link, className = '' } = props;
 

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

@@ -1,7 +1,7 @@
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
 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/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]*$/;