reactive-bulma 2.5.0 → 2.7.0

package/README.md

@@ -153,15 +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).
 
-### How to create a template component
-
-After some time, I understood that creating component files is a repetitive and time-consuming task, so I made issue [#180](https://github.com/NicolasOmar/reactive-bulma/issues/180) to implement a library called [Hygen](https://www.hygen.io), whose function is to provide a way to generate templates for generic files that can consume time at the long term. You can run the script by the following steps:
-
-- Open a console and run `npm run create` in your console.
-- An will assistant will appear asking about how your component will be named. You can answer with text separated with spaces (` `), underscores  (`_`), or hyphens (`-`)
-- 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).
 
 ## Usage
@@ -178,6 +169,22 @@ To see all component's variants and its code snippets, go to [Documentation](#do
 
 In case you want to create a custom component for your forked Reactive Bulma version, the easiest way is by running the creation script I made, which [instructions are here](#how-to-create-a-template-component).
 
+### How to create a template component
+
+After some time, I understood that creating component files is a repetitive and time-consuming task, so I made issue [#180](https://github.com/NicolasOmar/reactive-bulma/issues/180) to implement a library called [Hygen](https://www.hygen.io), whose function is to provide a way to generate templates for generic files that can consume time at the long term. You can run the script by the following steps:
+
+- Open a console and run `npm run create` in your console.
+- An will assistant will appear asking about how your component will be named. You can answer with text separated with spaces (` `), underscores  (`_`), or hyphens (`-`)
+- 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.
+
+### 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:
+- `update:deps`: Using a [npm-check-updates](https://www.npmjs.com/package/npm-check-updates) script, you will be able to choose which dependencies want to update to latest version
+- `update:doctor`: Will run a set of build and test checks in order to assure your update will not break any current build.
+- `update:storybook`: Will update storybook to lastest version (following its recommended command) followed for a build check (similar to update:doctor, but for storybook only)
+
 ## Versioning
 
 After investigating [semantic-release documentation](https://semantic-release.gitbook.io/semantic-release/) (reffer to [#3](https://github.com/NicolasOmar/reactive-bulma/issues/3)) and having a problematic implementation, I decided to change version meaning for this project with the following:

package/dist/cjs/index.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var crypto = require('crypto');
+
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -2861,6 +2863,13 @@ 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);
+    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([
@@ -2935,7 +2944,7 @@ const Tag = ({ testId = null, containerTestId = null, cssClasses = null, contain
     const tagDeleteTestId = `${tagTestId}-delete`;
     return withAddon ? (React.createElement("section", { "data-testid": tagContainerTestId, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, className: tagContainerClasses },
         React.createElement("span", { "data-testid": tagTestId, className: tagClasses }, text),
-        withDelete ? (React.createElement("a", { "data-testid": tagDeleteTestId, className: 'tag is-delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : (React.createElement("span", { className: tagAddonClasses }, addonText)))) : (React.createElement("span", { "data-testid": tagTestId, style: style !== null && style !== void 0 ? style : undefined, className: tagClasses },
+        withDelete ? (React.createElement("a", { "data-testid": tagDeleteTestId, className: 'tag is-delete', "aria-hidden": 'true', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : (React.createElement("span", { className: tagAddonClasses }, addonText)))) : (React.createElement("span", { "data-testid": tagTestId, style: style !== null && style !== void 0 ? style : undefined, className: tagClasses },
         text,
         withDelete ? (React.createElement("button", { "data-testid": tagDeleteTestId, className: 'delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : null));
 };
@@ -3186,7 +3195,7 @@ const BreadcrumbItem = ({ testId = null, containerTestId = null, cssClasses = nu
     });
     const breadcrumbItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'breadcrumbItem', parsedClasses: breadcrumbItemClasses });
     return (React.createElement("li", { "data-testid": breadcrumbItemContainerTestId, className: breadcrumbItemContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
-        React.createElement("a", { "data-testid": breadcrumbItemTestId, className: breadcrumbItemClasses, style: style !== null && style !== void 0 ? style : undefined, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text)));
+        React.createElement("a", { "data-testid": breadcrumbItemTestId, className: breadcrumbItemClasses, style: style !== null && style !== void 0 ? style : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text)));
 };
 
 const DropdownTrigger = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, menuText, dropdownPointer = 'dropdown-menu', onClick = null }) => {
@@ -3236,6 +3245,16 @@ const DropdownItem = ({ testId = null, cssClasses = null, style = null, itemText
     }
 };
 
+const MenuItem = ({ testId = null, cssClasses = null, style = null, text, isActive = null, onClick = null }) => {
+    const menuItemClasses = parseClasses([
+        'menuItem',
+        isActive ? 'is-active' : null,
+        cssClasses
+    ]);
+    const menuItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'menuItem', parsedClasses: menuItemClasses });
+    return (React.createElement("a", { "data-testid": menuItemTestId, className: menuItemClasses, style: style !== null && style !== void 0 ? style : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text));
+};
+
 const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonList, isAttached = false, position = 'left' }) => {
     const buttonGroupClasses = parseClasses([
         'buttons',
@@ -3257,12 +3276,12 @@ const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonLis
             }
         ]
     });
-    return (React.createElement("section", { "data-testid": buttonGroupTestId, className: buttonGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, buttonList.map((currentButtonItem, i, originalButtonList) => {
+    return (React.createElement("section", { "data-testid": buttonGroupTestId, className: buttonGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, buttonList.map((currentButtonItem, _, originalButtonList) => {
         const hasSelectedButton = originalButtonList.some(({ isSelected }) => isSelected);
         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-${i}` }, buttonConfig)));
+        return (React.createElement(Button, Object.assign({ key: `button-group-item-${parseKey()}` }, buttonConfig)));
     })));
 };
 
@@ -3290,7 +3309,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((_columnItem, i) => (React.createElement(Column, Object.assign({ key: `column-group-item-${i}` }, _columnItem))))));
+    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))))));
 };
 
 const Notification = ({ testId = null, cssClasses = null, style = null, children = null, deleteButton = null, color = null, isLightColor = null }) => {
@@ -3332,14 +3351,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, i) => (React.createElement(BreadcrumbItem, Object.assign({ key: `breadcrumb-item-${i}` }, 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-${parseKey()}` }, 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-${i}` }, dropdownItemConfig))) : (React.createElement(React.Fragment, null,
-        React.createElement(DropdownItem, { key: `dropdown-item-${i}-divider`, type: 'divider', itemText: 'divider' }),
-        React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${i}` }, dropdownItemConfig))));
+    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))));
 })));
 const Dropdown = ({ testId = null, cssClasses = null, style = null, inputText, dropdownPointer = 'dropdown-menu', listOfItems }) => {
     const [isMenuActive, setIsMenuActive] = reactExports.useState(false);
@@ -3356,6 +3375,39 @@ const Dropdown = ({ testId = null, cssClasses = null, style = null, inputText, d
         React.createElement("section", { className: 'dropdown-menu', id: dropdownPointer, role: 'menu' }, renderDropdownMenu(listOfItems))));
 };
 
+const Message = ({ testId = null, cssClasses = null, style = null, headerText = null, bodyText, deleteButton = null, color = null, size = null }) => {
+    const messageClasses = parseClasses(['message', color, size, cssClasses]);
+    const messageTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'message', parsedClasses: messageClasses });
+    return (React.createElement("article", { "data-testid": messageTestId, className: messageClasses, style: style !== null && style !== void 0 ? style : undefined },
+        headerText && (React.createElement("section", { "data-testid": `${messageTestId}-header`, className: 'message-header' },
+            React.createElement("p", null, headerText),
+            deleteButton ? React.createElement(Delete, Object.assign({}, deleteButton)) : null)),
+        React.createElement("section", { "data-testid": `${messageTestId}-body`, className: 'message-body' }, bodyText)));
+};
+
+const MenuList = ({ testId = null, cssClasses = null, style = null, itemList }) => {
+    const menuListClasses = parseClasses(['menu-list', cssClasses]);
+    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()}` },
+                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)))))));
+        }
+        else {
+            return (React.createElement(MenuItem, Object.assign({ key: `sub-list-item-${parseKey()}` }, item)));
+        }
+    })));
+};
+
+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 }))))));
+};
+
 exports.Block = Block;
 exports.Box = Box;
 exports.BreadcrumbItem = BreadcrumbItem;
@@ -3372,6 +3424,10 @@ exports.DropdownTrigger = DropdownTrigger;
 exports.File = File;
 exports.Icon = Icon;
 exports.Input = Input;
+exports.Menu = Menu;
+exports.MenuItem = MenuItem;
+exports.MenuList = MenuList;
+exports.Message = Message;
 exports.Notification = Notification;
 exports.ProgressBar = ProgressBar;
 exports.RadioButton = RadioButton;