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

package/src/common/select/stories/NsSelect.stories.tsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import NsSelect from '../NsSelect';
+import NsSelectOption from '../NsSelectOption';
+
+export default {
+    title: 'Components/NsSelect',
+    decorators: [
+        (story) => <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{story()}</div>,
+    ],
+    component: NsSelect,
+    argTypes: {
+        type: { control: 'select', options: ['unfilled', 'outlined'] },
+        disabled: { control: 'boolean' },
+        selectBorderColor: {
+            control: 'select',
+            options: ['primary', 'secondary', 'accentColorA', 'accentColorB', 'accentColorC'],
+        },
+        placeholder: { control: 'text' },
+        closeOnMouseLeave: { control: 'boolean' },
+        showListDivider: { control: 'boolean' },
+        label: { control: 'text' },
+        name: { control: 'text' },
+        menuProps:{ control: 'text' },
+        reverseArrowControls:{ control: 'boolean' },
+        validateOnBlur:{ control: 'boolean' },
+        autoComplete: { control: 'text' },
+        rules: {control: 'array'},
+    },
+    parameters: {
+        options: [
+            { label: 'Alabama', value: 'AL' },
+            { label: 'Alaska', value: 'AK' },
+            { label: 'Arizona', value: 'AZ' },
+            { label: 'Arkansas', value: 'AR' },
+            { label: 'California', value: 'CA' },
+            { label: 'Colorado', value: 'CO' },
+            { label: 'Connecticut', value: 'CT' },
+            { label: 'Delaware', value: 'DE' },
+            { label: 'District of Columbia', value: 'DC' },
+            { label: 'Florida', value: 'FL' },
+            { label: 'Georgia', value: 'GA' },
+            { label: 'Hawaii', value: 'HI' },
+            { label: 'Idaho', value: 'ID' },
+            { label: 'Illinois', value: 'IL' },
+            { label: 'Indiana', value: 'IN' },
+            { label: 'Iowa', value: 'IA' },
+            { label: 'Kansas', value: 'KA' },
+            { label: 'Kentucky', value: 'KY' },
+            { label: 'Louisiana', value: 'LA' },
+            { label: 'Maine', value: 'ME' },
+            { label: 'Maryland', value: 'MY' },
+            { label: 'Massachusetts', value: 'MA' },
+            { label: 'Michigan', value: 'MC' },
+            { label: 'Minnesota', value: 'MN' },
+            { label: 'Mississippi', value: 'MI' },
+            { label: 'Missouri', value: 'MO' },
+            { label: 'Montana', value: 'MT' },
+            { label: 'Nebraska', value: 'NE' },
+            { label: 'Nevada', value: 'NA' },
+            { label: 'New Hampshire', value: 'NH' },
+            { label: 'New Jersey', value: 'NJ' },
+            { label: 'New Mexico', value: 'NM' },
+            { label: 'New York', value: 'NY' },
+            { label: 'North Carolina', value: 'NC' },
+            { label: 'North Dakota', value: 'CD' },
+            { label: 'Ohio', value: 'OH' },
+            { label: 'Oklahoma', value: 'OK' },
+            { label: 'Oregon', value: 'OR' },
+            { label: 'Pennsylvania', value: 'PA' },
+            { label: 'Rhode Island', value: 'RI' },
+            { label: 'South Carolina', value: 'SC' },
+            { label: 'South Dakota', value: 'SD' },
+            { label: 'Tennessee', value: 'TN' },
+            { label: 'Texas', value: 'TX' },
+            { label: 'Utah', value: 'UT' },
+            { label: 'Vermont', value: 'VT' },
+            { label: 'Virginia', value: 'VA' },
+            { label: 'Washington', value: 'WA' },
+            { label: 'West Virginia', value: 'WV' },
+            { label: 'Wisconsin', value: 'WN' },
+            { label: 'Wyoming', value: 'WY' },
+        ],
+    },
+    args: {
+        type: 'outlined',
+        disabled: false,
+        selectBorderColor: 'primary',
+        closeOnMouseLeave: false,
+        showListDivider: true,
+        selectedValue: '',
+        selectedLabel: '',
+        label: 'State',
+        placeholder:'',
+        name:'',
+        menuProps:'auto',
+        reverseArrowControls: false,
+        itemText:'Text',
+        itemValue:'Value',
+        validateOnBlur: false,
+        autoComplete: '',
+        rules:[]
+    },
+} as ComponentMeta<typeof NsSelect>;
+
+export const Select: ComponentStory<typeof NsSelect> = (args, context) => {
+    const [selectedLabel, setSelectedLabel] = useState(args.selectedLabel);
+    const [selectedValue, setSelectedValue] = useState(args.selectedValue);
+
+    const options = context.parameters.options;
+    const handleSelect = (value: string) => {
+        setSelectedValue(value);
+        options.find((option: any) => {
+            if (option.value === value) {
+                setSelectedLabel(option.label);
+            }
+        });
+        console.log('Selected:', value);
+    };
+
+    return (
+        <NsSelect
+            {...args}
+            selectedValue={selectedValue}
+            selectedLabel={selectedLabel}
+            onSelect={handleSelect}
+            label={args.label}
+        >
+            {options.map((option: any) => (
+                <NsSelectOption key={option.value} value={option.value} label={option.label} />
+            ))}
+        </NsSelect>
+    );
+};

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

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { FoundationTheme } from '@nuskin/foundation-theme';
+
+export interface SelectProps {
+    selectedValue: string;
+    selectedLabel: string;
+    onSelect: (arg: string) => void; // eslint-disable-line
+    children: ReactNode;
+    disabled?: boolean;
+    type?: 'outlined' | 'unfilled';
+    placeholder?: string;
+    selectBorderColor?: FoundationTheme.PaletteColors;
+    closeOnMouseLeave?: boolean;
+    showListDivider?: boolean;
+    label?: string;
+    readOnly?: boolean;
+    name?: string; 
+    errorMessage?: string;
+    menuProps?: string | object;
+    reverseArrowControls?: boolean;
+    itemText?: string; 
+    itemValue?: string;
+    validateOnBlur?: boolean;
+    autoComplete?: string;
+    rules?: any[];
+}
+
+export interface SelectOptionProps {
+    value: string;
+    label: string;
+    selectedValue?: string;
+    onSelect?: (arg: string) => void; // eslint-disable-line
+    showListDivider?: boolean;
+}

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

