Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nice-boys/components

@brianlovin and @mxstbr's component library
https://github.com/nice-boys/components

Last synced: about 2 months ago
JSON representation

@brianlovin and @mxstbr's component library

Host: GitHub
URL: https://github.com/nice-boys/components
Owner: nice-boys
Created: 2019-05-29T18:59:05.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2022-12-10T17:43:03.000Z (almost 2 years ago)
Last Synced: 2024-04-25T01:08:19.653Z (5 months ago)
Language: TypeScript
Homepage: https://components.nice-boys.now.sh
Size: 1.15 MB
Stars: 142
Watchers: 1
Forks: 4
Open Issues: 41
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# `@nice-boys/components`

Our React component library to quickly plug together products. Used in conjunction with our [product-boilerplate](https://github.com/nice-boys/product-boilerplate).

## Documentation

**[Visit the Storybook for examples of all components](https://components.nice-boys.now.sh)**

This component library is based on:

- [styled-components](https://styled-components.com)
- [styled-system](https://github.com/jxnblk/styled-system)
- [rebass](https://rebassjs.org)

Recommended usage is with [rebass](https://rebassjs.org), this library does not re-export those core primitives (Flex, Box, etc).

---

## Contributing

### Local development

We use Storybook to develop the component library locally. To start Storybook locally, run:

```
yarn run dev
```

Any `.stories.js` file will be picked up by Storybook. See their doc on [how to write stories](https://storybook.js.org/docs/basics/writing-stories/) to learn more.

### Using your local version in an app

There are three steps to use your local version of `@nice-boys/components` in an app for development:

1. **Link `@nice-boys/components` globally**: Run `yarn link` in the `@nice-boys/components` directory to link the package globally (you only have to do that once on your machine)
2. **Tell your app to use your local version of `@nice-boys/components`**: Run `yarn link @nice-boys/components` in your app directory that depends on the package (you only have to do this once per app)
3. **Rebuild the components on any change**: Run `yarn run build:watch` in the components dir to make sure the library rebuilds every time you change/add/remove a component

That's it!

| @nice-boys/components | yourapp |
| --------------------- | ------------------------------- |
| yarn link | yarn link @nice-boys/components |
| yarn run build:watch | yarn run dev |

If you want to use the remote version in your app again, simply run `yarn unlink @nice-boys/components` in the app directory.

## License