Standardize CodeBlock component

Summary:
Code blocks are quite common in Flipper, and a bit verbose in Ant, so let's standardize!

Changelog: Standardize CodeBlock component

Reviewed By: passy

Differential Revision: D28117560

fbshipit-source-id: 5a5538a49b59ef40c814d22055fac56e7598cbbb

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

@@ -10,7 +10,7 @@
 import styled from '@emotion/styled';
 
 /**
- * @deprecated, use <Typography.Paragraph><pre>.... instead.
+ * @deprecated, use CodeBlock from flipper-plugin instead
  */
 const CodeBlock = styled.div({
   fontFamily: 'monospace',

desktop/flipper-plugin/src/__tests__/api.node.tsx

@@ -28,6 +28,7 @@ test('Correct top level API exposed', () => {
   // Note, all `exposedAPIs` should be documented in `flipper-plugin.mdx`
   expect(exposedAPIs.sort()).toMatchInlineSnapshot(`
     Array [
+      "CodeBlock",
       "DataDescription",
       "DataFormatter",
       "DataInspector",

desktop/flipper-plugin/src/index.ts

@@ -59,6 +59,7 @@ export {Sidebar as _Sidebar} from './ui/Sidebar';
 export {DetailSidebar} from './ui/DetailSidebar';
 export {Toolbar} from './ui/Toolbar';
 export {MasterDetail} from './ui/MasterDetail';
+export {CodeBlock} from './ui/CodeBlock';
 
 export {renderReactRoot} from './utils/renderReactRoot';
 export {

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

@@ -0,0 +1,32 @@
+/**
+ * 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 {Typography} from 'antd';
+import styled from '@emotion/styled';
+import {ParagraphProps} from 'antd/lib/typography/Paragraph';
+
+export function CodeBlock({children, ...props}: ParagraphProps) {
+  return (
+    <StyledParagrah {...props}>
+      <pre>{children}</pre>
+    </StyledParagrah>
+  );
+}
+
+const StyledParagrah = styled(Typography.Paragraph)({
+  padding: 0,
+  fontSize: '9pt',
+  '&.ant-typography': {
+    margin: 0,
+  },
+  '& pre': {
+    margin: 0,
+  },
+});

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

@@ -78,7 +78,7 @@ const StyledCollapse = styled(Collapse)({
       padding: `5px 0px`,
       left: 8,
       fontSize: '10px',
-      fontWeight: 'bold',
+      fontWeight: theme.bold,
     },
   },
   '& > .ant-collapse-item': {

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

@@ -190,13 +190,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
         minHeight={minHeight}
         maxHeight={maxHeight}
         height={
-          !horizontal
-            ? onResize
-              ? height
-              : this.state.height
-            : gutter
-            ? undefined
-            : '100%'
+          !horizontal ? (onResize ? height : this.state.height) : undefined
         }
         resizable={resizable}
         onResize={this.onResize}

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

@@ -45,9 +45,14 @@ export const theme = {
     fontFamily: 'SF Mono,Monaco,Andale Mono,monospace',
     fontSize: '12px',
   } as const,
+  bold: 600,
 } as const;
 
-export type Spacing = keyof typeof theme['space'] | number | undefined | true;
+export type Spacing =
+  | keyof typeof theme['space']
+  | number
+  | undefined
+  | boolean;
 
 export type PaddingProps = {
   padv?: Spacing;
@@ -72,7 +77,7 @@ export function normalizePadding({
 export function normalizeSpace(spacing: Spacing, defaultSpace: number): number {
   return spacing === true
     ? defaultSpace
-    : spacing === undefined
+    : spacing === undefined || spacing === false
     ? 0
     : typeof spacing === 'string'
     ? theme.space[spacing]

docs/extending/flipper-plugin.mdx

@@ -873,6 +873,10 @@ The following additional properties are supported:
 
 A horizontal panel to organize buttons and alike. Basically a `Layout.Horizontal` with a border, padding, gap and wrapping enabled.
 
+### CodeBlock
+
+A preformatted paragraph that supports wrapping, preserves whitespace and uses monospace.
+
 ### DataList
 
 The DataList can be used to display a set of items efficiently, and where a single item can be selected.