@bodynarf/react.components 1.1.5 → 1.2.1

package/components/anchor/anchor.scss

@@ -0,0 +1,15 @@
+.app-anchor {
+    text-decoration: none;
+    color: inherit;
+
+    transition: 0.15s ease-in-out color;
+
+    &:not(&--unhoverable):hover {
+        text-decoration: underline;
+        color: #3273dc;
+    }
+
+    .app-icon {
+        transition: none;
+    }
+}

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/button/button.scss

@@ -0,0 +1,12 @@
+.button {
+    transition: 0.15s ease-in-out;
+    transition-property: background-color, border-color;
+
+    &--icon-only {
+        padding: 0.55rem;
+    }
+
+    &.is-warning.is-outlined:not([disabled]):hover {
+        color: #000;
+    }
+}

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/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/dropdown.scss

@@ -0,0 +1,89 @@
+.app-dropdown {
+    min-width: 7.5rem;
+    width: fit-content;
+
+    &__list {
+        position: absolute;
+
+        opacity: 0;
+        visibility: collapse;
+
+        transition: 0.15s ease-in-out opacity;
+    }
+
+    & .dropdown-menu {
+        min-width: 11.75rem;
+    }
+
+    span.dropdown-item {
+        color: gray;
+        text-align: center;
+    }
+
+    &__label {
+        cursor: pointer;
+        user-select: none;
+        display: flex;
+        justify-content: space-between;
+
+        span {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow-x: hidden;
+            max-width: 15rem;
+        }
+
+        &--default span {
+            color: gray;
+            font-style: italic;
+        }
+
+        .app-icon {
+            &:hover {
+                color: #0d6efd;
+            }
+
+            &.bi-arrow-up::before {
+                transition: 0.25s ease-in-out transform;
+            }
+
+            &.bi-plus-lg::before {
+                transform: rotate(45deg);
+            }
+        }
+    }
+
+    &-item {
+        cursor: pointer;
+        user-select: none;
+        white-space: normal;
+
+        transition: 0.25s ease-in-out;
+        transition-property: color, background-color;
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.05);
+            color: #0a0a0a;
+        }
+        &:active {
+            background-color: rgba(0, 0, 0, 0.15);
+            color: #0a0a0a;
+        }
+
+        &.is-active {
+            background-color: #485fc7;
+            color: #fff;
+        }
+    }
+
+    &.is-active {
+        .app-dropdown__label .app-icon.bi-arrow-up::before {
+            transform: rotate(180deg);
+        }
+
+        .app-dropdown__list {
+            opacity: 1;
+            visibility: visible;
+        }
+    }
+}

package/components/dropdown/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './dropdown.scss';
 import { SelectableItem } from './types';
 import { BaseElementProps } from '../types';

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;;;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"}

package/components/icon/icon.scss

@@ -0,0 +1,18 @@
+.app-icon {
+    transition: 0.15s ease-in-out color;
+    font-size: 1.3rem;
+
+    &--small {
+        font-size: 1rem;
+    }
+    &--large {
+        font-size: 2rem;
+    }
+
+    &--right {
+        margin-left: 0.5rem;
+    }
+    &--left {
+        margin-right: 0.5rem;
+    }
+}

package/components/icon/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import './icon.scss';
-import { IconSize } from '../types';
+import { ElementSize } from '../types';
 /** Icon component props */
 export declare type IconProps = {
     /**
@@ -9,7 +9,7 @@ export declare type IconProps = {
     */
     className: string;
     /** Icon size */
-    size?: IconSize;
+    size?: ElementSize;
 };
 /**
  * Icon component. Based on bootstrap icons

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;AAEvC,2BAA2B;AAC3B,oBAAY,SAAS,GAAG;IACpB;;;MAGE;IACF,SAAS,EAAE,MAAM,CAAC;IAElB,gBAAgB;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB,CAAA;AAQD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAQ1D"}

package/components/paginator/index.d.ts

@@ -0,0 +1,29 @@
+/// <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. Starts from 1 */
+    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;
+};
+/**
+ * Paginator component.
+ * Used for visualization of pagging configuration
+*/
+export default function Paginator({ count, onPageChange, currentPage, position, rounded, size, className, showNextButtons, }: 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,kCAAkC;IAClC,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;CAC7B,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,GAClB,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CA4G9B"}

package/components/paginator/index.js

@@ -0,0 +1,47 @@
+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, }) {
+    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), [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) {
+        throw new Error("getPageNumbers has ivalid config");
+    }
+    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/search.scss

@@ -0,0 +1,24 @@
+.app-search {
+    input[type="search"] {
+        transition: 0.15s ease-out;
+        transition-property: border-color, color, background-color;
+
+        &::placeholder {
+            user-select: none;
+        }
+
+        &::-webkit-input-placeholder {
+            transition: 0.15s ease-out color;
+        }
+
+        &::-webkit-search-cancel-button {
+            cursor: pointer;
+            font-size: 1.25rem;
+        }
+    }
+
+    &.is-loading::after {
+        right: 1rem;
+        top: 0.725rem;
+    }
+}

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,38 @@
+{
+    "name": "@bodynarf/react.components",
+    "version": "1.2.0",
+    "author": {
+        "name": "Artem",
+        "email": "bodynar@gmail.com"
+    },
+    "repository": {
+        "url": "https://github.com/bodynar/bodynarf.react-components",
+        "type": "git"
+    },
+    "bugs": {
+        "url": "https://github.com/bodynar/bodynarf.react-components/issues",
+        "email": "bodynar@gmail.com"
+    },
+    "keywords": [
+        "ts",
+        "typescript",
+        "react",
+        "react component",
+        "bulma"
+    ],
+    "scripts": {
+        "build": "npx tsc",
+        "publish": "npx tsc && copy package.json dist && cd dist && npm publish --access=public"
+    },
+    "devDependencies": {
+        "@types/react": "^18.0.11",
+        "@types/react-dom": "^18.0.5",
+        "typescript": "^4.7.3"
+    },
+    "dependencies": {
+        "@bodynarf/utils": "^1.0.10",
+        "bulma": "^0.9.4",
+        "react": "^18.1.0",
+        "react-dom": "^18.1.0"
+    }
+}

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.5",
+    "version": "1.2.1",
     "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
+