React-pangu is a react components library built by Ruilisi Co., Ltd. Thanks to KaiHotz for your great repo react-rollup-boilerplate which makes our work easy.
There are two methods for getting started with this repo.
> git clone [email protected]:ruilisi/react-pangu.git
> cd react-pangu
> yarn install
Click here to download the .zip file. Extract the contents of the zip file, then open your terminal, change to the project directory, and:
> yarn install
To start the developing run :
> yarn dev
This will build a version of your library, run the watcher and also run the Styleguide.
To open the Styleguide manualy open your Browser and navigate to http://localhost:6060.
Start developing your components in src/lib/components folder and update the src/lib/index.js file acordingly.
Always provide an YourComponent.examples.md file, so your component will show up in the Styleguide.
You can refer to example Button component, but i think you'll get the idea.
For smoother development some Babel plugin are included
SCSS and CSS are supported out of the box just import your styles into your component like you normaly would do.
For the use of CSS Modules refere to rollup-plugin-postcss
Testing is done with Jest, Enzyme and Jasmine Matchers
You can refer to Button.test.js as an example.
> yarn test
or (for getting coverage)
> yarn test:coverage
Linting is set up through ESLint and configured with eslint-config-airbnb
You can modify linting rules by overriding them in the .eslintrc.json file.
> yarn lint
or (for for automatic fixing if possible)
> yarn lint:fix
To release your library to NPM or your private Registry, make sure you have an active account at NPM, your .npmrc file is correctly setup and the repository url in package.json file is set to your repoitory url, then:
> yarn release
For custom layouts, styleing and more information about the Styleguide please refer to React Styleguidist documentation.
Make sure the repository url in package.json file is set to your repoitory url, then:
> yarn deploy
yarn dev: Executes the develop mode, running watcher and the Stylguide, rebuilding your library on every change.yarn start: Only serves the Styleguide.yarn build: Builds your library (build can be faound indistfolder).yarn styleguide:build: Builds the static Styleguide in case you want to deploy it.yarn test: Runs the tests.yarn test:coverage: Runs the test and shows the coverage.yarn lint: Runs the linter.yarn lint:fix: Runs the linter and fixes automatic fixable issues.yarn release: Publishes your Library on NPM or your private Registry (depending on your config in your.npmrcfile).yarn deploy: Deploys the Styleguide to GitHub Pages.