Cliengo UI

About the project

Cliengo UI contains the React Components Library developed by the Cliengo Frontend team. Two projects live together within the repo: Storybook Components Library & NPM Components Library.

Storybook Components Library

NPM Components Library

About

This project was bootstrapped with Create React App.

Cliengo UI library contains react components written and used by the Cliengo front-end team.

Keep it general

Whenever you create a new component, keep in mind it could be used within any app, so it should be as general as possible. So, among other things:

• Don't hardcode fonts
• Don't hardcode images
• Don't hardcode texts.

Production Usage

Installation

Run npm i -s cliengo-ui and then import the components you'd like to use. For example:

import {WhatsAppPreview} from 'cliengo-ui';

Release Phase

After testing in stage, and reviewing the corresponding Pull Request the following should be done. Before merging to master, a new release should be published using npm run release command. When prompted Select increment (next version): choose release and follow accepting al questions After the release is published. Merge should be done.

Stage Usage

Release Phase

For using the library in Stage or Review Apps, a prerelease version must be published. This is the workflow:

On your local branch run npm run release and follow the instructions. When prompted Select increment (next version): select: prerelease and follow accepting all questions

Notes:

• All changes must be committed before running this command
• Change the package.json version of cliengo-ui in the repo you are using the library (without using npm install, so it runs only the in RA)

version will be as follows: X.X.X-0 (the first time) , X.X.X-1 the second time and so on. To understand semantic versioning, please read: Semantic Versioning

Development usage

Storybook

After installing dependencies with yarn, you can run:

yarn storybook

Runs the app in the development mode. Open http://localhost:9009 to view it in the browser.

Deploying

Please review the Release Phase information for each environment (Development, Stage, Production) These commands are based on semantic versioning. If unsure about which command to use, please read semantic versioning documentation.

Deploy on github-pages

npm run deploy-storybook

Troubleshooting

If you're linking this package locally with another React app, and you're getting the following error:

Invalid hook call. Hooks can only be called inside of the body of a function component

It means the app is confused about which React library it should use. To address this issue, simply link the app's react library to this package, i.e. assuming you're in cliengo-ui folder:

npm link ../crm/node_modules/react

Note: Make sure to be using the correct version npm for running crm (at the date of writing, it's v8.15)

Source: https://github.com/facebook/react/issues/15315#issuecomment-479802153