Skip to content

Commit d149a75

Browse files
ChrisUserChrisUser
authored
v1.2.2
* Add support to React 19 * Min node version 20 * Update README compatibility docs * Update dependencies
2 parents 0507fee + bebac1c commit d149a75

File tree

7 files changed

+2459
-5963
lines changed

7 files changed

+2459
-5963
lines changed

‎.github/workflows/main.yml‎

Lines changed: 80 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,89 @@
11
name: Release workflow
22

3-
on: [push]
3+
on:
4+
push:
5+
branches: [main]
46

57
env:
6-
GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
7-
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
8-
NPM_PACKAGE_NAME: "react-usage-bar"
9-
VERSION: ""
10-
PUBLISHED_VERSION: ""
11-
NODE_VERSION: "18.x"
8+
GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
9+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
10+
NPM_PACKAGE_NAME: 'react-usage-bar'
11+
VERSION: ''
12+
PUBLISHED_VERSION: ''
13+
NODE_VERSION: '20.x'
1214

1315
jobs:
14-
build-and-test:
15-
runs-on: ubuntu-latest
16+
build-and-test:
17+
runs-on: ubuntu-latest
1618

17-
strategy:
18-
matrix:
19-
node-version: [18.x] # 16.x removed since react-usage-bar v1.1.19
19+
strategy:
20+
matrix:
21+
node-version: [20.x]
2022

21-
steps:
22-
- uses: actions/checkout@v3
23-
- name: Setup Node.js ${{ matrix.node-version }}
24-
uses: actions/setup-node@v3
25-
with:
26-
node-version: ${{ matrix.node-version }}
27-
cache: "npm"
28-
- name: Install and Build
29-
run: | # Install npm packages and build the src files
30-
npm install --force
31-
npm run build --if-present
23+
steps:
24+
- uses: actions/checkout@v3
25+
- name: Setup Node.js ${{ matrix.node-version }}
26+
uses: actions/setup-node@v3
27+
with:
28+
node-version: ${{ matrix.node-version }}
29+
cache: 'npm'
30+
- name: Install and Build
31+
run: | # Install npm packages and build the src files
32+
npm install --force
33+
npm run build --if-present
3234
33-
tag-and-npm-publish:
34-
if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}
35-
runs-on: ubuntu-latest
36-
permissions:
37-
contents: read
38-
id-token: write
39-
needs: [build-and-test]
40-
steps:
41-
- name: Check out repository code
42-
uses: actions/checkout@v3
43-
with:
44-
token: ${{ env.GITHUB_TOKEN }}
45-
- uses: actions/setup-node@v2.5.1
46-
with:
47-
node-version: ${{ env.NODE_VERSION }}
48-
check-latest: true
49-
- name: Set NPM
50-
run: |
51-
echo "//registry.npmjs.org/:_authToken=\${NPM_TOKEN}" > .npmrc
52-
- name: Set version
53-
run: |
54-
echo VERSION=$(npm pkg get version | sed 's/"//g') >> $GITHUB_ENV
55-
echo PUBLISHED_VERSION=$(npm show $NPM_PACKAGE_NAME version) >> $GITHUB_ENV
56-
echo "VERSION ${VERSION}"
57-
echo "NPM_PACKAGE_NAME ${NPM_PACKAGE_NAME}"
58-
- name: Install dependecies
59-
if: ${{ env.VERSION != env.PUBLISHED_VERSION }}
60-
run: |
61-
yarn install
62-
- name: Build typescript
63-
if: ${{ env.VERSION != env.PUBLISHED_VERSION }}
64-
run: yarn build
65-
- run: npm publish --dry-run
66-
- uses: step-security/wait-for-secrets@v1
67-
id: wait-for-secrets
68-
with:
69-
secrets: |
70-
OTP:
71-
name: 'OTP to publish package'
72-
description: 'OTP from authenticator app'
73-
- name: Publish on NPM
74-
if: ${{ env.VERSION != env.PUBLISHED_VERSION }}
75-
run: |
76-
git tag v${VERSION} ${GITHUB_SHA} || exit 0
77-
git push origin v${VERSION}
78-
npm publish --otp ${{ steps.wait-for-secrets.outputs.OTP }}
79-
- name: Check loaded and NPM version
80-
if: ${{ env.VERSION == env.PUBLISHED_VERSION }}
81-
run: |
82-
echo "The loaded version is the same on npm. 0 new uploaded versions."
83-
exit 0;
84-
- name: Remove NPM token
85-
if: always()
86-
run: |
87-
rm .npmrc
35+
tag-and-npm-publish:
36+
if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}
37+
runs-on: ubuntu-latest
38+
permissions:
39+
contents: read
40+
id-token: write
41+
needs: [build-and-test]
42+
steps:
43+
- name: Check out repository code
44+
uses: actions/checkout@v4
45+
with:
46+
token: ${{ env.GITHUB_TOKEN }}
47+
- uses: actions/setup-node@v4
48+
with:
49+
node-version: ${{ env.NODE_VERSION }}
50+
check-latest: true
51+
- name: Set NPM
52+
run: |
53+
echo "//registry.npmjs.org/:_authToken=\${NPM_TOKEN}" > .npmrc
54+
- name: Set version
55+
run: |
56+
echo VERSION=$(npm pkg get version | sed 's/"//g') >> $GITHUB_ENV
57+
echo PUBLISHED_VERSION=$(npm show $NPM_PACKAGE_NAME version) >> $GITHUB_ENV
58+
echo "VERSION ${VERSION}"
59+
echo "NPM_PACKAGE_NAME ${NPM_PACKAGE_NAME}"
60+
- name: Install dependecies
61+
if: ${{ env.VERSION != env.PUBLISHED_VERSION }}
62+
run: |
63+
yarn install
64+
- name: Build typescript
65+
if: ${{ env.VERSION != env.PUBLISHED_VERSION }}
66+
run: yarn build
67+
- run: npm publish --dry-run
68+
- uses: step-security/wait-for-secrets@v1
69+
id: wait-for-secrets
70+
with:
71+
secrets: |
72+
OTP:
73+
name: 'OTP to publish package'
74+
description: 'OTP from authenticator app'
75+
- name: Publish on NPM
76+
if: ${{ env.VERSION != env.PUBLISHED_VERSION }}
77+
run: |
78+
git tag v${VERSION} ${GITHUB_SHA} || exit 0
79+
git push origin v${VERSION}
80+
npm publish --otp ${{ steps.wait-for-secrets.outputs.OTP }}
81+
- name: Check loaded and NPM version
82+
if: ${{ env.VERSION == env.PUBLISHED_VERSION }}
83+
run: |
84+
echo "The loaded version is the same on npm. 0 new uploaded versions."
85+
exit 0;
86+
- name: Remove NPM token
87+
if: always()
88+
run: |
89+
rm .npmrc

