@vrobots/storybook 0.1.0

package/dist/src/stories/Breadcrumbs.stories.js

@@ -0,0 +1,22 @@
+import { Breadcrumbs } from '../components/Breadcrumbs';
+export const EXAMPLE_BREADCRUMBS = [
+    { title: 'Home', nav: '/' },
+    { title: 'Products', nav: '/products' },
+    { title: 'Electronics', nav: '/products/electronics' },
+    { title: 'Laptops', nav: '/products/electronics/laptops' },
+    { title: 'Gaming Laptops' },
+];
+const meta = {
+    title: 'Navigation/Breadcrumbs',
+    component: Breadcrumbs,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const Component = {
+    args: {
+        breadcrumbs: EXAMPLE_BREADCRUMBS
+    }
+};

package/dist/src/stories/Frame.stories.d.ts

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("../components").IFrameProps & import("react").RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        headerProps: {
+            appName: string;
+            logo: {
+                light: string;
+                dark: string;
+            };
+            menu: import("react/jsx-runtime").JSX.Element;
+            version: string;
+        };
+        children: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Component: Story;

package/dist/src/stories/Frame.stories.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import packageJson from '../../package.json';
+import { Frame } from '../components/Frame';
+import { Heading } from '@chakra-ui/react';
+import { Menu } from '../components/Menu';
+import { SidebarProvider, SidebarToggleButton } from '../components/Sidebar';
+import { SIDEBAR_MENU } from './Sidebar.stories';
+import { Page } from '../components/Page';
+import { EXAMPLE_BREADCRUMBS } from './Breadcrumbs.stories';
+import { useIsMobile } from '../hooks/useIsMobile';
+import { AvatarIconMenu } from '../components/AvatarIconMenu';
+const logo = {
+    light: '/logo_hyperion_official.svg',
+    dark: '/logo_hyperion_official_white.svg',
+};
+const menu = (_jsx(AvatarIconMenu, { name: "Segun Adebayo", src: "https://bit.ly/sage-adebayo", menu: [
+        { label: 'Account', value: 'account' },
+        { label: 'Settings', value: 'settings' },
+        { label: 'Logout', value: 'logout' },
+    ] }));
+const meta = {
+    title: 'Frame/Frame',
+    component: Frame,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    args: {
+        headerProps: {
+            appName: 'My Application',
+            logo,
+            menu,
+            version: packageJson.version,
+        },
+        children: (_jsx(Page, { breadcrumbs: EXAMPLE_BREADCRUMBS, children: _jsx(Heading, { children: "Gaming Laptops" }) })),
+    },
+};
+export default meta;
+export const Component = {
+    args: {
+        headerProps: {
+            appName: 'My Application',
+            logo,
+            menu,
+            version: packageJson.version,
+        },
+        children: (_jsx(Page, { breadcrumbs: EXAMPLE_BREADCRUMBS, children: _jsx(Heading, { children: "Gaming Laptops" }) })),
+    },
+    decorators: [
+        (Story) => {
+            const isMobile = useIsMobile();
+            const isSidebarOpen = !isMobile;
+            return (_jsxs(SidebarProvider, { isOpen: isSidebarOpen, menu: _jsx(Menu, { label: 'Sidebar Menu', menuItems: SIDEBAR_MENU }), children: [_jsx(Story, {}), isMobile && _jsx(SidebarToggleButton, { name: 'sidebar-toggle', "aria-label": 'Toggle sidebar' })] }));
+        },
+    ],
+};

package/dist/src/stories/Header.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("../components").IHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        appName: string;
+        logo: {
+            light: string;
+            dark: string;
+        };
+        menu: null;
+        version: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

package/dist/src/stories/Header.stories.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import packageJson from '../../package.json';
+import { Header } from '../components/Header';
+import { Avatar } from '@chakra-ui/react';
+const logo = {
+    light: '/logo_hyperion_official.svg',
+    dark: '/logo_hyperion_official_white.svg',
+};
+const meta = {
+    title: 'Frame/Header',
+    component: Header,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    args: {
+        appName: 'My Application',
+        logo,
+        menu: null,
+        version: packageJson.version,
+    },
+};
+export default meta;
+export const LoggedIn = {
+    args: {
+        appName: 'My Application',
+        logo,
+        menu: (_jsxs(Avatar.Root, { children: [_jsx(Avatar.Fallback, { name: "Segun Adebayo" }), _jsx(Avatar.Image, { src: "https://bit.ly/sage-adebayo" })] })),
+        version: packageJson.version,
+    }
+};
+export const LoggedOut = {
+    args: {
+        appName: 'My Application',
+        logo,
+        menu: null,
+        version: packageJson.version,
+    }
+};

package/dist/src/stories/Menu.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("../components").IMenuProps & import("react").RefAttributes<unknown>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Component: Story;

package/dist/src/stories/Menu.stories.js

@@ -0,0 +1,17 @@
+import { Menu } from '../components/Menu';
+import { SIDEBAR_MENU } from './Sidebar.stories';
+const meta = {
+    title: 'Navigation/Menu',
+    component: Menu,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const Component = {
+    args: {
+        label: 'Example Menu',
+        menuItems: SIDEBAR_MENU
+    }
+};

package/dist/src/stories/Sidebar.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react-vite';
+export declare const SIDEBAR_MENU: {
+    label: string;
+    value: string;
+}[];
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Component: Story;

package/dist/src/stories/Sidebar.stories.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Sidebar, SidebarProvider } from '../components/Sidebar';
+import { Menu } from '../components/Menu';
+export const SIDEBAR_MENU = [
+    { label: 'Dashboard', value: 'dashboard' },
+    { label: 'Settings', value: 'settings' },
+    { label: 'Profile', value: 'profile' },
+    { label: 'Logout', value: 'logout' },
+];
+const meta = {
+    title: 'Frame/Sidebar',
+    component: Sidebar,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const Component = {
+    decorators: [
+        (Story) => {
+            return (_jsx(SidebarProvider, { isOpen: true, menu: _jsx(Menu, { label: 'Sidebar Menu', menuItems: SIDEBAR_MENU }), children: _jsx(Story, {}) }));
+        },
+    ],
+};

package/dist/src/utils/calculate.d.ts

@@ -0,0 +1,5 @@
+export interface ICalculate {
+    age: (date: Date) => number;
+    daysBetweenDates: (first: Date, second: Date) => number;
+}
+export declare const calculate: ICalculate;

package/dist/src/utils/calculate.js

@@ -0,0 +1,15 @@
+export const calculate = {
+    age: (date) => {
+        const today = new Date();
+        const birthDateObj = new Date(date);
+        let age = today.getFullYear() - birthDateObj.getFullYear();
+        const monthDiff = today.getMonth() - birthDateObj.getMonth();
+        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDateObj.getDate())) {
+            age--;
+        }
+        return age;
+    },
+    daysBetweenDates(first, second) {
+        return Math.round((second.getTime() - first.getTime()) / (24 * 60 * 60 * 1000));
+    }
+};

