mdo-react-components

MDO Components Node module boilerplate

A boilerplate for all the mdo react components

Instructions for sending repository

All operations is to publish mdo-react-components

1. git checkout develop in local
2. git pull (updated develop)
3. git checkout -b
4. git checkout master
5. git pull (updated master)
6. git checkout
7. git rebase master (merged master to )
8. if there is conflict, solve it
9. increase one version patch(third number) number in package.json
10. git push
11. compare with develop in remote(github web page)
12. After approval, merge to develop in remote
13. create new pr to compare master with develop in remote. This step shouldn't have any conflict because we already solved it.
14. After two approvals, merge develop to master.

Requirements

• Node.js,
• Yarn
• CircleCI

Quickstart

> yarn install

Build

After each change to this repository, please rebuild the boilerplate to make the changes effective using below command

> yarn build

Development

https://github.com/whitecolor/yalc

> yalc publish
> cd example && yalc add mdo-react-components

Unit tests

> yarn test

Component folder structure

Here is the default folder and files structure for each component:

• components -- Example --- Example.js - this is component implementation --- styled.js - styles are here, we are using styled-components library --- index.js - import Example.js and maybe other components in this folder and then export them --- tests - folder with tests ---- Example.spec.js - tests for the component

Example component

When developing components follow the guideliens outlined here:

• https://docs.google.com/document/d/1vs0f9hTi0FQxebNZmcGE6bM4SgQcSUvr4yff-kCnWjM/edit?usp=sharing
• https://docs.google.com/document/d/1OeltaBvGRRV5f7z9Oe_rQt65NMqS3TYSfzAO3aDgIF4/edit?usp=sharing

Quick component example is below.

Example.jsx

import React, { memo } from "react";
import PropTypes from 'prop-types';

const Example = memo((props) => {
  const { prop1, prop2 } = props;
  return (
    <div>
      Something Here
    </div>
  )
});

Example.displayName = 'Example';

Example.propTypes = {
  prop1: PropTypes.number.isRequired, // try to limit the number of required props
  prop2: PropTypes.string
  ...
};

Example.defaultProps = {
  prop2: 'Default', // Default props only for not required props
}

index.js

import Example from 'Example';

export default Example;

Usage of the mdo-react-components library on other apps

In your application just import the components:

import { DataTable, CheckBox, /* other components */ } from "mdo-react-components";

Branching

Follow the guidelines outlined here: https://docs.google.com/document/d/1xZEeuOBfb6nFdhGzNyCuOPrT2CLTZiskRSKaIbD71ys/edit?usp=sharing

Pull Requests

As soon as you Each pull request must pass a review from another contributor and also pass the automated tests.

Useful links

• NPM Modules
• Yarn
• Yalc
• React
• Jest
• React Testing Library
• Styled-Components
• Styled-System
• Material UI
• CircleCI

License

This repository is protected under the MIT License

am-charts

• Column-Chart
• Bar-Chart