reactive-bulma 2.3.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.
@@ -128,6 +135,10 @@ In case you have cloned the repo, it will show you the following folders:
     - `atoms` (from `v1.0.0`).
     - `molecules` (from `v2.0.0`).
     - `organisms` (from `v3.0.0`).
+  - `design`: Location of common design tokens (coded on `.mdx` files) which are displayed above components sections in storybook's instance.
+  - `functions`: Dedicated to parsers and helper functions for repetitive logic.
+  - `interfaces`: Dedicated to interfaces used in components and functions typing.
+  - `types`: Dedicated to Bulma's style type setting (which are part of component's properties).
 
 ## Documentation
 
@@ -135,12 +146,23 @@ Reactive bulma's documentation, included in this repo in the root directory, is
 
 ### Running documentation locally
 - Go to `reactive-bulma` folder (where you cloned the repo before).
-- Run `npm install` to install the Node.js dependencies, including Storybook (the site builder).
+- Open a console and run `npm install` to install the Node.js dependencies, including Storybook (the site builder).
 - Run `npm start`.
 - Wait until a new tab opens with url <http://localhost:6006/> in your browser. 
   - In case you want to initiate it on the background, you can run `npm run start:cli`.
 
-Learn more about using `Storybook` by reading its [documentation](https://storybook.js.org/docs/react/get-started/install).
+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
 
@@ -152,7 +174,9 @@ const App = () => (
   <Button text="This is a test" />
 );
 ```
-To see all component's variants and its code snippets, go to [Documentation](#documentation) section
+To see all component's variants and its code snippets, go to [Documentation](#documentation) section.
+
+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).
 
 ## Versioning