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 startto run a local development servernpm testto launch karma testsnpm run lintto lint your codenpm run buildto build a production bundlenpm run create-componentto 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
importring-ui components where needed. Otherwise, create an entry point (for example,/app/app__components.tpl.js) and
importthe 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.jswith 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;
Contributing
See CONTRIBUTING.md