Skip to content
This repository has been archived by the owner on Oct 23, 2023. It is now read-only.

Latest commit

 

History

History
80 lines (58 loc) · 2.96 KB

README.md

File metadata and controls

80 lines (58 loc) · 2.96 KB
Raw

react-component-template

React component boilerplate.

Features

  • React - A JavaScript library for building user interfaces.
  • Webpack - Component bundler.
  • React testing library - Simple and complete testing utilities that encourage good testing practices.
  • Emotion - Library designed for writing css styles with JavaScript.
  • Babel - Write next generation JavaScript today.
  • Jest - JavaScript testing framework used by Facebook.
  • ESLint - Make sure you are writing a quality code.
  • Prettier - Enforces a consistent style by parsing your code and re-printing it.
  • Typescript - JavaScript superset, providing optional static typing
  • Circle CI - Automate tests and linting for every push or pull request.
  • Storybook - Tool for developing UI components in isolation with documentation.
  • Semantic Release - Fully automated version management and package publishing.
  • Debug - JS debugging utility that works both in node.js and browsers.

Install

The easiest way to use react-component-template is through github by clicking on Use this template button in the repository page.

You can also download or git clone this repo

$ git clone https://github.com/Open-Attestation/react-component-template.git my-module
$ cd my-module
$ rm -rf .git
$ npm install

Make sure to edit the following files according to your module's info:

  • package.json (module name and version)
  • webpack.config.js: replace <please add the name of your library> placeholder
  • README.md
  • LICENSE
  • src/logger: replace PLACEHOLDER_PROJECT_NAME
  • .circleci/config.yml: uncomment the release step

Commands

$ npm run storybook # open storybook and start editing your components
$ npm run storybook:build # generate docs
$ npm run test:watch # run tests with Jest
$ npm run test:coverage # run tests with coverage
$ npm run lint # lint code
$ npm run build # build component

Setting up CI with automatic semantic-release versioning

Generate CircleCI API token and run:

$ npx semantic-release-cli setup --ask-for-passwords`

You will need to provide credentials for github and npm.

Changing stuff

Removing Emotion

  • Uninstall npm packages
$ npm uninstall @emotion/core @emotion/styled @emotion/babel-preset-css-prop
  • Remove @emotion/babel-preset-css-prop from Babel presets (configuration is made in package.json file)
  • Remove @emotion/core from Typescript configuration (in tsconfig.json file)
  • Remove .storybook/webpack.config.js (file created only for emotion css property support in storybook)

License

GPL-3.0