package/dist/src/utils/cookies.d.ts

@@ -0,0 +1,5 @@
+export interface ICookies {
+    set: (name: string, value: string, expiresInMilliseconds?: number) => void;
+    get: (name: string) => string;
+}
+export declare const cookies: ICookies;

package/dist/src/utils/cookies.js

@@ -0,0 +1,26 @@
+export const cookies = {
+    set: (name, value, expiresInMilliseconds) => {
+        let expires;
+        if (!!expiresInMilliseconds) {
+            const date = new Date();
+            date.setTime(date.getTime() + expiresInMilliseconds);
+            expires = `expires=${date};`;
+        }
+        document.cookie = `${name}=${value};${!!expires ? expires : ''}path/;SameSite=Lax`;
+    },
+    get: (name) => {
+        name = `${name}=`;
+        const decodedCookie = decodeURIComponent(document.cookie);
+        const cookies = decodedCookie.split(';');
+        for (let i = 0; i < cookies.length; i++) {
+            let cookie = cookies[i];
+            while (cookie.charAt(0) === ' ') {
+                cookie = cookie.substring(1);
+            }
+            if (cookie.indexOf(name) === 0) {
+                return cookie.substring(name.length, cookie.length);
+            }
+        }
+        return '';
+    }
+};

package/dist/src/utils/data.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { AxiosResponse } from 'axios';
+export interface IData {
+    handleDataState: (getCollection: (query: string) => Promise<AxiosResponse<any>>, setCollection: React.Dispatch<React.SetStateAction<any>>, setError: React.Dispatch<React.SetStateAction<string>>, setIsLoading: React.Dispatch<React.SetStateAction<any>>, query?: string) => (dataState: any) => void;
+}
+export declare const data: IData;

