index

Summary: This converts the index file to TypeScript which is used as an export for all plugins. Alongside, I had to fix a couple of errors in various files to make sure everything works correctly. For plugins using flow, we define an interface which uses the type definition for FlipperPlugin and types all UI components as `any`. Reviewed By: passy Differential Revision: D16936890 fbshipit-source-id: dacd9a63a82b9f0bbb530b06072186874cba7b6f
2019-08-22 10:00:00 -07:00
parent d962bbbfb9
commit 0ec48d4fc9
31 changed files with 581 additions and 495 deletions
--- a/.flowconfig
+++ b/.flowconfig
@@ -20,10 +20,7 @@ module.use_strict=true
 emoji=true
 all=true
 include_warnings=true
-module.name_mapper='^.*plugin\.flow\.js$' -> 'plugin'
-module.name_mapper='^.*plugin\.tsx$' -> 'plugin'
 module.name_mapper='^\(.*\)\.tsx$' -> 'TsStub'
-module.name_mapper='flipper' -> '<PROJECT_ROOT>/src/index.js'
 suppress_type=$FlowFixMe
 module.system=haste

--- a/flow-typed/flipper.js
+++ b/flow-typed/flipper.js
@@ -11,18 +11,18 @@
 // than the original flow one. (Persisted State generic param being used
 // in reducers etc.

