@bodynarf/react.components 1.5.8 → 1.6.1

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ButtonWithIconProps } from "../../types";
 /** Button with icon component */
 export declare const ButtonWithIcon: ({ className, disabled, onClick, caption, title, icon, data, }: 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,kEAKxB,mBAAmB,KAAG,WAwCxB,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,kEAKxB,mBAAmB,KAAG,WAwCxB,CAAC"}

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SimpleButtonProps } from "../../types";
 /** Simple button component, without icon */
 export declare const SimpleButton: ({ className, disabled, onClick, caption, title, data }: SimpleButtonProps) => JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/simpleButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,4CAA4C;AAC5C,eAAO,MAAM,YAAY,2DAKtB,iBAAiB,KAAG,WAYtB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/simpleButton/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAEhD,4CAA4C;AAC5C,eAAO,MAAM,YAAY,2DAKtB,iBAAiB,KAAG,WAYtB,CAAC"}

package/components/index.d.ts

@@ -7,4 +7,5 @@ export * from "./paginator";
 export * from "./primitives";
 export * from "./search";
 export * from "./tag";
+export * from "./tabs";
 //# sourceMappingURL=index.d.ts.map

package/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC"}

package/components/index.js

@@ -7,3 +7,4 @@ export * from "./paginator";
 export * from "./primitives";
 export * from "./search";
 export * from "./tag";
+export * from "./tabs";

package/components/tabs/component/index.d.ts

@@ -0,0 +1,33 @@
+import "./style.scss";
+import { BaseElementProps, ElementSize } from "../..";
+import { TabItem, TabsPosition, TabsStyle } from "..";
+/** Tabs component props type */
+export interface TabsProps extends BaseElementProps {
+    /** Tabs */
+    items: Array<TabItem>;
+    /** Handler of changing current active item */
+    onActiveItemChange: (item: TabItem) => void;
+    /**
+     * Active item by default.
+     * If not set - first item will be active
+     */
+    defaultActive?: TabItem;
+    /**
+     * Component size.
+     * Default is `normal`
+     */
+    size?: ElementSize;
+    /** Component position */
+    position?: TabsPosition;
+    /** Component style */
+    style?: TabsStyle;
+    /** Is component tabs should take all width of parent */
+    fullWidth?: boolean;
+}
+/**
+ * Tabs panel
+ * @throws Items are empty
+ */
+declare const Tabs: ({ items, onActiveItemChange, defaultActive, size, position, style, fullWidth, className, title, data, }: TabsProps) => JSX.Element;
+export default Tabs;
+//# sourceMappingURL=index.d.ts.map

package/components/tabs/component/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/component/index.tsx"],"names":[],"mappings":"AAIA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGtD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAGtD,gCAAgC;AAChC,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IAC/C,WAAW;IACX,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtB,8CAA8C;IAC9C,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAE5C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,YAAY,CAAC;IAExB,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;GAGG;AACH,QAAA,MAAM,IAAI,4GAMP,SAAS,KAAG,WA6Ed,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/tabs/component/index.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState, useEffect, useRef } from "react";
+import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+import "./style.scss";
+import { ElementSize } from "../..";
+import { mapDataAttributes } from "../../../utils";
+import { TabsPosition, TabsStyle } from "..";
+import TabItemComponent from "../components/item";
+/**
+ * Tabs panel
+ * @throws Items are empty
+ */
+const Tabs = ({ items, onActiveItemChange, defaultActive, size, position, style, fullWidth, className, title, data, }) => {
+    if (items.length === 0) {
+        throw new Error("Invalid configuration. Tab items must be defined");
+    }
+    const [activeItem, setActiveItem] = useState(defaultActive ?? items[0]);
+    const isFirstRun = useRef(true);
+    const onTabsClick = useCallback((container) => {
+        const closestTab = container.target.closest(".bbr-tabs__tab");
+        if (isNullOrUndefined(closestTab)) {
+            return;
+        }
+        const itemId = closestTab.attributes.getNamedItem("data-item-id")?.value ?? "";
+        if (isNullOrEmpty(itemId)) {
+            return;
+        }
+        const item = items.find(({ id }) => id === itemId);
+        if (isNullOrUndefined(item) || item === activeItem) {
+            return;
+        }
+        setActiveItem(item);
+    }, [activeItem, items]);
+    useEffect(() => {
+        if (isFirstRun.current) {
+            isFirstRun.current = false;
+            return;
+        }
+        onActiveItemChange(activeItem);
+    }, [activeItem, onActiveItemChange]);
+    const elClassName = getClassName([
+        "bbr-tabs",
+        "tabs",
+        position ?? TabsPosition.left,
+        getSizeClassName(size, [ElementSize.Normal]),
+        style ?? TabsStyle.default,
+        fullWidth === true ? "is-fullwidth" : "",
+        className,
+    ]);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsx("nav", { className: elClassName, onClick: onTabsClick, title: title, ...dataAttributes, children: _jsx("ul", { children: items.map(item => _jsx(TabItemComponent, { item: item, activeItem: activeItem.id }, item.id)) }) }));
+};
+export default Tabs;
+/**
+ * Get class name for specified size and constraints
+ * @param size Component size
+ * @param notAllowedSizes Sizes that not applicable to component
+ * @returns Class name for react element
+ */
+const getSizeClassName = (size, notAllowedSizes) => {
+    notAllowedSizes ??= [];
+    if (isNullOrUndefined(size) || notAllowedSizes.includes(size)) {
+        return "";
+    }
+    return `is-${size}`;
+};

package/components/tabs/component/style.scss

