From c9d6d4bfb2b8c63aa14b187031be7b7834a4f249 Mon Sep 17 00:00:00 2001 From: Jori Lallo Date: Mon, 1 May 2017 22:01:50 -0700 Subject: [PATCH] Remove Rebass --- frontend/components/Layout/Layout.js | 14 ++- .../PublishingInfo/PublishingInfo.js | 32 +++--- frontend/components/Switch.js | 69 ----------- frontend/scenes/Application.js | 34 ------ frontend/scenes/DocumentEdit/DocumentEdit.js | 3 +- .../components/Sidebar/Sidebar.js | 2 - frontend/scenes/Settings/Settings.js | 107 ++++++++++++++---- package.json | 1 - yarn.lock | 19 ---- 9 files changed, 115 insertions(+), 166 deletions(-) delete mode 100644 frontend/components/Switch.js diff --git a/frontend/components/Layout/Layout.js b/frontend/components/Layout/Layout.js index 3b1f975d3..8238d40f1 100644 --- a/frontend/components/Layout/Layout.js +++ b/frontend/components/Layout/Layout.js @@ -1,6 +1,7 @@ import React from 'react'; import { browserHistory, Link } from 'react-router'; import Helmet from 'react-helmet'; +import styled from 'styled-components'; import { observer, inject } from 'mobx-react'; import keydown from 'react-keydown'; import _ from 'lodash'; @@ -9,7 +10,6 @@ import DropdownMenu, { MenuItem } from 'components/DropdownMenu'; import { Flex } from 'reflexbox'; import LoadingIndicator from 'components/LoadingIndicator'; import Alert from 'components/Alert'; -import { Avatar } from 'rebass'; import styles from './Layout.scss'; import classNames from 'classnames/bind'; @@ -87,11 +87,7 @@ class Layout extends React.Component { /> } - - } - > + }> Settings Keyboard shortcuts @@ -112,4 +108,10 @@ class Layout extends React.Component { } } +const Avatar = styled.img` + width: 24px; + height: 24px; + border-radius: 50%; +`; + export default Layout; diff --git a/frontend/components/PublishingInfo/PublishingInfo.js b/frontend/components/PublishingInfo/PublishingInfo.js index e79ff8ace..865aff6c0 100644 --- a/frontend/components/PublishingInfo/PublishingInfo.js +++ b/frontend/components/PublishingInfo/PublishingInfo.js @@ -1,7 +1,7 @@ import React, { PropTypes } from 'react'; import moment from 'moment'; +import styled from 'styled-components'; -import { Avatar } from 'rebass'; import { Flex } from 'reflexbox'; import styles from './PublishingInfo.scss'; @@ -19,18 +19,15 @@ class PublishingInfo extends React.Component { return ( - {this.props.collaborators.reverse().map(user => ( - - ))} + {this.props.collaborators + .reverse() + .map(user => ( + + ))} {this.props.createdBy.name} @@ -52,4 +49,13 @@ class PublishingInfo extends React.Component { } } +const Avatar = styled.img` + width: 26px; + height: 26px; + marginRight: '-12px', + + border-radius: 50%; + border: '2px solid #FFFFFF'; +`; + export default PublishingInfo; diff --git a/frontend/components/Switch.js b/frontend/components/Switch.js deleted file mode 100644 index 1c983e400..000000000 --- a/frontend/components/Switch.js +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; -import { Base } from 'rebass'; -import { observer } from 'mobx-react'; - -import { actionColor } from 'styles/constants.scss'; - -/** - * Binary toggle switch component - */ - -const Switch = observer(({ checked, ...props }) => { - const scale = '18'; - const colors = { - success: actionColor, - white: '#fff', - }; - const borderColor = actionColor; - - const color = checked ? colors.success : borderColor; - const transform = checked ? `translateX(${scale * 0.5}px)` : 'translateX(0)'; - - const sx = { - root: { - display: 'inline-flex', - width: scale * 1.5, - height: scale, - color, - backgroundColor: checked ? 'currentcolor' : null, - borderRadius: 99999, - boxShadow: 'inset 0 0 0 2px', - cursor: 'pointer', - }, - dot: { - width: scale, - height: scale, - transitionProperty: 'transform, color', - transitionDuration: '.1s', - transitionTimingFunction: 'ease-out', - transform, - boxShadow: 'inset 0 0 0 2px', - borderRadius: 99999, - color, - backgroundColor: colors.white, - }, - }; - - return ( - -
- - ); -}); - -Switch.propTypes = { - /** Sets the Switch to an active style */ - checked: React.PropTypes.bool, -}; - -Switch.contextTypes = { - rebass: React.PropTypes.object, -}; - -export default Switch; diff --git a/frontend/scenes/Application.js b/frontend/scenes/Application.js index d9043bbf3..6715daf24 100644 --- a/frontend/scenes/Application.js +++ b/frontend/scenes/Application.js @@ -3,44 +3,10 @@ import { observer } from 'mobx-react'; import Helmet from 'react-helmet'; @observer class Application extends React.Component { - static childContextTypes = { - rebass: React.PropTypes.object, - }; - static propTypes = { children: React.PropTypes.node.isRequired, }; - getChildContext() { - return { - rebass: { - colors: { - primary: '#171B35', - }, - // color: '#eee', - // backgroundColor: '#fff', - borderRadius: 2, - borderColor: '#eee', - - // fontSizes: [64, 48, 28, 20, 18, 16, 14], - bold: 500, - scale: [0, 8, 18, 36, 72], - Input: { - // borderBottom: '1px solid #eee', - }, - Button: { - // color: '#eee', - // backgroundColor: '#fff', - // border: '1px solid #ccc', - }, - ButtonOutline: { - color: '#000', - }, - InlineForm: {}, - }, - }; - } - render() { return (
diff --git a/frontend/scenes/DocumentEdit/DocumentEdit.js b/frontend/scenes/DocumentEdit/DocumentEdit.js index d7b4bfaf1..43e8fefe1 100644 --- a/frontend/scenes/DocumentEdit/DocumentEdit.js +++ b/frontend/scenes/DocumentEdit/DocumentEdit.js @@ -5,7 +5,6 @@ import keydown from 'react-keydown'; import DocumentEditStore, { DOCUMENT_EDIT_SETTINGS } from './DocumentEditStore'; -import Switch from 'components/Switch'; import Layout, { Title, HeaderAction, SaveAction } from 'components/Layout'; import { Flex } from 'reflexbox'; import AtlasPreviewLoading from 'components/AtlasPreviewLoading'; @@ -141,7 +140,7 @@ class DocumentEdit extends Component { }> - Preview + Toggle Preview Cancel diff --git a/frontend/scenes/DocumentScene/components/Sidebar/Sidebar.js b/frontend/scenes/DocumentScene/components/Sidebar/Sidebar.js index 611cfe314..46828f58c 100644 --- a/frontend/scenes/DocumentScene/components/Sidebar/Sidebar.js +++ b/frontend/scenes/DocumentScene/components/Sidebar/Sidebar.js @@ -13,8 +13,6 @@ const cx = classNames.bind(styles); import SidebarStore from './SidebarStore'; @observer class Sidebar extends React.Component { - static store; - static propTypes = { open: PropTypes.bool, onToggle: PropTypes.func.isRequired, diff --git a/frontend/scenes/Settings/Settings.js b/frontend/scenes/Settings/Settings.js index b2dbd0e02..f3d47ef40 100644 --- a/frontend/scenes/Settings/Settings.js +++ b/frontend/scenes/Settings/Settings.js @@ -1,8 +1,8 @@ +// @flow import React from 'react'; import { observer } from 'mobx-react'; - +import styled from 'styled-components'; import { Flex } from 'reflexbox'; -import { Input, ButtonOutline, InlineForm } from 'rebass'; import Layout, { Title } from 'components/Layout'; import CenteredContent from 'components/CenteredContent'; import SlackAuthLink from 'components/SlackAuthLink'; @@ -13,18 +13,13 @@ import styles from './Settings.scss'; import SettingsStore from './SettingsStore'; @observer class Settings extends React.Component { - static store; + store = SettingsStore; constructor(props) { super(props); this.store = new SettingsStore(); } - onKeyCreate = e => { - e.preventDefault(); - this.store.createApiKey(); - }; - render() { const title = ( @@ -73,30 +68,30 @@ import SettingsStore from './SettingsStore'; {this.store.apiKeys && <table className={styles.apiKeyTable}> - {this.store.apiKeys.map(key => ( - <ApiKeyRow - id={key.id} - name={key.name} - secret={key.secret} - onDelete={this.store.deleteApiKey} - /> - ))} + <tbody> + {this.store.apiKeys.map(key => ( + <ApiKeyRow + id={key.id} + key={key.id} + name={key.name} + secret={key.secret} + onDelete={this.store.deleteApiKey} + /> + ))} + </tbody> </table>} <div> <InlineForm placeholder="Token name" buttonLabel="Create token" - label="InlineForm" name="inline_form" value={this.store.keyName} onChange={this.store.setKeyName} - onClick={this.onKeyCreate} - style={{ width: '100%' }} + onSubmit={this.store.createApiKey} disabled={this.store.isFetching} /> </div> - </div> </CenteredContent> </Layout> @@ -104,4 +99,76 @@ import SettingsStore from './SettingsStore'; } } +const InlineForm = ({ + placeholder, + buttonLabel, + name, + value, + onChange, + onSubmit, + disabled, +}: { + placeholder: string, + buttonLabel: string, + name: string, + value: string, + onChange: Function, + onSubmit: Function, + disabled?: boolean, +}) => { + const handleSubmit = event => { + event.preventDefault(); + onSubmit(); + }; + return ( + <form onSubmit={handleSubmit}> + <Flex auto> + <TextInput + type="text" + placeholder={placeholder} + value={value || ''} + onChange={onChange} + /> + <Button type="submit" value={buttonLabel} /> + </Flex> + </form> + ); +}; + +const TextInput = styled.input` + display:flex; + flex: 1; + height:32px; + margin:0; + padding-left:8px; + padding-right:8px; + color:inherit; + background-color:rgba(255, 255, 255, .25); + border-width:1px; + border-style:solid; + border-color:rgba(0, 0, 0, .25); + border-radius:2px 0 0 2px; +`; + +const Button = styled.input` + box-shadow:inset 0 0 0 1px; + font-family:inherit; + font-size:14px; + line-height:16px; + min-height:32px; + text-decoration:none; + display:inline-block; + margin:0; + padding-top:8px; + padding-bottom:8px; + padding-left:16px; + padding-right:16px; + cursor:pointer; + border:0; + color:black; + background-color:transparent; + border-radius:0 2px 2px 0; + margin-left:-1px; +`; + export default Settings; diff --git a/package.json b/package.json index e7d686669..3d024f19f 100644 --- a/package.json +++ b/package.json @@ -138,7 +138,6 @@ "react-helmet": "3.1.0", "react-keydown": "^1.6.1", "react-router": "2.8.0", - "rebass": "^0.3.4", "redis": "^2.6.2", "redis-lock": "^0.1.0", "reflexbox": "^2.2.3", diff --git a/yarn.lock b/yarn.lock index 540cc9946..684c2631b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5973,10 +5973,6 @@ object-assign@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2" -object-assign@^4.1.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" - object-is@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6" @@ -6822,13 +6818,6 @@ react-addons-css-transition-group@15.3.2: version "15.3.2" resolved "https://registry.yarnpkg.com/react-addons-css-transition-group/-/react-addons-css-transition-group-15.3.2.tgz#d8fa52bec9bb61bdfde8b9e4652b80297cbff667" -react-addons-pure-render-mixin@^15.4.2: - version "15.5.2" - resolved "https://registry.yarnpkg.com/react-addons-pure-render-mixin/-/react-addons-pure-render-mixin-15.5.2.tgz#ebb846aeb2fd771336c232822923108f87d5bff2" - dependencies: - fbjs "^0.8.4" - object-assign "^4.1.0" - react-addons-test-utils@^15.3.1: version "15.3.2" resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.3.2.tgz#c09a44f583425a4a9c1b38444d7a6c3e6f0f41f6" @@ -7010,14 +6999,6 @@ readline2@^1.0.1: is-fullwidth-code-point "^1.0.0" mute-stream "0.0.5" -rebass@^0.3.4: - version "0.3.4" - resolved "https://registry.yarnpkg.com/rebass/-/rebass-0.3.4.tgz#88a16c6b6cf52e3b3e8d5a54fe42994bd04a4bf7" - dependencies: - classnames "^2.2.3" - object-assign "^4.1.1" - react-addons-pure-render-mixin "^15.4.2" - rechoir@^0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"