Unshare global types

Summary:
This diff adds `types` fields on the compiler config for every project. This way we can make sure that for example node types and packages are not available in flipper-ui-core. Without an explicit types field, all types would be shared between all packages, and implicitly included into the compilation of everything. For the same reason `types/index.d.ts` has been removed, we want to be intentional on which types are being used in which package.

This diff does most of the work, the next diff will fine tune the globals, and do some further cleanup.

As an alternative solution I first tried a `nohoist: **/node_modules/types/**` and make sure every package list explicitly the types used in package json, which works but is much more error prone, as for example two different react types versions in two packages will cause the most unreadable compiler error due to the types not being shared and not literally the same.

Reviewed By: lawrencelomax

Differential Revision: D33124441

fbshipit-source-id: c2b9d768f845ac28005d8331ef5fa1066c7e4cd7

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

@@ -9,6 +9,7 @@
 
 import React, {CSSProperties, forwardRef} from 'react';
 import styled from '@emotion/styled';
+import {Container} from './Container';
 import {
   normalizePadding,
   normalizeSpace,
@@ -17,77 +18,7 @@ import {
   theme,
 } from './theme';
 
-type ContainerProps = {
-  children?: React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
-  borderBottom?: boolean;
-  borderTop?: boolean;
-  borderRight?: boolean;
-  borderLeft?: boolean;
-  bordered?: boolean;
-  rounded?: boolean;
-  width?: number;
-  height?: number;
-  // grow to available space?
-  grow?: boolean;
-  // allow shrinking beyond minally needed size? Makes using ellipsis on children possible
-  shrink?: boolean;
-  /**
-   * Gab between individual items
-   */
-  gap?: Spacing;
-  /**
-   * If set, items will be aligned in the center, if false (the default) items will be stretched.
-   */
-  center?: boolean;
-} & PaddingProps;
-
-const Container = styled.div<ContainerProps>(
-  ({
-    bordered,
-    borderBottom,
-    borderLeft,
-    borderRight,
-    borderTop,
-    rounded,
-    width,
-    height,
-    grow,
-    shrink,
-    gap,
-    center,
-    ...rest
-  }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    flex:
-      grow && shrink
-        ? `1 1 0` // allow growing, and shrinking smaller than actual size
-        : grow
-        ? `1 0 auto` // allow grow, start at natural size
-        : shrink
-        ? `0 1 0` // allow shrinking smaller than natural size
-        : `0 0 auto`, // (default) use natural size, don't grow or shrink (in parent flex direction)
-    alignItems: center ? 'center' : 'stretch',
-    gap: normalizeSpace(gap, theme.space.small),
-
-    minWidth: shrink ? 0 : undefined,
-    maxWidth: shrink ? '100%' : undefined,
-    boxSizing: 'border-box',
-    width,
-    height,
-    padding: normalizePadding(rest),
-    borderRadius: rounded ? theme.containerBorderRadius : undefined,
-    borderStyle: 'solid',
-    borderColor: theme.dividerColor,
-    borderWidth: bordered
-      ? 1
-      : `${borderTop ? 1 : 0}px ${borderRight ? 1 : 0}px ${
-          borderBottom ? 1 : 0
-        }px ${borderLeft ? 1 : 0}px`,
-  }),
-);
+import {renderSplitLayout} from './renderSplitLayout';
 
 const Horizontal = styled(Container)({
   flexDirection: 'row',
@@ -139,7 +70,7 @@ const ScrollContainer = forwardRef(
   },
 );
 
-type SplitLayoutProps = {
+export type SplitLayoutProps = {
   /**
    * If set, items will be centered over the orthogonal direction, if false (the default) items will be stretched.
    */
@@ -174,63 +105,6 @@ type SplitVerticalResizableProps =
     }
   | {};
 
-const Empty = styled.div({width: 0, height: 0});
-
-function renderSplitLayout(
-  props: SplitLayoutProps,
-  direction: 'column' | 'row',
-  grow: 1 | 2,
-) {
-  let [child1, child2] = props.children;
-  // prevent some children to be accidentally omitted if the primary one is `null`
-  if (!child1) {
-    child1 = <Empty />;
-  }
-  if (!child2) {
-    child2 = <Empty />;
-  }
-  if ('resizable' in props && props.resizable) {
-    const {width, height, minHeight, minWidth, maxHeight, maxWidth} =
-      props as any;
-    const sizeProps =
-      direction === 'column'
-        ? ({
-            minHeight,
-            height: height ?? 300,
-            maxHeight,
-          } as const)
-        : ({
-            minWidth,
-            width: width ?? 300,
-            maxWidth,
-          } as const);
-    const Sidebar = require('./Sidebar').Sidebar;
-    if (grow === 2) {
-      child1 = (
-        <Sidebar
-          position={direction === 'column' ? 'top' : 'left'}
-          {...sizeProps}>
-          {child1}
-        </Sidebar>
-      );
-    } else {
-      child2 = (
-        <Sidebar
-          position={direction === 'column' ? 'bottom' : 'right'}
-          {...sizeProps}>
-          {child2}
-        </Sidebar>
-      );
-    }
-  }
-  return (
-    <SandySplitContainer {...props} flexDirection={direction} grow={grow}>
-      {child1}
-      {child2}
-    </SandySplitContainer>
-  );
-}
-
 /**
  * The Layout component divides all available screenspace over two components:
  * A fixed top (or left) component, and all remaining space to a bottom component.
@@ -263,29 +137,3 @@ export const Layout = {
 Object.keys(Layout).forEach((key) => {
   (Layout as any)[key].displayName = `Layout.${key}`;
 });
-
-const SandySplitContainer = styled.div<{
-  grow: 1 | 2;
-  gap?: Spacing;
-  center?: boolean;
-  flexDirection: CSSProperties['flexDirection'];
-}>((props) => ({
-  boxSizing: 'border-box',
-  display: 'flex',
-  flex: `1 1 0`,
-  flexDirection: props.flexDirection,
-  alignItems: props.center ? 'center' : 'stretch',
-  gap: normalizeSpace(props.gap, theme.space.small),
-  overflow: props.center ? undefined : 'hidden', // only use overflow hidden in container mode, to avoid weird resizing issues
-  '>:nth-child(1)': {
-    flex: props.grow === 1 ? splitGrowStyle : splitFixedStyle,
-    minWidth: props.grow === 1 ? 0 : undefined,
-  },
-  '>:nth-child(2)': {
-    flex: props.grow === 2 ? splitGrowStyle : splitFixedStyle,
-    minWidth: props.grow === 2 ? 0 : undefined,
-  },
-}));
-
-const splitFixedStyle = `0 0 auto`;
-const splitGrowStyle = `1 0 0`;