coop-cloud-chaos-patchs/outline
coop-cloud-chaos-patchs
/
outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore: Move to prettier standard double quotes (#1309)

This commit is contained in:
Tom Moor 2020-06-20 13:59:15 -07:00 committed by GitHub
parent 2a3b9e2104
commit f43deb7940
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
444 changed files with 5988 additions and 5977 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
.eslintrc
View File

@ -6,7 +6,10 @@
"plugin:import/warnings",
"plugin:flowtype/recommended"
],
"plugins": ["prettier", "flowtype"],
"plugins": [
"prettier",
"flowtype"
],
"rules": {
"eqeqeq": 2,
"no-unused-vars": 2,
@ -18,14 +21,19 @@
"annotationStyle": "line"
}
],
"flowtype/space-after-type-colon": [2, "always"],
"flowtype/space-before-type-colon": [2, "never"],
"flowtype/space-after-type-colon": [
2,
"always"
],
"flowtype/space-before-type-colon": [
2,
"never"
],
"prettier/prettier": [
"error",
{
"printWidth": 80,
"trailingComma": "es5",
"singleQuote": true
"trailingComma": "es5"
}
]
},
@ -34,11 +42,14 @@
"createClass": "createReactClass",
"pragma": "React",
"version": "detect",
"flowVersion": "0.86"
"flowVersion": "0.86"
},
"import/resolver": {
"node": {
"paths": ["app", "."]
"paths": [
"app",
"."
]
}
},
"flowtype": {
@ -57,4 +68,4 @@
"afterAll": true,
"Sentry": true
}
}
}

8
app/components/Actions.js
View File

