@grantbii/design-system 1.0.60 → 1.0.61

package/core/atoms/PageLoader.d.ts

@@ -1,6 +1,10 @@
 import { LoaderSizeProps } from "react-spinners/helpers/props";
+type PageLoaderProps = {
+    pageWidth?: string;
+    pageHeight?: string;
+} & LoaderSizeProps;
 /**
  * The animation to show when loading the whole page
  */
-declare const PageLoader: ({ color, size, ...restOfProps }: LoaderSizeProps) => import("react/jsx-runtime").JSX.Element;
+declare const PageLoader: ({ pageWidth, pageHeight, color, size, ...restOfProps }: PageLoaderProps) => import("react/jsx-runtime").JSX.Element;
 export default PageLoader;

package/core/atoms/PageLoader.js

@@ -17,10 +17,15 @@ import { Colors } from "../foundations";
  * The animation to show when loading the whole page
  */
 const PageLoader = (_a) => {
-    var { color = Colors.accent.blue1, size = 32 } = _a, restOfProps = __rest(_a, ["color", "size"]);
-    return (_jsx(BasePageLoader, { children: _jsx(MoonLoader, Object.assign({ color: color, size: size }, restOfProps)) }));
+    var { pageWidth, pageHeight, color = Colors.accent.blue1, size = 32 } = _a, restOfProps = __rest(_a, ["pageWidth", "pageHeight", "color", "size"]);
+    return (_jsx(Background, { "$pageWidth": pageWidth, "$pageHeight": pageHeight, children: _jsx(MoonLoader, Object.assign({ color: color, size: size }, restOfProps)) }));
 };
 export default PageLoader;
-const BasePageLoader = styled.div `
-  margin: auto;
+const Background = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: ${({ $pageWidth = "100%" }) => $pageWidth};
+  height: ${({ $pageHeight = "100%" }) => $pageHeight};
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.60",
+  "version": "1.0.61",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {

package/stories/atoms/PageLoader.stories.d.ts

@@ -1,6 +1,6 @@
-import { PageLoader } from "@/.";
 import { Meta, StoryObj } from "@storybook/nextjs-vite";
-declare const meta: Meta<typeof PageLoader>;
+declare const PageLoaderExample: () => import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof PageLoaderExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

package/stories/atoms/PageLoader.stories.js

@@ -1,10 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PageLoader } from "@/.";
+import styled from "styled-components";
+const PageLoaderExample = () => (_jsx(BaseExample, { children: _jsx(PageLoader, {}) }));
+const BaseExample = styled.div `
+  width: 100vw;
+  height: 100vh;
+`;
 const meta = {
     title: "Atoms/Page Loader",
-    component: PageLoader,
+    component: PageLoaderExample,
     tags: ["autodocs"],
     parameters: {
-        layout: "centered",
+        layout: "fullscreen",
     },
 };
 export default meta;