Foundations for inspector

Summary:
^

This laids the foundation for the inspector. It just reorganises a few bits.

Reviewed By: LukeDefeo

Differential Revision: D40319611

fbshipit-source-id: 8cf9b151c631faa1f26a7a6dfaa86b01abc42fe5

desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx

@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React from 'react';
+import {Color, Inspectable, InspectableObject, UINode} from '../../../types';
+import {Panel} from 'flipper-plugin';
+
+type Props = {
+  node: UINode;
+};
+
+const TextAttributeInspector: React.FC<{name: string; value: string}> = ({
+  name,
+  value,
+}) => {
+  return (
+    <div>
+      {name}: {value}
+    </div>
+  );
+};
+
+const NumberAttributeInspector: React.FC<{name: string; value: number}> = ({
+  name,
+  value,
+}) => {
+  return (
+    <div>
+      {name}: {value}
+    </div>
+  );
+};
+
+const ColorAttributeInspector: React.FC<{name: string; value: Color}> = ({
+  name,
+  value,
+}) => {
+  return (
+    <div>
+      {name}: {JSON.stringify(value)}
+    </div>
+  );
+};
+
+const ObjectAttributeInspector: React.FC<{
+  name: string;
+  value: Record<string, Inspectable>;
+}> = ({name, value}) => {
+  return (
+    <div>
+      {name}: {JSON.stringify(value)}
+    </div>
+  );
+};
+
+function create(key: string, inspectable: Inspectable) {
+  switch (inspectable.type) {
+    case 'text':
+      return <TextAttributeInspector name={key} value={inspectable.value} />;
+    case 'number':
+      return <NumberAttributeInspector name={key} value={inspectable.value} />;
+    case 'color':
+      return <ColorAttributeInspector name={key} value={inspectable.value} />;
+    case 'object':
+      return <ObjectAttributeInspector name={key} value={inspectable.fields} />;
+    default:
+      return;
+  }
+}
+
+function createSection(name: string, inspectable: InspectableObject) {
+  return (
+    <Panel key={name} title={name}>
+      {' '}
+      {Object.keys(inspectable.fields).map(function (key, _) {
+        return create(key, inspectable.fields[key]);
+      })}
+    </Panel>
+  );
+}
+
+export const AttributesInspector: React.FC<Props> = ({node}) => {
+  // TODO: add raw panel to inspect data as received.
+  return (
+    <>
+      {Object.keys(node.attributes).map(function (key, _) {
+        return createSection(key, node.attributes[key] as InspectableObject);
+      })}
+    </>
+  );
+};

desktop/plugins/public/ui-debugger/components/sidebar/inspector/DocumentationInspector.tsx

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React from 'react';
+import {UINode} from '../../../types';
+
+type Props = {
+  node: UINode;
+};
+
+export const DocumentationInspector: React.FC<Props> = () => {
+  return <p>Quick Help and Documentation</p>;
+};

desktop/plugins/public/ui-debugger/components/sidebar/inspector/IdentityInspector.tsx

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React from 'react';
+import {Col, Row} from 'antd';
+import {UINode} from '../../../types';
+
+type Props = {
+  node: UINode;
+};
+
+export const IdentityInspector: React.FC<Props> = ({node}) => {
+  return (
+    <>
+      <Row gutter={4} style={{marginTop: '10px'}}>
+        <Col flex="100px">
+          <div style={{padding: '0 16px'}}>Name:</div>
+        </Col>
+        <Col flex="auto">{node.name}</Col>
+      </Row>
+      <Row gutter={4}>
+        <Col flex="100px">
+          <div style={{padding: '0 16px'}}>Id:</div>
+        </Col>
+        <Col flex="auto">{node.id}</Col>
+      </Row>
+    </>
+  );
+};

desktop/plugins/public/ui-debugger/components/sidebar/inspector/LayoutInspector.tsx

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import React from 'react';
+import {UINode} from '../../../types';
+
+type Props = {
+  node: UINode;
+};
+
+export const LayoutInspector: React.FC<Props> = () => {
+  return <p>Origin and size</p>;
+};