Tracking interactions

Summary:
Set up basic primitives for user interaction tracking. I hope the docs and unit tests in this diff are self explanatory :)

In upcoming diffs:
* Wire up to scuba events
* Annotate all important parts of Flipper Chrome
* Investigate if we can wrap important interactions of ANT by default

Reviewed By: jknoxville

Differential Revision: D25120234

fbshipit-source-id: 9849d565d7be27e498cc2b4db33e7d6e6938ee06

desktop/app/src/sandy-chrome/DesignComponentDemos.tsx

@@ -10,7 +10,7 @@
 import React from 'react';
 import {Typography, Card, Table, Collapse, Button, Tabs} from 'antd';
 import {Layout, Link} from '../ui';
-import {NUX, theme} from 'flipper-plugin';
+import {NUX, theme, Tracked, TrackingScope} from 'flipper-plugin';
 import reactElementToJSXString from 'react-element-to-jsx-string';
 import {CodeOutlined} from '@ant-design/icons';
 
@@ -310,6 +310,47 @@ const demos: PreviewProps[] = [
       ),
     },
   },
+  {
+    title: 'Tracked',
+    description:
+      'A component that tracks component interactions. For Facebook internal builds, global stats for these interactions will be tracked. Wrap this component around another element to track its events',
+    props: [
+      [
+        'events',
+        'string | string[] (default: "onClick")',
+        'The event(s) of the child component that should be tracked',
+      ],
+      [
+        'action',
+        'string (optional)',
+        'Describes the element the user interacted with. Will by default be derived from the title, key or contents of the element',
+      ],
+    ],
+    demos: {
+      'Basic example': (
+        <Tracked>
+          <Button onClick={() => {}}>Test</Button>
+        </Tracked>
+      ),
+    },
+  },
+  {
+    title: 'TrackingScope',
+    description:
+      'Describes more precisely the place in the UI for all underlying Tracked elements. Multiple Tracking scopes are automatically nested. Use the `withTrackingScope` HoC to automatically wrap a component definition in a tracking scope',
+    props: [
+      ['scope', 'string', 'The name of the scope. For example "Login Dialog"'],
+    ],
+    demos: {
+      'Basic example': (
+        <TrackingScope scope="Tracking scope demo">
+          <Tracked>
+            <Button onClick={() => {}}>Test</Button>
+          </Tracked>
+        </TrackingScope>
+      ),
+    },
+  },
 ];
 
 function ComponentPreview({title, demos, description, props}: PreviewProps) {