reactive-bulma 2.5.0 → 2.6.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 +16 -9
- package/dist/cjs/index.js +12 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/molecules/Message/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/index.d.ts +1 -0
- package/dist/cjs/types/interfaces/moleculeProps.d.ts +12 -0
- package/dist/esm/index.js +12 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/molecules/Message/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/index.d.ts +1 -0
- package/dist/esm/types/interfaces/moleculeProps.d.ts +12 -0
- package/dist/index.d.ts +15 -1
- package/package.json +27 -22
package/README.md
CHANGED
@@ -153,15 +153,6 @@ Reactive bulma's documentation, included in this repo in the root directory, is
|
|
153
153
|
|
154
154
|
Learn more about `Storybook` by reading its [documentation](https://storybook.js.org/docs/react/get-started/install).
|
155
155
|
|
156
|
-
### How to create a template component
|
157
|
-
|
158
|
-
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:
|
159
|
-
|
160
|
-
- Open a console and run `npm run create` in your console.
|
161
|
-
- An will assistant will appear asking about how your component will be named. You can answer with text separated with spaces (` `), underscores (`_`), or hyphens (`-`)
|
162
|
-
- 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/))
|
163
|
-
- At last, the script should create all base files to reduce time and focus on custom implementation.
|
164
|
-
|
165
156
|
Learn more about `Hygen` by reading its [documentation](https://www.hygen.io/docs/quick-start).
|
166
157
|
|
167
158
|
## Usage
|
@@ -178,6 +169,22 @@ To see all component's variants and its code snippets, go to [Documentation](#do
|
|
178
169
|
|
179
170
|
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).
|
180
171
|
|
172
|
+
### How to create a template component
|
173
|
+
|
174
|
+
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:
|
175
|
+
|
176
|
+
- Open a console and run `npm run create` in your console.
|
177
|
+
- An will assistant will appear asking about how your component will be named. You can answer with text separated with spaces (` `), underscores (`_`), or hyphens (`-`)
|
178
|
+
- 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/))
|
179
|
+
- At last, the script should create all base files to reduce time and focus on custom implementation.
|
180
|
+
|
181
|
+
### How to update all dependencies
|
182
|
+
|
183
|
+
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:
|
184
|
+
- `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
|
185
|
+
- `update:doctor`: Will run a set of build and test checks in order to assure your update will not break any current build.
|
186
|
+
- `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)
|
187
|
+
|
181
188
|
## Versioning
|
182
189
|
|
183
190
|
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
CHANGED
@@ -3337,7 +3337,7 @@ const Breadcrumbs = ({ testId = 'breadcrumbs', containerTestId = null, cssClasse
|
|
3337
3337
|
|
3338
3338
|
const renderDropdownMenu = (items) => (React.createElement("section", { className: 'dropdown-content' }, items.map((dropdownItemConfig, i) => {
|
3339
3339
|
const isFirstItemInMenu = items.length > 1 && i === 0;
|
3340
|
-
return isFirstItemInMenu ? (React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${i}` }, dropdownItemConfig))) : (React.createElement(
|
3340
|
+
return isFirstItemInMenu ? (React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${i}` }, dropdownItemConfig))) : (React.createElement("section", { key: `dropdown-item-${i}-section` },
|
3341
3341
|
React.createElement(DropdownItem, { key: `dropdown-item-${i}-divider`, type: 'divider', itemText: 'divider' }),
|
3342
3342
|
React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${i}` }, dropdownItemConfig))));
|
3343
3343
|
})));
|
@@ -3356,6 +3356,16 @@ const Dropdown = ({ testId = null, cssClasses = null, style = null, inputText, d
|
|
3356
3356
|
React.createElement("section", { className: 'dropdown-menu', id: dropdownPointer, role: 'menu' }, renderDropdownMenu(listOfItems))));
|
3357
3357
|
};
|
3358
3358
|
|
3359
|
+
const Message = ({ testId = null, cssClasses = null, style = null, headerText = null, bodyText, deleteButton = null, color = null, size = null }) => {
|
3360
|
+
const messageClasses = parseClasses(['message', color, size, cssClasses]);
|
3361
|
+
const messageTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'message', parsedClasses: messageClasses });
|
3362
|
+
return (React.createElement("article", { "data-testid": messageTestId, className: messageClasses, style: style !== null && style !== void 0 ? style : undefined },
|
3363
|
+
headerText && (React.createElement("section", { "data-testid": `${messageTestId}-header`, className: 'message-header' },
|
3364
|
+
React.createElement("p", null, headerText),
|
3365
|
+
deleteButton ? React.createElement(Delete, Object.assign({}, deleteButton)) : null)),
|
3366
|
+
React.createElement("section", { "data-testid": `${messageTestId}-body`, className: 'message-body' }, bodyText)));
|
3367
|
+
};
|
3368
|
+
|
3359
3369
|
exports.Block = Block;
|
3360
3370
|
exports.Box = Box;
|
3361
3371
|
exports.BreadcrumbItem = BreadcrumbItem;
|
@@ -3372,6 +3382,7 @@ exports.DropdownTrigger = DropdownTrigger;
|
|
3372
3382
|
exports.File = File;
|
3373
3383
|
exports.Icon = Icon;
|
3374
3384
|
exports.Input = Input;
|
3385
|
+
exports.Message = Message;
|
3375
3386
|
exports.Notification = Notification;
|
3376
3387
|
exports.ProgressBar = ProgressBar;
|
3377
3388
|
exports.RadioButton = RadioButton;
|