josenanodev-react-components-library 1.10.4 → 1.11.0

package/dist/esm/types/components/Multicalendar/types.d.ts

@@ -1,27 +1,51 @@
 export interface MulticalendarProps {
+    /** Stable DOM and sessionStorage id. Use a unique value per calendar instance. */
     multicalendarId: string;
+    /** Component rendered inside every visible date/resource grid cell. */
     ReactCellChildren: ReactCellChildren;
+    /** Component rendered for each visible row in the left resource axis. */
     ReactListElementChildren: ReactListElementChildren;
+    /** Resource ids displayed as rows in the calendar. */
     listElementsIdsArray: string[] | number[];
+    /** Language used by toolbar controls and date labels. */
     language?: "es_ES" | "en_EN";
+    /** Whether dates before today are available in the horizontal range. */
     pastDatesVisible?: boolean;
+    /** Width in pixels for each date cell. */
     cellsWidth?: number;
+    /** Height in pixels for each resource row. */
     cellsHeight?: number;
+    /** Width in pixels of the left resource axis. */
     verticalAxisWidth?: number;
+    /** Reserved height setting for the top date axis. */
     horizontalAxisHeight?: number;
+    /** Initial number of past days rendered in the scrollable range. */
     pastDaysInitialQuantity?: number;
+    /** Initial number of future days rendered in the scrollable range. */
     futureDaysInitialQuantity?: number;
+    /** Extra horizontal cells rendered outside the viewport to reduce blank space while scrolling. */
     chunkRenderX?: number;
+    /** Extra vertical rows rendered outside the viewport to reduce blank space while scrolling. */
     chunkRenderY?: number;
+    /** Auto-scrolls while dragging near grid edges. */
     authomaticScrollOnDraggingOverEdges?: boolean;
+    /** Extends the date range when users scroll near the horizontal boundaries. */
     dynamicDaysQuantity?: boolean;
+    /** Debounce time in milliseconds before callsOnScrollingStops runs. */
     waitTimeForCalls?: number;
+    /** Called once after the initial visible ids and dates are available. */
     callsOnInitialView?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
+    /** Called after scrolling settles with currently visible ids and dates. */
     callsOnScrollingStops?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
+    /** Extra controls rendered in the toolbar beside date navigation. */
     aditionalControlsComponents?: React.ReactNode | React.ReactNode[];
+    /** Custom content rendered in the upper-left corner above the resource axis. */
     upperLeftComponent?: React.ReactNode;
+    /** Persists scroll position in sessionStorage using multicalendarId. */
     autoSavePosition?: boolean;
+    /** Called whenever the vertical scroll position changes. */
     onScrollTopChanges?: (scrollTop: number) => void;
+    /** Called whenever the horizontal scroll position changes. */
     onScrollLeftChanges?: (scrollLeft: number) => void;
 }
 export interface RenderCoordinates {
@@ -33,12 +57,14 @@ export type ReactListElementChildren = React.ElementType<ListElementChildrenProp
 export type CellChildrenProps = {
     [key: string]: any;
 } & {
-    /**Date in SQL format, i.e. 1993-03-29 */
+    /** Date in SQL format, for example 1993-03-29. */
     date: string;
+    /** Row/resource id for the cell being rendered. */
     listElementId: string | number;
 };
 export type ListElementChildrenProps = {
     [key: string]: any;
 } & {
+    /** Row/resource id for the list element being rendered. */
     listElementId: string | number;
 };

package/dist/esm/types/components/ScreenSteps/ScreenSteps.d.ts

@@ -1,14 +1,22 @@
 import React from "react";
 type Step = {
+    /** React panel rendered for this step. */
     component: React.ReactNode;
+    /** Text rendered inside the step navigation marker. */
     innerText: string;
+    /** Optional descriptive text rendered above the active step panel. */
     outterText?: string;
 };
 type ScreenStepsProps = {
+    /** Ordered list of steps in the flow. */
     steps: Step[];
+    /** Initial active step index. */
     defaultStep?: number;
+    /** Called when the active step changes through user navigation. */
     onStepChange?: (step: number) => void;
+    /** Allows users to click step markers to navigate. */
     canNavigate?: boolean;
+    /** Controlled active step index from the parent. */
     overrideStep?: number;
 };
 declare const ScreenSteps: ({ steps, defaultStep, onStepChange, canNavigate, overrideStep, }: ScreenStepsProps) => React.JSX.Element;

package/dist/esm/types/components/ScrollSnapGallery/ScrollSnapGallery.d.ts

@@ -1,16 +1,27 @@
 import React from "react";
 import { IconType } from "react-icons/lib";
 type ScrollSnapGalleryProps = {
+    /** Image URLs rendered as slides. */
     urls: string[];
+    /** Optional alt text array matched by slide index. */
     alts?: string[];
+    /** CSS width applied to the scroll frame. */
     width?: string;
+    /** CSS height applied to the scroll frame. */
     height?: string;
+    /** Icon component used for position indicators. */
     IndicatorIcon?: IconType;
+    /** Number of indicator icons emphasized at one time. */
     positionIndicatorSize?: number;
+    /** Indicator icon size in pixels. */
     iconSize?: number;
+    /** Shows previous and next arrow controls. */
     showArrows?: boolean;
+    /** Inline styles applied to the image frame. */
     frameStyle?: React.CSSProperties;
+    /** Called with the active slide index after scrolling. */
     onSlideChange?: (index: number) => void;
+    /** Automatically advances the gallery every 3 seconds. */
     autoChange?: boolean;
 };
 declare const ScrollSnapGallery: ({ urls, alts, width, height, IndicatorIcon, positionIndicatorSize, iconSize, showArrows, frameStyle, onSlideChange, autoChange, }: ScrollSnapGalleryProps) => React.JSX.Element;

package/dist/esm/types/components/StackedCards/StackedCards.d.ts

@@ -1,15 +1,24 @@
 import React from "react";
 type Card = {
+    /** Header content rendered at the top of the card. */
     title: React.ReactNode;
+    /** Main content rendered inside the card body. */
     content: React.ReactNode;
 };
 type StackedCardsProps = {
+    /** Cards available in the stack. */
     cards: Card[];
+    /** Initial selected card index. */
     initialCard: number;
+    /** Called when the user selects a different card. */
     onCardChangeByUser?: (cardIndex: number) => void;
+    /** Controlled selected card index from the parent. */
     overrideSelectedCard?: number;
+    /** Stack spread direction in degrees. */
     stackingOrientation?: number;
+    /** Height in pixels for each card. */
     cardHeight?: number;
+    /** Width in pixels for each card. */
     cardWidth?: number;
 };
 declare const StackedCards: ({ cards, initialCard, onCardChangeByUser, overrideSelectedCard, stackingOrientation, cardWidth, cardHeight, }: StackedCardsProps) => React.JSX.Element;

package/dist/esm/types/components/index.d.ts

@@ -1,3 +1,4 @@
+export { default as AlertModal } from "./AlertModal";
 export { default as BubbleMenu } from "./BubbleMenu";
 export { default as CalendarDatePicker } from "./CalendarDatePicker";
 export { default as InputBoxWithConfirmation } from "./InputBoxWithConfirmation";

package/dist/esm/types/index.d.ts

@@ -1,2 +1,3 @@
+import './index.css';
 export * from './components';
 export * from './hooks';

package/dist/index.d.ts

@@ -1,110 +1,219 @@
 import React$1, { RefObject } from 'react';
 import { IconType } from 'react-icons/lib';
 
+type AlertModalProps = {
+    /** Visual intent used to select the default status icon and color. */
+    type?: "success" | "error" | "warning" | "info" | "question";
+    /** Optional heading displayed above the modal message. */
+    title?: string;
+    /** Short body copy displayed below the title. */
+    message?: string;
+    /** Custom content rendered between the message and action buttons. */
+    customChildren?: React$1.ReactNode;
+    /** Text rendered in the confirm action button. */
+    confirmText?: string;
+    /** Text rendered in the cancel action button. */
+    cancelText?: string;
+    /** Shows or hides the confirm action button. */
+    confirmButton?: boolean;
+    /** Shows or hides the cancel action button. */
+    cancelButton?: boolean;
+    /** Controlled open state. Set to true to display the modal. */
+    overrideOpenState?: boolean;
+    /** Prevents closing the modal by clicking the backdrop. */
+    forced?: boolean;
+    /** Icon size in pixels. */
+    iconSize?: number;
+    /** Overrides the default icon color for the selected type. */
+    iconColor?: string;
+    /** Called after the confirm button is clicked. */
+    onConfirm?: () => void;
+    /** Called after the cancel button is clicked. */
+    onCancel?: () => void;
+};
+declare const AlertModal: ({ type, title, message, customChildren, confirmText, cancelText, confirmButton, cancelButton, overrideOpenState, forced, iconSize, iconColor, onConfirm, onCancel, }: AlertModalProps) => React$1.JSX.Element;
+
 type BubbleMenuProps = {
+    /** Menu actions displayed when the floating menu is open. */
     options: {
+        /** Icon rendered above the option text. */
         icon: React$1.ReactNode;
+        /** Label rendered inside the circular option button. */
         text: string;
+        /** Controls whether this option is shown. */
         visible: boolean;
+        /** Called after the menu close animation delay. */
         optionCallback: () => void;
     }[];
+    /** Language used for the floating menu toggle label. */
     language?: "en" | "es";
 };
 declare const BubbleMenu: ({ options, language }: BubbleMenuProps) => React$1.JSX.Element;
 
 type CalendarDatePickerProps = {
+    /** Selection model used by the calendar. */
     mode: "single" | "multiple" | "range" | "booking";
+    /** Emits the current selection any time selected dates change. */
     onSelectedDatesChange: (dates: Date[]) => void;
+    /** Language used for month, weekday, and Today labels. */
     language?: "es" | "en";
+    /** Custom date rules used to color, disable, cross out, or handle specific days. */
     customDates?: {
+        /** Background color applied to matching dates. */
         color: string;
+        /** Dates affected by this rule. */
         dates: Date[];
+        /** Whether matching dates can be selected. */
         selectable: boolean;
+        /** Renders a diagonal crossed visual treatment on matching dates. */
         crossed?: boolean;
+        /** Clears the current selection when a matching date is clicked. */
         clearSelectionIfClicked?: boolean;
+        /** Optional side effect triggered when a matching date is clicked. */
         clickSideEffect?: (date: Date) => void;
     }[];
+    /** Earliest date/month the user can navigate to. */
     minimumDate?: Date;
+    /** Latest date/month the user can navigate to. */
     maximumDate?: Date;
+    /** Inline style applied to the calendar root element. */
     customStyle?: React$1.CSSProperties;
 };
 declare const CalendarDatePicker: ({ mode, onSelectedDatesChange, language, customDates, minimumDate, maximumDate, customStyle, }: CalendarDatePickerProps) => React$1.JSX.Element;
 
 type InputBoxWithConfirmationPropsType = {
+    /** Called with the committed value after confirmation, Enter, or blur. */
     onConfirmAction: (inputCurrentValue: string) => void;
+    /** Native input type used by the inner input. */
     inputType?: "text" | "number";
+    /** Minimum value passed to the native input and enforced for number inputs. */
     minimumValue?: HTMLInputElement["min"];
+    /** Maximum value passed to the native input and enforced for number inputs. */
     maximumValue?: HTMLInputElement["max"];
+    /** Maximum number of accepted characters. */
     maxLength?: HTMLInputElement["maxLength"];
+    /** Placeholder shown while the input is empty. */
     placeholder?: HTMLInputElement["placeholder"];
+    /** Inline styles applied to the outer clickable wrapper. */
     divWrapperCustomStyle?: React$1.CSSProperties;
+    /** Inline styles applied to the inner input element. */
     inputBoxCustomStyle?: React$1.CSSProperties;
+    /** Initial value shown before the user edits. */
     defaultValue?: string | number;
+    /** Controlled value override. Pass null to clear the input. */
     overrideCurrentValue?: string | number | null;
+    /** Shows explicit edit/confirm buttons instead of confirming directly on blur. */
     showConfirmationButton?: boolean;
+    /** Disables editing and hides the confirmation controls. */
     disabled?: boolean;
 };
 declare const InputBoxWithConfirmation: ({ onConfirmAction, inputType, minimumValue, maximumValue, maxLength, placeholder, divWrapperCustomStyle, inputBoxCustomStyle, defaultValue, overrideCurrentValue, showConfirmationButton, disabled, }: InputBoxWithConfirmationPropsType) => React$1.JSX.Element;
 
 type IntegerControlProps = {
+    /** Called with the clamped value after the user changes it. */
     onChange: (value: number) => void;
+    /** Initial value and visual baseline for the default state. */
     defaultValue?: number;
+    /** Lowest value the control can emit. */
     minimumValue?: number;
+    /** Highest value the control can emit. */
     maximumValue?: number;
+    /** Inline style applied to the root control. */
     customStyle?: React$1.CSSProperties;
 };
 declare const IntegerControl: ({ onChange, defaultValue, minimumValue, maximumValue, customStyle, }: IntegerControlProps) => React$1.JSX.Element;
 
 type SpecialType = "credit-card-number" | "expiration-date" | "cvv" | "phone";
 type LabeledInputProps = {
+    /** Floating label displayed over the input. */
     label: string;
+    /** Initial uncontrolled input value. */
     defaultValue?: string;
+    /** Called with the current formatted value whenever the user types. */
     onChange?: (value: string) => void;
+    /** CSS width applied to the root wrapper. */
     width?: string;
+    /** CSS height applied to the root wrapper. */
     height?: string;
+    /** Background color applied to the wrapper and label gap. */
     backgroundColor?: string;
+    /** Text alignment for the native input. */
     textAlign?: "left" | "center" | "right";
+    /** Enables the error border and label color. */
     highlightError?: boolean;
+    /** Error text displayed below the input when highlightError is true. */
     errorMessage?: string;
+    /** Additional props forwarded to the native input element. */
     inputProps?: React$1.ComponentProps<"input">;
+    /** Optional built-in formatter applied while typing. */
     specialType?: SpecialType;
 };
 declare const LabeledInput: ({ label, defaultValue, onChange, width, height, backgroundColor, textAlign, highlightError, errorMessage, inputProps, specialType, }: LabeledInputProps) => React$1.JSX.Element;
 
 type ModalProps = {
+    /** Content rendered inside the modal panel. */
     children: React$1.ReactNode;
+    /** Controlled open state. Set to true to display the modal. */
     overrideOpenState?: boolean;
+    /** Prevents backdrop clicks from closing the modal. */
     forced?: boolean;
+    /** Called when overrideOpenState opens the modal. */
     onOpen?: Function;
+    /** Called when the modal closes. */
     onClose?: Function;
+    /** Reserved transition duration prop. Current timing is controlled by CSS. */
     transitionTime?: number;
 };
 declare const Modal: ({ children, overrideOpenState, forced, onOpen, onClose, }: ModalProps) => React$1.JSX.Element;
 
 interface MulticalendarProps {
+    /** Stable DOM and sessionStorage id. Use a unique value per calendar instance. */
     multicalendarId: string;
+    /** Component rendered inside every visible date/resource grid cell. */
     ReactCellChildren: ReactCellChildren;
+    /** Component rendered for each visible row in the left resource axis. */
     ReactListElementChildren: ReactListElementChildren;
+    /** Resource ids displayed as rows in the calendar. */
     listElementsIdsArray: string[] | number[];
+    /** Language used by toolbar controls and date labels. */
     language?: "es_ES" | "en_EN";
+    /** Whether dates before today are available in the horizontal range. */
     pastDatesVisible?: boolean;
+    /** Width in pixels for each date cell. */
     cellsWidth?: number;
+    /** Height in pixels for each resource row. */
     cellsHeight?: number;
+    /** Width in pixels of the left resource axis. */
     verticalAxisWidth?: number;
+    /** Reserved height setting for the top date axis. */
     horizontalAxisHeight?: number;
+    /** Initial number of past days rendered in the scrollable range. */
     pastDaysInitialQuantity?: number;
+    /** Initial number of future days rendered in the scrollable range. */
     futureDaysInitialQuantity?: number;
+    /** Extra horizontal cells rendered outside the viewport to reduce blank space while scrolling. */
     chunkRenderX?: number;
+    /** Extra vertical rows rendered outside the viewport to reduce blank space while scrolling. */
     chunkRenderY?: number;
+    /** Auto-scrolls while dragging near grid edges. */
     authomaticScrollOnDraggingOverEdges?: boolean;
+    /** Extends the date range when users scroll near the horizontal boundaries. */
     dynamicDaysQuantity?: boolean;
+    /** Debounce time in milliseconds before callsOnScrollingStops runs. */
     waitTimeForCalls?: number;
+    /** Called once after the initial visible ids and dates are available. */
     callsOnInitialView?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
+    /** Called after scrolling settles with currently visible ids and dates. */
     callsOnScrollingStops?: (visibleIds: string[] | number[], visibleDates: Date[]) => void;
+    /** Extra controls rendered in the toolbar beside date navigation. */
     aditionalControlsComponents?: React.ReactNode | React.ReactNode[];
+    /** Custom content rendered in the upper-left corner above the resource axis. */
     upperLeftComponent?: React.ReactNode;
+    /** Persists scroll position in sessionStorage using multicalendarId. */
     autoSavePosition?: boolean;
+    /** Called whenever the vertical scroll position changes. */
     onScrollTopChanges?: (scrollTop: number) => void;
+    /** Called whenever the horizontal scroll position changes. */
     onScrollLeftChanges?: (scrollLeft: number) => void;
 }
 type ReactCellChildren = React.ElementType<CellChildrenProps>;
@@ -112,58 +221,88 @@ type ReactListElementChildren = React.ElementType<ListElementChildrenProps>;
 type CellChildrenProps = {
     [key: string]: any;
 } & {
-    /**Date in SQL format, i.e. 1993-03-29 */
+    /** Date in SQL format, for example 1993-03-29. */
     date: string;
+    /** Row/resource id for the cell being rendered. */
     listElementId: string | number;
 };
 type ListElementChildrenProps = {
     [key: string]: any;
 } & {
+    /** Row/resource id for the list element being rendered. */
     listElementId: string | number;
 };
 
 declare const Multicalendar: ({ multicalendarId, ReactCellChildren, ReactListElementChildren, listElementsIdsArray, language, pastDatesVisible, cellsWidth, cellsHeight, verticalAxisWidth, pastDaysInitialQuantity, futureDaysInitialQuantity, chunkRenderX, chunkRenderY, dynamicDaysQuantity, authomaticScrollOnDraggingOverEdges, waitTimeForCalls, callsOnInitialView, callsOnScrollingStops, aditionalControlsComponents, upperLeftComponent, autoSavePosition, onScrollTopChanges, onScrollLeftChanges, }: MulticalendarProps) => React$1.JSX.Element;
 
 type Step = {
+    /** React panel rendered for this step. */
     component: React$1.ReactNode;
+    /** Text rendered inside the step navigation marker. */
     innerText: string;
+    /** Optional descriptive text rendered above the active step panel. */
     outterText?: string;
 };
 type ScreenStepsProps = {
+    /** Ordered list of steps in the flow. */
     steps: Step[];
+    /** Initial active step index. */
     defaultStep?: number;
+    /** Called when the active step changes through user navigation. */
     onStepChange?: (step: number) => void;
+    /** Allows users to click step markers to navigate. */
     canNavigate?: boolean;
+    /** Controlled active step index from the parent. */
     overrideStep?: number;
 };
 declare const ScreenSteps: ({ steps, defaultStep, onStepChange, canNavigate, overrideStep, }: ScreenStepsProps) => React$1.JSX.Element;
 
 type ScrollSnapGalleryProps = {
+    /** Image URLs rendered as slides. */
     urls: string[];
+    /** Optional alt text array matched by slide index. */
     alts?: string[];
+    /** CSS width applied to the scroll frame. */
     width?: string;
+    /** CSS height applied to the scroll frame. */
     height?: string;
+    /** Icon component used for position indicators. */
     IndicatorIcon?: IconType;
+    /** Number of indicator icons emphasized at one time. */
     positionIndicatorSize?: number;
+    /** Indicator icon size in pixels. */
     iconSize?: number;
+    /** Shows previous and next arrow controls. */
     showArrows?: boolean;
+    /** Inline styles applied to the image frame. */
     frameStyle?: React$1.CSSProperties;
+    /** Called with the active slide index after scrolling. */
     onSlideChange?: (index: number) => void;
+    /** Automatically advances the gallery every 3 seconds. */
     autoChange?: boolean;
 };
 declare const ScrollSnapGallery: ({ urls, alts, width, height, IndicatorIcon, positionIndicatorSize, iconSize, showArrows, frameStyle, onSlideChange, autoChange, }: ScrollSnapGalleryProps) => React$1.JSX.Element;
 
 type Card = {
+    /** Header content rendered at the top of the card. */
     title: React$1.ReactNode;
+    /** Main content rendered inside the card body. */
     content: React$1.ReactNode;
 };
 type StackedCardsProps = {
+    /** Cards available in the stack. */
     cards: Card[];
+    /** Initial selected card index. */
     initialCard: number;
+    /** Called when the user selects a different card. */
     onCardChangeByUser?: (cardIndex: number) => void;
+    /** Controlled selected card index from the parent. */
     overrideSelectedCard?: number;
+    /** Stack spread direction in degrees. */
     stackingOrientation?: number;
+    /** Height in pixels for each card. */
     cardHeight?: number;
+    /** Width in pixels for each card. */
     cardWidth?: number;
 };
 declare const StackedCards: ({ cards, initialCard, onCardChangeByUser, overrideSelectedCard, stackingOrientation, cardWidth, cardHeight, }: StackedCardsProps) => React$1.JSX.Element;
@@ -199,4 +338,4 @@ declare function useResizeObserver(elementRef: React$1.MutableRefObject<HTMLElem
  */
 declare function useWindowSize(): [number, number];
 
-export { BubbleMenu, CalendarDatePicker, InputBoxWithConfirmation, IntegerControl, LabeledInput, Modal, Multicalendar, ScreenSteps, ScrollSnapGallery, StackedCards, useIntersectionObserver, useOutsideClick, useResizeObserver, useWindowSize as useWindowsSize };
+export { AlertModal, BubbleMenu, CalendarDatePicker, InputBoxWithConfirmation, IntegerControl, LabeledInput, Modal, Multicalendar, ScreenSteps, ScrollSnapGallery, StackedCards, useIntersectionObserver, useOutsideClick, useResizeObserver, useWindowSize as useWindowsSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "josenanodev-react-components-library",
-  "version": "1.10.4",
+  "version": "1.11.0",
   "author": {
     "name": "Jose Carlos Cardenas Martinez"
   },
@@ -62,7 +62,7 @@
     "react-icons": "^5.0.0"
   },
   "scripts": {
-    "rollup-build-lib": "rollup -c",
+    "rollup-build-lib": "node -e \"require('fs').rmSync('dist', { recursive: true, force: true })\" && rollup -c",
     "tsc": "tsc",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
@@ -87,7 +87,6 @@
   "bugs": {
     "url": "https://github.com/Josenanodev/josenanodev-react-components-library/issues"
   },
-  "readme": "ERROR: No README data found!",
   "homepage": "https://github.com/Josenanodev/josenanodev-react-components-library#readme",
   "dependencies": {
     "xlsx-js-style": "^1.2.0"

package/dist/cjs/types/stories/CalendarDatePickerMask.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { CalendarDatePickerProps } from "../components/CalendarDatePicker/CalendarDatePicker";
-declare const CalendarDatePickerMask: (props: CalendarDatePickerProps) => React.JSX.Element;
-export default CalendarDatePickerMask;

package/dist/esm/types/stories/CalendarDatePickerMask.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import { CalendarDatePickerProps } from "../components/CalendarDatePicker/CalendarDatePicker";
-declare const CalendarDatePickerMask: (props: CalendarDatePickerProps) => React.JSX.Element;
-export default CalendarDatePickerMask;