🐛 Fixes variable name clash bug (#169)

* 🐛 Fixes variable name clash bug

* docs(changeset): Fixes a bug where variable names clash with type properties of the same name, causing a "Missing converter for: [path]" error

Author: danieldelcore

.changeset/shiny-dolls-kiss.md

@@ -0,0 +1,5 @@
+---
+'extract-react-types': patch
+---
+
+Fixes a bug where variable names clash with type properties of the same name, causing a "Missing converter for: [path]" error

packages/extract-react-types/__snapshots__/converters-typescript.test.js.snap

@@ -233,6 +233,59 @@ Object {
 }
 `;
 
+exports[`TypeScript: does not conflict with ambiguously named type properties  1`] = `
+Object {
+  "kind": "generic",
+  "name": Object {
+    "kind": "id",
+    "name": "Icon",
+    "type": null,
+  },
+  "value": Object {
+    "kind": "object",
+    "members": Array [
+      Object {
+        "key": Object {
+          "kind": "id",
+          "name": "size",
+        },
+        "kind": "property",
+        "leadingComments": Array [
+          Object {
+            "raw": " Icon sizes",
+            "type": "commentLine",
+            "value": "Icon sizes",
+          },
+        ],
+        "optional": true,
+        "value": Object {
+          "kind": "union",
+          "types": Array [
+            Object {
+              "kind": "string",
+              "value": "small",
+            },
+            Object {
+              "kind": "string",
+              "value": "medium",
+            },
+            Object {
+              "kind": "string",
+              "value": "large",
+            },
+            Object {
+              "kind": "string",
+              "value": "xlarge",
+            },
+          ],
+        },
+      },
+    ],
+    "referenceIdName": "IconProps",
+  },
+}
+`;
+
 exports[`TypeScript: follow export default export 1`] = `
 Object {
   "kind": "generic",

packages/extract-react-types/converters-typescript.test.js

@@ -618,6 +618,24 @@ const TESTS = [
 
     export default MyComponent;
   `
+  },
+  {
+    name: 'does not conflict with ambiguously named type properties ',
+    typeSystem: 'typescript',
+    code: `
+      import React, { FC } from 'react';
+
+      const size = 'My var name conflicts with the property name';
+
+      export interface IconProps {
+        // Icon sizes
+        size?: 'small' | 'medium' | 'large' | 'xlarge';
+      }
+
+      const Icon: FC<IconProps> = ({ size = 'medium' }) => null;
+
+      export default Icon;
+  `
   }
 ];
 

packages/extract-react-types/src/index.js

@@ -846,7 +846,7 @@ converters.TSTypeLiteral = (path, context): K.Obj => ({
 converters.TSPropertySignature = (path, context): K.Property => ({
   kind: 'property',
   optional: !!path.node.optional,
-  key: convert(path.get('key'), context),
+  key: { kind: 'id', name: path.node.key.name },
   value: convert(path.get('typeAnnotation'), context)
 });