ChrisUser · ChrisUser · Dec 31, 2024 · Dec 31, 2024 · Dec 31, 2024
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -1,87 +1,89 @@
 name: Release workflow
 
-on: [push]
+on:
+    push:
+        branches: [main]
 
 env:
-  GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
-  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-  NPM_PACKAGE_NAME: "react-usage-bar"
-  VERSION: ""
-  PUBLISHED_VERSION: ""
-  NODE_VERSION: "18.x"
+    GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+    NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    NPM_PACKAGE_NAME: 'react-usage-bar'
+    VERSION: ''
+    PUBLISHED_VERSION: ''
+    NODE_VERSION: '20.x'
 
 jobs:
-  build-and-test:
-    runs-on: ubuntu-latest
+    build-and-test:
+        runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [18.x] # 16.x removed since react-usage-bar v1.1.19
+        strategy:
+            matrix:
+                node-version: [20.x]
 
-    steps:
-      - uses: actions/checkout@v3
-      - name: Setup Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: "npm"
-      - name: Install and Build
-        run: | # Install npm packages and build the src files
-          npm install --force
-          npm run build --if-present
+        steps:
+            - uses: actions/checkout@v3
+            - name: Setup Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v3
+              with:
+                  node-version: ${{ matrix.node-version }}
+                  cache: 'npm'
+            - name: Install and Build
+              run: | # Install npm packages and build the src files
+                  npm install --force
+                  npm run build --if-present
 
-  tag-and-npm-publish:
-    if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      id-token: write
-    needs: [build-and-test]
-    steps:
-      - name: Check out repository code
-        uses: actions/checkout@v3
-        with:
-          token: ${{ env.GITHUB_TOKEN }}
-      - uses: actions/setup-node@v2.5.1
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          check-latest: true
-      - name: Set NPM
-        run: |
-          echo "//registry.npmjs.org/:_authToken=\${NPM_TOKEN}" > .npmrc
-      - name: Set version
-        run: |
-          echo VERSION=$(npm pkg get version | sed 's/"//g') >> $GITHUB_ENV
-          echo PUBLISHED_VERSION=$(npm show $NPM_PACKAGE_NAME version) >> $GITHUB_ENV
-          echo "VERSION ${VERSION}"
-          echo "NPM_PACKAGE_NAME ${NPM_PACKAGE_NAME}"
-      - name: Install dependecies
-        if: ${{ env.VERSION != env.PUBLISHED_VERSION }}
-        run: |
-          yarn install
-      - name: Build typescript
-        if: ${{ env.VERSION != env.PUBLISHED_VERSION }}
-        run: yarn build
-      - run: npm publish --dry-run
-      - uses: step-security/wait-for-secrets@v1
-        id: wait-for-secrets
-        with:
-          secrets: |
-            OTP: 
-              name: 'OTP to publish package'
-              description: 'OTP from authenticator app'
-      - name: Publish on NPM
-        if: ${{ env.VERSION != env.PUBLISHED_VERSION }}
-        run: |
-          git tag v${VERSION} ${GITHUB_SHA} || exit 0
-          git push origin v${VERSION}
-          npm publish --otp ${{ steps.wait-for-secrets.outputs.OTP }}
-      - name: Check loaded and NPM version
-        if: ${{ env.VERSION == env.PUBLISHED_VERSION }}
-        run: |
-          echo "The loaded version is the same on npm. 0 new uploaded versions."
-          exit 0;
-      - name: Remove NPM token
-        if: always()
-        run: |
-          rm .npmrc
+    tag-and-npm-publish:
+        if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}
+        runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            id-token: write
+        needs: [build-and-test]
+        steps:
+            - name: Check out repository code
+              uses: actions/checkout@v4
+              with:
+                  token: ${{ env.GITHUB_TOKEN }}
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: ${{ env.NODE_VERSION }}
+                  check-latest: true
+            - name: Set NPM
+              run: |
+                  echo "//registry.npmjs.org/:_authToken=\${NPM_TOKEN}" > .npmrc
+            - name: Set version
+              run: |
+                  echo VERSION=$(npm pkg get version | sed 's/"//g') >> $GITHUB_ENV
+                  echo PUBLISHED_VERSION=$(npm show $NPM_PACKAGE_NAME version) >> $GITHUB_ENV
+                  echo "VERSION ${VERSION}"
+                  echo "NPM_PACKAGE_NAME ${NPM_PACKAGE_NAME}"
+            - name: Install dependecies
+              if: ${{ env.VERSION != env.PUBLISHED_VERSION }}
+              run: |
+                  yarn install
+            - name: Build typescript
+              if: ${{ env.VERSION != env.PUBLISHED_VERSION }}
+              run: yarn build
+            - run: npm publish --dry-run
+            - uses: step-security/wait-for-secrets@v1
+              id: wait-for-secrets
+              with:
+                  secrets: |
+                      OTP: 
+                        name: 'OTP to publish package'
+                        description: 'OTP from authenticator app'
+            - name: Publish on NPM
+              if: ${{ env.VERSION != env.PUBLISHED_VERSION }}
+              run: |
+                  git tag v${VERSION} ${GITHUB_SHA} || exit 0
+                  git push origin v${VERSION}
+                  npm publish --otp ${{ steps.wait-for-secrets.outputs.OTP }}
+            - name: Check loaded and NPM version
+              if: ${{ env.VERSION == env.PUBLISHED_VERSION }}
+              run: |
+                  echo "The loaded version is the same on npm. 0 new uploaded versions."
+                  exit 0;
+            - name: Remove NPM token
+              if: always()
+              run: |
+                  rm .npmrc
diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
@@ -7,7 +7,7 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - name: Checkout 🛎️
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
               with:
                   persist-credentials: false
             - name: Install and Build 🔧
