Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://jetbrains.github.io/ring-ui/
A collection of JetBrains Web UI components
https://jetbrains.github.io/ring-ui/
components jetbrains-ui react
Last synced: 3 months ago
JSON representation
A collection of JetBrains Web UI components
- Host: GitHub
- URL: https://jetbrains.github.io/ring-ui/
- Owner: JetBrains
- License: apache-2.0
- Created: 2017-07-19T09:25:26.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-12T19:02:49.000Z (7 months ago)
- Last Synced: 2024-04-12T22:30:02.395Z (7 months ago)
- Topics: components, jetbrains-ui, react
- Language: TypeScript
- Homepage: https://jetbrains.github.io/ring-ui
- Size: 1.84 GB
- Stars: 3,557
- Watchers: 58
- Forks: 182
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
- Security: security-audit-ci.js
Awesome Lists containing this project
README
# Ring UI — JetBrains Web UI components
[![Storybook][storybook-img]][docsite] [![Build Status][ci-img]][ci-bt] [![Storybook][browserstack-img]][browserstack-build-page] [![NPM version][npm-version-img]][npm-package] [![NPM downloads][npm-count-img]][npm-package]
[](https://github.com/JetBrains#jetbrains-on-github)
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](https://codesandbox.io/p/sandbox/ring-ui-sandbox-6-0-demo-qk5vgv), based on `create-react-app` tooling, to see and try the UI components
* Check out [list of examples](https://jetbrains.github.io/ring-ui/master/index.html) for each component
## 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:
```js
// 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 (
alertService.successMessage('Hello world')}>
Click me
);
};
```
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.
``` 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'));
```
3. 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](./CONTRIBUTING.md)
## Links
- [Living style guide][docsite]
- [GitHub repository](https://github.com/JetBrains/ring-ui)
- [Issues in YouTrack](https://youtrack.jetbrains.com/issues/RG)
- [Builds in TeamCity][ci-project]
- [npm package][npm-package]
[docsite]: https://jetbrains.github.io/ring-ui
[ci-project]: https://teamcity.jetbrains.com/project.html?projectId=JetBrainsUi_RingUi&tab=projectOverview
[ci-bt]: https://teamcity.jetbrains.com/viewType.html?buildTypeId=JetBrainsUi_RingUi_GeminiTests&tab=buildTypeStatusDiv
[ci-img]: https://teamcity.jetbrains.com/app/rest/builds/buildType:JetBrainsUi_RingUi_GeminiTests/statusIcon.svg
[npm-package]: https://www.npmjs.com/package/@jetbrains/ring-ui
[npm-version-img]: https://img.shields.io/npm/v/@jetbrains/ring-ui.svg
[npm-count-img]: https://img.shields.io/npm/dt/@jetbrains/ring-ui.svg
[storybook-img]: https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg
[browserstack-img]: https://automate.browserstack.com/badge.svg?badge_key=elc3S1IvemtCdHBjcHdmQzdRcm9xYWxTakFvSWFqT2lrOGtrTjZRbFVRaz0tLXE0VnpyUjRqSk1Xc2xIQ1NnL1pkbnc9PQ==--f96a555ca0fe3ce50d0770cb975be0f3b6a6cf79
[browserstack-build-page]: https://automate.browserstack.com/public-build/elc3S1IvemtCdHBjcHdmQzdRcm9xYWxTakFvSWFqT2lrOGtrTjZRbFVRaz0tLXE0VnpyUjRqSk1Xc2xIQ1NnL1pkbnc9PQ==--f96a555ca0fe3ce50d0770cb975be0f3b6a6cf79