package/dist/src/utils/data.js

@@ -0,0 +1,20 @@
+export const data = {
+    handleDataState: (getCollection, setCollection, setError, setIsLoading, query) => async (dataState) => {
+        setIsLoading(true);
+        try {
+            const { data: { data, meta: { total } } } = await getCollection(makeQuery(dataState, query));
+            setCollection({ data, total });
+        }
+        catch ({ response: { data: { message: error } } }) {
+            setError(error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    },
+};
+function makeQuery(dataState, additionalQuery) {
+    const { pageNumber, pageSize } = dataState;
+    const query = `?page=${pageNumber}&per_page=${pageSize}${!!additionalQuery ? additionalQuery : ''}`;
+    return query;
+}

package/dist/src/utils/format.d.ts

@@ -0,0 +1,23 @@
+export interface IFormat {
+    lettersOnly: (value: string) => string;
+    lettersOnlyPlusSpace: (value: string) => string;
+    alphaNumeric: (value: string) => string;
+    alphaNumericPlusSpace: (value: string) => string;
+    numeric: (value: string) => string;
+    decimal: (value: string) => string;
+    maxChars: (value: string, max: number) => string;
+    capitalizeFirstLetter: (value: string) => string;
+    convertToTitleCase: (value: string) => string;
+    emailAddress: (emailAddress: string) => string;
+    currency: (value: number) => string;
+    currencyRound: (value: number) => string;
+    number: (value: number) => string;
+    stripNumberFormatting: (value: string) => number;
+    stripCurrencyFormatting: (value: string) => string;
+    roundNumber: (value: number, decimals: number) => number;
+    tel: (value: number) => string;
+    ssn: (value: string) => string;
+    ein: (value: string) => string;
+    convertToStandardCase: (str: string, delimiter: '_' | '-' | ' ' | ',') => string;
+}
+export declare const format: IFormat;

package/dist/src/utils/format.js

@@ -0,0 +1,76 @@
+const l10nUSD = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
+const l10nEN = new Intl.NumberFormat('en-US');
+export const format = {
+    lettersOnly: (value) => value.replace(/[^A-Za-z?]/g, ''),
+    lettersOnlyPlusSpace: (value) => value.replace(/[^A-Za-z?\s]/g, ''),
+    alphaNumeric: (value) => value.replace(/[^a-z0-9]/gi, ''),
+    alphaNumericPlusSpace: (value) => value.replace(/[^a-z0-9\s]/gi, ''),
+    numeric: (value) => value.replace(/[^0-9]/gi, ''),
+    decimal: (value) => value.replace(/[^0-9.]/gi, ''),
+    maxChars: (value, max) => value.split('').map((x, i) => i < max).join(),
+    capitalizeFirstLetter: (value) => !!value ? value.charAt(0).toUpperCase() + value.split('').filter((x, i) => i > 0).join('').toLowerCase() : '',
+    convertToTitleCase: (value) => {
+        const parts = value.split('_');
+        const casedParts = parts.map(part => format.capitalizeFirstLetter(part));
+        return casedParts.join(' ');
+    },
+    emailAddress: (emailAddress) => {
+        return emailAddress.replace(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, '');
+    },
+    currency: (value) => l10nUSD.format(value),
+    currencyRound: (value) => {
+        const result = l10nUSD.format(value).toString();
+        return result.substr(0, result.length - 3);
+    },
+    number: (value) => l10nEN.format(value),
+    stripNumberFormatting: (value) => Number(value.replace(/[^0-9.]/g, '')),
+    stripCurrencyFormatting: (value) => {
+        value = value.replace('$', '');
+        value = value.replace('.', '');
+        const num = Number(value.replace(/[^0-9.]/g, ''));
+        if (num < 10) {
+            value = `0.0${num}`;
+        }
+        else if (num < 100) {
+            value = `0.${num}`;
+        }
+        else {
+            const str = num.toString();
+            value = str.substr(0, str.length - 2) + '.' + str.substr(str.length - 2, 2);
+        }
+        return parseFloat(value).toFixed(2);
+    },
+    roundNumber: (value, decimals) => {
+        return Number(Math.round(Number(value + 'e' + decimals)) + 'e-' + decimals);
+    },
+    tel: (value) => {
+        const telUnformatted = value.toString();
+        const telParts = telUnformatted.split('');
+        const telPart1 = telParts.filter((part, key) => key < 3).join('');
+        const telPart2 = telParts.filter((part, key) => key > 2 && key < 6).join('');
+        const telPart3 = telParts.filter((part, key) => key > 5).join('');
+        return `(${telPart1}) ${telPart2}-${telPart3}`;
+    },
+    ssn: (value) => {
+        const ssnUnformatted = format.numeric(value);
+        const ssnParts = ssnUnformatted.split('');
+        const ssnPart1 = ssnParts.filter((part, key) => key < 3).join('');
+        const ssnPart2 = ssnParts.filter((part, key) => key > 2 && key < 5).join('');
+        const ssnPart3 = ssnParts.filter((part, key) => key > 4).join('');
+        return `${ssnPart1}-${ssnPart2}-${ssnPart3}`;
+    },
+    ein: (value) => {
+        const einUnformatted = format.numeric(value);
+        const einParts = einUnformatted.split('');
+        const einPart1 = einParts.filter((part, key) => key < 2).join('');
+        const einPart2 = einParts.filter((part, key) => key > 1).join('');
+        return `${einPart1}-${einPart2}`;
+    },
+    convertToStandardCase: (str, delimiter) => {
+        const upperCaseFirstLetters = str
+            .split(delimiter)
+            .map(part => part.charAt(0).toUpperCase() + part.substring(1, part.length))
+            .join(' ');
+        return upperCaseFirstLetters;
+    }
+};

package/dist/src/utils/index.d.ts

@@ -0,0 +1,14 @@
+import { ICookies } from './cookies';
+import { IFormat } from './format';
+import { IValidation } from './validation';
+import { IData } from './data';
+import { ICalculate } from './calculate';
+export interface IUtils {
+    format: IFormat;
+    validation: IValidation;
+    cookies: ICookies;
+    data: IData;
+    calculate: ICalculate;
+}
+declare const utils: IUtils;
+export default utils;

package/dist/src/utils/index.js

@@ -0,0 +1,13 @@
+import { cookies } from './cookies';
+import { format } from './format';
+import { validation } from './validation';
+import { data } from './data';
+import { calculate } from './calculate';
+const utils = {
+    cookies,
+    format,
+    validation,
+    data,
+    calculate,
+};
+export default utils;

package/dist/src/utils/validation.d.ts

@@ -0,0 +1,13 @@
+export interface IValidation {
+    emailAddress: (emailAddress: string) => string;
+    emailAddressMatching: (emailAddress1: string, emailAddress2: string) => string;
+    minChars: (label: string, value: string, min: number) => string;
+    maxChars: (label: string, value: string, max: number) => string;
+    password: (password: string) => any;
+    creditCardNumber: (ccNum: string) => string;
+    mobile: () => boolean;
+    date: (date: any) => string;
+    nameFirstAndLast: (name: string) => string;
+    numeric: (label: string, value: string) => string;
+}
+export declare const validation: IValidation;

package/dist/src/utils/validation.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import owasp from 'owasp-password-strength-test';
+export const validation = {
+    emailAddress: (emailAddress) => {
+        const test = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,12})+$/.test(emailAddress);
+        return test || !emailAddress ? '' : 'Enter a valid email address';
+    },
+    emailAddressMatching: (emailAddress1, emailAddress2) => {
+        const test = emailAddress1 === emailAddress2;
+        return test || !emailAddress1 ? '' : 'Email addresses do not match';
+    },
+    minChars: (label, value, min) => {
+        const test = value.length >= min;
+        return test || !value ? '' : `${label} must contain at least ${min} characters`;
+    },
+    maxChars: (label, value, max) => {
+        const test = value.length <= max;
+        return test || !value ? '' : `${label} must contain ${max} characters or less`;
+    },
+    password: (password) => {
+        const result = owasp.test(password);
+        if (result.errors.length) {
+            const errors = result.errors.map((error, key) => (_jsxs("span", { children: [_jsx("span", { children: error.replace('The password', '• ').replace('.', '') }), _jsx("br", {})] }, `span-error-${key}`)));
+            return errors;
+        }
+        return '';
+    },
+    mobile: () => {
+        let check = false;
+        (function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)))
+            check = true; })(navigator.userAgent || navigator.vendor);
+        check = check ?? /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+        check = check ?? navigator.maxTouchPoints > 0;
+        return check;
+    },
+    creditCardNumber: (ccNum) => {
+        const visaRegEx = /^(?:4[0-9]{12}(?:[0-9]{3})?)$/;
+        const mastercardRegEx = /^(?:5[1-5][0-9]{14})$/;
+        const amexpRegEx = /^(?:3[47][0-9]{13})$/;
+        const discovRegEx = /^(?:6(?:011|5[0-9][0-9])[0-9]{12})$/;
+        let isValid = false;
+        if (visaRegEx.test(ccNum)) {
+            isValid = true;
+        }
+        else if (mastercardRegEx.test(ccNum)) {
+            isValid = true;
+        }
+        else if (amexpRegEx.test(ccNum)) {
+            isValid = true;
+        }
+        else if (discovRegEx.test(ccNum)) {
+            isValid = true;
+        }
+        return (isValid || !ccNum) ? '' : 'Enter a valid credit card number';
+    },
+    date: (date) => {
+        const d = new Date(date);
+        const test = d instanceof Date && !isNaN(d.getTime());
+        return test || !date ? '' : 'Enter a valid date in MM/DD/YYYY format';
+    },
+    nameFirstAndLast: (name) => !!name.split(' ')[1] ? '' : 'Enter your first and last name.',
+    numeric: (label, value) => {
+        const test = /^\d+$/.test(value);
+        return test || !value ? '' : `${label} must contain only numbers`;
+    }
+};

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@vrobots/storybook",
+  "private": false,
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -declaration",
+    "lint": "eslint .",
+    "storybook": "storybook dev -p 6006",
+    "pre-publish": "rimraf dist; npm run build"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^3.32.0",
+    "@emotion/react": "^11.14.0",
+    "@storybook/addon-themes": "^10.2.6",
+    "axios": "^1.13.4",
+    "motion": "^12.34.0",
+    "next-themes": "^0.4.6",
+    "owasp-password-strength-test": "^1.3.0",
+    "react": "^19.2.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dnd-touch-backend": "^16.0.1",
+    "react-dom": "^19.2.0",
+    "react-icons": "^5.5.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.0",
+    "@eslint/js": "^9.39.1",
+    "@storybook/addon-a11y": "^10.2.6",
+    "@storybook/addon-docs": "^10.2.6",
+    "@storybook/addon-vitest": "^10.2.6",
+    "@storybook/react-vite": "^10.2.6",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vrobots/types": "^0.4.17",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-storybook": "^10.2.6",
+    "globals": "^16.5.0",
+    "playwright": "^1.58.1",
+    "rimraf": "^6.1.2",
+    "storybook": "^10.2.6",
+    "ts-node": "^10.9.2",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4",
+    "vitest": "^4.0.18"
+  }
+}