janelznic/insights-frontend-components

insights-frontend-components

Red Hat Insights Components for applications in a React.js environment

Usage

npm install: npm install @red-hat-insights/insights-frontend-components

Imports

Component import { Component } from 'node_modules/@red-hat-insights/insights-frontend-components

SCSS @import '~@red-hat-insights/insights-frontend-components/index.css';

Development

Create a component inside of the PresentationalComponent folder

Structure

PresentationalComponents
└───YourComponent
    ├─── index.js
    ├─── YourComponent.js
    └─── your-component.scss

Build: npm run build Test: npm run test

There is also a playground for any development npm run playground

Documentation Links

• Utils

  • Redux

• Components

  • Sample Component
  • Page Header
  • Section
  • Pagination
  • Dropdown
  • Table
  • Breadcrumbs
  • Notifications

Hot-loadable components

• Inventory
• Remediations

Conbribution

Adding to index.js

Make sure that when you finish your component, you import it in the src/index.js file

If you're using any kind of pixel variable, be sure to use the px converter inside the Utilities

Commit format

Semantic release is used in this project, so to trigger new release you should add specific format into your commit messages and new release will be triggered when PR is merged.

Used formatter

Commit analyzer wildcard is used for parsing commit messages so to trigger new release add one of these strings into your commit and new release is triggered

• Major - <x.x.x> or <x.x.?> or <x.?.x> or <x.?.?>
• Minor - <?.x.x> or <?.x.?>
• Bug - <?.?.x>
• No release - <no>