dry-ux 1.86.0 → 1.88.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/ui-utils/Modal.js

@@ -12,11 +12,11 @@ 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, 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 = [], }, }, 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}` : "";
-    (0, useDraggable_1.useDraggable)(isDraggable, shown, `dry-ux-draggable-${id}`);
+    (0, useDraggable_1.useDraggable)(isDraggable, shown, `dry-ux-draggable-${id}`, instanceKey);
     const applyStyles = React.useCallback(() => {
         document.querySelectorAll(".modal-dialog").forEach((el) => {
             el.style.width = typeof width == "number" ? `${width}px` : width;

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

@@ -69,6 +69,10 @@ export type PopUpInstance = {
      * Indicates whether the PopUp is shown.
      */
     shown: boolean;
+    /**
+     * @internal Unique key that changes each time the instance is created/replaced.
+     */
+    key?: number;
     /**
      * The overlay content for the PopUp.
      */

package/dist/ui-utils/UIUtilProvider.js

@@ -248,6 +248,7 @@ class UIUtilProvider extends React.PureComponent {
         instances[id] = {
             options,
             shown: false,
+            key: Date.now(),
             handleClose: this.toggleModalInstance.bind(this),
             toggleOverlay: this.toggleModalOverlay.bind(this),
         };

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) })))));
+    React.useEffect(() => {
+        const listeners = [];
+        breakpoints.forEach(({ viewport, query }) => {
+            const mql = window.matchMedia(query);
+            const handler = (e) => {
+                if (e.matches) {
+                    onChange(new CurrentViewport(viewport));
+                }
+            };
+            // Check initial state
+            handler(mql);
+            // Listen for changes
+            mql.addEventListener("change", handler);
+            listeners.push({ mql, handler });
+        });
+        return () => {
+            listeners.forEach(({ mql, handler }) => {
+                mql.removeEventListener("change", handler);
+            });
+        };
+    }, [onChange]);
+    return null;
 });

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

@@ -6,5 +6,6 @@
  * @param enabled - Whether dragging is enabled.
  * @param shown - Current shown state; position resets when modal reopens.
  * @param modalClass - Unique CSS class on the modal to identify it.
+ * @param modalKey - When this value changes, drag position resets (e.g. when one modal replaces another).
  */
-export declare const useDraggable: (enabled: boolean, shown: boolean, modalClass: string) => void;
+export declare const useDraggable: (enabled: boolean, shown: boolean, modalClass: string, modalKey: number) => void;

package/dist/ui-utils/useDraggable.js

@@ -10,8 +10,9 @@ const React = require("react");
  * @param enabled - Whether dragging is enabled.
  * @param shown - Current shown state; position resets when modal reopens.
  * @param modalClass - Unique CSS class on the modal to identify it.
+ * @param modalKey - When this value changes, drag position resets (e.g. when one modal replaces another).
  */
-const useDraggable = (enabled, shown, modalClass) => {
+const useDraggable = (enabled, shown, modalClass, modalKey) => {
     const cleanupRef = React.useRef(null);
     React.useEffect(() => {
         if (cleanupRef.current) {
@@ -69,6 +70,6 @@ const useDraggable = (enabled, shown, modalClass) => {
                 cleanupRef.current = null;
             }
         };
-    }, [enabled, shown, modalClass]);
+    }, [enabled, shown, modalClass, modalKey]);
 };
 exports.useDraggable = useDraggable;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dry-ux",
-  "version": "1.86.0",
+  "version": "1.88.0",
   "description": "",
   "main": "dist/index",
   "scripts": {
@@ -9,7 +9,7 @@
     "watch": "rimraf dist/ && tsc --watch",
     "format": "prettier --write \"src/**/*.ts\" \"src/**/*.tsx\"",
     "update:version": "npm version minor --no-git-tag-version",
-    "prepub:npm": "npm run format && npm run build && npm run update:version && npm run docs",
+    "prepub:npm": "npm run format && npm run build && npm run update:version",
     "publish:npm": "npm run prepub:npm && npm publish",
     "pack": "npm run build && npm pack --pack-destination pack/",
     "docs": "typedoc --options typedoc.json && cd test && npm run build:test && cp -r proddist ../htmldocs/demo",