reactive-bulma 2.4.0 → 2.6.0

package/README.md

@@ -85,28 +85,34 @@ After studying [an Udemy course about Typescript](https://github.com/NicolasOmar
 [![material design dependency][badge-dependency-material-design]][link-package-dependencies]
 [![typescript dependency][badge-dependency-typescript]][link-package-dependencies]
 [![rollup dependency][badge-dependency-rollup]][link-package-dependencies]
+[![postcss dependency][badge-dependency-postcss]][link-package-dependencies]
 [![storybook dependency][badge-dependency-storybook]][link-package-dependencies]
 [![semantic release dependency][badge-dependency-semantic-release]][link-package-dependencies]
 [![babel dependency][badge-dependency-babel]][link-package-dependencies]
 [![jest dependency][badge-dependency-jest]][link-package-dependencies]
 [![react testing library dependency][badge-dependency-react-testing]][link-package-dependencies]
+[![lint-staged dependency][badge-dependency-lint-staged]][link-package-dependencies]
 [![prettier dependency][badge-dependency-prettier]][link-package-dependencies]
 [![eslint dependency][badge-dependency-eslint]][link-package-dependencies]
 [![husky dependency][badge-dependency-husky]][link-package-dependencies]
+[![hygen dependency][badge-dependency-hygen]][link-package-dependencies]
 
 [badge-dependency-react]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/react/main?logo=react
 [badge-dependency-bulma]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/bulma/main?logo=bulma
 [badge-dependency-material-design]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@mdi/font/main?logo=materialdesignicons
 [badge-dependency-typescript]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/typescript/main?logo=typescript
+[badge-dependency-postcss]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/postcss/main?logo=postcss
 [badge-dependency-rollup]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/rollup/main?logo=rollup.js
 [badge-dependency-storybook]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/storybook/main?logo=storybook
 [badge-dependency-semantic-release]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/semantic-release/main?logo=semantic-release
 [badge-dependency-babel]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@babel/core/main?logo=babel
 [badge-dependency-jest]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/jest/main?logo=jest
 [badge-dependency-react-testing]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@testing-library/react/main?logo=testing-library
+[badge-dependency-lint-staged]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/lint-staged/main?logo=lint-staged
 [badge-dependency-prettier]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/prettier/main?logo=prettier
 [badge-dependency-eslint]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/eslint/main?logo=eslint
 [badge-dependency-husky]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/husky/main?logo=husky
+[badge-dependency-hygen]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/hygen/main?logo=hygen
 [link-package-dependencies]: https://github.com/NicolasOmar/reactive-bulma/blob/main/package.json
 
 ## Quick start
@@ -120,6 +126,7 @@ Several quick start options are available:
 ## Folder structure
 
 In case you have cloned the repo, it will show you the following folders:
+- `_templates:` Dedicated to [Hygen](https://www.hygen.io/) configuration and implementation files. Dedicated to create new components from customizable templates
 - `.github:` [Github Actions](https://github.com/features/actions/) files used to run post-merge.commits like unit test coverage collection.
 - `.husky:` Dedicated to [Husky](https://typicode.github.io/husky/) configuration files.
 - `.storybook:` Dedicated to [Storybook](https://storybook.js.org/) configuration files.
@@ -146,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
@@ -171,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

@@ -3189,6 +3189,53 @@ const BreadcrumbItem = ({ testId = null, containerTestId = null, cssClasses = nu
         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)));
 };
 
+const DropdownTrigger = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, menuText, dropdownPointer = 'dropdown-menu', onClick = null }) => {
+    const dropdownTriggerContainerClasses = parseClasses([
+        'dropdown-trigger',
+        containerCssClasses
+    ]);
+    const dropdownTriggerContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
+        tag: 'dropdown-trigger',
+        parsedClasses: dropdownTriggerContainerClasses
+    });
+    const dropdownTriggerClasses = parseClasses(['button', cssClasses]);
+    const dropdownTriggerTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'button', parsedClasses: dropdownTriggerClasses });
+    return (React.createElement("section", { "data-testid": dropdownTriggerContainerTestId, className: dropdownTriggerContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
+        React.createElement("button", { "data-testid": dropdownTriggerTestId, className: dropdownTriggerClasses, style: style !== null && style !== void 0 ? style : undefined, "aria-haspopup": 'true', "aria-controls": dropdownPointer, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined },
+            React.createElement("span", null, menuText),
+            React.createElement("span", { className: 'icon is-small' },
+                React.createElement("i", { className: 'mdi mdi-chevron-down', "aria-hidden": 'true' })))));
+};
+
+const DropdownItem = ({ testId = null, cssClasses = null, style = null, itemText, type = 'item', isActiveItem = false, onClick = null }) => {
+    const isDivider = type === 'divider';
+    const itemTypeClass = isDivider ? 'dropdown-divider' : 'dropdown-item';
+    const dropdownItemClasses = parseClasses([
+        itemTypeClass,
+        isActiveItem && !isDivider ? 'is-active' : null,
+        cssClasses
+    ]);
+    const dropdownItemConfig = {
+        'data-testid': testId !== null && testId !== void 0 ? testId : parseTestId({
+            tag: itemTypeClass,
+            parsedClasses: `${dropdownItemClasses}-${type}`
+        }),
+        'className': dropdownItemClasses,
+        'style': style !== null && style !== void 0 ? style : undefined,
+        'onClick': onClick !== null && onClick !== void 0 ? onClick : undefined
+    };
+    switch (type) {
+        case 'item':
+            return (React.createElement("div", Object.assign({}, dropdownItemConfig),
+                React.createElement("p", null, itemText)));
+        case 'divider':
+            return React.createElement("hr", Object.assign({}, dropdownItemConfig));
+        case 'link':
+        default:
+            return React.createElement("a", Object.assign({}, dropdownItemConfig), itemText);
+    }
+};
+
 const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonList, isAttached = false, position = 'left' }) => {
     const buttonGroupClasses = parseClasses([
         'buttons',
@@ -3288,6 +3335,37 @@ const Breadcrumbs = ({ testId = 'breadcrumbs', containerTestId = null, cssClasse
         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)))))));
 };
 
