patternfly-react

patternfly-react

This project will provide a set of React UI components for the PatternFly project.

Getting Started

npm install --save patternfly-react

Then import Patternfly React UI modules as ES6 modules:

import { Alert } from 'patternfly-react'

Using patterfly-react Sass files

As an alernative to consuming the patternfly-react.css file (found in dist/css), you can build patternfly-react styles into your css by including the Sass partials from dist/sass. The partial _patternfly-react.scss will pull in all the partials required for the patternfly-react components. When using the patternfly-react Sass files, you MUST include bootstrap and patternfly variables and mixins. An example of the required imports can be found in patternfly-react.scss.

Node Environment

To build you must use Node 8. If you are not using Node 8, you will get an error at npm install time. Please install and use via:

nvm install 8
nvm use 8

Run npm install again. If you then get an error with Node Sass, remove the node_modules and npm install again (to pull the correct version of node-sass).

Storybook UI Development

This project uses React Storybook to test and demo new React UI components. You can view our current storybook here.

How to use Storybook locally:

npm i
npm start

How to deploy storybook to github pages in your fork:

npm run storybook:build
npm run storybook:deploy

To deploy Storybook to a remote other than origin, pass a --remote flag to npm run storybook:deploy. For example, to deploy to your upstream remote:

npm run storybook:deploy -- --remote=upstream

To deploy Storybook to a target branch and serve with rawgit instead of gh-pages, pass --branch flag to npm run storybook:deploy. This will create a new branch to serve your Storybook (and will be useful if you have multiple open pull requests).

For example, say you have feature-branch, you can deploy the storybook to a rawgit branch with:

npm run storybook:deploy -- --branch=feature-branch-storybook

Meeting Notes

You can find all Patternfly React Community Meeting notes here.