-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create codemod to replace deprecated icons (#364)
* chore: bump jscodeshift to 0.15.0 * test: cover block property transform * feat: replace colors in template string for css vars * fix: adapt codemod to cover templates with an even number of quasis * chore: add single quote config option to block codemod * build: include codemods in build * docs: add new codemod info in migrating docs * feat: add codemod for deprecated icons replacement * chore: remove deprecated icons folder * refactor: simplify constants in deprecated icons codemod * docs: add semantic tokens recommendation in migration docs * docs: add description for deprecated icons codemod
- Loading branch information
1 parent
0c6c9ab
commit e12b891
Showing
33 changed files
with
182 additions
and
204 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
src/codemods/__testfixtures__/deprecated-icons/constant-usage.input.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { IconProps, ForwardSmallIcon, SearchSmallIcon } from '@freenow/wave'; | ||
|
||
export enum CampaignType { | ||
REGULAR = 'REGULAR', | ||
AUTOMATION = 'AUTOMATION' | ||
} | ||
|
||
export const CampaignTypeOptions: { icon: React.FC<IconProps>; type: CampaignType }[] = [ | ||
{ icon: ForwardSmallIcon, type: CampaignType.REGULAR }, | ||
{ icon: SearchSmallIcon, type: CampaignType.AUTOMATION } | ||
]; |
11 changes: 11 additions & 0 deletions
11
src/codemods/__testfixtures__/deprecated-icons/constant-usage.output.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { IconProps, ForwardLastIcon, MagnifyingGlassIcon } from '@freenow/wave'; | ||
|
||
export enum CampaignType { | ||
REGULAR = 'REGULAR', | ||
AUTOMATION = 'AUTOMATION' | ||
} | ||
|
||
export const CampaignTypeOptions: { icon: React.FC<IconProps>; type: CampaignType }[] = [ | ||
{ icon: ForwardLastIcon, type: CampaignType.REGULAR }, | ||
{ icon: MagnifyingGlassIcon, type: CampaignType.AUTOMATION } | ||
]; |
15 changes: 15 additions & 0 deletions
15
src/codemods/__testfixtures__/deprecated-icons/jsx-usage-multi-import.input.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { Box, BackwardSmallIcon, ChevronDownSmallIcon, Text } from '@freenow/wave'; | ||
|
||
interface Props { | ||
name: string; | ||
} | ||
|
||
const AutomationIcon = () => <BackwardSmallIcon data-testid="automation-campaign-icon" />; | ||
|
||
export const Automation = ({ name }: Props) => ( | ||
<Box display="flex" alignItems="center"> | ||
<AutomationIcon /> | ||
<ChevronDownSmallIcon /> | ||
<Text fontSize="small">{name}</Text> | ||
</Box> | ||
); |
15 changes: 15 additions & 0 deletions
15
src/codemods/__testfixtures__/deprecated-icons/jsx-usage-multi-import.output.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { Box, BackwardLastIcon, ChevronDownIcon, Text } from '@freenow/wave'; | ||
|
||
interface Props { | ||
name: string; | ||
} | ||
|
||
const AutomationIcon = () => <BackwardLastIcon data-testid="automation-campaign-icon" />; | ||
|
||
export const Automation = ({ name }: Props) => ( | ||
<Box display="flex" alignItems="center"> | ||
<AutomationIcon /> | ||
<ChevronDownIcon /> | ||
<Text fontSize="small">{name}</Text> | ||
</Box> | ||
); |
14 changes: 14 additions & 0 deletions
14
src/codemods/__testfixtures__/deprecated-icons/jsx-usage-single-import.input.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { Box, BackwardSmallIcon, Text } from '@freenow/wave'; | ||
|
||
interface Props { | ||
name: string; | ||
} | ||
|
||
const AutomationIcon = () => <BackwardSmallIcon data-testid="automation-campaign-icon" />; | ||
|
||
export const Automation = ({ name }: Props) => ( | ||
<Box display="flex" alignItems="center"> | ||
<AutomationIcon /> | ||
<Text fontSize="small">{name}</Text> | ||
</Box> | ||
); |
14 changes: 14 additions & 0 deletions
14
src/codemods/__testfixtures__/deprecated-icons/jsx-usage-single-import.output.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { Box, BackwardLastIcon, Text } from '@freenow/wave'; | ||
|
||
interface Props { | ||
name: string; | ||
} | ||
|
||
const AutomationIcon = () => <BackwardLastIcon data-testid="automation-campaign-icon" />; | ||
|
||
export const Automation = ({ name }: Props) => ( | ||
<Box display="flex" alignItems="center"> | ||
<AutomationIcon /> | ||
<Text fontSize="small">{name}</Text> | ||
</Box> | ||
); |
7 changes: 7 additions & 0 deletions
7
src/codemods/__testfixtures__/deprecated-icons/styled-usage.input.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { ChevronLeftSmallIcon, themeGet } from '@freenow/wave'; | ||
import styled from 'styled-components'; | ||
|
||
export const StyledIcon = styled(ChevronLeftSmallIcon).attrs({ size: 16 })` | ||
fill: ${themeGet('semanticColors.icon.tertiary')}; | ||
margin-left: auto; | ||
`; |
7 changes: 7 additions & 0 deletions
7
src/codemods/__testfixtures__/deprecated-icons/styled-usage.output.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import { ChevronLeftIcon, themeGet } from '@freenow/wave'; | ||
import styled from 'styled-components'; | ||
|
||
export const StyledIcon = styled(ChevronLeftIcon).attrs({ size: 16 })` | ||
fill: ${themeGet('semanticColors.icon.tertiary')}; | ||
margin-left: auto; | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
jest.autoMockOff(); | ||
const { defineTest } = require('jscodeshift/dist/testUtils'); | ||
|
||
const tests = ['jsx-usage-single-import', 'jsx-usage-multi-import', 'styled-usage', 'constant-usage']; | ||
|
||
describe('deprecated-icons', () => { | ||
tests.forEach(test => | ||
defineTest(__dirname, 'deprecated-icons', { quote: 'single' }, `deprecated-icons/${test}`, { | ||
parser: 'tsx' | ||
}) | ||
); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
import { API, FileInfo } from 'jscodeshift'; | ||
import { Options } from 'recast'; | ||
|
||
const DeprecatedToValidIconsMap = { | ||
BackwardSmallIcon: 'BackwardLastIcon', | ||
ChevronDownSmallIcon: 'ChevronDownIcon', | ||
ChevronLeftSmallIcon: 'ChevronLeftIcon', | ||
ChevronRightSmallIcon: 'ChevronRightIcon', | ||
ChevronUpSmallIcon: 'ChevronUpIcon', | ||
DownloadSmallIcon: 'DownloadIcon', | ||
ForwardSmallIcon: 'ForwardLastIcon', | ||
SearchSmallIcon: 'MagnifyingGlassIcon', | ||
XSmallIcon: 'CloseIcon', | ||
AirportIcon: 'PlaneIcon', | ||
EcoIcon: 'LeafSolidIcon', | ||
GearIcon: 'CogIcon', | ||
HeartIcon: 'HeartSolidIcon', | ||
HomeIcon: 'HouseIcon', | ||
InfoCircleIcon: 'InfoCircleOutlineIcon', | ||
ListUnorderedIcon: 'ListIcon', | ||
PrebookingIcon: 'CalendarCheckedIcon', | ||
SearchIcon: 'MagnifyingGlassIcon', | ||
XIcon: 'CloseIcon' | ||
}; | ||
|
||
const DeprecatedIconsNames = Array.from(Object.keys(DeprecatedToValidIconsMap)); | ||
|
||
export default (file: FileInfo, api: API, options: Options) => { | ||
const j = api.jscodeshift; | ||
const ast = j(file.source); | ||
const printOptions = options ?? { quote: 'single' }; | ||
|
||
const localIconsNames: string[] = []; | ||
|
||
// Find @freenow/wave imports | ||
const waveImports = ast.find(j.ImportDeclaration, { | ||
source: { | ||
value: '@freenow/wave' | ||
} | ||
}); | ||
|
||
// Find deprecated icons named imports in @freenow/wave imports | ||
const deprecatedIconsImports = waveImports | ||
.find(j.ImportSpecifier) | ||
.filter(path => DeprecatedIconsNames.includes(path.node.imported.name)); | ||
|
||
// Get the local icons import names | ||
deprecatedIconsImports.forEach(spec => { | ||
if (spec.node.local?.name) localIconsNames.push(spec.node.local.name); | ||
}); | ||
|
||
// Find usages of the deprecated icons | ||
const iconsIdentifiers = ast.find(j.Identifier, { | ||
name: (name: string) => localIconsNames.includes(name) | ||
}); | ||
|
||
// Iterate over deprecated usages and replace for valid ones, this includes imports | ||
iconsIdentifiers.forEach(id => { | ||
const validIconName: string = DeprecatedToValidIconsMap[id.node.name]; | ||
if (!validIconName) return; | ||
|
||
id.node.name = validIconName; | ||
}); | ||
|
||
return ast.toSource(printOptions); | ||
}; |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.