JetBrains/ring-ui

A collection of JetBrains Web UI components


repo name	JetBrains/ring-ui
repo link	https://github.com/JetBrains/ring-ui
homepage	https://jetbrains.github.io/ring-ui
language	JavaScript
size (curr.)	343581 kB
stars (curr.)	2387
created	2017-07-19
license	Apache License 2.0

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.

Quick start

Install Yeoman and Ring UI generator: npm install -g yo @jetbrains/generator-ring-ui
Go to the root directory of your project (create one if necessary) and run yo @jetbrains/ring-ui. After you enter the name of the project all the necessary npm dependencies will be installed.
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;