https://github.com/buildo/showroom
Showroom of react components used and made by buildo
https://github.com/buildo/showroom
Last synced: about 1 year ago
JSON representation
Showroom of react components used and made by buildo
- Host: GitHub
- URL: https://github.com/buildo/showroom
- Owner: buildo
- Created: 2017-10-27T09:30:48.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T14:29:42.000Z (over 3 years ago)
- Last Synced: 2023-04-10T01:35:20.819Z (over 3 years ago)
- Language: TypeScript
- Homepage: http://react-components.buildo.io
- Size: 9.49 MB
- Stars: 8
- Watchers: 6
- Forks: 2
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-components-showroom
Proof of concept of a shoowroom for [buildo-react-components](https://github.com/buildo/react-components) using [react-styleguidist](https://react-styleguidist.js.org).
## Try
Install dependencies with `yarn` then:
```
yarn start
```
and visit http://localhost:6060
## How to add a component
Suppose you want to add the component `Foo` from `brc` to the showroom:
- Edit `styleguide.config.js` and add the component to the _Components_ section:
```diff
{
name: 'Components',
components: () => [
- brc('AsyncStatusIndicator')
+ brc('AsyncStatusIndicator'),
+ brc('Foo')
],
}
```
- Import the default style in `main.scss`
```diff
@import '~buildo-react-components/src/AsyncStatusIndicator/asyncStatusIndicator.scss';
+ @import '~buildo-react-components/src/Foo/foo.scss';
```
- Add examples and descriptions in `examples/Foo.md`. Any markdown can go in there, all ```js code blocks will be rendered as an interactive component. More info [here](https://react-styleguidist.js.org/docs/documenting.html#usage-examples-and-readme-files).