@vrobots/storybook 0.1.48 → 0.1.50

package/dist/package.json

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

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

@@ -0,0 +1,13 @@
+import { CardRootProps } from "@chakra-ui/react";
+export interface IAuth {
+    authCode: string;
+    rememberDevice: 'on' | false;
+}
+export interface ISecondFactorAuthProps extends CardRootProps {
+    title?: string;
+    description?: string;
+    onSecondFactorAuth: (auth: IAuth) => void;
+    onResendAuthCode: () => void;
+}
+declare const SecondFactorAuth: ({ title, description, onSecondFactorAuth, onResendAuthCode, ...props }: ISecondFactorAuthProps) => import("react/jsx-runtime").JSX.Element;
+export default SecondFactorAuth;

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

@@ -0,0 +1,10 @@
+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 { useForm } from "react-hook-form";
+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", colorScheme: "teal", width: "full", mt: 6, children: "SecondFactorAuth" })] })] }) }));
+};
+export default SecondFactorAuth;

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

@@ -1,6 +1,8 @@
 export * from "./Login";
+export * from "./SecondFactorAuth";
 declare const Form: {
     (): null;
     Login: ({ title, description, onLogin, ...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;
 };
 export default Form;

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

@@ -1,5 +1,8 @@
 import Login from "./Login";
+import SecondFactorAuth from "./SecondFactorAuth";
 export * from "./Login";
+export * from "./SecondFactorAuth";
 const Form = () => null;
 Form.Login = Login;
+Form.SecondFactorAuth = SecondFactorAuth;
 export default Form;

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

@@ -1,4 +1,5 @@
 export * from './ui/color-mode';
+export * from './ui/toaster';
 export * from './Accordion';
 export * from './AvatarIconMenu';
 export * from './Breadcrumbs';
@@ -11,4 +12,5 @@ export * from './Page';
 export * from './Section';
 export * from './Sidebar';
 export * from './Timeline';
+export * from './form/Login';
 export { default as Form } from './form';

package/dist/src/components/index.js

@@ -1,4 +1,5 @@
 export * from './ui/color-mode';
+export * from './ui/toaster';
 export * from './Accordion';
 export * from './AvatarIconMenu';
 export * from './Breadcrumbs';
@@ -11,4 +12,5 @@ export * from './Page';
 export * from './Section';
 export * from './Sidebar';
 export * from './Timeline';
+export * from './form/Login';
 export { default as Form } from './form';

package/dist/src/components/ui/toaster.d.ts

@@ -0,0 +1,2 @@
+export declare const toaster: import("@zag-js/toast").Store<any>;
+export declare const Toaster: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/ui/toaster.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toaster as ChakraToaster, Portal, Spinner, Stack, Toast, createToaster, } from "@chakra-ui/react";
+export const toaster = createToaster({
+    placement: "top-end",
+    pauseOnPageIdle: true,
+});
+export const Toaster = () => {
+    return (_jsx(Portal, { children: _jsx(ChakraToaster, { toaster: toaster, insetInline: { mdDown: "4" }, children: (toast) => (_jsxs(Toast.Root, { width: { md: "sm" }, children: [toast.type === "loading" ? (_jsx(Spinner, { size: "sm", color: "blue.solid" })) : (_jsx(Toast.Indicator, {})), _jsxs(Stack, { gap: "1", flex: "1", maxWidth: "100%", children: [toast.title && _jsx(Toast.Title, { children: toast.title }), toast.description && (_jsx(Toast.Description, { children: toast.description }))] }), toast.action && (_jsx(Toast.ActionTrigger, { children: toast.action.label })), toast.closable && _jsx(Toast.CloseTrigger, {})] })) }) }));
+};

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, ...props }: import("../components/form").ILoginProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ title, description, onLogin, ...props }: import("../components").ILoginProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

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

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ title, description, onSecondFactorAuth, onResendAuthCode, ...props }: import("../components/form").ISecondFactorAuthProps) => 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/SecondFactorAuth.stories.js

@@ -0,0 +1,21 @@
+import { Form } from '../components';
+const meta = {
+    title: 'Forms/SecondFactorAuth',
+    component: Form.SecondFactorAuth,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    args: {
+        title: "SecondFactorAuth",
+    }
+};
+export default meta;
+export const Component = {
+    args: {
+        title: "Second FactorAuth Form",
+        description: "Please enter your auth code to continue",
+        onSecondFactorAuth: (data) => console.log(data),
+        onResendAuthCode: () => console.log("Resend auth code")
+    }
+};

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

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: () => 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/Toaster.stories.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toaster, Toaster } from '../components';
+import React from 'react';
+import { Button } from '@chakra-ui/react';
+const meta = {
+    title: 'Feedback/Toaster',
+    component: Toaster,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    args: {
+        title: "Toaster",
+    }
+};
+export default meta;
+export const Component = {
+    args: {
+        title: "Toaster",
+        description: "Please enter your credentials to continue",
+        onToaster: (data) => console.log(data)
+    },
+    decorators: [
+        (Story) => {
+            return (_jsxs(React.Fragment, { children: [_jsx(Story, {}), _jsx(Button, { variant: "outline", size: "sm", onClick: () => toaster.create({
+                            description: "File saved successfully",
+                            type: "info",
+                            closable: true,
+                        }), children: "Show Toast" })] }));
+        },
+    ],
+};

package/package.json

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