Merge branch 'colors-codemod-add-eslint-comment' into colors-codemod-…

…types

src/codemods/__testfixtures__/colors-to-css-vars/colors-as-mapped-type.input.tsx

@@ -0,0 +1,11 @@
+import { Colors } from '@freenow/wave';
+
+export const STATUS: { [K in string]: Colors } = {
+    APPROACH: Colors.WHITE,
+    AVAILABLE: Colors.WHITE,
+    BACK_TO_GARAGE: Colors.WHITE,
+    IN_TRIP: Colors.WHITE,
+    NOT_AVAILABLE: Colors.WHITE,
+    OFFLINE: Colors.WHITE,
+    PAYING: Colors.WHITE,
+};

src/codemods/__testfixtures__/colors-to-css-vars/colors-as-mapped-type.output.tsx

@@ -0,0 +1,12 @@
+import { ReadCssColorVariable } from '@freenow/wave';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const STATUS: { [K in string]: ReadCssColorVariable | (string & {}) } = {
+    APPROACH: 'var(--wave-b-color-white)',
+    AVAILABLE: 'var(--wave-b-color-white)',
+    BACK_TO_GARAGE: 'var(--wave-b-color-white)',
+    IN_TRIP: 'var(--wave-b-color-white)',
+    NOT_AVAILABLE: 'var(--wave-b-color-white)',
+    OFFLINE: 'var(--wave-b-color-white)',
+    PAYING: 'var(--wave-b-color-white)',
+};

src/codemods/__testfixtures__/colors-to-css-vars/color-as-type.input.tsx → src/codemods/__testfixtures__/colors-to-css-vars/colors-as-property-signature.input.tsx

@@ -4,4 +4,6 @@ export interface LabelVariant {
     color?: Colors
     backgroundColor?: Colors
     borderColor?: Colors
-}
+}
+
+export interface AnotherInterface { color?: Colors }

src/codemods/__testfixtures__/colors-to-css-vars/colors-as-property-signature.output.tsx

@@ -0,0 +1,13 @@
+import { ReadCssColorVariable } from '@freenow/wave';
+
+export interface LabelVariant {
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    color?: ReadCssColorVariable | (string & {})
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    backgroundColor?: ReadCssColorVariable | (string & {})
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    borderColor?: ReadCssColorVariable | (string & {})
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export interface AnotherInterface { color?: ReadCssColorVariable | (string & {}) }

src/codemods/__tests__/colors-to-css-vars-test.ts

@@ -7,8 +7,9 @@ const tests = [
     'template-multi-quasis-even',
     'template-multi-quasis-odd',
     'template-single-quasis',
-    'color-as-type',
-    'no-colors-usage'
+    'no-colors-usage',
+    'colors-as-property-signature',
+    'colors-as-mapped-type'
 ];
 
 describe('colors-to-css-vars', () => {

src/codemods/colors-to-css-vars.ts

@@ -1,4 +1,15 @@
-import { API, FileInfo, Identifier, ImportDeclaration, JSCodeshift, TemplateLiteral } from 'jscodeshift';
+import {
+    API,
+    ASTPath,
+    Collection,
+    FileInfo,
+    Identifier,
+    ImportDeclaration,
+    JSCodeshift,
+    Node,
+    TemplateLiteral,
+    TSTypeReference
+} from 'jscodeshift';
 import { Options } from 'recast';
 
 const ColorsToCssVariablesMap = {
@@ -37,6 +48,7 @@ const ColorsToCssVariablesMap = {
 
 const CSS_VARS_COLORS_TYPE_NAME = 'ReadCssColorVariable';
 const CSS_VARS_COLORS_REPLACEMENT_TYPE = `${CSS_VARS_COLORS_TYPE_NAME} | (string & {})`;
+const ESLINT_DISABLE_COMMENT = ' eslint-disable-next-line @typescript-eslint/ban-types';
 
 const replaceColorsForCssVarsInTemplateLiterals = (
     j: JSCodeshift,
@@ -101,6 +113,53 @@ const replaceColorsForCssVarsInTemplateLiterals = (
     });
 };
 
+const addLeadingEslintComment = (j: JSCodeshift, node: Node): void => {
+    const comment = j.commentLine(ESLINT_DISABLE_COMMENT, true, false);
+    node.comments = [comment];
+};
+
+const addDisableEslintCommentToTypeUsages = (
+    ast: Collection<any>,
+    j: JSCodeshift,
+    typeReferences: Collection<TSTypeReference>
+) => {
+    const uniqueLinesWithColorsUsage = new Set<number>();
+
+    // Find lines where Colors is being used
+    typeReferences.forEach(path => {
+        if (path.node.loc.start.line) uniqueLinesWithColorsUsage.add(path.node.loc.start.line);
+    });
+
+    // Find paths on those lines
+    const pathsOnLinesWithColorsUsage = ast
+        .find(j.Node, {
+            loc: {
+                start: position => uniqueLinesWithColorsUsage.has(position.line)
+            }
+        })
+        .paths();
+
+    // Create a map to store all paths for every line
+    const pathsPerLine = new Map<number, ASTPath<Node>[]>();
+
+    // Iterate all paths and store them based on their line
+    pathsOnLinesWithColorsUsage.forEach(path => {
+        const line = path.node.loc.start.line;
+        if (pathsPerLine.get(line)) pathsPerLine.get(line).push(path);
+        else pathsPerLine.set(line, [path]);
+    });
+
+    // Find the first path for each line
+    pathsPerLine.forEach(paths => {
+        const firstPath = paths.reduce((accum, curr) => {
+            if (curr.node.loc.start.column < accum.node.loc.start.column) return curr;
+            return accum;
+        });
+
+        addLeadingEslintComment(j, firstPath.node);
+    });
+};
+
 export default (file: FileInfo, api: API, options: Options) => {
     const j = api.jscodeshift;
     const ast = j(file.source);
@@ -159,8 +218,13 @@ export default (file: FileInfo, api: API, options: Options) => {
         }
     });
 
+    // Add a comment to disable eslint for each Colors type usage
+    if (usagesAsTypes.length > 0) {
+        addDisableEslintCommentToTypeUsages(ast, j, usagesAsTypes);
+    }
+
+    // Replace the usages of Colors as a type for the type representing our css variables
     usagesAsTypes.forEach(type => {
-        // Replace the usage of Colors as a type for the corresponding type name
         const cssColorTypeReference = j.tsTypeReference(j.identifier(CSS_VARS_COLORS_REPLACEMENT_TYPE));
         type.replace(cssColorTypeReference);
     });