@vrobots/storybook 0.1.43 → 0.1.45

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vrobots/storybook",
     "private": false,
-    "version": "0.1.43",
+    "version": "0.1.45",
     "type": "module",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -30,7 +30,8 @@
         "react-dnd-html5-backend": "^16.0.1",
         "react-dnd-touch-backend": "^16.0.1",
         "react-dom": "^19.2.0",
-        "react-icons": "^5.5.0"
+        "react-hook-form": "^7.71.2",
+        "react-icons": "^5.6.0"
     },
     "devDependencies": {
         "@chromatic-com/storybook": "^5.0.0",

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

@@ -9,4 +9,4 @@ export interface IMenuProps {
     selected?: string;
     onClick?: (value: string) => void;
 }
-export declare const Menu: React.ForwardRefExoticComponent<IMenuProps & React.RefAttributes<unknown>>;
+export declare const Menu: React.ForwardRefExoticComponent<IMenuProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/Menu.js

@@ -2,7 +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";
-export const Menu = forwardRef(({ label, menuItems, selected = '', onClick, }) => {
+export const Menu = forwardRef(({ label, menuItems, selected = '', onClick, }, ref) => {
     const frameworks = React.useMemo(() => createListCollection({
         items: menuItems || [],
     }), [menuItems]);
@@ -11,6 +11,6 @@ export const Menu = forwardRef(({ label, menuItems, selected = '', onClick, }) =
         const value = details.value[0];
         onClick?.(value);
     };
-    return (_jsxs(Listbox.Root, { collection: frameworks, value: [selected], onValueChange: handleValueChange, pt: 4, 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) => (_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}`))) })] }));
 });
 Menu.displayName = 'Menu';

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

@@ -0,0 +1,12 @@
+import { CardRootProps } from "@chakra-ui/react";
+export interface ILoginCredentials {
+    emailAddress: string;
+    password: string;
+}
+export interface ILoginProps extends CardRootProps {
+    title?: string;
+    description?: string;
+    onLogin: (credentials: ILoginCredentials) => void;
+}
+declare const Login: ({ title, description, onLogin, ...props }: ILoginProps) => import("react/jsx-runtime").JSX.Element;
+export default Login;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Card, Field, Input, Stack } from "@chakra-ui/react";
+import { useForm } from "react-hook-form";
+import { PasswordInput } from "../ui/password-input";
+import utils from "../../utils";
+const Login = ({ title, description, onLogin, ...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"
+                                                }
+                                            }) }), _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",
+                                                validate: (value) => utils.validation.password(value)
+                                            }) }), _jsx(Field.ErrorText, { as: "pre", children: errors.password?.message })] })] }), _jsx(Button, { type: "submit", colorScheme: "teal", width: "full", mt: 6, children: "Login" })] })] }) }));
+};
+export default Login;

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

@@ -0,0 +1,5 @@
+declare const Form: {
+    (): null;
+    Login: ({ title, description, onLogin, ...props }: import("./Login").ILoginProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default Form;

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

@@ -0,0 +1,4 @@
+import Login from "./Login";
+const Form = () => null;
+Form.Login = Login;
+export default Form;

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

@@ -11,3 +11,4 @@ export * from './Page';
 export * from './Section';
 export * from './Sidebar';
 export * from './Timeline';
+export { default as Form } from './form';

package/dist/src/components/index.js

@@ -11,3 +11,4 @@ export * from './Page';
 export * from './Section';
 export * from './Sidebar';
 export * from './Timeline';
+export { default as Form } from './form';

package/dist/src/components/ui/password-input.d.ts

@@ -0,0 +1,21 @@
+import type { GroupProps, InputProps, StackProps } from "@chakra-ui/react";
+import * as React from "react";
+export interface PasswordVisibilityProps {
+    defaultVisible?: boolean;
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    visibilityIcon?: {
+        on: React.ReactNode;
+        off: React.ReactNode;
+    };
+}
+export interface PasswordInputProps extends InputProps, PasswordVisibilityProps {
+    rootProps?: GroupProps;
+}
+export declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
+interface PasswordStrengthMeterProps extends StackProps {
+    max?: number;
+    value: number;
+}
+export declare const PasswordStrengthMeter: React.ForwardRefExoticComponent<PasswordStrengthMeterProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/src/components/ui/password-input.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, HStack, IconButton, Input, InputGroup, Stack, mergeRefs, useControllableState, } from "@chakra-ui/react";
+import * as React from "react";
+import { LuEye, LuEyeOff } from "react-icons/lu";
+export const PasswordInput = React.forwardRef(function PasswordInput(props, ref) {
+    const { rootProps, defaultVisible, visible: visibleProp, onVisibleChange, visibilityIcon = { on: _jsx(LuEye, {}), off: _jsx(LuEyeOff, {}) }, ...rest } = props;
+    const [visible, setVisible] = useControllableState({
+        value: visibleProp,
+        defaultValue: defaultVisible || false,
+        onChange: onVisibleChange,
+    });
+    const inputRef = React.useRef(null);
+    return (_jsx(InputGroup, { endElement: _jsx(VisibilityTrigger, { disabled: rest.disabled, onPointerDown: (e) => {
+                if (rest.disabled)
+                    return;
+                if (e.button !== 0)
+                    return;
+                e.preventDefault();
+                setVisible(!visible);
+            }, children: visible ? visibilityIcon.off : visibilityIcon.on }), ...rootProps, children: _jsx(Input, { ...rest, ref: mergeRefs(ref, inputRef), type: visible ? "text" : "password" }) }));
+});
+const VisibilityTrigger = React.forwardRef(function VisibilityTrigger(props, ref) {
+    return (_jsx(IconButton, { tabIndex: -1, ref: ref, me: "-2", aspectRatio: "square", size: "sm", variant: "ghost", height: "calc(100% - {spacing.2})", "aria-label": "Toggle password visibility", ...props }));
+});
+export const PasswordStrengthMeter = React.forwardRef(function PasswordStrengthMeter(props, ref) {
+    const { max = 4, value, ...rest } = props;
+    const percent = (value / max) * 100;
+    const { label, colorPalette } = getColorPalette(percent);
+    return (_jsxs(Stack, { align: "flex-end", gap: "1", ref: ref, ...rest, children: [_jsx(HStack, { width: "full", ...rest, children: Array.from({ length: max }).map((_, index) => (_jsx(Box, { height: "1", flex: "1", rounded: "sm", "data-selected": index < value ? "" : undefined, layerStyle: "fill.subtle", colorPalette: "gray", _selected: {
+                        colorPalette,
+                        layerStyle: "fill.solid",
+                    } }, index))) }), label && _jsx(HStack, { textStyle: "xs", children: label })] }));
+});
+function getColorPalette(percent) {
+    switch (true) {
+        case percent < 33:
+            return { label: "Low", colorPalette: "red" };
+        case percent < 66:
+            return { label: "Medium", colorPalette: "orange" };
+        default:
+            return { label: "High", colorPalette: "green" };
+    }
+}

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

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ title, description, onLogin, ...props }: import("../components/form/Login").ILoginProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        title: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Component: Story;

package/dist/src/stories/Login.stories.js

@@ -0,0 +1,20 @@
+import { Form } from '../components';
+const meta = {
+    title: 'Forms/Login',
+    component: Form.Login,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    args: {
+        title: "Login",
+    }
+};
+export default meta;
+export const Component = {
+    args: {
+        title: "Login Form",
+        description: "Please enter your credentials to continue",
+        onLogin: (data) => console.log(data)
+    }
+};

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

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

package/dist/src/utils/validation.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import owasp from 'owasp-password-strength-test';
 export const validation = {
     emailAddress: (emailAddress) => {
@@ -15,15 +14,16 @@ export const validation = {
     },
     maxChars: (label, value, max) => {
         const test = value.length <= max;
-        return test || !value ? '' : `${label} must contain ${max} characters or less`;
+        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;
+            const errors = result.errors.map((error, key) => error.replace('The password', '•').replace('.', ''));
+            console.log(errors);
+            return errors.join('\n');
         }
-        return '';
+        return true;
     },
     mobile: () => {
         let check = false;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vrobots/storybook",
   "private": false,
-  "version": "0.1.43",
+  "version": "0.1.45",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -30,7 +30,8 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dnd-touch-backend": "^16.0.1",
     "react-dom": "^19.2.0",
-    "react-icons": "^5.5.0"
+    "react-hook-form": "^7.71.2",
+    "react-icons": "^5.6.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.0",