@nuskin/foundation-ui-components 1.0.2 → 1.1.1

package/src/common/table/NsTable.tsx

@@ -1,25 +1,17 @@
 import React, { useState, useEffect } from 'react';
-import { 
-    TableBody,
-    TableCell,
-    TableRow
-} from '@mui/material';
+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'
+    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 NsTablePagination from './NsTablePagination';
+import ExpandableRow from './NsExpandableRow';
 import Grid from '@mui/material/Grid';
 
 export default function NsTable({
@@ -37,13 +29,11 @@ export default function NsTable({
 }: NsTableProps) {
     const [order, setOrder] = useState<OrderType>('asc');
     const [orderBy, setOrderBy] = useState<keyof Item>(itemKey);
-    const [expandList, setExpandList] = useState<number[]>([]);
+    const [expandMap, setExpandMap] = useState<{ [key: number]: boolean }>({});
     const [page, setPage] = useState(0);
     const [rowsPerPage, setRowsPerPage] = useState(rows);
-    const [itemKeyList, setItemKeyList] = useState<string[]>([]);
-
-    useEffect(() => {
-        if (items.length) setItemKeyList(Object.keys(items[0]));
+    const itemKeyList = React.useMemo(() => {
+        return items.length ? Object.keys(items[0]) : [];
     }, [items]);
 
     useEffect(() => {
@@ -58,27 +48,18 @@ export default function NsTable({
     };
 
     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]);
+        if (isExpandableAll) {
+            setExpandMap((prevState) => ({ ...prevState, [index]: !prevState[index] }));
         } else {
-            if(expandList.includes(index)) setExpandList([])
-            else setExpandList([index])
+            setExpandMap({ [index]: !expandMap[index] });
         }
     };
 
     const handleChangePage = (newPage: number) => {
-        setPage(newPage-1);
+        setPage(newPage - 1);
     };
-    
-    const emptyRows =
-        page > 0 ? Math.max(0, (1 + page) * rowsPerPage - items.length) : 0;
+
+    const emptyRows = getEmptyRows();
 
     const visibleRows = React.useMemo(
         () =>
@@ -101,25 +82,23 @@ export default function NsTable({
                         rowCount={items.length}
                     />
                     <TableBody>
-                        {
-                            loading ? (
-                                <TableRow>
-                                    <StyledProgressCell colSpan={itemKeyList.length}>
-                                        <Grid container>
-                                            <Grid item xs={12}>
-                                                <StyledLinearProgress />
-                                            </Grid>
+                        {loading ? (
+                            <TableRow>
+                                <StyledProgressCell colSpan={itemKeyList.length}>
+                                    <Grid container>
+                                        <Grid item xs={12}>
+                                            <StyledLinearProgress />
                                         </Grid>
-                                    </StyledProgressCell>
-                                </TableRow>
-                            ) : null
-                        }
+                                    </Grid>
+                                </StyledProgressCell>
+                            </TableRow>
+                        ) : null}
                         {visibleRows.map((row, index) => {
                             return (
                                 <ExpandableRow
                                     key={index}
                                     expandableContent={expandableContent}
-                                    isExpand={expandList.includes(index)}
+                                    isExpand={expandMap[index]}
                                     handleClick={handleClick}
                                     row={row}
                                     index={index}
@@ -142,9 +121,13 @@ export default function NsTable({
                 rowsPerPageOptions={rowsPerPageOptions}
                 count={items.length}
                 rowsPerPage={rowsPerPage}
-                page={page+1}
+                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,61 +1,40 @@
-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 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);};
-  
+    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}
+                {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)}
                             >
-                                <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>
-                            )
-                    ))}
+                                {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/text-strip/NsTextStrip.stories.tsx

@@ -12,7 +12,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsTextStrip',
+    title: 'Components/Data Display/NsTextStrip',
     component: NsTextStrip,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/typography/NsTypography.stories.tsx

@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsTypography',
+    title: 'Components/Data Display/NsTypography',
     component: NsTypography,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/util.ts

@@ -0,0 +1 @@
+export const skipDarkModeEnabled = (key: string) => key !== 'darkModeEnabled';

package/src/common/utility/Show.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren, ReactElement } from 'react';
+
+type ShowType = PropsWithChildren & {
+    when?: boolean;
+    elseContent?: ReactElement;
+};
+const Show = ({ when, children, elseContent }: ShowType): ReactElement => {
+    if (when) {
+        return <>{children}</>;
+    }
+    return <>{elseContent}</>;
+};
+export default Show;

package/src/common/utility/index.ts

@@ -0,0 +1 @@
+export { default as Show } from './Show';

package/src/common/videos/NsVideo.stories.tsx

@@ -14,7 +14,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsVideo',
+    title: 'Components/Data Display/NsVideo',
     component: NsVideo,
     decorators: [withCenterDecorator],
     argTypes: {

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

@@ -1,4 +1,4 @@
-import { AdditionalProps } from '@/common/common.types';
+import { AdditionalProps } from '../common.types';
 
 export type NsVideoProps = {
     src: string;