README.md updated

Author: ChrisUser

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 coverage/
 build/
-debug.log
+debug.log
+.out

README.md

@@ -1,27 +1,120 @@
-# react-usage-bar
+# React Usage Bar Graphic Component
 
-## Usage
+![React Usage Bar](example.png)
 
-To install dependencies
+## Installation
 
-```
-$ yarn install
+Install via npm or yarn
+
+```sh
+npm install react-usage-bar --save
+yarn add react-usage-bar
 ```
 
-To build
+Alternatively just download `UsageBar.tsx` and `styles.css` from the `src` folder and include them in your project in your chosen way.
 
-```
-$ yarn build
-```
+Keep in mind that the source code of the project needs [Typescript](https://www.typescriptlang.org/) to work.
 
-To run tests
+## 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:
+
+### Item type
+
+| Attribute | Type   | Required |
+| --------- | ------ | -------- |
+| value     | number | Yes      |
+| name      | string | Yes      |
+| color     | string | No       |
+
+The `value` represents the quantity of space occupied by the sector with a certain `name`. The `color` property could be used to specify the background color of that portion in the bar.
+
+The `total` value is also required.
+
+### Example
+
+```javascript
+import * from 'react'
+import UsageBar from 'react-usage-bar'
+
+const App = () => {
+
+    const a = [
+  {
+    name: "UI",
+    value: 10,
+    color: "#000000",
+  },
+  {
+    name: "Photos",
+    value: 30,
+  },
+  {
+    name: "Videos",
+    value: 15,
+  },
+  {
+    name: "System Data",
+    value: 33,
+  },
+  {
+    name: "Other",
+    value: 8,
+  },
+]
+
+    return <UsageBar items={a} total={100} />
+})
+
+export default App
 ```
-$ yarn test
-```
 
-To run Storybook
+## Props (Options)
+
+### **showPercentage** | _boolean_ | default: `false`
+
+When true shows the percentage value of all the elements.
+
+### **removeLabels** | _boolean_ | default: `false`
+
+When true hides all the tooltips or lables of the items.
+
+### **darkMode** | _boolean_ | default: `false`
+
+Enables the component to work in dark-mode.
+
+## CSS Styles
+
+### `.UsageBar`
+
+The main div of the component.
+
+### `.UsageBar__bar`
+
+The actual bar of the component.
+
+### `.UsageBar__bar__element`
+
+The single item represented in the bar.
+
+### `.UsageBar__bar__element--tooltip`
+
+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.
+
+## Docs
+
+You can run the documentation of the component using [Storybook](https://storybook.js.org/):
 
 ```
 $ yarn storybook
 ```
+
+## Issues
+
+Please create an issue for any bug or feature requests.
+
+## Licence
+
+React Usage Bar is [MIT licensed](https://github.com/ChrisUser/react-usage-bar/blob/master/LICENSE)

example.png

@@ -10,7 +10,8 @@
     "lint": "standard",
     "format": "prettier-standard --format",
     "test": "jest --coverage",
-    "storybook": "start-storybook"
+    "storybook": "start-storybook",
+    "build-storybook": "build-storybook -c .storybook -o .out"
   },
   "keywords": [
     "react",

package.json

@@ -37,7 +37,7 @@ export const withoutLabels = () => (
 export const errors = () => {
   return (
     <div>
-      <span>If sum of values exceeds total.</span>
+      <p>If sum of values exceeds total.</p>
       <UsageBar items={items} total={50} />
     </div>
   )

src/UsageBar.stories.tsx

@@ -74,12 +74,12 @@ const UsageBar: React.FC<Props> = ({
     )
 
   return (
-    <div className="panel">
-      <div className="bar">
+    <div className="UsageBar">
+      <div className="UsageBar__bar">
         {items.map((element: Item) => {
           return (
             <div
-              className="element"
+              className="UsageBar__bar__element"
               style={{
                 width: `${getPercentageValue(element.value)}%`,
                 backgroundColor: element.color || setColor(),
@@ -88,7 +88,7 @@ const UsageBar: React.FC<Props> = ({
               {removeLabels ? (
                 ""
               ) : (
-                <div className="tooltip">
+                <div className="UsageBar__bar__element--tooltip">
                   {element.name +
                     " " +
                     (showPercentage

src/UsageBar.tsx

@@ -9,7 +9,7 @@
   --background-bar-color: hsl(0, 0%, 26%);
 }
 
-.panel {
+.UsageBar {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -21,7 +21,7 @@
   padding: 1em 1.3em;
   height: 6em;
 }
-.bar {
+.UsageBar__bar {
   position: relative;
   height: 0.6em;
   width: 100%;
@@ -34,27 +34,29 @@
   background-color: var(--background-bar-color);
   border-radius: 0.32em;
 }
-.element:first-child {
+.UsageBar__bar__element:first-child {
   border-radius: 0.32em 0 0 0.32em;
 }
-.element:last-child {
+.UsageBar__bar__element:last-child {
   border-radius: 0 0.32em 0.32em 0;
 }
-.element:nth-child(odd) > .tooltip {
+.UsageBar__bar__element:nth-child(odd) > .UsageBar__bar__element--tooltip {
   top: -2.3em;
 }
-.element:nth-child(odd) > .tooltip::after {
+.UsageBar__bar__element:nth-child(odd)
+  > .UsageBar__bar__element--tooltip::after {
   border-top: 0.5em solid var(--background-tooltip-color);
   bottom: -0.44em;
 }
-.element:nth-child(even) > .tooltip {
+.UsageBar__bar__element:nth-child(even) > .UsageBar__bar__element--tooltip {
   bottom: -2.3em;
 }
-.element:nth-child(even) > .tooltip::after {
+.UsageBar__bar__element:nth-child(even)
+  > .UsageBar__bar__element--tooltip::after {
   border-bottom: 0.5em solid var(--background-tooltip-color);
   top: -0.44em;
 }
-.element {
+.UsageBar__bar__element {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -63,7 +65,7 @@
   position: relative;
   height: 100%;
 }
-.element > .tooltip {
+.UsageBar__bar__element--tooltip {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -76,7 +78,7 @@
   color: var(--text-color);
   font-size: 0.9em;
 }
-.element > .tooltip::after {
+.UsageBar__bar__element--tooltip::after {
   z-index: -1;
   content: "";
   width: 0;