@manageiq/react-ui-components
v0.11.71
Published
React based ui components for ManageIQ project.
Downloads
141
Readme
React UI Components for ManageIQ
Documentation (Storybook): react-ui-components.surge.sh
Technologies
Most components are using these libraries:
Build process
Build process is using webpack which is set to extract external libraries so the final library is as small as possible.
Webpack is used to build library so the final files can be imported into any other application. Library target is set to umd.
List of external libraries
- React
- ReactDOM
- PropTypes
- Redux
- ReactRedux
- ReactSelect
- PFReact
- Lodash
Settings of these externals can be found in constants.js. Importing any of these libraries will not make final file bigger, but importing such file needs to ensure, that libraries used in this component are loaded.
Architecture
Development Environment
This library uses LTS of Node environment, to start coding you have to run
$ [npm|yarn] install
No matter what tool you choose to develop with you have to run to load external dependencies.
$ [npm|yarn] run vendor
Development tools
To create new set of components you can create new folder inside src/
folder with index.js
as entrypoint to your new
components, where you will export [components|reducers|actions] for other application to use. To create custom styles for
your components, create [style|styles|index].scss
next to index.js
as entrypoint to your styles.
To properly use storybook and tests you have to create two folders inside your component's folder.
stories
for storybooktests
for jest tests
Local development
You can choose from three ways of how to code and test your application on local machine.
1. [npm|yarn] start
It will automatically watch your files and store final files into dist
folder.
This way you can create some components, use yarn link to create a symlink and use yarn link @manageiq/react-ui-components
inside your server application to include these components and debug them inside your environment.
2. [npm|yarn] run server
It will automatically watch your files, run webpack-dev-server and
serve your new components in demo app. To use your newly created components feel free to change demo/demo-app.jsx
to include
your components and you can debug them in node server environment.
The server will run at http://localhost:8080.
3. [npm|yarn] run storybook
It will automatically watch your files and presents them using storybook, if you want to use your new components, edit stories inside stories/index.stories.js and debug them in nice storybook UI.
The storybook server will run at http://localhost:6006.
Binding this
to methods
You have two ways how to create methods inside classes. One is based on babel using preset-stage-0, the other is based on decorators using autobind-decorator
- Babel based method
import * as React from 'react';
export class ExampleClass extends React.Component {
someMethod = () => {
//some work with this, which is component's this
}
}
- Decorator based method
import * as React from 'react';
import autobind from 'autobind-decorator';
export class ExampleClass extends React.Component {
@autobind
someMethod() {
//some work with this, which is component's this
}
}
License
The gem is available as open source under the terms of the Apache License 2.0.