reactive-bulma 2.4.0 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -85,28 +85,34 @@ After studying [an Udemy course about Typescript](https://github.com/NicolasOmar
85
85
  [![material design dependency][badge-dependency-material-design]][link-package-dependencies]
86
86
  [![typescript dependency][badge-dependency-typescript]][link-package-dependencies]
87
87
  [![rollup dependency][badge-dependency-rollup]][link-package-dependencies]
88
+ [![postcss dependency][badge-dependency-postcss]][link-package-dependencies]
88
89
  [![storybook dependency][badge-dependency-storybook]][link-package-dependencies]
89
90
  [![semantic release dependency][badge-dependency-semantic-release]][link-package-dependencies]
90
91
  [![babel dependency][badge-dependency-babel]][link-package-dependencies]
91
92
  [![jest dependency][badge-dependency-jest]][link-package-dependencies]
92
93
  [![react testing library dependency][badge-dependency-react-testing]][link-package-dependencies]
94
+ [![lint-staged dependency][badge-dependency-lint-staged]][link-package-dependencies]
93
95
  [![prettier dependency][badge-dependency-prettier]][link-package-dependencies]
94
96
  [![eslint dependency][badge-dependency-eslint]][link-package-dependencies]
95
97
  [![husky dependency][badge-dependency-husky]][link-package-dependencies]
98
+ [![hygen dependency][badge-dependency-hygen]][link-package-dependencies]
96
99
 
97
100
  [badge-dependency-react]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/react/main?logo=react
98
101
  [badge-dependency-bulma]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/bulma/main?logo=bulma
99
102
  [badge-dependency-material-design]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@mdi/font/main?logo=materialdesignicons
100
103
  [badge-dependency-typescript]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/typescript/main?logo=typescript
104
+ [badge-dependency-postcss]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/postcss/main?logo=postcss
101
105
  [badge-dependency-rollup]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/rollup/main?logo=rollup.js
102
106
  [badge-dependency-storybook]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/storybook/main?logo=storybook
103
107
  [badge-dependency-semantic-release]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/semantic-release/main?logo=semantic-release
104
108
  [badge-dependency-babel]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@babel/core/main?logo=babel
105
109
  [badge-dependency-jest]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/jest/main?logo=jest
106
110
  [badge-dependency-react-testing]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@testing-library/react/main?logo=testing-library
111
+ [badge-dependency-lint-staged]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/lint-staged/main?logo=lint-staged
107
112
  [badge-dependency-prettier]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/prettier/main?logo=prettier
108
113
  [badge-dependency-eslint]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/eslint/main?logo=eslint
109
114
  [badge-dependency-husky]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/husky/main?logo=husky
115
+ [badge-dependency-hygen]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/hygen/main?logo=hygen
110
116
  [link-package-dependencies]: https://github.com/NicolasOmar/reactive-bulma/blob/main/package.json
111
117
 
112
118
  ## Quick start
@@ -120,6 +126,7 @@ Several quick start options are available:
120
126
  ## Folder structure
121
127
 
122
128
  In case you have cloned the repo, it will show you the following folders:
129
+ - `_templates:` Dedicated to [Hygen](https://www.hygen.io/) configuration and implementation files. Dedicated to create new components from customizable templates
123
130
  - `.github:` [Github Actions](https://github.com/features/actions/) files used to run post-merge.commits like unit test coverage collection.
124
131
  - `.husky:` Dedicated to [Husky](https://typicode.github.io/husky/) configuration files.
125
132
  - `.storybook:` Dedicated to [Storybook](https://storybook.js.org/) configuration files.
package/dist/cjs/index.js CHANGED
@@ -3189,6 +3189,53 @@ const BreadcrumbItem = ({ testId = null, containerTestId = null, cssClasses = nu
3189
3189
  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)));
3190
3190
  };
3191
3191
 
3192
+ const DropdownTrigger = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, menuText, dropdownPointer = 'dropdown-menu', onClick = null }) => {
3193
+ const dropdownTriggerContainerClasses = parseClasses([
3194
+ 'dropdown-trigger',
3195
+ containerCssClasses
3196
+ ]);
3197
+ const dropdownTriggerContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
3198
+ tag: 'dropdown-trigger',
3199
+ parsedClasses: dropdownTriggerContainerClasses
3200
+ });
3201
+ const dropdownTriggerClasses = parseClasses(['button', cssClasses]);
3202
+ const dropdownTriggerTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'button', parsedClasses: dropdownTriggerClasses });
3203
+ return (React.createElement("section", { "data-testid": dropdownTriggerContainerTestId, className: dropdownTriggerContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
3204
+ 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 },
3205
+ React.createElement("span", null, menuText),
3206
+ React.createElement("span", { className: 'icon is-small' },
3207
+ React.createElement("i", { className: 'mdi mdi-chevron-down', "aria-hidden": 'true' })))));
3208
+ };
3209
+
3210
+ const DropdownItem = ({ testId = null, cssClasses = null, style = null, itemText, type = 'item', isActiveItem = false, onClick = null }) => {
3211
+ const isDivider = type === 'divider';
3212
+ const itemTypeClass = isDivider ? 'dropdown-divider' : 'dropdown-item';
3213
+ const dropdownItemClasses = parseClasses([
3214
+ itemTypeClass,
3215
+ isActiveItem && !isDivider ? 'is-active' : null,
3216
+ cssClasses
3217
+ ]);
3218
+ const dropdownItemConfig = {
3219
+ 'data-testid': testId !== null && testId !== void 0 ? testId : parseTestId({
3220
+ tag: itemTypeClass,
3221
+ parsedClasses: `${dropdownItemClasses}-${type}`
3222
+ }),
3223
+ 'className': dropdownItemClasses,
3224
+ 'style': style !== null && style !== void 0 ? style : undefined,
3225
+ 'onClick': onClick !== null && onClick !== void 0 ? onClick : undefined
3226
+ };
3227
+ switch (type) {
3228
+ case 'item':
3229
+ return (React.createElement("div", Object.assign({}, dropdownItemConfig),
3230
+ React.createElement("p", null, itemText)));
3231
+ case 'divider':
3232
+ return React.createElement("hr", Object.assign({}, dropdownItemConfig));
3233
+ case 'link':
3234
+ default:
3235
+ return React.createElement("a", Object.assign({}, dropdownItemConfig), itemText);
3236
+ }
3237
+ };
3238
+
3192
3239
  const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonList, isAttached = false, position = 'left' }) => {
3193
3240
  const buttonGroupClasses = parseClasses([
3194
3241
  'buttons',
@@ -3288,6 +3335,27 @@ const Breadcrumbs = ({ testId = 'breadcrumbs', containerTestId = null, cssClasse
3288
3335
  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)))))));
