#Ring UI — JetBrains Web UI components

• Design guildelines
• Figma library
• Usage examples in Storybook
• GitHub repository
• Issues in YouTrack
• Builds in TeamCity
• npm package

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

#Try now

• Try the codesandbox, based on create-react-app tooling, to see and try the UI components
• Check out list of examples for each component
• Check out Ring UI Design Guidelines

#Installation

• For Quick Start, use pre-built version: npm install @jetbrains/ring-ui-built
• For complex projects, use "sources" version npm install @jetbrains/ring-ui You will then need to include building Ring UI into your WebPack build (see "Building Ring UI from source via Webpack" below)

#Quick start

The easiest way is to import necessary components as ES modules:

// You need to import RingUI styles once
import '@jetbrains/ring-ui-built/components/style.css';

import alertService from '@jetbrains/ring-ui-built/components/alert-service/alert-service';
import Button from '@jetbrains/ring-ui-built/components/button/button';

...

export const Demo = () => {
  return (
    <Button onClick={() => alertService.successMessage('Hello world')}>
      Click me
    </Button>
  );
};

The bundle size will depend on the amount of components you imported.

#Building Ring UI from source via Webpack

In case you have complex build, and you want to compile RingUI sources together with your sources in a same build process, you can use the following configuration:

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.

   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'));
   

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

#Contributing

See CONTRIBUTING.md