@bodynarf/react.components 1.1.6 → 1.2.2

package/components/anchor/components/anchorWithIcon/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AnchorWithIconProps } from "../../types";
 /** Anchor with icon component */
 export declare const AnchorWithIcon: ({ href, className, onClick, caption, title, target, icon }: AnchorWithIconProps) => JSX.Element;

package/components/anchor/components/anchorWithIcon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/anchorWithIcon/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,+DAAgE,mBAAmB,KAAG,WAqChH,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/anchorWithIcon/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,+DAAgE,mBAAmB,KAAG,WAqChH,CAAC"}

package/components/anchor/components/anchorWithIcon/index.js

@@ -10,7 +10,7 @@ export const AnchorWithIcon = ({ href, className, onClick, caption, title, targe
             ? `${icon.className} app-icon--left`
             : `${icon.className} app-icon--right`;
     if (iconPosition === 'left') {
-        return (_jsxs("a", { href: href, className: className, title: title, target: target, onClick: onClick, children: [_jsx(Icon, { ...icon, className: iconClassName }), caption] }));
+        return (_jsxs("a", { href: href, className: className, title: title, target: target, onClick: onClick, children: [_jsx(Icon, { ...icon, name: iconClassName }), caption] }));
     }
-    return (_jsxs("a", { href: href, className: className, title: title, target: target, onClick: onClick, children: [caption, _jsx(Icon, { ...icon, className: iconClassName })] }));
+    return (_jsxs("a", { href: href, className: className, title: title, target: target, onClick: onClick, children: [caption, _jsx(Icon, { ...icon, name: iconClassName })] }));
 };

package/components/button/components/buttonWithIcon/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonWithIconProps } from '../../types';
 /** Button with icon component */
 export declare const ButtonWithIcon: ({ className, disabled, onClick, caption, title, icon }: ButtonWithIconProps) => JSX.Element;

package/components/button/components/buttonWithIcon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/buttonWithIcon/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,2DAA4D,mBAAmB,KAAG,WAsC5G,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/buttonWithIcon/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,2DAA4D,mBAAmB,KAAG,WAsC5G,CAAC"}

package/components/button/components/buttonWithIcon/index.js

@@ -13,7 +13,7 @@ export const ButtonWithIcon = ({ className, disabled, onClick, caption, title, i
         ? `${className} button--icon-only`
         : className;
     if (iconPosition === 'left') {
-        return (_jsxs("button", { className: className, disabled: disabled, onClick: onClick, title: title, children: [_jsx(Icon, { ...icon, className: iconClassName }), caption] }));
+        return (_jsxs("button", { className: className, disabled: disabled, onClick: onClick, title: title, children: [_jsx(Icon, { ...icon, name: iconClassName }), caption] }));
     }
-    return (_jsxs("button", { className: className, disabled: disabled, onClick: onClick, title: title, children: [caption, _jsx(Icon, { ...icon, className: iconClassName })] }));
+    return (_jsxs("button", { className: className, disabled: disabled, onClick: onClick, title: title, children: [caption, _jsx(Icon, { ...icon, name: iconClassName })] }));
 };

package/components/button/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import './button.scss';
-import { ElementIcon, IconSize } from '../types';
+import { ElementIcon, ElementSize } from '../types';
 import { ButtonType } from './types';
 export declare type ButtonProps = {
     /** Button displaying text */
@@ -10,7 +10,7 @@ export declare type ButtonProps = {
     /** Configuration of inner icon */
     icon?: ElementIcon;
     /** Button size  */
-    size?: IconSize;
+    size?: ElementSize;
     /** Title on hover */
     title?: string;
     /** Is button uses light version of color  */

package/components/button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,oBAAY,WAAW,GAAG;IACtB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8BAA8B;IAC9B,IAAI,EAAE,UAAU,CAAC;IAEjB,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAkC9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,oBAAY,WAAW,GAAG;IACtB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8BAA8B;IAC9B,IAAI,EAAE,UAAU,CAAC;IAEjB,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAkC9D"}

package/components/dropdown/components/dropdownLabel/index.js

@@ -15,6 +15,6 @@ const DropdownLabel = ({ caption, selectedItem, onClick, deselectable }) => {
         "button"
     ]);
     return (_jsxs("label", { className: className, onClick: onClick, children: [deselectVisible &&
-                _jsx(Icon, { className: "plus-lg" }), _jsx("span", { className: deselectVisible ? "mx-2" : "mr-2", title: itemSelected ? text : undefined, children: text }), _jsx(Icon, { className: "arrow-up" })] }));
+                _jsx(Icon, { name: "plus-lg" }), _jsx("span", { className: deselectVisible ? "mx-2" : "mr-2", title: itemSelected ? text : undefined, children: text }), _jsx(Icon, { name: "arrow-up" })] }));
 };
 export default DropdownLabel;

