Skip to content

Commit

Permalink
Bump to v1.2.0
Browse files Browse the repository at this point in the history
- Add Tailwind support
- Optimize component
- Graphic fixes
  • Loading branch information
ChrisUser authored Nov 25, 2023
2 parents cb62b17 + 48e04b8 commit c3173c2
Show file tree
Hide file tree
Showing 11 changed files with 3,675 additions and 5,891 deletions.
10 changes: 4 additions & 6 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ on: [push]
env:
GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
NPM_PACKAGE_NAME: 'react-usage-bar'
VERSION: ''
PUBLISHED_VERSION: ''
NODE_VERSION: '18.x'
NPM_PACKAGE_NAME: "react-usage-bar"
VERSION: ""
PUBLISHED_VERSION: ""
NODE_VERSION: "18.x"

jobs:
build-and-test:
Expand All @@ -29,8 +29,6 @@ jobs:
run: | # Install npm packages and build the src files
npm install --force
npm run build --if-present
# - name: Semantic release
# run: npx semantic-release
tag-and-npm-publish:
if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}
Expand Down
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
node_modules/
docs-build/
coverage/
build/
debug.log
Expand Down
77 changes: 60 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,14 @@
![React Usage Bar first example](example.png)
![React Usage Bar compact design](example_compact.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)
![Latest version](https://img.shields.io/npm/v/react-usage-bar?logo=npm)
![Build passing](https://img.shields.io/badge/build-passing-darkgreen.svg)
![Contributions welcome](https://img.shields.io/badge/contributions-welcome-darkorange.svg)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

Display disc sectors, stats and more with this lightweight user-friendly React component.\
Now compatible with [Tailwind](https://tailwindcss.com/).

## 🔌 Installation

Install via npm
Expand Down Expand Up @@ -41,15 +44,23 @@ The usage bar needs to receive an array of items. In order to display all the va

### Item type

| Attribute | Type | Required |
| --------- | ------ | -------- |
| value | number | Yes |
| name | string | Yes |
| color | string | No |
| Attribute | Type | Required | |
| ------------ | ------ | -------- | -------------------------------------------------------------------------------------- |
| value | number | Yes | |
| name | string | Yes | |
| color | string | No | |
| className | string | No | ![tailwind compatible](https://img.shields.io/badge/Tailwind-compatible-darkgreen.svg) |
| dotClassName | string | No | ![tailwind compatible](https://img.shields.io/badge/Tailwind-compatible-darkgreen.svg) |

The `value` attribute indicates the amount of space taken up by the sector with a specific `name`. The `color` property can be utilized to define the background color of that particular portion in the bar.

To further customize the sector element, you can apply your own CSS classes or Tailwind classes using the `className` attribute.

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.
In case you are using the **compact layout** and have not specified a `color` value, you can customize the `dotClassName` similarly to the `className` attribute.

The `total` value is also required.
> The defined `color` property value will have a **priority on the background color** defined in the `className` and/or `dotClassName` ones.\
> <br />
> It is recommended to use **exclusively** `color` or one of the two other properties per item.
### Example

Expand Down Expand Up @@ -89,25 +100,57 @@ const App = () => {
export default App
```

The `total` prop is also required.

<br>

## Props (Options)

### **showPercentage** | _boolean_ | default: `false`

When true shows the percentage value of all the elements.
When true, shows the percentage value of all the elements.

### **removeLabels** | _boolean_ | default: `false`
### **showLabels** | _boolean_ | default: `true`

When true hides all the tooltips or lables of the items.
When false, hides all the tooltips or lables of the items.

### **darkMode** | _boolean_ | default: `false`

Enables the component to work in dark-mode.
When true, enables the component to work in dark-mode.

### **compactLayout** | _boolean_ | default: `false`

The new compact design. _**Try it**_.
When true, enables the new compact design. _**Try it**_. 😎

### **showFallbackColors** | _boolean_ | default: `false`

When true, this feature dynamically assigns a random color to the background of any items where a value has not been specified

### **errorMessage** | _string_ | default: `Error: Total elements values exceed 100%.`

Customize the error string that appears when the total values of the provided items exceeds 100%.

---

<br>

**Custom classes props:** add custom or Tailwind classes to elements of the component.

### **usageBarContainerClassName** | _string_

Can customize the main div of the component.

### **usageBarClassName** | _string_

Can customize the actual bar element of the component.

### **tooltipClassName** | _string_

Can customize the tooltip div of the item in which are written all the textual info.

### **errorMessageClassName** | _string_

Can customize the style of the error message.

<br>

Expand Down Expand Up @@ -156,7 +199,6 @@ 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__elements__labels__container`
Expand Down Expand Up @@ -185,7 +227,8 @@ $ yarn storybook

## Contribution

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.
If you have a suggestion that would make this component better feel free to fork the project and open a pull request or create an issue for any idea or bug you find.\
Remeber to follow the [Contributing Guidelines](https://github.com/ChrisUser/.github/blob/main/CONTRIBUTING.md).

<br>

Expand Down
68 changes: 30 additions & 38 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-usage-bar",
"version": "1.1.22",
"version": "1.2.0",
"description": "Usage bar, graphic component for React",
"type": "module",
"main": "build/index.js",
Expand Down Expand Up @@ -38,62 +38,49 @@
"homepage": "http://ChrisUser.github.io/react-usage-bar",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.22.7",
"@babel/preset-env": "^7.22.7",
"@babel/preset-react": "^7.22.5",
"@babel/preset-typescript": "^7.22.5",
"@storybook/addon-a11y": "^7.0.26",
"@storybook/addon-docs": "^7.0.26",
"@storybook/addon-viewport": "^7.0.26",
"@storybook/react": "^7.0.26",
"@storybook/react-webpack5": "^7.0.26",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@types/jest": "^26.0.19",
"@types/react": "^18.2.14",
"@types/react-dom": "^18.2.6",
"@babel/core": "^7.23.3",
"@babel/preset-env": "^7.23.3",
"@babel/preset-react": "^7.23.3",
"@babel/preset-typescript": "^7.23.3",
"@storybook/addon-a11y": "^7.5.3",
"@storybook/addon-docs": "^7.5.3",
"@storybook/addon-viewport": "^7.5.3",
"@storybook/react": "^7.5.3",
"@storybook/react-webpack5": "^7.5.3",
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/react": "^14.1.2",
"@types/jest": "^29.5.10",
"@types/react": "^18.2.38",
"@types/react-dom": "^18.2.17",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^9.1.2",
"esbuild": "^0.18.11",
"jest": "^26.0.19",
"babel-loader": "^9.1.3",
"esbuild": "^0.19.7",
"jest": "^29.7.0",
"postcss": "^8.4.24",
"prettier-standard": "^16.3.0",
"react": "^18.2.0",
"react-docgen-typescript-loader": "^3.7.2",
"react-dom": "^18.2.0",
"rollup": "^3.26.1",
"rollup": "^4.5.2",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-dts": "^5.3.0",
"rollup-plugin-esbuild": "^5.0.0",
"rollup-plugin-dts": "^6.1.0",
"rollup-plugin-esbuild": "^6.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.2",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.35.0",
"semantic-release": "^21.0.7",
"rollup-plugin-typescript2": "^0.36.0",
"standard": "^17.1.0",
"standard-prettier": "^1.0.1",
"storybook": "future",
"storybook": "7.5.3",
"ts-jest": "^29.1.1",
"ts-loader": "^9.4.4",
"typescript": "^5.1.6"
"ts-loader": "^9.5.1",
"typescript": "^5.3.2"
},
"peerDependencies": {
"react": "^17",
"react-dom": "^17"
},
"resolutions": {
"minimist": "1.2.6",
"semver": "7.5.2"
},
"plugins": [
"@semantic-release/commit-analyzer",
"@semantic-release/release-notes-generator",
"@semantic-release/changelog",
"@semantic-release/github",
"@semantic-release/npm",
"@semantic-release/git"
],
"jest": {
"preset": "ts-jest",
"testEnvironment": "jsdom",
Expand All @@ -114,5 +101,10 @@
"afterAll",
"jest"
]
},
"dependencies": {
"minimist": "1.2.8",
"semver": "7.5.4",
"tslib": "^2.6.2"
}
}
53 changes: 26 additions & 27 deletions rollup.config.js
Original file line number Diff line number Diff line change
@@ -1,46 +1,45 @@
import typescript from 'rollup-plugin-typescript2'
import commonjs from 'rollup-plugin-commonjs'
import external from 'rollup-plugin-peer-deps-external'
import resolve from 'rollup-plugin-node-resolve'
import postcss from 'rollup-plugin-postcss'
import { terser } from 'rollup-plugin-terser'
import typescript from "rollup-plugin-typescript2"
import commonjs from "rollup-plugin-commonjs"
import external from "rollup-plugin-peer-deps-external"
import resolve from "rollup-plugin-node-resolve"
import postcss from "rollup-plugin-postcss"
import { terser } from "rollup-plugin-terser"

import pkg from './package.json' assert { type: "json" }
import pkg from "./package.json" assert { type: "json" }

export default {
input: 'src/index.ts',
input: "src/index.ts",
output: [
{
file: pkg.main,
format: 'cjs',
exports: 'named',
sourcemap: true
}
format: "cjs",
exports: "named",
sourcemap: true,
},
],
plugins: [
resolve(),
postcss({
extensions: ['.css'],
extract: true
extensions: [".css"],
extract: true,
}),
external(),
typescript({
rollupCommonJSResolveHack: true,
exclude: ['**/__tests__/**', '**/*.stories.tsx'],
clean: true
exclude: ["**/__tests__/**", "**/*.stories.tsx"],
clean: true,
}),
terser(),
commonjs({
include: ['node_modules/**'],
include: ["node_modules/**"],
namedExports: {
'node_modules/react/react.js': [
'Children',
'Component',
'PropTypes',
'createElement'
"node_modules/react/react.js": [
"Children",
"Component",
"PropTypes",
"createElement",
],
'node_modules/react-dom/index.js': ['render']
}
})
]
"node_modules/react-dom/index.js": ["render"],
},
}),
],
}
36 changes: 29 additions & 7 deletions src/UsageBar.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import * as React from "react"
import UsageBar from "./UsageBar"

export default {
export default {
title: "Usage Bar",
component: UsageBar,
parameters: {}
parameters: {},
}

const items = [
Expand All @@ -31,15 +31,37 @@ const items = [
},
]

export const lightMode = () => <UsageBar items={items} total={100} />
export const lightMode = () => (
<UsageBar showFallbackColors items={items} total={100} />
)

export const withoutLabels = () => <UsageBar removeLabels items={items} total={100} />
export const withoutLabels = () => (
<UsageBar showLabels={false} showFallbackColors items={items} total={100} />
)

export const withPercentages = () => <UsageBar showPercentage items={items} total={100} />
export const withPercentages = () => (
<UsageBar showPercentage showFallbackColors items={items} total={100} />
)

export const compactLayout = () => <UsageBar showPercentage compactLayout items={items} total={100} />
export const compactLayout = () => (
<UsageBar
showPercentage
showFallbackColors
compactLayout
items={items}
total={100}
/>
)

export const compactLayoutWithoutLabels = () => <UsageBar removeLabels compactLayout items={items} total={100} />
export const compactLayoutWithoutLabels = () => (
<UsageBar
showLabels={false}
showFallbackColors
compactLayout
items={items}
total={100}
/>
)

export const error = () => (
<>
Expand Down
Loading

0 comments on commit c3173c2

Please sign in to comment.