reactive-bulma 2.4.0 → 2.5.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.

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,27 @@ 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(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))));
+})));
+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))));
+};
+
 exports.Block = Block;
 exports.Box = Box;
 exports.BreadcrumbItem = BreadcrumbItem;
@@ -3298,6 +3366,9 @@ 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;