Swapped Flex to homegrown component

No more element prop warnings!

frontend/components/Alert/Alert.js

@@ -1,6 +1,6 @@
 // @flow
 import React, { PropTypes } from 'react';
-import { Flex } from 'reflexbox';
+import Flex from 'components/Flex';
 import classNames from 'classnames/bind';
 import styles from './Alert.scss';
 

frontend/components/DocumentViews/DocumentViews.js

@@ -5,7 +5,7 @@ import Popover from 'components/Popover';
 import styled from 'styled-components';
 import DocumentViewers from './components/DocumentViewers';
 import DocumentViewersStore from './DocumentViewersStore';
-import { Flex } from 'reflexbox';
+import Flex from 'components/Flex';
 
 const Container = styled(Flex)`
   font-size: 13px;

frontend/components/DocumentViews/components/DocumentViewers/DocumentViewers.js

@@ -1,6 +1,6 @@
 // @flow
 import React, { Component } from 'react';
-import { Flex } from 'reflexbox';
+import Flex from 'components/Flex';
 import styled from 'styled-components';
 import map from 'lodash/map';
 import Avatar from 'components/Avatar';

frontend/components/Flex/Flex.js

@@ -0,0 +1,64 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+
+type JustifyValues =
+  | 'center'
+  | 'space-around'
+  | 'space-between'
+  | 'flex-start'
+  | 'flex-end';
+
+type AlignValues =
+  | 'stretch'
+  | 'center'
+  | 'baseline'
+  | 'flex-start'
+  | 'flex-end';
+
+type Props = {
+  column?: ?boolean,
+  align?: AlignValues,
+  justify?: JustifyValues,
+  auto?: ?boolean,
+  className?: string,
+  children?: React.Element<any>,
+};
+
+const Flex = (props: Props) => {
+  const { children, ...restProps } = props;
+  return <Container {...restProps}>{children}</Container>;
+};
+
+const Container = styled.div`
+  display: flex;
+  flex: ${({ auto }) => (auto ? '1 1 auto' : 'initial')};
+  flex-direction: ${({ column }) => (column ? 'column' : 'row')};
+  align-items: ${({ align }) => align};
+  justify-content: ${({ justify }) => justify};
+`;
+
+export default Flex;
+
+// flex: React.PropTypes.bool,
+//     wrap: React.PropTypes.bool,
+//     flexColumn: React.PropTypes.bool,
+//     column: React.PropTypes.bool,
+//     align: React.PropTypes.oneOf([
+//       'stretch',
+//       'center',
+//       'baseline',
+//       'flex-start',
+//       'flex-end'
+//     ]),
+//     justify: React.PropTypes.oneOf([
+//       'center',
+//       'space-around',
+//       'space-between',
+//       'flex-start',
+//       'flex-end'
+//     ]),
+//     flexAuto: React.PropTypes.bool,
+//     auto: React.PropTypes.bool,
+//     flexNone: React.PropTypes.bool,
+//     order: React.PropTypes.number,

frontend/components/Flex/index.js

@@ -0,0 +1,3 @@
+// @flow
+import Flex from './Flex';
+export default Flex;

frontend/components/Input/Input.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import { Flex } from 'reflexbox';
+import Flex from 'components/Flex';
 import { size } from 'styles/constants';
 
 const RealTextarea = styled.textarea`

frontend/components/Layout/Layout.js

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import { observer, inject } from 'mobx-react';
 import _ from 'lodash';
 import keydown from 'react-keydown';
-import { Flex } from 'reflexbox';
+import Flex from 'components/Flex';
 import { textColor } from 'styles/constants.scss';
 
 import DropdownMenu, { MenuItem } from 'components/DropdownMenu';

frontend/components/Layout/components/SidebarCollection/SidebarCollection.js

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import { Flex } from 'reflexbox';
+import Flex from 'components/Flex';
 import styled from 'styled-components';
 
 import SidebarLink from '../SidebarLink';

frontend/components/Layout/components/SidebarCollectionList/SidebarCollectionList.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { observer, inject } from 'mobx-react';
-import { Flex } from 'reflexbox';
+import Flex from 'components/Flex';
 import styled from 'styled-components';
 
 import SidebarLink from '../SidebarLink';

frontend/components/Layout/components/SidebarLink/SidebarLink.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { Flex } from 'reflexbox';
+import Flex from 'components/Flex';
 import styled from 'styled-components';
 
 const activeStyle = {

frontend/components/PreviewLoading/PreviewLoading.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import styled, { keyframes } from 'styled-components';
-import { Flex } from 'reflexbox';
+import Flex from 'components/Flex';
 
 import { randomInteger } from 'utils/random';
 

frontend/components/PublishingInfo/PublishingInfo.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import moment from 'moment';
 import styled from 'styled-components';
 import type { User } from 'types';
-import { Flex } from 'reflexbox';
+import Flex from 'components/Flex';
 
 const Container = styled(Flex)`
   justify-content: space-between;

frontend/index.js

@@ -8,7 +8,7 @@ import {
   Route,
   Redirect,
 } from 'react-router-dom';
-import { Flex } from 'reflexbox';
+import Flex from 'components/Flex';
 
 import stores from 'stores';
 import DocumentsStore from 'stores/DocumentsStore';

frontend/scenes/Document/Document.js

@@ -4,7 +4,7 @@ import get from 'lodash/get';
 import styled from 'styled-components';
 import { observer, inject } from 'mobx-react';
 import { withRouter, Prompt } from 'react-router';
-import { Flex } from 'reflexbox';
+import Flex from 'components/Flex';
 
 import Document from 'models/Document';
 import UiStore from 'stores/UiStore';

frontend/scenes/Home/Home.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { observer, inject } from 'mobx-react';
 import { Redirect } from 'react-router';
-import { Flex } from 'reflexbox';
+import Flex from 'components/Flex';
 import styled from 'styled-components';
 
 import AuthStore from 'stores/AuthStore';

frontend/scenes/Search/Search.js

@@ -3,7 +3,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { observer } from 'mobx-react';
 import _ from 'lodash';
-import { Flex } from 'reflexbox';
+import Flex from 'components/Flex';
 import { withRouter } from 'react-router';
 import { searchUrl } from 'utils/routeHelpers';
 import styled from 'styled-components';

frontend/scenes/Search/components/SearchField/SearchField.js

@@ -1,6 +1,6 @@
 // @flow
 import React, { Component } from 'react';
-import { Flex } from 'reflexbox';
+import Flex from 'components/Flex';
 import styled from 'styled-components';
 import searchImg from 'assets/icons/search.svg';
 

frontend/scenes/Settings/Settings.js

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Flex } from 'reflexbox';
+import Flex from 'components/Flex';
 
 import ApiKeyRow from './components/ApiKeyRow';
 import styles from './Settings.scss';

package.json

@@ -146,7 +146,6 @@
     "react-router-dom": "^4.1.1",
     "redis": "^2.6.2",
     "redis-lock": "^0.1.0",
-    "reflexbox": "^2.2.3",
     "rimraf": "^2.5.4",
     "safestart": "1.1.0",
     "sass-loader": "4.0.0",