Bless "Layout" and "theme"

Summary: This blesses the `Layout` and `theme` components and exposes them from `flipper-plugin`, so that they can be used in (public) Sandy plugins. Also marked old abstractions as going to be deprecated.

Reviewed By: cekkaewnumchai

Differential Revision: D24503560

fbshipit-source-id: a8f384667b8f66e3b9f00771a123fe5c9d755eb3

desktop/app/src/chrome/ConsoleLogs.tsx

@@ -15,8 +15,9 @@ import type {Methods} from 'console-feed/lib/definitions/Methods';
 import type {Styles} from 'console-feed/lib/definitions/Styles';
 import {createState, useValue} from 'flipper-plugin';
 import {useLocalStorage} from '../utils/useLocalStorage';
-import {theme, useIsDarkMode} from '../sandy-chrome/theme';
+import {theme} from 'flipper-plugin';
 import {useIsSandy} from '../sandy-chrome/SandyContext';
+import {useIsDarkMode} from '../utils/useIsDarkMode';
 
 const MAX_LOG_ITEMS = 1000;
 

desktop/app/src/chrome/settings/ToggledSection.tsx

@@ -9,7 +9,7 @@
 
 import {FlexColumn, styled, FlexRow, ToggleButton} from '../../ui';
 import React from 'react';
