Generation UI Components

This project is the library componets for React.

Features

• [x] Core components
• [x] Render testing
• [ ] Warning in PropTypes
• [ ] CD&CI to NPM and Preview
• [ ] Definition for develop, staging and production environments
• [ ] Custom Theme for Styled Componets

Content

1. Architecure
2. Install
3. Configure
4. Deploy
5. References

1. Architecture

The file structure that we follow is the next:

generation-ui-components
│---README.md
│   wepack.config
│
│---assets
│   └---icons
│          icon1.svg
│          icon2.svg
│---components
│   └---ComponentName
│       │ tests
│       │ __snapshots__
│       │ ComponentName.js
│       │ index.js
│       │ README.md
│       │ ...

2. Install

$ npm install

• Is required Node 10.16 or higher on your machine
• Is required React 16 or higher on your machine

3. Run

• To visualize the Style Guide with all the developed components (the command start is not defined):

$ npm run styleguide

The components will be visible in http://localhost:6060/

• To connect this library to another project (say, Self Service)

1. Build the project

$ npm run build

2. Link this project locally to the project you want to use it. First do:

$ npm link

Then, in the project you want to use it:

$ npm link generation-ui-components

3. Whenever a change is made on this library that must be reflected on the linked project, build again.

4. Adding external libraries

To mantain the library with a small size, big dependencies should be external To configure a external dependency go to webpack.config.js and add it. For example, if you want to have the external library Happy Feet. You would import it as:

import HappyFeet from 'happy-feet';

So in externals you should add

'happy-feet': {
  commonjs: 'happy-feet', 
  commonjs2: 'happy-feet',
  amd: 'HappyFeet',
  root: 'HappyFeet',
},

In the same file, resolve > alias add:

'happy-feet': path.resolve(__dirname, './node_modules/happy-feet'),

5. Building

Run

npm run build

Check that external libraries are not packed

Run

npm run stats

Navigate to http://chrisbateman.github.io/webpack-visualizer/

Find the generated json file, called webpack-stats.js Verify with the visualizer that your external library wasn't included

5. References

• Styled Compoents
• How to package your React Component