Topcoder React UI Kit

The Topcoder UI Kit for internal ReactJS projects.

Installation

Install the package via NPM:

$ npm install --save topcoder-react-ui-kit

Import its global stylesheet into the root ReactJS component of your app:

import 'topcoder-react-ui-kit/dist/style.css';

NOTE: This will automatically import all global styles from topcoder-react-utils — no need do include those separately!

Global Styles

The import of topcoder-react-ui-kit/dist/style.css stylesheet provides you with (assuming that your Webpack config properly parses that stylesheet, and bundles all assets referenced from there into your bundle):

• Global styles inherited from topcoder-react-utils — Eric Meyer's "Reset CSS" 2.0; geometryPrecision of text rendering;
• Fonts — Declaration of standard Topcoder fonts;

Style Mixins

To use any of the style mixins in your SCSS code you should import them as

@import "~topcoder-react-ui-kit/src/styles/mixins";

NOTE: It will automatically include all SCSS mixins from topcoder-react-utils — no need to include those separately!

• Mixins inherited from topcoder-react-utils — font definition, media conditions;

• Typography — Standard mixins for body text, fonts, headings, labels, and titles;

• Variables — Standard colors, design break points and other global style constants;

Themed Components

Note that most of these components are inherited from their topcoder-react-utils counterparts, and topcoder-react-ui-kit just takes care about their proper theming according to the TC UI Kit design specs.

• Avatar — Themed avatar;
• Buttons — Themed buttons;
• ErrorMessage — Standard error message;
• Modal — Standard modal component;
• Tags — Small tags for technologies, event types, etc. Technically, they are buttons styled in a different way.

Development

To develop inside a host package just $ npm link it.

CI/CD with CircleCI 2.0 is set up. Commits to the protected master branch will do testing and release to NPM (be sure to properly bump the version with $ npm version TYPE, where TYPE is one of major/minor/patch; and keep in mind that patch updates should never break backward compatibility; if your minor or major updates includes breaking changes, don't forget to document those in the CHANGELOG).

To be written in a better way

License

UNLICENSED — for internal Topcoder projects only.