@ -1,7 +1,7 @@
// @flow
import styled from 'styled-components';
import breakpoint from 'styled-components-breakpoint';
import Flex from 'shared/components/Flex';
import styled from "styled-components";
import breakpoint from "styled-components-breakpoint";
import Flex from "shared/components/Flex";
export const Action = styled(Flex)`
justify-content: center;
@ -40,7 +40,7 @@ const Actions = styled(Flex)`
display: none;
}
${breakpoint('tablet')`
${breakpoint("tablet")`
left: auto;
padding: 24px;
`};

12
app/components/Alert.js
View File

@ -1,18 +1,18 @@
// @flow
import * as React from 'react';
import { observer } from 'mobx-react';
import Flex from 'shared/components/Flex';
import styled from 'styled-components';
import * as React from "react";
import { observer } from "mobx-react";
import Flex from "shared/components/Flex";
import styled from "styled-components";
type Props = {
children: React.Node,
type?: 'info' | 'success' | 'warning' | 'danger' | 'offline',
type?: "info" | "success" | "warning" | "danger" | "offline",
};
@observer
class Alert extends React.Component<Props> {
defaultProps = {
type: 'info',
type: "info",
};
render() {

12
app/components/Analytics.js
View File

@ -1,6 +1,6 @@
// @flow
/* global ga */
import * as React from 'react';
import * as React from "react";
type Props = {
children?: React.Node,
@ -20,12 +20,12 @@ export default class Analytics extends React.Component<Props> {
// $FlowIssue
ga.l = +new Date();
ga('create', process.env.GOOGLE_ANALYTICS_ID, 'auto');
ga('set', { dimension1: 'true' });
ga('send', 'pageview');
ga("create", process.env.GOOGLE_ANALYTICS_ID, "auto");
ga("set", { dimension1: "true" });
ga("send", "pageview");
const script = document.createElement('script');
script.src = 'https://www.google-analytics.com/analytics.js';
const script = document.createElement("script");
script.src = "https://www.google-analytics.com/analytics.js";
script.async = true;
if (document.body) {

12
app/components/Authenticated.js
View File

@ -1,9 +1,9 @@
// @flow
import * as React from 'react';
import { observer, inject } from 'mobx-react';
import AuthStore from 'stores/AuthStore';
import LoadingIndicator from 'components/LoadingIndicator';
import { isCustomSubdomain } from 'shared/utils/domains';
import * as React from "react";
import { observer, inject } from "mobx-react";
import AuthStore from "stores/AuthStore";
import LoadingIndicator from "components/LoadingIndicator";
import { isCustomSubdomain } from "shared/utils/domains";
type Props = {
auth: AuthStore,
@ -38,4 +38,4 @@ const Authenticated = observer(({ auth, children }: Props) => {
return null;
});
export default inject('auth')(Authenticated);
export default inject("auth")(Authenticated);

10
app/components/Avatar/Avatar.js
View File

@ -1,9 +1,9 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
import placeholder from './placeholder.png';
import * as React from "react";
import styled from "styled-components";
import { observable } from "mobx";
import { observer } from "mobx-react";
import placeholder from "./placeholder.png";
type Props = {
src: string,

24
app/components/Avatar/AvatarWithPresence.js
View File

@ -1,14 +1,14 @@
// @flow
import * as React from 'react';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
import styled from 'styled-components';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import Avatar from 'components/Avatar';
import Tooltip from 'components/Tooltip';
import User from 'models/User';
import UserProfile from 'scenes/UserProfile';
import { EditIcon } from 'outline-icons';
import * as React from "react";
import { observable } from "mobx";
import { observer } from "mobx-react";
import styled from "styled-components";
import distanceInWordsToNow from "date-fns/distance_in_words_to_now";
import Avatar from "components/Avatar";
import Tooltip from "components/Tooltip";
import User from "models/User";
import UserProfile from "scenes/UserProfile";
import { EditIcon } from "outline-icons";
type Props = {
user: User,
@ -44,10 +44,10 @@ class AvatarWithPresence extends React.Component<Props> {
<Tooltip
tooltip={
<Centered>
<strong>{user.name}</strong> {isCurrentUser && '(You)'}
<strong>{user.name}</strong> {isCurrentUser && "(You)"}
<br />
{isPresent
? isEditing ? 'currently editing' : 'currently viewing'
? isEditing ? "currently editing" : "currently viewing"
: `viewed ${distanceInWordsToNow(new Date(lastViewedAt))} ago`}
</Centered>
}

4
app/components/Avatar/index.js
View File

@ -1,6 +1,6 @@
// @flow
import Avatar from './Avatar';
import AvatarWithPresence from './AvatarWithPresence';
import Avatar from "./Avatar";
import AvatarWithPresence from "./AvatarWithPresence";
export { AvatarWithPresence };
export default Avatar;

2
app/components/Badge.js
View File

@ -1,5 +1,5 @@
// @flow
import styled from 'styled-components';
import styled from "styled-components";
const Badge = styled.span`
margin-left: 10px;

20
app/components/Button.js
View File

@ -1,8 +1,8 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import { darken, lighten } from 'polished';
import { ExpandedIcon } from 'outline-icons';
import * as React from "react";
import styled from "styled-components";
import { darken, lighten } from "polished";
import { ExpandedIcon } from "outline-icons";
const RealButton = styled.button`
display: inline-block;
@ -54,10 +54,10 @@ const RealButton = styled.button`
background: ${props.theme.buttonNeutralBackground};
color: ${props.theme.buttonNeutralText};
box-shadow: ${
props.borderOnHover ? 'none' : 'rgba(0, 0, 0, 0.07) 0px 1px 2px'
props.borderOnHover ? "none" : "rgba(0, 0, 0, 0.07) 0px 1px 2px"
};
border: 1px solid ${
props.borderOnHover ? 'transparent' : props.theme.buttonNeutralBorder
props.borderOnHover ? "transparent" : props.theme.buttonNeutralBorder
};
svg {
@ -102,7 +102,7 @@ const Label = styled.span`
white-space: nowrap;
text-overflow: ellipsis;
${props => props.hasIcon && 'padding-left: 4px;'};
${props => props.hasIcon && "padding-left: 4px;"};
`;
export const Inner = styled.span`
@ -113,8 +113,8 @@ export const Inner = styled.span`
justify-content: center;
align-items: center;
${props => props.hasIcon && props.hasText && 'padding-left: 4px;'};
${props => props.hasIcon && !props.hasText && 'padding: 0 4px;'};
${props => props.hasIcon && props.hasText && "padding-left: 4px;"};
${props => props.hasIcon && !props.hasText && "padding: 0 4px;"};
`;
export type Props = {
@ -130,7 +130,7 @@ export type Props = {
};
function Button({
type = 'text',
type = "text",
icon,
children,
value,

8
app/components/CenteredContent.js
View File

@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import breakpoint from 'styled-components-breakpoint';
import * as React from "react";
import styled from "styled-components";
import breakpoint from "styled-components-breakpoint";
type Props = {
children?: React.Node,
@ -11,7 +11,7 @@ const Container = styled.div`
width: 100%;
padding: 60px 20px;
${breakpoint('tablet')`
${breakpoint("tablet")`
padding: 60px;
`};
`;

14
app/components/Checkbox.js
View File

@ -1,8 +1,8 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import HelpText from 'components/HelpText';
import VisuallyHidden from 'components/VisuallyHidden';
import * as React from "react";
import styled from "styled-components";
import HelpText from "components/HelpText";
import VisuallyHidden from "components/VisuallyHidden";
export type Props = {
checked?: boolean,
@ -15,13 +15,13 @@ export type Props = {
const LabelText = styled.span`
font-weight: 500;
margin-left: ${props => (props.small ? '6px' : '10px')};
${props => (props.small ? `color: ${props.theme.textSecondary}` : '')};
margin-left: ${props => (props.small ? "6px" : "10px")};
${props => (props.small ? `color: ${props.theme.textSecondary}` : "")};
`;
const Wrapper = styled.div`
padding-bottom: 8px;
${props => (props.small ? 'font-size: 14px' : '')};
${props => (props.small ? "font-size: 14px" : "")};
`;
const Label = styled.label`

4
app/components/ClickablePadding.js
View File

@ -1,9 +1,9 @@
// @flow
import styled from 'styled-components';
import styled from "styled-components";
const ClickablePadding = styled.div`
min-height: 10em;
cursor: ${({ onClick }) => (onClick ? 'text' : 'default')};
cursor: ${({ onClick }) => (onClick ? "text" : "default")};
${({ grow }) => grow && `flex-grow: 100;`};
`;

20
app/components/Collaborators.js
View File

@ -1,14 +1,14 @@
// @flow
import * as React from 'react';
import { observer, inject } from 'mobx-react';
import { sortBy, keyBy } from 'lodash';
import { MAX_AVATAR_DISPLAY } from 'shared/constants';
import * as React from "react";
import { observer, inject } from "mobx-react";
import { sortBy, keyBy } from "lodash";
import { MAX_AVATAR_DISPLAY } from "shared/constants";
import { AvatarWithPresence } from 'components/Avatar';
import Facepile from 'components/Facepile';
import Document from 'models/Document';
import ViewsStore from 'stores/ViewsStore';
import DocumentPresenceStore from 'stores/DocumentPresenceStore';
import { AvatarWithPresence } from "components/Avatar";
import Facepile from "components/Facepile";
import Document from "models/Document";
import ViewsStore from "stores/ViewsStore";
import DocumentPresenceStore from "stores/DocumentPresenceStore";
type Props = {
views: ViewsStore,
@ -73,4 +73,4 @@ class Collaborators extends React.Component<Props> {
}
}
export default inject('views', 'presence')(Collaborators);
export default inject("views", "presence")(Collaborators);

24
app/components/CollectionIcon.js
View File

@ -1,11 +1,11 @@
// @flow
import * as React from 'react';
import { inject, observer } from 'mobx-react';
import { getLuminance } from 'polished';
import { PrivateCollectionIcon, CollectionIcon } from 'outline-icons';
import Collection from 'models/Collection';
import { icons } from 'components/IconPicker';
import UiStore from 'stores/UiStore';
import * as React from "react";
import { inject, observer } from "mobx-react";
import { getLuminance } from "polished";
import { PrivateCollectionIcon, CollectionIcon } from "outline-icons";
import Collection from "models/Collection";
import { icons } from "components/IconPicker";
import UiStore from "stores/UiStore";
type Props = {
collection: Collection,
@ -18,18 +18,18 @@ function ResolvedCollectionIcon({ collection, expanded, size, ui }: Props) {
// If the chosen icon color is very dark then we invert it in dark mode
// otherwise it will be impossible to see against the dark background.
const color =
ui.resolvedTheme === 'dark'
ui.resolvedTheme === "dark"
? getLuminance(collection.color) > 0.12
? collection.color
: 'currentColor'
: "currentColor"
: collection.color;
if (collection.icon && collection.icon !== 'collection') {
if (collection.icon && collection.icon !== "collection") {
try {
const Component = icons[collection.icon].component;
return <Component color={color} size={size} />;
} catch (error) {
console.warn('Failed to render custom icon ' + collection.icon);
console.warn("Failed to render custom icon " + collection.icon);
}
}
@ -42,4 +42,4 @@ function ResolvedCollectionIcon({ collection, expanded, size, ui }: Props) {
return <CollectionIcon color={color} expanded={expanded} size={size} />;
}
export default inject('ui')(observer(ResolvedCollectionIcon));
export default inject("ui")(observer(ResolvedCollectionIcon));

6
app/components/CopyToClipboard.js
View File

@ -1,6 +1,6 @@
// @flow
import * as React from 'react';
import copy from 'copy-to-clipboard';
import * as React from "react";
import copy from "copy-to-clipboard";
type Props = {
text: string,
@ -19,7 +19,7 @@ class CopyToClipboard extends React.PureComponent<Props> {
if (onCopy) onCopy();
if (elem && elem.props && typeof elem.props.onClick === 'function') {
if (elem && elem.props && typeof elem.props.onClick === "function") {
elem.props.onClick(ev);
}
};

30
app/components/DocumentHistory/DocumentHistory.js
View File

@ -1,20 +1,20 @@
// @flow
import * as React from 'react';
import { observable, action } from 'mobx';
import { observer, inject } from 'mobx-react';
import type { RouterHistory } from 'react-router-dom';
import styled from 'styled-components';
import { Waypoint } from 'react-waypoint';
import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
import * as React from "react";
import { observable, action } from "mobx";
import { observer, inject } from "mobx-react";
import type { RouterHistory } from "react-router-dom";
import styled from "styled-components";
import { Waypoint } from "react-waypoint";
import ArrowKeyNavigation from "boundless-arrow-key-navigation";
import { DEFAULT_PAGINATION_LIMIT } from 'stores/BaseStore';
import DocumentsStore from 'stores/DocumentsStore';
import RevisionsStore from 'stores/RevisionsStore';
import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
import DocumentsStore from "stores/DocumentsStore";
import RevisionsStore from "stores/RevisionsStore";
import Flex from 'shared/components/Flex';
import { ListPlaceholder } from 'components/LoadingPlaceholder';
import Revision from './components/Revision';
import { documentHistoryUrl } from 'utils/routeHelpers';
import Flex from "shared/components/Flex";
import { ListPlaceholder } from "components/LoadingPlaceholder";
import Revision from "./components/Revision";
import { documentHistoryUrl } from "utils/routeHelpers";
type Props = {
match: Object,
@ -146,4 +146,4 @@ const Sidebar = styled(Flex)`
z-index: 1;
`;
export default inject('documents', 'revisions')(DocumentHistory);
export default inject("documents", "revisions")(DocumentHistory);

28
app/components/DocumentHistory/components/Revision.js
View File

@ -1,18 +1,18 @@
// @flow
import * as React from 'react';
import { NavLink } from 'react-router-dom';
import styled, { withTheme } from 'styled-components';
import format from 'date-fns/format';
import { MoreIcon } from 'outline-icons';
import * as React from "react";
import { NavLink } from "react-router-dom";
import styled, { withTheme } from "styled-components";
import format from "date-fns/format";
import { MoreIcon } from "outline-icons";
import Flex from 'shared/components/Flex';
import Time from 'shared/components/Time';
import Avatar from 'components/Avatar';
import RevisionMenu from 'menus/RevisionMenu';
import Document from 'models/Document';
import Revision from 'models/Revision';
import Flex from "shared/components/Flex";
import Time from "shared/components/Time";
import Avatar from "components/Avatar";
import RevisionMenu from "menus/RevisionMenu";
import Document from "models/Document";
import Revision from "models/Revision";
import { documentHistoryUrl } from 'utils/routeHelpers';
import { documentHistoryUrl } from "utils/routeHelpers";
type Props = {
theme: Object,
@ -32,12 +32,12 @@ class RevisionListItem extends React.Component<Props> {
activeStyle={{ background: theme.primary, color: theme.white }}
>
<Author>
<StyledAvatar src={revision.createdBy.avatarUrl} />{' '}
<StyledAvatar src={revision.createdBy.avatarUrl} />{" "}
{revision.createdBy.name}
</Author>
<Meta>
<Time dateTime={revision.createdAt}>
{format(revision.createdAt, 'MMMM Do, YYYY h:mm a')}
{format(revision.createdAt, "MMMM Do, YYYY h:mm a")}
</Time>
</Meta>
{showMenu && (

2
app/components/DocumentHistory/index.js
View File

@ -1,3 +1,3 @@
// @flow
import DocumentHistory from './DocumentHistory';
import DocumentHistory from "./DocumentHistory";
export default DocumentHistory;

8
app/components/DocumentList.js
View File

@ -1,8 +1,8 @@
// @flow
import * as React from 'react';
import Document from 'models/Document';
import DocumentPreview from 'components/DocumentPreview';
import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
import * as React from "react";
import Document from "models/Document";
import DocumentPreview from "components/DocumentPreview";
import ArrowKeyNavigation from "boundless-arrow-key-navigation";
type Props = {
documents: Document[],

34
app/components/DocumentPreview/DocumentPreview.js
View File

@ -1,16 +1,16 @@
// @flow
import * as React from 'react';
import { observer } from 'mobx-react';
import { Link } from 'react-router-dom';
import { StarredIcon } from 'outline-icons';
import styled, { withTheme } from 'styled-components';
import Flex from 'shared/components/Flex';
import Badge from 'components/Badge';
import Tooltip from 'components/Tooltip';
import Highlight from 'components/Highlight';
import PublishingInfo from 'components/PublishingInfo';
import DocumentMenu from 'menus/DocumentMenu';
import Document from 'models/Document';
import * as React from "react";
import { observer } from "mobx-react";
import { Link } from "react-router-dom";
import { StarredIcon } from "outline-icons";
import styled, { withTheme } from "styled-components";
import Flex from "shared/components/Flex";
import Badge from "components/Badge";
import Tooltip from "components/Tooltip";
import Highlight from "components/Highlight";
import PublishingInfo from "components/PublishingInfo";
import DocumentMenu from "menus/DocumentMenu";
import Document from "models/Document";
type Props = {
document: Document,
@ -26,7 +26,7 @@ const StyledStar = withTheme(styled(({ solid, theme, ...props }) => (
<StarredIcon color={theme.text} {...props} />
))`
flex-shrink: 0;
opacity: ${props => (props.solid ? '1 !important' : 0)};
opacity: ${props => (props.solid ? "1 !important" : 0)};
transition: all 100ms ease-in-out;
&:hover {
@ -82,8 +82,8 @@ const Heading = styled.h3`
margin-bottom: 0.25em;
overflow: hidden;
white-space: nowrap;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
`;
const Actions = styled(Flex)`
@ -124,7 +124,7 @@ class DocumentPreview extends React.Component<Props> {
replaceResultMarks = (tag: string) => {
// don't use SEARCH_RESULT_REGEX here as it causes
// an infinite loop to trigger a regex inside it's own callback
return tag.replace(/<b\b[^>]*>(.*?)<\/b>/gi, '$1');
return tag.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
};
render() {
@ -152,7 +152,7 @@ class DocumentPreview extends React.Component<Props> {
{...rest}
>
<Heading>
<Title text={document.title || 'Untitled'} highlight={highlight} />
<Title text={document.title || "Untitled"} highlight={highlight} />
{!document.isDraft &&
!document.isArchived && (
<Actions>

2
app/components/DocumentPreview/index.js
View File

@ -1,3 +1,3 @@
// @flow
import DocumentPreview from './DocumentPreview';
import DocumentPreview from "./DocumentPreview";
export default DocumentPreview;

24
app/components/DropToImport.js
View File

@ -1,14 +1,14 @@
// @flow
import * as React from 'react';
import { observable } from 'mobx';
import { observer, inject } from 'mobx-react';
import { withRouter, type RouterHistory } from 'react-router-dom';
import { createGlobalStyle } from 'styled-components';
import invariant from 'invariant';
import importFile from 'utils/importFile';
import Dropzone from 'react-dropzone';
import DocumentsStore from 'stores/DocumentsStore';
import LoadingIndicator from 'components/LoadingIndicator';
import * as React from "react";
import { observable } from "mobx";
import { observer, inject } from "mobx-react";
import { withRouter, type RouterHistory } from "react-router-dom";
import { createGlobalStyle } from "styled-components";
import invariant from "invariant";
import importFile from "utils/importFile";
import Dropzone from "react-dropzone";
import DocumentsStore from "stores/DocumentsStore";
import LoadingIndicator from "components/LoadingIndicator";
const EMPTY_OBJECT = {};
let importingLock = false;
@ -56,7 +56,7 @@ class DropToImport extends React.Component<Props> {
if (documentId && !collectionId) {
const document = await this.props.documents.fetch(documentId);
invariant(document, 'Document not available');
invariant(document, "Document not available");
collectionId = document.collectionId;
}
@ -110,4 +110,4 @@ class DropToImport extends React.Component<Props> {
}
}
export default inject('documents')(withRouter(DropToImport));
export default inject("documents")(withRouter(DropToImport));

74
app/components/DropdownMenu/DropdownMenu.js
View File

@ -1,14 +1,14 @@
// @flow
import * as React from 'react';
import invariant from 'invariant';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
import { PortalWithState } from 'react-portal';
import { MoreIcon } from 'outline-icons';
import styled from 'styled-components';
import Flex from 'shared/components/Flex';
import { fadeAndScaleIn } from 'shared/styles/animations';
import NudeButton from 'components/NudeButton';
import * as React from "react";
import invariant from "invariant";
import { observable } from "mobx";
import { observer } from "mobx-react";
import { PortalWithState } from "react-portal";
import { MoreIcon } from "outline-icons";
import styled from "styled-components";
import Flex from "shared/components/Flex";
import { fadeAndScaleIn } from "shared/styles/animations";
import NudeButton from "components/NudeButton";
let previousClosePortal;
let counter = 0;
@ -25,7 +25,7 @@ type Props = {
className?: string,
hover?: boolean,
style?: Object,
position?: 'left' | 'right' | 'center',
position?: "left" | "right" | "center",
};
@observer
@ -37,7 +37,7 @@ class DropdownMenu extends React.Component<Props> {
@observable bottom: ?number;
@observable right: ?number;
@observable left: ?number;
@observable position: 'left' | 'right' | 'center';
@observable position: "left" | "right" | "center";
@observable fixed: ?boolean;
@observable bodyRect: ClientRect;
@observable labelRect: ClientRect;
@ -51,21 +51,21 @@ class DropdownMenu extends React.Component<Props> {
return (ev: SyntheticMouseEvent<HTMLElement>) => {
ev.preventDefault();
const currentTarget = ev.currentTarget;
invariant(document.body, 'why you not here');
invariant(document.body, "why you not here");
if (currentTarget instanceof HTMLDivElement) {
this.bodyRect = document.body.getBoundingClientRect();
this.labelRect = currentTarget.getBoundingClientRect();
this.top = this.labelRect.bottom - this.bodyRect.top;
this.bottom = undefined;
this.position = this.props.position || 'left';
this.position = this.props.position || "left";
if (currentTarget.parentElement) {
const triggerParentStyle = getComputedStyle(
currentTarget.parentElement
);
if (triggerParentStyle.position === 'static') {
if (triggerParentStyle.position === "static") {
this.fixed = true;
this.top = this.labelRect.bottom;
}
@ -84,10 +84,10 @@ class DropdownMenu extends React.Component<Props> {
};
initPosition() {
if (this.position === 'left') {
if (this.position === "left") {
this.right =
this.bodyRect.width - this.labelRect.left - this.labelRect.width;
} else if (this.position === 'center') {
} else if (this.position === "center") {
this.left = this.labelRect.left + this.labelRect.width / 2;
} else {
this.left = this.labelRect.left;
@ -95,7 +95,7 @@ class DropdownMenu extends React.Component<Props> {
}
onOpen = () => {
if (typeof this.props.onOpen === 'function') {
if (typeof this.props.onOpen === "function") {
this.props.onOpen();
}
this.fitOnTheScreen();
@ -114,18 +114,18 @@ class DropdownMenu extends React.Component<Props> {
this.bottom = undefined;
}
if (this.position === 'left' || this.position === 'right') {
if (this.position === "left" || this.position === "right") {
const totalWidth =
Math.sign(this.position === 'left' ? -1 : 1) * el.offsetLeft +
Math.sign(this.position === "left" ? -1 : 1) * el.offsetLeft +
el.scrollWidth;
const isVisible = totalWidth < window.innerWidth;
if (!isVisible) {
if (this.position === 'right') {
this.position = 'left';
if (this.position === "right") {
this.position = "left";
this.left = undefined;
} else if (this.position === 'left') {
this.position = 'right';
} else if (this.position === "left") {
this.position = "right";
this.right = undefined;
}
}
@ -177,7 +177,7 @@ class DropdownMenu extends React.Component<Props> {
<NudeButton
id={`${this.id}button`}
aria-haspopup="true"
aria-expanded={isOpen ? 'true' : 'false'}
aria-expanded={isOpen ? "true" : "false"}
aria-controls={this.id}
>
<MoreIcon />
@ -201,7 +201,7 @@ class DropdownMenu extends React.Component<Props> {
hover ? this.closeAfterTimeout(closePortal) : undefined
}
onClick={
typeof children === 'function'
typeof children === "function"
? undefined
: ev => {
ev.stopPropagation();
@ -213,7 +213,7 @@ class DropdownMenu extends React.Component<Props> {
aria-labelledby={`${this.id}button`}
role="menu"
>
{typeof children === 'function'
{typeof children === "function"
? children({ closePortal })
: children}
</Menu>
@ -228,35 +228,35 @@ class DropdownMenu extends React.Component<Props> {
}
const Label = styled(Flex).attrs({
justify: 'center',
align: 'center',
justify: "center",
align: "center",
})`
z-index: 1000;
cursor: pointer;
`;
const Position = styled.div`
position: ${({ fixed }) => (fixed ? 'fixed' : 'absolute')};
position: ${({ fixed }) => (fixed ? "fixed" : "absolute")};
display: flex;
${({ left }) => (left !== undefined ? `left: ${left}px` : '')};
${({ right }) => (right !== undefined ? `right: ${right}px` : '')};
${({ top }) => (top !== undefined ? `top: ${top}px` : '')};
${({ bottom }) => (bottom !== undefined ? `bottom: ${bottom}px` : '')};
${({ left }) => (left !== undefined ? `left: ${left}px` : "")};
${({ right }) => (right !== undefined ? `right: ${right}px` : "")};
${({ top }) => (top !== undefined ? `top: ${top}px` : "")};
${({ bottom }) => (bottom !== undefined ? `bottom: ${bottom}px` : "")};
max-height: 75%;
z-index: 1000;
transform: ${props =>
props.position === 'center' ? 'translateX(-50%)' : 'initial'};
props.position === "center" ? "translateX(-50%)" : "initial"};
pointer-events: none;
`;
const Menu = styled.div`
animation: ${fadeAndScaleIn} 200ms ease;
transform-origin: ${props => (props.left !== undefined ? '25%' : '75%')} 0;
transform-origin: ${props => (props.left !== undefined ? "25%" : "75%")} 0;
background: ${props => props.theme.menuBackground};
${props =>
props.theme.menuBorder
? `border: 1px solid ${props.theme.menuBorder}`
: ''};
: ""};
border-radius: 2px;
padding: 0.5em 0;
min-width: 180px;

12
app/components/DropdownMenu/DropdownMenuItem.js
View File

@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
import { CheckmarkIcon } from 'outline-icons';
import styled from 'styled-components';
import * as React from "react";
import { CheckmarkIcon } from "outline-icons";
import styled from "styled-components";
type Props = {
onClick?: (SyntheticEvent<>) => void | Promise<void>,
@ -28,7 +28,7 @@ const DropdownMenuItem = ({
{selected !== undefined && (
<React.Fragment>
<CheckmarkIcon
color={selected === false ? 'transparent' : undefined}
color={selected === false ? "transparent" : undefined}
/>&nbsp;
</React.Fragment>
)}
@ -57,12 +57,12 @@ const MenuItem = styled.a`
}
svg {
opacity: ${props => (props.disabled ? '.5' : 1)};
opacity: ${props => (props.disabled ? ".5" : 1)};
}
${props =>
props.disabled
? 'pointer-events: none;'
? "pointer-events: none;"
: `
&:hover {

4
app/components/DropdownMenu/index.js
View File

@ -1,3 +1,3 @@
// @flow
export { default as DropdownMenu } from './DropdownMenu';
export { default as DropdownMenuItem } from './DropdownMenuItem';
export { default as DropdownMenu } from "./DropdownMenu";
export { default as DropdownMenuItem } from "./DropdownMenuItem";

30
app/components/Editor/Editor.js
View File

@ -1,16 +1,16 @@
// @flow
import * as React from 'react';
import { withRouter, type RouterHistory } from 'react-router-dom';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
import { lighten } from 'polished';
import styled, { withTheme } from 'styled-components';
import RichMarkdownEditor from 'rich-markdown-editor';
import { uploadFile } from 'utils/uploadFile';
import isInternalUrl from 'utils/isInternalUrl';
import Tooltip from 'components/Tooltip';
import UiStore from 'stores/UiStore';
import embeds from '../../embeds';
import * as React from "react";
import { withRouter, type RouterHistory } from "react-router-dom";
import { observable } from "mobx";
import { observer } from "mobx-react";
import { lighten } from "polished";
import styled, { withTheme } from "styled-components";
import RichMarkdownEditor from "rich-markdown-editor";
import { uploadFile } from "utils/uploadFile";
import isInternalUrl from "utils/isInternalUrl";
import Tooltip from "components/Tooltip";
import UiStore from "stores/UiStore";
import embeds from "../../embeds";
const EMPTY_ARRAY = [];
@ -36,7 +36,7 @@ class Editor extends React.Component<Props> {
onClickLink = (href: string) => {
// on page hash
if (href[0] === '#') {
if (href[0] === "#") {
window.location.href = href;
return;
}
@ -46,7 +46,7 @@ class Editor extends React.Component<Props> {
let navigateTo = href;
// probably absolute
if (href[0] !== '/') {
if (href[0] !== "/") {
try {
const url = new URL(href);
navigateTo = url.pathname + url.hash;
@ -57,7 +57,7 @@ class Editor extends React.Component<Props> {
this.props.history.push(navigateTo);
} else {
window.open(href, '_blank');
window.open(href, "_blank");
}
};

2
app/components/Editor/index.js
View File

@ -1,3 +1,3 @@
// @flow
import Editor from './Editor';
import Editor from "./Editor";
export default Editor;

4
app/components/Empty.js
View File

@ -1,6 +1,6 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import * as React from "react";
import styled from "styled-components";
type Props = {
children: React.Node,

22
app/components/ErrorBoundary.js
View File

@ -1,13 +1,13 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import { observer } from 'mobx-react';
import { observable } from 'mobx';
import HelpText from 'components/HelpText';
import Button from 'components/Button';
import CenteredContent from 'components/CenteredContent';
import PageTitle from 'components/PageTitle';
import { githubIssuesUrl } from '../../shared/utils/routeHelpers';
import * as React from "react";
import styled from "styled-components";
import { observer } from "mobx-react";
import { observable } from "mobx";
import HelpText from "components/HelpText";
import Button from "components/Button";
import CenteredContent from "components/CenteredContent";
import PageTitle from "components/PageTitle";
import { githubIssuesUrl } from "../../shared/utils/routeHelpers";
type Props = {
children: React.Node,
@ -49,12 +49,12 @@ class ErrorBoundary extends React.Component<Props> {
<h1>Something Unexpected Happened</h1>
<HelpText>
Sorry, an unrecoverable error occurred{isReported &&
' – our engineers have been notified'}. Please try reloading the
" – our engineers have been notified"}. Please try reloading the
page, it may have been a temporary glitch.
</HelpText>
{this.showDetails && <Pre>{this.error.toString()}</Pre>}
<p>
<Button onClick={this.handleReload}>Reload</Button>{' '}
<Button onClick={this.handleReload}>Reload</Button>{" "}
{this.showDetails ? (
<Button onClick={this.handleReportBug} neutral>
Report a Bug…

14
app/components/Facepile.js
View File

@ -1,10 +1,10 @@
// @flow
import * as React from 'react';
import { observer, inject } from 'mobx-react';
import styled, { withTheme } from 'styled-components';
import Flex from 'shared/components/Flex';
import Avatar from 'components/Avatar';
import User from 'models/User';
import * as React from "react";
import { observer, inject } from "mobx-react";
import styled, { withTheme } from "styled-components";
import Flex from "shared/components/Flex";
import Avatar from "components/Avatar";
import User from "models/User";
type Props = {
users: User[],
@ -73,4 +73,4 @@ const Avatars = styled(Flex)`
cursor: pointer;
`;
export default inject('views', 'presence')(withTheme(Facepile));
export default inject("views", "presence")(withTheme(Facepile));

6
app/components/Fade.js
View File

@ -1,9 +1,9 @@
// @flow
import styled from 'styled-components';
import { fadeIn } from 'shared/styles/animations';
import styled from "styled-components";
import { fadeIn } from "shared/styles/animations";
const Fade = styled.span`
animation: ${fadeIn} ${props => props.timing || '250ms'} ease-in-out;
animation: ${fadeIn} ${props => props.timing || "250ms"} ease-in-out;
`;
export default Fade;

30
app/components/GroupListItem.js
View File

@ -1,17 +1,17 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import { observable } from 'mobx';
import { observer, inject } from 'mobx-react';
import { MAX_AVATAR_DISPLAY } from 'shared/constants';
import Modal from 'components/Modal';
import Flex from 'shared/components/Flex';
import Facepile from 'components/Facepile';
import GroupMembers from 'scenes/GroupMembers';
import ListItem from 'components/List/Item';
import Group from 'models/Group';
import CollectionGroupMembership from 'models/CollectionGroupMembership';
import GroupMembershipsStore from 'stores/GroupMembershipsStore';
import * as React from "react";
import styled from "styled-components";
import { observable } from "mobx";
import { observer, inject } from "mobx-react";
import { MAX_AVATAR_DISPLAY } from "shared/constants";
import Modal from "components/Modal";
import Flex from "shared/components/Flex";
import Facepile from "components/Facepile";
import GroupMembers from "scenes/GroupMembers";
import ListItem from "components/List/Item";
import Group from "models/Group";
import CollectionGroupMembership from "models/CollectionGroupMembership";
import GroupMembershipsStore from "stores/GroupMembershipsStore";
type Props = {
group: Group,
@ -53,7 +53,7 @@ class GroupListItem extends React.Component<Props> {
}
subtitle={
<React.Fragment>
{memberCount} member{memberCount === 1 ? '' : 's'}
{memberCount} member{memberCount === 1 ? "" : "s"}
</React.Fragment>
}
actions={
@ -91,4 +91,4 @@ const Title = styled.span`
}
`;
export default inject('groupMemberships')(GroupListItem);
export default inject("groupMemberships")(GroupListItem);

2
app/components/Heading.js
View File

@ -1,5 +1,5 @@
// @flow
import styled from 'styled-components';
import styled from "styled-components";
const Heading = styled.h1`
display: flex;

4
app/components/HelpText.js
View File

@ -1,10 +1,10 @@
// @flow
import styled from 'styled-components';
import styled from "styled-components";
const HelpText = styled.p`
margin-top: 0;
color: ${props => props.theme.textSecondary};
font-size: ${props => (props.small ? '13px' : 'inherit')};
font-size: ${props => (props.small ? "13px" : "inherit")};
`;
export default HelpText;

10
app/components/Highlight.js
View File

@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
import replace from 'string-replace-to-array';
import styled from 'styled-components';
import * as React from "react";
import replace from "string-replace-to-array";
import styled from "styled-components";
type Props = {
highlight: ?string | RegExp,
@ -22,8 +22,8 @@ function Highlight({
regex = highlight;
} else {
regex = new RegExp(
(highlight || '').replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&'),
caseSensitive ? 'g' : 'gi'
(highlight || "").replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&"),
caseSensitive ? "g" : "gi"
);
}
return (

84
app/components/IconPicker.js
View File

@ -1,8 +1,8 @@
// @flow
import * as React from 'react';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
import { TwitterPicker } from 'react-color';
import * as React from "react";
import { observable } from "mobx";
import { observer } from "mobx-react";
import { TwitterPicker } from "react-color";
import {
CollectionIcon,
CoinsIcon,
@ -22,99 +22,99 @@ import {
QuestionMarkIcon,
SunIcon,
VehicleIcon,
} from 'outline-icons';
import styled from 'styled-components';
import { LabelText } from 'components/Input';
import { DropdownMenu } from 'components/DropdownMenu';
import NudeButton from 'components/NudeButton';
import Flex from 'shared/components/Flex';
} from "outline-icons";
import styled from "styled-components";
import { LabelText } from "components/Input";
import { DropdownMenu } from "components/DropdownMenu";
import NudeButton from "components/NudeButton";
import Flex from "shared/components/Flex";
export const icons = {
collection: {
component: CollectionIcon,
keywords: 'collection',
keywords: "collection",
},
coins: {
component: CoinsIcon,
keywords: 'coins money finance sales income revenue cash',
keywords: "coins money finance sales income revenue cash",
},
academicCap: {
component: AcademicCapIcon,
keywords: 'learn teach lesson guide tutorial onboarding training',
keywords: "learn teach lesson guide tutorial onboarding training",
},
beaker: {
component: BeakerIcon,
keywords: 'lab research experiment test',
keywords: "lab research experiment test",
},
buildingBlocks: {
component: BuildingBlocksIcon,
keywords: 'app blocks product prototype',
keywords: "app blocks product prototype",
},
cloud: {
component: CloudIcon,
keywords: 'cloud service aws infrastructure',
keywords: "cloud service aws infrastructure",
},
code: {
component: CodeIcon,
keywords: 'developer api code development engineering programming',
keywords: "developer api code development engineering programming",
},
eye: {
component: EyeIcon,
keywords: 'eye view',
keywords: "eye view",
},
leaf: {
component: LeafIcon,
keywords: 'leaf plant outdoors nature ecosystem climate',
keywords: "leaf plant outdoors nature ecosystem climate",
},
lightbulb: {
component: LightBulbIcon,
keywords: 'lightbulb idea',
keywords: "lightbulb idea",
},
moon: {
component: MoonIcon,
keywords: 'night moon dark',
keywords: "night moon dark",
},
notepad: {
component: NotepadIcon,
keywords: 'journal notepad write notes',
keywords: "journal notepad write notes",
},
padlock: {
component: PadlockIcon,
keywords: 'padlock private security authentication authorization auth',
keywords: "padlock private security authentication authorization auth",
},
palette: {
component: PaletteIcon,
keywords: 'design palette art brand',
keywords: "design palette art brand",
},
pencil: {
component: EditIcon,
keywords: 'copy writing post blog',
keywords: "copy writing post blog",
},
question: {
component: QuestionMarkIcon,
keywords: 'question help support faq',
keywords: "question help support faq",
},
sun: {
component: SunIcon,
keywords: 'day sun weather',
keywords: "day sun weather",
},
vehicle: {
component: VehicleIcon,
keywords: 'truck car travel transport',
keywords: "truck car travel transport",
},
};
const colors = [
'#4E5C6E',
'#0366d6',
'#7F6BFF',
'#E76F51',
'#FC2D2D',
'#FFBE0B',
'#2A9D8F',
'#00D084',
'#EE84F0',
'#2F362F',
"#4E5C6E",
"#0366d6",
"#7F6BFF",
"#E76F51",
"#FC2D2D",
"#FFBE0B",
"#2A9D8F",
"#00D084",
"#EE84F0",
"#2F362F",
];
type Props = {
@ -134,11 +134,11 @@ class IconPicker extends React.Component<Props> {
node: ?HTMLElement;
componentDidMount() {
window.addEventListener('click', this.handleClickOutside);
window.addEventListener("click", this.handleClickOutside);
}
componentWillUnmount() {
window.removeEventListener('click', this.handleClickOutside);
window.removeEventListener("click", this.handleClickOutside);
}
handleClose = () => {
@ -163,7 +163,7 @@ class IconPicker extends React.Component<Props> {
};
render() {
const Component = icons[this.props.icon || 'collection'].component;
const Component = icons[this.props.icon || "collection"].component;
return (
<Wrapper ref={ref => (this.node = ref)}>
@ -230,7 +230,7 @@ const ColorPicker = styled(TwitterPicker)`
background: transparent !important;
`;
const Wrapper = styled('div')`
const Wrapper = styled("div")`
display: inline-block;
position: relative;
`;

34
app/components/Input.js
View File

@ -1,15 +1,15 @@
// @flow
import * as React from 'react';
import { observer } from 'mobx-react';
import { observable } from 'mobx';
import styled from 'styled-components';
import VisuallyHidden from 'components/VisuallyHidden';
import Flex from 'shared/components/Flex';
import * as React from "react";
import { observer } from "mobx-react";
import { observable } from "mobx";
import styled from "styled-components";
import VisuallyHidden from "components/VisuallyHidden";
import Flex from "shared/components/Flex";
const RealTextarea = styled.textarea`
border: 0;
flex: 1;
padding: 8px 12px 8px ${props => (props.hasIcon ? '8px' : '12px')};
padding: 8px 12px 8px ${props => (props.hasIcon ? "8px" : "12px")};
outline: none;
background: none;
color: ${props => props.theme.text};
@ -23,7 +23,7 @@ const RealTextarea = styled.textarea`
const RealInput = styled.input`
border: 0;
flex: 1;
padding: 8px 12px 8px ${props => (props.hasIcon ? '8px' : '12px')};
padding: 8px 12px 8px ${props => (props.hasIcon ? "8px" : "12px")};
outline: none;
background: none;
color: ${props => props.theme.text};
@ -40,10 +40,10 @@ const RealInput = styled.input`
`;
const Wrapper = styled.div`
flex: ${props => (props.flex ? '1' : '0')};
max-width: ${props => (props.short ? '350px' : '100%')};
min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : '0')};
max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : 'initial')};
flex: ${props => (props.flex ? "1" : "0")};
max-width: ${props => (props.short ? "350px" : "100%")};
min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : "0")};
max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : "initial")};
`;
const IconWrapper = styled.span`
@ -56,13 +56,13 @@ const IconWrapper = styled.span`
export const Outline = styled(Flex)`
display: flex;
flex: 1;
margin: ${props => (props.margin !== undefined ? props.margin : '0 0 16px')};
margin: ${props => (props.margin !== undefined ? props.margin : "0 0 16px")};
color: inherit;
border-width: 1px;
border-style: solid;
border-color: ${props =>
props.hasError
? 'red'
? "red"
: props.focused
? props.theme.inputBorderFocused
: props.theme.inputBorder};
@ -118,7 +118,7 @@ class Input extends React.Component<Props> {
render() {
const {
type = 'text',
type = "text",
icon,
label,
margin,
@ -131,7 +131,7 @@ class Input extends React.Component<Props> {
...rest
} = this.props;
const InputComponent = type === 'textarea' ? RealTextarea : RealInput;
const InputComponent = type === "textarea" ? RealTextarea : RealInput;
const wrappedLabel = <LabelText>{label}</LabelText>;
return (
@ -149,7 +149,7 @@ class Input extends React.Component<Props> {
ref={ref => (this.input = ref)}
onBlur={this.handleBlur}
onFocus={this.handleFocus}
type={type === 'textarea' ? undefined : type}
type={type === "textarea" ? undefined : type}
hasIcon={!!icon}
{...rest}
/>

18
app/components/InputRich.js
View File

@ -1,9 +1,9 @@
// @flow
import * as React from 'react';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
import styled, { withTheme } from 'styled-components';
import { LabelText, Outline } from 'components/Input';
import * as React from "react";
import { observable } from "mobx";
import { observer } from "mobx-react";
import styled, { withTheme } from "styled-components";
import { LabelText, Outline } from "components/Input";
type Props = {
label: string,
@ -31,7 +31,7 @@ class InputRich extends React.Component<Props> {
loadEditor = async () => {
try {
const EditorImport = await import('./Editor');
const EditorImport = await import("./Editor");
this.editorComponent = EditorImport.default;
} catch (err) {
console.error(err);
@ -64,7 +64,7 @@ class InputRich extends React.Component<Props> {
{...rest}
/>
) : (
'Loading…'
"Loading…"
)}
</StyledOutline>
</React.Fragment>
@ -74,8 +74,8 @@ class InputRich extends React.Component<Props> {
const StyledOutline = styled(Outline)`
padding: 8px 12px;
min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : '0')};
max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : 'auto')};
min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : "0")};
max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : "auto")};
overflow-y: auto;
> * {

22
app/components/InputSearch.js
View File

@ -1,13 +1,13 @@
// @flow
import * as React from 'react';
import keydown from 'react-keydown';
import { observer } from 'mobx-react';
import { observable } from 'mobx';
import { withRouter, type RouterHistory } from 'react-router-dom';
import styled, { withTheme } from 'styled-components';
import { SearchIcon } from 'outline-icons';
import { searchUrl } from 'utils/routeHelpers';
import Input from './Input';
import * as React from "react";
import keydown from "react-keydown";
import { observer } from "mobx-react";
import { observable } from "mobx";
import { withRouter, type RouterHistory } from "react-router-dom";
import styled, { withTheme } from "styled-components";
import { SearchIcon } from "outline-icons";
import { searchUrl } from "utils/routeHelpers";
import Input from "./Input";
type Props = {
history: RouterHistory,
@ -21,7 +21,7 @@ class InputSearch extends React.Component<Props> {
input: ?Input;
@observable focused: boolean = false;
@keydown('meta+f')
@keydown("meta+f")
focus(ev) {
ev.preventDefault();
@ -46,7 +46,7 @@ class InputSearch extends React.Component<Props> {
};
render() {
const { theme, placeholder = 'Search…' } = this.props;
const { theme, placeholder = "Search…" } = this.props;
return (
<InputMaxWidth

12
app/components/InputSelect.js
View File

@ -1,10 +1,10 @@
// @flow
import * as React from 'react';
import { observer } from 'mobx-react';
import { observable } from 'mobx';
import styled from 'styled-components';
import VisuallyHidden from 'components/VisuallyHidden';
import { Outline, LabelText } from './Input';
import * as React from "react";
import { observer } from "mobx-react";
import { observable } from "mobx";
import styled from "styled-components";
import VisuallyHidden from "components/VisuallyHidden";
import { Outline, LabelText } from "./Input";
const Select = styled.select`
border: 0;

4
app/components/Key.js
View File

@ -1,10 +1,10 @@
// @flow
import styled from 'styled-components';
import styled from "styled-components";
const Key = styled.kbd`
display: inline-block;
padding: 4px 6px;
font: 11px 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
monospace;
line-height: 10px;
color: ${props => props.theme.almostBlack};

8
app/components/Labeled.js
View File

@ -1,8 +1,8 @@
// @flow
import * as React from 'react';
import { observer } from 'mobx-react';
import Flex from 'shared/components/Flex';
import styled from 'styled-components';
import * as React from "react";
import { observer } from "mobx-react";
import Flex from "shared/components/Flex";
import styled from "styled-components";
type Props = {
label: React.Node | string,

56
app/components/Layout.js
View File

@ -1,32 +1,32 @@
// @flow
import * as React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import styled, { withTheme } from 'styled-components';
import breakpoint from 'styled-components-breakpoint';
import { observable } from 'mobx';
import { observer, inject } from 'mobx-react';
import keydown from 'react-keydown';
import Analytics from 'components/Analytics';
import Flex from 'shared/components/Flex';
import * as React from "react";
import { Switch, Route, Redirect } from "react-router-dom";
import { Helmet } from "react-helmet";
import styled, { withTheme } from "styled-components";
import breakpoint from "styled-components-breakpoint";
import { observable } from "mobx";
import { observer, inject } from "mobx-react";
import keydown from "react-keydown";
import Analytics from "components/Analytics";
import Flex from "shared/components/Flex";
import {
homeUrl,
searchUrl,
matchDocumentSlug as slug,
} from 'utils/routeHelpers';
} from "utils/routeHelpers";
import { LoadingIndicatorBar } from 'components/LoadingIndicator';
import { GlobalStyles } from 'components/DropToImport';
import Sidebar from 'components/Sidebar';
import SettingsSidebar from 'components/Sidebar/Settings';
import Modals from 'components/Modals';
import DocumentHistory from 'components/DocumentHistory';
import Modal from 'components/Modal';
import KeyboardShortcuts from 'scenes/KeyboardShortcuts';
import ErrorSuspended from 'scenes/ErrorSuspended';
import AuthStore from 'stores/AuthStore';
import UiStore from 'stores/UiStore';
import DocumentsStore from 'stores/DocumentsStore';
import { LoadingIndicatorBar } from "components/LoadingIndicator";
import { GlobalStyles } from "components/DropToImport";
import Sidebar from "components/Sidebar";
import SettingsSidebar from "components/Sidebar/Settings";
import Modals from "components/Modals";
import DocumentHistory from "components/DocumentHistory";
import Modal from "components/Modal";
import KeyboardShortcuts from "scenes/KeyboardShortcuts";
import ErrorSuspended from "scenes/ErrorSuspended";
import AuthStore from "stores/AuthStore";
import UiStore from "stores/UiStore";
import DocumentsStore from "stores/DocumentsStore";
type Props = {
documents: DocumentsStore,
@ -62,7 +62,7 @@ class Layout extends React.Component<Props> {
window.document.body.style.background = this.props.theme.background;
}
@keydown('shift+/')
@keydown("shift+/")
handleOpenKeyboardShortcuts() {
if (this.props.ui.editMode) return;
this.keyboardShortcutsOpen = true;
@ -72,7 +72,7 @@ class Layout extends React.Component<Props> {
this.keyboardShortcutsOpen = false;
};
@keydown(['t', '/', 'meta+k'])
@keydown(["t", "/", "meta+k"])
goToSearch(ev) {
if (this.props.ui.editMode) return;
ev.preventDefault();
@ -80,7 +80,7 @@ class Layout extends React.Component<Props> {
this.redirectTo = searchUrl();
}
@keydown('d')
@keydown("d")
goToDashboard() {
if (this.props.ui.editMode) return;
this.redirectTo = homeUrl();
@ -157,9 +157,9 @@ const Content = styled(Flex)`
margin: 0;
}
${breakpoint('tablet')`
${breakpoint("tablet")`
margin-left: ${props => (props.editMode ? 0 : props.theme.sidebarWidth)};
`};
`;
export default inject('auth', 'ui', 'documents')(withTheme(Layout));
export default inject("auth", "ui", "documents")(withTheme(Layout));

10
app/components/List/Item.js
View File

@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import Flex from 'shared/components/Flex';
import * as React from "react";
import styled from "styled-components";
import Flex from "shared/components/Flex";
type Props = {
image?: React.Node,
@ -16,7 +16,7 @@ const ListItem = ({ image, title, subtitle, actions }: Props) => {
return (
<Wrapper compact={compact}>
{image && <Image>{image}</Image>}
<Content align={compact ? 'center' : undefined} column={!compact}>
<Content align={compact ? "center" : undefined} column={!compact}>
<Heading>{title}</Heading>
{subtitle && <Subtitle>{subtitle}</Subtitle>}
</Content>
@ -27,7 +27,7 @@ const ListItem = ({ image, title, subtitle, actions }: Props) => {
const Wrapper = styled.li`
display: flex;
padding: ${props => (props.compact ? '8px' : '12px')} 0;
padding: ${props => (props.compact ? "8px" : "12px")} 0;
margin: 0;
border-bottom: 1px solid ${props => props.theme.divider};

2
app/components/List/List.js
View File

@ -1,5 +1,5 @@
// @flow
import styled from 'styled-components';
import styled from "styled-components";
const List = styled.ol`
margin: 0;

12
app/components/List/Placeholder.js
View File

@ -1,10 +1,10 @@
// @flow
import * as React from 'react';
import { times } from 'lodash';
import styled from 'styled-components';
import Mask from 'components/Mask';
import Fade from 'components/Fade';
import Flex from 'shared/components/Flex';
import * as React from "react";
import { times } from "lodash";
import styled from "styled-components";
import Mask from "components/Mask";
import Fade from "components/Fade";
import Flex from "shared/components/Flex";
type Props = {
count?: number,

2
app/components/List/index.js
View File

@ -1,3 +1,3 @@
// @flow
import List from './List';
import List from "./List";
export default List;

8
app/components/LoadingIndicator/LoadingIndicator.js
View File

@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
import { inject, observer } from 'mobx-react';
import UiStore from 'stores/UiStore';
import * as React from "react";
import { inject, observer } from "mobx-react";
import UiStore from "stores/UiStore";
type Props = {
ui: UiStore,
@ -22,4 +22,4 @@ class LoadingIndicator extends React.Component<Props> {
}
}
export default inject('ui')(LoadingIndicator);
export default inject("ui")(LoadingIndicator);

4
app/components/LoadingIndicator/LoadingIndicatorBar.js
View File

@ -1,6 +1,6 @@
// @flow
import * as React from 'react';
import styled, { keyframes } from 'styled-components';
import * as React from "react";
import styled, { keyframes } from "styled-components";
const LoadingIndicatorBar = () => {
return (

4
app/components/LoadingIndicator/index.js
View File

@ -1,5 +1,5 @@
// @flow
import LoadingIndicator from './LoadingIndicator';
import LoadingIndicatorBar from './LoadingIndicatorBar';
import LoadingIndicator from "./LoadingIndicator";
import LoadingIndicatorBar from "./LoadingIndicatorBar";
export default LoadingIndicator;
export { LoadingIndicatorBar };

12
app/components/LoadingPlaceholder/ListPlaceholder.js
View File

@ -1,10 +1,10 @@
// @flow
import * as React from 'react';
import { times } from 'lodash';
import styled from 'styled-components';
import Mask from 'components/Mask';
import Fade from 'components/Fade';
import Flex from 'shared/components/Flex';
import * as React from "react";
import { times } from "lodash";
import styled from "styled-components";
import Mask from "components/Mask";
import Fade from "components/Fade";
import Flex from "shared/components/Flex";
type Props = {
count?: number,

10
app/components/LoadingPlaceholder/LoadingPlaceholder.js
View File

@ -1,9 +1,9 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import Mask from 'components/Mask';
import Fade from 'components/Fade';
import Flex from 'shared/components/Flex';
import * as React from "react";
import styled from "styled-components";
import Mask from "components/Mask";
import Fade from "components/Fade";
import Flex from "shared/components/Flex";
export default function LoadingPlaceholder(props: Object) {
return (

4
app/components/LoadingPlaceholder/index.js
View File

@ -1,6 +1,6 @@
// @flow
import LoadingPlaceholder from './LoadingPlaceholder';
import ListPlaceholder from './ListPlaceholder';
import LoadingPlaceholder from "./LoadingPlaceholder";
import ListPlaceholder from "./ListPlaceholder";
export default LoadingPlaceholder;
export { ListPlaceholder };

10
app/components/Mask.js
View File

@ -1,9 +1,9 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import { pulsate } from 'shared/styles/animations';
import { randomInteger } from 'shared/random';
import Flex from 'shared/components/Flex';
import * as React from "react";
import styled from "styled-components";
import { pulsate } from "shared/styles/animations";
import { randomInteger } from "shared/random";
import Flex from "shared/components/Flex";
type Props = {
header?: boolean,

32
app/components/Modal.js
View File

@ -1,16 +1,16 @@
// @flow
import * as React from 'react';
import { observer } from 'mobx-react';
import styled, { createGlobalStyle } from 'styled-components';
import breakpoint from 'styled-components-breakpoint';
import ReactModal from 'react-modal';
import { transparentize } from 'polished';
import { CloseIcon, BackIcon } from 'outline-icons';
import NudeButton from 'components/NudeButton';
import { fadeAndScaleIn } from 'shared/styles/animations';
import Flex from 'shared/components/Flex';
import * as React from "react";
import { observer } from "mobx-react";
import styled, { createGlobalStyle } from "styled-components";
import breakpoint from "styled-components-breakpoint";
import ReactModal from "react-modal";
import { transparentize } from "polished";
import { CloseIcon, BackIcon } from "outline-icons";
import NudeButton from "components/NudeButton";
import { fadeAndScaleIn } from "shared/styles/animations";
import Flex from "shared/components/Flex";
ReactModal.setAppElement('#root');
ReactModal.setAppElement("#root");
type Props = {
children?: React.Node,
@ -26,7 +26,7 @@ const GlobalStyles = createGlobalStyle`
z-index: 100;
}
${breakpoint('tablet')`
${breakpoint("tablet")`
.ReactModalPortal + .ReactModalPortal {
.ReactModal__Overlay {
margin-left: 12px;
@ -57,7 +57,7 @@ const GlobalStyles = createGlobalStyle`
const Modal = ({
children,
isOpen,
title = 'Untitled',
title = "Untitled",
onRequestClose,
...rest
}: Props) => {
@ -114,7 +114,7 @@ const StyledModal = styled(ReactModal)`
padding: 8vh 2rem 2rem;
outline: none;
${breakpoint('tablet')`
${breakpoint("tablet")`
padding-top: 13vh;
`};
`;
@ -141,7 +141,7 @@ const Close = styled(NudeButton)`
opacity: 1;
}
${breakpoint('tablet')`
${breakpoint("tablet")`
display: none;
`};
`;
@ -161,7 +161,7 @@ const Back = styled(NudeButton)`
opacity: 1;
}
${breakpoint('tablet')`
${breakpoint("tablet")`
display: flex;
`};
`;

20
app/components/Modals.js
View File

@ -1,14 +1,14 @@
// @flow
import * as React from 'react';
import { observer } from 'mobx-react';
import BaseModal from 'components/Modal';
import UiStore from 'stores/UiStore';
import CollectionNew from 'scenes/CollectionNew';
import CollectionEdit from 'scenes/CollectionEdit';
import CollectionDelete from 'scenes/CollectionDelete';
import CollectionExport from 'scenes/CollectionExport';
import DocumentDelete from 'scenes/DocumentDelete';
import DocumentShare from 'scenes/DocumentShare';
import * as React from "react";
import { observer } from "mobx-react";
import BaseModal from "components/Modal";
import UiStore from "stores/UiStore";
import CollectionNew from "scenes/CollectionNew";
import CollectionEdit from "scenes/CollectionEdit";
import CollectionDelete from "scenes/CollectionDelete";
import CollectionExport from "scenes/CollectionExport";
import DocumentDelete from "scenes/DocumentDelete";
import DocumentShare from "scenes/DocumentShare";
type Props = {
ui: UiStore,

6
app/components/NudeButton.js
View File

@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import { lighten } from 'polished';
import * as React from "react";
import styled from "styled-components";
import { lighten } from "polished";
const Button = styled.button`
width: 24px;

6
app/components/PageTitle.js
View File

@ -1,6 +1,6 @@
// @flow
import * as React from 'react';
import { Helmet } from 'react-helmet';
import * as React from "react";
import { Helmet } from "react-helmet";
type Props = {
title: string,
@ -13,7 +13,7 @@ const PageTitle = ({ title, favicon }: Props) => (
<link
rel="shortcut icon"
type="image/png"
href={favicon || '/favicon-32.png'}
href={favicon || "/favicon-32.png"}
sizes="32x32"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

10
app/components/PaginatedDocumentList.js
View File

@ -1,9 +1,9 @@
// @flow
import * as React from 'react';
import { observer } from 'mobx-react';
import Document from 'models/Document';
import DocumentPreview from 'components/DocumentPreview';
import PaginatedList from 'components/PaginatedList';
import * as React from "react";
import { observer } from "mobx-react";
import Document from "models/Document";
import DocumentPreview from "components/DocumentPreview";
import PaginatedList from "components/PaginatedList";
type Props = {
documents: Document[],

14
app/components/PaginatedList.js
View File

@ -1,12 +1,12 @@
// @flow
import * as React from 'react';
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';
import { Waypoint } from 'react-waypoint';
import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
import * as React from "react";
import { observable, action } from "mobx";
import { observer } from "mobx-react";
import { Waypoint } from "react-waypoint";
import ArrowKeyNavigation from "boundless-arrow-key-navigation";
import { DEFAULT_PAGINATION_LIMIT } from 'stores/BaseStore';
import { ListPlaceholder } from 'components/LoadingPlaceholder';
import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
import { ListPlaceholder } from "components/LoadingPlaceholder";
type Props = {
fetch?: (options: ?Object) => Promise<void>,

26
app/components/PathToDocument.js
View File

@ -1,21 +1,21 @@
// @flow
import * as React from 'react';
import { observer } from 'mobx-react';
import styled from 'styled-components';
import { GoToIcon } from 'outline-icons';
import Flex from 'shared/components/Flex';
import * as React from "react";
import { observer } from "mobx-react";
import styled from "styled-components";
import { GoToIcon } from "outline-icons";
import Flex from "shared/components/Flex";
import Document from 'models/Document';
import Collection from 'models/Collection';
import type { DocumentPath } from 'stores/CollectionsStore';
import CollectionIcon from 'components/CollectionIcon';
import Document from "models/Document";
import Collection from "models/Collection";
import type { DocumentPath } from "stores/CollectionsStore";
import CollectionIcon from "components/CollectionIcon";
type Props = {
result: DocumentPath,
document?: ?Document,
collection: ?Collection,
onSuccess?: () => void,
ref?: (?React.ElementRef<'div'>) => void,
ref?: (?React.ElementRef<"div">) => void,
};
@observer
@ -25,7 +25,7 @@ class PathToDocument extends React.Component<Props> {
const { document, result, onSuccess } = this.props;
if (!document) return;
if (result.type === 'document') {
if (result.type === "document") {
await document.move(result.collectionId, result.id);
} else {
await document.move(result.collectionId, null);
@ -48,7 +48,7 @@ class PathToDocument extends React.Component<Props> {
.reduce((prev, curr) => [prev, <StyledGoToIcon />, curr])}
{document && (
<Flex>
{' '}
{" "}
<StyledGoToIcon /> <Title>{document.title}</Title>
</Flex>
)}
@ -77,7 +77,7 @@ const ResultWrapper = styled.div`
cursor: default;
`;
const ResultWrapperLink = styled(ResultWrapper.withComponent('a'))`
const ResultWrapperLink = styled(ResultWrapper.withComponent("a"))`
margin: 0 -8px;
padding: 8px 4px;
border-radius: 8px;

6
app/components/Popover.js
View File

@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
import BoundlessPopover from 'boundless-popover';
import styled, { keyframes } from 'styled-components';
import * as React from "react";
import BoundlessPopover from "boundless-popover";
import styled, { keyframes } from "styled-components";
const fadeIn = keyframes`
from {

24
app/components/PublishingInfo.js
View File

@ -1,13 +1,13 @@
// @flow
import * as React from 'react';
import { inject, observer } from 'mobx-react';
import styled from 'styled-components';
import Document from 'models/Document';
import Flex from 'shared/components/Flex';
import Time from 'shared/components/Time';
import Breadcrumb from 'shared/components/Breadcrumb';
import CollectionsStore from 'stores/CollectionsStore';
import AuthStore from 'stores/AuthStore';
import * as React from "react";
import { inject, observer } from "mobx-react";
import styled from "styled-components";
import Document from "models/Document";
import Flex from "shared/components/Flex";
import Time from "shared/components/Time";
import Breadcrumb from "shared/components/Breadcrumb";
import CollectionsStore from "stores/CollectionsStore";
import AuthStore from "stores/AuthStore";
const Container = styled(Flex)`
color: ${props => props.theme.textTertiary};
@ -19,7 +19,7 @@ const Container = styled(Flex)`
const Modified = styled.span`
color: ${props =>
props.highlight ? props.theme.text : props.theme.textTertiary};
font-weight: ${props => (props.highlight ? '600' : '400')};
font-weight: ${props => (props.highlight ? "600" : "400")};
`;
type Props = {
@ -102,7 +102,7 @@ function PublishingInfo({
return (
<Container align="center" {...rest}>
{updatedByMe ? 'You' : updatedBy.name}&nbsp;
{updatedByMe ? "You" : updatedBy.name}&nbsp;
{content}
{showCollection &&
collection && (
@ -118,4 +118,4 @@ function PublishingInfo({
);
}
export default inject('collections', 'auth')(observer(PublishingInfo));
export default inject("collections", "auth")(observer(PublishingInfo));

6
app/components/ScrollToTop.js
View File

@ -1,8 +1,8 @@
// @flow
// based on: https://reacttraining.com/react-router/web/guides/scroll-restoration
import * as React from 'react';
import { withRouter } from 'react-router-dom';
import type { Location } from 'react-router-dom';
import * as React from "react";
import { withRouter } from "react-router-dom";
import type { Location } from "react-router-dom";
type Props = {
location: Location,

10
app/components/Scrollable.js
View File

@ -1,8 +1,8 @@
// @flow
import * as React from 'react';
import { observable } from 'mobx';
import { observer } from 'mobx-react';
import styled from 'styled-components';
import * as React from "react";
import { observable } from "mobx";
import { observer } from "mobx-react";
import styled from "styled-components";
type Props = {
shadow?: boolean,
@ -32,7 +32,7 @@ const Wrapper = styled.div`
overscroll-behavior: none;
-webkit-overflow-scrolling: touch;
box-shadow: ${props =>
props.shadow ? '0 1px inset rgba(0,0,0,.1)' : 'none'};
props.shadow ? "0 1px inset rgba(0,0,0,.1)" : "none"};
transition: all 250ms ease-in-out;
`;

46
app/components/Sidebar/Main.js
View File

@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
import { observer, inject } from 'mobx-react';
import styled from 'styled-components';
import * as React from "react";
import { observer, inject } from "mobx-react";
import styled from "styled-components";
import {
ArchiveIcon,
HomeIcon,
@ -10,25 +10,25 @@ import {
StarredIcon,
TrashIcon,
PlusIcon,
} from 'outline-icons';
} from "outline-icons";
import Flex from 'shared/components/Flex';
import Modal from 'components/Modal';
import Invite from 'scenes/Invite';
import AccountMenu from 'menus/AccountMenu';
import Sidebar from './Sidebar';
import Scrollable from 'components/Scrollable';
import Section from './components/Section';
import Collections from './components/Collections';
import SidebarLink from './components/SidebarLink';
import HeaderBlock from './components/HeaderBlock';
import Bubble from './components/Bubble';
import Flex from "shared/components/Flex";
import Modal from "components/Modal";
import Invite from "scenes/Invite";
import AccountMenu from "menus/AccountMenu";
import Sidebar from "./Sidebar";
import Scrollable from "components/Scrollable";
import Section from "./components/Section";
import Collections from "./components/Collections";
import SidebarLink from "./components/SidebarLink";
import HeaderBlock from "./components/HeaderBlock";
import Bubble from "./components/Bubble";
import AuthStore from 'stores/AuthStore';
import DocumentsStore from 'stores/DocumentsStore';
import PoliciesStore from 'stores/PoliciesStore';
import UiStore from 'stores/UiStore';
import { observable } from 'mobx';
import AuthStore from "stores/AuthStore";
import DocumentsStore from "stores/DocumentsStore";
import PoliciesStore from "stores/PoliciesStore";
import UiStore from "stores/UiStore";
import { observable } from "mobx";
type Props = {
auth: AuthStore,
@ -47,7 +47,7 @@ class MainSidebar extends React.Component<Props> {
handleCreateCollection = (ev: SyntheticEvent<>) => {
ev.preventDefault();
this.props.ui.setActiveModal('collection-new');
this.props.ui.setActiveModal("collection-new");
};
handleInviteModalOpen = (ev: SyntheticEvent<>) => {
@ -90,7 +90,7 @@ class MainSidebar extends React.Component<Props> {
/>
<SidebarLink
to={{
pathname: '/search',
pathname: "/search",
state: { fromMenu: true },
}}
icon={<SearchIcon color="currentColor" />}
@ -172,4 +172,4 @@ const Drafts = styled(Flex)`
height: 24px;
`;
export default inject('documents', 'policies', 'auth', 'ui')(MainSidebar);
export default inject("documents", "policies", "auth", "ui")(MainSidebar);

40
app/components/Sidebar/Settings.js
View File

@ -1,8 +1,8 @@
// @flow
import * as React from 'react';
import { observer, inject } from 'mobx-react';
import type { RouterHistory } from 'react-router-dom';
import styled from 'styled-components';
import * as React from "react";
import { observer, inject } from "mobx-react";
import type { RouterHistory } from "react-router-dom";
import styled from "styled-components";
import {
DocumentIcon,
EmailIcon,
@ -15,20 +15,20 @@ import {
TeamIcon,
BulletedListIcon,
ExpandedIcon,
} from 'outline-icons';
import ZapierIcon from './icons/Zapier';
import SlackIcon from './icons/Slack';
} from "outline-icons";
import ZapierIcon from "./icons/Zapier";
import SlackIcon from "./icons/Slack";
import Flex from 'shared/components/Flex';
import Sidebar from './Sidebar';
import Scrollable from 'components/Scrollable';
import Section from './components/Section';
import Header from './components/Header';
import SidebarLink from './components/SidebarLink';
import HeaderBlock from './components/HeaderBlock';
import Version from './components/Version';
import PoliciesStore from 'stores/PoliciesStore';
import AuthStore from 'stores/AuthStore';
import Flex from "shared/components/Flex";
import Sidebar from "./Sidebar";
import Scrollable from "components/Scrollable";
import Section from "./components/Section";
import Header from "./components/Header";
import SidebarLink from "./components/SidebarLink";
import HeaderBlock from "./components/HeaderBlock";
import Version from "./components/Version";
import PoliciesStore from "stores/PoliciesStore";
import AuthStore from "stores/AuthStore";
type Props = {
history: RouterHistory,
@ -39,7 +39,7 @@ type Props = {
@observer
class SettingsSidebar extends React.Component<Props> {
returnToDashboard = () => {
this.props.history.push('/');
this.props.history.push("/");
};
render() {
@ -146,7 +146,7 @@ class SettingsSidebar extends React.Component<Props> {
</Section>
)}
{can.update &&
process.env.DEPLOYMENT !== 'hosted' && (
process.env.DEPLOYMENT !== "hosted" && (
<Section>
<Header>Installation</Header>
<Version />
@ -168,4 +168,4 @@ const ReturnToApp = styled(Flex)`
height: 16px;
`;
export default inject('auth', 'policies')(SettingsSidebar);
export default inject("auth", "policies")(SettingsSidebar);

34
app/components/Sidebar/Sidebar.js
View File

@ -1,14 +1,14 @@
// @flow
import * as React from 'react';
import { withRouter } from 'react-router-dom';
import type { Location } from 'react-router-dom';
import styled from 'styled-components';
import breakpoint from 'styled-components-breakpoint';
import { observer, inject } from 'mobx-react';
import { CloseIcon, MenuIcon } from 'outline-icons';
import Fade from 'components/Fade';
import Flex from 'shared/components/Flex';
import UiStore from 'stores/UiStore';
import * as React from "react";
import { withRouter } from "react-router-dom";
import type { Location } from "react-router-dom";
import styled from "styled-components";
import breakpoint from "styled-components-breakpoint";
import { observer, inject } from "mobx-react";
import { CloseIcon, MenuIcon } from "outline-icons";
import Fade from "components/Fade";
import Flex from "shared/components/Flex";
import UiStore from "stores/UiStore";
let firstRender = true;
@ -69,7 +69,7 @@ const Container = styled(Flex)`
width: 100%;
background: ${props => props.theme.sidebarBackground};
transition: left 100ms ease-out, ${props => props.theme.backgroundTransition};
margin-left: ${props => (props.mobileSidebarVisible ? 0 : '-100%')};
margin-left: ${props => (props.mobileSidebarVisible ? 0 : "-100%")};
z-index: 1000;
@media print {
@ -79,7 +79,7 @@ const Container = styled(Flex)`
&:before,
&:after {
content: '';
content: "";
background: ${props => props.theme.sidebarBackground};
position: absolute;
top: -50vh;
@ -93,7 +93,7 @@ const Container = styled(Flex)`
bottom: -50vh;
}
${breakpoint('tablet')`
${breakpoint("tablet")`
left: ${props => (props.editMode ? `-${props.theme.sidebarWidth}` : 0)};
width: ${props => props.theme.sidebarWidth};
margin: 0;
@ -106,14 +106,14 @@ const Toggle = styled.a`
align-items: center;
position: fixed;
top: 0;
left: ${props => (props.mobileSidebarVisible ? 'auto' : 0)};
right: ${props => (props.mobileSidebarVisible ? 0 : 'auto')};
left: ${props => (props.mobileSidebarVisible ? "auto" : 0)};
right: ${props => (props.mobileSidebarVisible ? 0 : "auto")};
z-index: 1;
margin: 12px;
${breakpoint('tablet')`
${breakpoint("tablet")`
display: none;
`};
`;
export default withRouter(inject('ui')(Sidebar));
export default withRouter(inject("ui")(Sidebar));

8
app/components/Sidebar/components/Bubble.js
View File

@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import { bounceIn } from 'shared/styles/animations';
import * as React from "react";
import styled from "styled-components";
import { bounceIn } from "shared/styles/animations";
type Props = {
count: number,
@ -17,7 +17,7 @@ const Count = styled.div`
color: ${props => props.theme.white};
background: ${props => props.theme.slateDark};
display: inline-block;
font-feature-settings: 'tnum';
font-feature-settings: "tnum";
font-weight: 600;
font-size: 9px;
white-space: nowrap;

26
app/components/Sidebar/components/CollectionLink.js
View File

@ -1,17 +1,17 @@
// @flow
import * as React from 'react';
import { observer } from 'mobx-react';
import { observable } from 'mobx';
import Collection from 'models/Collection';
import Document from 'models/Document';
import CollectionMenu from 'menus/CollectionMenu';
import UiStore from 'stores/UiStore';
import DocumentsStore from 'stores/DocumentsStore';
import SidebarLink from './SidebarLink';
import DocumentLink from './DocumentLink';
import CollectionIcon from 'components/CollectionIcon';
import DropToImport from 'components/DropToImport';
import Flex from 'shared/components/Flex';
import * as React from "react";
import { observer } from "mobx-react";
import { observable } from "mobx";
import Collection from "models/Collection";
import Document from "models/Document";
import CollectionMenu from "menus/CollectionMenu";
import UiStore from "stores/UiStore";
import DocumentsStore from "stores/DocumentsStore";
import SidebarLink from "./SidebarLink";
import DocumentLink from "./DocumentLink";
import CollectionIcon from "components/CollectionIcon";
import DropToImport from "components/DropToImport";
import Flex from "shared/components/Flex";
type Props = {
collection: Collection,

36
app/components/Sidebar/components/Collections.js
View File

@ -1,22 +1,22 @@
// @flow
import * as React from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter, type RouterHistory } from 'react-router-dom';
import keydown from 'react-keydown';
import Flex from 'shared/components/Flex';
import { PlusIcon } from 'outline-icons';
import { newDocumentUrl } from 'utils/routeHelpers';
import * as React from "react";
import { observer, inject } from "mobx-react";
import { withRouter, type RouterHistory } from "react-router-dom";
import keydown from "react-keydown";
import Flex from "shared/components/Flex";
import { PlusIcon } from "outline-icons";
import { newDocumentUrl } from "utils/routeHelpers";
import Header from './Header';
import SidebarLink from './SidebarLink';
import CollectionLink from './CollectionLink';
import CollectionsLoading from './CollectionsLoading';
import Fade from 'components/Fade';
import Header from "./Header";
import SidebarLink from "./SidebarLink";
import CollectionLink from "./CollectionLink";
import CollectionsLoading from "./CollectionsLoading";
import Fade from "components/Fade";
import CollectionsStore from 'stores/CollectionsStore';
import PoliciesStore from 'stores/PoliciesStore';
import UiStore from 'stores/UiStore';
import DocumentsStore from 'stores/DocumentsStore';
import CollectionsStore from "stores/CollectionsStore";
import PoliciesStore from "stores/PoliciesStore";
import UiStore from "stores/UiStore";
import DocumentsStore from "stores/DocumentsStore";
type Props = {
history: RouterHistory,
@ -39,7 +39,7 @@ class Collections extends React.Component<Props> {
}
}
@keydown('n')
@keydown("n")
goToNewDocument() {
if (this.props.ui.editMode) return;
@ -94,6 +94,6 @@ class Collections extends React.Component<Props> {
}
}
export default inject('collections', 'ui', 'documents', 'policies')(
export default inject("collections", "ui", "documents", "policies")(
withRouter(Collections)
);

6
app/components/Sidebar/components/CollectionsLoading.js
View File

@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import Mask from 'components/Mask';
import * as React from "react";
import styled from "styled-components";
import Mask from "components/Mask";
function CollectionsLoading() {
return (

28
app/components/Sidebar/components/DocumentLink.js
View File

@ -1,17 +1,17 @@
// @flow
import * as React from 'react';
import { observer } from 'mobx-react';
import { observable } from 'mobx';
import styled from 'styled-components';
import Document from 'models/Document';
import DocumentMenu from 'menus/DocumentMenu';
import SidebarLink from './SidebarLink';
import DropToImport from 'components/DropToImport';
import Fade from 'components/Fade';
import Collection from 'models/Collection';
import DocumentsStore from 'stores/DocumentsStore';
import Flex from 'shared/components/Flex';
import { type NavigationNode } from 'types';
import * as React from "react";
import { observer } from "mobx-react";
import { observable } from "mobx";
import styled from "styled-components";
import Document from "models/Document";
import DocumentMenu from "menus/DocumentMenu";
import SidebarLink from "./SidebarLink";
import DropToImport from "components/DropToImport";
import Fade from "components/Fade";
import Collection from "models/Collection";
import DocumentsStore from "stores/DocumentsStore";
import Flex from "shared/components/Flex";
import { type NavigationNode } from "types";
type Props = {
node: NavigationNode,
@ -96,7 +96,7 @@ class DocumentLink extends React.Component<Props> {
state: { title: node.title },
}}
expanded={showChildren ? true : undefined}
label={node.title || 'Untitled'}
label={node.title || "Untitled"}
depth={depth}
exact={false}
menuOpen={this.menuOpen}

4
app/components/Sidebar/components/Header.js
View File

@ -1,6 +1,6 @@
// @flow
import Flex from 'shared/components/Flex';
import styled from 'styled-components';
import Flex from "shared/components/Flex";
import styled from "styled-components";
const Header = styled(Flex)`
font-size: 11px;

12
app/components/Sidebar/components/HeaderBlock.js
View File

@ -1,9 +1,9 @@
// @flow
import * as React from 'react';
import styled, { withTheme } from 'styled-components';
import { ExpandedIcon } from 'outline-icons';
import Flex from 'shared/components/Flex';
import TeamLogo from 'shared/components/TeamLogo';
import * as React from "react";
import styled, { withTheme } from "styled-components";
import { ExpandedIcon } from "outline-icons";
import Flex from "shared/components/Flex";
import TeamLogo from "shared/components/TeamLogo";
type Props = {
teamName: string,
@ -26,7 +26,7 @@ function HeaderBlock({
<TeamLogo alt={`${teamName} logo`} src={logoUrl} />
<Flex align="flex-start" column>
<TeamName showDisclosure>
{teamName}{' '}
{teamName}{" "}
{showDisclosure && <StyledExpandedIcon color={theme.text} />}
</TeamName>
<Subheading>{subheading}</Subheading>

4
app/components/Sidebar/components/Section.js
View File

@ -1,6 +1,6 @@
// @flow
import styled from 'styled-components';
import Flex from 'shared/components/Flex';
import styled from "styled-components";
import Flex from "shared/components/Flex";
const Section = styled(Flex)`
position: relative;

20
app/components/Sidebar/components/SidebarLink.js
View File

@ -1,11 +1,11 @@
// @flow
import * as React from 'react';
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';
import { withRouter, NavLink } from 'react-router-dom';
import { CollapsedIcon } from 'outline-icons';
import styled, { withTheme } from 'styled-components';
import Flex from 'shared/components/Flex';
import * as React from "react";
import { observable, action } from "mobx";
import { observer } from "mobx-react";
import { withRouter, NavLink } from "react-router-dom";
import { CollapsedIcon } from "outline-icons";
import styled, { withTheme } from "styled-components";
import Flex from "shared/components/Flex";
type Props = {
to?: string | Object,
@ -82,7 +82,7 @@ class SidebarLink extends React.Component<Props> {
onClick={onClick}
exact={exact !== false}
to={to}
as={to ? undefined : href ? 'a' : 'div'}
as={to ? undefined : href ? "a" : "div"}
href={href}
>
{icon && <IconWrapper>{icon}</IconWrapper>}
@ -108,7 +108,7 @@ const IconWrapper = styled.span`
`;
const Action = styled.span`
display: ${props => (props.menuOpen ? 'inline' : 'none')};
display: ${props => (props.menuOpen ? "inline" : "none")};
position: absolute;
top: 4px;
right: 4px;
@ -168,7 +168,7 @@ const Disclosure = styled(CollapsedIcon)`
position: absolute;
left: -24px;
${({ expanded }) => !expanded && 'transform: rotate(-90deg);'};
${({ expanded }) => !expanded && "transform: rotate(-90deg);"};
`;
export default withRouter(withTheme(SidebarLink));

16
app/components/Sidebar/components/Version.js
View File

@ -1,9 +1,9 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import Badge from 'components/Badge';
import SidebarLink from './SidebarLink';
import { version } from '../../../../package.json';
import * as React from "react";
import styled from "styled-components";
import Badge from "components/Badge";
import SidebarLink from "./SidebarLink";
import { version } from "../../../../package.json";
export default function Version() {
// $FlowFixMe
@ -14,7 +14,7 @@ export default function Version() {
async function loadReleases() {
let out = 0;
const res = await fetch(
'https://api.github.com/repos/outline/outline/releases'
"https://api.github.com/repos/outline/outline/releases"
);
const releases = await res.json();
for (const release of releases) {
@ -37,9 +37,9 @@ export default function Version() {
<br />
<LilBadge>
{releasesBehind === 0
? 'Up to date'
? "Up to date"
: `${releasesBehind} version${
releasesBehind === 1 ? '' : 's'
releasesBehind === 1 ? "" : "s"
} behind`}
</LilBadge>
</React.Fragment>

4
app/components/Sidebar/icons/Slack.js
View File

@ -1,11 +1,11 @@
// @flow
import * as React from 'react';
import * as React from "react";
type Props = {
color?: string,
};
export default function SlackIcon({ color = '#4E5C6E' }: Props) {
export default function SlackIcon({ color = "#4E5C6E" }: Props) {
return (
<svg
fill={color}

4
app/components/Sidebar/icons/Zapier.js
View File

@ -1,11 +1,11 @@
// @flow
import * as React from 'react';
import * as React from "react";
type Props = {
color?: string,
};
export default function ZapierIcon({ color = '#4E5C6E' }: Props) {
export default function ZapierIcon({ color = "#4E5C6E" }: Props) {
return (
<svg
fill={color}

2
app/components/Sidebar/index.js
View File

@ -1,3 +1,3 @@
// @flow
import Sidebar from './Main';
import Sidebar from "./Main";
export default Sidebar;

88
app/components/SocketProvider.js
View File

@ -1,18 +1,18 @@
// @flow
import * as React from 'react';
import { observable } from 'mobx';
import { inject, observer } from 'mobx-react';
import { find } from 'lodash';
import io from 'socket.io-client';
import DocumentsStore from 'stores/DocumentsStore';
import CollectionsStore from 'stores/CollectionsStore';
import GroupsStore from 'stores/GroupsStore';
import MembershipsStore from 'stores/MembershipsStore';
import DocumentPresenceStore from 'stores/DocumentPresenceStore';
import PoliciesStore from 'stores/PoliciesStore';
import ViewsStore from 'stores/ViewsStore';
import AuthStore from 'stores/AuthStore';
import UiStore from 'stores/UiStore';
import * as React from "react";
import { observable } from "mobx";
import { inject, observer } from "mobx-react";
import { find } from "lodash";
import io from "socket.io-client";
import DocumentsStore from "stores/DocumentsStore";
import CollectionsStore from "stores/CollectionsStore";
import GroupsStore from "stores/GroupsStore";
import MembershipsStore from "stores/MembershipsStore";
import DocumentPresenceStore from "stores/DocumentPresenceStore";
import PoliciesStore from "stores/PoliciesStore";
import ViewsStore from "stores/ViewsStore";
import AuthStore from "stores/AuthStore";
import UiStore from "stores/UiStore";
export const SocketContext: any = React.createContext();
@ -37,7 +37,7 @@ class SocketProvider extends React.Component<Props> {
if (!process.env.WEBSOCKETS_ENABLED) return;
this.socket = io(window.location.origin, {
path: '/realtime',
path: "/realtime",
});
this.socket.authenticated = false;
@ -54,38 +54,38 @@ class SocketProvider extends React.Component<Props> {
} = this.props;
if (!auth.token) return;
this.socket.on('connect', () => {
this.socket.on("connect", () => {
// immediately send current users token to the websocket backend where it
// is verified, if all goes well an 'authenticated' message will be
// received in response
this.socket.emit('authentication', {
this.socket.emit("authentication", {
token: auth.token,
});
});
this.socket.on('disconnect', () => {
this.socket.on("disconnect", () => {
// when the socket is disconnected we need to clear all presence state as
// it's no longer reliable.
presence.clear();
});
this.socket.on('authenticated', () => {
this.socket.on("authenticated", () => {
this.socket.authenticated = true;
});
this.socket.on('unauthorized', err => {
this.socket.on("unauthorized", err => {
this.socket.authenticated = false;
ui.showToast(err.message);
throw err;
});
this.socket.on('entities', async event => {
this.socket.on("entities", async event => {
if (event.documentIds) {
for (const documentDescriptor of event.documentIds) {
const documentId = documentDescriptor.id;
let document = documents.get(documentId) || {};
if (event.event === 'documents.delete') {
if (event.event === "documents.delete") {
const document = documents.get(documentId);
if (document) {
document.deletedAt = documentDescriptor.updatedAt;
@ -136,7 +136,7 @@ class SocketProvider extends React.Component<Props> {
const collectionId = collectionDescriptor.id;
const collection = collections.get(collectionId) || {};
if (event.event === 'collections.delete') {
if (event.event === "collections.delete") {
documents.removeCollectionDocuments(collectionId);
continue;
}
@ -184,17 +184,17 @@ class SocketProvider extends React.Component<Props> {
}
});
this.socket.on('documents.star', event => {
this.socket.on("documents.star", event => {
documents.starredIds.set(event.documentId, true);
});
this.socket.on('documents.unstar', event => {
this.socket.on("documents.unstar", event => {
documents.starredIds.set(event.documentId, false);
});
// received when a user is given access to a collection
// if the user is us then we go ahead and load the collection from API.
this.socket.on('collections.add_user', event => {
this.socket.on("collections.add_user", event => {
if (auth.user && event.userId === auth.user.id) {
collections.fetch(event.collectionId, { force: true });
}
@ -208,7 +208,7 @@ class SocketProvider extends React.Component<Props> {
// received when a user is removed from having access to a collection
// to keep state in sync we must update our UI if the user is us,
// or otherwise just remove any membership state we have for that user.
this.socket.on('collections.remove_user', event => {
this.socket.on("collections.remove_user", event => {
if (auth.user && event.userId === auth.user.id) {
collections.remove(event.collectionId);
memberships.removeCollectionMemberships(event.collectionId);
@ -220,32 +220,32 @@ class SocketProvider extends React.Component<Props> {
// received a message from the API server that we should request
// to join a specific room. Forward that to the ws server.
this.socket.on('join', event => {
this.socket.emit('join', event);
this.socket.on("join", event => {
this.socket.emit("join", event);
});
// received a message from the API server that we should request
// to leave a specific room. Forward that to the ws server.
this.socket.on('leave', event => {
this.socket.emit('leave', event);
this.socket.on("leave", event => {
this.socket.emit("leave", event);
});
// received whenever we join a document room, the payload includes
// userIds that are present/viewing and those that are editing.
this.socket.on('document.presence', event => {
this.socket.on("document.presence", event => {
presence.init(event.documentId, event.userIds, event.editingIds);
});
// received whenever a new user joins a document room, aka they
// navigate to / start viewing a document
this.socket.on('user.join', event => {
this.socket.on("user.join", event => {
presence.touch(event.documentId, event.userId, event.isEditing);
views.touch(event.documentId, event.userId);
});
// received whenever a new user leaves a document room, aka they
// navigate away / stop viewing a document
this.socket.on('user.leave', event => {
this.socket.on("user.leave", event => {
presence.leave(event.documentId, event.userId);
views.touch(event.documentId, event.userId);
});
@ -253,7 +253,7 @@ class SocketProvider extends React.Component<Props> {
// received when another client in a document room wants to change
// or update it's presence. Currently the only property is whether
// the client is in editing state or not.
this.socket.on('user.presence', event => {
this.socket.on("user.presence", event => {
presence.touch(event.documentId, event.userId, event.isEditing);
});
}
@ -275,13 +275,13 @@ class SocketProvider extends React.Component<Props> {
}
export default inject(
'auth',
'ui',
'documents',
'collections',
'groups',
'memberships',
'presence',
'policies',
'views'
"auth",
"ui",
"documents",
"collections",
"groups",
"memberships",
"presence",
"policies",
"views"
)(SocketProvider);

6
app/components/Subheading.js
View File

@ -1,6 +1,6 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import * as React from "react";
import styled from "styled-components";
type Props = {
children: React.Node,
@ -13,7 +13,7 @@ const H3 = styled.h3`
line-height: 1;
`;
const Underline = styled('span')`
const Underline = styled("span")`
position: relative;
top: 1px;

8
app/components/Switch.js
View File

@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import { LabelText } from 'components/Input';
import * as React from "react";
import styled from "styled-components";
import { LabelText } from "components/Input";
type Props = {
width?: number,
@ -57,7 +57,7 @@ const Slider = styled.span`
&:before {
position: absolute;
content: '';
content: "";
height: ${props => props.height - 8}px;
width: ${props => props.height - 8}px;
left: 4px;

10
app/components/Tab.js
View File

@ -1,8 +1,8 @@
// @flow
import * as React from 'react';
import styled, { withTheme } from 'styled-components';
import { NavLink } from 'react-router-dom';
import { lighten } from 'polished';
import * as React from "react";
import styled, { withTheme } from "styled-components";
import { NavLink } from "react-router-dom";
import { lighten } from "polished";
type Props = {
theme: Object,
@ -35,7 +35,7 @@ const StyledNavLink = styled(NavLink)`
function Tab(props: Props) {
const activeStyle = {
paddingBottom: '5px',
paddingBottom: "5px",
borderBottom: `3px solid ${props.theme.textSecondary}`,
color: props.theme.textSecondary,
};

2
app/components/Tabs.js
View File

@ -1,5 +1,5 @@
// @flow
import styled from 'styled-components';
import styled from "styled-components";
const Tabs = styled.nav`
border-bottom: 1px solid ${props => props.theme.divider};

16
app/components/Theme.js
View File

@ -1,10 +1,10 @@
// @flow
import * as React from 'react';
import { inject, observer } from 'mobx-react';
import { ThemeProvider } from 'styled-components';
import { dark, light } from 'shared/styles/theme';
import GlobalStyles from 'shared/styles/globals';
import UiStore from 'stores/UiStore';
import * as React from "react";
import { inject, observer } from "mobx-react";
import { ThemeProvider } from "styled-components";
import { dark, light } from "shared/styles/theme";
import GlobalStyles from "shared/styles/globals";
import UiStore from "stores/UiStore";
type Props = {
ui: UiStore,
@ -13,7 +13,7 @@ type Props = {
function Theme({ children, ui }: Props) {
return (
<ThemeProvider theme={ui.resolvedTheme === 'dark' ? dark : light}>
<ThemeProvider theme={ui.resolvedTheme === "dark" ? dark : light}>
<React.Fragment>
<GlobalStyles />
{children}
@ -22,4 +22,4 @@ function Theme({ children, ui }: Props) {
);
}
export default inject('ui')(observer(Theme));
export default inject("ui")(observer(Theme));

12
app/components/Toasts/Toasts.js
View File

@ -1,9 +1,9 @@
// @flow
import * as React from 'react';
import { observer, inject } from 'mobx-react';
import styled from 'styled-components';
import Toast from './components/Toast';
import UiStore from '../../stores/UiStore';
import * as React from "react";
import { observer, inject } from "mobx-react";
import styled from "styled-components";
import Toast from "./components/Toast";
import UiStore from "../../stores/UiStore";
type Props = {
ui: UiStore,
@ -37,4 +37,4 @@ const List = styled.ol`
z-index: 1000;
`;
export default inject('ui')(Toasts);
export default inject("ui")(Toasts);

16
app/components/Toasts/components/Toast.js
View File

@ -1,9 +1,9 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import { darken } from 'polished';
import { fadeAndScaleIn } from 'shared/styles/animations';
import type { Toast as TToast } from '../../../types';
import * as React from "react";
import styled from "styled-components";
import { darken } from "polished";
import { fadeAndScaleIn } from "shared/styles/animations";
import type { Toast as TToast } from "../../../types";
type Props = {
onRequestClose: () => void,
@ -33,7 +33,7 @@ class Toast extends React.Component<Props> {
const { toast, onRequestClose } = this.props;
const { action } = toast;
const message =
typeof toast.message === 'string'
typeof toast.message === "string"
? toast.message
: toast.message.toString();
@ -41,11 +41,11 @@ class Toast extends React.Component<Props> {
<li>
<Container
onClick={action ? undefined : onRequestClose}
type={toast.type || 'success'}
type={toast.type || "success"}
>
<Message>{message}</Message>
{action && (
<Action type={toast.type || 'success'} onClick={action.onClick}>
<Action type={toast.type || "success"} onClick={action.onClick}>
{action.text}
</Action>
)}

2
app/components/Toasts/index.js
View File

@ -1,3 +1,3 @@
// @flow
import Toasts from './Toasts';
import Toasts from "./Toasts";
export default Toasts;

10
app/components/Tooltip.js
View File

@ -1,12 +1,12 @@
// @flow
import * as React from 'react';
import styled from 'styled-components';
import Tippy from '@tippy.js/react';
import * as React from "react";
import styled from "styled-components";
import Tippy from "@tippy.js/react";
type Props = {
tooltip: React.Node,
shortcut?: React.Node,
placement?: 'top' | 'bottom' | 'left' | 'right',
placement?: "top" | "bottom" | "left" | "right",
children: React.Node,
delay?: number,
className?: string,
@ -47,7 +47,7 @@ const Shortcut = styled.kbd`
display: inline-block;
padding: 2px 4px;
font: 10px 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier,
font: 10px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
monospace;
line-height: 10px;
color: ${props => props.theme.tooltipBackground};

4
app/components/VisuallyHidden.js
View File

@ -1,7 +1,7 @@
// @flow
import styled from 'styled-components';
import styled from "styled-components";
const VisuallyHidden = styled('span')`
const VisuallyHidden = styled("span")`
position: absolute !important;
height: 1px;
width: 1px;

8
app/embeds/Abstract.js
View File

@ -1,6 +1,6 @@
// @flow
import * as React from 'react';
import Frame from './components/Frame';
import * as React from "react";
import Frame from "./components/Frame";
type Props = {|
attrs: {|
@ -11,8 +11,8 @@ type Props = {|
export default class Abstract extends React.Component<Props> {
static ENABLED = [
new RegExp('https?://share.(?:go)?abstract.com/(.*)$'),
new RegExp('https?://app.(?:go)?abstract.com/(?:share|embed)/(.*)$'),
new RegExp("https?://share.(?:go)?abstract.com/(.*)$"),
new RegExp("https?://app.(?:go)?abstract.com/(?:share|embed)/(.*)$"),
];
render() {

40
app/embeds/Abstract.test.js
View File

@ -1,58 +1,58 @@
/* eslint-disable flowtype/require-valid-file-annotation */
import Abstract from './Abstract';
import Abstract from "./Abstract";
describe('Abstract', () => {
describe("Abstract", () => {
const match = Abstract.ENABLED[0];
const match2 = Abstract.ENABLED[1];
test('to be enabled on share subdomain link', () => {
test("to be enabled on share subdomain link", () => {
expect(
'https://share.goabstract.com/aaec8bba-f473-4f64-96e7-bff41c70ff8a'.match(
"https://share.goabstract.com/aaec8bba-f473-4f64-96e7-bff41c70ff8a".match(
match
)
).toBeTruthy();
expect(
'https://share.abstract.com/aaec8bba-f473-4f64-96e7-bff41c70ff8a'.match(
"https://share.abstract.com/aaec8bba-f473-4f64-96e7-bff41c70ff8a".match(
match
)
).toBeTruthy();
});
test('to be enabled on share link', () => {
test("to be enabled on share link", () => {
expect(
'https://app.goabstract.com/share/aaec8bba-f473-4f64-96e7-bff41c70ff8a'.match(
"https://app.goabstract.com/share/aaec8bba-f473-4f64-96e7-bff41c70ff8a".match(
match2
)
).toBeTruthy();
expect(
'https://app.abstract.com/share/aaec8bba-f473-4f64-96e7-bff41c70ff8a'.match(
"https://app.abstract.com/share/aaec8bba-f473-4f64-96e7-bff41c70ff8a".match(
match2
)
).toBeTruthy();
});
test('to be enabled on embed link', () => {
test("to be enabled on embed link", () => {
expect(
'https://app.goabstract.com/embed/aaec8bba-f473-4f64-96e7-bff41c70ff8a'.match(
"https://app.goabstract.com/embed/aaec8bba-f473-4f64-96e7-bff41c70ff8a".match(
match2
)
).toBeTruthy();
expect(
'https://app.abstract.com/embed/aaec8bba-f473-4f64-96e7-bff41c70ff8a'.match(
"https://app.abstract.com/embed/aaec8bba-f473-4f64-96e7-bff41c70ff8a".match(
match2
)
).toBeTruthy();
});
test('to not be enabled elsewhere', () => {
expect('https://abstract.com'.match(match)).toBe(null);
expect('https://goabstract.com'.match(match)).toBe(null);
expect('https://app.goabstract.com'.match(match)).toBe(null);
expect('https://abstract.com/features'.match(match)).toBe(null);
expect('https://app.abstract.com/home'.match(match)).toBe(null);
expect('https://abstract.com/pricing'.match(match)).toBe(null);
expect('https://goabstract.com/pricing'.match(match)).toBe(null);
expect('https://www.goabstract.com/pricing'.match(match)).toBe(null);
test("to not be enabled elsewhere", () => {
expect("https://abstract.com".match(match)).toBe(null);
expect("https://goabstract.com".match(match)).toBe(null);
expect("https://app.goabstract.com".match(match)).toBe(null);
expect("https://abstract.com/features".match(match)).toBe(null);
expect("https://app.abstract.com/home".match(match)).toBe(null);
expect("https://abstract.com/pricing".match(match)).toBe(null);
expect("https://goabstract.com/pricing".match(match)).toBe(null);
expect("https://www.goabstract.com/pricing".match(match)).toBe(null);
});
});

6
app/embeds/Airtable.js
View File

@ -1,8 +1,8 @@
// @flow
import * as React from 'react';
import Frame from './components/Frame';
import * as React from "react";
import Frame from "./components/Frame";
const URL_REGEX = new RegExp('https://airtable.com/(?:embed/)?(shr.*)$');
const URL_REGEX = new RegExp("https://airtable.com/(?:embed/)?(shr.*)$");
type Props = {|
attrs: {|

20
app/embeds/Airtable.test.js
View File

@ -1,21 +1,21 @@
/* eslint-disable flowtype/require-valid-file-annotation */
import Airtable from './Airtable';
import Airtable from "./Airtable";
describe('Airtable', () => {
describe("Airtable", () => {
const match = Airtable.ENABLED[0];
test('to be enabled on share link', () => {
expect('https://airtable.com/shrEoQs3erLnppMie'.match(match)).toBeTruthy();
test("to be enabled on share link", () => {
expect("https://airtable.com/shrEoQs3erLnppMie".match(match)).toBeTruthy();
});
test('to be enabled on embed link', () => {
test("to be enabled on embed link", () => {
expect(
'https://airtable.com/embed/shrEoQs3erLnppMie'.match(match)
"https://airtable.com/embed/shrEoQs3erLnppMie".match(match)
).toBeTruthy();
});
test('to not be enabled elsewhere', () => {
expect('https://airtable.com'.match(match)).toBe(null);
expect('https://airtable.com/features'.match(match)).toBe(null);
expect('https://airtable.com/pricing'.match(match)).toBe(null);
test("to not be enabled elsewhere", () => {
expect("https://airtable.com".match(match)).toBe(null);
expect("https://airtable.com/features".match(match)).toBe(null);
expect("https://airtable.com/pricing".match(match)).toBe(null);
});
});

8
app/embeds/Codepen.js
View File

@ -1,8 +1,8 @@
// @flow
import * as React from 'react';
import Frame from './components/Frame';
import * as React from "react";
import Frame from "./components/Frame";
const URL_REGEX = new RegExp('^https://codepen.io/(.*?)/(pen|embed)/(.*)$');
const URL_REGEX = new RegExp("^https://codepen.io/(.*?)/(pen|embed)/(.*)$");
type Props = {|
attrs: {|
@ -15,7 +15,7 @@ export default class Codepen extends React.Component<Props> {
static ENABLED = [URL_REGEX];
render() {
const normalizedUrl = this.props.attrs.href.replace(/\/pen\//, '/embed/');
const normalizedUrl = this.props.attrs.href.replace(/\/pen\//, "/embed/");
return <Frame src={normalizedUrl} title="Codepen Embed" />;
}

18
app/embeds/Codepen.test.js
View File

@ -1,22 +1,22 @@
/* eslint-disable flowtype/require-valid-file-annotation */
import Codepen from './Codepen';
import Codepen from "./Codepen";
describe('Codepen', () => {
describe("Codepen", () => {
const match = Codepen.ENABLED[0];
test('to be enabled on pen link', () => {
test("to be enabled on pen link", () => {
expect(
'https://codepen.io/chriscoyier/pen/gfdDu'.match(match)
"https://codepen.io/chriscoyier/pen/gfdDu".match(match)
).toBeTruthy();
});
test('to be enabled on embed link', () => {
test("to be enabled on embed link", () => {
expect(
'https://codepen.io/chriscoyier/embed/gfdDu'.match(match)
"https://codepen.io/chriscoyier/embed/gfdDu".match(match)
).toBeTruthy();
});
test('to not be enabled elsewhere', () => {
expect('https://codepen.io'.match(match)).toBe(null);
expect('https://codepen.io/chriscoyier'.match(match)).toBe(null);
test("to not be enabled elsewhere", () => {
expect("https://codepen.io".match(match)).toBe(null);
expect("https://codepen.io/chriscoyier".match(match)).toBe(null);
});
});

6
app/embeds/Figma.js
View File

@ -1,9 +1,9 @@
// @flow
import * as React from 'react';
import Frame from './components/Frame';
import * as React from "react";
import Frame from "./components/Frame";
const URL_REGEX = new RegExp(
'https://([w.-]+.)?figma.com/(file|proto)/([0-9a-zA-Z]{22,128})(?:/.*)?$'
"https://([w.-]+.)?figma.com/(file|proto)/([0-9a-zA-Z]{22,128})(?:/.*)?$"
);
type Props = {|

Some files were not shown because too many files have changed in this diff Show More