package/components/dropdown/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './dropdown.scss';
 import { SelectableItem } from './types';
 import { BaseElementProps } from '../types';
@@ -11,8 +10,7 @@ export declare type DropdownProps = BaseElementProps & {
     */
     value?: SelectableItem;
     /**
-     * Action to update selected value,
-     *  which stored outside
+     * Action to update selected value, which stored outside
      */
     onSelect: (item?: SelectableItem) => void;
     /**

package/components/dropdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":";AAIA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAK5C,oBAAY,aAAa,GAAG,gBAAgB,GAAG;IAC3C,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;;OAGG;IACH,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,mFAAoF,aAAa,KAAG,WA2FjH,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAK5C,oBAAY,aAAa,GAAG,gBAAgB,GAAG;IAC3C,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,mFAAoF,aAAa,KAAG,WA2FjH,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/icon/index.d.ts

@@ -1,18 +1,22 @@
 /// <reference types="react" />
 import './icon.scss';
-import { IconSize } from '../types';
+import { ElementSize } from '../types';
 /** Icon component props */
 export declare type IconProps = {
     /**
-     * Class name for icon.
-     * Used to display icon from bootstrap-icons
+     * Icon name. Must be without `bi-`
+     * @example ["Arrow repeat", "arrow-repeat"]
+     * // Icon name to icon class name.
+     * // For class name check bootstrap icons website
     */
-    className: string;
+    name: string;
+    /** Additional classname */
+    className?: string;
     /** Icon size */
-    size?: IconSize;
+    size?: ElementSize;
 };
 /**
  * Icon component. Based on bootstrap icons
  */
-export default function Icon(props: IconProps): JSX.Element;
+export default function Icon({ size, name, className }: IconProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/components/icon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon/index.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,2BAA2B;AAC3B,oBAAY,SAAS,GAAG;IACpB;;;MAGE;IACF,SAAS,EAAE,MAAM,CAAC;IAElB,gBAAgB;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACnB,CAAA;AAQD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAQ1D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon/index.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvC,2BAA2B;AAC3B,oBAAY,SAAS,GAAG;IACpB;;;;;MAKE;IACF,IAAI,EAAE,MAAM,CAAC;IAEb,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gBAAgB;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB,CAAA;AAQD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,IAAe,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAYzF"}

package/components/icon/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import './icon.scss';
+import { getClassName } from '@bodynarf/utils';
 const sizeToClassMap = new Map([
     ['small', ' app-icon--smal'],
     ['medium', ''],
@@ -8,8 +9,13 @@ const sizeToClassMap = new Map([
 /**
  * Icon component. Based on bootstrap icons
  */
-export default function Icon(props) {
-    const size = props.size || 'medium';
-    const className = `app-icon bi bi-${props.className}${sizeToClassMap.get(size)}`;
+export default function Icon({ size = 'medium', name, className }) {
+    const classNames = getClassName([
+        "app-icon",
+        "bi",
+        `bi-${name}`,
+        sizeToClassMap.has(size) ? sizeToClassMap.get(size) : "",
+        className
+    ]);
     return (_jsx("i", { className: className }));
 }

package/components/paginator/index.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { ElementSize } from '../types';
+export declare type PaginatorProps = {
+    /** Amount of pages */
+    count: number;
+    /** Page change handler */
+    onPageChange: (page: number) => void;
+    /** Current page */
+    currentPage?: number;
+    /**
+     * Page numbers position.
+     * Usefull with `showNextButtons = true`
+    */
+    position?: 'left' | 'center' | 'right';
+    /** Buttons should have rounded borders */
+    rounded?: boolean;
+    /** Size of paginator component elements */
+    size?: ElementSize;
+    /** Additional class names */
+    className?: string;
+    /** Display "Previous" \ "Next" buttons */
+    showNextButtons?: boolean;
+    /**
+     * Max amount of pages from left & right from current page. `3` by default
+     * @description If set to 2 it will show `[1, 2], 3, [4, 5]`
+    */
+    nearPagesCount?: number;
+};
+/**
+ * Paginator component.
+ * Used for visualization of pagging configuration
+*/
+export default function Paginator({ count, onPageChange, currentPage, position, rounded, size, className, showNextButtons, nearPagesCount }: PaginatorProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/components/paginator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/paginator/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIvC,oBAAY,cAAc,GAAG;IACzB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;MAGE;IACF,QAAQ,CAAC,EACP,MAAM,GACN,QAAQ,GACR,OAAO,CACR;IAED,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;MAGE;IACF,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAA;AAED;;;EAGE;AACF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,KAAK,EAAE,YAAY,EAAE,WAAW,EAChC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAClC,eAAe,EAAE,cAAc,EAClC,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CA2G9B"}

package/components/paginator/index.js

@@ -0,0 +1,46 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { getClassName, isNullOrEmpty } from '@bodynarf/utils';
+import { generatePageNumbers } from './utils';
+/**
+ * Paginator component.
+ * Used for visualization of pagging configuration
+*/
+export default function Paginator({ count, onPageChange, currentPage, position, rounded, size, className, showNextButtons, nearPagesCount }) {
+    const page = currentPage || 0;
+    const pageChange = useCallback((event) => {
+        const target = event.target;
+        const pageRaw = target.dataset['page'];
+        if (isNullOrEmpty(pageRaw)) {
+            return;
+        }
+        const page = +pageRaw;
+        if (page !== currentPage && page > 0 && page <= count) {
+            onPageChange(page);
+        }
+    }, [onPageChange, currentPage, count]);
+    const pageNumbers = useMemo(() => generatePageNumbers(page, count, nearPagesCount), [page, count]);
+    const canGoBack = useMemo(() => page > 1, [page]);
+    const canGoForward = useMemo(() => page < count, [page, count]);
+    if (pageNumbers.length === 0) {
+        return _jsx(_Fragment, {});
+    }
+    const classNames = getClassName([
+        "pagination",
+        paginationPositionToClassMap.has(position || "") ? paginationPositionToClassMap.get(position || "") : "",
+        rounded == true ? "is-rounded" : "",
+        isNullOrEmpty(size) ? "" : `is-${size}`,
+        className
+    ]);
+    return (_jsxs("nav", { className: classNames, role: "navigation", "aria-label": "pagination", children: [showNextButtons === true &&
+                _jsxs(_Fragment, { children: [_jsx("a", { className: `pagination-previous${canGoBack ? "" : " is-disabled"}`, "data-page": page - 1, onClick: pageChange, children: "Previous" }), _jsx("a", { className: `pagination-next${canGoForward ? "" : " is-disabled"}`, "data-page": page + 1, onClick: pageChange, children: "Next page" })] }), _jsxs("ul", { className: "pagination-list", children: [page !== 1 && !pageNumbers.includes(1) &&
+                        _jsxs(_Fragment, { children: [_jsx("li", { children: _jsx("a", { className: "pagination-link", "aria-label": "Goto page 1", "data-page": 1, onClick: pageChange, children: "1" }) }), _jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", children: "\u2026" }) })] }), pageNumbers.map(x => _jsx("li", { children: _jsx("a", { className: `pagination-link${page === x ? " is-current" : ""}`, "aria-label": `Goto page ${x}`, "data-page": x, onClick: pageChange, children: x }) }, x)), page != count && !pageNumbers.includes(count) &&
+                        _jsxs(_Fragment, { children: [_jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", children: "\u2026" }) }), _jsx("li", { children: _jsx("a", { className: "pagination-link", "aria-label": `Goto page ${count}`, "data-page": count, onClick: pageChange, children: count }) })] })] })] }));
+}
+/**
+ * Position setting to css class name map
+ */
+const paginationPositionToClassMap = new Map([
+    ["center", "is-centered"],
+    ["right", "is-right"]
+]);

package/components/paginator/utils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Get nearest numbers from each side (left & right)
+ * @param page Number of current page
+ * @param count Amount of pages
+ * @param size Amount of pages from left & right to current page. Default is 3
+ * @throws Current page is greater than pages amount
+ * @returns Array of nearest numbers to current page
+ */
+export declare const generatePageNumbers: (page: number, count: number, size?: number) => Array<number>;
+//# sourceMappingURL=utils.d.ts.map

package/components/paginator/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/paginator/utils.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,SAAU,MAAM,SAAS,MAAM,SAAQ,MAAM,KAAO,MAAM,MAAM,CAU/F,CAAC"}

package/components/paginator/utils.js

@@ -0,0 +1,18 @@
+/**
+ * Get nearest numbers from each side (left & right)
+ * @param page Number of current page
+ * @param count Amount of pages
+ * @param size Amount of pages from left & right to current page. Default is 3
+ * @throws Current page is greater than pages amount
+ * @returns Array of nearest numbers to current page
+ */
+export const generatePageNumbers = (page, count, size = 3) => {
+    if (page < 0 || count <= 0 || page > count || size > count) {
+        return [];
+    }
+    return [
+        ...new Array(size).fill(page).map((_, i) => page - i - 1).filter(x => x > 0 && x < page).reverse(),
+        page,
+        ...new Array(size).fill(page).map((_, i) => page + i + 1).filter(x => x > 0 && x > page && x <= count)
+    ];
+};

package/components/search/index.d.ts

@@ -10,7 +10,7 @@ export declare type SearchProps = {
     /**
      * Search type: by typing, starts from minimum characters to search
      * or by clicking on button next to search bar.
-     * Default is byTyping
+     * Default `is byTyping`
     */
     searchType?: 'byTyping' | 'byButton';
     /** Control name. If empty - will be replaced by random guid */
@@ -23,7 +23,7 @@ export declare type SearchProps = {
     rounded?: boolean;
     /** Is search bar disabled */
     disabled?: boolean;
-    /** Should loading icon be displayed in search bar*/
+    /** Should loading icon be displayed in search bar */
     isLoading?: boolean;
 };
 /** Search component */

package/components/search/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search/index.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AAIvB,oBAAY,WAAW,GAAG;IACtB,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;MAIE;IACF,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAErC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE/C,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA+E9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search/index.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AAIvB,oBAAY,WAAW,GAAG;IACtB,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;MAIE;IACF,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAErC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE/C,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA+E9D"}

package/components/types.d.ts

@@ -10,9 +10,11 @@ export declare type BaseElementProps = {
         [key: string]: any;
     };
 };
-export declare type IconSize = 'small' | 'medium' /** default size */ | 'large';
+/** Allowed element sizes */
+export declare type ElementSize = 'small' | 'medium' /** default size */ | 'large';
+/** Allowed icon position */
 export declare type IconPosition = 'left' | 'right';
-/** Icon for component configuration */
+/** Icon for component  */
 export declare type ElementIcon = {
     /**
      * Class name for icon.
@@ -20,7 +22,7 @@ export declare type ElementIcon = {
     */
     className: string;
     /** Icon size */
-    size?: IconSize;
+    size?: ElementSize;
     /**
      * Position
      * Works only with other content

package/components/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,oBAAY,gBAAgB,GAAG;IAC3B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,IAAI,CAAC,EAAE;QACH,8CAA8C;QAC9C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,oBAAY,QAAQ,GACd,OAAO,GACP,QAAQ,CAAC,mBAAmB,GAC5B,OAAO,CAAC;AAEd,oBAAY,YAAY,GAClB,MAAM,GACN,OAAO,CAAC;AAEd,uCAAuC;AACvC,oBAAY,WAAW,GAAG;IACtB;;;MAGE;IACF,SAAS,EAAE,MAAM,CAAC;IAElB,gBAAgB;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;;MAGE;IACF,QAAQ,CAAC,EAAE,YAAY,CAAC;CAC3B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,oBAAY,gBAAgB,GAAG;IAC3B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,IAAI,CAAC,EAAE;QACH,8CAA8C;QAC9C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,4BAA4B;AAC5B,oBAAY,WAAW,GACjB,OAAO,GACP,QAAQ,CAAC,mBAAmB,GAC5B,OAAO,CAAC;AAEd,4BAA4B;AAC5B,oBAAY,YAAY,GAClB,MAAM,GACN,OAAO,CAAC;AAEd,0BAA0B;AAC1B,oBAAY,WAAW,GAAG;IACtB;;;MAGE;IACF,SAAS,EAAE,MAAM,CAAC;IAElB,gBAAgB;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;MAGE;IACF,QAAQ,CAAC,EAAE,YAAY,CAAC;CAC3B,CAAC"}

package/dist

@@ -0,0 +1,32 @@
+# About
+Small library with react components based on Bulma CSS framework&nbsp; <a href="https://bulma.io" title="Bulma css framework">
+	<img
+    	src="https://bulma.io/images/made-with-bulma.png"
+    	alt="Made with Bulma"
+    	width="128"
+    	height="24"/>
+</a>
+
+## Installation
+1. Install [React](https://reactjs.org/)
+2. Install [Bulma](https://bulma.io/)
+3. Make sure you imported bulma styles in parent container
+4. *(Optional)* To use **Icon** component - install [Bootstrap Icons](https://icons.getbootstrap.com/) and make sure you imported these styles in parent container
+
+## Description
+### Simple components
+Simple react components based on html elements.
+
+ - **Date** - date input;
+ - **Multiline** - multiline text input;
+ - **Text**- single line text input;
+ - **Anchor**
+ - **Button**
+ - **Icon** - *see p.4 of installation*
+ - **Dropdown** - custom dropdown component, based on html div elements & css. Allows to use icon in elements
+
+### Complex components
+Complex components is set of components built via combining simple components or represent complex logical component
+ - **Search** - Search bar with optional button to perform search
+ - **Paginator** - Pagination elements to navigate through paged list
+ 

package/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useComponentOutsideClick';
+export * from './usePagination';
 //# sourceMappingURL=index.d.ts.map

package/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC"}

package/hooks/index.js

@@ -1 +1,2 @@
 export * from './useComponentOutsideClick';
+export * from './usePagination';

package/hooks/usePagination.d.ts

@@ -0,0 +1,18 @@
+/** Paginator hook state */
+export interface PaginationState {
+    /** Number of current page */
+    currentPage: number;
+    /** Amount of pages */
+    pagesCount: number;
+    /** Handler of page change */
+    onPageChange: (page: number) => void;
+}
+/**
+ * Hook to pagination state, return hooked values and handler for pagination
+ * @param length Pagionation items count
+ * @param size Page size. Default is 30
+ * @param initPage Initial page. Default is 1
+ * @returns Pair of hook-stored state and handler for slicing current page items
+ */
+export declare const usePagination: (length: number, size?: number, initPage?: number) => [PaginationState, (data: Array<any>) => Array<any>];
+//# sourceMappingURL=usePagination.d.ts.map

package/hooks/usePagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../../src/hooks/usePagination.ts"],"names":[],"mappings":"AAEA,2BAA2B;AAC3B,MAAM,WAAW,eAAe;IAC5B,6BAA6B;IAC7B,WAAW,EAAE,MAAM,CAAC;IAEpB,sBAAsB;IACtB,UAAU,EAAE,MAAM,CAAC;IAEnB,6BAA6B;IAC7B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAKD;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,WAAY,MAAM,SAAQ,MAAM,aAA8B,MAAM,8BAAgC,MAAM,GAAG,CAAC,KAAK,MAAM,GAAG,CAAC,CAsBtJ,CAAC"}

package/hooks/usePagination.js

@@ -0,0 +1,26 @@
+import { useCallback, useMemo, useState } from "react";
+/** Default page size */
+const defaultPageSize = 30;
+/**
+ * Hook to pagination state, return hooked values and handler for pagination
+ * @param length Pagionation items count
+ * @param size Page size. Default is 30
+ * @param initPage Initial page. Default is 1
+ * @returns Pair of hook-stored state and handler for slicing current page items
+ */
+export const usePagination = (length, size = defaultPageSize, initPage = 1) => {
+    const [currentPage, setCurrentPage] = useState(initPage);
+    const count = useMemo(() => Math.ceil(length / size), [size, length]);
+    const onChange = useCallback((page) => setCurrentPage(page), [setCurrentPage]);
+    const paginate = useCallback((data) => {
+        const limit = size;
+        const offstet = (currentPage - 1) * size;
+        return data.slice(offstet, offstet + limit);
+    }, [size, currentPage]);
+    const state = useMemo(() => ({
+        currentPage: currentPage,
+        pagesCount: count,
+        onPageChange: onChange
+    }), [currentPage, count, onChange]);
+    return [state, paginate];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.1.6",
+    "version": "1.2.2",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"
@@ -20,6 +20,10 @@
         "react component",
         "bulma"
     ],
+    "scripts": {
+        "build": "npx tsc",
+        "publish": "npx tsc && copy package.json dist && copy readme.md dist && cd dist && npm publish --access=public"
+    },
     "devDependencies": {
         "@types/react": "^18.0.11",
         "@types/react-dom": "^18.0.5",
@@ -27,8 +31,8 @@
     },
     "dependencies": {
         "@bodynarf/utils": "^1.0.10",
+        "bulma": "^0.9.4",
         "react": "^18.1.0",
-        "react-dom": "^18.1.0",
-        "bulma": "^0.9.4"
+        "react-dom": "^18.1.0"
     }
-}
+}

package/readme.md

@@ -1,7 +1,5 @@
 # About
-Small library with react components based on Bulma
-
-<a href="https://bulma.io" title="Bulma css framework">
+Small library with react components based on Bulma CSS framework&nbsp; <a href="https://bulma.io" title="Bulma css framework">
 	<img
     	src="https://bulma.io/images/made-with-bulma.png"
     	alt="Made with Bulma"
@@ -9,13 +7,26 @@ Small library with react components based on Bulma
     	height="24"/>
 </a>
 
+## Installation
+1. Install [React](https://reactjs.org/)
+2. Install [Bulma](https://bulma.io/)
+3. Make sure you imported bulma styles in parent container
+4. *(Optional)* To use **Icon** component - install [Bootstrap Icons](https://icons.getbootstrap.com/) and make sure you imported these styles in parent container
+
 ## Description
-Contained components:
+### Simple components
+Simple react components based on html elements.
+
+ - **Date** - date input;
+ - **Multiline** - multiline text input;
+ - **Text**- single line text input;
  - **Anchor**
  - **Button**
- - **Dropdown**
- - **Icon**
- - **Search**
- - **Date** - primitive date input;
- - **Multiline** - primitive multiline text input;
- - **Text**- primitive single line text input;
+ - **Icon** - *see p.4 of installation*
+ - **Dropdown** - custom dropdown component, based on html div elements & css. Allows to use icon in elements
+
+### Complex components
+Complex components is set of components built via combining simple components or represent complex logical component
+ - **Search** - Search bar with optional button to perform search
+ - **Paginator** - Pagination elements to navigate through paged list
+