npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@manageiq/react-ui-components

v0.11.71

Published

React based ui components for ManageIQ project.

Downloads

112

Readme

React UI Components for ManageIQ

Build Status Chat

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.

  1. stories for storybook
  2. tests 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

  1. Babel based method
import * as React from 'react';

export class ExampleClass extends React.Component {
  someMethod = () => {
    //some work with this, which is component's this
  }
}
  1. 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.