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

1. Install Yeoman and Ring UI generator:

   npm install -g [email protected] @jetbrains/generator-ring-ui

2. 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.
3. 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.

1. Install Ring UI with

   npm install @jetbrains/ring-ui --save-exact

2. 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. ``` javascript import React from 'react'; import ReactDOM from 'react-dom'; import LoaderInline from '@jetbrains/ring-ui/components/loader-inline/loader-inline';

ReactDOM.render(, document.getElementById('container')); ```

1. Create

   webpack.config.js

   with the following contents (example): ``` javascript 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, ] } };

module.exports = webpackConfig; ```

Contributing

See CONTRIBUTING.md

Links

• Living style guide
• GitHub repository
• Issues in YouTrack
• Code review in Upsource
• Builds in TeamCity
• npm package