fix: use emotion's jsx in favor of createElement

Author: P0lip

src/BlockQuote.tsx

@@ -1,3 +1,5 @@
+/* @jsx jsx */
+
 import { jsx } from '@emotion/core';
 import { FunctionComponent } from 'react';
 
@@ -26,13 +28,10 @@ export const blockQuoteStyles = ({ isSelected }: IBlockQuoteProps) => {
   const theme = useTheme();
 
   return [
-    /* todo:
-      {
-         pl="@xl"
-         borderLeft="@sm"
-      }
-    */
     {
+      padding: '15px 25px',
+      borderLeft: '5px solid',
+      maxWidth: '80%',
       color: theme.blockQuote.fg,
       borderColor: theme.blockQuote.borderColor,
     },

src/Checkbox.tsx

@@ -1,7 +1,9 @@
+/* @jsx jsx */
+
 import { jsx } from '@emotion/core';
 import { Omit } from '@stoplight/types';
 import noop = require('lodash/noop');
-import { createElement, FunctionComponent, ReactEventHandler, useState } from 'react';
+import { FunctionComponent, ReactEventHandler, useState } from 'react';
 
 import { Box, Flex, IBox, Icon, useTheme } from './';
 
@@ -42,7 +44,7 @@ const CheckboxInner: FunctionComponent<ICheckboxInner> = props => {
       as: 'span',
       css,
     },
-    props.isChecked && [createElement(Icon, { icon: 'check' })]
+    props.isChecked && [jsx(Icon, { icon: 'check' })]
   );
 };
 
