dry-ux 1.70.0 → 1.72.0

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

@@ -1,6 +1,18 @@
 import * as React from "react";
 import { ModalProps } from "./Modal";
+/**
+ * Props for the UIUtilRenderer component.
+ */
 export type UIUtilRendererProps = {
+    /**
+     * Configuration for the modal.
+     */
     modalConfig?: ModalProps["config"];
 };
+/**
+ * UIUtilRenderer component that renders modals based on the UIUtil context.
+ *
+ * @param {UIUtilRendererProps} props - The props for the UIUtilRenderer component.
+ * @returns {JSX.Element} The UIUtilRenderer component.
+ */
 export declare const UIUtilRenderer: React.FC<UIUtilRendererProps>;

package/dist/ui-utils/UIUtilRenderer.js

@@ -4,6 +4,12 @@ exports.UIUtilRenderer = void 0;
 const React = require("react");
 const UIUtilProvider_1 = require("./UIUtilProvider");
 const Modal_1 = require("./Modal");
+/**
+ * UIUtilRenderer component that renders modals based on the UIUtil context.
+ *
+ * @param {UIUtilRendererProps} props - The props for the UIUtilRenderer component.
+ * @returns {JSX.Element} The UIUtilRenderer component.
+ */
 exports.UIUtilRenderer = React.memo(({ modalConfig = {} }) => {
     const { modal: { instances }, } = (0, UIUtilProvider_1.useUIUtilContext)();
     return (React.createElement(React.Fragment, null, Object.keys(instances).map(id => (React.createElement(Modal_1.default, { key: id, id: id, instance: instances[id], config: modalConfig })))));

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

@@ -1,20 +1,60 @@
 import * as React from "react";
 import "../styles/viewport.css";
+/**
+ * Enum representing different viewport sizes.
+ */
 export declare enum Viewport {
+    /** Extra small viewport size. (phones with smaller display) */
     XS = "xs",
+    /** Small viewport size. (phones) */
     SM = "sm",
+    /** Medium viewport size. (tablets) */
     MD = "md",
+    /** Large viewport size. (desktops) */
     LG = "lg"
 }
+/**
+ * Class representing the current viewport.
+ */
 export declare class CurrentViewport {
     private _current;
+    /**
+     * Creates an instance of CurrentViewport.
+     * @param {Viewport} _current - The current viewport size.
+     */
     constructor(_current: Viewport);
+    /**
+     * Checks if the current viewport is extra small.
+     * @returns {boolean} True if the current viewport is extra small, otherwise false.
+     */
     get isXS(): boolean;
+    /**
+     * Checks if the current viewport is small.
+     * @returns {boolean} True if the current viewport is small, otherwise false.
+     */
     get isSM(): boolean;
+    /**
+     * Checks if the current viewport is medium.
+     * @returns {boolean} True if the current viewport is medium, otherwise false.
+     */
     get isMD(): boolean;
+    /**
+     * Checks if the current viewport is large.
+     * @returns {boolean} True if the current viewport is large, otherwise false.
+     */
     get isLG(): boolean;
+    /**
+     * Gets the current viewport size.
+     * @returns {Viewport} The current viewport size.
+     */
     get current(): Viewport;
 }
+/**
+ * Component that detects the current viewport 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.
+ */
 export declare const ViewportDetect: React.FC<{
     onChange: (current: CurrentViewport) => void;
 }>;

package/dist/ui-utils/ViewportDetect.js

@@ -4,34 +4,75 @@ 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.
+ */
 var Viewport;
 (function (Viewport) {
+    /** Extra small viewport size. (phones with smaller display) */
     Viewport["XS"] = "xs";
+    /** Small viewport size. (phones) */
     Viewport["SM"] = "sm";
+    /** Medium viewport size. (tablets) */
     Viewport["MD"] = "md";
+    /** Large viewport size. (desktops) */
     Viewport["LG"] = "lg";
 })(Viewport || (exports.Viewport = Viewport = {}));
+/**
+ * Class representing the current viewport.
+ */
 class CurrentViewport {
+    /**
+     * Creates an instance of CurrentViewport.
+     * @param {Viewport} _current - The current viewport size.
+     */
     constructor(_current) {
         this._current = _current;
     }
+    /**
+     * Checks if the current viewport is extra small.
+     * @returns {boolean} True if the current viewport is extra small, otherwise false.
+     */
     get isXS() {
         return this._current === Viewport.XS;
     }
+    /**
+     * Checks if the current viewport is small.
+     * @returns {boolean} True if the current viewport is small, otherwise false.
+     */
     get isSM() {
         return this._current === Viewport.SM;
     }
+    /**
+     * Checks if the current viewport is medium.
+     * @returns {boolean} True if the current viewport is medium, otherwise false.
+     */
     get isMD() {
         return this._current === Viewport.MD;
     }
+    /**
+     * Checks if the current viewport is large.
+     * @returns {boolean} True if the current viewport is large, otherwise false.
+     */
     get isLG() {
         return this._current === Viewport.LG;
     }
+    /**
+     * Gets the current viewport size.
+     * @returns {Viewport} The current viewport size.
+     */
     get current() {
         return this._current;
     }
 }
 exports.CurrentViewport = CurrentViewport;
+/**
+ * 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);
@@ -40,6 +81,12 @@ const DetectionElement = ({ viewport, onVisibilityChange, }) => {
     }, [isVisible]);
     return React.createElement("div", { ref: ref, className: `dry-visible-${viewport}` });
 };
+/**
+ * Component that detects the current viewport 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.
+ */
 exports.ViewportDetect = React.memo(({ onChange }) => {
     const onVisibilityChange = (viewport, isVisible) => {
         if (isVisible) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dry-ux",
-  "version": "1.70.0",
+  "version": "1.72.0",
   "description": "",
   "main": "dist/index",
   "scripts": {
@@ -9,9 +9,12 @@
     "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",
+    "prepub:npm": "npm run format && npm run build && npm run update:version && npm run docs",
     "publish:npm": "npm run prepub:npm && npm publish",
-    "pack": "npm run build && npm pack --pack-destination pack/"
+    "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",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "repository": {
     "type": "git",
@@ -24,13 +27,25 @@
   "author": "Naved Rangwala",
   "license": "ISC",
   "devDependencies": {
-    "copyfiles": "^2.4.1",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.2",
+    "@chromatic-com/storybook": "^3.2.6",
+    "@storybook/addon-essentials": "^8.6.11",
+    "@storybook/addon-interactions": "^8.6.11",
+    "@storybook/addon-onboarding": "^8.6.11",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/blocks": "^8.6.11",
+    "@storybook/react": "^8.6.11",
+    "@storybook/react-webpack5": "^8.6.11",
+    "@storybook/test": "^8.6.11",
     "@types/react": "^17.0.0",
     "@types/react-bootstrap": "^0.32.25",
+    "copyfiles": "^2.4.1",
     "prettier": "^2.2.1",
+    "react": "^16.8.2",
+    "react-dom": "^16.8.2",
     "rimraf": "^3.0.2",
+    "storybook": "^8.6.11",
+    "typedoc": "^0.27.9",
+    "typedoc-plugin-markdown": "^4.4.2",
     "typescript": "*"
   },
   "dependencies": {