@@ -1,11 +1,45 @@
 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 },
-        { id: 'age', label: 'Age', numeric: true },
+        { id: 'name', label: 'Name', numeric: false, sortable: true },
+        { id: 'age', label: 'Age', numeric: true, sortable: true },
     ];
 
     const items = [
@@ -20,7 +54,6 @@ describe('NsTable', () => {
     ];
 
     const rows = 5;
-    const isShowSelector = true;
     const rowsPerPageOptions = [5, 10, 15];
     const itemKey = 'name';
 
@@ -30,10 +63,14 @@ describe('NsTable', () => {
                 headers={headers}
                 items={items}
                 rows={rows}
-                isShowSelector={isShowSelector}
                 rowsPerPageOptions={rowsPerPageOptions}
                 itemKey={itemKey}
-                isPagination
+                isExpandableAll={true}
+                loading={true}
+                showActions={false}
+                showExpandedContent={false}
+                expandableContent={expandableContent}
+                actionClick={actionClick}
             />
         );
 
@@ -43,82 +80,72 @@ describe('NsTable', () => {
         expect(screen.getByText('Maria')).toBeInTheDocument();
         expect(screen.getByText('28')).toBeInTheDocument();
         expect(screen.getByText('31')).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Rows per page: 5' })).toBeInTheDocument();
     });
 
-    it('selects and deselects rows on click', () => {
+    it('expandable true click', () => {
         render(
             <NsTable
                 headers={headers}
                 items={items}
                 rows={rows}
-                isShowSelector={isShowSelector}
                 rowsPerPageOptions={rowsPerPageOptions}
                 itemKey={itemKey}
-                isPagination
+                isExpandableAll={true}
+                expandableContent={expandableContent}
+                actionClick={actionClick}
             />
         );
 
-        expect(screen.getByText('Kevin')).toBeInTheDocument();
-        const button = screen.getByText('Kevin');
-        fireEvent.click(button);
+        
+        expect(screen.getByTestId('table-row-0')).toBeInTheDocument();
 
-        expect(screen.getByTestId('table-row-3')).toHaveAttribute('aria-checked', 'true');
-        fireEvent.click(button);
-        expect(screen.getByTestId('table-row-3')).toHaveAttribute('aria-checked', 'false');
-    });
+        const button = screen.getByTestId('table-row-0');
 
-    it('hide selectors', () => {
-        render(
-            <NsTable
-                headers={headers}
-                items={items}
-                rows={rows}
-                isShowSelector={!isShowSelector}
-                rowsPerPageOptions={rowsPerPageOptions}
-                itemKey={itemKey}
-                isPagination
-            />
-        );
+        fireEvent.click(button);
+        expect(screen.getByText('Expandable: True')).toBeInTheDocument();
+        fireEvent.click(button);
     });
 
-    it('selects all rows', () => {
+    it('expandable false click', () => {
         render(
             <NsTable
                 headers={headers}
                 items={items}
                 rows={rows}
-                isShowSelector={isShowSelector}
                 rowsPerPageOptions={rowsPerPageOptions}
                 itemKey={itemKey}
-                isPagination
+                isExpandableAll={false}
+                expandableContent={expandableContent}
+                actionClick={actionClick}
             />
         );
 
-        expect(screen.getByTestId('header-checkbox')).toBeInTheDocument();
+        expect(screen.getByTestId('table-row-0')).toBeInTheDocument();
 
-        const button = screen.getByTestId('header-checkbox');
+        const button = screen.getByTestId('table-row-0');
 
         fireEvent.click(button);
-        expect(screen.getByTestId('table-checkbox-0')).toHaveClass('PrivateSwitchBase-input');
+        expect(screen.getByText('Expandable: True')).toBeInTheDocument();
+        fireEvent.click(button);
     });
 
-    it('selects all rows when click all values', async () => {
+    it('pagination next button click event', async () => {
         render(
             <NsTable
                 headers={headers}
                 items={items}
                 rows={rows}
-                isShowSelector={isShowSelector}
                 rowsPerPageOptions={rowsPerPageOptions}
                 itemKey={itemKey}
-                isPagination
+                isExpandableAll={true}
+                expandableContent={expandableContent}
+                actionClick={actionClick}
             />
         );
 
-        expect(screen.getByTestId('KeyboardArrowRightIcon')).toBeInTheDocument();
+        expect(screen.getByTestId('NavigateNextIcon')).toBeInTheDocument();
 
-        const button = screen.getByTestId('KeyboardArrowRightIcon');
+        const button = screen.getByTestId('NavigateNextIcon');
         fireEvent.click(button);
         expect(screen.getByText('Sandy')).toBeInTheDocument();
     });
@@ -129,10 +156,11 @@ describe('NsTable', () => {
                 headers={headers}
                 items={items}
                 rows={rows}
-                isShowSelector={isShowSelector}
                 rowsPerPageOptions={rowsPerPageOptions}
                 itemKey={itemKey}
-                isPagination
+                isExpandableAll={true}
+                expandableContent={expandableContent}
+                actionClick={actionClick}
             />
         );
 

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 { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { Item } from './types';
+import { NsIcon } from '../icon';
 
 type ComponentType = typeof NsTable;
 type Story = StoryObj<ComponentType>;
@@ -10,12 +13,13 @@ const headers = [
         label: 'Dessert (100g serving)',
         id: 'name',
         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 = [
@@ -117,7 +121,41 @@ export default {
         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 = {};

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

@@ -1,14 +1,21 @@
-import { styled } from '@nuskin/foundation-theme';
-import { getAppColor } from '@nuskin/foundation-theme/src/utils/color-utils';
+// TODO: const ariel = #f8e9f8;
+
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
+
 import { 
     Table,
     TableContainer,
     TableSortLabel,
-    TableRow
+    TableRow,
+    TableCell
 } from '@mui/material';
+import Pagination from '@mui/material/Pagination';
+import LinearProgress from '@mui/material/LinearProgress';
+
+const { color } = ColorUtils;
 
 export const StyledTableContainer= styled(TableContainer)`
-    background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
+    background-color: ${color('primary', 'white')};
 `;
 
 export const StyledTable = styled(Table)`
@@ -16,18 +23,105 @@ export const StyledTable = styled(Table)`
 `;
 
 export const StyledTableSortLabel = styled(TableSortLabel)`
-  font-size: 12px;
-  text-transform: uppercase;
-  font-weight: 700;
-  line-height: 16px;
-  letter-spacing: 0.05em;
-  color: ${({ theme }) => getAppColor(theme, 'primary', 'black')};
+    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: ${color('primary', 'black')};
+    }
+`;
+
+export const StyledTableLabel = styled.span`
+    font-size: 12px;
+    text-transform: uppercase;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0.05em;
+    color: rgba(0, 0, 0, 0.54);
+    &:hover {
+        cursor: default;
+    }
 `;
 
 export const StyledPageComponent = styled.div`
-    background-color: ${({ theme }) => getAppColor(theme, 'primary', 'white')};
+    background-color: ${color('primary', 'white')};
 `;
 
 export const StyledEmptyRow = styled(TableRow)<{emptyRows: number}>`
-  height: ${({ emptyRows }) => 53 * emptyRows}px;
+    height: ${({ emptyRows }) => 48 * emptyRows}px;
+`;
+
+// [Todo-Arun] - Move f8e9f8 to custom color palette
+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: ${color('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: ${color('primary', 'black')};
+    }
+    & .MuiPaginationItem-root.Mui-selected {
+        background-color: ${color('primary', 'black')};
+        color: ${color('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;
+  }
 `;