Tracking UI Components

React components built to integrate EBANX Track into your application. Written in Typescript.

Installation

Package availabe in NPM. To install, run:

    yarn add @ebanx/tracking-ui

To add css styles to your app, import the css manually:

import "@ebanx/tracking-ui/lib/styles.css";

you can also import individual components' style:

import "@ebanx/tracking-ui/lib/components/Timeline.css";

Development

To use it locally, use yarn link or npm link.

Running yarn start on the project will automatically compile typescript and scss on every save.

Usage with Typescript

All components are built with typescript and type definitions are exported by default. So you can use it with javascript or typescript just as any other component.

Localization

You must be using react-intl 3 and up.

To add internationalization to your app, use react-intl and import our message list and append it to your app's:

// intl.js
import { messages as trackingUIMessages } from "@ebanx/tracking-ui";
export const messages = {
    es: {
        ...es,
        ...trackingUIMessages.es,
    },
    pt: {
        ...pt,
        ...trackingUIMessages.pt,
    },
};

All keys are namespaced by a leading "track/".

You need to manually inject the intl object in tracking-ui components. Example:

import { Timeline } from "@ebanx/tracking-ui";

// inject manually
return <Timeline intl={intl} {...props} />;

// or inject via injectIntl
const TrackingUITimeline = injectIntl(Timeline);
return <TrackingUITimeline {...props} />;

Commits

All commits must follow conventional-changelog format. Running git commit will trigger commitizen to allow you to create a commit message and commitlint to ensure the message follows the convention.

You can use VSCode Commitizen to help you.