2.0.2 • Published 6 years ago
@patternfly/react-codemods v2.0.2
@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
yarn global add jscodeshiftyarn install @patternfly/react-codemodsjscodeshift -t node_modules/@patternfly/react-codemods/transforms/[transform].js [files]path- files or directory to transform;- use the
-doption for a dry-run and use-pto print the output for comparison; - use the
--extensionsoption 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.
- 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,componentsOptions
--components Comma separated list of components to transform. Defaults to "*". EX: --components=Button,AlertComponents
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
componentClasshref
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>;