EngagioUI

Usage

EngagioUI is a private repo. In order to use EngagioUI in other projects, you must have an npm account (See Raj or Pushkar if you do not have an account) and do the following:

1. $ sudo npm login
2. Enter your npm credentials (Note: First Password: request is your device password.)
3. $ npm i @engagio/engagio-ui

You should now be able to require EngagioUI components. Example:

import {Button} from '@engagio/engagio-ui';

const CancelButton = (
  <Button>
    {'Cancel'}
  </Button>
);

Components

1. Button
2. Toggle (coming soon)
3. Icon (coming soon)

Contributing

File Structure

All components have their own directory with index.js, ${COMPONENT_NAME}.js, and ${COMPONENT_NAME}.scss. The file structure is purposefully flat to avoid circular dependencies.

SCSS/CSS

Currently, all styles are written in scss. Component specific scss are within the same directory as the component (See "File Structure" above). However, the scss files are transpiled into css in order to eliminate the need to do the transformation outside of EngagioUI. This may be confusing since the styles are written as scss, but in the component, we are importing css files. (i.e. import Button.css)

Versioning

Versioning should follow Semantic Versioning standards (http://semver.org/)

Developing Locally

-To test if component works in the web app before publishing-

0. if not yet in home directory, cd out of current folders.
1. brew install watchman
2. npm install -g wml
3. wml add ~/engagio-ui ~/engagio/web/node_modules/@engagio/engagio-ui (it will require you to hit Y twice)
4. wml start (this will start watching for changes locally as well and copy over changed files)
5. cd engagio-ui
6. npm run build:dev
7. all local changes should be updated in the web/node_modules as updated, then you can use web/app to test your local changes.

Alternative Linking method

0. Navigate to engagio-ui repo
1. npm link
2. yarn build
3. Navigate to engagio/web
4. npm link @engagio/engagio-ui
5. Start the dev proxy server

Running the Demo Page

1. build the library npm run build (or npm run build:watch if developing)
2. cd docs/
3. yarn install
4. yarn start
5. Open browser localhost:3003/

Publishing

1. go to root directory
2. build the library yarn build
3. bump the version number up in Package.json
4. npm publish
5. Remember to also bump the version number up in our engagio directory.

• Note that files/directories that should be ignored are in the .npmignore file. If more directories are added for development, add them to this file or else they will be published with the package.

Best Practices

All code should conform to the Front End Best Practices

Code Validation

Code validation runs through:

1. linting
2. flow checking
3. testing (with coverage)

$ yarn validate

Linting

Linting uses eslint and eslint-react-plugin

$ yarn lint or $ yarn lint:watch to watch files while deving

FlowJS

Flow is a static type checking tool written by Facebook

$ yarn flow

Testing

Tests are written using Jest

$ yarn test

Tests are leveraging jest snapshots. This means that when a snapshot is out of date, it needs to be updated.

1. Install jest-cli: npm install -g jest-cli
2. A test needs to be updated because it failed the snapshot: jest -t AccountHighlight -u

Coverage

1. $ yarn test:coverage
2. open /coverage/lcov-report/index.html in your browser