1 | # Ring UI — JetBrains Web UI components
|
2 | [![Build Status][ci-img]][ci-bt] [![Dependencies Status][deps-img]][deps] [![Dev Dependencies Status][dev-deps-img]][dev-deps] [![NPM version][npm-version-img]][npm-package] [![NPM downloads][npm-count-img]][npm-package]
|
3 |
|
4 | [![official JetBrains project](https://jb.gg/badges/official-flat-square.svg)](https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub)
|
5 |
|
6 | 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.
|
7 |
|
8 | ### Quick start
|
9 |
|
10 | 1. Install Yeoman and Ring UI generator: `npm install -g yo @jetbrains/generator-ring-ui`
|
11 | 2. 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.
|
12 | 3. Your project is ready to be developed. The following commands are available:
|
13 | - `npm start` to run a local development server
|
14 | - `npm test` to launch karma tests
|
15 | - `npm run lint` to lint your code
|
16 | - `npm run build` to build a production bundle
|
17 | - `npm run create-component` to create a new component template with styles and tests
|
18 |
|
19 | ### Not-so-quick start
|
20 |
|
21 | In case boilerplate generators are not your thing and you prefer to understand the inner workings a bit better.
|
22 |
|
23 | 1. Install Ring UI with `npm install @jetbrains/ring-ui --save-exact`
|
24 |
|
25 | 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
|
26 | `import` the components there.
|
27 | ``` javascript
|
28 | import React from 'react';
|
29 | import ReactDOM from 'react-dom';
|
30 | import LoaderInline from '@jetbrains/ring-ui/components/loader-inline/loader-inline';
|
31 |
|
32 | ReactDOM.render(<LoaderInline/>, document.getElementById('container'));
|
33 | ```
|
34 |
|
35 | 3. Create `webpack.config.js` with the following contents (example):
|
36 | ``` javascript
|
37 | const ringConfig = require('@jetbrains/ring-ui/webpack.config').config;
|
38 |
|
39 | const webpackConfig = {
|
40 | entry: 'src/entry.js', // your entry point for webpack
|
41 | output: {
|
42 | path: 'path/to/dist',
|
43 | filename: '[name].js'
|
44 | },
|
45 | module: {
|
46 | rules: [
|
47 | ...ringConfig.module.rules,
|
48 | <Your rules here>
|
49 | ]
|
50 | }
|
51 | };
|
52 |
|
53 | module.exports = webpackConfig;
|
54 | ```
|
55 |
|
56 | ### Contributing
|
57 |
|
58 | See [CONTRIBUTING.md](./CONTRIBUTING.md)
|
59 |
|
60 | ### Links
|
61 |
|
62 | - [Living style guide](https://jetbrains.github.io/ring-ui)
|
63 | - [GitHub repository](https://github.com/JetBrains/ring-ui)
|
64 | - [Issues in YouTrack](https://youtrack.jetbrains.com/issues/RG)
|
65 | - [Code review in Upsource](https://upsource.jetbrains.com/ring-ui/view)
|
66 | - [Builds in TeamCity][ci-project]
|
67 | - [npm package][npm-package]
|
68 |
|
69 | [ci-project]: https://teamcity.jetbrains.com/project.html?projectId=JetBrainsUi_RingUi&tab=projectOverview
|
70 | [ci-bt]: https://teamcity.jetbrains.com/viewType.html?buildTypeId=JetBrainsUi_RingUi_GeminiTests&tab=buildTypeStatusDiv
|
71 | [ci-img]: https://teamcity.jetbrains.com/app/rest/builds/buildType:JetBrainsUi_RingUi_GeminiTests/statusIcon.svg
|
72 | [deps]: https://david-dm.org/jetbrains/ring-ui
|
73 | [deps-img]: https://img.shields.io/david/jetbrains/ring-ui.svg
|
74 | [dev-deps]: https://david-dm.org/jetbrains/ring-ui?type=dev
|
75 | [dev-deps-img]: https://img.shields.io/david/dev/jetbrains/ring-ui.svg
|
76 | [npm-package]: https://www.npmjs.com/package/@jetbrains/ring-ui
|
77 | [npm-version-img]: https://img.shields.io/npm/v/@jetbrains/ring-ui.svg
|
78 | [npm-count-img]: https://img.shields.io/npm/dt/@jetbrains/ring-ui.svg
|
79 |
|
\ | No newline at end of file |