diff --git a/frontend/.eslintrc b/frontend/.eslintrc index 04619ce8..b59ce4dd 100644 --- a/frontend/.eslintrc +++ b/frontend/.eslintrc @@ -118,6 +118,7 @@ "max-len": [2, 80], "no-eq-null": 2, "block-scoped-var": 2, - "no-console": 0 + "no-console": 0, + "comma-dangle": ["error", "never"] } } diff --git a/frontend/src/components/breadcrumb/index.js b/frontend/src/components/breadcrumb/index.js index 8dbb2995..db541f24 100644 --- a/frontend/src/components/breadcrumb/index.js +++ b/frontend/src/components/breadcrumb/index.js @@ -16,11 +16,11 @@ const { } = fns; const { - colors, + colors } = constants; const { - H2, + H2 } = BaseElements; const { diff --git a/frontend/src/components/empty/services.js b/frontend/src/components/empty/services.js index 5a982bbf..0f700e4f 100644 --- a/frontend/src/components/empty/services.js +++ b/frontend/src/components/empty/services.js @@ -14,13 +14,13 @@ const { } = Styled; const { - remcalc, + remcalc } = fns; const { P, H2, - H3, + H3 } = BaseElements; const { diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js index b90b46fd..64d6a88e 100644 --- a/frontend/src/components/header/index.js +++ b/frontend/src/components/header/index.js @@ -29,7 +29,7 @@ const { } = composers; const { - colors, + colors } = constants; const borderSide = props => props.toggled @@ -61,7 +61,7 @@ const StyledAvatarWrapper = styled.div` ${pseudoEl({ top: '50%', - right: remcalc(-10), + right: remcalc(-10) })} } `; diff --git a/frontend/src/components/metric-charts/add-metrics.js b/frontend/src/components/metric-charts/add-metrics.js index 63bfe387..02c23a59 100644 --- a/frontend/src/components/metric-charts/add-metrics.js +++ b/frontend/src/components/metric-charts/add-metrics.js @@ -59,7 +59,7 @@ const AddMetrics = ({ AddMetrics.propTypes = { datasets: React.PropTypes.arrayOf(PropTypes.dataset), metricTypes: React.PropTypes.arrayOf(PropTypes.metric), - onAddMetric: React.PropTypes.func.isRequired, + onAddMetric: React.PropTypes.func.isRequired }; module.exports = AddMetrics; diff --git a/frontend/src/components/navigation/org.js b/frontend/src/components/navigation/org.js index 18accd13..1439cfb7 100644 --- a/frontend/src/components/navigation/org.js +++ b/frontend/src/components/navigation/org.js @@ -100,7 +100,7 @@ const OrgNavigation = ({ const navLinks = orgs.map(({ id, name, - image, + image }) => { const to = `/${id}`; diff --git a/frontend/src/components/new-project/billing.js b/frontend/src/components/new-project/billing.js index de4594c7..3a64832c 100644 --- a/frontend/src/components/new-project/billing.js +++ b/frontend/src/components/new-project/billing.js @@ -14,7 +14,7 @@ const { } = ReactIntl; const { - H2, + H2 } = BaseElements; const { @@ -70,7 +70,7 @@ const NewProjectBilling = (props) => { }], handleSubmit, onSubmit, - onNewBilling, + onNewBilling } = props; const _onNewBilling = (evt) => { diff --git a/frontend/src/components/people-list/index.js b/frontend/src/components/people-list/index.js index f4f65ada..d3be504c 100644 --- a/frontend/src/components/people-list/index.js +++ b/frontend/src/components/people-list/index.js @@ -54,7 +54,7 @@ const People = (props) => { People.propTypes = { UI: React.PropTypes.object, handleToggle: React.PropTypes.func, - people: React.PropTypes.array, + people: React.PropTypes.array }; module.exports = People; \ No newline at end of file diff --git a/frontend/src/components/people-list/invite.js b/frontend/src/components/people-list/invite.js index d0889839..4c241ce5 100644 --- a/frontend/src/components/people-list/invite.js +++ b/frontend/src/components/people-list/invite.js @@ -76,9 +76,9 @@ const Invite = React.createClass({ name: this.state.selectValue.label, email: this.state.selectValue.value, role: 'Unassigned', - status: 'Sent invitation', + status: 'Sent invitation' }, - parentIndex: this.props.parentIndex, + parentIndex: this.props.parentIndex }; this.props.addMemember(data, () => { @@ -91,7 +91,7 @@ const Invite = React.createClass({ render() { const { - handleToggle, + handleToggle } = this.props; const selectData = this.getFormattedPlatformMembers(); @@ -145,7 +145,7 @@ const Invite = React.createClass({ ); - }, + } }); module.exports = Invite; \ No newline at end of file diff --git a/frontend/src/components/people-list/table/index.js b/frontend/src/components/people-list/table/index.js index e65efd74..e1c2456e 100644 --- a/frontend/src/components/people-list/table/index.js +++ b/frontend/src/components/people-list/table/index.js @@ -31,7 +31,7 @@ const PeopleTable = (props) => { people = [], parentIndex, removeMember, - UI = {}, + UI = {} } = props; const columns = [{ @@ -122,7 +122,7 @@ PeopleTable.propTypes = { handleStatusTooltip: React.PropTypes.func, parentIndex: React.PropTypes.number, people: React.PropTypes.array, - removeMember: React.PropTypes.func, + removeMember: React.PropTypes.func }; module.exports = PeopleTable; diff --git a/frontend/src/components/people-list/table/person-delete.js b/frontend/src/components/people-list/table/person-delete.js index c648591c..11ffebfd 100644 --- a/frontend/src/components/people-list/table/person-delete.js +++ b/frontend/src/components/people-list/table/person-delete.js @@ -37,7 +37,7 @@ const PersonDelete = (props) => { PersonDelete.propTypes = { parentIndex: React.PropTypes.number, personIndex: React.PropTypes.number, - removeMember: React.PropTypes.func, + removeMember: React.PropTypes.func }; module.exports = PersonDelete; \ No newline at end of file diff --git a/frontend/src/components/people-list/table/person-role.js b/frontend/src/components/people-list/table/person-role.js index 58e97431..ffbbaac8 100644 --- a/frontend/src/components/people-list/table/person-role.js +++ b/frontend/src/components/people-list/table/person-role.js @@ -101,7 +101,7 @@ PersonRole.propTypes = { personIndex: React.PropTypes.number, toggledID: React.PropTypes.oneOfType([ React.PropTypes.string, - React.PropTypes.bool, + React.PropTypes.bool ]) }; diff --git a/frontend/src/components/people-list/table/person-status.js b/frontend/src/components/people-list/table/person-status.js index eee07788..fc177df8 100644 --- a/frontend/src/components/people-list/table/person-status.js +++ b/frontend/src/components/people-list/table/person-status.js @@ -101,7 +101,7 @@ PersonStatus.propTypes = { personIndex: React.PropTypes.number, toggledID: React.PropTypes.oneOfType([ React.PropTypes.string, - React.PropTypes.bool, + React.PropTypes.bool ]) }; diff --git a/frontend/src/components/people-list/table/tooltip.js b/frontend/src/components/people-list/table/tooltip.js index 7a125bc1..165724b5 100644 --- a/frontend/src/components/people-list/table/tooltip.js +++ b/frontend/src/components/people-list/table/tooltip.js @@ -25,7 +25,7 @@ module.exports = ({ personAttr, personIndex, options = [], - parentIndex, + parentIndex }) => { const _options = options.map( (option, i) => { @@ -38,7 +38,7 @@ module.exports = ({ [`${personAttr}`]: option }, personIndex, - parentIndex, + parentIndex }; const _onClick = () => handleSelect(payload); @@ -71,5 +71,5 @@ module.exports.propTypes = { parentIndex: React.PropTypes.number, person: React.PropTypes.object, personAttr: React.PropTypes.string, - personIndex: React.PropTypes.number, + personIndex: React.PropTypes.number }; \ No newline at end of file diff --git a/frontend/src/components/section/index.js b/frontend/src/components/section/index.js index f724f589..c2b7334b 100644 --- a/frontend/src/components/section/index.js +++ b/frontend/src/components/section/index.js @@ -19,11 +19,11 @@ const { } = ReactIntl; const { - breakpoints, + breakpoints } = constants; const { - remcalc, + remcalc } = fns; const StyledHorizontalList = styled(Ul)` @@ -43,7 +43,7 @@ const StyledHorizontalListItem = styled(Li)` const Section = (props) => { const { children, - links = [], + links = [] } = props; const navLinks = links.map((link) => ( diff --git a/frontend/src/components/service/view-toggle.js b/frontend/src/components/service/view-toggle.js index 147396fb..66178661 100644 --- a/frontend/src/components/service/view-toggle.js +++ b/frontend/src/components/service/view-toggle.js @@ -6,11 +6,11 @@ const fns = require('@ui/shared/functions'); const Styled = require('styled-components'); const { - remcalc, + remcalc } = fns; const { - default: styled, + default: styled } = Styled; const StyledWrapper = styled.div` diff --git a/frontend/src/containers/metrics/index.js b/frontend/src/containers/metrics/index.js index ffc4ce41..9b109ea0 100644 --- a/frontend/src/containers/metrics/index.js +++ b/frontend/src/containers/metrics/index.js @@ -67,7 +67,7 @@ Metrics.propTypes = { const mapStateToProps = (state) => ({ // hardcoded now, but should be dynamic // actually, the use for this prop is going to disapear - metricTypeUuid: 'dca08514-72e5-46ce-ad91-e68b3b0914d4', + metricTypeUuid: 'dca08514-72e5-46ce-ad91-e68b3b0914d4' }); const mapDispatchToProps = (dispatch) => ({ diff --git a/frontend/src/containers/org/index.js b/frontend/src/containers/org/index.js index b8d26974..745bef1a 100644 --- a/frontend/src/containers/org/index.js +++ b/frontend/src/containers/org/index.js @@ -13,7 +13,7 @@ const NewProject = require('@containers/new-project'); const SectionComponents = { people: require('./people'), projects: require('./projects'), - settings: require('./settings'), + settings: require('./settings') }; const { diff --git a/frontend/src/containers/org/people.js b/frontend/src/containers/org/people.js index 1a968f05..9b389913 100644 --- a/frontend/src/containers/org/people.js +++ b/frontend/src/containers/org/people.js @@ -13,7 +13,7 @@ const { peopleByOrgIdSelector, orgUISelector, orgIndexSelector, - membersSelector, + membersSelector } = selectors; const { @@ -22,7 +22,7 @@ const { orgHandlePeopleRoleTooltip, orgHandlePeopleStatusTooltip, orgHandleMemberUpdate, - orgRemoveMember, + orgRemoveMember } = actions; const People = (props) => { @@ -58,6 +58,7 @@ const mapDispatchToProps = (dispatch) => ({ dispatch(orgHandleMemberUpdate(updatedMember)), removeMember: (removeData) => dispatch(orgRemoveMember(removeData)) + }); module.exports = connect( diff --git a/frontend/src/containers/project/people.js b/frontend/src/containers/project/people.js index 123fb346..49060fd0 100644 --- a/frontend/src/containers/project/people.js +++ b/frontend/src/containers/project/people.js @@ -13,7 +13,7 @@ const { peopleByProjectIdSelector, projectUISelector, projectIndexByIdSelect, - membersSelector, + membersSelector } = selectors; const { @@ -22,7 +22,7 @@ const { projectHandlePeopleRoleTooltip, projectHandlePeopleStatusTooltip, projectHandleMemberUpdate, - projectRemoveMember, + projectRemoveMember } = actions; const People = (props) => ( @@ -53,6 +53,7 @@ const mapDispatchToProps = (dispatch) => ({ dispatch(projectHandleMemberUpdate(updatedMember)), removeMember: (removeData) => dispatch(projectRemoveMember(removeData)) + }); module.exports = connect( diff --git a/frontend/src/containers/services/index.js b/frontend/src/containers/services/index.js index 31a7b4d1..d480f0a6 100644 --- a/frontend/src/containers/services/index.js +++ b/frontend/src/containers/services/index.js @@ -22,7 +22,7 @@ const { } = selectors; const { - H2, + H2 } = BaseELements; const Services = ({ diff --git a/frontend/src/state/actions.js b/frontend/src/state/actions.js index 45ef4f15..1d11d639 100644 --- a/frontend/src/state/actions.js +++ b/frontend/src/state/actions.js @@ -19,7 +19,7 @@ const projectMemberActions = { projectHandleMemberUpdate: createAction(`${APP}/PROJECT_HANDLE_MEMBER_UPDATE`), projectRemoveMember: - createAction(`${APP}/PROJECT_REMOVE_MEMBER_FROM_ROLE`), + createAction(`${APP}/PROJECT_REMOVE_MEMBER_FROM_ROLE`) }; const orgMemberActions = { @@ -34,7 +34,7 @@ const orgMemberActions = { orgHandleMemberUpdate: createAction(`${APP}/ORG_HANDLE_MEMBER_UPDATE`), orgRemoveMember: - createAction(`${APP}/ORG_REMOVE_MEMBER_FROM_ROLE`), + createAction(`${APP}/ORG_REMOVE_MEMBER_FROM_ROLE`) }; module.exports = { @@ -58,5 +58,5 @@ module.exports = { handleNewProject: createAction(`${APP}/CREATE_NEW_PROJECT`), ...orgMemberActions, - ...projectMemberActions, + ...projectMemberActions }; diff --git a/frontend/src/state/reducers/index.js b/frontend/src/state/reducers/index.js index c86db954..72ec5502 100644 --- a/frontend/src/state/reducers/index.js +++ b/frontend/src/state/reducers/index.js @@ -17,6 +17,6 @@ module.exports = () => { orgs: require('@state/reducers/orgs'), projects: require('@state/reducers/projects'), services: require('@state/reducers/services'), - members: require('@state/reducers/members'), + members: require('@state/reducers/members') }); }; diff --git a/frontend/src/state/reducers/orgs.js b/frontend/src/state/reducers/orgs.js index ef8486c5..b0dd3a4e 100644 --- a/frontend/src/state/reducers/orgs.js +++ b/frontend/src/state/reducers/orgs.js @@ -12,7 +12,7 @@ const { orgHandlePeopleRoleTooltip, orgHandlePeopleStatusTooltip, orgHandleMemberUpdate, - orgRemoveMember, + orgRemoveMember } = actions; module.exports = handleActions({ @@ -20,7 +20,7 @@ module.exports = handleActions({ const { parentIndex, - member, + member } = action.payload; return { @@ -34,7 +34,7 @@ module.exports = handleActions({ member ] }, - ...state.data.slice(parentIndex + 1), + ...state.data.slice(parentIndex + 1) ] }; }, @@ -75,7 +75,7 @@ module.exports = handleActions({ const { parentIndex, person, - personIndex, + personIndex } = action.payload; return { ...state, @@ -91,19 +91,19 @@ module.exports = handleActions({ members: [ ...state.data[parentIndex].members.slice(0, personIndex), { - ...person, + ...person }, ...state.data[parentIndex].members.slice(personIndex + 1) ] }, - ...state.data.slice(parentIndex + 1), + ...state.data.slice(parentIndex + 1) ] }; }, [orgRemoveMember.toString()]: (state, action) => { const { parentIndex, - personIndex, + personIndex } = action.payload; return { @@ -117,8 +117,8 @@ module.exports = handleActions({ ...state.data[parentIndex].members.slice(personIndex + 1) ] }, - ...state.data.slice(parentIndex + 1), + ...state.data.slice(parentIndex + 1) ] }; - }, + } }, {}); diff --git a/frontend/src/state/reducers/projects.js b/frontend/src/state/reducers/projects.js index 9985c3c2..f1db2e7f 100644 --- a/frontend/src/state/reducers/projects.js +++ b/frontend/src/state/reducers/projects.js @@ -26,7 +26,7 @@ module.exports = handleActions({ const { parentIndex, - member, + member } = action.payload; return { @@ -40,7 +40,7 @@ module.exports = handleActions({ member ] }, - ...state.data.slice(parentIndex + 1), + ...state.data.slice(parentIndex + 1) ] }; }, @@ -81,7 +81,7 @@ module.exports = handleActions({ const { parentIndex, person, - personIndex, + personIndex } = action.payload; return { ...state, @@ -97,19 +97,19 @@ module.exports = handleActions({ members: [ ...state.data[parentIndex].members.slice(0, personIndex), { - ...person, + ...person }, ...state.data[parentIndex].members.slice(personIndex + 1) ] }, - ...state.data.slice(parentIndex + 1), + ...state.data.slice(parentIndex + 1) ] }; }, [projectRemoveMember.toString()]: (state, action) => { const { parentIndex, - personIndex, + personIndex } = action.payload; return { @@ -123,7 +123,7 @@ module.exports = handleActions({ ...state.data[parentIndex].members.slice(personIndex + 1) ] }, - ...state.data.slice(parentIndex + 1), + ...state.data.slice(parentIndex + 1) ] }; }, diff --git a/frontend/src/state/selectors.js b/frontend/src/state/selectors.js index 27ab3dca..76d74e2c 100644 --- a/frontend/src/state/selectors.js +++ b/frontend/src/state/selectors.js @@ -188,5 +188,5 @@ module.exports = { membersSelector: members, peopleByProjectIdSelector: peopleByProjectId, projectUISelector: projectsUI, - projectIndexByIdSelect: projectIndexById, + projectIndexByIdSelect: projectIndexById }; diff --git a/frontend/webpack/base.js b/frontend/webpack/base.js index e9017cf0..9d47244a 100644 --- a/frontend/webpack/base.js +++ b/frontend/webpack/base.js @@ -91,7 +91,7 @@ module.exports = { test: /\.svg/, exclude: [ /node_modules/, - path.join(UI, 'shared', 'fonts'), + path.join(UI, 'shared', 'fonts') ], include: [ FRONTEND, @@ -109,7 +109,7 @@ module.exports = { // exclude: /node_modules/, include: [ path.join(UI, 'shared', 'fonts') - ], + ] }, { test: /\.css$/, loader: 'style-loader!css-loader' diff --git a/frontend/webpack/test.js b/frontend/webpack/test.js index 23c346b1..6de9d1de 100644 --- a/frontend/webpack/test.js +++ b/frontend/webpack/test.js @@ -6,7 +6,7 @@ module.exports = { resolve: base.resolve, resolveLoader: base.resolveLoader, output: Object.assign(base.output, { - libraryTarget: 'commonjs2', + libraryTarget: 'commonjs2' }), plugins: [ plugins['named-modules'](), diff --git a/ui/.eslintrc b/ui/.eslintrc index 4d27b6dd..64d70807 100644 --- a/ui/.eslintrc +++ b/ui/.eslintrc @@ -121,6 +121,7 @@ "tabWidth": 2 }], "no-eq-null": 2, - "block-scoped-var": 2 + "block-scoped-var": 2, + "comma-dangle": ["error", "never"] } } diff --git a/ui/docs/src/containers/app/index.js b/ui/docs/src/containers/app/index.js index 2c09fa0b..a7501619 100644 --- a/ui/docs/src/containers/app/index.js +++ b/ui/docs/src/containers/app/index.js @@ -4,7 +4,7 @@ const React = require('react'); const { - Base, + Base } = require('@ui'); module.exports = () => { diff --git a/ui/src/components/add-metric/button.js b/ui/src/components/add-metric/button.js index c6b10e1b..45c7ead6 100644 --- a/ui/src/components/add-metric/button.js +++ b/ui/src/components/add-metric/button.js @@ -58,7 +58,7 @@ AddMetricButton.propTypes = { children: React.PropTypes.node, disabled: React.PropTypes.bool, metric: React.PropTypes.string, - onClick: React.PropTypes.func, + onClick: React.PropTypes.func }; module.exports = Baseline( diff --git a/ui/src/components/add-metric/index.js b/ui/src/components/add-metric/index.js index 43176783..1db5b8be 100644 --- a/ui/src/components/add-metric/index.js +++ b/ui/src/components/add-metric/index.js @@ -3,5 +3,5 @@ module.exports = { AddMetricDescription: require('./description'), AddMetricLink: require('./link'), AddMetricTile: require('./tile'), - AddMetricTitle: require('./title'), + AddMetricTitle: require('./title') }; diff --git a/ui/src/components/avatar/index.js b/ui/src/components/avatar/index.js index dd6cab12..3d46745b 100644 --- a/ui/src/components/avatar/index.js +++ b/ui/src/components/avatar/index.js @@ -55,13 +55,13 @@ const Avatar = ({ src, srcset, style, - width = remcalc(42), + width = remcalc(42) }) => { const _style = { ...style, background: color, width, - height, + height }; const letter = name[0]; @@ -99,7 +99,7 @@ Avatar.propTypes = { src: React.PropTypes.string, srcset: React.PropTypes.string, style: React.PropTypes.object, - width: React.PropTypes.string, + width: React.PropTypes.string }; module.exports = Baseline( diff --git a/ui/src/components/base-elements/index.js b/ui/src/components/base-elements/index.js index 8c6e0b29..2c998155 100644 --- a/ui/src/components/base-elements/index.js +++ b/ui/src/components/base-elements/index.js @@ -89,7 +89,7 @@ const BaseElements = elements.reduce((acc, { // TODO: Fix proptype validation and remove eslint ignore line 1 Component.propTypes = { children: React.PropTypes.node, - style: React.PropTypes.object, + style: React.PropTypes.object }; return { diff --git a/ui/src/components/base-elements/story.js b/ui/src/components/base-elements/story.js index 3316265a..3aeebab9 100644 --- a/ui/src/components/base-elements/story.js +++ b/ui/src/components/base-elements/story.js @@ -20,7 +20,7 @@ const { H2, H3, P, - Small, + Small } = BaseElements; storiesOf('Base Elements', module) diff --git a/ui/src/components/base/global.js b/ui/src/components/base/global.js index b8923b5b..a8fc9e28 100644 --- a/ui/src/components/base/global.js +++ b/ui/src/components/base/global.js @@ -27,7 +27,7 @@ const fonts = [ filename: 'librefranklin-bold-webfont', weight: '700', style: 'normal' - }, + } ]; module.exports = css` diff --git a/ui/src/components/base/index.js b/ui/src/components/base/index.js index bc0408a6..81227c6c 100644 --- a/ui/src/components/base/index.js +++ b/ui/src/components/base/index.js @@ -8,7 +8,7 @@ const { } = constants; const { - default: styled, + default: styled } = Styled; module.exports = styled.div` diff --git a/ui/src/components/button/index.js b/ui/src/components/button/index.js index 60517ff6..0103f750 100644 --- a/ui/src/components/button/index.js +++ b/ui/src/components/button/index.js @@ -9,7 +9,7 @@ const ReactRouter = require('react-router-dom'); const { base, - inactive, + inactive } = constants.colors; const { diff --git a/ui/src/components/checkbox/index.js b/ui/src/components/checkbox/index.js new file mode 100644 index 00000000..a7d50497 --- /dev/null +++ b/ui/src/components/checkbox/index.js @@ -0,0 +1,127 @@ +const composers = require('../../shared/composers'); +const constants = require('../../shared/constants'); +const fns = require('../../shared/functions'); +const React = require('react'); +const Styled = require('styled-components'); + +const { + boxes +} = constants; + +const { + Baseline +} = composers; + +const { + remcalc +} = fns; + +const { + default: styled +} = Styled; + +const StyledInput = styled.input` + visibility: hidden; + &:checked + label::after { + opacity: 1; + } + &:disabled + label { + background-color: rgb(249, 249, 249); + } + &:disabled + label::after { + opacity: 0.3; + } +`; + +const StyledLabel = styled.label` + color: rgb(100, 100, 100); + position: absolute; + width: ${remcalc(24)}; + height: ${remcalc(24)}; + top: 0; + border-radius: ${boxes.borderRadius}; + background-color: rgb(255, 255, 255); + box-shadow: ${boxes.insetShaddow}; + border: ${boxes.border.unchecked}; + + &::after { + opacity: 0; + content: ''; + position: absolute; + width: ${remcalc(9)}; + height: ${remcalc(4)}; + background: transparent; + top: ${remcalc(7)}; + left: ${remcalc(7)}; + border: ${remcalc(3)} solid #333; + border-top: none; + border-right: none; + transform: rotate(-45deg); + } + + &:hover { + &::after { + opacity: 0.3; + } + } +`; + +const StyledDiv = styled.div` + width: ${remcalc(24)}; + height: ${remcalc(24)}; + position: relative; +`; + +const Checkbox = ({ + checked = false, + children, + className, + disabled = false, + form, + id, + name, + onChange, + readOnly, + required, + selectionDirection, + style, + tabIndex +}) => ( + + + + {children} + + +); + +Checkbox.propTypes = { + checked: React.PropTypes.bool, + children: React.PropTypes.node, + className: React.PropTypes.string, + disabled: React.PropTypes.bool, + form: React.PropTypes.string, + id: React.PropTypes.string, + name: React.PropTypes.string, + onChange: React.PropTypes.func, + readOnly: React.PropTypes.bool, + required: React.PropTypes.bool, + selectionDirection: React.PropTypes.string, + style: React.PropTypes.object, + tabIndex: React.PropTypes.string +}; + +module.exports = Baseline( + Checkbox +); diff --git a/ui/src/components/form/msg.js b/ui/src/components/form/msg.js new file mode 100644 index 00000000..417a4524 --- /dev/null +++ b/ui/src/components/form/msg.js @@ -0,0 +1,38 @@ +const composers = require('../../shared/composers'); +const constants = require('../../shared/constants'); +const Label = require('./label'); +const match = require('../../shared/match'); +const Styled = require('styled-components'); + +const { + breakpoints, + colors +} = constants; + +const { + Baseline +} = composers; + +const { + default: styled +} = Styled; + +const color = match.prop({ + warning: colors.inputWarning, + error: colors.inputError + //disabled: colors.brandInactiveColor +})('type'); + + +const Msg = styled(Label)` + color: ${color}; + + ${breakpoints.medium` + float: right; + text-align: right; + `} +`; + +module.exports = Baseline( + Msg +); diff --git a/ui/src/components/form/toggle.js b/ui/src/components/form/toggle.js index 263f4ae0..4bbb3f95 100644 --- a/ui/src/components/form/toggle.js +++ b/ui/src/components/form/toggle.js @@ -21,7 +21,7 @@ const { } = fns; const { - default: styled, + default: styled } = Styled; const Input = styled.input` diff --git a/ui/src/components/list/mini-metric-data.js b/ui/src/components/list/mini-metric-data.js index c1cdb615..258f0e0f 100644 --- a/ui/src/components/list/mini-metric-data.js +++ b/ui/src/components/list/mini-metric-data.js @@ -1,3 +1,5 @@ +/*eslint-disable */ + module.exports = [{ firstQuartile: 15, thirdQuartile: 15, diff --git a/ui/src/components/metric/close-button.js b/ui/src/components/metric/close-button.js index bc377ce5..5da52913 100644 --- a/ui/src/components/metric/close-button.js +++ b/ui/src/components/metric/close-button.js @@ -57,7 +57,7 @@ const AddMetricButton = ({ }; AddMetricButton.propTypes = { - onClick: React.PropTypes.func, + onClick: React.PropTypes.func }; module.exports = Baseline( diff --git a/ui/src/components/metric/graph.js b/ui/src/components/metric/graph.js index d6b81b57..d5bd5013 100644 --- a/ui/src/components/metric/graph.js +++ b/ui/src/components/metric/graph.js @@ -70,7 +70,7 @@ class Graph extends React.Component { displayFormats: { hour: 'MMM D, hA' } - }, + } }], yAxes: [{ display: true, @@ -88,7 +88,7 @@ class Graph extends React.Component { legend: { display: false } - }, + } }); } diff --git a/ui/src/components/metric/metric-data.js b/ui/src/components/metric/metric-data.js index 6c1ff682..980e7241 100644 --- a/ui/src/components/metric/metric-data.js +++ b/ui/src/components/metric/metric-data.js @@ -1,3 +1,5 @@ +/*eslint-disable */ + module.exports = [{ firstQuartile: 15, thirdQuartile: 15, diff --git a/ui/src/components/metric/settings-button.js b/ui/src/components/metric/settings-button.js index c1555144..7e30519d 100644 --- a/ui/src/components/metric/settings-button.js +++ b/ui/src/components/metric/settings-button.js @@ -74,7 +74,7 @@ const AddMetricButton = ({ AddMetricButton.propTypes = { children: React.PropTypes.node, metric: React.PropTypes.string, - onClick: React.PropTypes.func, + onClick: React.PropTypes.func }; module.exports = Baseline( diff --git a/ui/src/components/metric/story.js b/ui/src/components/metric/story.js index 62b2b27d..e9d390da 100644 --- a/ui/src/components/metric/story.js +++ b/ui/src/components/metric/story.js @@ -48,7 +48,7 @@ const kbMetricData = MetricData.map(m => { thirdQuartile: withinRange(m.thirdQuartile, 1.55, 2.0), median: withinRange(m.median, 1.55, 2.0), max: withinRange(m.max, 1.55, 2.0), - min: withinRange(m.min, 1.55, 2.0), + min: withinRange(m.min, 1.55, 2.0) }; }); diff --git a/ui/src/components/mini-metric/story.js b/ui/src/components/mini-metric/story.js index dafc0df3..2248f5f3 100644 --- a/ui/src/components/mini-metric/story.js +++ b/ui/src/components/mini-metric/story.js @@ -4,9 +4,7 @@ const Row = require('../row'); const Column = require('../column'); const { - storiesOf, - // action, - // linkTo + storiesOf } = require('@kadira/storybook'); const { diff --git a/ui/src/components/select-custom/index.js b/ui/src/components/select-custom/index.js index a09c7b88..55d318db 100644 --- a/ui/src/components/select-custom/index.js +++ b/ui/src/components/select-custom/index.js @@ -9,7 +9,7 @@ const Select = require('react-select'); require('react-select/dist/react-select.css'); const { - rndId, + rndId } = fns; const { diff --git a/ui/src/components/table-data-table/index.js b/ui/src/components/table-data-table/index.js index 14a5d320..cb92aeab 100644 --- a/ui/src/components/table-data-table/index.js +++ b/ui/src/components/table-data-table/index.js @@ -44,7 +44,7 @@ Table.propTypes = { columns: React.PropTypes.array, data: React.PropTypes.array, style: React.PropTypes.object, - title: React.PropTypes.string, + title: React.PropTypes.string }; module.exports = Baseline( diff --git a/ui/src/components/table-data-table/table-content.js b/ui/src/components/table-data-table/table-content.js index 7eea541a..556fbcd7 100644 --- a/ui/src/components/table-data-table/table-content.js +++ b/ui/src/components/table-data-table/table-content.js @@ -35,7 +35,7 @@ TableContent.propTypes = { data: React.PropTypes.array, hasBody: React.PropTypes.bool, hasHeader: React.PropTypes.bool, - width: React.PropTypes.string, + width: React.PropTypes.string }; module.exports = Baseline( diff --git a/ui/src/components/table-simple-table/index.js b/ui/src/components/table-simple-table/index.js index 48a3aa9b..385255b9 100644 --- a/ui/src/components/table-simple-table/index.js +++ b/ui/src/components/table-simple-table/index.js @@ -3,5 +3,5 @@ module.exports = { TableHead: require('./table-head'), TableBody: require('./table-body'), TableRow: require('./table-row'), - TableItem: require('./table-item'), + TableItem: require('./table-item') }; diff --git a/ui/src/components/table-simple-table/table-body.js b/ui/src/components/table-simple-table/table-body.js index aeb24f89..1b104c52 100644 --- a/ui/src/components/table-simple-table/table-body.js +++ b/ui/src/components/table-simple-table/table-body.js @@ -4,7 +4,7 @@ const React = require('react'); const Styled = require('styled-components'); const { - default: styled, + default: styled } = Styled; const { diff --git a/ui/src/components/topology-old/index.js b/ui/src/components/topology-old/index.js index 833582c3..ef9cd212 100644 --- a/ui/src/components/topology-old/index.js +++ b/ui/src/components/topology-old/index.js @@ -149,7 +149,7 @@ class TopologyGraph extends React.Component { const { width, - height, + height } = props; this.simulation = d3.forceSimulation() @@ -168,7 +168,7 @@ class TopologyGraph extends React.Component { const component = this; const { - simulation, + simulation } = this; const svg = d3.select(this._refs.svg); @@ -178,7 +178,7 @@ class TopologyGraph extends React.Component { graph = { nodes: [], links: [] - }, + } } = this.props; // Drawing the links between nodes @@ -337,7 +337,7 @@ class TopologyGraph extends React.Component { const { dragged, dragstarted, - dragended, + dragended } = this; const width = 170; @@ -423,7 +423,7 @@ class TopologyGraph extends React.Component { TopologyGraph.propTypes = { graph: React.PropTypes.object, height: React.PropTypes.number, - width: React.PropTypes.number, + width: React.PropTypes.number }; module.exports = Baseline( diff --git a/ui/src/components/topology-old/story.js b/ui/src/components/topology-old/story.js index f6710b78..c475a379 100644 --- a/ui/src/components/topology-old/story.js +++ b/ui/src/components/topology-old/story.js @@ -14,21 +14,21 @@ const services = { attrs: { dcs: 1, instances: 2, - healthy: true, + healthy: true }, metrics: [ { name: 'CPU', - stat: '50%', + stat: '50%' }, { name: 'Memory', - stat: '20%', + stat: '20%' }, { name: 'Network', - stat: '5.9KB/sec', - }, + stat: '5.9KB/sec' + } ] }, { @@ -36,21 +36,21 @@ const services = { attrs: { dcs: 1, instances: 2, - healthy: true, + healthy: true }, metrics: [ { name: 'CPU', - stat: '50%', + stat: '50%' }, { name: 'Memory', - stat: '20%', + stat: '20%' }, { name: 'Network', - stat: '5.9KB/sec', - }, + stat: '5.9KB/sec' + } ] }, { @@ -58,21 +58,21 @@ const services = { attrs: { dcs: 1, instances: 2, - healthy: true, + healthy: true }, metrics: [ { name: 'CPU', - stat: '50%', + stat: '50%' }, { name: 'Memory', - stat: '20%', + stat: '20%' }, { name: 'Network', - stat: '5.9KB/sec', - }, + stat: '5.9KB/sec' + } ] }, { @@ -80,21 +80,21 @@ const services = { attrs: { dcs: 1, instances: 2, - healthy: true, + healthy: true }, metrics: [ { name: 'CPU', - stat: '50%', + stat: '50%' }, { name: 'Memory', - stat: '20%', + stat: '20%' }, { name: 'Network', - stat: '5.9KB/sec', - }, + stat: '5.9KB/sec' + } ] }, { @@ -102,40 +102,40 @@ const services = { attrs: { dcs: 1, instances: 2, - healthy: true, + healthy: true }, metrics: [ { name: 'CPU', - stat: '50%', + stat: '50%' }, { name: 'Memory', - stat: '20%', + stat: '20%' }, { name: 'Network', - stat: '5.9KB/sec', - }, + stat: '5.9KB/sec' + } ] } ], links: [ { source: 'Nginx', - target: 'WordPress', + target: 'WordPress' }, { source: 'WordPress', - target: 'Memcached', + target: 'Memcached' }, { source: 'WordPress', - target: 'NFS', + target: 'NFS' }, { source: 'WordPress', - target: 'Percona', + target: 'Percona' } ] }; diff --git a/ui/src/components/topology-old/view.js b/ui/src/components/topology-old/view.js index e04ad057..1bce6f28 100644 --- a/ui/src/components/topology-old/view.js +++ b/ui/src/components/topology-old/view.js @@ -32,7 +32,7 @@ const Topology = (props) => ( ); Topology.propTypes = { - children: React.PropTypes.node, + children: React.PropTypes.node }; module.exports = Baseline( diff --git a/ui/src/components/topology/data.js b/ui/src/components/topology/data.js index 9c551b4e..df535bfd 100644 --- a/ui/src/components/topology/data.js +++ b/ui/src/components/topology/data.js @@ -1,3 +1,5 @@ +/*eslint-disable */ + module.exports = { nodes: [ { diff --git a/ui/src/components/topology/graph-node.js b/ui/src/components/topology/graph-node.js index 5501b8bd..d979fb53 100644 --- a/ui/src/components/topology/graph-node.js +++ b/ui/src/components/topology/graph-node.js @@ -77,7 +77,7 @@ const GraphNode = ({ const paddingLeft = 18-halfWidth; const infoPosition = { x: paddingLeft, - y: 59 - halfHeight, + y: 59 - halfHeight }; const metricsPosition = { x: paddingLeft, diff --git a/ui/src/components/topology/index.js b/ui/src/components/topology/index.js index 9cad64d2..af78de04 100644 --- a/ui/src/components/topology/index.js +++ b/ui/src/components/topology/index.js @@ -3,5 +3,5 @@ module.exports = { TopologyGraphNode: require('./graph-node'), TopologyGraphLink: require('./graph-link'), TopologyGraphNodeButton: require('./graph-node-button'), - TopologyGraphNodeMetrics: require('./graph-node-metrics'), + TopologyGraphNodeMetrics: require('./graph-node-metrics') }; diff --git a/ui/src/components/topology/topology-graph.js b/ui/src/components/topology/topology-graph.js index b79a68c0..b1da4cf9 100644 --- a/ui/src/components/topology/topology-graph.js +++ b/ui/src/components/topology/topology-graph.js @@ -188,7 +188,7 @@ class TopologyGraph extends React.Component { return ({ ...simNode, x: simNode.x + offset.x, - y: simNode.y + offset.y, + y: simNode.y + offset.y }); } return ({ diff --git a/ui/src/components/widget/index.js b/ui/src/components/widget/index.js index 25a3b213..602eca82 100644 --- a/ui/src/components/widget/index.js +++ b/ui/src/components/widget/index.js @@ -18,7 +18,7 @@ const { } = fns; const { - default: styled, + default: styled } = Styled; const classNames = { diff --git a/ui/src/shared/constants/boxes.js b/ui/src/shared/constants/boxes.js index b6ef48fe..03457772 100644 --- a/ui/src/shared/constants/boxes.js +++ b/ui/src/shared/constants/boxes.js @@ -18,6 +18,6 @@ module.exports = { checked: `${remcalc(1)} solid ${base.primary}`, unchecked: `${remcalc(1)} solid ${base.grey}`, confirmed: `${remcalc(1)} solid ${base.grey}`, - error: `${remcalc(1)} solid ${base.red}`, + error: `${remcalc(1)} solid ${base.red}` } }; diff --git a/ui/src/shared/constants/breakpoints.js b/ui/src/shared/constants/breakpoints.js index 9188af57..b0000ed4 100644 --- a/ui/src/shared/constants/breakpoints.js +++ b/ui/src/shared/constants/breakpoints.js @@ -11,16 +11,16 @@ const small = { const medium = { upper: '64rem', - lower: '48.1rem', + lower: '48.1rem' }; const large = { upper: '75rem', - lower: '64.1rem', + lower: '64.1rem' }; const xlarge = { - lower: '75.1rem', + lower: '75.1rem' }; const screen = 'only screen'; @@ -42,7 +42,7 @@ const screens = { 'xlarge': `${screen} and (min-width: ${xlarge.lower}) and (max-width: ${xlarge.upper})`, - 'xlargeUp': `${screen} and (min-width: ${xlarge.lower})`, + 'xlargeUp': `${screen} and (min-width: ${xlarge.lower})` }; const breakpoints = Object.keys(screens).reduce((acc, label) => { diff --git a/ui/stories/index.js b/ui/stories/index.js index 39fe5594..fb7bfabd 100644 --- a/ui/stories/index.js +++ b/ui/stories/index.js @@ -1,8 +1,6 @@ const React = require('react'); const { - storiesOf, - // action, - // linkTo + storiesOf } = require('@kadira/storybook'); const { @@ -16,7 +14,7 @@ const { MiniMetricSubtitle, MiniMetricView }, - Row, + Row } = require('../src/'); const MiniMetricData = require('../src/components/list/mini-metric-data');