patternfly-react

patternfly-react

This package provides Core PatternFly React components for PatternFly 3.

Prerequisite

Node Environment

This project currently supports Node Active LTS releases. Please stay current with Node Active LTS when developing patternfly-react.

For example, to develop with Node 8, use the following:

nvm install 8
nvm use 8

This project also requires a Yarn version of >=1.6.0. The latest version can be installed here.

Installing

yarn add patternfly-react

or

npm install patternfly-react --save

Usage

import { Alert } from 'patternfly-react';

Styling with LESS:

Example with LESS:

@import "~bootstrap/less/variables";
@import "~patternfly/dist/less/variables";
@import "~patternfly-react/dist/less/patternfly-react.less";

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.

Building

yarn build

Note the build scripts for this are located in the root package.json under yarn build.

Testing

Testing is done at the root of this repo. To only run the patternfly-react tests:

yarn test packages/patternfly-3/patternfly-react

Publishing

yarn publish

Storybook UI Development

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

How to use Storybook locally:

yarn install
yarn start

How to deploy storybook to github pages in your fork:

yarn storybook:build
yarn storybook:deploy

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

yarn storybook:deploy --remote=upstream

To deploy Storybook to a target branch and serve with rawgit instead of gh-pages, pass --branch flag to yarn 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:

yarn storybook:deploy --branch=feature-branch-storybook