reactive-bulma 2.3.0 → 2.4.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 +20 -3
- package/dist/cjs/index.js +82 -38
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/atoms/BreadcrumbItem/index.d.ts +4 -0
- package/dist/cjs/types/components/atoms/index.d.ts +1 -0
- package/dist/cjs/types/components/molecules/Breadcrumbs/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/index.d.ts +1 -0
- package/dist/cjs/types/interfaces/atomProps.d.ts +8 -0
- package/dist/cjs/types/interfaces/moleculeProps.d.ts +13 -3
- package/dist/cjs/types/types/styleTypes.d.ts +2 -0
- package/dist/esm/index.js +81 -39
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/atoms/BreadcrumbItem/index.d.ts +4 -0
- package/dist/esm/types/components/atoms/index.d.ts +1 -0
- package/dist/esm/types/components/molecules/Breadcrumbs/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/index.d.ts +1 -0
- package/dist/esm/types/interfaces/atomProps.d.ts +8 -0
- package/dist/esm/types/interfaces/moleculeProps.d.ts +13 -3
- package/dist/esm/types/types/styleTypes.d.ts +2 -0
- package/dist/index.d.ts +25 -1
- package/package.json +28 -26
package/README.md
CHANGED
|
@@ -128,6 +128,10 @@ In case you have cloned the repo, it will show you the following folders:
|
|
|
128
128
|
- `atoms` (from `v1.0.0`).
|
|
129
129
|
- `molecules` (from `v2.0.0`).
|
|
130
130
|
- `organisms` (from `v3.0.0`).
|
|
131
|
+
- `design`: Location of common design tokens (coded on `.mdx` files) which are displayed above components sections in storybook's instance.
|
|
132
|
+
- `functions`: Dedicated to parsers and helper functions for repetitive logic.
|
|
133
|
+
- `interfaces`: Dedicated to interfaces used in components and functions typing.
|
|
134
|
+
- `types`: Dedicated to Bulma's style type setting (which are part of component's properties).
|
|
131
135
|
|
|
132
136
|
## Documentation
|
|
133
137
|
|
|
@@ -135,12 +139,23 @@ Reactive bulma's documentation, included in this repo in the root directory, is
|
|
|
135
139
|
|
|
136
140
|
### Running documentation locally
|
|
137
141
|
- Go to `reactive-bulma` folder (where you cloned the repo before).
|
|
138
|
-
-
|
|
142
|
+
- Open a console and run `npm install` to install the Node.js dependencies, including Storybook (the site builder).
|
|
139
143
|
- Run `npm start`.
|
|
140
144
|
- Wait until a new tab opens with url <http://localhost:6006/> in your browser.
|
|
141
145
|
- In case you want to initiate it on the background, you can run `npm run start:cli`.
|
|
142
146
|
|
|
143
|
-
Learn more about
|
|
147
|
+
Learn more about `Storybook` by reading its [documentation](https://storybook.js.org/docs/react/get-started/install).
|
|
148
|
+
|
|
149
|
+
### How to create a template component
|
|
150
|
+
|
|
151
|
+
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:
|
|
152
|
+
|
|
153
|
+
- Open a console and run `npm run create` in your console.
|
|
154
|
+
- An will assistant will appear asking about how your component will be named. You can answer with text separated with spaces (` `), underscores (`_`), or hyphens (`-`)
|
|
155
|
+
- 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/))
|
|
156
|
+
- At last, the script should create all base files to reduce time and focus on custom implementation.
|
|
157
|
+
|
|
158
|
+
Learn more about `Hygen` by reading its [documentation](https://www.hygen.io/docs/quick-start).
|
|
144
159
|
|
|
145
160
|
## Usage
|
|
146
161
|
|
|
@@ -152,7 +167,9 @@ const App = () => (
|
|
|
152
167
|
<Button text="This is a test" />
|
|
153
168
|
);
|
|
154
169
|
```
|
|
155
|
-
To see all component's variants and its code snippets, go to [Documentation](#documentation) section
|
|
170
|
+
To see all component's variants and its code snippets, go to [Documentation](#documentation) section.
|
|
171
|
+
|
|
172
|
+
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).
|
|
156
173
|
|
|
157
174
|
## Versioning
|
|
158
175
|
|