@grantbii/design-system 1.0.36 → 1.0.37

package/core/molecules/Modal.d.ts

@@ -0,0 +1,12 @@
+import { MouseEventHandler, ReactElement, ReactNode } from "react";
+type ModalProps = {
+    clickable: (openModal: MouseEventHandler<HTMLButtonElement>) => ReactNode;
+    header?: ReactNode;
+    content: ReactElement;
+    footer?: ReactNode;
+    width?: string;
+    height?: string;
+    isFullScreen?: boolean;
+};
+declare const Modal: ({ clickable, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export default Modal;

package/core/molecules/Modal.js

@@ -0,0 +1,103 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 { Button } from "../atoms";
+import { Colors } from "../foundations";
+const Modal = (_a) => {
+    var { clickable } = _a, props = __rest(_a, ["clickable"]);
+    const [showModal, setShowModal] = useState(false);
+    const { lockScroll, unlockScroll } = useScrollLock();
+    const openModal = () => {
+        setShowModal(true);
+        lockScroll();
+    };
+    const closeModal = () => {
+        setShowModal(false);
+        unlockScroll();
+    };
+    return (_jsxs(_Fragment, { children: [clickable(openModal), showModal ? _jsx(PopUp, Object.assign({}, props, { closeModal: closeModal })) : _jsx(_Fragment, {})] }));
+};
+export default Modal;
+const useScrollLock = () => {
+    const lockScroll = useCallback(() => {
+        document.body.style.overflow = "hidden";
+    }, []);
+    const unlockScroll = useCallback(() => {
+        document.body.style.overflow = "initial";
+    }, []);
+    return {
+        lockScroll,
+        unlockScroll,
+    };
+};
+const PopUp = ({ header, content, footer, width, height, isFullScreen, closeModal, }) => (_jsx(Overlay, { children: _jsxs(ModalWindow, { "$isFullScreen": isFullScreen, "$width": width, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { "$isFullScreen": isFullScreen, "$height": height, children: content }), _jsxs(ModalFooter, { children: [_jsx(CancelButton, { onClick: () => closeModal() }), footer ? footer : _jsx(_Fragment, {})] })] }) }));
+const Overlay = styled.div `
+  background-color: ${Colors.semantic.overlay};
+
+  z-index: ${Number.MAX_SAFE_INTEGER};
+  position: fixed;
+  top: 0px;
+  left: 0px;
+
+  width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+const ModalWindow = styled.div `
+  background-color: ${Colors.base.white};
+  border-radius: ${({ $isFullScreen }) => ($isFullScreen ? 0 : 6)}px;
+
+  width: ${({ $isFullScreen, $width = "auto" }) => $isFullScreen ? "100%" : $width};
+
+  height: ${({ $isFullScreen }) => ($isFullScreen ? "100%" : "auto")};
+  min-height: 100px;
+`;
+const ModalHeader = styled.div `
+  font-weight: 500;
+  font-size: 18px;
+
+  padding: 12px 24px;
+  border-bottom: 1px solid ${Colors.neutral.grey3};
+`;
+const ModalBody = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  height: ${({ $isFullScreen, $height = "auto" }) => $isFullScreen ? "calc(100% - 160px)" : $height};
+
+  padding-top: 24px;
+
+  > * {
+    width: 100%;
+    height: 100%;
+
+    padding: 0px 24px;
+    border: none;
+
+    overflow-y: auto;
+  }
+`;
+const ModalFooter = styled.div `
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+
+  padding: 24px;
+`;
+const CancelButton = ({ onClick }) => (_jsx(Button, { text: "Cancel", onClick: onClick, backgroundColor: Colors.neutral.grey3, color: Colors.typography.blackHigh }));

package/core/molecules/index.d.ts

@@ -0,0 +1 @@
+export { default as Modal } from "./Modal";

package/core/molecules/index.js

@@ -0,0 +1 @@
+export { default as Modal } from "./Modal";

package/index.d.ts

@@ -2,3 +2,4 @@ export * from "./core/atoms";
 export * from "./core/foundations";
 export { default as GlobalStyle } from "./core/global/GlobalStyle";
 export * from "./core/integrations";
+export * from "./core/molecules";

package/index.js

@@ -2,3 +2,4 @@ export * from "./core/atoms";
 export * from "./core/foundations";
 export { default as GlobalStyle } from "./core/global/GlobalStyle";
 export * from "./core/integrations";
+export * from "./core/molecules";

package/package.json

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

package/stories/molecules/Modal.stories.d.ts

@@ -0,0 +1,8 @@
+import { Modal } from "@/.";
+import type { StoryObj } from "@storybook/nextjs-vite";
+import { Meta } from "@storybook/nextjs-vite";
+declare const meta: Meta<typeof Modal>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DesktopVersion: Story;
+export declare const MobileVersion: Story;

package/stories/molecules/Modal.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, Modal } from "@/.";
+const meta = {
+    title: "Molecules/Modal",
+    component: Modal,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+const text = "Grantbii is an AI-powered grant intelligence and matching platform that helps grant seekers effortlessly find, match, prep & apply for the right business grants - maximizing grant funding success with minimal effort. Our platform connects businesses with a trusted Grant Enabler Network - solution providers, consulting experts, and delivery partners - ensuring that every dollar of grant funding leads to real business transformation impact.";
+export const DesktopVersion = {
+    args: {
+        clickable: (openModal) => (_jsx(Button, { text: "Click to open modal", onClick: openModal })),
+        header: "What is Grantbii?",
+        content: _jsx("p", { children: text }),
+        width: "600px",
+    },
+};
+export const MobileVersion = {
+    args: {
+        clickable: (openModal) => (_jsx(Button, { text: "Click to open modal", onClick: openModal })),
+        header: "What is Grantbii?",
+        content: _jsx("p", { children: text }),
+        isFullScreen: true,
+    },
+};