reactive-bulma 2.5.0 → 2.6.0
Sign up to get free protection for your applications and to get access to all the features.
- 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;
|