‎.github/workflows/storybook.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ jobs:
77
runs-on: ubuntu-latest
88
steps:
99
- name: Checkout 🛎️
10-
uses: actions/checkout@v3
10+
uses: actions/checkout@v4
1111
with:
1212
persist-credentials: false
1313
- name: Install and Build 🔧
@@ -19,7 +19,7 @@ jobs:
1919
run: |
2020
echo "sha_short=$(git rev-parse --short "$GITHUB_SHA")" >> "$GITHUB_ENV"
2121
- name: Deploy 🚀
22-
uses: crazy-max/ghaction-github-pages@v3
22+
uses: crazy-max/ghaction-github-pages@v4
2323
with:
2424
target_branch: docs
2525
build_dir: docs-build

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2020 - 2023 Cristiano Raimondi
3+
Copyright (c) 2020 - 2025 Cristiano Raimondi
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ yarn add react-usage-bar
3232
| Package v | Node |
3333
| --------- | ---------- |
3434
| <= 1.1.18 | <= 16.14.x |
35-
| > 1.1.19 | 18.x.x |
35+
| >= 1.1.19 | 18.x.x |
36+
| >= 1.2.2 | 20.x.x |
3637

3738
<br>
3839

@@ -159,14 +160,14 @@ Can customize the style of the error message.
159160
You must import the style directly from the package directory, like this:
160161

161162
```javascript
162-
import "react-usage-bar/build/index.css"
163+
import 'react-usage-bar/build/index.css'
163164
```
164165

165166
The project variables are:
166167

167-
- `--text-color`
168-
- `--background-tooltip-color`
169-
- `--background-bar-color`
168+
- `--text-color`
169+
- `--background-tooltip-color`
170+
- `--background-bar-color`
170171

171172
The main css classes are the following:
172173

@@ -198,8 +199,8 @@ The single item represented in the bar. This class is vastly used.
198199