-import {theme} from '../../sandy-chrome/theme';
+import {theme} from 'flipper-plugin';
 
 const IndentedSection = styled(FlexColumn)({
   paddingLeft: 50,

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

@@ -8,7 +8,7 @@
  */
 
 import {Layout, styled} from '../ui';
-import {theme} from './theme';
+import {theme} from 'flipper-plugin';
 
 export const ContentContainer = styled(Layout.Container)({
   flex: 1,

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} from '../ui';
-import {theme} from './theme';
+import {theme} from 'flipper-plugin';
 import reactElementToJSXString from 'react-element-to-jsx-string';
 import {CodeOutlined} from '@ant-design/icons';
 

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

@@ -26,7 +26,7 @@ import {
   toggleLeftSidebarVisible,
   toggleRightSidebarVisible,
 } from '../reducers/application';
-import {theme} from './theme';
+import {theme, Layout} from 'flipper-plugin';
 import SetupDoctorScreen, {checkHasNewProblem} from './SetupDoctorScreen';
 import SettingsSheet from '../chrome/SettingsSheet';
 import WelcomeScreen from './WelcomeScreen';
@@ -36,7 +36,6 @@ import {ToplevelProps} from './SandyApp';
 import {useValue} from 'flipper-plugin';
 import {logout} from '../reducers/user';
 import config from '../fb-stubs/config';
-import {Layout} from '../ui/components/Layout';
 import styled from '@emotion/styled';
 
 const LeftRailButtonElem = styled(Button)<{kind?: 'small'}>(({kind}) => ({

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

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import {theme} from './theme';
+import {theme} from 'flipper-plugin';
 import styled from '@emotion/styled';
 import {Layout} from '../ui';
 import {Button, Tooltip, Typography} from 'antd';

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

@@ -10,7 +10,7 @@
 import React, {useEffect, useState, useCallback} from 'react';
 import {styled} from '../ui';
 import {Layout, Sidebar} from '../ui';
-import {theme} from './theme';
+import {theme} from 'flipper-plugin';
 import {Logger} from '../fb-interfaces/Logger';
 
 import {LeftRail} from './LeftRail';

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

@@ -10,7 +10,7 @@
 import React from 'react';
 import {Typography, Button, Space, Input, Card, Alert, List} from 'antd';
 import {Layout} from '../ui';
-import {theme} from './theme';
+import {theme} from 'flipper-plugin';
 import {css} from 'emotion';
 import {DesignComponentDemos} from './DesignComponentDemos';
 

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

@@ -26,7 +26,7 @@ import {
   HealthcheckStatus,
   HealthcheckResult,
 } from '../reducers/healthchecks';
-import {theme} from './theme';
+import {theme} from 'flipper-plugin';
 import {
   startHealthchecks,
   updateHealthcheckResult,

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

@@ -16,7 +16,7 @@ import {
   CodeOutlined,
   BugOutlined,
 } from '@ant-design/icons';
-import {theme} from './theme';
+import {theme} from 'flipper-plugin';
 
 const {Text, Title} = Typography;
 

desktop/app/src/sandy-chrome/appinspect/AppInspect.tsx

@@ -12,7 +12,7 @@ import {Alert, Button, Input} from 'antd';
 import {LeftSidebar, SidebarTitle, InfoIcon} from '../LeftSidebar';
 import {SettingOutlined, RocketOutlined} from '@ant-design/icons';
 import {Layout, Link} from '../../ui';
-import {theme} from '../theme';
+import {theme} from 'flipper-plugin';
 import {useStore as useReduxStore} from 'react-redux';
 import {showEmulatorLauncher} from './LaunchEmulator';
 import {AppSelector} from './AppSelector';

desktop/app/src/sandy-chrome/appinspect/AppSelector.tsx

@@ -16,7 +16,7 @@ import {
   CaretDownOutlined,
 } from '@ant-design/icons';
 import {Layout, styled} from '../../ui';
-import {theme} from '../theme';
+import {theme} from 'flipper-plugin';
 import {batch} from 'react-redux';
 import {Dispatch, useDispatch, useStore} from '../../utils/useStore';
 import {

desktop/app/src/sandy-chrome/appinspect/LaunchEmulator.tsx

@@ -14,7 +14,7 @@ import {renderReactRoot} from '../../utils/renderReactRoot';
 import {Store} from '../../reducers';
 import {useStore} from '../../utils/useStore';
 import {launchEmulator} from '../../devices/AndroidDevice';
-import {Layout} from '../../ui/components/Layout';
+import {Layout} from 'flipper-plugin';
 import {
   launchSimulator,
   getSimulators,

desktop/app/src/sandy-chrome/appinspect/PluginList.tsx

@@ -12,7 +12,7 @@ import {Badge, Button, Menu, Tooltip, Typography} from 'antd';
 import {InfoIcon, SidebarTitle} from '../LeftSidebar';
 import {PlusOutlined, MinusOutlined} from '@ant-design/icons';
 import {Glyph, Layout, styled} from '../../ui';
-import {theme} from '../theme';
+import {theme} from 'flipper-plugin';
 import {useDispatch, useStore} from '../../utils/useStore';
 import {getPluginTitle, sortPluginsByName} from '../../utils/pluginUtils';
 import {ClientPluginDefinition, DevicePluginDefinition} from '../../plugin';

desktop/app/src/sandy-chrome/notification/Notification.tsx

@@ -8,7 +8,8 @@
  */
 
 import React from 'react';
-import {Layout, styled} from '../../ui';
+import {Layout, theme} from 'flipper-plugin';
+import {styled} from '../../ui';
 import {Input, Typography, Button, Collapse} from 'antd';
 import {
   DownOutlined,
@@ -20,7 +21,6 @@ import {
 } from '@ant-design/icons';
 import {LeftSidebar, SidebarTitle} from '../LeftSidebar';
 import {PluginNotification} from '../../reducers/notifications';
-import {theme} from '../theme';
 
 const {Title, Text, Paragraph} = Typography;
 

desktop/app/src/ui/components/Button.tsx

@@ -21,7 +21,7 @@ import {useStore} from '../../utils/useStore';
 import {useIsSandy} from '../../sandy-chrome/SandyContext';
 import type {ButtonProps} from 'antd/lib/button';
 import {DownOutlined, CheckOutlined} from '@ant-design/icons';
-import {theme} from '../../sandy-chrome/theme';
+import {theme} from 'flipper-plugin';
 
 type ButtonType = 'primary' | 'success' | 'warning' | 'danger';
 

desktop/app/src/ui/components/FlexBox.tsx

@@ -16,6 +16,7 @@ type Props = {
 };
 
 /**
+ * @deprecated use `Layout.Container` from flipper-plugin instead
  * A container using flexbox to layout its children
  */
 const FlexBox = styled(View)<Props>(({shrink}) => ({

desktop/app/src/ui/components/FlexCenter.tsx

@@ -11,6 +11,7 @@ import View from './View';
 import styled from '@emotion/styled';
 
 /**
+ * @deprecated use `Layout.Container` from flipper-plugin instead
  * A container displaying its children horizontally and vertically centered.
  */
 const FlexCenter = styled(View)({

desktop/app/src/ui/components/FlexColumn.tsx

@@ -11,6 +11,7 @@ import FlexBox from './FlexBox';
 import styled from '@emotion/styled';
 
 /**
+ * @deprecated use `Layout.Container` from flipper-plugin instead
  * A container displaying its children in a column
  */
 const FlexColumn = styled(FlexBox)({

desktop/app/src/ui/components/FlexRow.tsx

@@ -11,6 +11,7 @@ import FlexBox from './FlexBox';
 import styled from '@emotion/styled';
 
 /**
+ * @deprecated use `Layout.Horizontal` from flipper-plugin instead
  * A container displaying its children in a row
  */
 const FlexRow = styled(FlexBox)({

desktop/app/src/ui/components/HBox.tsx

@@ -25,6 +25,9 @@ const HBoxContainer = styled(FlexRow)<{verticalAlign: string}>(
 
 HBoxContainer.displayName = 'HBoxContainer';
 
+/**
+ * @deprecated use Layout.Left / Layout.Right or Layout.Horizonta from flipper-plugin instead
+ */
 const HBox: React.FC<{
   children: [] | [React.ReactNode] | [React.ReactNode, React.ReactNode];
   grow?: 'left' | 'right' | 'auto';

desktop/app/src/ui/components/LegacyLayout.tsx

@@ -1,76 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its 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 styled from '@emotion/styled';
-
-const FixedContainer = styled.div({
-  flex: 'none',
-  height: 'auto',
-  overflow: 'hidden',
-});
-FixedContainer.displayName = 'Layout:FixedContainer';
-
-const SplitScrollContainer = styled.div<{scrollable: boolean}>(
-  ({scrollable}) => ({
-    overflow: scrollable ? 'auto' : 'hidden',
-    flex: 'auto',
-    display: 'flex',
-  }),
-);
-SplitScrollContainer.displayName = 'Layout:SplitScrollContainer';
-
-const SplitContainer = styled.div<{horizontal: boolean; center?: boolean}>(
-  ({horizontal, center}) => ({
-    display: 'flex',
-    flex: 'auto',
-    flexDirection: horizontal ? 'row' : 'column',
-    height: '100%',
-    width: '100%',
-    overflow: 'hidden',
-    alignItems: center ? 'center' : undefined,
-  }),
-);
-SplitContainer.displayName = 'Layout:SplitContainer';
-
-/**
- * @deprecated use Layout.Top|Left|Right|Bottom instead
- */
-export function renderLayout(
-  {
-    children,
-    scrollable,
-  }: {scrollable?: boolean; children: [React.ReactNode, React.ReactNode]},
-  horizontal: boolean,
-  reverse: boolean,
-) {
-  if (children.length !== 2) {
-    throw new Error('Layout expects exactly 2 children');
-  }
-  const fixedChild = reverse ? children[1] : children[0];
-
-  const fixedElement = <FixedContainer>{fixedChild}</FixedContainer>;
-
-  const dynamicElement = (
-    <SplitScrollContainer scrollable={!!scrollable}>
-      {reverse ? children[0] : children[1]}
-    </SplitScrollContainer>
-  );
-  return reverse ? (
-    <SplitContainer horizontal={horizontal}>
-      {dynamicElement}
-      {fixedElement}
-    </SplitContainer>
-  ) : (
-    <SplitContainer horizontal={horizontal}>
-      {fixedElement}
-      {dynamicElement}
-    </SplitContainer>
-  );
-}

desktop/app/src/ui/components/Sidebar.tsx

@@ -21,7 +21,7 @@ import {
 import React from 'react';
 import FlexRow from './FlexRow';
 import {MoreOutlined} from '@ant-design/icons';
-import {theme} from '../../sandy-chrome/theme';
+import {theme} from 'flipper-plugin';
 
 const SidebarInteractiveContainer = styled(Interactive)({
   flex: 'none',

desktop/app/src/ui/components/Toolbar.tsx

@@ -13,8 +13,7 @@ import FlexRow from './FlexRow';
 import FlexBox from './FlexBox';
 import styled from '@emotion/styled';
 import {useIsSandy} from '../../sandy-chrome/SandyContext';
-import {theme} from '../../sandy-chrome/theme';
-import {Layout} from './Layout';
+import {theme, Layout} from 'flipper-plugin';
 
 /**
  * A toolbar.

desktop/app/src/ui/components/VBox.tsx

@@ -11,6 +11,7 @@ import styled from '@emotion/styled';
 import FlexColumn from './FlexColumn';
 
 /**
+ * @deprecated use `Layout.Container` from flipper-plugin instead
  * Container that applies a standardized bottom margin for vertical spacing
  */
 const VBox = styled(FlexColumn)({

desktop/app/src/ui/components/View.tsx

@@ -15,6 +15,10 @@ type Props = {
   maxHeight?: number;
 };
 
+/**
+ *
+ * @deprecated use `Layout.Container` from flipper-plugin instead
+ */
 const View = styled.div<Props>((props) => ({
   height: props.grow ? '100%' : 'auto',
   overflow: props.scrollable ? 'auto' : 'visible',

desktop/app/src/ui/components/colors.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {theme} from '../../sandy-chrome/theme';
+import {theme} from 'flipper-plugin';
 
 // Last updated: Jan 30 2016
 

desktop/app/src/ui/components/searchable/Searchable.tsx

@@ -21,8 +21,7 @@ import styled from '@emotion/styled';
 import {debounce} from 'lodash';
 import ToggleButton from '../ToggleSwitch';
 import React from 'react';
-import {Layout} from '../Layout';
-import {theme} from '../../../sandy-chrome/theme';
+import {Layout, theme} from 'flipper-plugin';
 
 const SearchBar = styled(Toolbar)({
   height: 42,

desktop/app/src/ui/index.tsx

@@ -178,7 +178,7 @@ export {default as CenteredView} from './components/CenteredView';
 export {default as Info} from './components/Info';
 export {default as Bordered} from './components/Bordered';
 export {default as AlternatingRows} from './components/AlternatingRows';
-export {Layout} from './components/Layout';
+export {Layout} from 'flipper-plugin';
 
 export {default as Scrollable} from './components/Scrollable';
 export * from './components/Highlight';

desktop/app/src/utils/useIsDarkMode.tsx

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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 {useStore} from '../../../app/src/utils/useStore';
+/**
+ * This hook returns whether dark mode is currently being used.
+ * Generally should be avoided in favor of using the above theme object,
+ * which will provide colors that reflect the theme
+ */
+export function useIsDarkMode(): boolean {
+  return useStore(
+    (state) => state.settingsState.enableSandy && state.settingsState.darkMode,
+  );
+}

desktop/flipper-plugin/src/index.ts

@@ -32,6 +32,9 @@ export {
   DefaultKeyboardAction,
 } from './plugin/MenuEntry';
 
+export {theme} from './ui/theme';
+export {Layout} from './ui/Layout';
+
 // It's not ideal that this exists in flipper-plugin sources directly,
 // but is the least pain for plugin authors.
 // Probably we should make sure that testing-library doesn't end up in our final Flipper bundle (which packages flipper-plugin)

desktop/flipper-plugin/src/ui/Layout.tsx

@@ -15,9 +15,7 @@ import {
   PaddingProps,
   Spacing,
   theme,
-} from '../../sandy-chrome/theme';
-import {useIsSandy} from '../../sandy-chrome/SandyContext';
-import {renderLayout} from './LegacyLayout';
+} from './theme';
 
 type ContainerProps = {
   children?: React.ReactNode;
@@ -148,9 +146,6 @@ function renderSplitLayout(
   direction: 'column' | 'row',
   grow: 1 | 2,
 ) {
-  // eslint-disable-next-line
-  const isSandy = useIsSandy();
-  if (!isSandy) return renderLayout(props, direction === 'row', grow === 1);
   const [child1, child2] = props.children;
   return (
     <SandySplitContainer {...props} flexDirection={direction} grow={grow}>

desktop/flipper-plugin/src/ui/theme.tsx

@@ -7,8 +7,6 @@
  * @format
  */
 
-import {useStore} from '../utils/useStore';
-
 // Exposes all the variables defined in themes/base.less:
 
 export const theme = {
@@ -43,17 +41,6 @@ export const theme = {
   } as const,
 } as const;
 
-/**
- * This hook returns whether dark mode is currently being used.
- * Generally should be avoided in favor of using the above theme object,
- * which will provide colors that reflect the theme
- */
-export function useIsDarkMode(): boolean {
-  return useStore(
-    (state) => state.settingsState.enableSandy && state.settingsState.darkMode,
-  );
-}
-
 export type Spacing = keyof typeof theme['space'] | number | undefined | true;
 
 export type PaddingProps = {