fix: add disable eslint comment for each usage of colors as a type

freenowtech · Jan 11, 2024 · 82a9b1e · 82a9b1e
1 parent b0247fa
commit 82a9b1e
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 65 deletions.
diff --git a/src/codemods/__testfixtures__/colors-to-css-vars/colors-as-mapped-type.input.tsx b/src/codemods/__testfixtures__/colors-to-css-vars/colors-as-mapped-type.input.tsx
@@ -8,4 +8,4 @@ export const STATUS: { [K in string]: Colors } = {
     NOT_AVAILABLE: Colors.WHITE,
     OFFLINE: Colors.WHITE,
     PAYING: Colors.WHITE,
-}
+};
diff --git a/src/codemods/__testfixtures__/colors-to-css-vars/colors-as-mapped-type.output.tsx b/src/codemods/__testfixtures__/colors-to-css-vars/colors-as-mapped-type.output.tsx
@@ -1,5 +1,6 @@
 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)',
@@ -8,4 +9,4 @@ export const STATUS: { [K in string]: ReadCssColorVariable | (string & {}) } = {
     NOT_AVAILABLE: 'var(--wave-b-color-white)',
     OFFLINE: 'var(--wave-b-color-white)',
     PAYING: 'var(--wave-b-color-white)',
-}
+};
diff --git a/src/codemods/__testfixtures__/colors-to-css-vars/colors-as-property-signature.input.tsx b/src/codemods/__testfixtures__/colors-to-css-vars/colors-as-property-signature.input.tsx
@@ -2,8 +2,8 @@ import { Colors } from '@freenow/wave';
 
 export interface LabelVariant {
     color?: Colors
-    // backgroundColor?: Colors
-    // borderColor?: Colors
+    backgroundColor?: Colors
+    borderColor?: Colors
 }
 
-// export interface AnotherInterface { color?: Colors }
+export interface AnotherInterface { color?: Colors }
diff --git a/src/codemods/__tests__/colors-to-css-vars-test.ts b/src/codemods/__tests__/colors-to-css-vars-test.ts
@@ -2,14 +2,14 @@ jest.autoMockOff();
 import { defineTest } from 'jscodeshift/dist/testUtils';
 
 const tests = [
-    // 'color-in-JSX-multi-import',
-    // 'color-in-JSX-single-import',
-    // 'template-multi-quasis-even',
-    // 'template-multi-quasis-odd',
-    // 'template-single-quasis',
-    // 'no-colors-usage',
-    'colors-as-property-signature'
-    // 'colors-as-mapped-type'
+    'color-in-JSX-multi-import',
+    'color-in-JSX-single-import',
+    'template-multi-quasis-even',
+    'template-multi-quasis-odd',
+    'template-single-quasis',
+    'no-colors-usage',
+    'colors-as-property-signature',
+    'colors-as-mapped-type'
 ];
 
 describe('colors-to-css-vars', () => {

diff --git a/src/codemods/colors-to-css-vars.ts b/src/codemods/colors-to-css-vars.ts
@@ -1,14 +1,13 @@
 import {
     API,
+    ASTPath,
     Collection,
     FileInfo,
     Identifier,
     ImportDeclaration,
     JSCodeshift,
     Node,
     TemplateLiteral,
-    TSPropertySignature,
-    TSTypeAnnotation,
     TSTypeReference
 } from 'jscodeshift';
 import { Options } from 'recast';
@@ -114,14 +113,12 @@ const replaceColorsForCssVarsInTemplateLiterals = (
     });
 };
 
-const isPropertySignature = (node: any): node is TSPropertySignature => node.type === 'TSPropertySignature';
-
 const addLeadingEslintComment = (j: JSCodeshift, node: Node): void => {
     const comment = j.commentLine(ESLINT_DISABLE_COMMENT, true, false);
     node.comments = [comment];
 };
 
-const addDisableEslintCommentToTypes = (
+const addDisableEslintCommentToTypeUsages = (
     ast: Collection<any>,
     j: JSCodeshift,
     typeReferences: Collection<TSTypeReference>
@@ -131,12 +128,6 @@ const addDisableEslintCommentToTypes = (
     // Find lines where Colors is being used
     typeReferences.forEach(path => {
         if (path.node.loc.start.line) uniqueLinesWithColorsUsage.add(path.node.loc.start.line);
-
-        // const pathsStartingOnLine = path.node.loc && path.node.loc.start.line
-        // console.log(pathsStartingOnLine)
-        // const parent = path.parentPath.parentPath.value
-
-        // if (isPropertySignature(parent)) addLeadingEslintComment(j, parent)
     });
 
     // Find paths on those lines
@@ -148,17 +139,25 @@ const addDisableEslintCommentToTypes = (
         })
         .paths();
 
-    console.log(pathsOnLinesWithColorsUsage);
+    // Create a map to store all paths for every line
+    const pathsPerLine = new Map<number, ASTPath<Node>[]>();
 
-    // pathsOnLinesWithColorsUsage.forEach((path) => {
-    //     console.log(path.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]);
+    });
 
-    // Opt 1
     // Find the first path for each line
-    // Iterate over paths and find the highest node (parent) for each line (this will be the first node on the line)
-    // (?) Add leading comment to that node
-    // (?) If it doesn't work, check strategy in example repo
+    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) => {
@@ -219,40 +218,10 @@ export default (file: FileInfo, api: API, options: Options) => {
         }
     });
 
-    // // Find property signatures using Colors (e.g. backgroundColor: Colors)
-    // const propertySignatures = ast.find(j.TSPropertySignature, {
-    //     typeAnnotation: {
-    //         typeAnnotation: {
-    //             typeName: {
-    //                 name: (colorName: string) => localColorNames.includes(colorName)
-    //             }
-    //         }
-    //     }
-    // });
-
-    // propertySignatures.forEach(signature => {
-    //     // Find the type itself in the property signature
-    //     const typeReference = j(signature).find(j.TSTypeReference, {
-    //         typeName: {
-    //             name: (colorName: string) => localColorNames.includes(colorName)
-    //         }
-    //     });
-
-    //     // Build the replacement type for css variables
-    //     const cssColorTypeReference = j.tsTypeReference(j.identifier(CSS_VARS_COLORS_REPLACEMENT_TYPE));
-
-    //     // Replace the old type for the new one
-    //     typeReference.forEach(reference => {
-    //         reference.replace(cssColorTypeReference);
-    //     })
-
-    //     // Add a trailing comment disabling eslint
-    //     const comment = j.commentLine(ESLINT_DISABLE_COMMENT, false, true)
-    //     signature.node.comments = [comment]
-    // });
-
     // Add a comment to disable eslint for each Colors type usage
-    if (usagesAsTypes.length > 0) addDisableEslintCommentToTypes(ast, j, usagesAsTypes);
+    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 => {