Atomic React Pattern Lib

A react pattern library with collocation for generic react components equipped with recommended development ecosystem. Its collection of reusable react components built to serve all type of react based projects to achieve better user experience consistency and reusability.

Why a Component Library?

A component library helps you achieve consistent branding as it becomes the single source of truth for every component not only in the application but for all projects in the organization.

Instead of duplicating the component code across features in your project, implement the component from a central source, like a component library.

Ecosystem of this component library 🎉

• Development Environment: Storybook integrated for developing and showcasing components.
• Flow typed: All components are FlowTyped and Flow Type checked.
• Static Code Quality checks and formatting: Javascript and CSS linting using Eslint, Stylelint and Prettier.
• Component scaffolding: Consistently generate components using Plop.
• Documentation: Generates code documentation with ESDocs.
• Git Hooks: Pre-commit, Pre-push and pre-publish using Husky.
• Unit testing framework: with Jest and Enzyme.
• Babel 7 to transpiling javascript and releasing them as ESModules.
• Theme and Styling: with Styled Components.

Dependencies

1. formik
2. yup
3. flexboxgrid
4. react-modal

Installation

Dependencies should be installed using the yarn command line tools.

yarn install
yarn run flow:install

flow:install will search the libdef repo and download all the libdefs that are relevant for our project and install them for us.

Topics to refer

• Development Tools
• Static Code Linters and Code Formatter
• Atomic Design
• Folder Structure
• Component Scaffolding
• Flow Type
• Husky
• ES Docs
• Storybook
• Running The Tests