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.

TOC • What is this? • How this works? • Installation and usage • Contribute!

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
• Contributing

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 <BrowserButton /> component
const {BrowserButton} = require('brave-ui')

render () {
  return (
    <BrowserButton as='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!