POA UI Components and Common Assets NPM Package

[pablofullana]

Title

Title: POA UI Components and Common Assets NPM Package
Layer: TBD

Abstract

NPM package containing POA frontend components and common assets.

Rationale

The poa-ui package will allow developers to have set of components and common assets to be used in their DApps or any other POA-related UI.

Similar packages (among many others):

• pivotal-ui
• react-bootstrap

Specification

The poa-ui package will include all self-contained and common assets that are the building blocks of any POA DApp or any other user-facing piece of the POA ecosystem.

On the one hand, self-contained components will allow developers to re-use already-tested components that are proven to work as expected and match POA style guide:

For example: import { Header } from 'poa-ui'

On the other hand, included assets will be:

• CSS
• Images
• Fonts
• Javascript

Allowing developers to code their own components while keeping a cohesive visual style.

Package versioning will enable developers to develop UIs using the latest visual style and avoid mixing up different styles, as POA style guide continues to evolve over time.

Note: PoBA Dapp already addresses UI implementation using auto-contained components (via GlamorousJS)

[rstormsf]

Ohh nice!

[igorbarinov]

Nice job, Pablo
what's about ES Modules? Can/should we use them? https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/

[fvictorio]

@igorbarinov Since POA uses React for the frontend of all its projects (well, at least the ones I know), and they have a build step, I'm not sure using ES modules from the browser would have any advantage. I think it's more like npm installing the poa-ui dependency and using the components that it exports. (And this is done using ES Modules syntax that is transpiled, but that's a different matter.)