Morioh
Login
JavaScript Dev

JavaScript Dev

3 years ago

The Topcoder UI Kit for internal ReactJS projects

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):

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!

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

Download Details:

Author: topcoder-platform

Source Code: https://github.com/topcoder-platform/topcoder-react-ui-kit

#react #reactjs #javascript

The Topcoder UI Kit for internal ReactJS projects
2.90 GEEK