-declare module plugin {
-  import type {KeyboardActions} from './MenuBar.js';
-  import type {App} from './App.js';
-  import type {Logger} from './fb-interfaces/Logger.js';
-  import type Client from './Client.js';
-  import type {Store, MiddlewareAPI} from './reducers/index.js';
-  import type {MetricType} from './utils/exportMetrics.tsx';
-  import type {Node} from 'react';
-  import type BaseDevice from './devices/BaseDevice.js';
-  import type AndroidDevice from './devices/AndroidDevice';
-  import type IOSDevice from './devices/IOSDevice';
+import type {KeyboardActions} from './MenuBar.js';
+import type {App} from './App.js';
+import type {Logger} from './fb-interfaces/Logger.js';
+import type Client from './Client.js';
+import type {Store, MiddlewareAPI} from './reducers/index.js';
+import type {MetricType} from './utils/exportMetrics.tsx';
+import type {Node} from 'react';
+import type BaseDevice from './devices/BaseDevice.js';
+import type AndroidDevice from './devices/AndroidDevice';
+import type IOSDevice from './devices/IOSDevice';

+declare module 'flipper' {
  // This function is intended to be called from outside of the plugin.
  // If you want to `call` from the plugin use, this.client.call
  declare function callClient(
@@ -172,4 +172,99 @@ declare module plugin {

    _init(): void;
  }
+
+  declare var AndroidDevice: any;
+  declare var BaseDevice: any;
+  declare var Block: any;
+  declare var Box: any;
+  declare var Button: any;
+  declare var ButtonGroup: any;
+  declare var Checkbox: any;
+  declare var CodeBlock: any;
+  declare var Component: any;
+  declare var ContextMenu: any;
+  declare var DataDescription: any;
+  declare var DataInspector: any;
+  declare var DetailSidebar: any;
+  declare var Device: any;
+  declare var DeviceLogEntry: any;
+  declare var Element: any;
+  declare var ElementID: any;
+  declare var ElementSearchResultSet: any;
+  declare var ElementsInspector: any;
+  declare var ErrorBlock: any;
+  declare var ErrorBlockContainer: any;
+  declare var Filter: any;
+  declare var FlexBox: any;
+  declare var FlexCenter: any;
+  declare var FlexColumn: any;
+  declare var FlexRow: any;
+  declare var FlipperBasePlugin: any;
+  declare var FlipperPlugin: any;
+  declare var GK: any;
+  declare var Glyph: any;
+  declare var Heading: any;
+  declare var HorizontalRule: any;
+  declare var Input: any;
+  declare var Label: any;
+  declare var Link: any;
+  declare var LoadingIndicator: any;
+  declare var LogLevel: any;
+  declare var ManagedDataInspector: any;
+  declare var ManagedTable: any;
+  declare var ManagedTable_immutable: any;
+  declare var MarkerTimeline: any;
+  declare var MetricType: any;
+  declare var MiddlewareAPI: any;
+  declare var OS: any;
+  declare var Panel: any;
+  declare var PureComponent: any;
+  declare var SearchBox: any;
+  declare var SearchIcon: any;
+  declare var SearchInput: any;
+  declare var Searchable: any;
+  declare var SearchableProps: any;
+  declare var SearchableTable: any;
+  declare var SearchableTable_immutable: any;
+  declare var Select: any;
+  declare var Sheet: any;
+  declare var Sidebar: any;
+  declare var SidebarExtensions: any;
+  declare var Spacer: any;
+  declare var StackTrace: any;
+  declare var StatusIndicator: any;
+  declare var Store: any;
+  declare var Tab: any;
+  declare var TableBodyRow: any;
+  declare var TableColumnOrder: any;
+  declare var TableColumnSizes: any;
+  declare var TableColumns: any;
+  declare var TableHighlightedRows: any;
+  declare var TableRowSortOrder: any;
+  declare var TableRows: any;
+  declare var TableRows_immutable: any;
+  declare var Tabs: any;
+  declare var Text: any;
+  declare var Textarea: any;
+  declare var ToggleButton: any;
+  declare var Toolbar: any;
+  declare var Tooltip: any;
+  declare var Value: any;
+  declare var VerticalRule: any;
+  declare var View: any;
+  declare var bufferToBlob: any;
+  declare var clipboard: any;
+  declare var colors: any;
+  declare var constants: any;
+  declare var createPaste: any;
+  declare var createTablePlugin: any;
+  declare var getPersistedState: any;
+  declare var getPluginKey: any;
+  declare var getStringFromErrorLike: any;
+  declare var isProduction: any;
+  declare var keyframes: any;
+  declare var renderValue: any;
+  declare var shouldParseAndroidLog: any;
+  declare var styled: any;
+  declare var textContent: any;
 }
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
  "description": "Mobile development tool",
  "productName": "Flipper",
  "author": "Facebook Inc",
-  "main": "src/index.js",
+  "main": "src/index.tsx",
  "icon": "icon.png",
  "category": "facebook-intern",
  "privileged": true,
@@ -46,7 +46,7 @@
      "<rootDir>/static/globalTestSetup.js"
    ],
    "moduleNameMapper": {
-      "^flipper$": "<rootDir>/src/index.js"
+      "^flipper$": "<rootDir>/src/index.tsx"
    }
  },
  "devDependencies": {
@@ -88,6 +88,7 @@
    "typescript": "^3.5.2"
  },
  "dependencies": {
+    "@types/react-transition-group": "^4.2.2",
    "@types/redux-devtools-extension": "^2.13.2",
    "@types/rsocket-tcp-server": "^0.0.2",
    "JSONStream": "^1.3.1",
--- a/src/NotificationsHub.tsx
+++ b/src/NotificationsHub.tsx
@@ -78,13 +78,11 @@ export default class Notifications<
        defaultFilters={[
          ...blacklistedPlugins.map(value => ({
            value,
-            invertible: false,
            type: 'exclude',
            key: 'plugin',
          })),
          ...blacklistedCategories.map(value => ({
            value,
-            invertible: false,
            type: 'exclude',
            key: 'category',
          })),
@@ -103,7 +101,7 @@ type OwnProps = {
  onClear: () => void;
  selectedID: string | null | undefined;
  logger: Logger;
-} & SearchableProps;
+} & Partial<SearchableProps>;

 type StateFromProps = {
  activeNotifications: Array<PluginNotification>;
@@ -200,7 +198,6 @@ class NotificationsTable extends Component<Props, State> {
      value: pluginId,
      type: 'exclude',
      key: 'plugin',
-      invertible: false,
    });
    this.props.updatePluginBlacklist(
      this.props.blacklistedPlugins.concat(pluginId),
@@ -213,7 +210,6 @@ class NotificationsTable extends Component<Props, State> {
      value: category,
      type: 'exclude',
      key: 'category',
-      invertible: false,
    });
    this.props.updatePluginBlacklist(
      this.props.blacklistedCategories.concat(category),
@@ -379,7 +375,13 @@ const SEVERITY_COLOR_MAP = {
  error: colors.red,
 };

-const NotificationBox = styled(FlexRow)(props => ({
+type NotificationBoxProps = {
+  inactive?: boolean;
+  isSelected?: boolean;
+  severity: keyof typeof SEVERITY_COLOR_MAP;
+};
+
+const NotificationBox = styled(FlexRow)((props: NotificationBoxProps) => ({
  backgroundColor: props.inactive ? 'transparent' : colors.white,
  opacity: props.inactive ? 0.5 : 1,
  alignItems: 'flex-start',
@@ -418,15 +420,17 @@ const Title = styled('div')({
  fontSize: '1.1em',
 });

-const NotificationContent = styled(FlexColumn)(props => ({
-  marginLeft: 6,
-  marginRight: 10,
-  flexGrow: 1,
-  overflow: 'hidden',
-  maxHeight: props.isSelected ? 'none' : 56,
-  lineHeight: 1.4,
-  color: props.isSelected ? colors.light50 : colors.light30,
-}));
+const NotificationContent = styled(FlexColumn)(
+  (props: {isSelected?: boolean}) => ({
+    marginLeft: 6,
+    marginRight: 10,
+    flexGrow: 1,
+    overflow: 'hidden',
+    maxHeight: props.isSelected ? 'none' : 56,
+    lineHeight: 1.4,
+    color: props.isSelected ? colors.light50 : colors.light30,
+  }),
+);

 const Actions = styled(FlexRow)({
  alignItems: 'center',
@@ -537,7 +541,7 @@ class NotificationItem extends Component<
    }
  };

-  reportNotUseful = (e: UIEvent) => {
+  reportNotUseful = (e: React.MouseEvent<any>) => {
    e.preventDefault();
    e.stopPropagation();
    if (this.props.logger) {
@@ -550,7 +554,7 @@ class NotificationItem extends Component<
    this.setState({reportedNotHelpful: true});
  };

-  onHide = (e: UIEvent) => {
+  onHide = (e: React.MouseEvent<any>) => {
    e.preventDefault();
    e.stopPropagation();
    if (this.props.onHideCategory) {
@@ -572,7 +576,7 @@ class NotificationItem extends Component<
    const {action} = notification;

    return (
-      <ContextMenu
+      <ContextMenu<React.ComponentProps<typeof NotificationBox>>
        data-role="notification"
        component={NotificationBox}
        severity={notification.severity}
@@ -617,16 +621,16 @@ class NotificationItem extends Component<
        {action && !inactive && !isSelected && (
          <FlexColumn style={{alignSelf: 'center'}}>
            {action && (
-              <NotificationButton compact onClick={this.openDeeplink}>
+              <NotificationButton onClick={this.openDeeplink}>
                Open
              </NotificationButton>
            )}
            {this.state.reportedNotHelpful ? (
-              <NotificationButton compact onClick={this.onHide}>
+              <NotificationButton onClick={this.onHide}>
                Hide
              </NotificationButton>
            ) : (
-              <NotificationButton compact onClick={this.reportNotUseful}>
+              <NotificationButton onClick={this.reportNotUseful}>
                Not helpful
              </NotificationButton>
            )}
--- a/src/PluginContainer.tsx
+++ b/src/PluginContainer.tsx
@@ -166,8 +166,7 @@ class PluginContainer extends PureComponent<Props> {
        <Container key="plugin">
          <ErrorBoundary
            heading={`Plugin "${activePlugin.title ||
-              'Unknown'}" encountered an error during render`}
-            logger={this.props.logger}>
+              'Unknown'}" encountered an error during render`}>
            {React.createElement(activePlugin, props)}
          </ErrorBoundary>
        </Container>
--- a/src/chrome/BugReporterDialog.tsx
+++ b/src/chrome/BugReporterDialog.tsx
@@ -43,7 +43,7 @@ const Center = styled(Text)({
 });

 const Title = styled('div')({
-  fontWeight: '500',
+  fontWeight: 500,
  marginTop: 8,
  marginLeft: 2,
  marginBottom: 8,
@@ -119,7 +119,7 @@ class BugReporterDialog extends Component<Props, State> {
  titleRef: HTMLElement;
  descriptionRef: HTMLElement;

-  onDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  onDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    this.setState({description: e.target.value});
  };

--- a/src/chrome/LocationsButton.tsx
+++ b/src/chrome/LocationsButton.tsx
@@ -36,7 +36,7 @@ const DropdownButton = styled(Button)({
  fontSize: 11,
 });

-const shortenText = (text: String, MAX_CHARACTERS = 30): String => {
+const shortenText = (text: string, MAX_CHARACTERS = 30): string => {
  if (text.length <= MAX_CHARACTERS) {
    return text;
  } else {
--- a/src/chrome/MainSidebar.tsx
+++ b/src/chrome/MainSidebar.tsx
@@ -34,8 +34,9 @@ import {selectPlugin, showMoreOrLessPlugins} from '../reducers/connections';
 import {setActiveSheet} from '../reducers/application';
 import UserAccount from './UserAccount';
 import {connect} from 'react-redux';
+import {BackgroundColorProperty} from 'csstype';

-const ListItem = styled('div')(({active}) => ({
+const ListItem = styled('div')(({active}: {active?: boolean}) => ({
  paddingLeft: 10,
  display: 'flex',
  alignItems: 'center',
@@ -64,49 +65,53 @@ const SidebarHeader = styled(FlexBox)({
  flexShrink: 0,
 });

-const PluginShape = styled(FlexBox)(({backgroundColor}) => ({
-  marginRight: 5,
-  backgroundColor,
-  borderRadius: 3,
-  flexShrink: 0,
-  width: 18,
-  height: 18,
-  justifyContent: 'center',
-  alignItems: 'center',
-}));
+const PluginShape = styled(FlexBox)(
+  ({backgroundColor}: {backgroundColor: BackgroundColorProperty}) => ({
+    marginRight: 5,
+    backgroundColor,
+    borderRadius: 3,
+    flexShrink: 0,
+    width: 18,
+    height: 18,
+    justifyContent: 'center',
+    alignItems: 'center',
+  }),
+);

-const PluginName = styled(Text)(props => ({
-  minWidth: 0,
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-  flexGrow: 1,
-  '::after': {
-    fontSize: 12,
-    display: props.count ? 'inline-block' : 'none',
-    padding: '0 8px',
-    lineHeight: '17px',
-    height: 17,
-    alignSelf: 'center',
-    content: `"${props.count}"`,
-    borderRadius: '999em',
-    color: props.isActive ? colors.macOSTitleBarIconSelected : colors.white,
-    backgroundColor: props.isActive
-      ? colors.white
-      : colors.macOSTitleBarIconSelected,
-    fontWeight: 500,
-  },
-}));
+const PluginName = styled(Text)(
+  (props: {isActive?: boolean; count?: number}) => ({
+    minWidth: 0,
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    flexGrow: 1,
+    '::after': {
+      fontSize: 12,
+      display: props.count ? 'inline-block' : 'none',
+      padding: '0 8px',
+      lineHeight: '17px',
+      height: 17,
+      alignSelf: 'center',
+      content: `"${props.count}"`,
+      borderRadius: '999em',
+      color: props.isActive ? colors.macOSTitleBarIconSelected : colors.white,
+      backgroundColor: props.isActive
+        ? colors.white
+        : colors.macOSTitleBarIconSelected,
+      fontWeight: 500,
+    },
+  }),
+);

 const Plugins = styled(FlexColumn)({
  flexGrow: 1,
  overflow: 'auto',
 });

-const PluginDebugger = styled(FlexBox)(props => ({
+const PluginDebugger = styled(FlexBox)({
  color: colors.blackAlpha50,
  alignItems: 'center',
  padding: 10,
@@ -114,7 +119,7 @@ const PluginDebugger = styled(FlexBox)(props => ({
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
-}));
+});

 const PluginShowMoreOrLess = styled(ListItem)({
  color: colors.blue,
@@ -316,14 +321,14 @@ class MainSidebar extends PureComponent<Props> {
                <SidebarHeader>{client.query.app}</SidebarHeader>
                {Array.from(this.props.clientPlugins.values())
                  .filter(
-                    (p: typeof FlipperDevicePlugin) =>
+                    p =>
                      (client.showAllPlugins
                        ? client.plugins
                        : client.lessPlugins
                      ).indexOf(p.id) > -1,
                  )
                  .sort((a, b) => client.byClientLRU(a, b))
-                  .map((plugin: typeof FlipperDevicePlugin) => (
+                  .map(plugin => (
                    <PluginSidebarListItem
                      key={plugin.id}
                      isActive={
--- a/src/chrome/PluginDebugger.tsx
+++ b/src/chrome/PluginDebugger.tsx
@@ -33,7 +33,7 @@ const InfoText = styled(Text)({
 });

 const Title = styled('div')({
-  fontWeight: '500',
+  fontWeight: 500,
  marginBottom: 10,
  marginTop: 8,
 });
@@ -116,7 +116,6 @@ class PluginDebugger extends Component<Props> {
    loaded: boolean,
    status: string,
    GKname: string | null | undefined,
-    GKpassing: boolean | null | undefined,
    pluginPath: string | null | undefined,
  ): TableBodyRow {
    return {
@@ -125,11 +124,7 @@ class PluginDebugger extends Component<Props> {
        lamp: {value: <Lamp on={loaded} />},
        name: {value: <Ellipsis>{name}</Ellipsis>},
        status: {
-          value: status ? (
-            <Ellipsis title={status} passing={false}>
-              {status}
-            </Ellipsis>
-          ) : null,
+          value: status ? <Ellipsis title={status}>{status}</Ellipsis> : null,
        },
        gk: {
          value: GKname && (
@@ -184,7 +179,6 @@ class PluginDebugger extends Component<Props> {
          false,
          'GK disabled',
          plugin.gatekeeper,
-          false,
          externalPluginPath(plugin),
        ),
      ),
@@ -197,7 +191,6 @@ class PluginDebugger extends Component<Props> {
          true,
          '',
          plugin.gatekeeper,
-          true,
          externalPluginPath(plugin),
        ),
      ),
@@ -210,7 +203,6 @@ class PluginDebugger extends Component<Props> {
          true,
          '',
          plugin.gatekeeper,
-          true,
          externalPluginPath(plugin),
        ),
      ),
@@ -223,7 +215,6 @@ class PluginDebugger extends Component<Props> {
          false,
          'disabled',
          null,
-          null,
          externalPluginPath(plugin),
        ),
      ),
@@ -236,7 +227,6 @@ class PluginDebugger extends Component<Props> {
          false,
          status,
          null,
-          null,
          externalPluginPath(plugin),
        ),
      ),
@@ -335,7 +325,7 @@ export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
      disabledPlugins,
      failedPlugins,
    },
-    connections: {selectedPlugin, clients, selectedDevice},
+    connections: {clients, selectedDevice},
  }) => ({
    devicePlugins: Array.from(devicePlugins.values()),
    clientPlugins: Array.from(clientPlugins.values()),
--- a/src/chrome/SelectPluginSheet.tsx
+++ b/src/chrome/SelectPluginSheet.tsx
@@ -55,7 +55,17 @@ const PluginRowComponentContainer = styled(FlexColumn)({
 });

 const Padder = styled('div')(
-  ({paddingLeft, paddingRight, paddingBottom, paddingTop}) => ({
+  ({
+    paddingLeft,
+    paddingRight,
+    paddingBottom,
+    paddingTop,
+  }: {
+    paddingLeft?: number;
+    paddingRight?: number;
+    paddingBottom?: number;
+    paddingTop?: number;
+  }) => ({
    paddingLeft: paddingLeft || 0,
    paddingRight: paddingRight || 0,
    paddingBottom: paddingBottom || 0,
--- a/src/chrome/ShareSheetErrorList.tsx
+++ b/src/chrome/ShareSheetErrorList.tsx
@@ -21,7 +21,17 @@ const ErrorMessage = styled(Text)({
 });

 const Padder = styled('div')(
-  ({paddingLeft, paddingRight, paddingBottom, paddingTop}) => ({
+  ({
+    paddingLeft,
+    paddingRight,
+    paddingBottom,
+    paddingTop,
+  }: {
+    paddingLeft?: number;
+    paddingRight?: number;
+    paddingBottom?: number;
+    paddingTop?: number;
+  }) => ({
    paddingLeft: paddingLeft || 0,
    paddingRight: paddingRight || 0,
    paddingBottom: paddingBottom || 0,
--- a/src/chrome/Sheet.tsx
+++ b/src/chrome/Sheet.tsx
@@ -7,6 +7,7 @@

 import React, {Component} from 'react';
 import {Transition} from 'react-transition-group';
+import {TransitionStatus} from 'react-transition-group/Transition';
 import {setActiveSheet} from '../reducers/application';
 import {connect} from 'react-redux';
 import {styled} from 'flipper';
@@ -16,7 +17,7 @@ import {State as Store} from '../reducers';

 import {ActiveSheet} from '../reducers/application';

-const DialogContainer = styled('div')(({state}) => ({
+const DialogContainer = styled('div')(({state}: {state: TransitionStatus}) => ({
  transform: `translate(-50%, ${
    state === 'entering' || state === 'exiting' || state === 'exited'
      ? 'calc(-100% - 20px)'
--- a/src/chrome/TitleBar.tsx
+++ b/src/chrome/TitleBar.tsx
@@ -40,7 +40,7 @@ import {clipboard} from 'electron';
 import React from 'react';
 import {State} from 'src/reducers';

-const AppTitleBar = styled(FlexRow)(({focused}) => ({
+const AppTitleBar = styled(FlexRow)(({focused}: {focused?: boolean}) => ({
  background: focused
    ? `linear-gradient(to bottom, ${colors.macOSTitleBarBackgroundTop} 0%, ${
        colors.macOSTitleBarBackgroundBottom
@@ -146,7 +146,7 @@ class TitleBar extends React.Component<Props, StateFromProps> {
    return (
      <AppTitleBar focused={this.props.windowIsFocused} className="toolbar">
        {navPluginIsActive ? (
-          <ButtonGroupChain iconSize={14}>
+          <ButtonGroupChain iconSize={12}>
            <DevicesButton />
            <LocationsButton />
          </ButtonGroupChain>
--- a/src/chrome/WelcomeScreen.tsx
+++ b/src/chrome/WelcomeScreen.tsx
@@ -26,7 +26,7 @@ const Container = styled(FlexColumn)({
  backgroundColor: colors.light02,
 });

-const Welcome = styled(FlexColumn)(({isMounted}) => ({
+const Welcome = styled(FlexColumn)(({isMounted}: {isMounted?: boolean}) => ({
  width: 460,
  background: colors.white,
  borderRadius: 10,
--- a/src/dispatcher/tests/TestPlugin.js
+++ b/src/dispatcher/tests/TestPlugin.js
@@ -5,7 +5,7 @@
 * @format
 */

-import {FlipperPlugin} from '../../plugin.tsx';
+import {FlipperPlugin} from 'flipper';

 export default class extends FlipperPlugin {
  static id = 'Static ID';
--- a/src/dispatcher/tests/plugins.electron.js
+++ b/src/dispatcher/tests/plugins.electron.js
@@ -13,7 +13,7 @@ import dispatcher, {
 } from '../plugins.tsx';
 import path from 'path';
 import {remote} from 'electron';
-import {FlipperPlugin} from '../../plugin.tsx';
+import {FlipperPlugin} from 'flipper';
 import reducers from '../../reducers/index.tsx';
 import {init as initLogger} from '../../fb-stubs/Logger.tsx';
 import configureStore from 'redux-mock-store';
--- a/src/dispatcher/plugins.tsx
+++ b/src/dispatcher/plugins.tsx
@@ -11,7 +11,7 @@ import {FlipperPlugin, FlipperDevicePlugin} from '../plugin';
 import {State} from '../reducers/plugins';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import * as Flipper from '../index.js';
+import * as Flipper from '../index';
 import {
  registerPlugins,
  addGatekeepedPlugins,
--- a/src/index.js
+++ b/src/index.js
@@ -1,186 +0,0 @@
-/**
- * Copyright 2018-present Facebook.
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @format
- */
-
-export {default as styled, keyframes} from 'react-emotion';
-export * from './ui/index.js';
-export {getStringFromErrorLike, textContent} from './utils/index.tsx';
-export {default as GK} from './fb-stubs/GK.tsx';
-export {default as createPaste} from './fb-stubs/createPaste.tsx';
-export {graphQLQuery} from './fb-stubs/user.tsx';
-export {
-  FlipperBasePlugin,
-  FlipperPlugin,
-  FlipperDevicePlugin,
-  callClient,
-} from './plugin.tsx';
-export type {PluginClient, Props} from './plugin.tsx';
-export {default as Client} from './Client.tsx';
-export type {MetricType} from './utils/exportMetrics.tsx';
-export {clipboard} from 'electron';
-export {default as constants} from './fb-stubs/constants.tsx';
-export {connect} from 'react-redux';
-export {selectPlugin} from './reducers/connections.tsx';
-export {getPluginKey, getPersistedState} from './utils/pluginUtils.tsx';
-export {writeBufferToFile, bufferToBlob} from './utils/screenshot.tsx';
-export type {Store, MiddlewareAPI} from './reducers/index.tsx';
-export {default as BaseDevice} from './devices/BaseDevice.tsx';
-
-export {
-  default as SidebarExtensions,
-} from './fb-stubs/LayoutInspectorSidebarExtensions.tsx';
-export {
-  DeviceLogListener,
-  DeviceLogEntry,
-  LogLevel,
-} from './devices/BaseDevice.tsx';
-export {shouldParseAndroidLog} from './utils/crashReporterUtility.tsx';
-export {default as isProduction} from './utils/isProduction.tsx';
-export {createTablePlugin} from './createTablePlugin.tsx';
-export {default as DetailSidebar} from './chrome/DetailSidebar.tsx';
-
-export {default as Device} from './devices/BaseDevice.tsx';
-export {default as AndroidDevice} from './devices/AndroidDevice.tsx';
-export {default as ArchivedDevice} from './devices/ArchivedDevice.tsx';
-export {default as IOSDevice} from './devices/IOSDevice.tsx';
-export type {OS} from './devices/BaseDevice.tsx';
-
-export {default as Button} from './ui/components/Button.tsx';
-export {default as ToggleButton} from './ui/components/ToggleSwitch.tsx';
-export {
-  default as ButtonNavigationGroup,
-} from './ui/components/ButtonNavigationGroup.tsx';
-export {default as ButtonGroup} from './ui/components/ButtonGroup.tsx';
-export {
-  default as ButtonGroupChain,
-} from './ui/components/ButtonGroupChain.tsx';
-export {colors, darkColors, brandColors} from './ui/components/colors.tsx';
-export {default as Glyph} from './ui/components/Glyph.tsx';
-export {
-  default as LoadingIndicator,
-} from './ui/components/LoadingIndicator.tsx';
-export {default as Popover} from './ui/components/Popover.tsx';
-export {
-  TableColumns,
-  TableRows,
-  TableRows_immutable,
-  TableBodyColumn,
-  TableBodyRow,
-  TableHighlightedRows,
-  TableRowSortOrder,
-  TableColumnOrder,
-  TableColumnOrderVal,
-  TableColumnSizes,
-} from './ui/components/table/types.tsx';
-export {default as ManagedTable} from './ui/components/table/ManagedTable.tsx';
-export {ManagedTableProps} from './ui/components/table/ManagedTable.tsx';
-export {
-  default as ManagedTable_immutable,
-  ManagedTableProps_immutable,
-} from './ui/components/table/ManagedTable_immutable.tsx';
-export {
-  Value,
-  renderValue,
-} from './ui/components/table/TypeBasedValueRenderer.tsx';
-export {
-  DataValueExtractor,
-  DataInspectorExpanded,
-} from './ui/components/data-inspector/DataInspector.tsx';
-export {
-  default as DataInspector,
-} from './ui/components/data-inspector/DataInspector.tsx';
-export {
-  default as ManagedDataInspector,
-} from './ui/components/data-inspector/ManagedDataInspector.tsx';
-export {
-  default as DataDescription,
-} from './ui/components/data-inspector/DataDescription.tsx';
-export {default as Tabs} from './ui/components/Tabs.tsx';
-export {default as Tab} from './ui/components/Tab.tsx';
-export {default as Input} from './ui/components/Input.tsx';
-export {default as Textarea} from './ui/components/Textarea.tsx';
-export {default as Select} from './ui/components/Select.tsx';
-export {default as Checkbox} from './ui/components/Checkbox.tsx';
-export {default as CodeBlock} from './ui/components/CodeBlock.tsx';
-export {default as ErrorBlock} from './ui/components/ErrorBlock.tsx';
-export {ErrorBlockContainer} from './ui/components/ErrorBlock.tsx';
-export {default as ErrorBoundary} from './ui/components/ErrorBoundary.tsx';
-export {OrderableOrder} from './ui/components/Orderable.tsx';
-export {default as Interactive} from './ui/components/Interactive.tsx';
-export {default as Orderable} from './ui/components/Orderable.tsx';
-export {default as VirtualList} from './ui/components/VirtualList.tsx';
-export {Component, PureComponent} from 'react';
-export {
-  default as ContextMenuProvider,
-} from './ui/components/ContextMenuProvider.tsx';
-export {default as ContextMenu} from './ui/components/ContextMenu.tsx';
-export {FileListFile, FileListFiles} from './ui/components/FileList.tsx';
-export {default as FileList} from './ui/components/FileList.tsx';
-export {default as File} from './ui/components/File.tsx';
-export {
-  DesktopDropdownItem,
-  DesktopDropdownSelectedItem,
-  DesktopDropdown,
-} from './ui/components/desktop-toolbar.tsx';
-export {default as View} from './ui/components/View.tsx';
-export {default as ViewWithSize} from './ui/components/ViewWithSize.tsx';
-export {default as Block} from './ui/components/Block.tsx';
-export {default as FocusableBox} from './ui/components/FocusableBox.tsx';
-export {default as Sidebar} from './ui/components/Sidebar.tsx';
-export {default as SidebarLabel} from './ui/components/SidebarLabel.tsx';
-export {default as Box} from './ui/components/Box.tsx';
-export {default as FlexBox} from './ui/components/FlexBox.tsx';
-export {default as FlexRow} from './ui/components/FlexRow.tsx';
-export {default as FlexColumn} from './ui/components/FlexColumn.tsx';
-export {default as FlexCenter} from './ui/components/FlexCenter.tsx';
-export {default as Toolbar, Spacer} from './ui/components/Toolbar.tsx';
-export {default as Panel} from './ui/components/Panel.tsx';
-export {default as Text} from './ui/components/Text.tsx';
-export {default as TextParagraph} from './ui/components/TextParagraph.tsx';
-export {default as Link} from './ui/components/Link.tsx';
-export {default as PathBreadcrumbs} from './ui/components/PathBreadcrumbs.tsx';
-export {default as ModalOverlay} from './ui/components/ModalOverlay.tsx';
-export {default as Tooltip} from './ui/components/Tooltip.tsx';
-export {default as TooltipProvider} from './ui/components/TooltipProvider.tsx';
-export {default as ResizeSensor} from './ui/components/ResizeSensor.tsx';
-export {default as StatusIndicator} from './ui/components/StatusIndicator.tsx';
-export {default as HorizontalRule} from './ui/components/HorizontalRule.tsx';
-export {default as VerticalRule} from './ui/components/VerticalRule.tsx';
-export {default as Label} from './ui/components/Label.tsx';
-export {default as Heading} from './ui/components/Heading.tsx';
-export {Filter} from './ui/components/filter/types.tsx';
-export {default as MarkerTimeline} from './ui/components/MarkerTimeline.tsx';
-export {default as StackTrace} from './ui/components/StackTrace.tsx';
-export {
-  SearchBox,
-  SearchInput,
-  SearchIcon,
-  SearchableProps,
-  default as Searchable,
-} from './ui/components/searchable/Searchable.tsx';
-export {
-  default as SearchableTable,
-} from './ui/components/searchable/SearchableTable.tsx';
-export {
-  default as SearchableTable_immutable,
-} from './ui/components/searchable/SearchableTable_immutable.tsx';
-export {
-  ElementID,
-  ElementData,
-  ElementAttribute,
-  Element,
-  ElementSearchResultSet,
-} from './ui/components/elements-inspector/ElementsInspector.tsx';
-export {Elements} from './ui/components/elements-inspector/elements.tsx';
-export {
-  ContextMenuExtension,
-} from './ui/components/elements-inspector/elements.tsx';
-export {
-  default as ElementsInspector,
-} from './ui/components/elements-inspector/ElementsInspector.tsx';
-export {InspectorSidebar} from './ui/components/elements-inspector/sidebar.tsx';
-export {Console} from './ui/components/console.tsx';
-export {default as Sheet} from './ui/components/Sheet.tsx';
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -0,0 +1,176 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+export {default as styled, keyframes} from 'react-emotion';
+export * from './ui/index';
+export {getStringFromErrorLike, textContent} from './utils/index';
+export {default as GK} from './fb-stubs/GK';
+export {default as createPaste} from './fb-stubs/createPaste';
+export {graphQLQuery} from './fb-stubs/user';
+export {
+  FlipperBasePlugin,
+  FlipperPlugin,
+  FlipperDevicePlugin,
+  callClient,
+} from './plugin';
+export {PluginClient, Props} from './plugin';
+export {default as Client} from './Client';
+export {MetricType} from './utils/exportMetrics';
+export {clipboard} from 'electron';
+export {default as constants} from './fb-stubs/constants';
+export {connect} from 'react-redux';
+export {selectPlugin} from './reducers/connections';
+export {writeBufferToFile, bufferToBlob} from './utils/screenshot';
+export {getPluginKey, getPersistedState} from './utils/pluginUtils';
+export {Store, MiddlewareAPI} from './reducers/index';
+export {default as BaseDevice} from './devices/BaseDevice';
+export {
+  default as SidebarExtensions,
+} from './fb-stubs/LayoutInspectorSidebarExtensions';
+export {
+  DeviceLogListener,
+  DeviceLogEntry,
+  LogLevel,
+} from './devices/BaseDevice';
+export {shouldParseAndroidLog} from './utils/crashReporterUtility';
+export {default as isProduction} from './utils/isProduction';
+export {createTablePlugin} from './createTablePlugin';
+export {default as DetailSidebar} from './chrome/DetailSidebar';
+export {default as Device} from './devices/BaseDevice';
+export {default as AndroidDevice} from './devices/AndroidDevice';
+export {default as ArchivedDevice} from './devices/ArchivedDevice';
+export {default as IOSDevice} from './devices/IOSDevice';
+export {OS} from './devices/BaseDevice';
+export {default as Button} from './ui/components/Button';
+export {default as ToggleButton} from './ui/components/ToggleSwitch';
+export {
+  default as ButtonNavigationGroup,
+} from './ui/components/ButtonNavigationGroup';
+export {default as ButtonGroup} from './ui/components/ButtonGroup';
+export {default as ButtonGroupChain} from './ui/components/ButtonGroupChain';
+export {colors, darkColors, brandColors} from './ui/components/colors';
+export {default as Glyph} from './ui/components/Glyph';
+export {default as LoadingIndicator} from './ui/components/LoadingIndicator';
+export {default as Popover} from './ui/components/Popover';
+export {
+  TableColumns,
+  TableRows,
+  TableRows_immutable,
+  TableBodyColumn,
+  TableBodyRow,
+  TableHighlightedRows,
+  TableRowSortOrder,
+  TableColumnOrder,
+  TableColumnOrderVal,
+  TableColumnSizes,
+} from './ui/components/table/types';
+export {default as ManagedTable} from './ui/components/table/ManagedTable';
+export {ManagedTableProps} from './ui/components/table/ManagedTable';
+export {
+  default as ManagedTable_immutable,
+  ManagedTableProps_immutable,
+} from './ui/components/table/ManagedTable_immutable';
+export {Value, renderValue} from './ui/components/table/TypeBasedValueRenderer';
+export {
+  DataValueExtractor,
+  DataInspectorExpanded,
+} from './ui/components/data-inspector/DataInspector';
+export {
+  default as DataInspector,
+} from './ui/components/data-inspector/DataInspector';
+export {
+  default as ManagedDataInspector,
+} from './ui/components/data-inspector/ManagedDataInspector';
+export {
+  default as DataDescription,
+} from './ui/components/data-inspector/DataDescription';
+export {default as Tabs} from './ui/components/Tabs';
+export {default as Tab} from './ui/components/Tab';
+export {default as Input} from './ui/components/Input';
+export {default as Textarea} from './ui/components/Textarea';
+export {default as Select} from './ui/components/Select';
+export {default as Checkbox} from './ui/components/Checkbox';
+export {default as CodeBlock} from './ui/components/CodeBlock';
+export {default as ErrorBlock} from './ui/components/ErrorBlock';
+export {ErrorBlockContainer} from './ui/components/ErrorBlock';
+export {default as ErrorBoundary} from './ui/components/ErrorBoundary';
+export {OrderableOrder} from './ui/components/Orderable';
+export {default as Interactive} from './ui/components/Interactive';
+export {default as Orderable} from './ui/components/Orderable';
+export {default as VirtualList} from './ui/components/VirtualList';
+export {Component, PureComponent} from 'react';
+export {
+  default as ContextMenuProvider,
+} from './ui/components/ContextMenuProvider';
+export {default as ContextMenu} from './ui/components/ContextMenu';
+export {FileListFile, FileListFiles} from './ui/components/FileList';
+export {default as FileList} from './ui/components/FileList';
+export {default as File} from './ui/components/File';
+export {
+  DesktopDropdownItem,
+  DesktopDropdownSelectedItem,
+  DesktopDropdown,
+} from './ui/components/desktop-toolbar';
+export {default as View} from './ui/components/View';
+export {default as ViewWithSize} from './ui/components/ViewWithSize';
+export {default as Block} from './ui/components/Block';
+export {default as FocusableBox} from './ui/components/FocusableBox';
+export {default as Sidebar} from './ui/components/Sidebar';
+export {default as SidebarLabel} from './ui/components/SidebarLabel';
+export {default as Box} from './ui/components/Box';
+export {default as FlexBox} from './ui/components/FlexBox';
+export {default as FlexRow} from './ui/components/FlexRow';
+export {default as FlexColumn} from './ui/components/FlexColumn';
+export {default as FlexCenter} from './ui/components/FlexCenter';
+export {default as Toolbar, Spacer} from './ui/components/Toolbar';
+export {default as Panel} from './ui/components/Panel';
+export {default as Text} from './ui/components/Text';
+export {default as TextParagraph} from './ui/components/TextParagraph';
+export {default as Link} from './ui/components/Link';
+export {default as PathBreadcrumbs} from './ui/components/PathBreadcrumbs';
+export {default as ModalOverlay} from './ui/components/ModalOverlay';
+export {default as Tooltip} from './ui/components/Tooltip';
+export {default as TooltipProvider} from './ui/components/TooltipProvider';
+export {default as ResizeSensor} from './ui/components/ResizeSensor';
+export {default as StatusIndicator} from './ui/components/StatusIndicator';
+export {default as HorizontalRule} from './ui/components/HorizontalRule';
+export {default as VerticalRule} from './ui/components/VerticalRule';
+export {default as Label} from './ui/components/Label';
+export {default as Heading} from './ui/components/Heading';
+export {Filter} from './ui/components/filter/types';
+export {default as MarkerTimeline} from './ui/components/MarkerTimeline';
+export {default as StackTrace} from './ui/components/StackTrace';
+export {
+  SearchBox,
+  SearchInput,
+  SearchIcon,
+  SearchableProps,
+  default as Searchable,
+} from './ui/components/searchable/Searchable';
+export {
+  default as SearchableTable,
+} from './ui/components/searchable/SearchableTable';
+export {
+  default as SearchableTable_immutable,
+} from './ui/components/searchable/SearchableTable_immutable';
+export {
+  ElementID,
+  ElementData,
+  ElementAttribute,
+  Element,
+  ElementSearchResultSet,
+} from './ui/components/elements-inspector/ElementsInspector';
+export {Elements} from './ui/components/elements-inspector/elements';
+export {
+  ContextMenuExtension,
+} from './ui/components/elements-inspector/elements';
+export {
+  default as ElementsInspector,
+} from './ui/components/elements-inspector/ElementsInspector';
+export {InspectorSidebar} from './ui/components/elements-inspector/sidebar';
+export {Console} from './ui/components/console';
+export {default as Sheet} from './ui/components/Sheet';
--- a/src/plugin.tsx
+++ b/src/plugin.tsx
@@ -5,8 +5,8 @@
 * @format
 */

-import {KeyboardActions} from './MenuBar.js';
-import {App} from './App.js';
+import {KeyboardActions} from './MenuBar';
+import {App} from './App';
 import {Logger} from './fb-interfaces/Logger.js';
 import Client from './Client';
 import {Store, MiddlewareAPI} from './reducers/index';
--- a/src/plugins/layout/Inspector.js
+++ b/src/plugins/layout/Inspector.js
@@ -73,7 +73,6 @@ export default class Inspector extends Component<Props> {
    if (!this.props.ax) {
      return null;
    }
-    // $FlowFixMe: Object.values returns Array<mixed>
    const elements: Array<Element> = Object.values(
      this.props.persistedState.AXelements,
    );
--- a/src/plugins/sections/EventsTable.js
+++ b/src/plugins/sections/EventsTable.js
@@ -161,7 +161,6 @@ export default class extends Component<Props, State> {
    ) {
      const node = document.querySelector(`[data-id="${focusedGenerationId}"]`);
      if (node) {
-        // $FlowFixMe scrollIntoViewIfNeeded exists
        node.scrollIntoViewIfNeeded();
      }
    }
--- a/src/plugins/sections/index.js
+++ b/src/plugins/sections/index.js
@@ -272,7 +272,6 @@ export default class extends FlipperPlugin<State, *, PersistedState> {
        </Toolbar>
        <Sidebar position="top" minHeight={80} height={80}>
          <EventTable
-            // $FlowFixMe Object.values returns Array<mixed>: https://github.com/facebook/flow/issues/2221
            generations={Object.values(generations)}
            focusedGenerationId={focusedGenerationId}
            onClick={this.onTreeGenerationFocused}
--- a/src/ui/components/Button.tsx
+++ b/src/ui/components/Button.tsx
@@ -239,7 +239,7 @@ type OwnProps = {
   * Whether the button should have additional padding left and right.
   */
  padded?: boolean;
-};
+} & React.HTMLProps<HTMLDivElement>;

 type State = {
  active: boolean;
--- a/src/ui/components/ContextMenu.tsx
+++ b/src/ui/components/ContextMenu.tsx
@@ -12,7 +12,7 @@ import {MenuItemConstructorOptions} from 'electron';

 export type MenuTemplate = Array<MenuItemConstructorOptions>;

-type Props = {
+type Props<C> = {
  /** List of items in the context menu. Used for static menus. */
  items?: MenuTemplate;
  /** Function to generate the menu. Called right before the menu is showed. Used for dynamic menus. */
@@ -22,7 +22,7 @@ type Props = {
  /** The component that is used to wrap the children. Defaults to `FlexColumn`. */
  component: React.ComponentType<any> | string;
  onMouseDown?: (e: React.MouseEvent) => any;
-};
+} & C;

 /**
 * Native context menu that is shown on secondary click.
@@ -31,7 +31,7 @@ type Props = {
 *
 * Separators can be added by `{type: 'separator'}`
 */
-export default class ContextMenu extends React.Component<Props> {
+export default class ContextMenu<C = any> extends React.Component<Props<C>> {
  static defaultProps = {
    component: FlexColumn,
  };
--- a/src/ui/components/data-inspector/DataDescription.tsx
+++ b/src/ui/components/data-inspector/DataDescription.tsx
@@ -7,7 +7,7 @@
 import Link from '../Link';
 import {DataInspectorSetValue} from './DataInspector';
 import {PureComponent} from 'react';
-import styled from '../../styled/index.js';
+import styled from 'react-emotion';
 import {SketchPicker} from 'react-color';
 import {Component, Fragment} from 'react';
 import Popover from '../Popover';
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -1,185 +0,0 @@
-/**
- * Copyright 2018-present Facebook.
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @format
- */
-
-export {default as styled} from 'react-emotion';
-export {default as Button} from './components/Button.tsx';
-export {default as ToggleButton} from './components/ToggleSwitch.tsx';
-export {
-  default as ButtonNavigationGroup,
-} from './components/ButtonNavigationGroup.tsx';
-export {default as ButtonGroup} from './components/ButtonGroup.tsx';
-export {default as ButtonGroupChain} from './components/ButtonGroupChain.tsx';
-
-//
-export {colors, darkColors, brandColors} from './components/colors.tsx';
-
-//
-export {default as Glyph} from './components/Glyph.tsx';
-
-//
-export {default as LoadingIndicator} from './components/LoadingIndicator.tsx';
-
-//
-export {default as Popover} from './components/Popover.tsx';
-
-// tables
-export type {
-  TableColumns,
-  TableRows,
-  TableRows_immutable,
-  TableBodyColumn,
-  TableBodyRow,
-  TableHighlightedRows,
-  TableRowSortOrder,
-  TableColumnOrder,
-  TableColumnOrderVal,
-  TableColumnSizes,
-} from './components/table/types.tsx';
-export {default as ManagedTable} from './components/table/ManagedTable.tsx';
-export type {ManagedTableProps} from './components/table/ManagedTable.tsx';
-export {
-  default as ManagedTable_immutable,
-} from './components/table/ManagedTable_immutable.tsx';
-export type {
-  ManagedTableProps_immutable,
-} from './components/table/ManagedTable_immutable.tsx';
-
-export type {Value} from './components/table/TypeBasedValueRenderer.tsx';
-export {renderValue} from './components/table/TypeBasedValueRenderer.tsx';
-
-//
-export type {
-  DataValueExtractor,
-  DataInspectorExpanded,
-} from './components/data-inspector/DataInspector.tsx';
-export {
-  default as DataInspector,
-} from './components/data-inspector/DataInspector.tsx';
-export {
-  default as ManagedDataInspector,
-} from './components/data-inspector/ManagedDataInspector.tsx';
-export {
-  default as DataDescription,
-} from './components/data-inspector/DataDescription.tsx';
-
-// tabs
-export {default as Tabs} from './components/Tabs.tsx';
-export {default as Tab} from './components/Tab.tsx';
-
-// inputs
-export {default as Input} from './components/Input.tsx';
-export {default as Textarea} from './components/Textarea.tsx';
-export {default as Select} from './components/Select.tsx';
-export {default as Checkbox} from './components/Checkbox.tsx';
-
-// code
-export {default as CodeBlock} from './components/CodeBlock.tsx';
-
-// error
-export {default as ErrorBlock} from './components/ErrorBlock.tsx';
-export {ErrorBlockContainer} from './components/ErrorBlock.tsx';
-export {default as ErrorBoundary} from './components/ErrorBoundary.tsx';
-
-// interactive components
-export type {OrderableOrder} from './components/Orderable.tsx';
-export {default as Interactive} from './components/Interactive.tsx';
-export {default as Orderable} from './components/Orderable.tsx';
-export {default as VirtualList} from './components/VirtualList.tsx';
-
-// base components
-export {Component, PureComponent} from 'react';
-
-// context menus and dropdowns
-export {
-  default as ContextMenuProvider,
-} from './components/ContextMenuProvider.tsx';
-export {default as ContextMenu} from './components/ContextMenu.tsx';
-
-// file
-export type {FileListFile, FileListFiles} from './components/FileList.tsx';
-export {default as FileList} from './components/FileList.tsx';
-export {default as File} from './components/File.tsx';
-
-// context menu items
-export {
-  DesktopDropdownItem,
-  DesktopDropdownSelectedItem,
-  DesktopDropdown,
-} from './components/desktop-toolbar.tsx';
-
-// utility elements
-export {default as View} from './components/View.tsx';
-export {default as ViewWithSize} from './components/ViewWithSize.tsx';
-export {default as Block} from './components/Block.tsx';
-export {default as FocusableBox} from './components/FocusableBox.tsx';
-export {default as Sidebar} from './components/Sidebar.tsx';
-export {default as SidebarLabel} from './components/SidebarLabel.tsx';
-export {default as Box} from './components/Box.tsx';
-export {default as FlexBox} from './components/FlexBox.tsx';
-export {default as FlexRow} from './components/FlexRow.tsx';
-export {default as FlexColumn} from './components/FlexColumn.tsx';
-export {default as FlexCenter} from './components/FlexCenter.tsx';
-export {default as Toolbar, Spacer} from './components/Toolbar.tsx';
-export {default as Panel} from './components/Panel.tsx';
-export {default as Text} from './components/Text.tsx';
-export {default as TextParagraph} from './components/TextParagraph.tsx';
-export {default as Link} from './components/Link.tsx';
-export {default as PathBreadcrumbs} from './components/PathBreadcrumbs.tsx';
-export {default as ModalOverlay} from './components/ModalOverlay.tsx';
-export {default as Tooltip} from './components/Tooltip.tsx';
-export {default as TooltipProvider} from './components/TooltipProvider.tsx';
-export {default as ResizeSensor} from './components/ResizeSensor.tsx';
-export {default as StatusIndicator} from './components/StatusIndicator.tsx';
-
-// typography
-export {default as HorizontalRule} from './components/HorizontalRule.tsx';
-export {default as VerticalRule} from './components/VerticalRule.tsx';
-export {default as Label} from './components/Label.tsx';
-export {default as Heading} from './components/Heading.tsx';
-
-// filters
-export type {Filter} from './components/filter/types.tsx';
-
-export {default as MarkerTimeline} from './components/MarkerTimeline.tsx';
-
-export {default as StackTrace} from './components/StackTrace.tsx';
-
-//
-export {
-  SearchBox,
-  SearchInput,
-  SearchIcon,
-  default as Searchable,
-} from './components/searchable/Searchable.tsx';
-export {
-  default as SearchableTable,
-} from './components/searchable/SearchableTable.tsx';
-export {
-  default as SearchableTable_immutable,
-} from './components/searchable/SearchableTable_immutable.tsx';
-export type {SearchableProps} from './components/searchable/Searchable.tsx';
-
-//
-export type {
-  ElementID,
-  ElementData,
-  ElementAttribute,
-  Element,
-  ElementSearchResultSet,
-} from './components/elements-inspector/ElementsInspector.tsx';
-export {Elements} from './components/elements-inspector/elements.tsx';
-export type {
-  ContextMenuExtension,
-} from './components/elements-inspector/elements.tsx';
-export {
-  default as ElementsInspector,
-} from './components/elements-inspector/ElementsInspector.tsx';
-export {InspectorSidebar} from './components/elements-inspector/sidebar.tsx';
-
-export {Console} from './components/console.tsx';
-
-export {default as Sheet} from './components/Sheet.tsx';
--- a/src/ui/index.tsx
+++ b/src/ui/index.tsx
@@ -0,0 +1,174 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ */
+
+export {default as styled} from 'react-emotion';
+export {default as Button} from './components/Button';
+export {default as ToggleButton} from './components/ToggleSwitch';
+export {
+  default as ButtonNavigationGroup,
+} from './components/ButtonNavigationGroup';
+export {default as ButtonGroup} from './components/ButtonGroup';
+export {default as ButtonGroupChain} from './components/ButtonGroupChain';
+
+export {colors, darkColors, brandColors} from './components/colors';
+
+export {default as Glyph} from './components/Glyph';
+
+export {default as LoadingIndicator} from './components/LoadingIndicator';
+
+export {default as Popover} from './components/Popover';
+
+// tables
+export {
+  TableColumns,
+  TableRows,
+  TableRows_immutable,
+  TableBodyColumn,
+  TableBodyRow,
+  TableHighlightedRows,
+  TableRowSortOrder,
+  TableColumnOrder,
+  TableColumnOrderVal,
+  TableColumnSizes,
+} from './components/table/types';
+export {default as ManagedTable} from './components/table/ManagedTable';
+export {ManagedTableProps} from './components/table/ManagedTable';
+export {
+  default as ManagedTable_immutable,
+} from './components/table/ManagedTable_immutable';
+export {
+  ManagedTableProps_immutable,
+} from './components/table/ManagedTable_immutable';
+
+export {Value} from './components/table/TypeBasedValueRenderer';
+export {renderValue} from './components/table/TypeBasedValueRenderer';
+
+export {
+  DataValueExtractor,
+  DataInspectorExpanded,
+} from './components/data-inspector/DataInspector';
+export {
+  default as DataInspector,
+} from './components/data-inspector/DataInspector';
+export {
+  default as ManagedDataInspector,
+} from './components/data-inspector/ManagedDataInspector';
+export {
+  default as DataDescription,
+} from './components/data-inspector/DataDescription';
+
+// tabs
+export {default as Tabs} from './components/Tabs';
+export {default as Tab} from './components/Tab';
+
+// inputs
+export {default as Input} from './components/Input';
+export {default as Textarea} from './components/Textarea';
+export {default as Select} from './components/Select';
+export {default as Checkbox} from './components/Checkbox';
+
+// code
+export {default as CodeBlock} from './components/CodeBlock';
+
+// error
+export {default as ErrorBlock} from './components/ErrorBlock';
+export {ErrorBlockContainer} from './components/ErrorBlock';
+export {default as ErrorBoundary} from './components/ErrorBoundary';
+
+// interactive components
+export {OrderableOrder} from './components/Orderable';
+export {default as Interactive} from './components/Interactive';
+export {default as Orderable} from './components/Orderable';
+export {default as VirtualList} from './components/VirtualList';
+
+// base components
+export {Component, PureComponent} from 'react';
+
+// context menus and dropdowns
+export {default as ContextMenuProvider} from './components/ContextMenuProvider';
+export {default as ContextMenu} from './components/ContextMenu';
+
+// file
+export {FileListFile, FileListFiles} from './components/FileList';
+export {default as FileList} from './components/FileList';
+export {default as File} from './components/File';
+
+// context menu items
+export {
+  DesktopDropdownItem,
+  DesktopDropdownSelectedItem,
+  DesktopDropdown,
+} from './components/desktop-toolbar';
+
+// utility elements
+export {default as View} from './components/View';
+export {default as ViewWithSize} from './components/ViewWithSize';
+export {default as Block} from './components/Block';
+export {default as FocusableBox} from './components/FocusableBox';
+export {default as Sidebar} from './components/Sidebar';
+export {default as SidebarLabel} from './components/SidebarLabel';
+export {default as Box} from './components/Box';
+export {default as FlexBox} from './components/FlexBox';
+export {default as FlexRow} from './components/FlexRow';
+export {default as FlexColumn} from './components/FlexColumn';
+export {default as FlexCenter} from './components/FlexCenter';
+export {default as Toolbar, Spacer} from './components/Toolbar';
+export {default as Panel} from './components/Panel';
+export {default as Text} from './components/Text';
+export {default as TextParagraph} from './components/TextParagraph';
+export {default as Link} from './components/Link';
+export {default as PathBreadcrumbs} from './components/PathBreadcrumbs';
+export {default as ModalOverlay} from './components/ModalOverlay';
+export {default as Tooltip} from './components/Tooltip';
+export {default as TooltipProvider} from './components/TooltipProvider';
+export {default as ResizeSensor} from './components/ResizeSensor';
+export {default as StatusIndicator} from './components/StatusIndicator';
+
+// typography
+export {default as HorizontalRule} from './components/HorizontalRule';
+export {default as VerticalRule} from './components/VerticalRule';
+export {default as Label} from './components/Label';
+export {default as Heading} from './components/Heading';
+
+// filters
+export {Filter} from './components/filter/types';
+
+export {default as MarkerTimeline} from './components/MarkerTimeline';
+
+export {default as StackTrace} from './components/StackTrace';
+
+export {
+  SearchBox,
+  SearchInput,
+  SearchIcon,
+  default as Searchable,
+} from './components/searchable/Searchable';
+export {
+  default as SearchableTable,
+} from './components/searchable/SearchableTable';
+export {
+  default as SearchableTable_immutable,
+} from './components/searchable/SearchableTable_immutable';
+export {SearchableProps} from './components/searchable/Searchable';
+
+export {
+  ElementID,
+  ElementData,
+  ElementAttribute,
+  Element,
+  ElementSearchResultSet,
+} from './components/elements-inspector/ElementsInspector';
+export {Elements} from './components/elements-inspector/elements';
+export {ContextMenuExtension} from './components/elements-inspector/elements';
+export {
+  default as ElementsInspector,
+} from './components/elements-inspector/ElementsInspector';
+export {InspectorSidebar} from './components/elements-inspector/sidebar';
+
+export {Console} from './components/console';
+
+export {default as Sheet} from './components/Sheet';
--- a/src/ui/styled/index.js
+++ b/src/ui/styled/index.js
@@ -1,9 +0,0 @@
-/**
- * Copyright 2018-present Facebook.
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @format
- */
-
-import styled from 'react-emotion';
-export default styled;
--- a/src/utils/tests/pluginUtils.node.js
+++ b/src/utils/tests/pluginUtils.node.js
@@ -12,7 +12,7 @@ import {
 import type {State as PluginsState} from '../../reducers/plugins.tsx';
 import type {State as PluginStatesState} from '../../reducers/pluginStates.tsx';
 import type {PluginDefinition} from '../../dispatcher/plugins.tsx';
-import {FlipperBasePlugin} from '../../..';
+import {FlipperBasePlugin} from 'flipper';
 import type {MiddlewareAPI} from '../../reducers/index.tsx';
 class MockFlipperPluginWithDefaultPersistedState extends FlipperBasePlugin<
  *,
--- a/yarn.lock
+++ b/yarn.lock
@@ -1185,6 +1185,13 @@
    hoist-non-react-statics "^3.3.0"
    redux "^4.0.0"

+"@types/react-transition-group@^4.2.2":
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.2.tgz#8c851c4598a23a3a34173069fb4c5c9e41c02e3f"
+  integrity sha512-YfoaTNqBwbIqpiJ5NNfxfgg5kyFP1Hqf/jqBtSWNv0E+EkkxmN+3VD6U2fu86tlQvdAc1o0SdWhnWFwcRMTn9A==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-virtualized-auto-sizer@^1.0.0":
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.0.tgz#fc32f30a8dab527b5816f3a757e1e1d040c8f272"