dry-ux 1.87.0 → 1.89.0

package/README.md

@@ -0,0 +1,65 @@
+## dry-ux
+
+[![npm version](https://img.shields.io/npm/v/dry-ux.svg)](https://www.npmjs.com/package/dry-ux)
+
+**dry-ux** is a comprehensive utility library designed for React applications. It offers a collection of reusable components, hooks, and utilities aimed at enhancing the development experience. The library includes features such as deferred rendering, error boundaries, loaders, storage utilities, and validation helpers. By promoting a DRY (Don't Repeat Yourself) approach, **dry-ux** helps developers avoid redundancy and streamline their codebase.
+
+### Installation
+
+```bash
+npm install dry-ux
+```
+
+### Quick Start
+
+```tsx
+import { DryUXProvider, useDryUxContext } from "dry-ux";
+
+const App = () => (
+    <DryUXProvider>
+        <MyApp />
+    </DryUXProvider>
+);
+```
+
+### Key Features
+
+- **Modal System** - Programmatic modals with alerts, confirms, actions, overlays, and draggable support
+- **Deferred Rendering** - Optimize performance by rendering components only when visible
+- **Error Boundaries** - Customizable error boundaries with fallback UI
+- **Form Validation** - Declarative validation for inputs, selects, and textareas
+- **Loaders** - Fullscreen and custom loader management
+- **Storage Utilities** - Simplified local/session storage interactions
+- **Currency Formatting** - Money display and currency input components
+- **Viewport Detection** - Responsive breakpoint detection via context
+
+### Usage
+
+Access UI utilities anywhere via the `useDryUxContext` hook:
+
+```tsx
+const MyComponent = () => {
+    const { modal, loader } = useDryUxContext();
+
+    const openModal = () =>
+        modal.show({
+            title: "Hello",
+            content: <div>Modal content here</div>,
+            width: 400,
+            draggable: true,
+        });
+
+    return <button onClick={openModal}>Open Modal</button>;
+};
+```
+
+### Documentation
+
+For a detailed overview of all available classes, interfaces, type aliases, variables, and functions, refer to the [API Documentation](https://navedr.github.io/dry-ux/).
+
+Check out the [demo](https://navedr.github.io/dry-ux/demo) for live examples.
+
+### Requirements
+
+- React >= 16.8.0
+- react-dom >= 16.8.0

package/dist/styles/modal.css

@@ -72,6 +72,35 @@
     cursor: move;
 }
 
+.dry-ux-modal .modal-header .dry-ux-modal-header-right {
+    float: right;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: -2px;
+}
+
+.dry-ux-modal .modal-header .dry-ux-modal-header-right .close {
+    float: none;
+    margin-top: 0;
+}
+
+.dry-ux-modal .modal-header .dry-ux-modal-header-action {
+    background: none;
+    border: none;
+    padding: 0 3px;
+    cursor: pointer;
+    line-height: 1;
+    color: inherit;
+    opacity: 0.4;
+    display: flex;
+    align-items: center;
+}
+
+.dry-ux-modal .modal-header .dry-ux-modal-header-action:hover {
+    opacity: 1;
+}
+
 .dry-ux-modal-backdrop {
     position: fixed!important;
     top: 0!important;

package/dist/ui-utils/Modal.js

@@ -12,7 +12,7 @@ const useDraggable_1 = require("./useDraggable");
  * @param {ModalProps} props - The props for the Modal component.
  * @returns {JSX.Element} The Modal component.
  */
-const Modal = ({ id, instance: { handleClose, toggleOverlay, shown, overlay, key: instanceKey, options: { content, footerContent, cssClass = "", closeBtn, title, width, onClose, titleCloseBtn = true, centered, trackingId, draggable, actions = [], }, }, config: { defaultModalStyles = false, styles = {}, centered: globalCentered, draggable: globalDraggable, onOpen, onClose: globalOnClose, }, providerId, debug, }) => {
+const Modal = ({ id, instance: { handleClose, toggleOverlay, shown, overlay, key: instanceKey, options: { content, footerContent, cssClass = "", closeBtn, title, width, onClose, titleCloseBtn = true, centered, trackingId, draggable, actions = [], headerActions = [], }, }, config: { defaultModalStyles = false, styles = {}, centered: globalCentered, draggable: globalDraggable, onOpen, onClose: globalOnClose, }, providerId, debug, }) => {
     const isCentered = centered !== null && centered !== void 0 ? centered : globalCentered;
     const isDraggable = !!(draggable !== null && draggable !== void 0 ? draggable : globalDraggable) && !!title;
     const draggableClass = isDraggable ? `dry-ux-draggable-${id}` : "";
@@ -78,8 +78,15 @@ const Modal = ({ id, instance: { handleClose, toggleOverlay, shown, overlay, key
     return (React.createElement(react_bootstrap_1.Modal, { onHide: onHide, show: shown, animation: true, autoFocus: true, keyboard: false, className: modalCssClass, backdropClassName: "dry-ux-modal-backdrop", backdrop: "static" },
         overlay && (React.createElement("div", { className: "dry-ux-overlay" },
             React.createElement("div", { className: "dry-ux-overlay-content" }, overlay))),
-        !!title && (React.createElement(react_bootstrap_1.Modal.Header, { closeButton: titleCloseBtn, onHide: onHide },
-            React.createElement(react_bootstrap_1.Modal.Title, null, title))),
+        (!!title || !!(headerActions === null || headerActions === void 0 ? void 0 : headerActions.length)) && (React.createElement(react_bootstrap_1.Modal.Header, { closeButton: !(headerActions === null || headerActions === void 0 ? void 0 : headerActions.length) && titleCloseBtn, onHide: onHide },
+            !!(headerActions === null || headerActions === void 0 ? void 0 : headerActions.length) && (React.createElement("div", { className: "dry-ux-modal-header-right" },
+                headerActions.map(({ content: actionContent, onClick, title: actionTitle, className = "" }, index) => (React.createElement("button", { key: index, className: (0, classSet_1.classSet)({
+                        "dry-ux-modal-header-action": true,
+                        [className]: !!className,
+                    }), onClick: onClick, title: actionTitle, type: "button" }, actionContent))),
+                titleCloseBtn && (React.createElement("button", { type: "button", className: "close", onClick: onHide },
+                    React.createElement("span", { "aria-hidden": "true" }, "\u00D7"))))),
+            !!title && React.createElement(react_bootstrap_1.Modal.Title, null, title))),
         React.createElement(react_bootstrap_1.Modal.Body, null, contentToRender),
         showFooter && (React.createElement(react_bootstrap_1.Modal.Footer, null,
             footerContent,

package/dist/ui-utils/UIUtil.interface.d.ts

@@ -91,6 +91,27 @@ export type PopUpInstance = {
      */
     toggleOverlay: (id: string, content?: Content) => void;
 };
+/**
+ * Represents an action displayed in the modal header (next to the close button).
+ */
+export type PopUpHeaderAction = {
+    /**
+     * The content to display in the header action button.
+     */
+    content: Content;
+    /**
+     * Function to call when the header action is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * Tooltip text for the header action button.
+     */
+    title?: string;
+    /**
+     * Additional CSS class for the header action button.
+     */
+    className?: string;
+};
 /**
  * Represents an action for a PopUp.
  */
@@ -172,6 +193,10 @@ export type PopUpOptions = {
      * If true, the modal will be shown.
      */
     actions?: PopUpAction[];
+    /**
+     * Actions rendered in the modal header, next to the close button.
+     */
+    headerActions?: PopUpHeaderAction[];
 };
 /**
  * Represents a utility for managing UI modals.

package/dist/ui-utils/ViewportDetect.d.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import "../styles/viewport.css";
 /**
  * Enum representing different viewport sizes.
  */
@@ -50,10 +49,10 @@ export declare class CurrentViewport {
     get current(): Viewport;
 }
 /**
- * Component that detects the current viewport and triggers a callback on change.
+ * Component that detects the current viewport using matchMedia and triggers a callback on change.
  * @param {Object} props - The component props.
  * @param {function(CurrentViewport): void} props.onChange - Callback function to handle viewport change.
- * @returns {JSX.Element} The viewport detection component.
+ * @returns {null} This component renders nothing.
  */
 export declare const ViewportDetect: React.FC<{
     onChange: (current: CurrentViewport) => void;

package/dist/ui-utils/ViewportDetect.js

@@ -2,8 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViewportDetect = exports.CurrentViewport = exports.Viewport = void 0;
 const React = require("react");
-require("../styles/viewport.css");
-const utilities_1 = require("../helpers/utilities");
 /**
  * Enum representing different viewport sizes.
  */
@@ -66,34 +64,39 @@ class CurrentViewport {
     }
 }
 exports.CurrentViewport = CurrentViewport;
+const breakpoints = [
+    { viewport: Viewport.XS, query: "(max-width: 767px)" },
+    { viewport: Viewport.SM, query: "(min-width: 768px) and (max-width: 991px)" },
+    { viewport: Viewport.MD, query: "(min-width: 992px) and (max-width: 1199px)" },
+    { viewport: Viewport.LG, query: "(min-width: 1200px)" },
+];
 /**
- * Component that detects the visibility of a viewport element.
- * @param {Object} props - The component props.
- * @param {Viewport} props.viewport - The viewport size.
- * @param {function(boolean): void} props.onVisibilityChange - Callback function to handle visibility change.
- * @returns {JSX.Element} The detection element.
- */
-const DetectionElement = ({ viewport, onVisibilityChange, }) => {
-    const ref = React.useRef(null);
-    const isVisible = (0, utilities_1.useIsVisible)(ref);
-    React.useEffect(() => {
-        onVisibilityChange(isVisible);
-    }, [isVisible]);
-    return React.createElement("div", { ref: ref, className: `dry-visible-${viewport}` });
-};
-/**
- * Component that detects the current viewport and triggers a callback on change.
+ * Component that detects the current viewport using matchMedia and triggers a callback on change.
  * @param {Object} props - The component props.
  * @param {function(CurrentViewport): void} props.onChange - Callback function to handle viewport change.
- * @returns {JSX.Element} The viewport detection component.
+ * @returns {null} This component renders nothing.
  */
 exports.ViewportDetect = React.memo(({ onChange }) => {
-    const onVisibilityChange = (viewport, isVisible) => {
-        if (isVisible) {
-            onChange(new CurrentViewport(viewport));
-        }
-    };
-    return (React.createElement(React.Fragment, null, Object.keys(Viewport)
-        .map(v => Viewport[v])
-        .map((viewport) => (React.createElement(DetectionElement, { key: viewport, viewport: viewport, onVisibilityChange: isVisible => onVisibilityChange(viewport, isVisible) })))));
+    const onChangeRef = React.useRef(onChange);
+    onChangeRef.current = onChange;
+    React.useEffect(() => {
+        const listeners = [];
+        breakpoints.forEach(({ viewport, query }) => {
+            const mql = window.matchMedia(query);
+            const handler = (e) => {
+                if (e.matches) {
+                    onChangeRef.current(new CurrentViewport(viewport));
+                }
+            };
+            handler(mql);
+            mql.addEventListener("change", handler);
+            listeners.push({ mql, handler });
+        });
+        return () => {
+            listeners.forEach(({ mql, handler }) => {
+                mql.removeEventListener("change", handler);
+            });
+        };
+    }, []);
+    return null;
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dry-ux",
-  "version": "1.87.0",
+  "version": "1.89.0",
   "description": "",
   "main": "dist/index",
   "scripts": {