@vrobots/storybook 0.2.12 → 0.2.14

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vrobots/storybook",
     "private": false,
-    "version": "0.2.12",
+    "version": "0.2.14",
     "type": "module",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",

package/dist/src/components/Menu.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createListCollection, Listbox } from "@chakra-ui/react";
 import React, { forwardRef } from "react";
 import { useSelectedColorSchema } from "../hooks/useSelectedColorSchema";
+import * as Icons from "react-icons/md";
 export const Menu = forwardRef(({ label, menuItems, selected = '', onClick, }, ref) => {
     const frameworks = React.useMemo(() => createListCollection({
         items: menuItems || [],
@@ -11,6 +12,6 @@ export const Menu = forwardRef(({ label, menuItems, selected = '', onClick, }, r
         const value = details.value[0];
         onClick?.(value);
     };
-    return (_jsxs(Listbox.Root, { collection: frameworks, value: [selected], onValueChange: handleValueChange, pt: 4, ref: ref, children: [!!label && _jsx(Listbox.Label, { pl: 5, children: label }), _jsx(Listbox.Content, { border: 0, bgColor: 'transparent', children: frameworks.items.map((framework, i) => (_jsx(Listbox.Item, { item: framework, pl: 4, pr: 4, ...([selected].includes(framework.value) ? selectedColorSchema : undefined), children: _jsx(Listbox.ItemText, { children: framework.label }) }, `${framework.label} ${i + 1}`))) })] }));
+    return (_jsxs(Listbox.Root, { collection: frameworks, value: [selected], onValueChange: handleValueChange, pt: 4, ref: ref, children: [!!label && _jsx(Listbox.Label, { pl: 5, children: label }), _jsx(Listbox.Content, { border: 0, bgColor: 'transparent', children: frameworks.items.map((framework, i) => (_jsxs(Listbox.Item, { item: framework, pl: 4, pr: 4, ...([selected].includes(framework.value) ? selectedColorSchema : undefined), children: [framework.icon && React.createElement(Icons[framework.icon], { style: { display: 'inline', marginRight: 8 } }), _jsx(Listbox.ItemText, { children: framework.label })] }, `${framework.label} ${i + 1}`))) })] }));
 });
 Menu.displayName = 'Menu';

package/dist/src/components/form/Login.d.ts

@@ -6,8 +6,9 @@ export interface ILoginCredentials {
 export interface ILoginProps extends CardRootProps {
     title?: string;
     description?: string;
+    isLoading?: boolean;
     onLogin: (credentials: ILoginCredentials) => void;
     children?: React.ReactNode;
 }
-declare const Login: ({ title, description, onLogin, children, ...props }: ILoginProps) => import("react/jsx-runtime").JSX.Element;
+declare const Login: ({ title, description, onLogin, children, isLoading, ...props }: ILoginProps) => import("react/jsx-runtime").JSX.Element;
 export default Login;

package/dist/src/components/form/Login.js

@@ -6,9 +6,9 @@ import FormRoot from "./Form.Root";
 import FormDescription from "./Form.Description";
 import FormTitle from "./Form.Title";
 import FormBody from "./Form.Body";
-const Login = ({ title, description, onLogin, children = null, ...props }) => {
+const Login = ({ title, description, onLogin, children = null, isLoading = false, ...props }) => {
     const { register, handleSubmit, formState: { errors }, } = useForm();
-    return (_jsxs(FormRoot, { onSubmit: handleSubmit((data) => onLogin(data)), children: [_jsx(FormTitle, { title: title || "Login" }), !!description && _jsx(FormDescription, { description: description }), _jsxs(FormBody, { children: [_jsxs(Stack, { gap: "4", children: [_jsxs(Field.Root, { invalid: !!errors.emailAddress, required: true, children: [_jsx(Field.Label, { children: "Email Address" }), _jsx(Input, { ...register("emailAddress", {
+    return (_jsxs(FormRoot, { onSubmit: handleSubmit((data) => onLogin(data)), ...props, isLoading: isLoading, children: [_jsx(FormTitle, { title: title || "Login" }), !!description && _jsx(FormDescription, { description: description }), _jsxs(FormBody, { children: [_jsxs(Stack, { gap: "4", children: [_jsxs(Field.Root, { invalid: !!errors.emailAddress, required: true, children: [_jsx(Field.Label, { children: "Email Address" }), _jsx(Input, { ...register("emailAddress", {
                                             required: "Please enter your email address",
                                             pattern: {
                                                 value: /^(([^<>()[\]\\.,;:\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,}))$/,

package/dist/src/components/form/SecondFactorAuth.d.ts

@@ -6,8 +6,9 @@ export interface IAuth {
 export interface ISecondFactorAuthProps extends CardRootProps {
     title?: string;
     description?: string;
+    isLoading?: boolean;
     onSecondFactorAuth: (auth: IAuth) => void;
     onResendAuthCode: () => void;
 }
-declare const SecondFactorAuth: ({ title, description, onSecondFactorAuth, onResendAuthCode, ...props }: ISecondFactorAuthProps) => import("react/jsx-runtime").JSX.Element;
+declare const SecondFactorAuth: ({ title, description, onSecondFactorAuth, onResendAuthCode, isLoading, ...props }: ISecondFactorAuthProps) => import("react/jsx-runtime").JSX.Element;
 export default SecondFactorAuth;

package/dist/src/components/form/SecondFactorAuth.js

@@ -5,9 +5,9 @@ import FormRoot from "./Form.Root";
 import FormTitle from "./Form.Title";
 import FormBody from "./Form.Body";
 import FormDescription from "./Form.Description";
-const SecondFactorAuth = ({ title, description, onSecondFactorAuth, onResendAuthCode, ...props }) => {
+const SecondFactorAuth = ({ title, description, onSecondFactorAuth, onResendAuthCode, isLoading = false, ...props }) => {
     const { register, handleSubmit, formState: { errors }, } = useForm();
-    return (_jsxs(FormRoot, { onSubmit: handleSubmit((data) => onSecondFactorAuth(data)), children: [_jsx(FormTitle, { title: title || "Second Factor Auth" }), !!description && _jsx(FormDescription, { description: description }), _jsxs(FormBody, { children: [_jsxs(Field.Root, { invalid: !!errors.authCode, required: true, children: [_jsx(Field.Label, { children: "Authorization Code" }), _jsx(InputGroup, { endAddon: _jsx(Button, { h: '1.75rem', size: 'sm', variant: 'ghost', onClick: onResendAuthCode, children: "Resend" }), children: _jsx(Input, { type: 'text', placeholder: 'Authorization code', ...register("authCode", {
+    return (_jsxs(FormRoot, { onSubmit: handleSubmit((data) => onSecondFactorAuth(data)), ...props, isLoading: isLoading, children: [_jsx(FormTitle, { title: title || "Second Factor Auth" }), !!description && _jsx(FormDescription, { description: description }), _jsxs(FormBody, { children: [_jsxs(Field.Root, { invalid: !!errors.authCode, required: true, children: [_jsx(Field.Label, { children: "Authorization Code" }), _jsx(InputGroup, { endAddon: _jsx(Button, { h: '1.75rem', size: 'sm', variant: 'ghost', onClick: onResendAuthCode, children: "Resend" }), children: _jsx(Input, { type: 'text', placeholder: 'Authorization code', ...register("authCode", {
                                         required: "Please enter your authorization code",
                                     }), autoFocus: true }) }), _jsx(Field.ErrorText, { children: errors.authCode?.message })] }), _jsxs(Checkbox.Root, { ...register("rememberDevice"), size: 'sm', children: [_jsx(Checkbox.HiddenInput, {}), _jsx(Checkbox.Control, {}), _jsx(Checkbox.Label, { children: "Remember Device" })] })] }), _jsx(Button, { type: "submit", width: "full", mt: 6, children: "Submit" })] }));
 };

package/dist/src/components/form/index.d.ts

@@ -13,8 +13,8 @@ declare const Form: {
     Body: ({ children }: {
         children: React.ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;
-    Login: ({ title, description, onLogin, children, ...props }: import("./Login").ILoginProps) => import("react/jsx-runtime").JSX.Element;
-    SecondFactorAuth: ({ title, description, onSecondFactorAuth, onResendAuthCode, ...props }: import("./SecondFactorAuth").ISecondFactorAuthProps) => import("react/jsx-runtime").JSX.Element;
+    Login: ({ title, description, onLogin, children, isLoading, ...props }: import("./Login").ILoginProps) => import("react/jsx-runtime").JSX.Element;
+    SecondFactorAuth: ({ title, description, onSecondFactorAuth, onResendAuthCode, isLoading, ...props }: import("./SecondFactorAuth").ISecondFactorAuthProps) => import("react/jsx-runtime").JSX.Element;
     FileUploader: ({ title, description, buttonLabel, helperText, accept, multiple, onFilesSelected, uploadPercentages, children, ...props }: import("./FileUploader").IFileUploaderProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Form;

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

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ title, description, onLogin, children, ...props }: import("../components").ILoginProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ title, description, onLogin, children, isLoading, ...props }: import("../components").ILoginProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

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

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ title, description, onSecondFactorAuth, onResendAuthCode, ...props }: import("../components").ISecondFactorAuthProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ title, description, onSecondFactorAuth, onResendAuthCode, isLoading, ...props }: import("../components").ISecondFactorAuthProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vrobots/storybook",
   "private": false,
-  "version": "0.2.12",
+  "version": "0.2.14",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",