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!
- 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
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.
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:
| Status | Description |
|---|---|
| Experimental | The module is not yet stabilized. You can try it out and provide feedback, but we may change or remove it in future versions without having to pass through a formal deprecation process. |
| Unstable | The API is in the process of settling, but has not yet had sufficient real-world testing to be considered stable. Backwards-compatibility will be maintained if reasonable. If we do have to make backwards-incompatible changes, we will not guarantee the module will go through the formal deprecation process. |
| Stable | The module is a fully-supported part of the SDK. We will avoid breaking backwards compatibility unless absolutely necessary. If we do have to make backwards-incompatible changes, we will go through the formal deprecation process. |
| Deprecated | We plan to change this module, and backwards compatibility should not be expected. Don’t start using it, and plan to migrate away from this module to its replacement. |
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
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.
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.
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.
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!