brave-ui-wrapper v0.0.0

Brave UI

List of reusable React components to empower your brave UI

Welcome to the Brave UI repo! Here you will find a list of reusable stateless React components for use across our browser UI. It's a standalone package to be manipulated as any other module, including a visual style guide fully customizable for both developers and designers.

Useful links

• Installation and Usage
• Visual Test - Playing around with the living styleguide
• Creating Stories - Improving the living styleguide
• Creating components and Architecture Overview
• Coverage, running and creating tests
• Publishing Stories and the Brave-UI package
• Brave UI System Interface Engineering Specification
• Contributing

This is experimental technology

You shouldn't be using this module in your production environment yet. API changes can happen at any time and all modules in this repo are considerated experimental at this moment.

Stability Index

The stability index is adopted from MDN (which is adopted from node.js. This library uses only four of the six values defined by node.js:

At the moment all components in this library are under the status of experimental. As things change you can follow each component status in the Components Stability Table(https://github.com/brave/brave-ui/wiki/Components-Stability-Index

What is this?

This repository is the home of the Brave Style Guide and the Brave UI Package.

The Style Guide is a spec visualization of the browser-laptop components, made possible by Storybook. The style guide is separated by "stories", which is defined as a component with a given state, visually mutable in the UI. It's also a great tool for manual testing purposes and behavior visualization.

The Brave UI Package is a standalone package containing stateless components to be used in browser-laptop, made by design to be implemented inside the render() method as a replacement for front-end code, making it easier to change and adapt. It uses Lerna to manage only the package needed to export components.

If you're looking for an architecture overview please go to Creating components & Architecture Overview doc.

How this works?

We have the main repository that hosts the style guide, which is private, which means it never publishes to npm. Instead, it's published as a website, which is, in fact, the storybook visualization set as a public resource at https://brave.github.io/brave-ui. The website deploy is automated by npm run deploy.

On the other hand, we have the brave-ui repository, containing a list of reusable stateless components with their respective tests and coverage. The package includes only the resources needed to be usable outside of this repository as a public package with the same name. The package deploy is automated by npm run publish.

Installation and Usage

cd <your_repo_here>
# If you prefer using yarn: yarn add brave-ui
npm i --save brave-ui

Confirm in your package.json that the brave-ui is installed. Once you're good to go you can require it by using the object-destructuring pattern, which is used to take advantage of module three-shaking. Note that without this pattern (without the brackets evolving the component name) the package will throw an error.

If you're looking to contribute to this repo please refer to Contributing docs.

// Let's implement the <PushButton /> component
const { PushButton } = require('brave-ui')

render () {
  return (
    <PushButton theme='primary' label='something' />
  )
}

For further information about other development goodies, please refer to the table of contents.

Contribute!

We are still in an early draft and would love your feedback. If you think something can be better or is just wrong, please open an issue or submit a pull-request. More information at the contributing docs. Let's make it cool!