3289
3336
  };
3290
3337
 
3338
+ const renderDropdownMenu = (items) => (React.createElement("section", { className: 'dropdown-content' }, items.map((dropdownItemConfig, i) => {
3339
+ const isFirstItemInMenu = items.length > 1 && i === 0;
3340
+ return isFirstItemInMenu ? (React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${i}` }, dropdownItemConfig))) : (React.createElement(React.Fragment, null,
3341
+ React.createElement(DropdownItem, { key: `dropdown-item-${i}-divider`, type: 'divider', itemText: 'divider' }),
3342
+ React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${i}` }, dropdownItemConfig))));
3343
+ })));
3344
+ const Dropdown = ({ testId = null, cssClasses = null, style = null, inputText, dropdownPointer = 'dropdown-menu', listOfItems }) => {
3345
+ const [isMenuActive, setIsMenuActive] = reactExports.useState(false);
3346
+ const dropdownClasses = parseClasses([
3347
+ 'dropdown',
3348
+ isMenuActive ? 'is-active' : null,
3349
+ cssClasses
3350
+ ]);
3351
+ const dropdownTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'dropdown', parsedClasses: dropdownClasses });
3352
+ return (React.createElement("section", { "data-testid": dropdownTestId, className: dropdownClasses, style: style !== null && style !== void 0 ? style : undefined },
3353
+ React.createElement(DropdownTrigger, { menuText: inputText,
3354
+ dropdownPointer,
3355
+ onClick: () => setIsMenuActive(!isMenuActive) }),
3356
+ React.createElement("section", { className: 'dropdown-menu', id: dropdownPointer, role: 'menu' }, renderDropdownMenu(listOfItems))));
3357
+ };
3358
+
3291
3359
  exports.Block = Block;
3292
3360
  exports.Box = Box;
3293
3361
  exports.BreadcrumbItem = BreadcrumbItem;
@@ -3298,6 +3366,9 @@ exports.Checkbox = CheckBox;
3298
3366
  exports.Column = Column;
3299
3367
  exports.ColumnGroup = ColumnGroup;
3300
3368
  exports.Delete = Delete;
3369
+ exports.Dropdown = Dropdown;
3370
+ exports.DropdownItem = DropdownItem;
3371
+ exports.DropdownTrigger = DropdownTrigger;
3301
3372
  exports.File = File;
3302
3373
  exports.Icon = Icon;
3303
3374
  exports.Input = Input;