@nuskin/foundation-ui-components 1.0.2 → 1.1.1

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

@@ -4,7 +4,7 @@ import NsSelect from '../NsSelect';
 import NsSelectOption from '../NsSelectOption';
 
 export default {
-    title: 'Components/NsSelect',
+    title: 'Components/Inputs/NsSelect',
     decorators: [
         (story) => <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{story()}</div>,
     ],
@@ -21,11 +21,11 @@ export default {
         showListDivider: { control: 'boolean' },
         label: { control: 'text' },
         name: { control: 'text' },
-        menuProps:{ control: 'text' },
-        reverseArrowControls:{ control: 'boolean' },
-        validateOnBlur:{ control: 'boolean' },
+        menuProps: { control: 'text' },
+        reverseArrowControls: { control: 'boolean' },
+        validateOnBlur: { control: 'boolean' },
         autoComplete: { control: 'text' },
-        rules: {control: 'array'},
+        rules: { control: 'array' },
     },
     parameters: {
         options: [
@@ -91,15 +91,15 @@ export default {
         selectedValue: '',
         selectedLabel: '',
         label: 'State',
-        placeholder:'',
-        name:'',
-        menuProps:'auto',
+        placeholder: '',
+        name: '',
+        menuProps: 'auto',
         reverseArrowControls: false,
-        itemText:'Text',
-        itemValue:'Value',
+        itemText: 'Text',
+        itemValue: 'Value',
         validateOnBlur: false,
         autoComplete: '',
-        rules:[]
+        rules: [],
     },
 } as ComponentMeta<typeof NsSelect>;
 

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

@@ -5,7 +5,7 @@ export interface SelectProps {
     selectedValue: string;
     selectedLabel: string;
     onSelect: (arg: string) => void; // eslint-disable-line
-    children: ReactNode;
+    children?: ReactNode | null;
     disabled?: boolean;
     type?: 'outlined' | 'unfilled';
     placeholder?: string;
@@ -14,11 +14,11 @@ export interface SelectProps {
     showListDivider?: boolean;
     label?: string;
     readOnly?: boolean;
-    name?: string; 
+    name?: string;
     errorMessage?: string;
     menuProps?: string | object;
     reverseArrowControls?: boolean;
-    itemText?: string; 
+    itemText?: string;
     itemValue?: string;
     validateOnBlur?: boolean;
     autoComplete?: string;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, screen } from '@/test-utils/index';
+import NsSpinner from './NsSpinner';
+
+describe('NsSpinner', () => {
+    test('1.renders spinner', () => {
+        const { container } = render(<NsSpinner additionalProps={{ 'data-testid': 'spinner' }} />);
+
+        expect(screen.getByTestId('spinner')).toBeInTheDocument();
+        expect(container.getElementsByTagName('svg')).toHaveLength(1);
+        expect(screen.getByTestId('spinner')).toHaveStyle('width:100px');
+    });
+
+    test('2.renders spinner with different size', () => {
+        render(<NsSpinner size={200} additionalProps={{ 'data-testid': 'spinner' }} />);
+
+        expect(screen.getByTestId('spinner')).toBeInTheDocument();
+        expect(screen.getByTestId('spinner')).toHaveStyle('width:200px');
+        expect(screen.getByTestId('spinner')).toHaveStyle('height:200px');
+    });
+});

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

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import NsSpinner from './NsSpinner';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+
+type ComponentType = typeof NsSpinner;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Feedback/NsSpinner',
+    component: NsSpinner,
+    decorators: [
+        (Story) => (
+            <div className="flex place-content-center">
+                <Story />
+            </div>
+        ),
+        withCenterDecorator,
+    ],
+    argTypes: {},
+    args: {
+        size: 200,
+    },
+} as MetaStory;
+
+export const Spinner: Story = {};

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/NsTable.stories.tsx

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