GitHub - JetBrains/ring-ui: A collection of JetBrains Web UI components
source link: https://github.com/JetBrains/ring-ui
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
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 servernpm test
to launch karma testsnpm run lint
to lint your codenpm run build
to build a production bundlenpm 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
) andimport
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;
Contributing
Please, see CONTRIBUTING.md
Links
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK