@vrobots/storybook 0.2.5 → 0.2.7

package/dist/package.json

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

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

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+export interface ILoaderProps {
+    component?: ReactNode;
+    isLoading?: boolean;
+    isFullscreen?: boolean;
+    hideBackground?: boolean;
+    children?: React.ReactNode;
+}
+export declare const Loader: ({ isLoading, isFullscreen, component, hideBackground, children }: ILoaderProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;

package/dist/src/components/Loader.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Spinner } from "@chakra-ui/react";
+export const Loader = ({ isLoading, isFullscreen, component, hideBackground, children }) => {
+    if (!!isLoading) {
+        return (_jsx(Box, { style: {
+                position: isFullscreen ? 'fixed' : 'absolute',
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0,
+                zIndex: 100000,
+                maxHeight: '100vh',
+                display: 'flex',
+            }, bgColor: !hideBackground ? { _light: 'blue.50', _dark: 'gray.900' } : 'transparent', children: _jsxs(Box, { m: 'auto', children: [component && component, _jsx(Spinner, { position: 'static', m: 'auto' })] }) }));
+    }
+    return children ?? null;
+};

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

@@ -1,6 +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 }) }) }) }));
+    return (_jsx(Box, { as: "form", display: "flex", justifyContent: "center", alignItems: "center", height: `100%`, bg: "neu.bg", px: 4, ...props, 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/index.d.ts

@@ -8,6 +8,7 @@ export * from './Display';
 export * from './FoldersAndFiles';
 export * from './Frame';
 export * from './Header';
+export * from './Loader';
 export * from './Logo';
 export * from './Menu';
 export * from './Page';

package/dist/src/components/index.js

@@ -8,6 +8,7 @@ export * from './Display';
 export * from './FoldersAndFiles';
 export * from './Frame';
 export * from './Header';
+export * from './Loader';
 export * from './Logo';
 export * from './Menu';
 export * from './Page';

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

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ isLoading, isFullscreen, component, hideBackground, children }: import("../components").ILoaderProps) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        isLoading: true;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Fullscreen: Story;
+export declare const NoBackground: Story;
+export declare const CustomComponent: Story;
+export declare const NotLoading: Story;

package/dist/src/stories/Loader.stories.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from '@chakra-ui/react';
+import { Loader } from '../components';
+const meta = {
+    title: 'Feedback/Loader',
+    component: Loader,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    args: {
+        isLoading: true,
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        isLoading: true,
+    },
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export const Fullscreen = {
+    args: {
+        isLoading: true,
+        isFullscreen: true,
+    },
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export const NoBackground = {
+    args: {
+        isLoading: true,
+        hideBackground: true,
+    },
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export const CustomComponent = {
+    args: {
+        isLoading: true,
+        component: _jsx(Text, { fontWeight: "bold", mb: 2, children: "Loading your data\u2026" }),
+    },
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export const NotLoading = {
+    name: 'Not Loading — renders children',
+    args: {
+        isLoading: false,
+        children: (_jsx(Box, { p: 6, borderWidth: "1px", borderRadius: "md", children: _jsx(Text, { children: "Content is visible because isLoading is false." }) })),
+    },
+};

package/package.json

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