@nuskin/foundation-ui-components 1.0.0-develop.1 → 1.0.0-develop.11

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { TableRow } from '@mui/material';
+import {
+    StyledTableRow,
+    StyledTableLastCell,
+    StyledExpandCell,
+    StyledOriginalTableCell
+} from './NsTable.styled'
+import type {
+    NsTableRowProps
+} from './types'
+import Box from '@mui/material/Box';
+import Collapse from '@mui/material/Collapse';
+
+export default function ExpandableRow({
+    expandableContent,
+    isExpand,
+    handleClick,
+    row,
+    itemKeyList,
+    index,
+    showActions,
+    showExpandedContent,
+    actionClick
+}: NsTableRowProps) {
+    const tableRowTestId = `table-row-${index}`;
+
+    return (
+        <React.Fragment>
+            <StyledTableRow
+                hover
+                onClick={() => handleClick(index)}
+                tabIndex={-1}
+                key={index}
+                className='cursor-pointer'
+                data-testid={tableRowTestId}
+            >
+                {
+                    itemKeyList.map((id, i) => {
+                        return ((i === itemKeyList.length - 1) && showActions) ? (
+                            <StyledTableLastCell align="justify" key={id}>
+                                <span>{row[id]}</span>
+                                <span className='action'>{actionClick(row)}</span>
+                            </StyledTableLastCell>
+                        ) : (
+                            <StyledOriginalTableCell align="left" key={id}>{row[id]}</StyledOriginalTableCell>
+                        )
+                    })
+                }
+            </StyledTableRow>
+            {
+                showExpandedContent ? (
+                    <TableRow>
+                        <StyledExpandCell colSpan={itemKeyList.length} className={!isExpand ? 'remove' : ''}>
+                            <Collapse in={isExpand} unmountOnExit>
+                                <Box className='m-px'>
+                                    {
+                                        expandableContent(row, index)
+                                    }
+                                </Box>
+                            </Collapse>
+                        </StyledExpandCell>
+                    </TableRow>
+                ) : null
+            }
+        </React.Fragment>
+    )
+}

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

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

@@ -0,0 +1,161 @@
+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>;
+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) => {
+            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;
+
+export const NasTable: Story = {};