@nuskin/foundation-ui-components 1.0.0-cft-35.13 → 1.0.0-develop.10

package/src/common/spinner/NsSpinner.styled.tsx

@@ -0,0 +1,344 @@
+import { styled } from '@nuskin/foundation-theme';
+
+export const SpinnerContainer = styled.div<{ size: number }>`
+    width: ${(prop) => prop.size}px;
+    height: ${(prop) => prop.size}px;
+    svg {
+        width: ${(prop) => prop.size}px;
+        height: ${(prop) => prop.size}px;
+    }
+    #ns-spinner-7_tr {
+        animation: ns-spinner-7_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-7_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        80% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.495, 0.49, 0.82, 0.11);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-7 {
+        animation: ns-spinner-7_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-7_c_o {
+        0% {
+            opacity: 0;
+        }
+        77.500000% {
+            opacity: 0;
+        }
+        80% {
+            opacity: 1;
+        }
+        97.500000% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-8_tr {
+        animation: ns-spinner-8_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-8_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        77.500000% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.1, 0.365, 0.82, 0.11);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-8 {
+        animation: ns-spinner-8_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-8_c_o {
+        0% {
+            opacity: 0;
+        }
+        75% {
+            opacity: 0;
+        }
+        77.500000% {
+            opacity: 1;
+        }
+        97.500000% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-9_tr {
+        animation: ns-spinner-9_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-9_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        30% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.5, 0.495, 0.82, 0.11);
+        }
+        50% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-9 {
+        animation: ns-spinner-9_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-9_c_o {
+        0% {
+            opacity: 0;
+        }
+        25% {
+            opacity: 0;
+        }
+        27.500000% {
+            opacity: 1;
+        }
+        47.500000% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-10_tr {
+        animation: ns-spinner-10_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-10_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        27.500000% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.1, 0.365, 0.82, 0.11);
+        }
+        50% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-10 {
+        animation: ns-spinner-10_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-10_c_o {
+        0% {
+            opacity: 0;
+        }
+        25% {
+            opacity: 0;
+        }
+        27.500000% {
+            opacity: 1;
+        }
+        47.500000% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-11_tr {
+        animation: ns-spinner-11_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-11_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        55% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.495, 0.49, 0.82, 0.11);
+        }
+        75% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-11 {
+        animation: ns-spinner-11_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-11_c_o {
+        0% {
+            opacity: 0;
+        }
+        52.500000% {
+            opacity: 0;
+        }
+        55% {
+            opacity: 1;
+        }
+        72.500000% {
+            opacity: 1;
+        }
+        75% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-12_tr {
+        animation: ns-spinner-12_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-12_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        52.500000% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.1, 0.365, 0.82, 0.11);
+        }
+        75% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-12 {
+        animation: ns-spinner-12_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-12_c_o {
+        0% {
+            opacity: 0;
+        }
+        50% {
+            opacity: 0;
+        }
+        52.500000% {
+            opacity: 1;
+        }
+        72.500000% {
+            opacity: 1;
+        }
+        75% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-13_tr {
+        animation: ns-spinner-13_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-13_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        5% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.495, 0.49, 0.82, 0.11);
+        }
+        25% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-13 {
+        animation: ns-spinner-13_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-13_c_o {
+        0% {
+            opacity: 1;
+        }
+        5% {
+            opacity: 1;
+        }
+        25% {
+            opacity: 1;
+        }
+        27.500000% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-14_tr {
+        animation: ns-spinner-14_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-14_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        2.500000% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.1, 0.365, 0.82, 0.11);
+        }
+        25% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-14 {
+        animation: ns-spinner-14_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-14_c_o {
+        0% {
+            opacity: 1;
+        }
+        2.500000% {
+            opacity: 1;
+        }
+        25% {
+            opacity: 1;
+        }
+        27.500000% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-15_tr {
+        animation: ns-spinner-15_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-15_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0, 0.25, 0.795, 0.345);
+        }
+        25% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+            animation-timing-function: cubic-bezier(0, 0.25, 0.795, 0.345);
+        }
+        50% {
+            transform: translate(232.873721px, 220.430229px) rotate(791deg);
+            animation-timing-function: cubic-bezier(0, 0.25, 0.795, 0.345);
+        }
+        75% {
+            transform: translate(232.873721px, 220.430229px) rotate(1151deg);
+            animation-timing-function: cubic-bezier(0, 0.25, 0.795, 0.345);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(1511deg);
+        }
+    }
+`;

package/src/common/spinner/NsSpinner.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import SpinnerIcon from './icons/Spinner';
+import { SpinnerContainer } from './NsSpinner.styled';
+import { NsSpinnerProps } from './types';
+
+const NsSpinner: React.FC<NsSpinnerProps> = ({ size = 100, additionalProps }) => {
+    return (
+        <SpinnerContainer size={size} className="spinner" {...additionalProps}>
+            <SpinnerIcon />
+        </SpinnerContainer>
+    );
+};
+
+export default NsSpinner;

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>
+    )
+}