gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: add code formatting and linting (#952)

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/netlify-cms-ui-default/src/AuthenticationPage.js
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>
);
};

24
packages/netlify-cms-ui-default/src/Dropdown.js
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>
);

6
packages/netlify-cms-ui-default/src/Icon.js
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)``;

6
packages/netlify-cms-ui-default/src/Icon/icons.js
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',
}
},
};
/**

66
packages/netlify-cms-ui-default/src/Icon/images/_index.js
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;

44
packages/netlify-cms-ui-default/src/ListItemTopBar.js
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;

11
packages/netlify-cms-ui-default/src/Loader.js
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;

39
packages/netlify-cms-ui-default/src/ObjectWidgetTopBar.js
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>
);

22
packages/netlify-cms-ui-default/src/Toggle.js
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>

25
packages/netlify-cms-ui-default/src/styles.js
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 {