progresso

Dev setup

• npm run lint - runs ESLint.
• npm test and npm run tdd - runs Karma/Mocha/Chai/Phantom. Code coverage report is generated through istanbul/isparta to build/.
• npm start - runs the development server at localhost:8080 and use Hot Module Replacement. You can override the default host and port through env (HOST, PORT).
• npm version <x.y.<> - updates /dist and package.json with the new version and create a version tag to Git.
• npm publish - pushes a new version to npm and updates the project site.

What else could be added?

• A good UX when changing either min and max. I don't believe I've seen this done well before but here are a few quick ideas:
  • Moving the progress back to the left is probably not ever a good option
  • Make the filled bar thinner to signify that it's got more distance to travel. Kind of weird.
  • Temporarily show some labels on an x-axis. Imagine updating max and then suddenly the axis labels appear and then it updates the right-side to the new max value while the left side changes to a new amount so that the right most position of the filled amount stays the same
• A new prop to convey error / warning / success states which could add new css classname hooks and be available for the label
• A better default label. This one just makes it easy to explain that you can pass a function that has access to the inner state of the component.
• Different positioning of the label.
  • Right aligned inside the the progress bar and then left aligned to outside of it when there isn't enough progress to contain it. Stuff like that.
• Better CSS customization
  • At the very least, explain the current BEM style class name hooks for easy theming
  • Research latest CSS/"JS-in-CSS" best practices. PostCSS, CSS Modules, etc?
• This project could handle different other styles of progress indicators without changing much of the API. Like radial indicators, for example.

Usage

With default props (they're not needed here):

<ProgressBar
  animated={true}
  classNamespace="progressbar"
  max={100}
  min={0}
  label={/* "defaultLabel" function export from same file */}
  value={0}
/>

Custom label and "alternate" css styles that are also available in the source code. Hint: The css is currently the best reference adding your own custom styling

<ProgressBar
  classNamespace="progressbar-alt"
  label={(percent, max, value, indeterminate) => ( indeterminate ?
    'Figuring out how to load your stuff' :
    `${percent}% of your stuff has loaded`
  )}
/>