yarn add @lg-tools/codemods
npm install @lg-tools/codemods
yarn lg codemod <codemod-name> <path> [...options]
name of codemod, see available codemods below.
files or directory to transform
Glob patterns to ignore
yarn lg codemod <codemod-name> <path> --ignore **/node_modules/** **/.next/**
Dry run (no changes to files are made)
yarn lg codemod <codemod-name> <path> --dry
Print transformed files to stdout and changes are also made to files
yarn lg codemod <codemod-name> <path> --print
Bypass Git safety checks and forcibly run codemods.
yarn lg codemod <codemod-name> <path> --force
Restrict the codemod to certain packages
yarn lg codemod <codemod-name> <path> --packages @leafygreen-ui/popover @leafygreen-ui/select
This codemod can be used to get started in refactoring LG components dependent on v12+ of @leafygreen-ui/popover
.
By default, the codemod will apply for all below listed packages. Use the --packages
flag to filter for a subset of these.
This codemod does the following:
- Adds an explicit
usePortal={true}
declaration if left undefined and consolidates theusePortal
andrenderMode
props into a singlerenderMode
prop for components in the following packages:
@leafygreen-ui/combobox
@leafygreen-ui/menu
@leafygreen-ui/popover
@leafygreen-ui/select
@leafygreen-ui/split-button
@leafygreen-ui/tooltip
- Removes
popoverZIndex
,portalClassName
,portalContainer
,portalRef
,scrollContainer
, andusePortal
props from the following components:
@leafygreen-ui/info-sprinkle
@leafygreen-ui/inline-definition
@leafygreen-ui/number-input
- Removes
popoverZIndex
,portalClassName
,portalContainer
,portalRef
, andscrollContainer
props from the following components:
@leafygreen-ui/date-picker
@leafygreen-ui/guide-cue
-
Removes
popoverZIndex
,portalClassName
,portalContainer
,scrollContainer
, andusePortal
props fromCode
component in the@leafygreen-ui/code
package -
Removes
portalClassName
,portalContainer
,portalRef
,scrollContainer
, andusePortal
props fromSearchInput
component in the@leafygreen-ui/search-input
package -
Removes
shouldTooltipUsePortal
prop fromCopyable
component in the@leafygreen-ui/copyable
package -
Replaces
justify="fit"
prop value withjustify="middle"
for components in the following packages:
@leafygreen-ui/date-picker
@leafygreen-ui/info-sprinkle
@leafygreen-ui/inline-definition
@leafygreen-ui/menu
@leafygreen-ui/popover
@leafygreen-ui/tooltip
yarn lg codemod popover-v12 <path> --packages @leafygreen-ui/combobox @leafygreen-ui/code @leafygreen-ui/info-sprinkle @leafygreen-ui/copyable
Before:
import LeafyGreenCode from '@leafygreen-ui/code';
import { Combobox as LGCombobox } from '@leafygreen-ui/combobox';
import { DatePicker } from '@leafygreen-ui/date-picker';
import { InfoSprinkle } from '@leafygreen-ui/info-sprinkle';
import { Menu } from '@leafygreen-ui/menu';
import Copyable from '@leafygreen-ui/copyable';
import Tooltip from '@leafygreen-ui/tooltip';
<LGCombobox />
<LGCombobox usePortal={true} />
<LGCombobox usePortal={false} />
<LeafyGreenCode portalClassName="portal-class" portalRef={ref} usePortal />
<InfoSprinkle popoverZIndex={9999} usePortal={false} />
<DatePicker portalContainer={containerRef} scrollContainer={containerRef} />
<Menu portalClassName="portal-class" usePortal />
<Copyable shouldTooltipUsePortal />
<Copyable shouldTooltipUsePortal={true} />
<Copyable shouldTooltipUsePortal={false} />
<Menu justify="fit" renderMode="top-layer" />
<Tooltip justify="fit" renderMode="top-layer" />
After:
import LeafyGreenCode from '@leafygreen-ui/code';
import { Combobox as LGCombobox } from '@leafygreen-ui/combobox';
import { DatePicker } from '@leafygreen-ui/date-picker';
import { InfoSprinkle } from '@leafygreen-ui/info-sprinkle';
import { Menu } from '@leafygreen-ui/menu';
import Copyable from '@leafygreen-ui/copyable';
<LGCombobox renderMode="portal" />
<LGCombobox renderMode="portal" />
<LGCombobox renderMode="inline" />
<LeafyGreenCode />
<InfoSprinkle />
<DatePicker portalContainer={containerRef} scrollContainer={containerRef} />
<Menu portalClassName="portal-class" usePortal />
<Copyable />
<Copyable />
<Copyable />
<Menu justify="middle" renderMode="top-layer" />
<Tooltip justify="middle" renderMode="top-layer" />