Process Bloks derived components

Reviewed By: lblasa

Differential Revision: D45079131

fbshipit-source-id: 363f5ed2fedc6183130ef0185f8ff5bf58579c10

desktop/plugins/public/ui-debugger/components/Tree.tsx

@@ -394,6 +394,8 @@ function nodeIcon(node: UINode) {
     return <DecorationImage src="icons/ck-logo.png" />;
   } else if (node.tags.includes('BloksBoundTree')) {
     return <DecorationImage src="facebook/bloks-logo-orange.png" />;
+  } else if (node.tags.includes('BloksDerived')) {
+    return <DecorationImage src="facebook/bloks-logo-blue.png" />;
   }
 }
 

desktop/plugins/public/ui-debugger/index.tsx

@@ -338,7 +338,7 @@ type UIActions = {
   onSelectNode: (node?: Id) => void;
   onExpandNode: (node: Id) => void;
   onCollapseNode: (node: Id) => void;
-  setVisualiserWidth: (width: Id) => void;
+  setVisualiserWidth: (width: number) => void;
 };
 
 function uiActions(uiState: UIState, nodes: Atom<Map<Id, UINode>>): UIActions {

desktop/plugins/public/ui-debugger/types.tsx

@@ -174,7 +174,7 @@ export type Color = {
 };
 
 export type Snapshot = string;
-export type Id = number;
+export type Id = number | string;
 
 export type MetadataId = number;
 export type TreeState = {expandedNodes: Id[]};
@@ -186,7 +186,8 @@ export type Tag =
   | 'Litho'
   | 'CK'
   | 'iOS'
-  | 'BloksBoundTree';
+  | 'BloksBoundTree'
+  | 'BloksDerived';
 
 export type Inspectable =
   | InspectableObject