chore: don't use Container in react-shared, react-docs yet

packages/react-docs/src/components/doc_reference.tsx

@@ -1,7 +1,6 @@
 import {
     colors,
     constants as sharedConstants,
-    Container,
     EtherscanLinkSuffixes,
     HeaderSizes,
     Link,
@@ -216,12 +215,14 @@ export class DocReference extends React.Component<DocReferenceProps, DocReferenc
                             <div>{typeDefs}</div>
                         </div>
                     )}
-                <Container
+                <div
-                    width={'100%'}
+                    style={{
-                    height={'1px'}
+                        width: '100%',
-                    backgroundColor={colors.grey300}
+                        height: 1,
-                    marginTop={'32px'}
+                        backgroundColor: colors.grey300,
-                    marginBottom={'12px'}
+                        marginTop: 32,
+                        marginBottom: 12,
+                    }}
                 />
             </div>
         );

packages/react-shared/src/components/container.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-
-type StringOrNum = string | number;
-
-export type ContainerTag = 'div' | 'span';
-
-export interface ContainerProps {
-    marginTop?: StringOrNum;
-    marginBottom?: StringOrNum;
-    marginRight?: StringOrNum;
-    marginLeft?: StringOrNum;
-    padding?: StringOrNum;
-    paddingTop?: StringOrNum;
-    paddingBottom?: StringOrNum;
-    paddingRight?: StringOrNum;
-    paddingLeft?: StringOrNum;
-    backgroundColor?: string;
-    borderRadius?: StringOrNum;
-    maxWidth?: StringOrNum;
-    maxHeight?: StringOrNum;
-    width?: StringOrNum;
-    height?: StringOrNum;
-    minWidth?: StringOrNum;
-    minHeight?: StringOrNum;
-    isHidden?: boolean;
-    className?: string;
-    position?: 'absolute' | 'fixed' | 'relative' | 'unset';
-    display?: 'inline-block' | 'block' | 'inline-flex' | 'inline';
-    top?: string;
-    left?: string;
-    right?: string;
-    bottom?: string;
-    zIndex?: number;
-    Tag?: ContainerTag;
-    cursor?: string;
-    id?: string;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible';
-}
-
-export const Container: React.StatelessComponent<ContainerProps> = props => {
-    const { children, className, Tag, isHidden, id, onClick, ...style } = props;
-    const visibility = isHidden ? 'hidden' : undefined;
-    return (
-        <Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}>
-            {children}
-        </Tag>
-    );
-};
-
-Container.defaultProps = {
-    Tag: 'div',
-};
-
-Container.displayName = 'Container';

packages/react-shared/src/components/markdown_section.tsx

@@ -8,7 +8,6 @@ import { colors } from '../utils/colors';
 import { utils } from '../utils/utils';
 
 import { AnchorTitle } from './anchor_title';
-import { Container } from './container';
 import { Link } from './link';
 import { MarkdownCodeBlock } from './markdown_code_block';
 import { MarkdownLinkBlock } from './markdown_link_block';
@@ -57,7 +56,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                 onMouseOut={this._setAnchorVisibility.bind(this, false)}
             >
                 <ScrollElement name={id} style={{ paddingBottom: 20 }}>
-                    <Container className="clearfix" paddingTop="30px" paddingBottom="20px">
+                    <div className="clearfix" style={{ paddingTop: 30, paddingBottom: 20 }}>
                         <div className="col lg-col-8 md-col-8 sm-col-12">
                             <span style={{ color: colors.grey700 }}>
                                 <AnchorTitle
@@ -77,7 +76,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                                 </div>
                             )}
                         </div>
-                    </Container>
+                    </div>
                     <ReactMarkdown
                         source={markdownContent}
                         escapeHtml={false}
@@ -87,7 +86,14 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                             paragraph: MarkdownParagraphBlock,
                         }}
                     />
-                    <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'32px'} />
+                    <div
+                        style={{
+                            width: '100%',
+                            height: 1,
+                            backgroundColor: colors.grey300,
+                            marginTop: 32,
+                        }}
+                    />
                 </ScrollElement>
             </div>
         );

packages/react-shared/src/index.ts

@@ -5,7 +5,6 @@ export { MarkdownSection } from './components/markdown_section';
 export { NestedSidebarMenu } from './components/nested_sidebar_menu';
 export { SectionHeader } from './components/section_header';
 export { Link } from './components/link';
-export { Container } from './components/container';
 
 export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, ALink } from './types';
 

packages/react-shared/tsconfig.json

@@ -4,7 +4,6 @@
         "outDir": "lib",
         "rootDir": "src",
         "jsx": "react",
-        "strictNullChecks": false,
         "baseUrl": ".",
         "paths": {
             "*": ["node_modules/@types/*", "*"]