+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("section", { key: `dropdown-item-${i}-section` },
+        React.createElement(DropdownItem, { key: `dropdown-item-${i}-divider`, type: 'divider', itemText: 'divider' }),
+        React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${i}` }, dropdownItemConfig))));
+})));
+const Dropdown = ({ testId = null, cssClasses = null, style = null, inputText, dropdownPointer = 'dropdown-menu', listOfItems }) => {
+    const [isMenuActive, setIsMenuActive] = reactExports.useState(false);
+    const dropdownClasses = parseClasses([
+        'dropdown',
+        isMenuActive ? 'is-active' : null,
+        cssClasses
+    ]);
+    const dropdownTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'dropdown', parsedClasses: dropdownClasses });
+    return (React.createElement("section", { "data-testid": dropdownTestId, className: dropdownClasses, style: style !== null && style !== void 0 ? style : undefined },
+        React.createElement(DropdownTrigger, { menuText: inputText,
+            dropdownPointer,
+            onClick: () => setIsMenuActive(!isMenuActive) }),
+        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)));
+};
+
 exports.Block = Block;
 exports.Box = Box;
 exports.BreadcrumbItem = BreadcrumbItem;
@@ -3298,9 +3376,13 @@ exports.Checkbox = CheckBox;
 exports.Column = Column;
 exports.ColumnGroup = ColumnGroup;
 exports.Delete = Delete;
+exports.Dropdown = Dropdown;
+exports.DropdownItem = DropdownItem;
+exports.DropdownTrigger = DropdownTrigger;
 exports.File = File;
 exports.Icon = Icon;
 exports.Input = Input;
+exports.Message = Message;
 exports.Notification = Notification;
 exports.ProgressBar = ProgressBar;
 exports.RadioButton = RadioButton;