@@ -88,11 +90,11 @@ export const Checkbox: FunctionComponent<ICheckbox> = props => {
       css,
     },
     [
-      createElement(CheckboxInput, {
+      jsx(CheckboxInput, {
         id,
         onChange: handleChange,
       }),
-      createElement(CheckboxInner, {
+      jsx(CheckboxInner, {
         isChecked,
         isDisabled,
         height,

src/CodeEditor.tsx

@@ -4,8 +4,7 @@ import { css, jsx } from '@emotion/core';
 
 import noop = require('lodash/noop');
 import 'prismjs/components/';
-import * as React from 'react';
-import { CSSProperties, useCallback } from 'react';
+import { CSSProperties, forwardRef, useCallback } from 'react';
 import ReactSimpleCodeEditor from 'react-simple-code-editor';
 import { Box } from './Box';
 import { useTheme } from './theme';
@@ -56,7 +55,7 @@ export const supportedLanguages = {
 
 export type ReactSimpleCodeEditorRef = ReactSimpleCodeEditor;
 
-export const CodeEditor = React.forwardRef<ReactSimpleCodeEditorRef, ICodeEditor>((props, ref) => {
+export const CodeEditor = forwardRef<ReactSimpleCodeEditorRef, ICodeEditor>((props, ref) => {
   const { language, onChange = noop, style, value } = props;
   const highlightCodeCallback = useCallback(() => highlightCode(value, language), [value, language]);
   const editorCSS = [...codeEditorStyles()];
@@ -68,13 +67,13 @@ export const CodeEditor = React.forwardRef<ReactSimpleCodeEditorRef, ICodeEditor
       css: editorCSS,
     },
     [
-      <ReactSimpleCodeEditor
-        ref={ref}
-        value={value}
-        onValueChange={onChange}
-        highlight={highlightCodeCallback}
-        padding={10}
-      />,
+      jsx(ReactSimpleCodeEditor, {
+        ref,
+        value,
+        onValueChange: onChange,
+        highlight: highlightCodeCallback,
+        padding: 10,
+      }),
     ]
   );
 });

src/ContextMenu.tsx

@@ -1,4 +1,4 @@
-/** @jsx jsx */
+/* @jsx jsx */
 
 import { jsx } from '@emotion/core';
 import {

src/Input.tsx

@@ -1,3 +1,5 @@
+/* @jsx jsx */
+
 import { jsx } from '@emotion/core';
 import noop = require('lodash/noop');
 import { FunctionComponent, SyntheticEvent, useState } from 'react';

src/List.tsx

@@ -1,3 +1,5 @@
+/* @jsx jsx */
+
 import { jsx } from '@emotion/core';
 import { Omit } from '@stoplight/types';
 import { FunctionComponent } from 'react';

src/Mark.tsx

@@ -1,4 +1,6 @@
-import * as React from 'react';
+/* @jsx jsx */
+
+import { jsx } from '@emotion/core';
 
 import { Box, IBox } from './Box';
 

src/Menu.tsx

@@ -1,7 +1,7 @@
-/** @jsx jsx */
+/* @jsx jsx */
 
 import { css, jsx } from '@emotion/core';
-import { createElement, FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent, ReactNode } from 'react';
 
 import { Box } from './Box';
 import { Flex, IFlex } from './Flex';
@@ -21,7 +21,7 @@ export declare type RenderMenuFunc = (
 ) => ReactNode;
 
 const defaultRenderMenuItem: RenderMenuItemFunc = (item: IMenuItemProps, index: number) =>
-  createElement(MenuItem, { key: index, ...item });
+  jsx(MenuItem, { key: index, ...item });
 
 const defaultRenderMenu: RenderMenuFunc = ({ renderTrigger, ...rest }, menuItems, renderMenuItem) => {
   const theme = useTheme();

src/Table.tsx

@@ -2,7 +2,7 @@
 
 import { jsx } from '@emotion/core';
 import { Omit } from '@stoplight/types';
-import { createElement, FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 
 import { Box, IBox } from './Box';
 import { useTheme } from './theme';
@@ -19,7 +19,7 @@ export const Table: FunctionComponent<ITable> = props => {
       as: 'table',
       css,
     },
-    [createElement('tbody', null, children)]
+    [jsx('tbody', null, children)]
   );
 };
 
@@ -83,9 +83,7 @@ export const TableCell: FunctionComponent<ITableCell> = props => {
   });
 };
 
-export interface ITableCell
-  extends ITableCellProps,
-    Omit<IBox<HTMLTableDataCellElement>, 'as'> {}
+export interface ITableCell extends ITableCellProps, Omit<IBox<HTMLTableDataCellElement>, 'as'> {}
 
 export interface ITableCellProps extends ITableProps {
   as?: 'th' | 'td';

src/Textarea.tsx

@@ -1,3 +1,5 @@
+/* @jsx jsx */
+
 import { jsx } from '@emotion/core';
 import noop = require('lodash/noop');
 import { FunctionComponent, SyntheticEvent, useState } from 'react';
@@ -7,7 +9,7 @@ import { Box, IBox } from './Box';
 import { useTheme } from './theme';
 
 export const Textarea: FunctionComponent<ITextarea> = props => {
-  const { as = props.autosize ? AutosizeTextarea : 'textarea', autosize, onChange = noop, ...rest } = props;
+  const { autosize, as = autosize ? AutosizeTextarea : 'textarea', onChange = noop, ...rest } = props;
 
   const css = textareaStyles(props);
 

src/Toggle.tsx

@@ -1,7 +1,9 @@
+/* @jsx jsx */
+
 import { jsx } from '@emotion/core';
 import { Omit } from '@stoplight/types';
 import noop = require('lodash/noop');
-import { createElement, FunctionComponent, ReactEventHandler, SyntheticEvent, useState } from 'react';
+import { FunctionComponent, ReactEventHandler, SyntheticEvent, useState } from 'react';
 
 import { Box, Flex, IBox, useTheme } from './';
 import { Icon } from './Icon';
@@ -35,7 +37,7 @@ interface IToggleInnerProps {
 const ToggleInnerIcon: FunctionComponent<IToggleInnerProps> = props => {
   const css = toggleInnerIconStyles(props);
 
-  return createElement(Icon, {
+  return jsx(Icon, {
     icon: 'circle',
     css,
   });
@@ -60,7 +62,7 @@ const ToggleInner: FunctionComponent<IToggleInnerProps> = props => {
       as: 'span',
       css,
     },
-    [createElement(ToggleInnerIcon, props)]
+    [jsx(ToggleInnerIcon, props)]
   );
 };
 
@@ -104,11 +106,11 @@ export const Toggle: FunctionComponent<IToggle> = props => {
       css,
     },
     [
-      createElement(ToggleInput, {
+      jsx(ToggleInput, {
         id,
         onChange: handleChange,
       }),
-      createElement(ToggleInner, {
+      jsx(ToggleInner, {
         isChecked,
         isDisabled: !!disabled,
         height,