reactive-bulma 2.11.0 → 2.13.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Nicolás Omar González Passerino
+Copyright (c) 2024 Nicolás Omar González Passerino
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -153,8 +153,6 @@ Reactive bulma's documentation, included in this repo in the root directory, is
 
 Learn more about `Storybook` by reading its [documentation](https://storybook.js.org/docs/react/get-started/install).
 
-Learn more about `Hygen` by reading its [documentation](https://www.hygen.io/docs/quick-start).
-
 ## Usage
 
 ```jsx
@@ -178,6 +176,8 @@ After some time, I understood that creating component files is a repetitive and
 - Then, the assistant will ask in which folder you want to create it (based on its type following [Atomic Design hierarchy structure](https://atomicdesign.bradfrost.com/chapter-2/))
 - At last, the script should create all base files to reduce time and focus on custom implementation.
 
+Learn more about `Hygen` by reading its [documentation](https://www.hygen.io/docs/quick-start).
+
 ### How to update all dependencies
 
 In case you wanted to make your own fork, I recommend you to updated at least weekly using a custom command `npm run update`, which will run the following commands in order:

package/dist/cjs/index.js

@@ -2861,13 +2861,6 @@ const parseTestId = (config) => {
     }
     return `test-${config.tag}${fixedClassString.replace(/ /gm, (_a = config.separator) !== null && _a !== void 0 ? _a : '')}`;
 };
-const parseKey = (max = 5000, min = 1) => {
-    max = Math.floor(max);
-    min = Math.ceil(min);
-    const secureRandomNumbers = new Uint32Array(1);
-    window.crypto.getRandomValues(secureRandomNumbers);
-    return Math.floor(secureRandomNumbers[0] * (max - min) + min).toString();
-};
 
 const Button = ({ testId = null, cssClasses = null, style = null, type = 'button', text = null, isDisabled = false, color = null, isLightColor = false, isInvertedColor = false, isOutlined = false, isRounded = false, isLoading = false, isStatic = false, isSelected = false, size = null, onClick = null }) => {
     const buttonClasses = parseClasses([
@@ -3159,7 +3152,7 @@ const CheckBox = ({ testId = null, containerTestId = null, cssClasses = null, co
         content));
 };
 
-// PARSERS
+// FUNCTIONS
 const renderRadioButton = (config, index) => {
     const { testId = null, label, name, isChecked = false, isDisabled = false, style = null, onChange } = config;
     const radioButtonTestId = testId !== null && testId !== void 0 ? testId : `test-radio-button-item-${index}`;
@@ -3283,20 +3276,29 @@ const PaginationItem = ({ testId = null, cssClasses = null, style = null, text,
 };
 
 const TabItem = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, icon = null, text, onClick = null }) => {
-    const tabItemContainerClasses = parseClasses([
-        'tabItem-container',
-        null,
-        containerCssClasses
-    ]);
-    const tabItemClasses = parseClasses(['tabItem', cssClasses]);
     const tabItemContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
-        tag: 'tabItem-container',
-        parsedClasses: tabItemContainerClasses
+        tag: 'tab-item-container',
+        parsedClasses: containerCssClasses !== null && containerCssClasses !== void 0 ? containerCssClasses : ''
     });
-    const tabItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'tabItem', parsedClasses: tabItemClasses });
-    return (React.createElement("a", { "data-testid": tabItemContainerTestId, className: tabItemContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined },
+    const tabItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'tab-item', parsedClasses: cssClasses !== null && cssClasses !== void 0 ? cssClasses : '' });
+    return (React.createElement("a", { "data-testid": tabItemContainerTestId, className: containerCssClasses !== null && containerCssClasses !== void 0 ? containerCssClasses : undefined, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined },
         icon ? React.createElement(Icon, Object.assign({}, icon)) : null,
-        React.createElement("span", { "data-testid": tabItemTestId, className: tabItemClasses, style: style !== null && style !== void 0 ? style : undefined }, text)));
+        React.createElement("span", { "data-testid": tabItemTestId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined }, text)));
+};
+
+const LevelHeader = ({ testId = null, cssClasses = null, style = null, header, value }) => {
+    const levelHeaderTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'level-header', parsedClasses: cssClasses !== null && cssClasses !== void 0 ? cssClasses : '' });
+    return (React.createElement("section", { "data-testid": levelHeaderTestId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined },
+        React.createElement("p", { className: 'heading' }, header),
+        React.createElement("p", { className: 'title' }, value)));
+};
+
+const generateKey = (max = 5000, min = 1) => {
+    max = Math.floor(max);
+    min = Math.ceil(min);
+    const secureRandomNumbers = new Uint32Array(1);
+    window.crypto.getRandomValues(secureRandomNumbers);
+    return Math.floor(secureRandomNumbers[0] * (max - min) + min).toString();
 };
 
 const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonList, isAttached = false, position = 'left' }) => {
@@ -3325,7 +3327,7 @@ const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonLis
         const shouldApplyColor = (hasSelectedButton && currentButtonItem.isSelected) ||
             !hasSelectedButton;
         const buttonConfig = Object.assign(Object.assign({}, currentButtonItem), { color: shouldApplyColor ? currentButtonItem.color : undefined });
-        return (React.createElement(Button, Object.assign({ key: `button-group-item-${parseKey()}` }, buttonConfig)));
+        return (React.createElement(Button, Object.assign({ key: `button-group-item-${generateKey()}` }, buttonConfig)));
     })));
 };
 
@@ -3353,7 +3355,7 @@ const ColumnGroup = ({ testId = null, cssClasses = null, style = null, listOfCol
         tag: 'columns',
         parsedClasses: columnGroupClasses
     });
-    return (React.createElement("section", { "data-testid": columnGroupTestId, className: columnGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, listOfColumns.map(columnItemConfig => (React.createElement(Column, Object.assign({ key: `column-group-item-${parseKey()}` }, columnItemConfig))))));
+    return (React.createElement("section", { "data-testid": columnGroupTestId, className: columnGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, listOfColumns.map(columnItemConfig => (React.createElement(Column, Object.assign({ key: `column-group-item-${generateKey()}` }, columnItemConfig))))));
 };
 
 const Notification = ({ testId = null, cssClasses = null, style = null, children = null, deleteButton = null, color = null, isLightColor = null }) => {
@@ -3395,14 +3397,14 @@ const Breadcrumbs = ({ testId = 'breadcrumbs', containerTestId = null, cssClasse
         ]
     });
     return (React.createElement("nav", { "data-testid": breadcrumbsContainerTestId, className: breadcrumbsContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
-        React.createElement("ul", { "data-testid": testId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined }, items.map(itemConfig => (React.createElement(BreadcrumbItem, Object.assign({ key: `breadcrumb-item-${parseKey()}` }, itemConfig)))))));
+        React.createElement("ul", { "data-testid": testId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined }, items.map(itemConfig => (React.createElement(BreadcrumbItem, Object.assign({ key: `breadcrumb-item-${generateKey()}` }, itemConfig)))))));
 };
 
 const renderDropdownMenu = (items) => (React.createElement("section", { className: 'dropdown-content' }, items.map((dropdownItemConfig, i) => {
     const isFirstItemInMenu = items.length > 1 && i === 0;
-    return isFirstItemInMenu ? (React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${parseKey()}` }, dropdownItemConfig))) : (React.createElement("section", { key: `dropdown-item-${parseKey()}-section` },
-        React.createElement(DropdownItem, { key: `dropdown-item-${parseKey()}-divider`, type: 'divider', itemText: 'divider' }),
-        React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${parseKey()}` }, dropdownItemConfig))));
+    return isFirstItemInMenu ? (React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${generateKey()}` }, dropdownItemConfig))) : (React.createElement("section", { key: `dropdown-item-${generateKey()}-section` },
+        React.createElement(DropdownItem, { key: `dropdown-item-${generateKey()}-divider`, type: 'divider', itemText: 'divider' }),
+        React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${generateKey()}` }, dropdownItemConfig))));
 })));
 const Dropdown = ({ testId = null, cssClasses = null, style = null, inputText, dropdownPointer = 'dropdown-menu', listOfItems }) => {
     const [isMenuActive, setIsMenuActive] = reactExports.useState(false);
@@ -3434,12 +3436,12 @@ const MenuList = ({ testId = null, cssClasses = null, style = null, itemList })
     const menuListTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'menu-list', parsedClasses: menuListClasses });
     return (React.createElement("ul", { "data-testid": menuListTestId, className: menuListClasses, style: style !== null && style !== void 0 ? style : undefined }, itemList.map(item => {
         if ('subListTitle' in item) {
-            return (React.createElement("li", { key: `sub-list-menu-item-${parseKey()}` },
+            return (React.createElement("li", { key: `sub-list-menu-item-${generateKey()}` },
                 React.createElement(MenuItem, Object.assign({}, item.subListTitle)),
-                React.createElement("ul", null, item.subItems.map(subItem => (React.createElement(MenuItem, Object.assign({ key: `sub-list-menu-sub-item-${parseKey()}` }, subItem)))))));
+                React.createElement("ul", null, item.subItems.map(subItem => (React.createElement(MenuItem, Object.assign({ key: `sub-list-menu-sub-item-${generateKey()}` }, subItem)))))));
         }
         else {
-            return (React.createElement(MenuItem, Object.assign({ key: `sub-list-item-${parseKey()}` }, item)));
+            return (React.createElement(MenuItem, Object.assign({ key: `sub-list-item-${generateKey()}` }, item)));
         }
     })));
 };
@@ -3447,9 +3449,9 @@ const MenuList = ({ testId = null, cssClasses = null, style = null, itemList })
 const Menu = ({ testId = null, cssClasses = null, style = null, menuSections }) => {
     const menuClasses = parseClasses(['menu', cssClasses]);
     const menuTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'menu', parsedClasses: menuClasses });
-    return (React.createElement("aside", { "data-testid": menuTestId, className: menuClasses, style: style !== null && style !== void 0 ? style : undefined }, menuSections.map(section => (React.createElement(React.Fragment, { key: `section-${parseKey()}` },
-        React.createElement("p", { key: `section-label-${parseKey()}`, className: 'menu-label' }, section.label),
-        React.createElement(MenuList, { key: `section-menu-list-${parseKey()}`, itemList: section.itemList }))))));
+    return (React.createElement("aside", { "data-testid": menuTestId, className: menuClasses, style: style !== null && style !== void 0 ? style : undefined }, menuSections.map(section => (React.createElement(React.Fragment, { key: `section-${generateKey()}` },
+        React.createElement("p", { key: `section-label-${generateKey()}`, className: 'menu-label' }, section.label),
+        React.createElement(MenuList, { key: `section-menu-list-${generateKey()}`, itemList: section.itemList }))))));
 };
 
 const renderEllipsis = (hasEllipsis) => hasEllipsis ? (React.createElement("li", null,
@@ -3474,7 +3476,7 @@ const renderPages = (pages, hasEllipsis, ellipsisItems) => {
         }
         if (!hasEllipsis ||
             (pageIndex > ellipsisItems && pageIndex < lastEllipsisItemIndex)) {
-            return (React.createElement(PaginationItem, Object.assign({ key: `pagination-item-${parseKey()}` }, pageItem)));
+            return (React.createElement(PaginationItem, Object.assign({ key: `pagination-item-${generateKey()}` }, pageItem)));
         }
         if (pageIndex === --length) {
             return (React.createElement(React.Fragment, { key: `last-pagination-item` },
@@ -3546,7 +3548,7 @@ const Tabs = ({ testId = null, cssClasses = null, style = null, tabs, alignment
     ]);
     const tabsTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'tabs', parsedClasses: tabsClasses });
     return (React.createElement("section", { "data-testid": tabsTestId, className: tabsClasses, style: style !== null && style !== void 0 ? style : undefined },
-        React.createElement("ul", null, tabs.map(tabConfig => (React.createElement("li", { key: `tab-item-${parseKey()}`, className: tabConfig.isActive ? 'is-active' : undefined }, React.createElement(TabItem, Object.assign({}, tabConfig))))))));
+        React.createElement("ul", null, tabs.map(tabConfig => (React.createElement("li", { key: `tab-item-${generateKey()}`, className: tabConfig.isActive ? 'is-active' : undefined }, React.createElement(TabItem, Object.assign({}, tabConfig))))))));
 };
 
 const renderIcon = (iconConfig) => iconConfig ? React.createElement(Icon, Object.assign({}, iconConfig)) : null;
@@ -3581,10 +3583,68 @@ const InputControl = ({ testId = null, cssClasses = null, style = null, inputCon
         renderIcon(rightIcon ? Object.assign(Object.assign({}, rightIcon), { position: 'is-right' }) : undefined)));
 };
 
+const convertConfigToComponent = ({ type, props }, testId, cssClasses, style, blockText) => {
+    switch (type) {
+        case 'icon': {
+            const panelBlockIconClasses = parseClasses(['panel-icon', cssClasses]);
+            const panelBlockIconTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'panel-icon', parsedClasses: panelBlockIconClasses });
+            return (React.createElement(React.Fragment, null,
+                React.createElement("span", { "data-testid": panelBlockIconTestId, className: panelBlockIconClasses, style: style !== null && style !== void 0 ? style : undefined },
+                    React.createElement(Icon, Object.assign({}, props))),
+                blockText));
+        }
+        case 'control':
+            return React.createElement(InputControl, Object.assign({}, props));
+        case 'button':
+            return React.createElement(Button, Object.assign({}, props));
+    }
+};
+const PanelBlock = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, config, blockText = null, isActive = false, onClick }) => {
+    const panelBlockLinkClasses = parseClasses([
+        'panel-block',
+        isActive ? 'is-active' : null,
+        containerCssClasses
+    ]);
+    const panelBlockLinkTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({ tag: 'panel-block', parsedClasses: panelBlockLinkClasses });
+    return (React.createElement("a", { "data-testid": panelBlockLinkTestId, className: panelBlockLinkClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, convertConfigToComponent(config, testId, cssClasses, style, blockText)));
+};
+
+const PanelTabs = ({ testId = null, cssClasses = null, style = null, tabList }) => {
+    const panelTabsClasses = parseClasses(['panel-tabs', cssClasses]);
+    const panelTabsTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'panel-tabs', parsedClasses: panelTabsClasses });
+    return (React.createElement("section", { "data-testid": panelTabsTestId, className: panelTabsClasses, style: style !== null && style !== void 0 ? style : undefined }, tabList.map(tabItem => {
+        var _a;
+        return (React.createElement("a", { key: `tab-item-${generateKey()}`, className: tabItem.isActive ? 'is-active' : undefined, "aria-hidden": 'true', onClick: (_a = tabItem.onClick) !== null && _a !== void 0 ? _a : undefined }, tabItem.text));
+    })));
+};
+
+const LevelItem = ({ testId = null, cssClasses = null, style = null, content, isCentered = false }) => {
+    const levelItemClasses = parseClasses([
+        'level-item',
+        isCentered ? 'has-text-centered' : null,
+        cssClasses
+    ]);
+    const levelItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'level-item',
+        parsedClasses: levelItemClasses,
+        rules: [
+            {
+                regExp: /is-|has-/gm,
+                replacer: '-'
+            },
+            {
+                regExp: /level-item/gm,
+                replacer: ''
+            }
+        ]
+    });
+    return (React.createElement("section", { "data-testid": levelItemTestId, className: levelItemClasses, style: style !== null && style !== void 0 ? style : undefined }, content));
+};
+
 const renderFieldLabel = (labelText) => labelText ? (React.createElement("label", { "data-testid": 'test-form-field-label', className: 'label' }, labelText)) : null;
 const renderFieldBody = (inputControlConfig, isGrouped) => {
     if (isGrouped) {
-        return Array.isArray(inputControlConfig) ? (inputControlConfig.map((_singleConfig, i) => (React.createElement(InputControl, Object.assign({ key: `grouped-input-control-${parseKey()}`, testId: `test-grouped-input-control-${i}` }, _singleConfig))))) : (React.createElement(InputControl, Object.assign({}, inputControlConfig)));
+        return Array.isArray(inputControlConfig) ? (inputControlConfig.map((_singleConfig, i) => (React.createElement(InputControl, Object.assign({ key: `grouped-input-control-${generateKey()}`, testId: `test-grouped-input-control-${i}` }, _singleConfig))))) : (React.createElement(InputControl, Object.assign({}, inputControlConfig)));
     }
     else {
         return Array.isArray(inputControlConfig) ? (React.createElement(InputControl, Object.assign({}, inputControlConfig[0]))) : (React.createElement(InputControl, Object.assign({}, inputControlConfig)));
@@ -3624,6 +3684,30 @@ const FormField = ({ testId = null, cssClasses = null, style = null, labelText =
             renderFieldHelper(helperConfig)))));
 };
 
+const generateHeader = (headerText) => (React.createElement("p", { className: 'panel-heading' }, headerText));
+const Panel = ({ testId = null, cssClasses = null, style = null, headerText, panelTabs = null, blockList, color = null }) => {
+    const panelClasses = parseClasses(['panel', color, cssClasses]);
+    const panelTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'panel', parsedClasses: panelClasses });
+    return (React.createElement("article", { "data-testid": panelTestId, className: panelClasses, style: style !== null && style !== void 0 ? style : undefined },
+        generateHeader(headerText),
+        panelTabs ? React.createElement(PanelTabs, Object.assign({}, panelTabs)) : null,
+        blockList.map(blockConfig => (React.createElement(PanelBlock, Object.assign({ key: `panel-block-item-${generateKey()}` }, blockConfig))))));
+};
+
+const renderLevelSection = (levelItemList) => levelItemList.map(_levelItemConfig => (React.createElement(LevelItem, Object.assign({ key: `level-item-${generateKey()}` }, _levelItemConfig))));
+const Level = ({ testId = null, cssClasses = null, style = null, leftSide = null, centerSide = null, rightSide = null, isMobile = false }) => {
+    const levelClasses = parseClasses([
+        'level',
+        isMobile ? 'is-mobile' : null,
+        cssClasses
+    ]);
+    const levelTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'level', parsedClasses: levelClasses });
+    return (React.createElement("nav", { "data-testid": levelTestId, className: levelClasses, style: style !== null && style !== void 0 ? style : undefined },
+        leftSide ? (React.createElement("section", { className: 'level-left' }, renderLevelSection(leftSide))) : null,
+        centerSide ? renderLevelSection(centerSide) : null,
+        rightSide ? (React.createElement("section", { className: 'level-right' }, renderLevelSection(rightSide))) : null));
+};
+
 exports.Block = Block;
 exports.Box = Box;
 exports.BreadcrumbItem = BreadcrumbItem;
@@ -3643,6 +3727,9 @@ exports.Icon = Icon;
 exports.Image = Image;
 exports.Input = Input;
 exports.InputControl = InputControl;
+exports.Level = Level;
+exports.LevelHeader = LevelHeader;
+exports.LevelItem = LevelItem;
 exports.Menu = Menu;
 exports.MenuItem = MenuItem;
 exports.MenuList = MenuList;
@@ -3651,6 +3738,9 @@ exports.Modal = Modal;
 exports.Notification = Notification;
 exports.Pagination = Pagination;
 exports.PaginationItem = PaginationItem;
+exports.Panel = Panel;
+exports.PanelBlock = PanelBlock;
+exports.PanelTabs = PanelTabs;
 exports.ProgressBar = ProgressBar;
 exports.RadioButton = RadioButton;
 exports.Select = Select;