From 4589e9f272adb4c7c4135c6e8165bf40346cacf4 Mon Sep 17 00:00:00 2001
From: Daniel Del Core <daniel.delcore.92@gmail.com>
Date: Thu, 4 Mar 2021 13:32:08 +1100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixes=20variable=20name=20clash?=
 =?UTF-8?q?=20bug=20(#169)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🐛 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
---
 .changeset/shiny-dolls-kiss.md                |  5 ++
 .../converters-typescript.test.js.snap        | 53 +++++++++++++++++++
 .../converters-typescript.test.js             | 18 +++++++
 packages/extract-react-types/src/index.js     |  2 +-
 4 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/shiny-dolls-kiss.md

diff --git a/.changeset/shiny-dolls-kiss.md b/.changeset/shiny-dolls-kiss.md
new file mode 100644
index 00000000..c89ef0d4
--- /dev/null
+++ b/.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
diff --git a/packages/extract-react-types/__snapshots__/converters-typescript.test.js.snap b/packages/extract-react-types/__snapshots__/converters-typescript.test.js.snap
index c77d50db..dfa37ff0 100644
--- a/packages/extract-react-types/__snapshots__/converters-typescript.test.js.snap
+++ b/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",
diff --git a/packages/extract-react-types/converters-typescript.test.js b/packages/extract-react-types/converters-typescript.test.js
index 116860e0..956ecd7f 100644
--- a/packages/extract-react-types/converters-typescript.test.js
+++ b/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;
+  `
   }
 ];
 
diff --git a/packages/extract-react-types/src/index.js b/packages/extract-react-types/src/index.js
index cbda2bc4..a4be9e22 100644
--- a/packages/extract-react-types/src/index.js
+++ b/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)
 });