reactive-bulma 5.1.19 → 5.1.20

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.
Files changed (3) hide show
  1. package/README.md +14 -15
  2. package/dist/types/domTypes.d.ts +3 -3
  3. package/package.json +31 -31
package/README.md CHANGED
@@ -9,7 +9,7 @@
9
9
 
10
10
  <div align="center">
11
11
 
12
- Component library based on React, Bulma, Typescript and Vite
12
+ Component library based on React, Bulma, TypeScript, and Vite
13
13
 
14
14
  <div align="left">
15
15
 
@@ -122,7 +122,7 @@ Several quick start options are available:
122
122
  - Clone the repo: `git clone https://github.com/NicolasOmar/reactive-bulma.git`.
123
123
  - Install with [npm](https://www.npmjs.com/package/reactive-bulma): `npm install reactive-bulma@latest`
124
124
  - Before cloning this repo, I recommend installing [Node](https://nodejs.org/en/download/) `>=20.10.0` to install packages.
125
- - Once the package has been installed, add at your's React main application file (`main.jsx/tsx`) the following line to inject bulma's styles:
125
+ - Once the package has been installed, add to your React main application file (`main.jsx/tsx`) the following line to inject Bulma's styles:
126
126
  ```jsx
127
127
  import '../node_modules/reactive-bulma/dist/reactive-bulma.css'
128
128
  ```
@@ -134,13 +134,14 @@ In case you have cloned the repo, it will show you the following folders:
134
134
  - `.github:` [Github Actions](https://github.com/features/actions/) files used to run post-merge commits like unit test coverage collection.
135
135
  - `.husky:` Dedicated to [Husky](https://typicode.github.io/husky/) configuration files.
136
136
  - `.storybook:` Dedicated to [Storybook](https://storybook.js.org/) configuration files.
137
+ - `configs:` Used to wrap all the configuration files related to local and third-party services.
137
138
  - `src:`
138
139
  - `components:` Location of all used components, using [Atomic Design hierarchy structure](https://atomicdesign.bradfrost.com/chapter-2/)
139
140
  - `atoms` (from `v1.0.0`).
140
141
  - `molecules` (from `v2.0.0`).
141
142
  - `organisms` (from `v3.0.0`).
142
143
  - `constants:` Location of shared constant values to be used in interfaces and component implementations.
143
- - `design`: Location of standard design tokens (coded on `.mdx` files) displayed above component sections in the storybook's instance.
144
+ - `design`: Location of standard design tokens (coded in `.mdx` files) displayed above component sections in the Storybook instance.
144
145
  - `functions`: Dedicated to parsers and helper functions for repetitive logic.
145
146
  - `interfaces`: Dedicated to component and function typing interfaces.
146
147
  - `types`: Dedicated to Bulma's style typesetting (part of the component's properties).
@@ -168,16 +169,16 @@ const App = () => (
168
169
  <Button text="This is a test" />
169
170
  );
170
171
  ```
171
- To see all component variants and code snippets go to the [Documentation](#documentation) section.
172
+ To see all component variants and code snippets, go to the [Documentation](#documentation) section.
172
173
 
173
174
  If 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).
174
175
 
175
176
  ### How to create a template component
176
177
 
177
- 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:
178
+ 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 in the long term. You can run the script by following the steps:
178
179
 
179
180
  - Open a console and run `npm run create` in your console.
180
- - An will assistant will appear asking about how your component will be named. You can answer with text separated with spaces (` `), underscores (`_`), or hyphens (`-`)
181
+ - An assistant will appear asking about how your component will be named. You can answer with text separated with spaces (` `), underscores (`_`), or hyphens (`-`)
181
182
  - 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/))
182
183
  - Finally, the script should create all base files to reduce time and focus on custom implementation.
183
184
 
@@ -185,17 +186,17 @@ Learn more about `Hygen` by reading its [documentation](https://www.hygen.io/doc
185
186
 
186
187
  ### How to update all dependencies
187
188
 
188
- In case you want to make your fork, I recommend you to update at least weekly using a custom command `npm run update`, which will run the following commands in order:
189
- - `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 the latest version
190
- - `update:doctor`: Runs build and test checks to ensure your update will not break any current build.
191
- - `update:storybook`: Updates storybook to the latest version (following its recommended command) followed for a build check (similar to update:doctor, but for Storybook only)
189
+ In case you want to make your fork, I recommend you update at least weekly using a custom command `npm run update`, which will run the following commands in order:
190
+ - `update:deps`: Using a [npm-check-updates](https://www.npmjs.com/package/npm-check-updates) script, you will be able to choose which dependencies you want to update to the latest version
191
+ - `check:project`: Runs build and test checks to ensure your update will not break any current build.
192
+ - `update:storybook`: Updates Storybook to the latest version (following its recommended command), followed by a build check (similar to check:project, but for Storybook only)
192
193
 
193
194
  ## Versioning
194
195
 
195
- After investigating [semantic-release documentation](https://semantic-release.gitbook.io/semantic-release/) (refer to [#3](https://github.com/NicolasOmar/reactive-bulma/issues/3)) and finishing the last version according to the original roadmap, I decided to give the following meaning to project's versions after `v4.0.0`:
196
- - Major versions (`5.0.0`, `6.0.0` and beyond) will refer to milestones achievement and significant changes on existing components that will need extra attention before the update.
196
+ After investigating [semantic-release documentation](https://semantic-release.gitbook.io/semantic-release/) (refer to [#3](https://github.com/NicolasOmar/reactive-bulma/issues/3)) and finishing the last version according to the original roadmap, I decided to give the following meaning to the project's versions after `v4.0.0`:
197
+ - Major versions (`5.0.0`, `6.0.0` and beyond) will refer to milestone achievements and significant changes on existing components that will need extra attention before the update.
197
198
  - Minor versions (`4.1.0`, `4.2.0`, and so on) will refer to new components or modifications of existing ones.
198
- - Patch versions (`4.0.1`, `4.0.2`, and so on) will refer to bug fixes or weekly dependencies updates.
199
+ - Patch versions (`4.0.1`, `4.0.2`, and so on) will refer to bug fixes or weekly dependency updates.
199
200
 
200
201
  To check the current project's status, go to the [Roadmap](#roadmap) section.
201
202
 
@@ -211,8 +212,6 @@ Nowadays, I am updating the rest of the dependencies every week, creating a PR a
211
212
 
212
213
  If you want the actual short-term status, go to the [project board](https://github.com/users/NicolasOmar/projects/3) (powered by `GitHub Projects`).
213
214
 
214
- During 2026, I will continue with my full-stack app [MyPets](https://github.com/NicolasOmar/my-pets), where I use this library to build its UI.
215
-
216
215
  <details>
217
216
  <summary>Here is the status table I used to keep track of the worked milestones/versions. (v5 included)</summary>
218
217
 
package/dist/types/domTypes.d.ts CHANGED
@@ -7,9 +7,9 @@ export type ChildrenType = string | React.ReactElement | React.ReactElement[];
7
7
  /** Reffers to the component or string that will be shown inside the item */
8
8
  export type SingleChildType = Exclude<ChildrenType, React.ReactElement[]>;
9
9
  export declare enum IconSizeEnum {
10
- 'small' = 24,
11
- 'medium' = 36,
12
- 'large' = 48
10
+ small = 24,
11
+ medium = 36,
12
+ large = 48
13
13
  }
14
14
  export type TileContextType = 'is-child' | 'is-parent' | 'is-ancestor';
15
15
  export type HeroContentType = 'head' | 'body' | 'foot';
package/package.json CHANGED
@@ -1,7 +1,6 @@
1
1
  {
2
2
  "name": "reactive-bulma",
3
- "version": "5.1.19",
4
- "type": "module",
3
+ "version": "5.1.20",
5
4
  "description": "A component library based on React, Bulma, Typescript and Vite",
6
5
  "keywords": [
7
6
  "typescript",
@@ -26,6 +25,7 @@
26
25
  "bugs": {
27
26
  "url": "https://github.com/NicolasOmar/reactive-bulma/issues"
28
27
  },
28
+ "type": "module",
29
29
  "main": "dist/index.js",
30
30
  "types": "dist/index.d.ts",
31
31
  "files": [
@@ -34,24 +34,24 @@
34
34
  "scripts": {
35
35
  "start": "storybook dev -p 6006",
36
36
  "start:cli": "npm start -- --no-open",
37
- "test": "jest --watchAll=false --verbose",
38
- "test:ci": "npm test -- --coverage",
39
- "test:diff": "npm run test:ci -- -o",
40
- "lint": "eslint",
41
- "prettier": "prettier src/**/*.{tsx,ts} --write",
42
- "prettier:ci": "prettier src/**/*.{tsx,ts} --check",
43
- "lint-staged": "lint-staged -v",
44
- "setup": "npm ci && husky",
45
37
  "compile": "tsc -b",
46
- "build": "npm run compile && vite build",
47
- "build:storybook": "storybook build",
38
+ "build": "npm run compile && vite build --config configs/vite.config.ts",
39
+ "build:storybook": "npm run compile && storybook build",
48
40
  "prepare": "npm run build",
49
- "semantic-release": "semantic-release",
50
- "create": "hygen component new",
41
+ "test": "jest --config configs/jest.config.js --watchAll=false --verbose",
42
+ "test:coverage": "npm test -- --coverage",
43
+ "lint": "eslint --config configs/eslint.config.js --max-warnings 0",
44
+ "format:base": "prettier --config configs/.prettierrc src/**/*.{tsx,ts}",
45
+ "format": "npm run format:base -- --write",
46
+ "format:check": "npm run format:base -- --check",
47
+ "lint-staged": "lint-staged -v",
48
+ "setup": "npm ci && husky",
51
49
  "update": "npm run update:deps && npm run update:doctor && npm run update:storybook",
52
- "update:deps": "ncu -i --format group",
50
+ "update:deps": "ncu -i --format group --configFilePath configs --configFileName .ncurc.cjs",
53
51
  "update:storybook": "npx storybook@latest upgrade && npm run build:storybook",
54
- "update:doctor": "npm run prettier:ci && npm run lint && npm run test && npm run build"
52
+ "check:project": "npm run format:check && npm run lint && npm run build && npm run build:storybook && npm run test",
53
+ "create": "hygen component new",
54
+ "publish": "semantic-release --extends ./configs/release.config.mjs"
55
55
  },
56
56
  "devDependencies": {
57
57
  "@babel/core": "^8.0.1",
@@ -70,11 +70,11 @@
70
70
  "@semantic-release/github": "^12.0.9",
71
71
  "@semantic-release/npm": "^13.1.5",
72
72
  "@semantic-release/release-notes-generator": "^14.1.1",
73
- "@storybook/addon-docs": "^10.5.0",
74
- "@storybook/addon-links": "^10.5.0",
75
- "@storybook/addon-onboarding": "^10.5.0",
76
- "@storybook/addon-themes": "^10.5.0",
77
- "@storybook/react-vite": "^10.5.0",
73
+ "@storybook/addon-docs": "^10.5.2",
74
+ "@storybook/addon-links": "^10.5.2",
75
+ "@storybook/addon-onboarding": "^10.5.2",
76
+ "@storybook/addon-themes": "^10.5.2",
77
+ "@storybook/react-vite": "^10.5.2",
78
78
  "@testing-library/jest-dom": "^6.9.1",
79
79
  "@testing-library/react": "^16.3.2",
80
80
  "@testing-library/user-event": "^14.6.1",
@@ -84,7 +84,7 @@
84
84
  "@types/react": "^19.2.17",
85
85
  "@types/react-dom": "^19.2.3",
86
86
  "@typescript-eslint/eslint-plugin": "^8.60.1",
87
- "@typescript-eslint/parser": "^8.63.0",
87
+ "@typescript-eslint/parser": "^8.64.0",
88
88
  "@vitejs/plugin-react": "^6.0.3",
89
89
  "babel-jest": "^30.4.1",
90
90
  "babel-loader": "^10.1.1",
@@ -93,30 +93,30 @@
93
93
  "eslint-config-prettier": "^10.1.8",
94
94
  "eslint-plugin-react-hooks": "^7.1.1",
95
95
  "eslint-plugin-react-refresh": "^0.5.3",
96
- "eslint-plugin-storybook": "^10.5.0",
96
+ "eslint-plugin-storybook": "^10.5.2",
97
97
  "glob": "^13.0.6",
98
98
  "globals": "^17.7.0",
99
99
  "husky": "^9.1.7",
100
100
  "hygen": "^6.2.11",
101
101
  "jest": "^30.4.2",
102
102
  "jest-environment-jsdom": "^30.4.1",
103
- "lint-staged": "^17.0.8",
103
+ "lint-staged": "^17.1.0",
104
104
  "npm-check-updates": "^22.2.9",
105
- "prettier": "^3.8.4",
105
+ "prettier": "^3.9.5",
106
106
  "react": "^19.2.7",
107
107
  "react-dom": "^19.2.7",
108
- "semantic-release": "^25.0.6",
109
- "storybook": "^10.5.0",
108
+ "semantic-release": "^25.0.8",
109
+ "storybook": "^10.5.2",
110
110
  "tslib": "^2.8.1",
111
111
  "typescript": "~6.0.3",
112
- "typescript-eslint": "^8.63.0",
113
- "vite": "^8.1.4",
112
+ "typescript-eslint": "^8.64.0",
113
+ "vite": "^8.1.5",
114
114
  "vite-plugin-dts": "^5.0.3"
115
115
  },
116
116
  "lint-staged": {
117
117
  "src/**/*.(ts|tsx)": [
118
- "prettier --write",
119
- "eslint"
118
+ "prettier --config configs/.prettierrc --write",
119
+ "eslint --config configs/eslint.config.js --max-warnings 0"
120
120
  ]
121
121
  },
122
122
  "eslintConfig": {