From 21c7cb93a2ede86fd5c814bb3f73d705b295a888 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Fri, 10 Nov 2017 13:42:33 -0800 Subject: [PATCH 1/5] Upgrade to React 16 --- app/components/DropToImport/DropToImport.js | 4 +- app/components/DropdownMenu/DropdownMenu.js | 76 ++++---- .../Editor/components/BlockInsert.js | 4 +- app/components/Editor/components/Code.js | 1 + .../Editor/components/Toolbar/Toolbar.js | 4 +- .../Layout/components/SidebarCollections.js | 2 +- .../Layout/components/SidebarLink.js | 2 +- .../LoadingListPlaceholder.js | 19 +- .../LoadingPlaceholder/ListPlaceholder.js | 18 +- .../LoadingPlaceholder/LoadingPlaceholder.js | 23 +-- app/index.js | 3 - .../LoadingPlaceholder/LoadingPlaceholder.js | 19 +- app/styles/transitions.css | 27 --- package.json | 18 +- {app => shared}/styles/prism.css | 0 yarn.lock | 176 ++++++------------ 16 files changed, 146 insertions(+), 250 deletions(-) delete mode 100644 app/styles/transitions.css rename {app => shared}/styles/prism.css (100%) diff --git a/app/components/DropToImport/DropToImport.js b/app/components/DropToImport/DropToImport.js index 34bb84cc..b78a6fe8 100644 --- a/app/components/DropToImport/DropToImport.js +++ b/app/components/DropToImport/DropToImport.js @@ -97,7 +97,9 @@ class DropToImport extends Component { 'documentId', 'collectionId', 'documents', - 'disabled' + 'disabled', + 'dropzoneRef', + 'menuOpen' ); if (this.props.disabled) return this.props.children; diff --git a/app/components/DropdownMenu/DropdownMenu.js b/app/components/DropdownMenu/DropdownMenu.js index e5304833..6e5f8697 100644 --- a/app/components/DropdownMenu/DropdownMenu.js +++ b/app/components/DropdownMenu/DropdownMenu.js @@ -4,7 +4,7 @@ import invariant from 'invariant'; import { observable } from 'mobx'; import { observer } from 'mobx-react'; import styled from 'styled-components'; -import Portal from 'react-portal'; +import { PortalWithState } from 'react-portal'; import Flex from 'shared/components/Flex'; import { color } from 'shared/styles/constants'; import { fadeAndScaleIn } from 'shared/styles/animations'; @@ -19,58 +19,54 @@ type Props = { @observer class DropdownMenu extends Component { props: Props; - actionRef: Object; - @observable open: boolean = false; @observable top: number; @observable left: number; @observable right: number; - handleClick = (ev: SyntheticEvent) => { - ev.preventDefault(); - ev.stopPropagation(); - const currentTarget = ev.currentTarget; - invariant(document.body, 'why you not here'); + handleOpen = (openPortal: SyntheticEvent => void) => { + return (ev: SyntheticMouseEvent) => { + ev.preventDefault(); + ev.stopPropagation(); + const currentTarget = ev.currentTarget; + invariant(document.body, 'why you not here'); - if (currentTarget instanceof HTMLDivElement) { - const bodyRect = document.body.getBoundingClientRect(); - const targetRect = currentTarget.getBoundingClientRect(); - this.open = true; - this.top = targetRect.bottom - bodyRect.top; - this.right = bodyRect.width - targetRect.left - targetRect.width; - if (this.props.onOpen) this.props.onOpen(); - } - }; - - handleClose = (ev: SyntheticEvent) => { - this.open = false; - if (this.props.onClose) this.props.onClose(); + if (currentTarget instanceof HTMLDivElement) { + const bodyRect = document.body.getBoundingClientRect(); + const targetRect = currentTarget.getBoundingClientRect(); + this.top = targetRect.bottom - bodyRect.top; + this.right = bodyRect.width - targetRect.left - targetRect.width; + openPortal(ev); + } + }; }; render() { return (
- - - - {this.props.children} - - + {({ closePortal, openPortal, portal }) => [ + , + portal( + + {this.props.children} + + ), + ]} +
); } diff --git a/app/components/Editor/components/BlockInsert.js b/app/components/Editor/components/BlockInsert.js index 475b9757..b021a47a 100644 --- a/app/components/Editor/components/BlockInsert.js +++ b/app/components/Editor/components/BlockInsert.js @@ -1,6 +1,6 @@ // @flow import React, { Component } from 'react'; -import Portal from 'react-portal'; +import { Portal } from 'react-portal'; import { findDOMNode, Node } from 'slate'; import { observable } from 'mobx'; import { observer } from 'mobx-react'; @@ -112,7 +112,7 @@ export default class BlockInsert extends Component { const style = { top: `${this.top}px`, left: `${this.left}px` }; return ( - + diff --git a/app/components/Editor/components/Code.js b/app/components/Editor/components/Code.js index e37455be..4268db32 100644 --- a/app/components/Editor/components/Code.js +++ b/app/components/Editor/components/Code.js @@ -4,6 +4,7 @@ import styled from 'styled-components'; import CopyButton from './CopyButton'; import { color } from 'shared/styles/constants'; import type { Props } from '../types'; +import 'shared/styles/prism.css'; export default function Code({ children, node, readOnly, attributes }: Props) { const language = node.data.get('language') || 'javascript'; diff --git a/app/components/Editor/components/Toolbar/Toolbar.js b/app/components/Editor/components/Toolbar/Toolbar.js index d34966d9..8d4eec4e 100644 --- a/app/components/Editor/components/Toolbar/Toolbar.js +++ b/app/components/Editor/components/Toolbar/Toolbar.js @@ -1,6 +1,6 @@ // @flow import React, { Component } from 'react'; -import Portal from 'react-portal'; +import { Portal } from 'react-portal'; import styled from 'styled-components'; import _ from 'lodash'; import type { State } from '../../types'; @@ -118,7 +118,7 @@ export default class Toolbar extends Component { }; return ( - + {link && { return ( - + @@ -32,10 +23,14 @@ export default (props: Object) => { - + ); }; +const Fade = styled.span` + animation: ${fadeIn} 150ms ease-in-out; +`; + const Item = styled(Flex)` padding: 18px 0; `; diff --git a/app/components/LoadingPlaceholder/ListPlaceholder.js b/app/components/LoadingPlaceholder/ListPlaceholder.js index 1eef8488..38dde227 100644 --- a/app/components/LoadingPlaceholder/ListPlaceholder.js +++ b/app/components/LoadingPlaceholder/ListPlaceholder.js @@ -1,8 +1,8 @@ // @flow import React from 'react'; import _ from 'lodash'; -import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; import styled from 'styled-components'; +import { fadeIn } from 'shared/styles/animations'; import Mask from './components/Mask'; import Flex from 'shared/components/Flex'; @@ -12,25 +12,21 @@ type Props = { const ListPlaceHolder = ({ count }: Props) => { return ( - + {_.times(count || 2, index => ( ))} - + ); }; +const Fade = styled.span` + animation: ${fadeIn} 150ms ease-in-out; +`; + const Item = styled(Flex)` padding: 18px 0; `; diff --git a/app/components/LoadingPlaceholder/LoadingPlaceholder.js b/app/components/LoadingPlaceholder/LoadingPlaceholder.js index 97d9f1a3..7bac4e2c 100644 --- a/app/components/LoadingPlaceholder/LoadingPlaceholder.js +++ b/app/components/LoadingPlaceholder/LoadingPlaceholder.js @@ -1,26 +1,23 @@ // @flow import React from 'react'; -import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; +import styled from 'styled-components'; +import { fadeIn } from 'shared/styles/animations'; import Mask from './components/Mask'; import Flex from 'shared/components/Flex'; -export default (props: Object) => { +export default function LoadingPlaceholder(props: Object) { return ( - + - + ); -}; +} + +const Fade = styled.span` + animation: ${fadeIn} 150ms ease-in-out; +`; diff --git a/app/index.js b/app/index.js index 5054d3fc..9fd10e91 100644 --- a/app/index.js +++ b/app/index.js @@ -16,9 +16,6 @@ import CollectionsStore from 'stores/CollectionsStore'; import CacheStore from 'stores/CacheStore'; import globalStyles from 'shared/styles/globals'; -import 'styles/transitions.css'; -import 'styles/prism.css'; - import Home from 'scenes/Home'; import Dashboard from 'scenes/Dashboard'; import Starred from 'scenes/Starred'; diff --git a/app/scenes/Document/components/LoadingPlaceholder/LoadingPlaceholder.js b/app/scenes/Document/components/LoadingPlaceholder/LoadingPlaceholder.js index 5930c7ea..e725e71d 100644 --- a/app/scenes/Document/components/LoadingPlaceholder/LoadingPlaceholder.js +++ b/app/scenes/Document/components/LoadingPlaceholder/LoadingPlaceholder.js @@ -1,8 +1,7 @@ // @flow import React from 'react'; -import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; import styled from 'styled-components'; -import { pulsate } from 'shared/styles/animations'; +import { fadeIn, pulsate } from 'shared/styles/animations'; import { color } from 'shared/styles/constants'; import Flex from 'shared/components/Flex'; @@ -15,25 +14,21 @@ const randomValues = Array.from( export default (props: Object) => { return ( - + - + ); }; +const Fade = styled.span` + animation: ${fadeIn} 150ms ease-in-out; +`; + const Mask = styled(Flex)` height: ${props => (props.header ? 28 : 18)}px; margin-bottom: ${props => (props.header ? 32 : 14)}px; diff --git a/app/styles/transitions.css b/app/styles/transitions.css deleted file mode 100644 index 7b0463fe..00000000 --- a/app/styles/transitions.css +++ /dev/null @@ -1,27 +0,0 @@ -.fadeIn-appear { - opacity: 0.01; -} - -.fadeIn-appear.fadeIn-appear-active { - opacity: 1; - transition: opacity 250ms ease-in; - transition-delay: 0.35s; -} - -.fadeIn-enter { - opacity: 0.01; -} - -.fadeIn-enter.fadeIn-enter-active { - opacity: 1; - transition: opacity 200ms ease-in; -} - -.fadeIn-leave { - opacity: 1; -} - -.fadeIn-leave.fadeIn-leave-active { - opacity: 0.01; - transition: opacity 200ms ease-in; -} diff --git a/package.json b/package.json index 53361d1a..08bc0354 100644 --- a/package.json +++ b/package.json @@ -127,15 +127,14 @@ "query-string": "^4.3.4", "randomstring": "1.1.5", "raw-loader": "^0.5.1", - "react": "^15.6.1", - "react-addons-css-transition-group": "15.3.2", - "react-dom": "^15.6.1", - "react-dropzone": "3.6.0", + "react": "^16.1.0", + "react-dom": "^16.1.0", + "react-dropzone": "4.2.1", "react-helmet": "^5.2.0", "react-keydown": "^1.7.3", - "react-medium-image-zoom": "^2.0.3", - "react-modal": "^2.2.1", - "react-portal": "^3.1.0", + "react-medium-image-zoom": "^3.0.2", + "react-modal": "^3.1.2", + "react-portal": "^4.0.0", "react-router-dom": "^4.1.1", "redis": "^2.6.2", "redis-lock": "^0.1.0", @@ -175,8 +174,7 @@ "koa-webpack-hot-middleware": "1.0.3", "lint-staged": "^3.4.0", "nodemon": "1.11.0", - "prettier": "1.3.1", - "react-addons-test-utils": "^15.3.1", - "react-test-renderer": "^15.3.1" + "prettier": "1.8.2", + "react-test-renderer": "^16.1.0" } } diff --git a/app/styles/prism.css b/shared/styles/prism.css similarity index 100% rename from app/styles/prism.css rename to shared/styles/prism.css diff --git a/yarn.lock b/yarn.lock index 2d9c6320..0f677451 100644 --- a/yarn.lock +++ b/yarn.lock @@ -294,10 +294,6 @@ ast-types@0.8.15: version "0.8.15" resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.8.15.tgz#8eef0827f04dff0ec8857ba925abe3fea6194e52" -ast-types@0.9.8: - version "0.9.8" - resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.8.tgz#6cb6a40beba31f49f20928e28439fc14a3dab078" - async-each@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d" @@ -362,14 +358,6 @@ aws4@^1.2.1: version "1.6.0" resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e" -babel-code-frame@6.22.0: - version "6.22.0" - resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4" - dependencies: - chalk "^1.1.0" - esutils "^2.0.2" - js-tokens "^3.0.0" - babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0, babel-code-frame@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b" @@ -1006,10 +994,6 @@ babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.23.0, babel-types@^6.24 lodash "^4.17.4" to-fast-properties "^1.0.3" -babylon@7.0.0-beta.8: - version "7.0.0-beta.8" - resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.8.tgz#2bdc5ae366041442c27e068cce6f0d7c06ea9949" - babylon@^6.17.0, babylon@^6.17.4, babylon@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3" @@ -1420,7 +1404,7 @@ chainsaw@~0.1.0: dependencies: traverse ">=0.3.0 <0.4" -chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3: +chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98" dependencies: @@ -2907,7 +2891,7 @@ estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13" -esutils@2.0.2, esutils@^2.0.2: +esutils@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b" @@ -3096,6 +3080,18 @@ fbemitter@^2.1.1: dependencies: fbjs "^0.8.4" +fbjs@^0.8.16: + version "0.8.16" + resolved "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db" + dependencies: + core-js "^1.0.0" + isomorphic-fetch "^2.1.1" + loose-envify "^1.0.0" + object-assign "^4.1.0" + promise "^7.1.1" + setimmediate "^1.0.5" + ua-parser-js "^0.7.9" + fbjs@^0.8.4, fbjs@^0.8.5, fbjs@^0.8.9: version "0.8.14" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.14.tgz#d1dbe2be254c35a91e09f31f9cd50a40b2a0ed1c" @@ -3257,10 +3253,6 @@ flow-bin@^0.49.1: version "0.49.1" resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.49.1.tgz#c9e456b3173a7535a4ffaf28956352c63bb8e3e9" -flow-parser@0.45.0: - version "0.45.0" - resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.45.0.tgz#aa29d4ae27f06aa02817772bba0fcbefef7e62f0" - flow-typed@^2.1.2: version "2.1.5" resolved "https://registry.yarnpkg.com/flow-typed/-/flow-typed-2.1.5.tgz#c96912807a286357340042783c9369360f384bbd" @@ -3443,10 +3435,6 @@ get-document@1: version "1.0.0" resolved "https://registry.yarnpkg.com/get-document/-/get-document-1.0.0.tgz#4821bce66f1c24cb0331602be6cb6b12c4f01c4b" -get-stdin@5.0.1: - version "5.0.1" - resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-5.0.1.tgz#122e161591e21ff4c52530305693f20e6393a398" - get-stdin@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe" @@ -3512,17 +3500,6 @@ glob2base@^0.0.12: dependencies: find-index "^0.1.1" -glob@7.1.1: - version "7.1.1" - resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8" - dependencies: - fs.realpath "^1.0.0" - inflight "^1.0.4" - inherits "2" - minimatch "^3.0.2" - once "^1.3.0" - path-is-absolute "^1.0.0" - glob@^4.3.1: version "4.5.3" resolved "https://registry.yarnpkg.com/glob/-/glob-4.5.3.tgz#c6cb73d3226c1efef04de3c56d012f03377ee15f" @@ -4717,13 +4694,6 @@ jest-jasmine2@^20.0.4: once "^1.4.0" p-map "^1.1.1" -jest-matcher-utils@^19.0.0: - version "19.0.0" - resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-19.0.0.tgz#5ecd9b63565d2b001f61fbf7ec4c7f537964564d" - dependencies: - chalk "^1.1.3" - pretty-format "^19.0.0" - jest-matcher-utils@^20.0.3: version "20.0.3" resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-20.0.3.tgz#b3a6b8e37ca577803b0832a98b164f44b7815612" @@ -4813,15 +4783,6 @@ jest-util@^20.0.3: leven "^2.1.0" mkdirp "^0.5.1" -jest-validate@19.0.0: - version "19.0.0" - resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-19.0.0.tgz#8c6318a20ecfeaba0ba5378bfbb8277abded4173" - dependencies: - chalk "^1.1.1" - jest-matcher-utils "^19.0.0" - leven "^2.0.0" - pretty-format "^19.0.0" - jest-validate@^20.0.3: version "20.0.3" resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-20.0.3.tgz#d0cfd1de4f579f298484925c280f8f1d94ec3cab" @@ -5207,7 +5168,7 @@ lcid@^1.0.0: dependencies: invert-kv "^1.0.0" -leven@^2.0.0, leven@^2.1.0: +leven@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/leven/-/leven-2.1.0.tgz#c2e7a9f772094dee9d34202ae8acce4687875580" @@ -5948,7 +5909,7 @@ minimist@0.0.8, minimist@~0.0.1: version "0.0.8" resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d" -minimist@1.2.0, minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0: +minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" @@ -7083,20 +7044,9 @@ preserve@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" -prettier@1.3.1: - version "1.3.1" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.3.1.tgz#fa0ea84b45ac0ba6de6a1e4cecdcff900d563151" - dependencies: - ast-types "0.9.8" - babel-code-frame "6.22.0" - babylon "7.0.0-beta.8" - chalk "1.1.3" - esutils "2.0.2" - flow-parser "0.45.0" - get-stdin "5.0.1" - glob "7.1.1" - jest-validate "19.0.0" - minimist "1.2.0" +prettier@1.8.2: + version "1.8.2" + resolved "https://registry.npmjs.org/prettier/-/prettier-1.8.2.tgz#bff83e7fd573933c607875e5ba3abbdffb96aeb8" pretty-error@^2.0.0: version "2.1.1" @@ -7105,12 +7055,6 @@ pretty-error@^2.0.0: renderkid "^2.0.1" utila "~0.4" -pretty-format@^19.0.0: - version "19.0.0" - resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-19.0.0.tgz#56530d32acb98a3fa4851c4e2b9d37b420684c84" - dependencies: - ansi-styles "^3.0.0" - pretty-format@^20.0.3: version "20.0.3" resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-20.0.3.tgz#020e350a560a1fe1a98dc3beb6ccffb386de8b14" @@ -7161,6 +7105,14 @@ prop-types@>=15.5.6, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8 fbjs "^0.8.9" loose-envify "^1.3.1" +prop-types@^15.5.7, prop-types@^15.6.0: + version "15.6.0" + resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" + dependencies: + fbjs "^0.8.16" + loose-envify "^1.3.1" + object-assign "^4.1.1" + proto-list@~1.2.1: version "1.2.4" resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849" @@ -7307,14 +7259,6 @@ rc@^1.0.1, rc@^1.1.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -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-test-utils@^15.3.1: - version "15.6.0" - resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.6.0.tgz#062d36117fe8d18f3ba5e06eb33383b0b85ea5b9" - react-create-component-from-tag-prop@^1.2.1: version "1.3.1" resolved "https://registry.npmjs.org/react-create-component-from-tag-prop/-/react-create-component-from-tag-prop-1.3.1.tgz#5389407d99f88ba2b36351780a6094470b44a7c7" @@ -7326,24 +7270,21 @@ react-deep-force-update@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.1.1.tgz#bcd31478027b64b3339f108921ab520b4313dc2c" -react-dom-factories@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/react-dom-factories/-/react-dom-factories-1.0.1.tgz#c50692ac5ff1adb39d86dfe6dbe3485dacf58455" - -react-dom@^15.6.1: - version "15.6.1" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.1.tgz#2cb0ed4191038e53c209eb3a79a23e2a4cf99470" +react-dom@^16.1.0: + version "16.1.0" + resolved "https://registry.npmjs.org/react-dom/-/react-dom-16.1.0.tgz#ab6fd2a285096f388aeba51919a573d06c9bdde4" dependencies: - fbjs "^0.8.9" + fbjs "^0.8.16" loose-envify "^1.1.0" - object-assign "^4.1.0" - prop-types "^15.5.10" + object-assign "^4.1.1" + prop-types "^15.6.0" -react-dropzone@3.6.0: - version "3.6.0" - resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-3.6.0.tgz#31e9cdfc0db921525dae0b82115cf4dc764c680a" +react-dropzone@4.2.1: + version "4.2.1" + resolved "https://registry.npmjs.org/react-dropzone/-/react-dropzone-4.2.1.tgz#695e80bd0b065f1181e69f2d0f6d1d5cc72664c9" dependencies: attr-accept "^1.0.3" + prop-types "^15.5.7" react-helmet@^5.2.0: version "5.2.0" @@ -7360,17 +7301,16 @@ react-keydown@^1.7.3: dependencies: core-js "^2.5.0" -react-medium-image-zoom@^2.0.3: - version "2.0.6" - resolved "https://registry.yarnpkg.com/react-medium-image-zoom/-/react-medium-image-zoom-2.0.6.tgz#9c6c6b38f2bae4f9f5fd7f8adf43c2b816e13660" +react-medium-image-zoom@^3.0.2: + version "3.0.2" + resolved "https://registry.npmjs.org/react-medium-image-zoom/-/react-medium-image-zoom-3.0.2.tgz#13bb39a2aa2c4d63821fd018f8b4a93cd3316cd4" -react-modal@^2.2.1: - version "2.2.4" - resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-2.2.4.tgz#a32483c3555bd7677f09bca65d82f51da3abcbc0" +react-modal@^3.1.2: + version "3.1.2" + resolved "https://registry.npmjs.org/react-modal/-/react-modal-3.1.2.tgz#6e1fd656315d6fc62a1edda2b5aecc9752ac6bca" dependencies: exenv "^1.2.0" prop-types "^15.5.10" - react-dom-factories "^1.0.0" react-portal@^3.1.0: version "3.1.0" @@ -7378,6 +7318,12 @@ react-portal@^3.1.0: dependencies: prop-types "^15.5.8" +react-portal@^4.0.0: + version "4.0.0" + resolved "https://registry.npmjs.org/react-portal/-/react-portal-4.0.0.tgz#d327b495dc72a305e8a3e351f212a2d94677f913" + dependencies: + prop-types "^15.5.8" + react-proxy@^1.1.7: version "1.1.8" resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a" @@ -7415,12 +7361,13 @@ react-side-effect@^1.1.0: exenv "^1.2.1" shallowequal "^1.0.1" -react-test-renderer@^15.3.1: - version "15.6.1" - resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-15.6.1.tgz#026f4a5bb5552661fd2cc4bbcd0d4bc8a35ebf7e" +react-test-renderer@^16.1.0: + version "16.1.0" + resolved "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.1.0.tgz#33a1d3ce896311e0dd1547649b1456ffa7fda415" dependencies: - fbjs "^0.8.9" - object-assign "^4.1.0" + fbjs "^0.8.16" + object-assign "^4.1.1" + prop-types "^15.6.0" react-transform-catch-errors@^1.0.2: version "1.0.2" @@ -7443,15 +7390,14 @@ react@^15.5.4: object-assign "^4.1.0" prop-types "^15.5.10" -react@^15.6.1: - version "15.6.1" - resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df" +react@^16.1.0: + version "16.1.0" + resolved "https://registry.npmjs.org/react/-/react-16.1.0.tgz#1c2bdac3c17fe7ee9282fa35aca6cc36387903e1" dependencies: - create-react-class "^15.6.0" - fbjs "^0.8.9" + fbjs "^0.8.16" loose-envify "^1.1.0" - object-assign "^4.1.0" - prop-types "^15.5.10" + object-assign "^4.1.1" + prop-types "^15.6.0" read-all-stream@^3.0.0: version "3.1.0" From 8056a784f6824258de0085660a8f14f712bbe37a Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Fri, 10 Nov 2017 13:53:51 -0800 Subject: [PATCH 2/5] Minor fixes --- app/components/Editor/components/Code.js | 1 - app/components/Editor/components/Heading.js | 3 +-- app/index.js | 1 + 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/app/components/Editor/components/Code.js b/app/components/Editor/components/Code.js index 4268db32..e37455be 100644 --- a/app/components/Editor/components/Code.js +++ b/app/components/Editor/components/Code.js @@ -4,7 +4,6 @@ import styled from 'styled-components'; import CopyButton from './CopyButton'; import { color } from 'shared/styles/constants'; import type { Props } from '../types'; -import 'shared/styles/prism.css'; export default function Code({ children, node, readOnly, attributes }: Props) { const language = node.data.get('language') || 'javascript'; diff --git a/app/components/Editor/components/Heading.js b/app/components/Editor/components/Heading.js index 72e97e0a..543cdd12 100644 --- a/app/components/Editor/components/Heading.js +++ b/app/components/Editor/components/Heading.js @@ -27,7 +27,6 @@ function Heading(props: Props) { children, component = 'h1', attributes, - ...rest } = props; const parentIsDocument = parent instanceof Document; const firstHeading = parentIsDocument && parent.nodes.first() === node; @@ -41,7 +40,7 @@ function Heading(props: Props) { emoji && title.match(new RegExp(`^${emoji}\\s`)); return ( - + {children} diff --git a/app/index.js b/app/index.js index 9fd10e91..3c2bd5df 100644 --- a/app/index.js +++ b/app/index.js @@ -15,6 +15,7 @@ import DocumentsStore from 'stores/DocumentsStore'; import CollectionsStore from 'stores/CollectionsStore'; import CacheStore from 'stores/CacheStore'; import globalStyles from 'shared/styles/globals'; +import 'shared/styles/prism.css'; import Home from 'scenes/Home'; import Dashboard from 'scenes/Dashboard'; From c737b613e4e1e2814e1ad24a6638cb1f4ee7d104 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Fri, 10 Nov 2017 14:11:02 -0800 Subject: [PATCH 3/5] Remove another warning --- app/components/Layout/components/SidebarLink.js | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/app/components/Layout/components/SidebarLink.js b/app/components/Layout/components/SidebarLink.js index 7757462f..ca7c5773 100644 --- a/app/components/Layout/components/SidebarLink.js +++ b/app/components/Layout/components/SidebarLink.js @@ -41,14 +41,6 @@ const StyledNavLink = styled(NavLink)` &:hover { color: ${color.text}; } - - &.active { - ${IconWrapper} & { - svg { - fill: ${({ iconColor }) => (iconColor ? iconColor : activeStyle.color)} - } - } - } `; const StyledDiv = StyledNavLink.withComponent('div'); @@ -86,16 +78,17 @@ type Props = { }; render() { - const { icon, children, expandedContent, ...rest } = this.props; - const Component = rest.to ? StyledNavLink : StyledDiv; + const { icon, children, onClick, to, expandedContent } = this.props; + const Component = to ? StyledNavLink : StyledDiv; return ( {icon && {icon}} {expandedContent && From ab13f51d5d0747f78d3567090f58a8000006aecc Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Fri, 10 Nov 2017 14:14:30 -0800 Subject: [PATCH 4/5] Upgrade prettier --- app/components/Alert/Alert.js | 3 +- app/components/Button/Button.js | 28 ++--- .../CenteredContent/CenteredContent.js | 4 +- app/components/ColorPicker/ColorPicker.js | 19 +-- app/components/Divider/Divider.js | 6 +- .../DocumentPreview/DocumentPreview.js | 23 ++-- .../components/PublishingInfo.js | 34 +++--- .../DocumentViews/DocumentViewersStore.js | 3 +- app/components/DocumentViews/DocumentViews.js | 14 +-- .../DocumentViewers/DocumentViewers.js | 3 +- app/components/DropdownMenu/DropdownMenu.js | 6 +- .../DropdownMenu/DropdownMenuItem.js | 6 +- app/components/Editor/Editor.js | 18 +-- .../Editor/components/BlockInsert.js | 11 +- .../ClickablePadding/ClickablePadding.js | 2 +- app/components/Editor/components/Code.js | 6 +- app/components/Editor/components/Contents.js | 3 +- .../Editor/components/CopyButton.js | 3 +- app/components/Editor/components/Heading.js | 19 +-- .../Editor/components/HorizontalRule.js | 5 +- app/components/Editor/components/Image.js | 45 ++++---- .../Editor/components/InlineCode.js | 2 +- app/components/Editor/components/Link.js | 12 +- app/components/Editor/components/Paragraph.js | 5 +- .../Editor/components/Placeholder.js | 2 +- .../Editor/components/Toolbar/BlockToolbar.js | 2 +- .../Editor/components/Toolbar/Toolbar.js | 31 ++--- .../Toolbar/components/DocumentResult.js | 4 +- .../Toolbar/components/FormattingToolbar.js | 19 ++- .../Toolbar/components/LinkToolbar.js | 20 ++-- .../Toolbar/components/ToolbarButton.js | 4 +- .../Editor/plugins/KeyboardShortcuts.js | 5 +- .../Editor/plugins/MarkdownShortcuts.js | 22 +++- app/components/Icon/CheckboxIcon.js | 14 ++- app/components/Icon/CollectionIcon.js | 8 +- app/components/Input/Input.js | 6 +- app/components/Key/key.js | 3 +- app/components/Labeled/Labeled.js | 4 +- app/components/Layout/Layout.js | 72 ++++++------ .../Layout/components/HeaderBlock.js | 6 +- app/components/Layout/components/Modals.js | 3 +- .../Layout/components/SidebarCollections.js | 60 ++++++---- .../Layout/components/SidebarLink.js | 16 ++- .../LoadingIndicator/LoadingIndicator.js | 3 +- .../LoadingIndicator/LoadingIndicatorBar.js | 4 +- app/components/Modal/Modal.js | 6 +- app/components/PageTitle/PageTitle.js | 4 +- app/components/Popover/Popover.js | 9 +- app/components/SlackAuthLink/SlackAuthLink.js | 3 +- app/components/Toasts/Toasts.js | 3 +- app/index.js | 4 +- app/menus/AccountMenu.js | 7 +- app/menus/CollectionMenu.js | 13 ++- app/menus/DocumentMenu.js | 20 ++-- app/models/Collection.js | 18 ++- app/models/Document.js | 43 ++++--- app/scenes/Collection/Collection.js | 18 +-- .../CollectionDelete/CollectionDelete.js | 12 +- app/scenes/CollectionEdit/CollectionEdit.js | 3 +- app/scenes/CollectionNew/CollectionNew.js | 8 +- app/scenes/Dashboard/Dashboard.js | 37 +++--- app/scenes/Document/Document.js | 109 ++++++++++-------- .../components/DocumentMove/DocumentMove.js | 84 +++++++------- .../DocumentMove/components/PathToDocument.js | 14 +-- app/scenes/DocumentDelete/DocumentDelete.js | 8 +- app/scenes/Error404/Error404.js | 4 +- .../KeyboardShortcuts/KeyboardShortcuts.js | 106 ++++++++++++----- app/scenes/Search/Search.js | 14 ++- app/scenes/Search/components/SearchField.js | 16 ++- app/scenes/Settings/Settings.js | 25 ++-- app/scenes/Settings/SettingsStore.js | 12 +- app/scenes/Settings/components/ApiKeyRow.js | 7 +- app/scenes/SlackAuth/SlackAuth.js | 3 +- app/scenes/Starred/Starred.js | 3 +- app/stores/AuthStore.js | 19 ++- app/stores/CollectionsStore.js | 21 ++-- app/stores/DocumentsStore.js | 42 ++++--- app/stores/ErrorsStore.js | 6 +- app/stores/UiStore.js | 24 ++-- 79 files changed, 780 insertions(+), 533 deletions(-) diff --git a/app/components/Alert/Alert.js b/app/components/Alert/Alert.js index c1e11d53..a2a64561 100644 --- a/app/components/Alert/Alert.js +++ b/app/components/Alert/Alert.js @@ -10,7 +10,8 @@ type Props = { type?: 'info' | 'success' | 'warning' | 'danger' | 'offline', }; -@observer class Alert extends React.Component { +@observer +class Alert extends React.Component { props: Props; defaultProps = { type: 'info', diff --git a/app/components/Button/Button.js b/app/components/Button/Button.js index 27284174..46700009 100644 --- a/app/components/Button/Button.js +++ b/app/components/Button/Button.js @@ -29,35 +29,35 @@ const RealButton = styled.button` svg { position: relative; - top: .05em; + top: 0.05em; } - ${props => props.light && ` + ${props => + props.light && + ` color: ${color.text}; background: ${lighten(0.08, color.slateLight)}; &:hover { background: ${color.slateLight}; } - `} - - ${props => props.neutral && ` + `} ${props => + props.neutral && + ` background: ${color.slate}; &:hover { background: ${darken(0.05, color.slate)}; } - `} - - ${props => props.danger && ` + `} ${props => + props.danger && + ` background: ${color.danger}; &:hover { background: ${darken(0.05, color.danger)}; } - `} - - &:disabled { + `} &:disabled { background: ${color.slateLight}; cursor: default; } @@ -68,7 +68,7 @@ const Label = styled.span` white-space: nowrap; text-overflow: ellipsis; - ${props => props.hasIcon && 'padding-left: 2px;'} + ${props => props.hasIcon && 'padding-left: 2px;'}; `; const Inner = styled.span` @@ -78,7 +78,9 @@ const Inner = styled.span` justify-content: center; align-items: center; - ${props => props.hasIcon && (props.small ? 'padding-left: 6px;' : 'padding-left: 10px;')} + ${props => + props.hasIcon && + (props.small ? 'padding-left: 6px;' : 'padding-left: 10px;')}; `; export type Props = { diff --git a/app/components/CenteredContent/CenteredContent.js b/app/components/CenteredContent/CenteredContent.js index b9f15975..85ca677d 100644 --- a/app/components/CenteredContent/CenteredContent.js +++ b/app/components/CenteredContent/CenteredContent.js @@ -19,9 +19,7 @@ const Content = styled.div` const CenteredContent = ({ children, ...rest }: Props) => { return ( - - {children} - + {children} ); }; diff --git a/app/components/ColorPicker/ColorPicker.js b/app/components/ColorPicker/ColorPicker.js index f95d857e..cd005ede 100644 --- a/app/components/ColorPicker/ColorPicker.js +++ b/app/components/ColorPicker/ColorPicker.js @@ -25,7 +25,8 @@ type Props = { value?: string, }; -@observer class ColorPicker extends React.Component { +@observer +class ColorPicker extends React.Component { props: Props; @observable selectedColor: string = colors[0]; @@ -52,26 +53,30 @@ type Props = { ); }; - @computed get customColor(): string { + @computed + get customColor(): string { return this.customColorValue && validateColorHex(`#${this.customColorValue}`) ? `#${this.customColorValue}` : colors[0]; } - @action setColor = (color: string) => { + @action + setColor = (color: string) => { this.selectedColor = color; this.customColorSelected = false; this.fireCallback(); }; - @action focusOnCustomColor = (event: SyntheticEvent) => { + @action + focusOnCustomColor = (event: SyntheticEvent) => { this.selectedColor = ''; this.customColorSelected = true; this.fireCallback(); }; - @action setCustomColor = (event: SyntheticEvent) => { + @action + setCustomColor = (event: SyntheticEvent) => { let target = event.target; if (target instanceof HTMLInputElement) { const color = target.value; @@ -137,9 +142,7 @@ const SwatchOutset = styled(Flex)` border: 2px solid ${({ active, color }) => (active ? color : 'transparent')}; border-radius: 2px; background: ${({ color }) => color}; - ${({ onClick }) => onClick && `cursor: pointer;`} - - &:last-child { + ${({ onClick }) => onClick && `cursor: pointer;`} &:last-child { margin-right: 0; } `; diff --git a/app/components/Divider/Divider.js b/app/components/Divider/Divider.js index 7ce582a5..9d44caea 100644 --- a/app/components/Divider/Divider.js +++ b/app/components/Divider/Divider.js @@ -4,7 +4,11 @@ import styled from 'styled-components'; import Flex from 'shared/components/Flex'; const Divider = () => { - return ; + return ( + + + + ); }; const Content = styled.span` diff --git a/app/components/DocumentPreview/DocumentPreview.js b/app/components/DocumentPreview/DocumentPreview.js index 40d29961..089df2a9 100644 --- a/app/components/DocumentPreview/DocumentPreview.js +++ b/app/components/DocumentPreview/DocumentPreview.js @@ -49,7 +49,7 @@ const DocumentLink = styled(Link)` outline: none; ${StyledStar} { - opacity: .5; + opacity: 0.5; &:hover { opacity: 1; @@ -63,11 +63,12 @@ const DocumentLink = styled(Link)` h3 { margin-top: 0; - margin-bottom: .25em; + margin-bottom: 0.25em; } `; -@observer class DocumentPreview extends Component { +@observer +class DocumentPreview extends Component { props: Props; star = (ev: SyntheticEvent) => { @@ -89,13 +90,15 @@ const DocumentLink = styled(Link)`

{document.title} - {document.starred - ? - - - : - - } + {document.starred ? ( + + + + ) : ( + + + + )}

- {createdAt === updatedAt - ? - {createdBy.name} + {createdAt === updatedAt ? ( + + {createdBy.name} published {moment(createdAt).fromNow()} + + ) : ( + + {updatedBy.name} + {' '} - published - {' '} - {moment(createdAt).fromNow()} - - : - {updatedBy.name} - - {' '} - modified - {' '} - {moment(updatedAt).fromNow()} - - } - {collection &&  in {collection.name}} + modified {moment(updatedAt).fromNow()} + + + )} + {collection && ( + +  in {collection.name} + + )} ); } diff --git a/app/components/DocumentViews/DocumentViewersStore.js b/app/components/DocumentViews/DocumentViewersStore.js index 0f620ffb..336e3ae4 100644 --- a/app/components/DocumentViews/DocumentViewersStore.js +++ b/app/components/DocumentViews/DocumentViewersStore.js @@ -14,7 +14,8 @@ class DocumentViewersStore { @observable viewers: Array; @observable isFetching: boolean; - @action fetchViewers = async () => { + @action + fetchViewers = async () => { this.isFetching = true; try { diff --git a/app/components/DocumentViews/DocumentViews.js b/app/components/DocumentViews/DocumentViews.js index 6a293f8b..6a6db851 100644 --- a/app/components/DocumentViews/DocumentViews.js +++ b/app/components/DocumentViews/DocumentViews.js @@ -25,7 +25,8 @@ type Props = { count: number, }; -@observer class DocumentViews extends Component { +@observer +class DocumentViews extends Component { anchor: HTMLElement; store: DocumentViewersStore; props: Props; @@ -55,19 +56,16 @@ type Props = { return ( - Viewed - {' '} - {this.props.count} - {' '} - {this.props.count === 1 ? 'time' : 'times'} + Viewed {this.props.count} {this.props.count === 1 ? 'time' : 'times'} - {this.state.opened && + {this.state.opened && ( - } + + )} ); } diff --git a/app/components/DocumentViews/components/DocumentViewers/DocumentViewers.js b/app/components/DocumentViews/components/DocumentViewers/DocumentViewers.js index 566657d6..607817f1 100644 --- a/app/components/DocumentViews/components/DocumentViewers/DocumentViewers.js +++ b/app/components/DocumentViews/components/DocumentViewers/DocumentViewers.js @@ -40,8 +40,7 @@ class DocumentViewers extends Component { {map(this.props.viewers, view => (
  • - - {' '} + {' '} {view.user.name}
    • diff --git a/app/components/DropdownMenu/DropdownMenu.js b/app/components/DropdownMenu/DropdownMenu.js index 6e5f8697..cf5cfa22 100644 --- a/app/components/DropdownMenu/DropdownMenu.js +++ b/app/components/DropdownMenu/DropdownMenu.js @@ -17,7 +17,8 @@ type Props = { style?: Object, }; -@observer class DropdownMenu extends Component { +@observer +class DropdownMenu extends Component { props: Props; @observable top: number; @observable left: number; @@ -93,7 +94,8 @@ const Menu = styled.div` border-radius: 2px; min-width: 160px; overflow: hidden; - box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.08); + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.08), + 0 2px 4px rgba(0, 0, 0, 0.08); `; export default DropdownMenu; diff --git a/app/components/DropdownMenu/DropdownMenuItem.js b/app/components/DropdownMenu/DropdownMenuItem.js index 322b909e..8b8c2054 100644 --- a/app/components/DropdownMenu/DropdownMenuItem.js +++ b/app/components/DropdownMenu/DropdownMenuItem.js @@ -11,11 +11,7 @@ const DropdownMenuItem = ({ onClick?: SyntheticEvent => void, children?: React.Element, }) => { - return ( - - {children} - - ); + return {children}; }; const MenuItem = styled(Flex)` diff --git a/app/components/Editor/Editor.js b/app/components/Editor/Editor.js index b6f5403e..50a5805f 100644 --- a/app/components/Editor/Editor.js +++ b/app/components/Editor/Editor.js @@ -34,7 +34,8 @@ type KeyData = { key: string, }; -@observer class MarkdownEditor extends Component { +@observer +class MarkdownEditor extends Component { props: Props; editor: EditorType; schema: Object; @@ -193,14 +194,16 @@ type KeyData = {
    - {!readOnly && - } - {!readOnly && + {!readOnly && ( + + )} + {!readOnly && ( } + /> + )} (this.editor = ref)} placeholder="Start with a title…" @@ -234,7 +237,7 @@ const Header = styled(Flex)` height: 60px; flex-shrink: 0; align-items: flex-end; - ${({ readOnly }) => !readOnly && 'cursor: text;'} + ${({ readOnly }) => !readOnly && 'cursor: text;'}; `; const StyledEditor = styled(Editor)` @@ -326,7 +329,8 @@ const StyledEditor = styled(Editor)` padding: 5px 20px 5px 0; } - b, strong { + b, + strong { font-weight: 600; } `; diff --git a/app/components/Editor/components/BlockInsert.js b/app/components/Editor/components/BlockInsert.js index b021a47a..fe7ac38e 100644 --- a/app/components/Editor/components/BlockInsert.js +++ b/app/components/Editor/components/BlockInsert.js @@ -126,20 +126,23 @@ const Trigger = styled.div` z-index: 1; opacity: 0; background-color: ${color.white}; - transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275); + transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275), + transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275); line-height: 0; margin-left: -10px; box-shadow: inset 0 0 0 2px ${color.slate}; border-radius: 100%; - transform: scale(.9); + transform: scale(0.9); cursor: pointer; &:hover { background-color: ${color.smokeDark}; } - ${({ active }) => active && ` + ${({ active }) => + active && + ` transform: scale(1); opacity: .9; - `} + `}; `; diff --git a/app/components/Editor/components/ClickablePadding/ClickablePadding.js b/app/components/Editor/components/ClickablePadding/ClickablePadding.js index 81e2b5f1..aa8b84a9 100644 --- a/app/components/Editor/components/ClickablePadding/ClickablePadding.js +++ b/app/components/Editor/components/ClickablePadding/ClickablePadding.js @@ -16,7 +16,7 @@ const Container = styled.div` padding-top: 50px; cursor: ${({ onClick }) => (onClick ? 'text' : 'default')}; - ${({ grow }) => grow && `flex-grow: 1;`} + ${({ grow }) => grow && `flex-grow: 1;`}; `; export default ClickablePadding; diff --git a/app/components/Editor/components/Code.js b/app/components/Editor/components/Code.js index e37455be..52fa0367 100644 --- a/app/components/Editor/components/Code.js +++ b/app/components/Editor/components/Code.js @@ -12,16 +12,14 @@ export default function Code({ children, node, readOnly, attributes }: Props) { {readOnly && } 
    -        
-          {children}
-        
+        {children}
    ); } const Pre = styled.pre` - padding: .5em 1em; + padding: 0.5em 1em; background: ${color.smokeLight}; border-radius: 4px; border: 1px solid ${color.smokeDark}; diff --git a/app/components/Editor/components/Contents.js b/app/components/Editor/components/Contents.js index 625aad93..b92ef7ce 100644 --- a/app/components/Editor/components/Contents.js +++ b/app/components/Editor/components/Contents.js @@ -12,7 +12,8 @@ type Props = { state: State, }; -@observer class Contents extends Component { +@observer +class Contents extends Component { props: Props; @observable activeHeading: ?string; diff --git a/app/components/Editor/components/CopyButton.js b/app/components/Editor/components/CopyButton.js index 7e1bb6b5..7e8659c8 100644 --- a/app/components/Editor/components/CopyButton.js +++ b/app/components/Editor/components/CopyButton.js @@ -6,7 +6,8 @@ import { color } from 'shared/styles/constants'; import styled from 'styled-components'; import CopyToClipboard from 'components/CopyToClipboard'; -@observer class CopyButton extends Component { +@observer +class CopyButton extends Component { @observable copied: boolean = false; copiedTimeout: ?number; diff --git a/app/components/Editor/components/Heading.js b/app/components/Editor/components/Heading.js index 543cdd12..9cd0d0fc 100644 --- a/app/components/Editor/components/Heading.js +++ b/app/components/Editor/components/Heading.js @@ -41,26 +41,29 @@ function Heading(props: Props) { return ( - - {children} - - {showPlaceholder && + {children} + {showPlaceholder && ( {editor.props.placeholder} - } - {showHash && #} + + )} + {showHash && ( + + # + + )} ); } const Wrapper = styled.div` display: inline; - margin-left: ${(props: Props) => (props.hasEmoji ? '-1.2em' : 0)} + margin-left: ${(props: Props) => (props.hasEmoji ? '-1.2em' : 0)}; `; const Anchor = styled.a` visibility: hidden; - padding-left: .25em; + padding-left: 0.25em; color: #dedede; &:hover { diff --git a/app/components/Editor/components/HorizontalRule.js b/app/components/Editor/components/HorizontalRule.js index 79cd52c3..9eed79e0 100644 --- a/app/components/Editor/components/HorizontalRule.js +++ b/app/components/Editor/components/HorizontalRule.js @@ -11,10 +11,11 @@ function HorizontalRule(props: Props) { } const StyledHr = styled.hr` - padding-top: .75em; + padding-top: 0.75em; margin: 0; border: 0; - border-bottom: 1px solid ${props => (props.active ? color.slate : color.slateLight)}; + border-bottom: 1px solid + ${props => (props.active ? color.slate : color.slateLight)}; `; export default HorizontalRule; diff --git a/app/components/Editor/components/Image.js b/app/components/Editor/components/Image.js index bd52e7c0..3200a104 100644 --- a/app/components/Editor/components/Image.js +++ b/app/components/Editor/components/Image.js @@ -35,26 +35,28 @@ class Image extends Component { return ( - {!readOnly - ? - : } - {showCaption && + {!readOnly ? ( + + ) : ( + + )} + {showCaption && ( } + /> + )} ); } diff --git a/app/components/Editor/components/InlineCode.js b/app/components/Editor/components/InlineCode.js index c59965c3..f81bcf70 100644 --- a/app/components/Editor/components/InlineCode.js +++ b/app/components/Editor/components/InlineCode.js @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { color } from 'shared/styles/constants'; const InlineCode = styled.code` - padding: .25em; + padding: 0.25em; background: ${color.smoke}; border-radius: 4px; border: 1px solid ${color.smokeDark}; diff --git a/app/components/Editor/components/Link.js b/app/components/Editor/components/Link.js index 487d014c..0642415e 100644 --- a/app/components/Editor/components/Link.js +++ b/app/components/Editor/components/Link.js @@ -31,8 +31,16 @@ export default function Link({ attributes, node, children, readOnly }: Props) { const path = getPathFromUrl(href); if (isOutlineUrl(href) && readOnly) { - return {children}; + return ( + + {children} + + ); } else { - return {children}; + return ( + + {children} + + ); } } diff --git a/app/components/Editor/components/Paragraph.js b/app/components/Editor/components/Paragraph.js index 10122760..5b4b9a48 100644 --- a/app/components/Editor/components/Paragraph.js +++ b/app/components/Editor/components/Paragraph.js @@ -25,10 +25,11 @@ export default function Link({ return (

    {children} - {showPlaceholder && + {showPlaceholder && ( {editor.props.bodyPlaceholder} - } + + )}

    ); } diff --git a/app/components/Editor/components/Placeholder.js b/app/components/Editor/components/Placeholder.js index 1e08972f..c98ef16b 100644 --- a/app/components/Editor/components/Placeholder.js +++ b/app/components/Editor/components/Placeholder.js @@ -7,5 +7,5 @@ export default styled.span` visibility: hidden; pointer-events: none; user-select: none; - color: #B1BECC; + color: #b1becc; `; diff --git a/app/components/Editor/components/Toolbar/BlockToolbar.js b/app/components/Editor/components/Toolbar/BlockToolbar.js index 74ee42a7..165d5cca 100644 --- a/app/components/Editor/components/Toolbar/BlockToolbar.js +++ b/app/components/Editor/components/Toolbar/BlockToolbar.js @@ -170,7 +170,7 @@ const Bar = styled(Flex)` &:before, &:after { - content: ""; + content: ''; position: absolute; left: -100%; width: 100%; diff --git a/app/components/Editor/components/Toolbar/Toolbar.js b/app/components/Editor/components/Toolbar/Toolbar.js index 8d4eec4e..7e424099 100644 --- a/app/components/Editor/components/Toolbar/Toolbar.js +++ b/app/components/Editor/components/Toolbar/Toolbar.js @@ -99,7 +99,9 @@ export default class Toolbar extends Component { const left = rect.left + window.scrollX - this.menu.offsetWidth / 2 + rect.width / 2; - data.top = `${Math.round(rect.top + window.scrollY - this.menu.offsetHeight)}px`; + data.top = `${Math.round( + rect.top + window.scrollY - this.menu.offsetHeight + )}px`; data.left = `${Math.round(Math.max(padding, left))}px`; this.setState(data); } @@ -120,17 +122,15 @@ export default class Toolbar extends Component { return ( - {link && - } - {!link && + {link && ( + + )} + {!link && ( } + /> + )} ); @@ -144,16 +144,19 @@ const Menu = styled.div` top: -10000px; left: -10000px; opacity: 0; - background-color: #2F3336; + background-color: #2f3336; border-radius: 4px; - transform: scale(.95); - transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275); + transform: scale(0.95); + transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275), + transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275); line-height: 0; height: 40px; min-width: 260px; - ${({ active }) => active && ` + ${({ active }) => + active && + ` transform: translateY(-6px) scale(1); opacity: 1; - `} + `}; `; diff --git a/app/components/Editor/components/Toolbar/components/DocumentResult.js b/app/components/Editor/components/Toolbar/components/DocumentResult.js index 9b15b72b..68aa6f9a 100644 --- a/app/components/Editor/components/Toolbar/components/DocumentResult.js +++ b/app/components/Editor/components/Toolbar/components/DocumentResult.js @@ -14,7 +14,9 @@ type Props = { function DocumentResult({ document, ...rest }: Props) { return ( - + + + {document.title} ); diff --git a/app/components/Editor/components/Toolbar/components/FormattingToolbar.js b/app/components/Editor/components/Toolbar/components/FormattingToolbar.js index effd427f..df56d703 100644 --- a/app/components/Editor/components/Toolbar/components/FormattingToolbar.js +++ b/app/components/Editor/components/Toolbar/components/FormattingToolbar.js @@ -42,7 +42,10 @@ class FormattingToolbar extends Component { ev.preventDefault(); let { state } = this.props; - state = state.transform().toggleMark(type).apply(); + state = state + .transform() + .toggleMark(type) + .apply(); this.props.onChange(state); }; @@ -50,7 +53,10 @@ class FormattingToolbar extends Component { ev.preventDefault(); let { state } = this.props; - state = state.transform().setBlock(type).apply(); + state = state + .transform() + .setBlock(type) + .apply(); this.props.onChange(state); }; @@ -59,7 +65,10 @@ class FormattingToolbar extends Component { ev.stopPropagation(); let { state } = this.props; const data = { href: '' }; - state = state.transform().wrapInline({ type: 'link', data }).apply(); + state = state + .transform() + .wrapInline({ type: 'link', data }) + .apply(); this.props.onChange(state); this.props.onCreateLink(); }; @@ -109,8 +118,8 @@ class FormattingToolbar extends Component { const Separator = styled.div` height: 100%; width: 1px; - background: #FFF; - opacity: .2; + background: #fff; + opacity: 0.2; display: inline-block; margin-left: 10px; `; diff --git a/app/components/Editor/components/Toolbar/components/LinkToolbar.js b/app/components/Editor/components/Toolbar/components/LinkToolbar.js index 3bf7742d..4bdd21c7 100644 --- a/app/components/Editor/components/Toolbar/components/LinkToolbar.js +++ b/app/components/Editor/components/Toolbar/components/LinkToolbar.js @@ -39,7 +39,8 @@ class LinkToolbar extends Component { this.isEditing = !!this.props.link.data.get('href'); } - @action search = async () => { + @action + search = async () => { this.isFetching = true; if (this.searchTerm) { @@ -144,15 +145,16 @@ class LinkToolbar extends Component { onChange={this.onChange} autoFocus /> - {this.isEditing && + {this.isEditing && ( - } + + )} {this.isEditing ? : } - {hasResults && + {hasResults && ( - index === 0 && this.setFirstDocumentRef(ref)} + index === 0 && this.setFirstDocumentRef(ref) + } document={document} key={document.id} onClick={ev => this.selectDocument(ev, document)} @@ -173,14 +176,15 @@ class LinkToolbar extends Component { ); })} - } + + )} ); } } const SearchResults = styled.div` - background: #2F3336; + background: #2f3336; position: absolute; top: 100%; width: 100%; @@ -199,7 +203,7 @@ const LinkEditor = styled(Flex)` const Input = styled.input` font-size: 15px; - background: rgba(255,255,255,.1); + background: rgba(255, 255, 255, 0.1); border-radius: 2px; padding: 4px 8px; border: 0; diff --git a/app/components/Editor/components/Toolbar/components/ToolbarButton.js b/app/components/Editor/components/Toolbar/components/ToolbarButton.js index 2d4b8c49..9509934c 100644 --- a/app/components/Editor/components/Toolbar/components/ToolbarButton.js +++ b/app/components/Editor/components/Toolbar/components/ToolbarButton.js @@ -12,7 +12,7 @@ export default styled.button` background: none; transition: opacity 100ms ease-in-out; padding: 0; - opacity: .7; + opacity: 0.7; &:first-child { margin-left: 0; @@ -22,5 +22,5 @@ export default styled.button` opacity: 1; } - ${({ active }) => active && 'opacity: 1;'} + ${({ active }) => active && 'opacity: 1;'}; `; diff --git a/app/components/Editor/plugins/KeyboardShortcuts.js b/app/components/Editor/plugins/KeyboardShortcuts.js index fb1f448c..bf1a2fb0 100644 --- a/app/components/Editor/plugins/KeyboardShortcuts.js +++ b/app/components/Editor/plugins/KeyboardShortcuts.js @@ -37,7 +37,10 @@ export default function KeyboardShortcuts() { const firstNode = state.document.nodes.first(); if (firstNode === state.startBlock) return; - state = state.transform().toggleMark(type).apply(); + state = state + .transform() + .toggleMark(type) + .apply(); return state; }, }; diff --git a/app/components/Editor/plugins/MarkdownShortcuts.js b/app/components/Editor/plugins/MarkdownShortcuts.js index 10fad824..6132a8c6 100644 --- a/app/components/Editor/plugins/MarkdownShortcuts.js +++ b/app/components/Editor/plugins/MarkdownShortcuts.js @@ -64,7 +64,10 @@ export default function MarkdownShortcuts() { } } - state = transform.extendToStartOf(startBlock).delete().apply(); + state = transform + .extendToStartOf(startBlock) + .delete() + .apply(); return state; } @@ -113,7 +116,10 @@ export default function MarkdownShortcuts() { lastCodeTagIndex - shortcut.length ); transform.addMark(mark); - state = transform.collapseToEnd().removeMark(mark).apply(); + state = transform + .collapseToEnd() + .removeMark(mark) + .apply(); return state; } } @@ -212,7 +218,11 @@ export default function MarkdownShortcuts() { onTab(ev: SyntheticEvent, state: Object) { if (state.startBlock.type === 'heading1') { ev.preventDefault(); - return state.transform().splitBlock().setBlock('paragraph').apply(); + return state + .transform() + .splitBlock() + .setBlock('paragraph') + .apply(); } }, @@ -253,7 +263,11 @@ export default function MarkdownShortcuts() { } ev.preventDefault(); - return state.transform().splitBlock().setBlock('paragraph').apply(); + return state + .transform() + .splitBlock() + .setBlock('paragraph') + .apply(); }, /** diff --git a/app/components/Icon/CheckboxIcon.js b/app/components/Icon/CheckboxIcon.js index 5540808c..94d95b88 100644 --- a/app/components/Icon/CheckboxIcon.js +++ b/app/components/Icon/CheckboxIcon.js @@ -9,12 +9,14 @@ export default function CheckboxIcon({ }: Props & { checked: boolean }) { return ( - {checked - ? - : } + {checked ? ( + + ) : ( + + )} ); } diff --git a/app/components/Icon/CollectionIcon.js b/app/components/Icon/CollectionIcon.js index 948ccec6..f419be0d 100644 --- a/app/components/Icon/CollectionIcon.js +++ b/app/components/Icon/CollectionIcon.js @@ -9,9 +9,11 @@ export default function CollectionIcon({ }: Props & { expanded: boolean }) { return ( - {expanded - ? - : } + {expanded ? ( + + ) : ( + + )} ); } diff --git a/app/components/Input/Input.js b/app/components/Input/Input.js index 38a552dc..94c2d8ec 100644 --- a/app/components/Input/Input.js +++ b/app/components/Input/Input.js @@ -28,9 +28,7 @@ const RealInput = styled.input` } `; -const Wrapper = styled.div` - -`; +const Wrapper = styled.div``; export const Outline = styled(Flex)` display: flex; @@ -44,7 +42,7 @@ export const Outline = styled(Flex)` font-weight: normal; &:focus { - border-color: ${color.slate} + border-color: ${color.slate}; } `; diff --git a/app/components/Key/key.js b/app/components/Key/key.js index 0e2f7a19..8c53c8db 100644 --- a/app/components/Key/key.js +++ b/app/components/Key/key.js @@ -5,7 +5,8 @@ import { color } from 'shared/styles/constants'; const Key = styled.kbd` display: inline-block; padding: 4px 6px; - font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + font: 11px 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, + monospace; line-height: 10px; color: ${color.text}; vertical-align: middle; diff --git a/app/components/Labeled/Labeled.js b/app/components/Labeled/Labeled.js index 72909be4..51999808 100644 --- a/app/components/Labeled/Labeled.js +++ b/app/components/Labeled/Labeled.js @@ -18,11 +18,11 @@ const Labeled = ({ label, children, ...props }: Props) => ( ); export const Label = styled(Flex)` - margin-bottom: ${size.medium}; + margin-bottom: ${size.medium}; font-size: 13px; font-weight: 500; text-transform: uppercase; - color: #9FA6AB; + color: #9fa6ab; letter-spacing: 0.04em; `; diff --git a/app/components/Layout/Layout.js b/app/components/Layout/Layout.js index 3f1cda5d..226aea4b 100644 --- a/app/components/Layout/Layout.js +++ b/app/components/Layout/Layout.js @@ -43,7 +43,8 @@ type Props = { notifications?: React.Element, }; -@observer class Layout extends React.Component { +@observer +class Layout extends React.Component { props: Props; scrollable: ?HTMLDivElement; @@ -117,41 +118,42 @@ type Props = { {auth.authenticated && user && - team && - - - - - } - /> + team && ( + + + + + } + /> - - - - }> - Home - - }> - Search - - }> - Starred - - - - - - - - } + + + + }> + Home + + }> + Search + + }> + Starred + + + + + + + + + )} {this.props.children} diff --git a/app/components/Layout/components/HeaderBlock.js b/app/components/Layout/components/HeaderBlock.js index 9c80e6f0..242a4442 100644 --- a/app/components/Layout/components/HeaderBlock.js +++ b/app/components/Layout/components/HeaderBlock.js @@ -43,14 +43,14 @@ const Header = styled(Flex)` &:active, &:hover { - background: rgba(0,0,0,.05); + background: rgba(0, 0, 0, 0.05); } &::after { - content: ""; + content: ''; left: 24px; right: 24px; - background: rgba(0,0,0,.075); + background: rgba(0, 0, 0, 0.075); height: 1px; position: absolute; bottom: 0; diff --git a/app/components/Layout/components/Modals.js b/app/components/Layout/components/Modals.js index 37193b8b..00b4bb7c 100644 --- a/app/components/Layout/components/Modals.js +++ b/app/components/Layout/components/Modals.js @@ -10,7 +10,8 @@ import DocumentDelete from 'scenes/DocumentDelete'; import KeyboardShortcuts from 'scenes/KeyboardShortcuts'; import Settings from 'scenes/Settings'; -@observer class Modals extends Component { +@observer +class Modals extends Component { props: { ui: UiStore, }; diff --git a/app/components/Layout/components/SidebarCollections.js b/app/components/Layout/components/SidebarCollections.js index 0d5fbfd9..91da910d 100644 --- a/app/components/Layout/components/SidebarCollections.js +++ b/app/components/Layout/components/SidebarCollections.js @@ -31,7 +31,8 @@ type Props = { ui: UiStore, }; -@observer class SidebarCollections extends Component { +@observer +class SidebarCollections extends Component { props: Props; render() { @@ -61,13 +62,14 @@ type Props = { /> ))} - {collections.isLoaded && + {collections.isLoaded && ( } > New collection… - } + + )} ); } @@ -82,7 +84,8 @@ type CollectionLinkProps = { prefetchDocument: (id: string) => Promise, }; -@observer class CollectionLink extends Component { +@observer +class CollectionLink extends Component { props: CollectionLinkProps; dropzoneRef; @@ -133,7 +136,7 @@ type CollectionLinkProps = { - {expanded && + {expanded && ( {collection.documents.map(document => ( ))} - } + + )} ); @@ -172,11 +176,13 @@ const DocumentLink = observer( }: DocumentLinkProps) => { const isActiveDocument = activeDocument && activeDocument.id === document.id; - const showChildren = !!(activeDocument && + const showChildren = !!( + activeDocument && (activeDocument.pathToDocument .map(entry => entry.id) .includes(document.id) || - isActiveDocument)); + isActiveDocument) + ); const handleMouseEnter = (event: SyntheticEvent) => { event.stopPropagation(); @@ -200,20 +206,22 @@ const DocumentLink = observer( to={document.url} expand={showChildren} expandedContent={ - document.children.length - ? - {document.children.map(childDocument => ( - - ))} - - : undefined + document.children.length ? ( + + {document.children.map(childDocument => ( + + ))} + + ) : ( + undefined + ) } > {document.title} @@ -228,10 +236,14 @@ const CollectionAction = styled.a` position: absolute; right: 0; color: ${color.slate}; - svg { opacity: .75; } + svg { + opacity: 0.75; + } &:hover { - svg { opacity: 1; } + svg { + opacity: 1; + } } `; diff --git a/app/components/Layout/components/SidebarLink.js b/app/components/Layout/components/SidebarLink.js index ca7c5773..fe43ff2d 100644 --- a/app/components/Layout/components/SidebarLink.js +++ b/app/components/Layout/components/SidebarLink.js @@ -17,7 +17,7 @@ const StyledGoTo = styled(CollapsedIcon)` margin-bottom: -4px; margin-left: 1px; margin-right: -3px; - ${({ expanded }) => !expanded && 'transform: rotate(-90deg);'} + ${({ expanded }) => !expanded && 'transform: rotate(-90deg);'}; `; const IconWrapper = styled.span` @@ -55,7 +55,8 @@ type Props = { iconColor?: string, }; -@observer class SidebarLink extends Component { +@observer +class SidebarLink extends Component { props: Props; @observable expanded: boolean = false; @@ -67,13 +68,15 @@ type Props = { if (nextProps.expand) this.handleExpand(); } - @action handleClick = (event: SyntheticEvent) => { + @action + handleClick = (event: SyntheticEvent) => { event.preventDefault(); event.stopPropagation(); this.expanded = !this.expanded; }; - @action handleExpand = () => { + @action + handleExpand = () => { this.expanded = true; }; @@ -91,8 +94,9 @@ type Props = { exact > {icon && {icon}} - {expandedContent && - } + {expandedContent && ( + + )} {children} {this.expanded && expandedContent} diff --git a/app/components/LoadingIndicator/LoadingIndicator.js b/app/components/LoadingIndicator/LoadingIndicator.js index 05247430..07986bb2 100644 --- a/app/components/LoadingIndicator/LoadingIndicator.js +++ b/app/components/LoadingIndicator/LoadingIndicator.js @@ -2,7 +2,8 @@ import React from 'react'; import { inject, observer } from 'mobx-react'; -@observer class LoadingIndicator extends React.Component { +@observer +class LoadingIndicator extends React.Component { componentDidMount() { this.props.ui.enableProgressBar(); } diff --git a/app/components/LoadingIndicator/LoadingIndicatorBar.js b/app/components/LoadingIndicator/LoadingIndicatorBar.js index dead7652..b74bd4af 100644 --- a/app/components/LoadingIndicator/LoadingIndicatorBar.js +++ b/app/components/LoadingIndicator/LoadingIndicatorBar.js @@ -20,7 +20,7 @@ const Container = styled.div` top: 0; z-index: 9999; - background-color: #03A9F4; + background-color: #03a9f4; width: 100%; animation: ${loadingFrame} 4s ease-in-out infinite; animation-delay: 250ms; @@ -30,7 +30,7 @@ const Container = styled.div` const Loader = styled.div` width: 100%; height: 2px; - background-color: #03A9F4; + background-color: #03a9f4; `; export default LoadingIndicatorBar; diff --git a/app/components/Modal/Modal.js b/app/components/Modal/Modal.js index 3e5fcbb2..d32e267f 100644 --- a/app/components/Modal/Modal.js +++ b/app/components/Modal/Modal.js @@ -43,7 +43,9 @@ const Modal = ({ > {title &&

    {title}

    } - + + + {children}     @@ -79,7 +81,7 @@ const Close = styled.a` position: fixed; top: 3rem; right: 3rem; - opacity: .5; + opacity: 0.5; color: ${color.text}; &:hover { diff --git a/app/components/PageTitle/PageTitle.js b/app/components/PageTitle/PageTitle.js index fc93eb6e..b9d39e4d 100644 --- a/app/components/PageTitle/PageTitle.js +++ b/app/components/PageTitle/PageTitle.js @@ -7,7 +7,9 @@ type Props = { }; const PageTitle = ({ title }: Props) => ( - {`${title} - Outline`} + + {`${title} - Outline`} + ); export default PageTitle; diff --git a/app/components/Popover/Popover.js b/app/components/Popover/Popover.js index 21fa9308..c3cdc999 100644 --- a/app/components/Popover/Popover.js +++ b/app/components/Popover/Popover.js @@ -30,18 +30,19 @@ const StyledPopover = styled(BoundlessPopover)` position: absolute; polygon:first-child { - fill: rgba(0,0,0,.075); + fill: rgba(0, 0, 0, 0.075); } polygon { - fill: #FFF; + fill: #fff; } } `; const Dialog = styled.div` outline: none; - background: #FFF; - box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 8px 16px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.1); + background: #fff; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.1), + 0 2px 4px rgba(0, 0, 0, 0.1); border-radius: 4px; line-height: 1.5; padding: 16px; diff --git a/app/components/SlackAuthLink/SlackAuthLink.js b/app/components/SlackAuthLink/SlackAuthLink.js index 3bf9e164..a5b9d56a 100644 --- a/app/components/SlackAuthLink/SlackAuthLink.js +++ b/app/components/SlackAuthLink/SlackAuthLink.js @@ -10,7 +10,8 @@ type Props = { redirectUri: string, }; -@observer class SlackAuthLink extends React.Component { +@observer +class SlackAuthLink extends React.Component { props: Props; static defaultProps = { diff --git a/app/components/Toasts/Toasts.js b/app/components/Toasts/Toasts.js index 565fd6da..3eeddb68 100644 --- a/app/components/Toasts/Toasts.js +++ b/app/components/Toasts/Toasts.js @@ -5,7 +5,8 @@ import styled from 'styled-components'; import { layout } from 'shared/styles/constants'; import Toast from './components/Toast'; -@observer class Toasts extends Component { +@observer +class Toasts extends Component { handleClose = index => { this.props.errors.remove(index); }; diff --git a/app/index.js b/app/index.js index 3c2bd5df..57da46f6 100644 --- a/app/index.js +++ b/app/index.js @@ -82,9 +82,7 @@ const Auth = ({ children }: AuthProps) => { return ( - - {children} - + {children} ); } else { diff --git a/app/menus/AccountMenu.js b/app/menus/AccountMenu.js index 4a701da9..1678bfa5 100644 --- a/app/menus/AccountMenu.js +++ b/app/menus/AccountMenu.js @@ -6,7 +6,8 @@ import UiStore from 'stores/UiStore'; import AuthStore from 'stores/AuthStore'; import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu'; -@observer class AccountMenu extends Component { +@observer +class AccountMenu extends Component { props: { label?: React$Element, history: Object, @@ -42,9 +43,7 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu'; API documentation - - Logout - + Logout ); } diff --git a/app/menus/CollectionMenu.js b/app/menus/CollectionMenu.js index bc393a6a..d4670b0c 100644 --- a/app/menus/CollectionMenu.js +++ b/app/menus/CollectionMenu.js @@ -8,7 +8,8 @@ import MoreIcon from 'components/Icon/MoreIcon'; import Flex from 'shared/components/Flex'; import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu'; -@observer class CollectionMenu extends Component { +@observer +class CollectionMenu extends Component { props: { label?: React$Element<*>, onOpen?: () => void, @@ -44,7 +45,7 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu'; onOpen={onOpen} onClose={onClose} > - {collection && + {collection && ( New document @@ -53,9 +54,11 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu'; Import document Edit… - } - {allowDelete && - Delete…} + + )} + {allowDelete && ( + Delete… + )} ); } diff --git a/app/menus/DocumentMenu.js b/app/menus/DocumentMenu.js index 3e74bd8b..e4dedde0 100644 --- a/app/menus/DocumentMenu.js +++ b/app/menus/DocumentMenu.js @@ -8,7 +8,8 @@ import MoreIcon from 'components/Icon/MoreIcon'; import { documentMoveUrl } from 'utils/routeHelpers'; import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu'; -@observer class DocumentMenu extends Component { +@observer +class DocumentMenu extends Component { props: { ui: UiStore, label?: React$Element, @@ -50,11 +51,13 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu'; return ( }> - {document.starred - ? - Unstar - - : Star} + {document.starred ? ( + + Unstar + + ) : ( + Star + )} Move… - {allowDelete && + {allowDelete && ( Delete… - } + + )} ); } diff --git a/app/models/Collection.js b/app/models/Collection.js index 77158d86..96a1c57e 100644 --- a/app/models/Collection.js +++ b/app/models/Collection.js @@ -27,19 +27,22 @@ class Collection extends BaseModel { /* Computed */ - @computed get entryUrl(): string { + @computed + get entryUrl(): string { return this.type === 'atlas' && this.documents.length > 0 ? this.documents[0].url : this.url; } - @computed get allowDelete(): boolean { + @computed + get allowDelete(): boolean { return true; } /* Actions */ - @action fetch = async () => { + @action + fetch = async () => { try { const res = await client.post('/collections.info', { id: this.id }); invariant(res && res.data, 'API response should be available'); @@ -54,7 +57,8 @@ class Collection extends BaseModel { return this; }; - @action save = async () => { + @action + save = async () => { if (this.isSaving) return this; this.isSaving = true; @@ -89,7 +93,8 @@ class Collection extends BaseModel { return true; }; - @action delete = async () => { + @action + delete = async () => { try { await client.post('/collections.delete', { id: this.id }); this.emit('collections.delete', { @@ -102,7 +107,8 @@ class Collection extends BaseModel { return false; }; - @action updateData(data: Object = {}) { + @action + updateData(data: Object = {}) { this.data = data; extendObservable(this, data); } diff --git a/app/models/Document.js b/app/models/Document.js index 5df71a8f..00397a5d 100644 --- a/app/models/Document.js +++ b/app/models/Document.js @@ -43,11 +43,13 @@ class Document extends BaseModel { /* Computed */ - @computed get modifiedSinceViewed(): boolean { + @computed + get modifiedSinceViewed(): boolean { return !!this.lastViewedAt && this.lastViewedAt < this.updatedAt; } - @computed get pathToDocument(): Array<{ id: string, title: string }> { + @computed + get pathToDocument(): Array<{ id: string, title: string }> { let path; const traveler = (nodes, previousPath) => { nodes.forEach(childNode => { @@ -76,16 +78,19 @@ class Document extends BaseModel { return []; } - @computed get isEmpty(): boolean { + @computed + get isEmpty(): boolean { // Check if the document title has been modified and user generated content exists return this.text.replace(new RegExp(`^#$`), '').trim().length === 0; } - @computed get allowSave(): boolean { + @computed + get allowSave(): boolean { return !this.isEmpty && !this.isSaving; } - @computed get allowDelete(): boolean { + @computed + get allowDelete(): boolean { const collection = this.collection; return ( collection && @@ -95,7 +100,8 @@ class Document extends BaseModel { ); } - @computed get parentDocumentId(): ?string { + @computed + get parentDocumentId(): ?string { return this.pathToDocument.length > 1 ? this.pathToDocument[this.pathToDocument.length - 2].id : null; @@ -103,7 +109,8 @@ class Document extends BaseModel { /* Actions */ - @action star = async () => { + @action + star = async () => { this.starred = true; try { await client.post('/documents.star', { id: this.id }); @@ -113,7 +120,8 @@ class Document extends BaseModel { } }; - @action unstar = async () => { + @action + unstar = async () => { this.starred = false; try { await client.post('/documents.unstar', { id: this.id }); @@ -123,7 +131,8 @@ class Document extends BaseModel { } }; - @action view = async () => { + @action + view = async () => { this.views++; try { await client.post('/views.create', { id: this.id }); @@ -132,7 +141,8 @@ class Document extends BaseModel { } }; - @action fetch = async () => { + @action + fetch = async () => { try { const res = await client.post('/documents.info', { id: this.id }); invariant(res && res.data, 'Document API response should be available'); @@ -145,7 +155,8 @@ class Document extends BaseModel { } }; - @action save = async () => { + @action + save = async () => { if (this.isSaving) return this; this.isSaving = true; @@ -196,7 +207,8 @@ class Document extends BaseModel { return this; }; - @action move = async (parentDocumentId: ?string) => { + @action + move = async (parentDocumentId: ?string) => { try { const res = await client.post('/documents.move', { id: this.id, @@ -214,7 +226,8 @@ class Document extends BaseModel { return; }; - @action delete = async () => { + @action + delete = async () => { try { await client.post('/documents.delete', { id: this.id }); this.emit('documents.delete', { @@ -232,7 +245,9 @@ class Document extends BaseModel { const a = window.document.createElement('a'); a.textContent = 'download'; a.download = `${this.title}.md`; - a.href = `data:text/markdown;charset=UTF-8,${encodeURIComponent(this.text)}`; + a.href = `data:text/markdown;charset=UTF-8,${encodeURIComponent( + this.text + )}`; a.click(); } diff --git a/app/scenes/Collection/Collection.js b/app/scenes/Collection/Collection.js index 14229c53..193e58de 100644 --- a/app/scenes/Collection/Collection.js +++ b/app/scenes/Collection/Collection.js @@ -20,7 +20,8 @@ type Props = { match: Object, }; -@observer class CollectionScene extends Component { +@observer +class CollectionScene extends Component { props: Props; @observable collection: ?Collection; @observable isFetching = true; @@ -56,11 +57,8 @@ type Props = {

    Create a document

    - Publish your first document to start building the - {' '} - {this.collection.name} - {' '} - collection. + Publish your first document to start building the{' '} + {this.collection.name} collection. @@ -76,9 +74,11 @@ type Props = { return ( - {this.isFetching - ? - : this.renderEmptyCollection()} + {this.isFetching ? ( + + ) : ( + this.renderEmptyCollection() + )} ); } diff --git a/app/scenes/CollectionDelete/CollectionDelete.js b/app/scenes/CollectionDelete/CollectionDelete.js index a7935975..553a84ed 100644 --- a/app/scenes/CollectionDelete/CollectionDelete.js +++ b/app/scenes/CollectionDelete/CollectionDelete.js @@ -17,7 +17,8 @@ type Props = { onSubmit: () => void, }; -@observer class CollectionDelete extends Component { +@observer +class CollectionDelete extends Component { props: Props; @observable isDeleting: boolean; @@ -42,12 +43,9 @@ type Props = {
    - Are you sure? Deleting the - {' '} - {collection.name} - {' '} - collection is permanant and will also delete all of the documents within - it, so be careful with that. + Are you sure? Deleting the {collection.name}{' '} + collection is permanant and will also delete all of the documents + within it, so be careful with that.