Fix React.FC default props extraction in type inference (#368)

* Initial plan

* Initial exploration and test setup

Co-authored-by: itsdouges <[email protected]>

* Fix React.FC default props extraction

Co-authored-by: itsdouges <[email protected]>

* docs(changeset):

* Add changeset for React.FC default props fix

Co-authored-by: itsdouges <[email protected]>

* Addressing PR comments

Co-authored-by: itsdouges <[email protected]>

* Fix lint errors in box.tsx test file

Co-authored-by: itsdouges <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: itsdouges <[email protected]>

Author: Copilot

.changeset/perfect-emus-beg.md

@@ -0,0 +1,5 @@
+---
+"@triplex/server": patch
+---
+
+Fixed React.FC components not displaying their default prop values in the editor UI. Components declared with `React.FC` will now correctly show default values when the element is active in the editor.

packages/@triplex/server/src/ast/__tests__/type-infer.test.ts

@@ -678,25 +678,26 @@ describe("type infer", () => {
     `);
   });
 
-  // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-  // TODO: How do we get access to the concrete AST of a component declared using
-  // React.FC? It's currently unknown so this test isn't showing the correct data
-  // it's missing default props!
-  it.todo("should infer default props from a jsx element React.FC decl", () => {
+  it("should infer default props from a jsx element React.FC decl", () => {
     const project = _createProject({
       tsConfigFilePath: join(__dirname, "__mocks__/tsconfig.json"),
     });
     const sourceFile = project.addSourceFileAtPath(
-      join(__dirname, "__mocks__/default-props.tsx"),
+      join(__dirname, "__mocks__/type-extraction.tsx"),
     );
-    const sceneObject = getJsxElementAtOrThrow(sourceFile, 14, 7);
+    const sceneObject = getJsxElementAtOrThrow(sourceFile, 102, 7);
 
     const { props } = getJsxElementPropTypes(sceneObject);
 
     expect(props).toMatchInlineSnapshot(`
       [
         {
+          "defaultValue": {
+            "kind": "number",
+            "value": 700,
+          },
           "description": undefined,
+          "group": "Other",
           "kind": "number",
           "name": "scaleMax",
           "required": false,
@@ -708,6 +709,7 @@ describe("type infer", () => {
         {
           "column": 13,
           "description": undefined,
+          "group": "Other",
           "kind": "string",
           "line": 102,
           "name": "seed",
@@ -717,22 +719,37 @@ describe("type infer", () => {
           "valueKind": "string",
         },
         {
+          "defaultValue": {
+            "kind": "string",
+            "value": "WGAN",
+          },
           "description": undefined,
+          "group": "Other",
           "kind": "string",
           "literal": "foo",
           "name": "strategy",
           "required": false,
           "tags": {},
         },
         {
+          "defaultValue": {
+            "kind": "boolean",
+            "value": true,
+          },
           "description": undefined,
+          "group": "Other",
           "kind": "boolean",
           "name": "useInterpolation",
           "required": false,
           "tags": {},
         },
         {
+          "defaultValue": {
+            "kind": "boolean",
+            "value": true,
+          },
           "description": undefined,
+          "group": "Other",
           "kind": "boolean",
           "name": "useNoise",
           "required": false,

packages/@triplex/server/src/ast/type-infer.ts

@@ -281,12 +281,19 @@ function getJsxDeclProps(
       return null;
     }
 
-    const symbol = jsxType.getSymbol() || jsxType.getAliasSymbol();
-    if (!symbol) {
+    // For React.FC components, we want the actual component's declaration (e.g., const Home: React.FC = ...)
+    // rather than the FunctionComponent interface declaration
+    const componentSymbol = tagName.getSymbol();
+    const typeSymbol = jsxType.getSymbol() || jsxType.getAliasSymbol();
+    
+    if (!typeSymbol) {
       throw new Error("invariant: could not find symbol");
     }
 
-    const declaration = symbol.getDeclarations()[0];
+    // Use the component's symbol if available (for React.FC), otherwise use the type symbol
+    const declaration = componentSymbol
+      ? componentSymbol.getDeclarations()[0]
+      : typeSymbol.getDeclarations()[0];
 
     const propsType = element
       .getProject()