@vrobots/storybook 0.2.3 → 0.2.5

package/dist/package.json

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

package/dist/src/components/form/Form.Body.d.ts

@@ -0,0 +1,4 @@
+declare const FormBody: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default FormBody;

package/dist/src/components/form/Form.Body.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack } from "@chakra-ui/react";
+const FormBody = ({ children }) => {
+    return (_jsx(Stack, { gap: "4", mt: 4, children: children }));
+};
+export default FormBody;

package/dist/src/components/form/Form.Description.d.ts

@@ -0,0 +1,4 @@
+declare const FormDescription: ({ description }: {
+    description: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default FormDescription;

package/dist/src/components/form/Form.Description.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card } from "@chakra-ui/react";
+const FormDescription = ({ description }) => {
+    return _jsx(Card.Description, { children: description });
+};
+export default FormDescription;

package/dist/src/components/form/Form.Root.d.ts

@@ -0,0 +1,3 @@
+import { BoxProps } from "@chakra-ui/react";
+export declare const FormRoot: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
+export default FormRoot;

package/dist/src/components/form/Form.Root.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Card } from "@chakra-ui/react";
+export const FormRoot = (props) => {
+    return (_jsx(Box, { as: "form", display: "flex", justifyContent: "center", alignItems: "center", height: `100%`, bg: "neu.bg", px: 4, children: _jsx(Box, { layerStyle: "neuRaised", p: { base: 6, md: 8 }, minW: { base: "100%", sm: "460px" }, maxW: "560px", bg: { _light: 'white', _dark: 'black' }, children: _jsx(Card.Root, { bg: 'transparent', border: 'none', ...props, children: _jsx(Card.Body, { children: props.children }) }) }) }));
+};
+export default FormRoot;

package/dist/src/components/form/Form.Title.d.ts

@@ -0,0 +1,4 @@
+declare const FormTitle: ({ title }: {
+    title: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default FormTitle;

package/dist/src/components/form/Form.Title.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Card } from "@chakra-ui/react";
+const FormTitle = ({ title }) => {
+    return _jsx(Card.Title, { children: title || "Second Factor Auth" });
+};
+export default FormTitle;

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

@@ -1,17 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Button, Card, Field, Input, Stack } from "@chakra-ui/react";
+import { Button, Field, Input, Stack } from "@chakra-ui/react";
 import { useForm } from "react-hook-form";
 import { PasswordInput } from "../ui/password-input";
+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 { register, handleSubmit, formState: { errors }, } = useForm();
-    return (_jsx(Card.Root, { ...props, children: _jsxs(Card.Body, { children: [_jsx(Card.Title, { children: title || "Login" }), !!description && _jsx(Card.Description, { children: description }), _jsxs(Box, { as: "form", onSubmit: handleSubmit((data) => onLogin(data)), mt: 4, 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,}))$/,
-                                                    message: "Invalid email address"
-                                                }
-                                            }), autoFocus: true }), _jsx(Field.ErrorText, { children: errors.emailAddress?.message })] }), _jsxs(Field.Root, { invalid: !!errors.password, children: [_jsx(Field.Label, { children: "Password" }), _jsx(PasswordInput, { ...register("password", {
-                                                required: "Please enter your password",
-                                            }) }), _jsx(Field.ErrorText, { children: errors.password?.message })] })] }), children, _jsx(Button, { type: "submit", width: "full", mt: 6, children: "Login" })] })] }) }));
+    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", {
+                                            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,}))$/,
+                                                message: "Invalid email address"
+                                            }
+                                        }), autoFocus: true }), _jsx(Field.ErrorText, { children: errors.emailAddress?.message })] }), _jsxs(Field.Root, { invalid: !!errors.password, children: [_jsx(Field.Label, { children: "Password" }), _jsx(PasswordInput, { ...register("password", {
+                                            required: "Please enter your password",
+                                        }) }), _jsx(Field.ErrorText, { children: errors.password?.message })] })] }), children, _jsx(Button, { type: "submit", width: "full", mt: 6, children: "Login" })] })] }));
 };
 export default Login;

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

@@ -1,10 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Button, Card, Checkbox, Field, Input, InputGroup, Stack } from "@chakra-ui/react";
+import { Button, Checkbox, Field, Input, InputGroup } from "@chakra-ui/react";
 import { useForm } from "react-hook-form";
+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 { register, handleSubmit, formState: { errors }, } = useForm();
-    return (_jsx(Card.Root, { ...props, children: _jsxs(Card.Body, { children: [_jsx(Card.Title, { children: title || "Second Factor Auth" }), !!description && _jsx(Card.Description, { children: description }), _jsxs(Box, { as: "form", onSubmit: handleSubmit((data) => onSecondFactorAuth(data)), mt: 4, children: [_jsxs(Stack, { gap: "4", 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" })] })] }) }));
+    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", {
+                                        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" })] }));
 };
 export default SecondFactorAuth;

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

@@ -3,6 +3,16 @@ export * from "./SecondFactorAuth";
 export * from "./FileUploader";
 declare const Form: {
     (): null;
+    Root: (props: import("@chakra-ui/react").BoxProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ title }: {
+        title: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Description: ({ description }: {
+        description: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    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;
     FileUploader: ({ title, description, buttonLabel, helperText, accept, multiple, onFilesSelected, uploadPercentages, children, ...props }: import("./FileUploader").IFileUploaderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,18 @@
 import Login from "./Login";
 import SecondFactorAuth from "./SecondFactorAuth";
 import FileUploader from "./FileUploader";
+import FormRoot from "./Form.Root";
+import FormTitle from "./Form.Title";
+import FormBody from "./Form.Body";
+import FormDescription from "./Form.Description";
 export * from "./Login";
 export * from "./SecondFactorAuth";
 export * from "./FileUploader";
 const Form = () => null;
+Form.Root = FormRoot;
+Form.Title = FormTitle;
+Form.Description = FormDescription;
+Form.Body = FormBody;
 Form.Login = Login;
 Form.SecondFactorAuth = SecondFactorAuth;
 Form.FileUploader = FileUploader;

package/dist/src/components/ui/color-mode.js

@@ -8,15 +8,16 @@ export function ColorModeProvider(props) {
 }
 export function useColorMode() {
     const { resolvedTheme, setTheme, forcedTheme } = useTheme();
-    const colorMode = forcedTheme || resolvedTheme;
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => {
+        setMounted(true);
+    }, []);
+    const colorMode = (mounted ? (forcedTheme ?? resolvedTheme ?? "light") : "light");
     const toggleColorMode = () => {
         setTheme(resolvedTheme === "dark" ? "light" : "dark");
     };
-    if (!colorMode) {
-        setTheme("light");
-    }
     return {
-        colorMode: colorMode,
+        colorMode,
         setColorMode: setTheme,
         toggleColorMode,
     };

package/package.json

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