Merge pull request #108 from jorilallo/jori/component-cleanup

Component cleanup

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/CenteredContent/CenteredContent.js

@@ -4,8 +4,6 @@ import styled from 'styled-components';
 
 type Props = {
   children?: React.Element<any>,
-  style?: Object,
-  maxWidth?: string,
 };
 
 const Container = styled.div`
@@ -13,20 +11,17 @@ const Container = styled.div`
   margin: 40px 20px;
 `;
 
-const CenteredContent = ({
+const Content = styled.div`
-  children,
+  max-width: 740px;
-  maxWidth = '740px',
+  margin: 0 auto;
-  style,
+`;
-  ...rest
-}: Props) => {
-  const styles = {
-    maxWidth,
-    ...style,
-  };
 
+const CenteredContent = ({ children, ...rest }: Props) => {
   return (
-    <Container style={styles} {...rest}>
+    <Container {...rest}>
-      {children}
+      <Content>
+        {children}
+      </Content>
     </Container>
   );
 };

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,41 @@
+// @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;

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';
 
@@ -11,7 +11,7 @@ const randomValues = Array.from(
   () => `${randomInteger(85, 100)}%`
 );
 
-export default () => {
+export default (props: {}) => {
   return (
     <ReactCSSTransitionGroup
       transitionName="fadeIn"
@@ -22,7 +22,7 @@ export default () => {
       transitionEnterTimeout={0}
       transitionLeaveTimeout={0}
     >
-      <Flex column auto>
+      <Flex column auto {...props}>
         <Mask style={{ width: randomValues[0] }} header />
         <Mask style={{ width: randomValues[1] }} />
         <Mask style={{ width: randomValues[2] }} />

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';
@@ -137,7 +137,7 @@ type Props = {
         {this.state.isLoading && <LoadingIndicator />}
         {isFetching &&
           <CenteredContent>
-            <PreviewLoading />
+            <LoadingState />
           </CenteredContent>}
         {!isFetching &&
           this.document &&
@@ -208,6 +208,10 @@ const Container = styled(Flex)`
   width: 100%;
 `;
 
+const LoadingState = styled(PreviewLoading)`
+  margin: 80px 20px;
+`;
+
 const PagePadding = styled(Flex)`
   padding: 80px 20px;
   position: relative;

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",