@@ -0,0 +1,12 @@
+.bbr-tabs {
+    &__tab {
+        .bbr-icon {
+            &:first-child {
+                margin-right: 0.5rem;
+            }
+            &:last-child {
+                margin-left: 0.5rem;
+            }
+        }
+    }
+}

package/components/tabs/components/item/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { TabItem as Item } from "../..";
+/** Tabs panel single tab item component props type */
+export interface TabItemProps {
+    /** Tab item */
+    item: Item;
+    /** Active item identifier */
+    activeItem: string;
+}
+/** Tabs panel single tab item component */
+declare const TabItem: ({ item, activeItem }: TabItemProps) => JSX.Element;
+export default TabItem;
+//# sourceMappingURL=index.d.ts.map

package/components/tabs/components/item/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/tabs/components/item/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,OAAO,CAAC;AAGxC,sDAAsD;AACtD,MAAM,WAAW,YAAY;IACzB,eAAe;IACf,IAAI,EAAE,IAAI,CAAC;IAEX,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,2CAA2C;AAC3C,QAAA,MAAM,OAAO,yBAEV,YAAY,KAAG,WAqBjB,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/components/tabs/components/item/index.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import Icon from "../../../icon";
+/** Tabs panel single tab item component */
+const TabItem = ({ item, activeItem }) => {
+    if (!isNullOrUndefined(item.icon)) {
+        return _jsx(TabItemWithIcon, { item: item, activeItem: activeItem });
+    }
+    const className = getClassName([
+        "bbr-tabs__tab",
+        activeItem === item.id ? "is-active" : undefined,
+    ]);
+    return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsx("a", { children: item.caption }) }, item.id));
+};
+export default TabItem;
+/** Tabs panel single tab item with icon component */
+const TabItemWithIcon = ({ item, activeItem }) => {
+    const iconConfig = item.icon;
+    const className = getClassName([
+        "bbr-tabs__tab",
+        activeItem === item.id ? "is-active" : undefined,
+    ]);
+    if (iconConfig.position === "left") {
+        return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsxs("a", { children: [_jsx(Icon, { ...iconConfig }), _jsx("span", { children: item.caption })] }) }, item.id));
+    }
+    return (_jsx("li", { className: className, "data-item-id": item.id, children: _jsxs("a", { children: [_jsx("span", { children: item.caption }), _jsx(Icon, { ...iconConfig })] }) }, item.id));
+};

package/components/tabs/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./component";
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/components/tabs/index.js

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/components/tabs/types.d.ts

@@ -0,0 +1,43 @@
+import { ElementIcon } from "..";
+/** Tabs component style */
+export declare enum TabsStyle {
+    /**
+     * Default style.
+     * Single border at the bottom
+     */
+    default = "",
+    /**
+     * Classic style with borders.
+     * Borders all except bottom
+     */
+    boxed = "is-boxed",
+    /**
+     * Styled as buttons
+     */
+    radioButton = "is-toggle",
+    /**
+     * Styled as rounded buttons
+     */
+    radioButtonRounded = "is-toggle is-toggle-rounded"
+}
+/**
+ * Tabs items position on component
+ */
+export declare enum TabsPosition {
+    /** On the left side. Default value */
+    "left" = "",
+    /** Center*/
+    "center" = "is-centered",
+    /** Pulled to right */
+    "right" = "is-right"
+}
+/** Tab item */
+export interface TabItem {
+    /** Unique identifier across all tab items */
+    id: string;
+    /** Displayable caption */
+    caption: string;
+    /** Icon configuration */
+    icon?: ElementIcon;
+}
+//# sourceMappingURL=types.d.ts.map

package/components/tabs/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAEjC,2BAA2B;AAC3B,oBAAY,SAAS;IACjB;;;OAGG;IACH,OAAO,KAAK;IAEZ;;;OAGG;IACH,KAAK,aAAa;IAElB;;OAEG;IACH,WAAW,cAAc;IAEzB;;OAEG;IACH,kBAAkB,gCAAgC;CACrD;AAED;;GAEG;AACH,oBAAY,YAAY;IACpB,sCAAsC;IACtC,MAAM,KAAK;IAEX,YAAY;IACZ,QAAQ,gBAAgB;IAExB,sBAAsB;IACtB,OAAO,aAAa;CACvB;AAED,eAAe;AACf,MAAM,WAAW,OAAO;IACpB,6CAA6C;IAC7C,EAAE,EAAE,MAAM,CAAC;IAEX,0BAA0B;IAC1B,OAAO,EAAE,MAAM,CAAC;IAEhB,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB"}

package/components/tabs/types.js

@@ -0,0 +1,34 @@
+/** Tabs component style */
+export var TabsStyle;
+(function (TabsStyle) {
+    /**
+     * Default style.
+     * Single border at the bottom
+     */
+    TabsStyle["default"] = "";
+    /**
+     * Classic style with borders.
+     * Borders all except bottom
+     */
+    TabsStyle["boxed"] = "is-boxed";
+    /**
+     * Styled as buttons
+     */
+    TabsStyle["radioButton"] = "is-toggle";
+    /**
+     * Styled as rounded buttons
+     */
+    TabsStyle["radioButtonRounded"] = "is-toggle is-toggle-rounded";
+})(TabsStyle || (TabsStyle = {}));
+/**
+ * Tabs items position on component
+ */
+export var TabsPosition;
+(function (TabsPosition) {
+    /** On the left side. Default value */
+    TabsPosition["left"] = "";
+    /** Center*/
+    TabsPosition["center"] = "is-centered";
+    /** Pulled to right */
+    TabsPosition["right"] = "is-right";
+})(TabsPosition || (TabsPosition = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.5.8",
+    "version": "1.6.1",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"

package/dist

@@ -1,32 +0,0 @@
-# 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
-