@uxf/ui 1.0.0-beta.113 → 1.0.0-beta.115

package/css/modal.css

@@ -0,0 +1,69 @@
+.uxf-modal {
+    position: relative;
+    z-index: theme("zIndex.modal");
+
+    &__backdrop {
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        background-color: rgb(0 0 0 / 75%);
+    }
+
+    &__wrapper {
+        position: fixed;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        overflow-y: auto;
+    }
+
+    &__body {
+        display: flex;
+        min-height: 100%;
+        align-items: flex-end;
+        justify-content: center;
+        padding-top: theme("spacing.4");
+
+        @media screen(sm) {
+            align-items: center;
+            padding: theme("spacing.4");
+        }
+    }
+
+    &__panel {
+        position: relative;
+        width: 100%;
+        border-top-left-radius: theme("borderRadius.2xl");
+        border-top-right-radius: theme("borderRadius.2xl");
+        overflow: hidden;
+
+        :root .light & {
+            background-color: theme("colors.white");
+            color: theme("colors.black");
+        }
+
+        :root .dark & {
+            background-color: theme("colors.gray.900");
+            color: theme("colors.white");
+        }
+
+        @media screen(sm) {
+            border-radius: theme("borderRadius.2xl");
+        }
+    }
+
+    &--width-sm .uxf-modal__panel {
+        max-width: theme("maxWidth.sm");
+    }
+
+    &--width-default .uxf-modal__panel {
+        max-width: theme("maxWidth.lg");
+    }
+
+    &--width-lg .uxf-modal__panel {
+        max-width: theme("maxWidth.3xl");
+    }
+}

package/modal/modal-dialog.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+import { ModalWidths } from "@uxf/ui/modal/theme";
+export interface ModalDialogProps {
+    children: ReactNode;
+    onClose: () => void;
+    open: boolean;
+    width?: keyof ModalWidths;
+    className?: string;
+}
+export declare const ModalDialog: React.NamedExoticComponent<ModalDialogProps>;

package/modal/modal-dialog.js

@@ -0,0 +1,38 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalDialog = void 0;
+const react_1 = require("@headlessui/react");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_2 = __importStar(require("react"));
+exports.ModalDialog = (0, react_2.memo)((props) => {
+    var _a;
+    return (react_2.default.createElement(react_1.Dialog, { className: (0, cx_1.cx)("uxf-modal", "uxf-modal--width-" + ((_a = props.width) !== null && _a !== void 0 ? _a : "default"), props.className), open: props.open, onClose: props.onClose },
+        react_2.default.createElement(react_1.Dialog.Overlay, { className: "uxf-modal__backdrop" }),
+        react_2.default.createElement("div", { className: "uxf-modal__wrapper" },
+            react_2.default.createElement("div", { className: "uxf-modal__body" },
+                react_2.default.createElement(react_1.Dialog.Panel, { className: "uxf-modal__panel" }, props.children)))));
+});
+exports.ModalDialog.displayName = "ModalDialog";

package/modal/modal-service.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ModalProps, ModalRef } from "./modal";
+export declare function getModalRef(): import("react").RefObject<ModalRef>;
+export declare function openModal(modal: ModalProps): void;
+export declare function closeModal(): void;

package/modal/modal-service.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.closeModal = exports.openModal = exports.getModalRef = void 0;
+const react_1 = require("react");
+const modalRef = (0, react_1.createRef)();
+function getModalRef() {
+    return modalRef;
+}
+exports.getModalRef = getModalRef;
+function openModal(modal) {
+    if (modalRef.current) {
+        modalRef.current.open(modal);
+    }
+}
+exports.openModal = openModal;
+function closeModal() {
+    if (modalRef.current) {
+        modalRef.current.close();
+    }
+}
+exports.closeModal = closeModal;

package/modal/modal.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+import type { ModalDialogProps } from "./modal-dialog";
+export interface ModalProps {
+    children: ReactNode;
+    onClose?: () => void;
+    width?: ModalDialogProps["width"];
+    className?: ModalDialogProps["className"];
+}
+export interface ModalRef {
+    close: () => void;
+    open: (modal: ModalProps) => void;
+}
+export declare const Modal: React.ForwardRefExoticComponent<React.RefAttributes<ModalRef>>;

package/modal/modal.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = void 0;
+const react_1 = __importStar(require("react"));
+const modal_dialog_1 = require("./modal-dialog");
+exports.Modal = (0, react_1.forwardRef)((props, ref) => {
+    const [modal, setModal] = (0, react_1.useState)();
+    const open = (0, react_1.useCallback)((newModal) => setModal(newModal), []);
+    const close = (0, react_1.useCallback)(() => setModal(null), []);
+    const innerRef = (0, react_1.useRef)({
+        close,
+        open,
+    });
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        close: innerRef.current.close,
+        open: innerRef.current.open,
+    }), []);
+    const onClose = (0, react_1.useCallback)(() => {
+        setModal((prev) => {
+            if (prev === null || prev === void 0 ? void 0 : prev.onClose) {
+                prev.onClose();
+            }
+            return null;
+        });
+    }, []);
+    return modal ? (react_1.default.createElement(modal_dialog_1.ModalDialog, { open: !!modal, onClose: onClose, width: modal.width, className: modal.className }, modal.children)) : null;
+});
+exports.Modal.displayName = "Modal";

package/modal/modal.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<React.RefAttributes<import("./modal").ModalRef>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/modal/modal.stories.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const button_1 = require("@uxf/ui/button");
+const react_1 = __importDefault(require("react"));
+const modal_1 = require("./modal");
+const modal_service_1 = require("./modal-service");
+exports.default = {
+    title: "UI/Modal",
+    component: modal_1.Modal,
+};
+function Default() {
+    const storyModals = (react_1.default.createElement("div", { className: "light inline-flex flex-col space-y-4" },
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                children: (react_1.default.createElement("div", { className: "p-4" },
+                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - default size"),
+                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
+            }) }, "Click to open modal - default"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                children: (react_1.default.createElement("div", { className: "p-4" },
+                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - sm size"),
+                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
+                width: "sm",
+            }) }, "Click to open modal - sm"),
+        react_1.default.createElement(button_1.Button, { onClick: () => (0, modal_service_1.openModal)({
+                children: (react_1.default.createElement("div", { className: "p-4" },
+                    react_1.default.createElement("p", { className: "mb-3 text-lg font-bold" }, "Modal - lg size"),
+                    react_1.default.createElement(button_1.Button, { isFullWidth: true, onClick: modal_service_1.closeModal }, "Close modal"))),
+                width: "lg",
+            }) }, "Click to open modal - lg")));
+    return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
+        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storyModals),
+        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storyModals)));
+}
+exports.Default = Default;

package/modal/theme.d.ts

@@ -0,0 +1,5 @@
+export interface ModalWidths {
+    sm: true;
+    default: true;
+    lg: true;
+}

package/modal/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.113",
+  "version": "1.0.0-beta.115",
   "description": "",
   "publishConfig": {
     "access": "public"