Ring UI: JetBrains Web UI Components For React

Ring UI — JetBrains Web UI components

This collection of UI components aims to provide all of the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.

View Demo View Github

Quick start

Install Yeoman and Ring UI generator: npm install -g yo@next-4 @jetbrains/generator-ring-ui
Go to the root directory of your project (create one if necessary), run yo @jetbrains/ring-ui and enter the name of the project. Then run npm install to install all the necessary npm dependencies.
Your project is ready to be developed. The following commands are available:
- npm start to run a local development server
- npm test to launch karma tests
- npm run lint to lint your code
- npm run build to build a production bundle
- npm run create-component to create a new component template with styles and tests

Not-so-quick start

In case boilerplate generators are not your thing and you prefer to understand the inner workings a bit better.

Install Ring UI with npm install @jetbrains/ring-ui --save-exact

If you are building your app with webpack, make sure to import ring-ui components where needed. Otherwise, create an entry point (for example, /app/app__components.tpl.js) and
import the components there.

import React from 'react';
import ReactDOM from 'react-dom';
import LoaderInline from '@jetbrains/ring-ui/components/loader-inline/loader-inline';

ReactDOM.render(<LoaderInline/>, document.getElementById('container'));

Create webpack.config.js with the following contents (example):

const ringConfig = require('@jetbrains/ring-ui/webpack.config').config;

const webpackConfig = {
  entry: 'src/entry.js', // your entry point for webpack
  output: {
    path: 'path/to/dist',
    filename: '[name].js'
  },
  module: {
    rules: [
      ...ringConfig.module.rules,
      <Your rules here>
    ]
  }
};

module.exports = webpackConfig;

Ring UI: JetBrains Web UI Components For React