@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>;