@grantbii/design-system 1.0.61 → 1.0.62

package/core/atoms/PageLoader.d.ts

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

package/core/atoms/PageLoader.js

@@ -10,15 +10,15 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { MoonLoader } from "react-spinners";
+import { MoonLoader, PacmanLoader } from "react-spinners";
 import styled from "styled-components";
 import { Colors } from "../foundations";
 /**
  * The animation to show when loading the whole page
  */
 const PageLoader = (_a) => {
-    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)) }));
+    var { isPacman = false, color = Colors.accent.blue1, size } = _a, restOfProps = __rest(_a, ["isPacman", "color", "size"]);
+    return (_jsx(Background, { children: isPacman ? (_jsx(PacmanLoader, Object.assign({ color: color, size: size ? size : 20 }, restOfProps))) : (_jsx(MoonLoader, Object.assign({ color: color, size: size ? size : 32 }, restOfProps))) }));
 };
 export default PageLoader;
 const Background = styled.div `
@@ -26,6 +26,6 @@ const Background = styled.div `
   align-items: center;
   justify-content: center;
 
-  width: ${({ $pageWidth = "100%" }) => $pageWidth};
-  height: ${({ $pageHeight = "100%" }) => $pageHeight};
+  width: 100%;
+  height: 100%;
 `;

package/core/molecules/Modal.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { Button } from "../atoms";
 import { Colors } from "../foundations";
 const Modal = ({ header, content, footer, width, height, isFullScreen, onClickCancel, }) => (_jsx(Overlay, { "$isFullScreen": isFullScreen, children: _jsxs(ModalWindow, { "$isFullScreen": isFullScreen, "$width": width, "$height": height, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: content }), _jsxs(ModalFooter, { children: [_jsx(CancelButton, { onClick: onClickCancel }), footer ? footer : _jsx(_Fragment, {})] })] }) }));
@@ -55,6 +55,14 @@ const ModalWindow = styled.div `
 
   min-height: 100px;
   max-height: 100vh;
+
+  ${({ $isFullScreen = false }) => $isFullScreen
+    ? css `
+          position: fixed;
+          bottom: 0px;
+          left: 0px;
+        `
+    : ""}
 `;
 const ModalHeader = styled.div `
   font-weight: 500;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.61",
+  "version": "1.0.62",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {
@@ -18,7 +18,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@grantbii/ui-base": "1.0.14",
+    "@grantbii/ui-base": "1.0.16",
     "@phosphor-icons/react": "^2.1.10",
     "country-flag-icons": "^1.5.19",
     "next": "^15.3.5",

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

@@ -1,6 +1,10 @@
 import { Meta, StoryObj } from "@storybook/nextjs-vite";
-declare const PageLoaderExample: () => import("react/jsx-runtime").JSX.Element;
+type PageLoaderExampleProps = {
+    isPacman?: boolean;
+};
+declare const PageLoaderExample: ({ isPacman }: PageLoaderExampleProps) => 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;
+export declare const GrantbiiApp: Story;
+export declare const AdminConsole: Story;

package/stories/atoms/PageLoader.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PageLoader } from "@/.";
 import styled from "styled-components";
-const PageLoaderExample = () => (_jsx(BaseExample, { children: _jsx(PageLoader, {}) }));
+const PageLoaderExample = ({ isPacman }) => (_jsx(BaseExample, { children: _jsx(PageLoader, { isPacman: isPacman }) }));
 const BaseExample = styled.div `
   width: 100vw;
   height: 100vh;
@@ -15,6 +15,9 @@ const meta = {
     },
 };
 export default meta;
-export const Default = {
+export const GrantbiiApp = {
     args: {},
 };
+export const AdminConsole = {
+    args: { isPacman: true },
+};