199200
The tooltip of the item in which are written all the textual info.
200201

201-
- `.o-UsageBar__bar__tooltip__percentage` - Used to control the style of the percentage lables.
202-
- `::after` - Is used to make the triangular shape on the bottom (or top) of the tooltips.
202+
- `.o-UsageBar__bar__tooltip__percentage` - Used to control the style of the percentage lables.
203+
- `::after` - Is used to make the triangular shape on the bottom (or top) of the tooltips.
203204

204205
### `.o-UsageBar__bar__elements__labels__container`
205206

‎package.json‎

Lines changed: 26 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-usage-bar",
3-
"version": "1.2.1",
3+
"version": "1.2.2",
44
"description": "Usage bar, graphic component for React",
55
"main": "dist/main.js",
66
"types": "dist/main.d.ts",
@@ -17,7 +17,6 @@
1717
"scripts": {
1818
"start": "vite",
1919
"build": "tsc --p ./tsconfig-build.json && vite build",
20-
"test": "react-scripts test",
2120
"prepublishOnly": "yarn build",
2221
"storybook": "storybook dev",
2322
"build-storybook": "storybook build -c .storybook -o docs-build .out"
@@ -40,38 +39,34 @@
4039
"homepage": "http://ChrisUser.github.io/react-usage-bar",
4140
"license": "MIT",
4241
"devDependencies": {
43-
"@babel/core": "^7.23.5",
44-
"@babel/preset-env": "^7.23.5",
45-
"@babel/preset-react": "^7.23.3",
46-
"@babel/preset-typescript": "^7.23.3",
47-
"@storybook/addon-essentials": "^7.5.2",
48-
"@storybook/addon-interactions": "^7.5.2",
49-
"@storybook/addon-links": "^7.5.2",
50-
"@storybook/addon-onboarding": "^1.0.8",
51-
"@storybook/blocks": "^7.5.2",
52-
"@storybook/react": "^7.5.2",
53-
"@storybook/react-vite": "^7.5.2",
42+
"@babel/core": "^7.26.0",
43+
"@babel/preset-env": "^7.26.0",
44+
"@babel/preset-react": "^7.26.3",
45+
"@babel/preset-typescript": "^7.26.0",
46+
"@storybook/addon-essentials": "^8.4.7",
47+
"@storybook/addon-interactions": "^8.4.7",
48+
"@storybook/addon-links": "^8.4.7",
49+
"@storybook/addon-onboarding": "^8.4.7",
50+
"@storybook/blocks": "^8.4.7",
51+
"@storybook/react": "^8.4.7",
52+
"@storybook/react-vite": "^8.4.7",
5453
"@storybook/testing-library": "^0.2.2",
55-
"@types/react": "^18.2.39",
56-
"@types/react-dom": "^18.2.17",
57-
"@vitejs/plugin-react": "^4.1.0",
58-
"babel-loader": "^9.1.3",
59-
"postcss": "^8.4.24",
60-
"react": "^18.2.0",
61-
"react-dom": "^18.2.0",
62-
"storybook": "7.6.2",
54+
"@types/react": "^19.0.2",
55+
"@types/react-dom": "^19.0.2",
56+
"@vitejs/plugin-react": "^4.3.4",
57+
"babel-loader": "^9.2.1",
58+
"glob": "^11.0.0",
59+
"postcss": "^8.4.49",
60+
"react": "^19.0.0",
61+
"react-dom": "^19.0.0",
62+
"storybook": "^8.4.7",
6363
"ts-loader": "^9.5.1",
64-
"typescript": "^5.3.2",
65-
"vite": "^5.0.4",
66-
"vite-plugin-dts": "^3.6.0"
64+
"typescript": "^5.7.2",
65+
"vite": "^6.0.6",
66+
"vite-plugin-dts": "^4.4.0"
6767
},
6868
"peerDependencies": {
69-
"react": "^16",
70-
"react-dom": "^16"
71-
},
72-
"resolutions": {
73-
"jackspeak": "2.1.1",
74-
"minimist": "1.2.6",
75-
"semver": "7.5.4"
69+
"react": "^18",
70+
"react-dom": "^18"
7671
}
7772
}

‎src/main.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const App = () => {
2323
},
2424
{
2525
name: 'Other',
26-
value: 8
26+
value: 10
2727
}
2828
]
2929

0 commit comments

Comments
 (0)