chore: add code formatting and linting (#952)

This commit is contained in:
Caleb
2018-08-07 14:46:54 -06:00
committed by Shawn Erquhart
parent 32e0a9b2b5
commit f801b19221
265 changed files with 5988 additions and 4481 deletions

View File

@ -9,12 +9,12 @@ const StyledAuthenticationPage = styled.section`
align-items: center;
justify-content: center;
height: 100vh;
`
`;
const PageLogoIcon = styled(Icon)`
color: #c4c6d2;
margin-top: -300px;
`
`;
const LoginButton = styled.button`
${buttons.button};
@ -27,7 +27,7 @@ const LoginButton = styled.button`
display: flex;
align-items: center;
position: relative;
`
`;
const AuthenticationPage = ({
onLogin,
@ -38,14 +38,14 @@ const AuthenticationPage = ({
}) => {
return (
<StyledAuthenticationPage>
<PageLogoIcon size="300px" type="netlify-cms"/>
<PageLogoIcon size="300px" type="netlify-cms" />
{loginErrorMessage ? <p>{loginErrorMessage}</p> : null}
{!renderPageContent ? null : renderPageContent()}
{!renderButtonContent ? null :
{!renderButtonContent ? null : (
<LoginButton disabled={loginDisabled} onClick={onLogin}>
{renderButtonContent()}
</LoginButton>
}
)}
</StyledAuthenticationPage>
);
};

View File

@ -8,7 +8,7 @@ const StyledWrapper = styled(Wrapper)`
position: relative;
font-size: 14px;
user-select: none;
`
`;
const StyledDropdownButton = styled(DropdownButton)`
${buttons.button};
@ -26,7 +26,7 @@ const StyledDropdownButton = styled(DropdownButton)`
right: 16px;
color: currentColor;
}
`
`;
const DropdownList = styled.ul`
${components.dropdownList};
@ -42,19 +42,19 @@ const DropdownList = styled.ul`
top: ${props.top};
left: ${props.position === 'left' ? 0 : 'auto'};
right: ${props.position === 'right' ? 0 : 'auto'};
`}
`
`};
`;
const StyledMenuItem = styled(MenuItem)`
${components.dropdownItem};
`
`;
const MenuItemIconContainer = styled.div`
flex: 1 0 32px;
text-align: right;
position: relative;
top: 2px;
`
`;
const Dropdown = ({
renderButton,
@ -79,13 +79,11 @@ const Dropdown = ({
const DropdownItem = ({ label, icon, iconDirection, onClick, className }) => (
<StyledMenuItem value={onClick} className={className}>
<span>{label}</span>
{
icon
? <MenuItemIconContainer>
<Icon type={icon} direction={iconDirection} size="small"/>
</MenuItemIconContainer>
: null
}
{icon ? (
<MenuItemIconContainer>
<Icon type={icon} direction={iconDirection} size="small" />
</MenuItemIconContainer>
) : null}
</StyledMenuItem>
);

View File

@ -24,7 +24,7 @@ const IconWrapper = styled.span`
width: 100%;
height: 100%;
}
`
`;
/**
* Calculates rotation for icons that have a `direction` property configured
@ -41,7 +41,7 @@ const getRotation = (iconDirection, newDirection) => {
const rotations = { right: 90, down: 180, left: 270, up: 360 };
const degrees = rotations[newDirection] - rotations[iconDirection];
return `${degrees}deg`;
}
};
const sizes = {
xsmall: '12px',
@ -59,4 +59,4 @@ const Icon = ({ type, direction, size = 'medium', className }) => (
/>
);
export default styled(Icon)``
export default styled(Icon)``;

View File

@ -19,15 +19,15 @@ import images from './images/_index';
* Configuration for individual icons.
*/
const config = {
'arrow': {
arrow: {
direction: 'left',
},
'chevron': {
chevron: {
direction: 'down',
},
'chevron-double': {
direction: 'down',
}
},
};
/**

View File

@ -44,48 +44,48 @@ import iconWrite from './write.svg';
const iconix = iconAdd;
const images = {
'add': iconix,
add: iconix,
'add-with': iconAddWith,
'arrow': iconArrow,
'bitbucket': iconBitbucket,
'bold': iconBold,
'check': iconCheck,
'chevron': iconChevron,
arrow: iconArrow,
bitbucket: iconBitbucket,
bold: iconBold,
check: iconCheck,
chevron: iconChevron,
'chevron-double': iconChevronDouble,
'circle': iconCircle,
'close': iconClose,
'code': iconCode,
circle: iconCircle,
close: iconClose,
code: iconCode,
'code-block': iconCodeBlock,
'drag-handle': iconDragHandle,
'eye': iconEye,
'folder': iconFolder,
'github': iconGithub,
'gitlab': iconGitlab,
'grid': iconGrid,
'h1': iconH1,
'h2': iconH2,
'home': iconHome,
'image': iconImage,
'italic': iconItalic,
'link': iconLink,
'list': iconList,
eye: iconEye,
folder: iconFolder,
github: iconGithub,
gitlab: iconGitlab,
grid: iconGrid,
h1: iconH1,
h2: iconH2,
home: iconHome,
image: iconImage,
italic: iconItalic,
link: iconLink,
list: iconList,
'list-bulleted': iconListBulleted,
'list-numbered': iconListNumbered,
'markdown': iconMarkdown,
'media': iconMedia,
markdown: iconMarkdown,
media: iconMedia,
'media-alt': iconMediaAlt,
'netlify': iconNetlify,
netlify: iconNetlify,
'netlify-cms': iconNetlifyCms,
'page': iconPage,
'pages': iconPages,
page: iconPage,
pages: iconPages,
'pages-alt': iconPagesAlt,
'quote': iconQuote,
'scroll': iconScroll,
'search': iconSearch,
'settings': iconSettings,
'user': iconUser,
'workflow': iconWorkflow,
'write': iconWrite,
quote: iconQuote,
scroll: iconScroll,
search: iconSearch,
settings: iconSettings,
user: iconUser,
workflow: iconWorkflow,
write: iconWrite,
};
export default images;

View File

@ -9,7 +9,7 @@ const TopBar = styled.div`
height: 26px;
border-radius: ${lengths.borderRadius} ${lengths.borderRadius} 0 0;
position: relative;
`
`;
const TopBarButton = styled.button`
${buttons.button};
@ -24,38 +24,32 @@ const TopBarButton = styled.button`
display: flex;
justify-content: center;
align-items: center;
`
`;
const TopBarButtonSpan = TopBarButton.withComponent('span');
const DragIcon = styled(TopBarButtonSpan)`
width: 100%;
cursor: move;
`
`;
const ListItemTopBar = ({ className, collapsed, onCollapseToggle, onRemove, dragHandleHOC }) => (
<TopBar className={className}>
{
onCollapseToggle
? <TopBarButton onClick={onCollapseToggle}>
<Icon type="chevron" size="small" direction={collapsed ? 'right' : 'down'}/>
</TopBarButton>
: null
}
{
dragHandleHOC
? <DragIcon>
<Icon type="drag-handle" size="small"/>
</DragIcon>
: null
}
{
onRemove
? <TopBarButton onClick={onRemove}>
<Icon type="close" size="small"/>
</TopBarButton>
: null
}
{onCollapseToggle ? (
<TopBarButton onClick={onCollapseToggle}>
<Icon type="chevron" size="small" direction={collapsed ? 'right' : 'down'} />
</TopBarButton>
) : null}
{dragHandleHOC ? (
<DragIcon>
<Icon type="drag-handle" size="small" />
</DragIcon>
) : null}
{onRemove ? (
<TopBarButton onClick={onRemove}>
<Icon type="close" size="small" />
</TopBarButton>
) : null}
</TopBar>
);
@ -65,6 +59,6 @@ const StyledListItemTopBar = styled(ListItemTopBar)`
height: 26px;
border-radius: ${lengths.borderRadius} ${lengths.borderRadius} 0 0;
position: relative;
`
`;
export default StyledListItemTopBar;

View File

@ -45,13 +45,13 @@ const LoaderText = styled.div`
color: #767676;
margin-top: 55px;
line-height: 35px;
`
`;
const LoaderItem = styled.div`
position: absolute;
white-space: nowrap;
transform: translateX(-50%);
`
`;
export class Loader extends React.Component {
state = {
@ -69,7 +69,8 @@ export class Loader extends React.Component {
const { children } = this.props;
this.interval = setInterval(() => {
const nextItem = (this.state.currentItem === children.length - 1) ? 0 : this.state.currentItem + 1;
const nextItem =
this.state.currentItem === children.length - 1 ? 0 : this.state.currentItem + 1;
this.setState({ currentItem: nextItem });
}, 5000);
};
@ -108,7 +109,7 @@ export class Loader extends React.Component {
}
const StyledLoader = styled(Loader)`
display: ${props => props.active ? 'block' : 'none'};
display: ${props => (props.active ? 'block' : 'none')};
position: absolute;
top: 50%;
left: 50%;
@ -143,6 +144,6 @@ const StyledLoader = styled(Loader)`
border-color: ${colors.active} transparent transparent;
box-shadow: 0px 0px 0px 1px transparent;
}
`
`;
export default StyledLoader;

View File

@ -1,5 +1,5 @@
import React from 'react';
import styled, { css }from 'react-emotion';
import styled, { css } from 'react-emotion';
import Icon from './Icon';
import { colors, buttons } from './styles';
@ -10,17 +10,19 @@ const TopBarContainer = styled.div`
justify-content: space-between;
margin: 0 -14px;
padding: 13px;
`
`;
const ExpandButtonContainer = styled.div`
${props => props.hasHeading && css`
display: flex;
align-items: center;
font-size: 14px;
font-weight: 500;
line-height: 1;
`}
`
${props =>
props.hasHeading &&
css`
display: flex;
align-items: center;
font-size: 14px;
font-weight: 500;
line-height: 1;
`};
`;
const ExpandButton = styled.button`
${buttons.button};
@ -31,7 +33,7 @@ const ExpandButton = styled.button`
&:last-of-type {
margin-right: 4px;
}
`
`;
const AddButton = styled.button`
${buttons.button};
@ -46,9 +48,16 @@ const AddButton = styled.button`
${Icon} {
margin-left: 6px;
}
`
`;
const ObjectWidgetTopBar = ({ allowAdd, onAdd, onCollapseToggle, collapsed, heading = null, label }) => (
const ObjectWidgetTopBar = ({
allowAdd,
onAdd,
onCollapseToggle,
collapsed,
heading = null,
label,
}) => (
<TopBarContainer>
<ExpandButtonContainer hasHeading={!!heading}>
<ExpandButton onClick={onCollapseToggle}>
@ -56,11 +65,11 @@ const ObjectWidgetTopBar = ({ allowAdd, onAdd, onCollapseToggle, collapsed, head
</ExpandButton>
{heading}
</ExpandButtonContainer>
{!allowAdd ? null :
{!allowAdd ? null : (
<AddButton onClick={onAdd}>
Add {label} <Icon type="add" size="xsmall" />
</AddButton>
}
)}
</TopBarContainer>
);

View File

@ -1,4 +1,4 @@
import React from 'react'
import React from 'react';
import styled, { css } from 'react-emotion';
import ReactToggled from 'react-toggled';
import { colors, colorsRaw, shadows, transitions } from './styles';
@ -11,7 +11,7 @@ const ToggleContainer = styled.span`
width: 40px;
height: 20px;
cursor: pointer;
`
`;
const ToggleHandle = styled.span`
${shadows.dropDeep};
@ -24,17 +24,19 @@ const ToggleHandle = styled.span`
background-color: ${colorsRaw.white};
transition: transform ${transitions.main};
${props => props.isActive && css`
transform: translateX(20px);
`}
`
${props =>
props.isActive &&
css`
transform: translateX(20px);
`};
`;
const ToggleBackground = styled.span`
width: 34px;
height: 14px;
border-radius: 10px;
background-color: ${colors.active};
`
`;
const Toggle = ({
active,
@ -47,7 +49,7 @@ const Toggle = ({
Handle = ToggleHandle,
}) => (
<ReactToggled on={active} onToggle={onChange}>
{({on, getElementTogglerProps}) => (
{({ on, getElementTogglerProps }) => (
<Container
role="switch"
aria-checked={on.toString()}
@ -56,8 +58,8 @@ const Toggle = ({
className={className}
{...getElementTogglerProps()}
>
<Background isActive={on}/>
<Handle isActive={on}/>
<Background isActive={on} />
<Handle isActive={on} />
</Container>
)}
</ReactToggled>

View File

@ -1,16 +1,6 @@
import { css, injectGlobal } from 'react-emotion';
export {
fonts,
colorsRaw,
colors,
lengths,
components,
buttons,
shadows,
borders,
transitions,
};
export { fonts, colorsRaw, colors, lengths, components, buttons, shadows, borders, transitions };
/**
* Font Stacks
@ -110,19 +100,16 @@ const transitions = {
const shadows = {
drop: css`
box-shadow: 0 2px 4px 0 rgba(19, 39, 48, .12);
box-shadow: 0 2px 4px 0 rgba(19, 39, 48, 0.12);
`,
dropMain: css`
box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05),
0 1px 3px 0 rgba(68, 74, 87, 0.10);
box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.05), 0 1px 3px 0 rgba(68, 74, 87, 0.1);
`,
dropMiddle: css`
box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.15),
0 1px 3px 0 rgba(68, 74, 87, 0.30);
box-shadow: 0 2px 6px 0 rgba(68, 74, 87, 0.15), 0 1px 3px 0 rgba(68, 74, 87, 0.3);
`,
dropDeep: css`
box-shadow: 0 4px 12px 0 rgba(68, 74, 87, 0.15),
0 1px 3px 0 rgba(68, 74, 87, 0.25);
box-shadow: 0 4px 12px 0 rgba(68, 74, 87, 0.15), 0 1px 3px 0 rgba(68, 74, 87, 0.25);
`,
};
@ -285,7 +272,7 @@ const components = {
background-color: ${colors.activeBackground};
}
`,
}
};
injectGlobal`
*, *:before, *:after {