@@ -19,7 +19,7 @@ jobs:
               run: |
                   echo "sha_short=$(git rev-parse --short "$GITHUB_SHA")" >> "$GITHUB_ENV"
             - name: Deploy 🚀
-              uses: crazy-max/ghaction-github-pages@v3
+              uses: crazy-max/ghaction-github-pages@v4
               with:
                   target_branch: docs
                   build_dir: docs-build

diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 - 2023 Cristiano Raimondi
+Copyright (c) 2020 - 2025 Cristiano Raimondi
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -32,7 +32,8 @@ yarn add react-usage-bar
 | Package v | Node       |
 | --------- | ---------- |
 | <= 1.1.18 | <= 16.14.x |
-| > 1.1.19  | 18.x.x     |
+| >= 1.1.19 | 18.x.x     |
+| >= 1.2.2  | 20.x.x     |
 
 <br>
 
@@ -159,14 +160,14 @@ Can customize the style of the error message.
 You must import the style directly from the package directory, like this:
 
 ```javascript
-import "react-usage-bar/build/index.css"
+import 'react-usage-bar/build/index.css'
 ```
 
 The project variables are:
 
-- `--text-color`
-- `--background-tooltip-color`
-- `--background-bar-color`
+-   `--text-color`
+-   `--background-tooltip-color`
+-   `--background-bar-color`
 
 The main css classes are the following:
 
@@ -198,8 +199,8 @@ The single item represented in the bar. This class is vastly used.
 
 The tooltip of the item in which are written all the textual info.
 
-- `.o-UsageBar__bar__tooltip__percentage` - Used to control the style of the percentage lables.
-- `::after` - Is used to make the triangular shape on the bottom (or top) of the tooltips.
+-   `.o-UsageBar__bar__tooltip__percentage` - Used to control the style of the percentage lables.
+-   `::after` - Is used to make the triangular shape on the bottom (or top) of the tooltips.
 
 ### `.o-UsageBar__bar__elements__labels__container`
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "react-usage-bar",
-    "version": "1.2.1",
+    "version": "1.2.2",
     "description": "Usage bar, graphic component for React",
     "main": "dist/main.js",
     "types": "dist/main.d.ts",
@@ -17,7 +17,6 @@
     "scripts": {
         "start": "vite",
         "build": "tsc --p ./tsconfig-build.json && vite build",
-        "test": "react-scripts test",
         "prepublishOnly": "yarn build",
         "storybook": "storybook dev",
         "build-storybook": "storybook build -c .storybook -o docs-build .out"
@@ -40,38 +39,34 @@
     "homepage": "http://ChrisUser.github.io/react-usage-bar",
     "license": "MIT",
     "devDependencies": {
-        "@babel/core": "^7.23.5",
-        "@babel/preset-env": "^7.23.5",
-        "@babel/preset-react": "^7.23.3",
-        "@babel/preset-typescript": "^7.23.3",
-        "@storybook/addon-essentials": "^7.5.2",
-        "@storybook/addon-interactions": "^7.5.2",
-        "@storybook/addon-links": "^7.5.2",
-        "@storybook/addon-onboarding": "^1.0.8",
-        "@storybook/blocks": "^7.5.2",
-        "@storybook/react": "^7.5.2",
-        "@storybook/react-vite": "^7.5.2",
+        "@babel/core": "^7.26.0",
+        "@babel/preset-env": "^7.26.0",
+        "@babel/preset-react": "^7.26.3",
+        "@babel/preset-typescript": "^7.26.0",
+        "@storybook/addon-essentials": "^8.4.7",
+        "@storybook/addon-interactions": "^8.4.7",
+        "@storybook/addon-links": "^8.4.7",
+        "@storybook/addon-onboarding": "^8.4.7",
+        "@storybook/blocks": "^8.4.7",
+        "@storybook/react": "^8.4.7",
+        "@storybook/react-vite": "^8.4.7",
         "@storybook/testing-library": "^0.2.2",
-        "@types/react": "^18.2.39",
-        "@types/react-dom": "^18.2.17",
-        "@vitejs/plugin-react": "^4.1.0",
-        "babel-loader": "^9.1.3",
-        "postcss": "^8.4.24",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "storybook": "7.6.2",
+        "@types/react": "^19.0.2",
+        "@types/react-dom": "^19.0.2",
+        "@vitejs/plugin-react": "^4.3.4",
+        "babel-loader": "^9.2.1",
+        "glob": "^11.0.0",
+        "postcss": "^8.4.49",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "storybook": "^8.4.7",
         "ts-loader": "^9.5.1",
-        "typescript": "^5.3.2",
-        "vite": "^5.0.4",
-        "vite-plugin-dts": "^3.6.0"
+        "typescript": "^5.7.2",
+        "vite": "^6.0.6",
+        "vite-plugin-dts": "^4.4.0"
     },
     "peerDependencies": {
-        "react": "^16",
-        "react-dom": "^16"
-    },
-    "resolutions": {
-        "jackspeak": "2.1.1",
-        "minimist": "1.2.6",
-        "semver": "7.5.4"
+        "react": "^18",
+        "react-dom": "^18"
     }
 }
diff --git a/src/main.tsx b/src/main.tsx
@@ -23,7 +23,7 @@ const App = () => {
         },
         {
             name: 'Other',
-            value: 8
+            value: 10
         }
     ]
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,7 @@ const App = () => { @@
             },
             {
                 name: 'Other',
-                value: 8
+                value: 10
             }
         ]
@@ Expand Down @@