Many bugs fixed, added more styles, new layout ...

Author: ChrisUser

.github/workflows/storybook.yml

@@ -0,0 +1,24 @@
+name: Build and Deploy
+on: 
+  push:
+    paths: ["src/**"] # Trigger the action only when files change in the folders defined here
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/[email protected]
+        with:
+          persist-credentials: false
+      - name: Install and Build 🔧
+        run: | # Install npm packages and build the Storybook files
+          npm install
+          npm run build-storybook
+      - name: Deploy 🚀
+        uses: JamesIves/[email protected]
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: main # The branch the action should deploy to.
+          FOLDER: docs-build # The folder that the build-storybook script generates files.
+          CLEAN: true # Automatically remove deleted files from the deploy branch
+          TARGET_FOLDER: react-usage-bar # The folder that we serve our Storybook files from

.storybook/config.ts

@@ -4,5 +4,5 @@ module.exports = {
     "@storybook/addon-docs",
     "@storybook/addon-viewport",
     "@storybook/addon-a11y",
-  ],
+  ]
 }

.storybook/main.ts

@@ -0,0 +1,8 @@
+export const parameters = {
+    a11y: {
+      element: '#root',
+      config: {},
+      options: {},
+      manual: true,
+    },
+  };

.storybook/preview.ts

