README.md

react-gadgets

react-gadgets is a React Library which contains a collection of custom reusable React Components, documented with storybook and tested using Jest & React-Testing-Library. The intention is not to re-create the wheel, hence most of the React Component are created using third party libraries and css.

Overview

This library was created using the following technology decisions:

• React
• ES6 (javascript syntax)
• Eslint & Prettier
• Rollup (javascript module bundler) & Babel (javascript transcompiler) for bundling the library and publishing to npm.
• Storybook (for documenting & developing/testing UI components in isolation).
• Jest & React-Testing-Library (for testing).
• CSS Modules & SASS (for styling)

Refer to the configuration guide for more details on how to create new library

Usage

1. Installing the library

   • yarn add react-gadgets
   • Import the Components
     • import { Sample } from 'react-gadgets';
     • import Sample from 'react-gadgets/dist/esm/Sample'; -- direct import

2. Using the library locally

Development

Refer to the documentation for more details.

References

1. Creating custom react component library

   • How to create react component library (typescript + rollup + sass + storybook)
   • How to create react component library
   • How to set up react component library with rollup
   • How to write and build JS libraries in 2018
   • Babel + Rollup
     • Setting up React, Webpack and Babel
     • React Rollup Boilerplate
     • Babel Plugins
     • Rollup Documentation
   • Storybook
     • Storybook Documentation
     • Storybook CSS Modules Not Showing
   • Testing
     • Enzyme vs React-Testing-Library vs Cypress
     • Storybook Testing
     • React Testing Library
     • Test React Apps with Jest
     • Configuring jest
     • Test React Apps Component with react-test-renderer
   • Eslint + Prettier
     • How to set up eslint and prettier for your React app
     • setting up prettier and eslint for react apps
     • Testing-Library Rules
     • Jest Dom Rules
     • Jest Rules
   • Styling (CSS)
     • CSS Modules in React
     • Bundle Libraries With SCSS and CSS Modules Using Rollup
     • Bundle Stylesheets and add live reload with rollup
   • Code Splitting
     • Code Splitting for libraries bundling for npm with rollup
   • Publishing to NPM / Checking it out locally
     • Complete guide to publishing a React package to npm
     • React hooks in react library giving Invalid hook call error
     • Peer Dependencies with Webpack Resolving
     • Setting a private npm registry publishing ci/cd pipeline
   • Scripts
     • Updating package.json
     • How can I use an es6 import in node
     • Change nodejs console log colour

2. Writing Test using React-Testing-Library & Jest

   • 8 simple steps to start testing react apps using react-testing-library and jest
   • Advanced React components mocks with jest and react-testing-library
   • Test Isolation with React
   • Understanding Jest Coverage Report
   • Understanding Jest Mock
   • Bypassing Jest Mock
   • Testing Parent and Child seperately
   • How to write functional tests with react-testing-library
   • Common mistakes with react-testing-library
   • react-testing-library cheatsheet
   • react-testing-library which query to use when testing
   • list of query roles

3. Writing Storybook Documentation

   • Storybook DocsPage (automatically populated)
   • Storybook Docs MDX (writing custom documentation)

4. Components

   • Transfer List
     • react-filtered-multiselect
     • material ui - transfer list

Credits

• Jonny Buchanan
• Harvey Delaney
• Jebus

License

Apache 2.0

Important Note: This project does not redistribute third party libraries but identifies their availability. The libraries called by this project are subject to their creator licenses. Remember to consult and comply with all licenses in your uses.