Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/rip21/cra-components-development

Boilerplate for components library creation. With code-style best practices. Styleguidist auto documentation. Based on non-ejected create-react-app.
https://github.com/rip21/cra-components-development

boilerplate components create-react-app publishing react styled-components styleguide

Last synced: 2 months ago
JSON representation

Boilerplate for components library creation. With code-style best practices. Styleguidist auto documentation. Based on non-ejected create-react-app.

Host: GitHub
URL: https://github.com/rip21/cra-components-development
Owner: RIP21
License: mit
Created: 2017-06-08T14:10:03.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2022-12-07T17:45:16.000Z (about 2 years ago)
Last Synced: 2024-04-13T23:54:54.265Z (8 months ago)
Topics: boilerplate, components, create-react-app, publishing, react, styled-components, styleguide
Language: JavaScript
Homepage: https://rip21.github.io/CRA-components-development/
Size: 2.48 MB
Stars: 9
Watchers: 2
Forks: 0
Open Issues: 39
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# [create-react-app](https://github.com/facebookincubator/create-react-app) for components development

[![Build Status](https://travis-ci.org/RIP21/CRA-components-development.svg?branch=master)](https://travis-ci.org/RIP21/CRA-components-development)
[![Greenkeeper badge](https://badges.greenkeeper.io/RIP21/CRA-components-development.svg)](https://greenkeeper.io/)
Is a minimal yet another boilerplate based on top of the famous
create-react-app, made especially for creating components libraries with
rich online docs powered by [Styleguidist](https://github.com/styleguidist/react-styleguidist) and all power of CRA.

### Includes:
- [Styleguidist](https://github.com/styleguidist/react-styleguidist) for automatic styleguide docs generation
- stylelint of [styled-components](https://github.com/styled-components/styled-components)
- [prettier](https://github.com/prettier/prettier)
- eslint
- [create-react-app](https://github.com/facebookincubator/create-react-app)
- [react-app-rewired](https://github.com/timarney/react-app-rewired)
- babel with CRA preset and ENV preset (https://www.npmjs.com/package/babel-preset-react-app) for components libs transpiling
- Scripts for publishing components with ES6 imports support
- Publishing script for handy
```javascript
import Button from "components-lib/Button";
```
imports. Which means no import of unnecessary components!
And also tree shaking!
- Enzyme with `jest-enzyme` and `jest-styled-components` goodness!
- [lint-staged 💩](https://github.com/okonet/lint-staged) installed for running prettier before any commit.
So no wrong codestyle will leak into the codebase!
- GitHub pages styleguide automatic deploy right after next release

## Commands
To develop components run
```bash
npm run styleguide
```

To test
```bash
npm run test
# For watch mode
npm run test:watch
# For tests with coverage info
npm run test:coverage
```

To publish your lib run (which also will run a build process)
```bash
npm run release
```

Also you can run `build, (stylelint, eslint, prettier) -> stylecheck, demo:start / build` for your
amazing landing page for your component lib and other commands
which are pretty descriptive but just a part of the release/build process :)

## More details
As an example in boilerplate there is a `normalize.css` imported to styleguidist.
Landing page is empty styled with `styled-components`.

Since I use `styled-components` every day. There is also stylelint with
`styled-components` preprocessor for linting styles in them. And hence
no stylelinting of plain CSS.

All your components should be in `src/components` folder, so it will be visible
by styleguidist and so they will be bundled to the `lib` for future publishing.

There is CRA underneath, so you can use all its goodness to write your landing page
and also for testing your components library, collect test coverage on them etc.
All setup this way so they will run only on `src/components` and will ignore all other
folders which are not related to components library.

Readme for your lib lay down in `LIBRARY.md` and will automatically be attached to
the newly released version of the lib.

## More on release process
Basically when you run `npm run release`
It will run prettier, all linters, then all tests, and after all will bundle
ignoring `test.js` your components. After that it will generate `package.json` for
`lib` folder so handy `name/Button` imports will be possible. Then he will run `npm publish`
on that newly created `package.json` and publish on Github Pages updated docs of
your components.

All you need to do is to change package name in `scripts/copyBuildFiles.js` on line 52.
Version of the components lib will be derived from root `package.json`

## Known issues
If you run `npm run deploy:docs` or any other scripts that call him too, on Windows `cmd.exe` you will
get error like
```
bash: /dev/tty: No such device or address
error: failed to execute prompt script (exit code 1)
fatal: could not read Username for 'https://github.com': Invalid argument
```
To successfully run it on Windows please use git bash or cygwin or anything that simulates linux bash.