@ausuliv/pf-codemods v0.0.3
pf-codemods
Hey PatternFly-React devs! pf-codemods
is an eslint wrapper to update @patternfly/react-core@4.x.x code to 5.x.x.
I hope these rules and their autofixers will help you more quickly adopt our breaking changes. These rules are not designed to fix all build errors, but they can help to fix easy ones.
Usage
Simple case
Requires Node.js >= 10.
npx pf-codemods ./src
Giving node more RAM can help for large codebases.
NODE_OPTIONS=--max-old-space-size=4096 npx pf-codemods ./path-to-src
Options
Usage: pf-codemods [options] <path> [otherPaths...]
Run codemods on path using eslint.
Options:
-V, --version output the version number
--only <rules> Comma-seperated list of rules to run
--exclude <rules> Run recommended rules EXCLUDING this comma-seperated list
--fix Whether to run fixer
--format <format> What eslint report format to use (default: "stylish")
-h, --help display help for command
Rules
These rules are based off the breaking change notes for React. Each rule links the breaking change patternfly-react PR in case you want to better understand the change. Also, each rule makes sure you're using a PatternFly component before running.
accordion-rename-displaySize-large (#8212)
We've renamed the large
prop value of displaySize
to lg
.
Examples
In:
<Accordion displaySize="large" />
Out:
<Accordion displaySize="lg" />
card-remove-isHoverable (#8196)
We've removed the deprecated isHoverable
prop from Card.
In:
<Card isHoverable />
Out:
<Card />
datalist-remove-ondrags (#163)
We've removed the deprecated onDragFinish
, onDragStart
, onDragMove
, and onDragCancel
props. This rule will remove them and suggest the user use the DragDrop component.
Examples
In:
<DataList onDragStart />
Out:
<DataList />
divider-remove-isVertical (#8199)
We've replaced the isVertical
flag with the orientation
property that can define verticality on different breakpoints.
Examples
<Divider isVertical />
Out:
<Divider orientation={{ default: "vertical" }} />
expandable-section-rename-displaySize-large (#8212)
We've renamed the large
prop value of displaySize
to lg
.
Examples
In:
<ExpandableSection displaySize="large" />
Out:
<ExpandableSection displaySize="lg" />
fileUpload-remove-onChange (#8155)
We've removed the deprecated onChange
prop. This rule will remove the prop from the FileUpload component and suggest replacing it with the onFileInputChange
, onTextChange
, onDataChange
, and onClearClick
props as needed.
Examples
In:
<FileUpload onChange={onChange} />
Out:
<FileUpload />
pagination-remove-ToggleTemplateProps (#8134)
We've removed the depracated ToggleTemplateProps
prop and replaced it with PaginationToggleTemplateProps
.
Examples
In:
<Pagination ToggleTemplateProps />
Out:
<Pagination PaginationToggleTemplateProps />
pagination-rename-props (#8319)
We've renamed and/or removed several props for Pagination:
currPage
:currPageAriaLabel
,paginationTitle
:paginationAriaLabel
,toFirstPage
:toFirstPageAriaLabel
,toLastPage
:toLastPageAriaLabel
,toNextPage
:toNextPageAriaLabel
,toPreviousPage
:toPreviousPageAriaLabel
,optionsToggle
:optionsToggleAriaLabel
,defaultToFullPage
:isLastFullPageShown
,perPageComponenet
: removed
Examples
In:
<Pagination
currPage='text'
paginationTitle='text'
toFirstPage='text'
toLastPage='text'
toNextPage='text'
toPreviousPage='text'
optionsToggle='text'
defaultToFullPage
perPageComponenet='div'
/>
Out:
<Pagination
currPageAriaLabel='text'
paginationAriaLabel='text'
toFirstPageAriaLabel='text'
toLastPageAriaLabel='text'
toNextPageAriaLabel='text'
toPreviousPageAriaLabel='text'
optionsToggleAriaLabel='text'
isLastFullPageShown
/>
remove-sticky-props (#8220)
We've removed the deprecated sticky
prop from PageSection
, PageGroup
, PageNavigation
, and PageBreadcrumb
.
In:
<PageSection sticky="top" />
<PageGroup sticky="top" />
<PageNavigation sticky="top" />
<PageBreadcrumb sticky="top" />
Out:
<PageSection />
<PageGroup />
<PageNavigation />
<PageBreadcrumb />
resizeObserver-function-param (#8324)
We've updated the default value of the getResizeObserver
helper function's third parameter, useRequestAnimationFrame
. This rule will only provide two suggestions detailing when to pass which boolean into this parameter.
tableComposable-remove-hasSelectableRowCaption (#8352)
We've removed the depracated hasSelectableRowCaption
prop.
Examples
In:
<TableComposable hasSelectableRowCaption />
Out:
<TableComposable />
simpleList-remove-isCurrent (#8132)
We've removed the deprecated the isCurrent
prop. This rule wil replace it with isActive
.
Examples
In:
<SimpleList isCurrent />
Out:
<SimpleList isActive />
toggle-remove-isprimary (#8179)
We've removed the deprecated isPrimary
prop. This rule wil replace it with the "primary" value on the toggleVariant
prop.
Examples
In:
<Toggle isPrimary />
Out:
<Toggle toggleVariant="primary" />
toolbar-remove-visiblity (#8212)
We've removed the deprecated visiblity
prop. This rule will replace it with the correctly spelled visibility
prop.
Examples
In:
<ToolbarContent visiblity={{ default: "hidden" }} />
Out:
<ToolbarContent visibility={{ default: "hidden" }} />
tooltip-remove-props (#8231)
We've removed the boundary
, tippyProps
, and isAppLauncher
properties from Tooltip.
Examples
In:
<Tooltip boundary={} tippyProps={} isAppLauncher />
Out:
<Tooltip />