@@ -3,21 +3,25 @@
 ![React Usage Bar](example.png)
 
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
+![Dependencies](https://img.shields.io/badge/dependencies-up%20to%20date-brightgreen.svg)
+![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-## Installation
+## 🔌 Installation
 
-Install via npm or yarn
+Install via npm
 
 ```sh
 npm install react-usage-bar --save
-yarn add react-usage-bar
 ```
 
-Alternatively just download `UsageBar.tsx` and `styles.css` from the `src` folder and include them in your project in your chosen way.
+or yarn
 
-Keep in mind that the source code of the project needs [Typescript](https://www.typescriptlang.org/) to work.
+```sh
+yarn add react-usage-bar
+```
 
-## Usage
+## 🔧 Usage
 
 The usage bar needs to receive an array of items. In order to display all the values correctly every item should follow this interface:
 
@@ -42,7 +46,7 @@ import "react-usage-bar/build/index.css"
 
 const App = () => {
 
-    const a = [
+  const itemsToDisplay = [
   {
     name: "UI",
     value: 10,
@@ -63,15 +67,16 @@ const App = () => {
   {
     name: "Other",
     value: 8,
-  },
-]
+  }]
 
-    return <UsageBar items={a} total={100} />
+  return <UsageBar items={itemsToDisplay} total={100} />
 })
 
 export default App
 ```
 
+<br>
+
 ## Props (Options)
 
 ### **showPercentage** | _boolean_ | default: `false`
@@ -86,20 +91,30 @@ When true hides all the tooltips or lables of the items.
 
 Enables the component to work in dark-mode.
 
+### **compactLayout** | _boolean_ | default: `false`
+
+The new compact design. _**Try it**_.
+
+<br>
+
 ## CSS Styles
 
-You should import the style directly from the package directory, like this:
+You must import the style directly from the package directory, like this:
 
 ```javascript
 import "react-usage-bar/build/index.css"
 ```
 
-The main css classes are the following:
+The main css classes are the following (**Spoiler**: There are more of them):
 
 ### `.UsageBar`
 
 The main div of the component.
 
+### `.UsageBar__error`
+
+The error message.
+
 ### `.UsageBar__bar`
 
 The actual bar of the component.
@@ -112,20 +127,28 @@ The single item represented in the bar.
 
 The tooltip of the item in which are written all the textual info.
 
-- `::after` | Is used to make the triangular shape on the bottom (or top) of the tooltips.
+- `.UsageBar__bar__element--tooltip--element__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.
 
-## Docs
+<br>
 
-You can run the documentation of the component using [Storybook](https://storybook.js.org/):
+## 📖 Docs (https://chrisuser.github.io/react-usage-bar)
+
+<br>
+
+You can also run the project in a local enviroment using [Storybook](https://storybook.js.org/):
 
 ```
 $ yarn storybook
 ```
 
-## Issues
+<br>
+
+## Contribution
 
-Please create an issue for any bug or feature requests.
+If you have a suggestion that would make this component better feel free to open a pull request or create an issue for any bug you find.
 
 ## Licence
 
-React Usage Bar is [MIT licensed](https://github.com/ChrisUser/react-usage-bar/blob/master/LICENSE)
+React Usage Bar is [MIT licensed](https://github.com/ChrisUser/react-usage-bar/blob/master/LICENSE).

.storybook/webpack.config.js

@@ -1,6 +1,6 @@
 {
   "name": "react-usage-bar",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Usage bar, graphic component for React",
   "main": "build/index.js",
   "module": "build/index.es.js",
@@ -19,7 +19,7 @@
     "format": "prettier-standard --format",
     "test": "jest --coverage",
     "storybook": "start-storybook",
-    "build-storybook": "build-storybook -c .storybook -o .out"
+    "build-storybook": "build-storybook -c .storybook -o docs-build .out"
   },
   "keywords": [
     "react",
@@ -31,38 +31,39 @@
     "name": "ChrisUser",
     "url": "https://github.com/ChrisUser"
   },
+  "homepage": "http://ChrisUser.github.io/react-usage-bar",
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.9.6",
-    "@storybook/addon-a11y": "^5.3.19",
-    "@storybook/addon-docs": "^5.3.19",
-    "@storybook/addon-viewport": "^5.3.19",
-    "@storybook/react": "^5.3.19",
+    "@storybook/addon-a11y": "^6.4.19",
+    "@storybook/addon-docs": "^6.4.19",
+    "@storybook/addon-viewport": "^6.4.19",
+    "@storybook/react": "^6.4.19",
     "@testing-library/jest-dom": "^5.8.0",
-    "@testing-library/react": "^10.0.4",
-    "@types/jest": "^25.2.3",
-    "@types/react": "^16.9.35",
-    "@types/react-dom": "^16.9.8",
+    "@testing-library/react": "^12.1.3",
+    "@types/jest": "^27.4.1",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.1.0",
-    "jest": "^26.0.1",
+    "jest": "^27.5.1",
     "prettier-standard": "^16.3.0",
-    "react": "^16.13.1",
+    "react": "^17.0.2",
     "react-docgen-typescript-loader": "^3.7.2",
-    "react-dom": "^16.13.1",
+    "react-dom": "^17.0.2",
     "rollup": "^2.10.9",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.2",
-    "rollup-plugin-postcss": "^3.1.1",
-    "rollup-plugin-terser": "^6.1.0",
-    "rollup-plugin-typescript2": "^0.27.1",
-    "semantic-release": "^17.0.8",
-    "standard": "^14.3.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.31.2",
+    "semantic-release": "^19.0.2",
+    "standard": "^16.0.4",
     "standard-prettier": "^1.0.1",
-    "ts-jest": "^26.0.0",
-    "ts-loader": "^7.0.5",
-    "typescript": "^3.9.3"
+    "ts-jest": "^27.1.3",
+    "ts-loader": "^8.2.0",
+    "typescript": "^4.5.5"
   },
   "peerDependencies": {
     "react": "^16",

README.md

@@ -30,11 +30,12 @@ export default {
     }),
     external(),
     resolve(),
-    typescript({
-      rollupCommonJSResolveHack: true,
-      exclude: ["**/__tests__/**", "**/*.stories.tsx"],
-      clean: true,
-    }),
+    //typescript({
+    //  rollupCommonJSResolveHack: true,
+    //  exclude: ["**/__tests__/**", "**/*.stories.tsx"],
+    //  clean: true,
+    //}),
+    // typescript(),
     terser(),
     commonjs({
       include: ["node_modules/**"],

example.png

@@ -1,13 +1,17 @@
 import * as React from "react"
 import UsageBar from "./UsageBar"
 
-export default { title: "UsageBar", component: UsageBar }
+export default { 
+  title: "Usage Bar",
+  component: UsageBar,
+  parameters: {}
+}
 
 const items = [
   {
     name: "UI",
     value: 10,
-    color: "#000000",
+    color: "#E85D04",
   },
   {
     name: "Photos",
@@ -27,18 +31,19 @@ const items = [
   },
 ]
 
-export const basic = () => <UsageBar items={items} total={100} />
-export const withPercentages = () => (
-  <UsageBar showPercentage={true} items={items} total={100} />
-)
-export const withoutLabels = () => (
-  <UsageBar removeLabels={true} items={items} total={100} />
+export const lightMode = () => <UsageBar items={items} total={100} />
+
+export const withoutLabels = () => <UsageBar removeLabels items={items} total={100} />
+
+export const withPercentages = () => <UsageBar showPercentage items={items} total={100} />
+
+export const compactLayout = () => <UsageBar showPercentage compactLayout items={items} total={100} />
+
+export const compactLayoutWithoutLabels = () => <UsageBar removeLabels compactLayout items={items} total={100} />
+
+export const error = () => (
+  <>
+    <p>If sum of values exceeds total.</p>
+    <UsageBar items={items} total={50} />
+  </>
 )
-export const errors = () => {
-  return (
-    <div>
-      <p>If sum of values exceeds total.</p>
-      <UsageBar items={items} total={50} />
-    </div>
-  )
-}