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

package/src/common/select/NsSelectOption.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ListItem, ListItemContainer } from './NsSelect.styled';
+import { SelectOptionProps } from './types.d';
+
+export const NsSelectOption: React.FC<SelectOptionProps> = ({
+    value,
+    label,
+    onSelect,
+    selectedValue,
+    showListDivider = true,
+}) => {
+    const handleClick = () => {
+        if (onSelect && typeof onSelect === 'function') {
+            onSelect(value);
+        }
+    };
+
+    return (
+        <ListItemContainer
+            data-testid={`option-${value}`}
+            isSelected={value === selectedValue}
+            showListDivider={showListDivider}
+            onClick={handleClick}
+        >
+            <ListItem isSelected={value === selectedValue}>{label}</ListItem>
+        </ListItemContainer>
+
+    );
+};
+export default NsSelectOption;

package/src/common/select/index.ts

@@ -0,0 +1,3 @@
+export { default as NsSelect } from './NsSelect';
+export { default as NsSelectOption } from './NsSelectOption';
+export type { SelectOptionProps, SelectProps } from './types.d';

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/Inputs/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 | null;
+    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/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;