@patternfly/react-codemods

PatternFly React codemods are currently experimental only.

This repository contains a collection of codemod scripts for use with JSCodeshift that help update Patternfly React projects.

Setup & Run

1. yarn global add jscodeshift
2. yarn install @patternfly/react-codemods
3. jscodeshift -t node_modules/@patternfly/react-codemods/transforms/[transform].js [files]
   • path - files or directory to transform;
   • use the -d option for a dry-run and use -p to print the output for comparison;
   • use the --extensions option if your files have different extensions than .js (for example, --extensions js,jsx);
   • if you use flowtype, you might also need to use --parser=flow;
   • see all available jscodeshift options.
4. Review changes via git diff. Keep what you want, throw it out if you don't. Magic!

Included Scripts

pf3-pf4

Converts PF3 components of patternfly-react to compatible PF4 @patternfly/react-core components;

jscodeshift -t node_modules/@patternfly/react-codemods/transforms/pf3-pf4.js <path> [--component]=comma,separated,components

Options

--components     Comma separated list of components to transform. Defaults to "*". EX: --components=Button,Alert

Components

Button

Supported Props

In Prop	Out Prop	Value Tranforms
block	isBlock	n/a
active	isActive	n/a
disabled	isDisabled	n/a
componentClass	component	n/a
bsClass	undefined	n/a (removed)
bsStyle	variant	primary -> primary
		secondary -> secondary
		danger -> danger
		link -> link
		info -> secondary
		undefined -> secondary

Unsupported props

• componentClass
• href

Before

import { Button } from 'patternfly-react';

const primary = <Button bsStyle="primary">Primary Button</Button>;

After

import { Button } from '@patternfly/react-core';

const primary = <Button variant="primary">Primary Button</Button>;