Engage Radar

Engage Radar is a library of styled React components used for building Engage client applications.

Usage

For developers using radar in a React application.

Installation

You can install radar from NPM.

1. Install radar as a project dependency:

   npm install @tangoca/radar

2. Import components wherever they are needed:

   import { Card, Panel } from '@tangoca/radar'

That's it!

Component List:

Avatar: Avatar, ImageAvatar, InitialsAvatar
Button: Button, IconButton, RoundedButton, RouterButton
Error: ErrorBoundary, FetchError
Form: Form, Formik, FormikContainer, FormikForm
Layout: Actions, Card, Content, Column, Main, Modal, Panel, Plain, Row, Subcontent
Menu: Divider, Group, Item, Menu, RouterItem
Navigation: Link, NavLink, NavigationPrompt, Redirect, Route, Router, Sidebar, SubNavigation, Switch, Topbar, withRouter
Snackbar: Snackbar, SnackbarGroup
Other: Breadcrumb, Dialog, Icon, Loader, Profile, Search, Submit, Table

Development

For developers updating or modifying radar.

Setup and Configuration

Engage Radar uses rollup.js for project bundling.

1. To install rollup.js and related dependencies (required only once):

   npm install

2. To build the project:

   npm run build

3. To watch components for changes and rebuild on save:

   npm run watch

4. To lint all components:

   npm run lint

Publish to NPM

You must also be a member of the tangofinancial NPM organization to publish updates.

1. Login via the NPM CLI:

   npm login

2. Enter credentials.

3. Publish update:

   npm publish

Publication will succeed only if the version noted in package.json is greater than the value in the currently published package. As such, always increment this value in any updates expected to be pushed to NPM.

Local Use

When building an application with radar which may require new components or changes to existing components, it is often convenient to use a local version of radar instead of the published version. NPM provides a convenience, developer-friendly way to set this up in your local development environment via symlinks.

1. Setup a symlink inside the folder containing your local radar installation:

   npm link

2. Link to radar within your application root directory:

   npm link @tangoca/radar

Now any local changes to your radar build will be instantly accessible to your application.