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

package/src/common/spinner/icons/Spinner.tsx

@@ -0,0 +1,161 @@
+/* eslint-disable max-len */
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+const SpinnerIcon = (props: SvgIconProps) => {
+    return (
+        <SvgIcon
+            id="ns-spinner-1"
+            viewBox="0 0 304 304"
+            shapeRendering="geometricPrecision"
+            textRendering="geometricPrecision"
+            {...props}
+        >
+            <g id="ns-spinner-2">
+                <g id="ns-spinner-3" transform="matrix(1 0 0 1 -34 -34)">
+                    <circle
+                        id="ns-spinner-4"
+                        r="146.500000"
+                        transform="matrix(0.26045430858251 0.75641493450408 -0.75641493450408 0.26045430858251 185.99999999964032 186.00000000212532)"
+                        fill="none"
+                        fillRule="evenodd"
+                        stroke="rgb(247,247,247)"
+                        strokeWidth="10"
+                        strokeLinecap="round"
+                    />
+                </g>
+            </g>
+            <g
+                id="ns-spinner-5"
+                transform="matrix(0.56568542494924 0.56568542494924 -0.56568542494924 0.56568542494924 37.61439805970794 61.68043135401598)"
+            >
+                <g id="ns-spinner-6" transform="matrix(1 0 0 1 -53 -239)">
+                    <g id="ns-spinner-7_tr" transform="translate(232.873721,220.430229) rotate(71.000016)">
+                        <path
+                            id="ns-spinner-7"
+                            d="M207.214206,353.714206C243.362404,353.714206,276.452762,340.622041,302.002226,318.920768C333.639565,292.048559,353.714206,251.975724,353.714206,207.214206C353.714206,126.304490,288.123922,60.714206,207.214206,60.714206C126.304490,60.714206,60.714206,126.304490,60.714206,207.214206C60.714206,237.178438,69.710103,265.041566,85.148469,288.250162C111.396930,327.709644,156.268722,353.714206,207.214206,353.714206Z"
+                            transform="scale(1,1) translate(-207.214206,-207.214206)"
+                            opacity="0"
+                            fill="none"
+                            fill-rule="evenodd"
+                            stroke="rgb(249,0,156)"
+                            strokeWidth="30"
+                            strokeLinecap="round"
+                            strokeDasharray="200 1000"
+                        />
+                    </g>
+                    <g id="ns-spinner-8_tr" transform="translate(232.873721,220.430229) rotate(71.000016)">
+                        <path
+                            id="ns-spinner-8"
+                            d="M207.214206,353.714206C243.362404,353.714206,276.452762,340.622041,302.002226,318.920768C333.639565,292.048559,353.714206,251.975724,353.714206,207.214206C353.714206,126.304490,288.123922,60.714206,207.214206,60.714206C126.304490,60.714206,60.714206,126.304490,60.714206,207.214206C60.714206,237.178438,69.710103,265.041566,85.148469,288.250162C111.396930,327.709644,156.268722,353.714206,207.214206,353.714206Z"
+                            transform="scale(1,1) translate(-207.214206,-207.214206)"
+                            opacity="0"
+                            fill="none"
+                            fill-rule="evenodd"
+                            stroke="rgb(78,0,160)"
+                            strokeWidth="30"
+                            strokeLinecap="round"
+                            strokeDasharray="200 1000"
+                        />
+                    </g>
+                    <g id="ns-spinner-9_tr" transform="translate(232.873721,220.430229) rotate(71.000016)">
+                        <path
+                            id="ns-spinner-9"
+                            d="M207.214206,353.714206C243.362404,353.714206,276.452762,340.622041,302.002226,318.920768C333.639565,292.048559,353.714206,251.975724,353.714206,207.214206C353.714206,126.304490,288.123922,60.714206,207.214206,60.714206C126.304490,60.714206,60.714206,126.304490,60.714206,207.214206C60.714206,237.178438,69.710103,265.041566,85.148469,288.250162C111.396930,327.709644,156.268722,353.714206,207.214206,353.714206Z"
+                            transform="scale(1,1) translate(-207.214206,-207.214206)"
+                            opacity="0"
+                            fill="none"
+                            fill-rule="evenodd"
+                            stroke="rgb(255,215,0)"
+                            strokeWidth="30"
+                            strokeLinecap="round"
+                            strokeDasharray="200 1000"
+                        />
+                    </g>
+                    <g id="ns-spinner-10_tr" transform="translate(232.873721,220.430229) rotate(71.000016)">
+                        <path
+                            id="ns-spinner-10"
+                            d="M207.214206,353.714206C243.362404,353.714206,276.452762,340.622041,302.002226,318.920768C333.639565,292.048559,353.714206,251.975724,353.714206,207.214206C353.714206,126.304490,288.123922,60.714206,207.214206,60.714206C126.304490,60.714206,60.714206,126.304490,60.714206,207.214206C60.714206,237.178438,69.710103,265.041566,85.148469,288.250162C111.396930,327.709644,156.268722,353.714206,207.214206,353.714206Z"
+                            transform="scale(1,1) translate(-207.214206,-207.214206)"
+                            opacity="0"
+                            fill="none"
+                            fill-rule="evenodd"
+                            stroke="rgb(190,217,0)"
+                            strokeWidth="30"
+                            strokeLinecap="round"
+                            strokeDasharray="200 1000"
+                        />
+                    </g>
+                    <g id="ns-spinner-11_tr" transform="translate(232.873721,220.430229) rotate(71.000016)">
+                        <path
+                            id="ns-spinner-11"
+                            d="M207.214206,353.714206C243.362404,353.714206,276.452762,340.622041,302.002226,318.920768C333.639565,292.048559,353.714206,251.975724,353.714206,207.214206C353.714206,126.304490,288.123922,60.714206,207.214206,60.714206C126.304490,60.714206,60.714206,126.304490,60.714206,207.214206C60.714206,237.178438,69.710103,265.041566,85.148469,288.250162C111.396930,327.709644,156.268722,353.714206,207.214206,353.714206Z"
+                            transform="scale(1,1) translate(-207.214206,-207.214206)"
+                            opacity="0"
+                            fill="none"
+                            fill-rule="evenodd"
+                            stroke="rgb(190,217,0)"
+                            strokeWidth="30"
+                            strokeLinecap="round"
+                            strokeDasharray="200 1000"
+                        />
+                    </g>
+                    <g id="ns-spinner-12_tr" transform="translate(232.873721,220.430229) rotate(71.000016)">
+                        <path
+                            id="ns-spinner-12"
+                            d="M207.214206,353.714206C243.362404,353.714206,276.452762,340.622041,302.002226,318.920768C333.639565,292.048559,353.714206,251.975724,353.714206,207.214206C353.714206,126.304490,288.123922,60.714206,207.214206,60.714206C126.304490,60.714206,60.714206,126.304490,60.714206,207.214206C60.714206,237.178438,69.710103,265.041566,85.148469,288.250162C111.396930,327.709644,156.268722,353.714206,207.214206,353.714206Z"
+                            transform="scale(1,1) translate(-207.214206,-207.214206)"
+                            opacity="0"
+                            fill="none"
+                            fill-rule="evenodd"
+                            stroke="rgb(249,0,156)"
+                            strokeWidth="30"
+                            strokeLinecap="round"
+                            strokeDasharray="200 1000"
+                        />
+                    </g>
+                    <g id="ns-spinner-13_tr" transform="translate(232.873721,220.430229) rotate(71.000016)">
+                        <path
+                            id="ns-spinner-13"
+                            d="M207.214206,353.714206C243.362404,353.714206,276.452762,340.622041,302.002226,318.920768C333.639565,292.048559,353.714206,251.975724,353.714206,207.214206C353.714206,126.304490,288.123922,60.714206,207.214206,60.714206C126.304490,60.714206,60.714206,126.304490,60.714206,207.214206C60.714206,237.178438,69.710103,265.041566,85.148469,288.250162C111.396930,327.709644,156.268722,353.714206,207.214206,353.714206Z"
+                            transform="scale(1,1) translate(-207.214206,-207.214206)"
+                            fill="none"
+                            fill-rule="evenodd"
+                            stroke="rgb(255,215,0)"
+                            strokeWidth="30"
+                            strokeLinecap="round"
+                            strokeDasharray="200 1000"
+                        />
+                    </g>
+                    <g id="ns-spinner-14_tr" transform="translate(232.873721,220.430229) rotate(71.000016)">
+                        <path
+                            id="ns-spinner-14"
+                            d="M207.214206,353.714206C243.362404,353.714206,276.452762,340.622041,302.002226,318.920768C333.639565,292.048559,353.714206,251.975724,353.714206,207.214206C353.714206,126.304490,288.123922,60.714206,207.214206,60.714206C126.304490,60.714206,60.714206,126.304490,60.714206,207.214206C60.714206,237.178438,69.710103,265.041566,85.148469,288.250162C111.396930,327.709644,156.268722,353.714206,207.214206,353.714206Z"
+                            transform="scale(1,1) translate(-207.214206,-207.214206)"
+                            fill="none"
+                            fill-rule="evenodd"
+                            stroke="rgb(255,78,0)"
+                            strokeWidth="30"
+                            strokeLinecap="round"
+                            strokeDasharray="200 1000"
+                        />
+                    </g>
+                    <g id="ns-spinner-15_tr" transform="translate(232.873721,220.430229) rotate(71.000016)">
+                        <path
+                            id="ns-spinner-15"
+                            d="M207.214206,353.714206C243.362404,353.714206,276.452762,340.622041,302.002226,318.920768C333.639565,292.048559,353.714206,251.975724,353.714206,207.214206C353.714206,126.304490,288.123922,60.714206,207.214206,60.714206C126.304490,60.714206,60.714206,126.304490,60.714206,207.214206C60.714206,237.178438,69.710103,265.041566,85.148469,288.250162C111.396930,327.709644,156.268722,353.714206,207.214206,353.714206Z"
+                            transform="scale(1,1) translate(-207.214206,-207.214206)"
+                            fill="none"
+                            fill-rule="evenodd"
+                            stroke="rgb(0,183,231)"
+                            strokeWidth="30"
+                            strokeLinecap="round"
+                            strokeDasharray="200 1000"
+                        />
+                    </g>
+                </g>
+            </g>
+        </SvgIcon>
+    );
+};
+
+export default SpinnerIcon;

package/src/common/spinner/index.ts

@@ -0,0 +1,2 @@
+export { default as NsSpinner } from './NsSpinner';
+export type { NsSpinnerProps } from './types';

package/src/common/spinner/types.ts

@@ -0,0 +1,5 @@
+import {AdditionalProps} from '../common.types';
+
+export type NsSpinnerProps = {
+    size?: number;
+} & Omit<AdditionalProps, 'darkModeEnabled'>;

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

@@ -106,7 +106,7 @@ const items = [
 ];
 
 export default {
-    title: 'Components/NsTable',
+    title: 'Components/Data Display/NsTable',
     component: NsTable,
     decorators: [withCenterDecorator],
     argTypes: {

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