Initial pass at properties panel. Lots of TODOs remaining.

Author: Brian Vaughn

package.json

@@ -88,6 +88,7 @@
     "react": "^16.8.0-alpha.1",
     "react-color": "^2.11.7",
     "react-dom": "^16.8.0-alpha.1",
+    "react-is": "^16.8.0-alpha.1",
     "react-portal": "^3.1.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.5.1",

shells/dev/app/App.js

@@ -1,15 +1,17 @@
 // @flow
 
 import React from 'react';
-import List from './ToDoList';
 import ElementTypes from './ElementTypes';
+import InspectableElements from './InspectableElements';
+import List from './ToDoList';
 import styles from './App.css';
 
 export default function App() {
   return (
     <div className={styles.App}>
       <List />
       <ElementTypes />
+      <InspectableElements />
     </div>
   );
 }

shells/dev/app/InspectableElements/FunctionWithState.js

@@ -0,0 +1,16 @@
+// @flow
+
+import React, { useCallback, useState } from 'react';
+
+type Props = {|
+  initialCount: number,
+|};
+
+export default function FunctionWithState({ initialCount }: Props) {
+  const [count, setCount] = useState(initialCount);
+  const handleClick = useCallback(() => {
+    setCount(count => count + 1);
+  });
+
+  return <button onClick={handleClick}>Count {count}</button>;
+}

shells/dev/app/InspectableElements/InspectableElements.js

@@ -0,0 +1,14 @@
+// @flow
+
+import React, { Fragment } from 'react';
+import FunctionWithState from './FunctionWithState';
+import NestedProps from './NestedProps';
+
+export default function InspectableElements() {
+  return (
+    <Fragment>
+      <FunctionWithState initialCount={1} />
+      <NestedProps />
+    </Fragment>
+  );
+}

shells/dev/app/InspectableElements/NestedProps.js

@@ -0,0 +1,32 @@
+// @flow
+
+import React from 'react';
+
+export default function ObjectProps() {
+  return (
+    <ChildComponent
+      object={{
+        outer: {
+          inner: {
+            string: 'abc',
+            number: 123,
+            boolean: true,
+          },
+        },
+      }}
+      array={['first', 'second', 'third']}
+      objectInArray={[
+        {
+          string: 'abc',
+          number: 123,
+          boolean: true,
+        },
+      ]}
+      arrayInObject={{ array: ['first', 'second', 'third'] }}
+    />
+  );
+}
+
+function ChildComponent(props: any) {
+  return null;
+}

shells/dev/app/InspectableElements/index.js

@@ -0,0 +1,5 @@
+// @flow
+
+import InspectableElements from './InspectableElements';
+
+export default InspectableElements;