Create codemod to replace deprecated icons

docs/migrating.storybook.mdx

@@ -18,7 +18,7 @@ allow jscodeshift to parse your typescript/jsx files.
 
 ## From v1 to v2
 
-Two codemods exist to upgrade your components for version 2. In order to apply the transformations in your project you simply need to run the
+The following codemods exist to upgrade your components for version 2. In order to apply the transformations in your project you simply need to run the
 command for your desired codemod pointing to your project's source path.
 
 ### Button and TextButton block property
@@ -41,3 +41,12 @@ npx jscodeshift -t node_modules/@freenow/wave/lib/cjs/codemods/colors-to-css-var
 
 Disclaimer: This codemod transforms usages of `Colors` to our bare colors CSS variables to ensure we don't introduce breaking changes, that being said,
 we recommend using semantic tokens instead as a best practice and offer a `getSemanticValue` API for just that.
+
+### Deprecated icons
+
+We had some deprecated icons that have been deleted in this major, in case you used any of them you need to use their valid (non-deprecated) counterpart from now on.
+This won't change how your icons look in any way since we already exported the deprecated icons as wrappers of valid ones.
+
+```bash
+npx jscodeshift -t node_modules/@freenow/wave/lib/cjs/codemods/deprecated-icons.js path/to/src
+```

src/codemods/__testfixtures__/deprecated-icons/constant-usage.input.tsx

@@ -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 }
+];

src/codemods/__testfixtures__/deprecated-icons/constant-usage.output.tsx

@@ -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 }
+];

src/codemods/__testfixtures__/deprecated-icons/jsx-usage-multi-import.input.tsx

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

src/codemods/__testfixtures__/deprecated-icons/jsx-usage-multi-import.output.tsx

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

src/codemods/__testfixtures__/deprecated-icons/jsx-usage-single-import.input.tsx

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

src/codemods/__testfixtures__/deprecated-icons/jsx-usage-single-import.output.tsx

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

src/codemods/__testfixtures__/deprecated-icons/styled-usage.input.tsx

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

src/codemods/__testfixtures__/deprecated-icons/styled-usage.output.tsx

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

src/codemods/__tests__/block-to-width-100-test.ts

@@ -1,5 +1,3 @@
-// import { defineTest } from 'jscodeshift/dist/testUtils'
-
 jest.autoMockOff();
 const { defineTest } = require('jscodeshift/dist/testUtils');
 

src/codemods/__tests__/deprecated-icons-test.ts

@@ -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'
+ })
+ );
+});

src/codemods/deprecated-icons.ts

@@ -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);
+};