Skip to content

Getting Started as a Contributor

Jessie edited this page Sep 6, 2019 · 8 revisions

Requirements

Node >= 8 and yarn >= 1.6.0 are required for both PatternFly 3 and PatternFly 4. nvm and yvm are good tools to manage different versions of these tools.

Learning React

We highly recommend React's Documentation. This contains up to date information on React from the project's core maintainers at Facebook.

Our team has also put together some resources for learning React!

Docs

First, build our entire project:

yarn install && yarn build

PatternFly 3

PatternFly 3 uses React Storybook to demonstrate React UI components and patterns. You can read more about Storybook UI Development in its README.

You can run PatternFly 3 docs locally using:

yarn start:pf3

Then http://localhost:6006 should automatically open.

When you create a PR our CircleCI job will automatically make a storybook for you and upload a preview link.

PatternFly 4

PatternFly 4 uses Gatsby to demonstrate React UI components and patterns. You can read more about how to write your own docs and how its configuration works in its README.

Some things to keep in mind when writing examples:

  1. You are unable to use experimental language features like class properties as Buble does not support them.
  2. The easiest way to develop your example is by creating an empty code block and then editing it in your browser. Once done, copy the code back to your Markdown file.
  3. Keep them simple. It is much easier for a person to understand what is going on.
  4. Try not to add extra external dependencies. These will only be approved on a case by case basis.

You can run PatternFly 4 docs locally using:

yarn start:pf4

Then navigate to http://localhost:8000

When you create a PR our CircleCI job will automatically build our docs for you and upload a preview link.

Testing

Both PatternFly 3 and PatternFly 4 use Jest for running tests. We use Airbnb's Enzyme to render components using our own snapshot-serializer.

yarn test:pf3

or

yarn test:pf4