diff --git a/frontend/.babelrc b/frontend/.babelrc index 80bcf0f8..0a1ffbe7 100644 --- a/frontend/.babelrc +++ b/frontend/.babelrc @@ -3,6 +3,7 @@ "presets": [ "react", ["env", { + "modules": false, "targets": { "browsers": [ "last 2 versions" @@ -18,7 +19,6 @@ ["transform-react-jsx", { "useBuiltIns": true }], - "transform-es2015-modules-commonjs", "transform-exponentiation-operator" ], "env": { diff --git a/frontend/.eslintrc b/frontend/.eslintrc index b59ce4dd..a0918716 100644 --- a/frontend/.eslintrc +++ b/frontend/.eslintrc @@ -22,6 +22,9 @@ "es6": true }, "rules": { + "jsx-quotes": [2, "prefer-single"], + "comma-dangle": [2, "never"], + "eol-last": [2, "always"], "react/jsx-no-undef": 2, "react/jsx-uses-react": 2, "react/jsx-uses-vars": 2, @@ -118,7 +121,6 @@ "max-len": [2, 80], "no-eq-null": 2, "block-scoped-var": 2, - "no-console": 0, - "comma-dangle": ["error", "never"] + "no-console": 0 } } diff --git a/frontend/package.json b/frontend/package.json index 84bafb95..5ac095e7 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,6 +12,7 @@ "start": "webpack-dev-server --define process.env.BASELINE_GRID=false --open --config webpack/index.js ", "production": "node server", "lint": "make lint", + "lint-fix": "make lint-fix", "test": "make test", "open": "nyc report --reporter=html & open coverage/index.html", "coverage": "nyc check-coverage --statements 100 --functions 100 --lines 100 --branches 100", @@ -64,6 +65,7 @@ "babel-core": "^6.23.1", "babel-eslint": "^7.1.1", "babel-loader": "^6.3.2", + "babel-plugin-inline-react-svg": "^0.2.0", "babel-plugin-styled-components": "^1.0.0", "babel-plugin-transform-class-properties": "^6.23.0", "babel-plugin-transform-es2015-modules-commonjs": "^6.23.0", @@ -81,12 +83,14 @@ "babel-register": "^6.23.0", "case-sensitive-paths-webpack-plugin": "^1.1.4", "enzyme": "^2.7.1", - "eslint": "^3.16.0", + "eslint": "^3.16.1", "eslint-config-react-app": "^0.5.1", "eslint-config-semistandard": "^7.0.0", "eslint-config-standard": "^6.2.1", - "eslint-loader": "^1.6.1", + "eslint-loader": "^1.6.3", "eslint-plugin-babel": "^4.0.1", + "eslint-plugin-flowtype": "^2.30.0", + "eslint-plugin-import": "^2.2.0", "eslint-plugin-jsx-a11y": "^4.0.0", "eslint-plugin-promise": "^3.4.2", "eslint-plugin-react": "^6.10.0", diff --git a/frontend/src/components/article/index.js b/frontend/src/components/article/index.js index 5b5f7ca2..a761e3a7 100644 --- a/frontend/src/components/article/index.js +++ b/frontend/src/components/article/index.js @@ -1,17 +1,9 @@ -const Styled = require('styled-components'); -const constants = require('@ui/shared/constants'); - -const { - // colors, - breakpoints -} = constants; - -const { - default: styled -} = Styled; +import styled from 'styled-components'; +import { colors, breakpoints } from '@ui/shared/constants'; // Main Contonent Wrapper Styles -module.exports = styled.article` +export default styled.article` + background-color: ${colors.base.grey}; padding: 2rem; ${breakpoints.large` diff --git a/frontend/src/components/breadcrumb/index.js b/frontend/src/components/breadcrumb/index.js index 05576d40..9cb0838d 100644 --- a/frontend/src/components/breadcrumb/index.js +++ b/frontend/src/components/breadcrumb/index.js @@ -1,32 +1,15 @@ -const React = require('react'); -const Styled = require('styled-components'); -const flatten = require('lodash.flatten'); +import React from 'react'; +import styled from 'styled-components'; +import flatten from 'lodash.flatten'; -const Container = require('@ui/components/container'); -const Row = require('@ui/components/row'); -const Column = require('@ui/components/column'); -const BaseElements = require('@ui/components/base-elements'); -const NavLink = require('@ui/components/nav-link'); -const PropTypes = require('@root/prop-types'); -const fns = require('@ui/shared/functions'); -const constants = require('@ui/shared/constants'); - -const { - remcalc, - unitcalc -} = fns; - -const { - colors -} = constants; - -const { - H2 -} = BaseElements; - -const { - default: styled -} = Styled; +import Container from '@ui/components/container'; +import Row from '@ui/components/row'; +import Column from '@ui/components/column'; +import { H2 } from '@ui/components/base-elements'; +import NavLink from '@ui/components/nav-link'; +import PropTypes from '@root/prop-types'; +import { remcalc, unitcalc } from '@ui/shared/functions'; +import { colors } from '@ui/shared/constants'; // Main Contonent Wrapper Styles const StyledDiv = styled.div` @@ -75,21 +58,19 @@ const Breadcrumb = ({ children, links = [], name = [] -}) => { - return ( - - - - - - {getNameLink(name)} - - - - - - ); -}; +}) => ( + + + + + + {getNameLink(name)} + + + + + +); Breadcrumb.propTypes = { children: React.PropTypes.node, @@ -97,4 +78,4 @@ Breadcrumb.propTypes = { name: React.PropTypes.arrayOf(PropTypes.link) }; -module.exports = Breadcrumb; +export default Breadcrumb; diff --git a/frontend/src/components/create-monitor/index.js b/frontend/src/components/create-monitor/index.js index 83bb4a58..445ba251 100644 --- a/frontend/src/components/create-monitor/index.js +++ b/frontend/src/components/create-monitor/index.js @@ -1,31 +1,12 @@ -const React = require('react'); -const ReactIntl = require('react-intl'); -const Styled = require('styled-components'); +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import styled from 'styled-components'; -const Form = require('@ui/components/form'); -const Button = require('@ui/components/button'); -const Column = require('@ui/components/column'); -const fns = require('@ui/shared/functions'); -const Row = require('@ui/components/row'); - - -const { - FormGroup, - Select, - Input -} = Form; - -const { - FormattedMessage -} = ReactIntl; - -const { - default: styled -} = Styled; - -const { - remcalc -} = fns; +import { FormGroup, Select, Input } from '@ui/components/form'; +import Button from '@ui/components/button'; +import Column from '@ui/components/column'; +import { remcalc } from '@ui/shared/functions'; +import Row from '@ui/components/row'; const H4 = styled.h4` margin-bottom: ${remcalc(5)} !important; @@ -148,4 +129,4 @@ CreateMonitor.propTypes = { submitting: React.PropTypes.bool }; -module.exports = CreateMonitor; +export default CreateMonitor; diff --git a/frontend/src/components/empty/instances.js b/frontend/src/components/empty/instances.js index 71bc8fc0..df845ea1 100644 --- a/frontend/src/components/empty/instances.js +++ b/frontend/src/components/empty/instances.js @@ -1,19 +1,11 @@ -const React = require('react'); -const ReactIntl = require('react-intl'); +import React from 'react'; +import { FormattedMessage } from 'react-intl'; -const Column = require('@ui/components/column'); -const Row = require('@ui/components/row'); -const BaseElements = require('@ui/components/base-elements'); +import Column from '@ui/components/column'; +import Row from '@ui/components/row'; +import { P } from '@ui/components/base-elements'; -const { - P -} = BaseElements; - -const { - FormattedMessage -} = ReactIntl; - -module.exports = () => ( +export default () => (

diff --git a/frontend/src/components/empty/people.js b/frontend/src/components/empty/people.js index a1607324..bb1980d1 100644 --- a/frontend/src/components/empty/people.js +++ b/frontend/src/components/empty/people.js @@ -1,14 +1,10 @@ -const React = require('react'); -const ReactIntl = require('react-intl'); +import React from 'react'; +import { FormattedMessage } from 'react-intl'; -const Column = require('@ui/components/column'); -const Row = require('@ui/components/row'); +import Column from '@ui/components/column'; +import Row from '@ui/components/row'; -const { - FormattedMessage -} = ReactIntl; - -module.exports = () => ( +export default () => (

@@ -17,4 +13,3 @@ module.exports = () => ( ); - diff --git a/frontend/src/components/empty/projects.js b/frontend/src/components/empty/projects.js index 1c522f11..de3c0368 100644 --- a/frontend/src/components/empty/projects.js +++ b/frontend/src/components/empty/projects.js @@ -1,14 +1,10 @@ -const React = require('react'); -const ReactIntl = require('react-intl'); +import React from 'react'; +import { FormattedMessage } from 'react-intl'; -const Column = require('@ui/components/column'); -const Row = require('@ui/components/row'); +import Column from '@ui/components/column'; +import Row from '@ui/components/row'; -const { - FormattedMessage -} = ReactIntl; - -module.exports = () => ( +export default () => (

@@ -17,4 +13,3 @@ module.exports = () => ( ); - diff --git a/frontend/src/components/empty/services.js b/frontend/src/components/empty/services.js index 0f700e4f..416f6185 100644 --- a/frontend/src/components/empty/services.js +++ b/frontend/src/components/empty/services.js @@ -1,43 +1,23 @@ -const React = require('react'); -const ReactIntl = require('react-intl'); -const Styled = require('styled-components'); - -const Button = require('@ui/components/button'); -const Column = require('@ui/components/column'); -const Row = require('@ui/components/row'); -const BaseElements = require('@ui/components/base-elements'); - -const fns = require('@ui/shared/functions'); - -const { - default: styled -} = Styled; - -const { - remcalc -} = fns; - -const { - P, - H2, - H3 -} = BaseElements; - -const { - FormattedMessage -} = ReactIntl; +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import styled from 'styled-components'; +import Button from '@ui/components/button'; +import Column from '@ui/components/column'; +import Row from '@ui/components/row'; +import { P, H2, H3 } from '@ui/components/base-elements'; +import { remcalc } from '@ui/shared/functions'; const StyledBox = styled.div` box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); border: solid 1px #d8d8d8; padding: ${remcalc('6 18 24')}; - + & + & { margin-top: ${remcalc(24)}; } `; -module.exports = () => ( +export default () => (

diff --git a/frontend/src/components/footer/index.js b/frontend/src/components/footer/index.js index 50f9215a..31b8219d 100644 --- a/frontend/src/components/footer/index.js +++ b/frontend/src/components/footer/index.js @@ -1,7 +1,3 @@ -const Styled = require('styled-components'); +import styled from 'styled-components'; -const { - default: styled -} = Styled; - -module.exports = styled.footer``; +export default styled.footer``; diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js index 64d6a88e..e3d4fd0d 100644 --- a/frontend/src/components/header/index.js +++ b/frontend/src/components/header/index.js @@ -1,36 +1,16 @@ -const React = require('react'); -const ReactRouter = require('react-router-dom'); -const Styled = require('styled-components'); +import React from 'react'; +import { Link } from 'react-router-dom'; +import styled from 'styled-components'; -const Column = require('@ui/components/column'); -const Avatar = require('@ui/components/avatar'); -const fns = require('@ui/shared/functions'); -const logo = require('@resources/logo.svg'); -const PropTypes = require('@root/prop-types'); -const Row = require('@ui/components/row'); -const Tooltip = require('@ui/components/tooltip'); -const composers = require('@ui/shared/composers'); -const constants = require('@ui/shared/constants'); - -const { - Link -} = ReactRouter; - -const { - default: styled -} = Styled; - -const { - remcalc -} = fns; - -const { - pseudoEl -} = composers; - -const { - colors -} = constants; +import Column from '@ui/components/column'; +import Avatar from '@ui/components/avatar'; +import { remcalc } from '@ui/shared/functions'; +import logo from '@resources/logo.svg'; +import PropTypes from '@root/prop-types'; +import Row from '@ui/components/row'; +import Tooltip from '@ui/components/tooltip'; +import { pseudoEl } from '@ui/shared/composers'; +import { colors } from '@ui/shared/constants'; const borderSide = props => props.toggled ? 'bottom' @@ -53,7 +33,7 @@ const StyledProfileWrapper = styled.div` const StyledAvatarWrapper = styled.div` display: inline-block; - + &:after { border-left: ${remcalc(5)} solid transparent; border-right: ${remcalc(5)} solid transparent; @@ -122,7 +102,7 @@ const Header = ({ ); return ( - + @@ -157,4 +137,4 @@ Header.propTypes = { tooltip: React.PropTypes.bool }; -module.exports = Header; +export default Header; diff --git a/frontend/src/components/instance-item/index.js b/frontend/src/components/instance-item/index.js index c874ee1f..2ed32ae8 100644 --- a/frontend/src/components/instance-item/index.js +++ b/frontend/src/components/instance-item/index.js @@ -1,16 +1,15 @@ -const React = require('react'); +import React from 'react'; -const MetricsOutlet = require('@components/metrics-outlet'); -const PropTypes = require('@root/prop-types'); -const List = require('@ui/components/list'); +import MetricsOutlet from '@components/metrics-outlet'; +import PropTypes from '@root/prop-types'; -const { +import { ListItem, ListItemView, ListItemMeta, ListItemTitle, ListItemOptions -} = List; +} from '@ui/components/list'; const InstanceItem = ({ instance = {}, @@ -34,4 +33,4 @@ InstanceItem.propTypes = { toggleCollapsed: React.PropTypes.func }; -module.exports = InstanceItem; \ No newline at end of file +export default InstanceItem; diff --git a/frontend/src/components/instance-list/index.js b/frontend/src/components/instance-list/index.js index 5662c827..5f0c663e 100644 --- a/frontend/src/components/instance-list/index.js +++ b/frontend/src/components/instance-list/index.js @@ -1,13 +1,13 @@ -const React = require('react'); - -const InstanceItem = require('@components/instance-item'); -const PropTypes = require('@root/prop-types'); +import React from 'react'; +import InstanceItem from '@components/instance-item'; +import PropTypes from '@root/prop-types'; const InstanceList = ({ instances = [], toggleCollapsed = () => null }) => { - const onClick = (uuid) => () => toggleCollapsed(uuid); + const onClick = (uuid) => () => + toggleCollapsed(uuid); const instanceList = instances.map((instance) => ( ( +export default () => (

manage monitor

-); \ No newline at end of file +); diff --git a/frontend/src/components/metric-charts/add-metrics.js b/frontend/src/components/metric-charts/add-metrics.js index 02c23a59..702d3983 100644 --- a/frontend/src/components/metric-charts/add-metrics.js +++ b/frontend/src/components/metric-charts/add-metrics.js @@ -1,33 +1,30 @@ -const React = require('react'); -const PropTypes = require('@root/prop-types'); -const AddMetric = require('@ui/components/add-metric'); -const ReactIntl = require('react-intl'); +import React from 'react'; +import PropTypes from '@root/prop-types'; +import { FormattedMessage } from 'react-intl'; -const { - FormattedMessage -} = ReactIntl; - -const { +import { AddMetricButton, AddMetricDescription, AddMetricLink, AddMetricTile, AddMetricTitle -} = AddMetric; +} from '@ui/components/add-metric'; const AddMetrics = ({ datasets, metricTypes, onAddMetric }) => { + const added = (metric) => Boolean(datasets.filter((dataset) => + dataset.type.uuid === metric + ).length); - const added = (metric) => - Boolean(datasets.filter((dataset) => dataset.type.uuid === metric).length); const addButton = (metric) => ( ); + const addedButton = ( @@ -62,4 +59,4 @@ AddMetrics.propTypes = { onAddMetric: React.PropTypes.func.isRequired }; -module.exports = AddMetrics; +export default AddMetrics; diff --git a/frontend/src/components/metric-charts/index.js b/frontend/src/components/metric-charts/index.js index 2f31164f..a66f4bea 100644 --- a/frontend/src/components/metric-charts/index.js +++ b/frontend/src/components/metric-charts/index.js @@ -1,14 +1,9 @@ -const React = require('react'); -const moment = require('moment'); -const PropTypes = require('@root/prop-types'); -const Metric = require('@ui/components/metric'); -const ReactIntl = require('react-intl'); +import React from 'react'; +import moment from 'moment'; +import { FormattedMessage } from 'react-intl'; +import PropTypes from '@root/prop-types'; -const { - FormattedMessage -} = ReactIntl; - -const { +import { MetricGraph, MetricCloseButton, MetricHeader, @@ -16,7 +11,7 @@ const { MetricSettingsButton, MetricTitle, MetricView -} = Metric; +} from '@ui/components/metric'; const MetricCharts = ({ datasets, @@ -30,23 +25,20 @@ const MetricCharts = ({ onSettingsClick, onRemoveMetric = () => {} }) => { - - const optionList = durations.map(duration => ( + const optionList = durations.map((duration) => ( )); - const metricList = datasets.map((dataset, index) => { - - const { - data, - duration=durations[0], - type - } = dataset; - + const metricList = datasets.map(({ + data, + duration = durations[0], + type, + uuid + }, index) => { const onSelectChange = (evt) => - onDurationChange(Number(evt.target.value), dataset.uuid); + onDurationChange(Number(evt.target.value), uuid); return ( @@ -88,4 +80,4 @@ MetricCharts.propTypes = { onSettingsClick: React.PropTypes.func.isRequired }; -module.exports = MetricCharts; +export default MetricCharts; diff --git a/frontend/src/components/metrics-outlet/index.js b/frontend/src/components/metrics-outlet/index.js index 807f7a92..be2a6c13 100644 --- a/frontend/src/components/metrics-outlet/index.js +++ b/frontend/src/components/metrics-outlet/index.js @@ -1,27 +1,18 @@ -const React = require('react'); -const Styled = require('styled-components'); +import React from 'react'; +import styled from 'styled-components'; -const Column = require('@ui/components/column'); -const List = require('@ui/components/list'); -const MiniMetric = require('@ui/components/mini-metric'); -const PropTypes = require('@root/prop-types'); -const Row = require('@ui/components/row'); +import Column from '@ui/components/column'; +import { ListItemOutlet } from '@ui/components/list'; +import PropTypes from '@root/prop-types'; +import Row from '@ui/components/row'; -const { - default: styled -} = Styled; - -const { +import { MiniMetricGraph, MiniMetricMeta, MiniMetricTitle, MiniMetricSubtitle, MiniMetricView -} = MiniMetric; - -const { - ListItemOutlet -} = List; +} from '@ui/components/mini-metric'; const StyledOutlet = styled(ListItemOutlet)` padding-left: 0; @@ -37,11 +28,10 @@ const StyledRow = styled(Row)` } `; -const MetricsOutlet = (props) => { - const { - datasets = [] - } = props; - +const MetricsOutlet = ({ + datasets = [], + ...props +}) => { const _datasets = datasets.map((metric, i) => ( @@ -67,4 +57,4 @@ MetricsOutlet.propTypes = { datasets: React.PropTypes.arrayOf(PropTypes.dataset) }; -module.exports = MetricsOutlet; +export default MetricsOutlet; diff --git a/frontend/src/components/monitors/index.js b/frontend/src/components/monitors/index.js index 62903e4a..ee0f7952 100644 --- a/frontend/src/components/monitors/index.js +++ b/frontend/src/components/monitors/index.js @@ -1,30 +1,14 @@ -const React = require('react'); -const ReactIntl = require('react-intl'); -const Styled = require('styled-components'); +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import styled from 'styled-components'; -const constants = require('@ui/shared/constants'); -const Close = require('@ui/components/close'); -const fns = require('@ui/shared/functions'); -const Li = require('@ui/components/horizontal-list/li'); -const Modal = require('@ui/components/modal'); -const PropTypes = require('@root/prop-types'); -const Ul = require('@ui/components/horizontal-list/ul'); - -const { - FormattedMessage -} = ReactIntl; - -const { - default: styled -} = Styled; - -const { - colors -} = constants; - -const { - remcalc -} = fns; +import { colors } from '@ui/shared/constants'; +import Close from '@ui/components/close'; +import { remcalc } from '@ui/shared/functions'; +import Li from '@ui/components/horizontal-list/li'; +import Modal from '@ui/components/modal'; +import PropTypes from '@root/prop-types'; +import Ul from '@ui/components/horizontal-list/ul'; const H1 = styled.h1` font-size: ${remcalc(26)} !important; @@ -41,7 +25,7 @@ const H3 = styled.h3` font-style: normal; font-stretch: normal; color: ${colors.brandSecondaryColor}; - margin: ${remcalc(0)} auto ${remcalc(26)} ${remcalc(24)} !important; + margin: 0 auto ${remcalc(26)} ${remcalc(24)} !important; `; const Header = styled.header` @@ -118,4 +102,4 @@ Monitors.propTypes = { togglePage: React.PropTypes.func.isRequired }; -module.exports = Monitors; +export default Monitors; diff --git a/frontend/src/components/navigation/index.js b/frontend/src/components/navigation/index.js index 6fd1406b..b5def3e5 100644 --- a/frontend/src/components/navigation/index.js +++ b/frontend/src/components/navigation/index.js @@ -1,8 +1,4 @@ -const Styled = require('styled-components'); +import styled from 'styled-components'; -const { - default: styled -} = Styled; - -module.exports = styled.nav` +export default styled.nav` `; diff --git a/frontend/src/components/navigation/org.js b/frontend/src/components/navigation/org.js index 1439cfb7..fa7d64c8 100644 --- a/frontend/src/components/navigation/org.js +++ b/frontend/src/components/navigation/org.js @@ -1,35 +1,15 @@ -const React = require('react'); -const ReactRedux = require('react-redux'); -const Styled = require('styled-components'); +import React from 'react'; +import { connect } from 'react-redux'; +import styled from 'styled-components'; -const Avatar = require('@ui/components/avatar'); -const Container = require('@ui/components/container'); -const NavLink = require('@ui/components/nav-link'); -const constants = require('@ui/shared/constants'); -const PropTypes = require('@root/prop-types'); -const selectors = require('@state/selectors'); -const Ul = require('@ui/components/horizontal-list/ul'); -const fns = require('@ui/shared/functions'); - -const { - connect -} = ReactRedux; - -const { - default: styled -} = Styled; - -const { - colors -} = constants; - -const { - orgsSelector -} = selectors; - -const { - remcalc -} = fns; +import Avatar from '@ui/components/avatar'; +import Container from '@ui/components/container'; +import NavLink from '@ui/components/nav-link'; +import { colors } from '@ui/shared/constants'; +import PropTypes from '@root/prop-types'; +import { orgsSelector } from '@state/selectors'; +import Ul from '@ui/components/horizontal-list/ul'; +import { remcalc } from '@ui/shared/functions'; const StyledNav = styled.div` background-color: #f2f2f2; @@ -147,6 +127,6 @@ const mapStateToProps = (state) => ({ orgs: orgsSelector(state) }); -module.exports = connect( +export default connect( mapStateToProps )(OrgNavigation); diff --git a/frontend/src/components/new-project/billing.js b/frontend/src/components/new-project/billing.js index 3a64832c..aeb835a4 100644 --- a/frontend/src/components/new-project/billing.js +++ b/frontend/src/components/new-project/billing.js @@ -1,40 +1,18 @@ -const React = require('react'); -const ReactIntl = require('react-intl'); -const Styled = require('styled-components'); +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import styled from 'styled-components'; -const constants = require('@ui/shared/constants'); -const fns = require('@ui/shared/functions'); +import { colors } from '@ui/shared/constants'; +import { remcalc } from '@ui/shared/functions'; +import { H2 } from '@ui/components/base-elements'; +import Button from '@ui/components/button'; -const Button = require('@ui/components/button'); -const BaseElements = require('@ui/components/base-elements'); -const Card = require('@ui/components/payment-card'); - -const { - FormattedMessage -} = ReactIntl; - -const { - H2 -} = BaseElements; - -const { - default: styled -} = Styled; - -const { - colors -} = constants; - -const { - remcalc -} = fns; - -const { +import { PaymentCard, PaymentCardDetail, PaymentCardDetails, PaymentCardView -} = Card; +} from '@ui/components/payment-card'; const Container = styled.div` padding: ${remcalc(96)} ${remcalc(40)}; @@ -62,17 +40,15 @@ const LeftButton = styled(Button)` margin-right: ${remcalc(6)}; `; -const NewProjectBilling = (props) => { - const { - cards = [{ - type: 'mastercard', - number: 'xxxx-xxxx-xxxx-4901' - }], - handleSubmit, - onSubmit, - onNewBilling - } = props; - +const NewProjectBilling = ({ + cards = [{ + type: 'mastercard', + number: 'xxxx-xxxx-xxxx-4901' + }], + handleSubmit, + onSubmit, + onNewBilling +}) => { const _onNewBilling = (evt) => { evt.preventDefault(); onNewBilling(); @@ -120,4 +96,4 @@ NewProjectBilling.propTypes = { onSubmit: React.PropTypes.func.isRequired }; -module.exports = NewProjectBilling; +export default NewProjectBilling; diff --git a/frontend/src/components/new-project/index.js b/frontend/src/components/new-project/index.js index 63f91b86..a2851005 100644 --- a/frontend/src/components/new-project/index.js +++ b/frontend/src/components/new-project/index.js @@ -1,39 +1,17 @@ -const React = require('react'); -const ReactIntl = require('react-intl'); -const Styled = require('styled-components'); +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import styled from 'styled-components'; +import { colors } from '@ui/shared/constants'; +import { remcalc } from '@ui/shared/functions'; +import { H2 } from '@ui/components/base-elements'; +import Button from '@ui/components/button'; -const constants = require('@ui/shared/constants'); -const fns = require('@ui/shared/functions'); -const Button = require('@ui/components/button'); -const BaseElements = require('@ui/components/base-elements'); -const Form = require('@ui/components/form'); - -const { - H2 -} = BaseElements; - -const { +import { FormGroup, FormLabel, FormMeta, Input -} = Form; - -const { - FormattedMessage -} = ReactIntl; - -const { - default: styled -} = Styled; - -const { - colors -} = constants; - -const { - remcalc -} = fns; +} from '@ui/components/form'; const Container = styled.div` padding: ${remcalc(96)} ${remcalc(40)}; @@ -66,15 +44,13 @@ const LeftButton = styled(Button)` margin-right: ${remcalc(6)}; `; -const CreateProject = (props) => { - const { - handleSubmit, - onCancel, - onSubmit, - pristine, - submitting - } = props; - +const CreateProject = ({ + handleSubmit, + onCancel, + onSubmit, + pristine, + submitting +}) => { const _onCancel = (evt) => { evt.preventDefault(); onCancel(); @@ -119,4 +95,4 @@ CreateProject.propTypes = { submitting: React.PropTypes.bool.isRequired }; -module.exports = CreateProject; +export default CreateProject; diff --git a/frontend/src/components/new-project/new-billing.js b/frontend/src/components/new-project/new-billing.js index 5e17d6d8..b8ec60ea 100644 --- a/frontend/src/components/new-project/new-billing.js +++ b/frontend/src/components/new-project/new-billing.js @@ -1,46 +1,24 @@ -const React = require('react'); -const ReactIntl = require('react-intl'); -const Styled = require('styled-components'); +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import styled from 'styled-components'; -const constants = require('@ui/shared/constants'); -const fns = require('@ui/shared/functions'); -const BaseElements = require('@ui/components/base-elements'); -const normalize = require('@root/utils/form/normalize'); -const Form = require('@ui/components/form'); -const Button = require('@ui/components/button'); +import { colors } from '@ui/shared/constants'; +import { remcalc } from '@ui/shared/functions'; +import Button from '@ui/components/button'; +import { H2 } from '@ui/components/base-elements'; -const { - H2 -} = BaseElements; - -const { +import { FormGroup, FormLabel, FormMeta, Input -} = Form; +} from '@ui/components/form'; -const { - FormattedMessage -} = ReactIntl; - -const { - default: styled -} = Styled; - -const { - colors -} = constants; - -const { - remcalc -} = fns; - -const { +import { normalizeCardNumber, normalizeCardCVV, normalizeCardExpiry -} = normalize; +} from '@root/utils/form/normalize'; const Container = styled.div` padding: ${remcalc(96)} ${remcalc(40)}; @@ -84,15 +62,13 @@ const ProjectNameButtons = styled(Button)` margin-right: ${remcalc(6)}; `; -const CreateBilling = (props) => { - const { - handleSubmit, - onBack, - onSubmit, - pristine, - submitting - } = props; - +const CreateBilling = ({ + handleSubmit, + onBack, + onSubmit, + pristine, + submitting +}) => { const _onBack = (evt) => { evt.preventDefault(); onBack(evt); @@ -166,4 +142,4 @@ CreateBilling.propTypes = { submitting: React.PropTypes.bool.isRequired }; -module.exports = CreateBilling; +export default CreateBilling; diff --git a/frontend/src/components/people-list/index.js b/frontend/src/components/people-list/index.js index d3be504c..8e846dc5 100644 --- a/frontend/src/components/people-list/index.js +++ b/frontend/src/components/people-list/index.js @@ -1,18 +1,11 @@ -const React = require('react'); -const Styled = require('styled-components'); - -const Empty = require('@components/empty/people'); - -const Row = require('@ui/components/row'); -const Column = require('@ui/components/column'); -const Button = require('@ui/components/button'); - -const PeopleTable = require('./table'); -const Invite = require('./invite'); - -const { - default: styled -} = Styled; +import React from 'react'; +import styled from 'styled-components'; +import Empty from '@components/empty/people'; +import Row from '@ui/components/row'; +import Column from '@ui/components/column'; +import Button from '@ui/components/button'; +import PeopleTable from './table'; +import Invite from './invite'; const StyledButton = styled(Button)` float: right; @@ -25,6 +18,16 @@ const People = (props) => { people } = props; + const invite = !UI.invite_toggled ? null : ( + + ); + + const peopleTable = people.length > 0 ? ( + + ) : ( + + ); + return (
@@ -37,14 +40,10 @@ const People = (props) => { - - {UI.invite_toggled ? : null} - + {invite} - { people.length > 0 - ? - : } + {peopleTable}
@@ -57,4 +56,4 @@ People.propTypes = { people: React.PropTypes.array }; -module.exports = People; \ No newline at end of file +export default People; diff --git a/frontend/src/components/people-list/invite.js b/frontend/src/components/people-list/invite.js index 4c241ce5..8465eaea 100644 --- a/frontend/src/components/people-list/invite.js +++ b/frontend/src/components/people-list/invite.js @@ -1,20 +1,16 @@ -const React = require('react'); -const Styled = require('styled-components'); +// eslint-disable-next-line no-unused-vars +import _ from 'react-select/dist/react-select.css'; -const Row = require('@ui/components/row'); -const Column = require('@ui/components/column'); -const Button = require('@ui/components/button'); +import React from 'react'; +import styled from 'styled-components'; -const { - default: styled -} = Styled; - -// TOOD: Require from UI Components - causes issue ATM. -const Select = require('react-select'); -require('react-select/dist/react-select.css'); +import Row from '@ui/components/row'; +import Column from '@ui/components/column'; +import Button from '@ui/components/button'; +// TODO: Require from UI Components - causes issue ATM. +import Select from 'react-select'; const SelectWrapper = styled.div` - .Select-menu-outer { margin-top: 48px; } @@ -24,14 +20,13 @@ const SelectWrapper = styled.div` top: -4px; } `; - -const StyledSubmitButton = styled(Button)` - float: right; - width: 20%; +const InlineButton = styled(Button)` + display: inline-block; `; -const StyledInlineButton = styled(Button)` - display: inline-block; +const ButtonAdd = styled(Button)` + float: right; + width: 20%; `; // TODO: When removing react-select css @@ -44,41 +39,36 @@ const InputStyle = { paddingTop: '10px' }; - const Invite = React.createClass({ - propTypes: { addMemember: React.PropTypes.func, handleToggle: React.PropTypes.func, parentIndex: React.PropTypes.number, platformMembers: React.PropTypes.array }, - getInitialState() { return { selectValue: '', members: [] }; }, - getFormattedPlatformMembers() { return this.props.platformMembers.map((m) => ({ value: m.email, label: m.name })); }, - handleSubmit(e) { e.preventDefault(); const data = { + parentIndex: this.props.parentIndex, member: { name: this.state.selectValue.label, email: this.state.selectValue.value, role: 'Unassigned', status: 'Sent invitation' - }, - parentIndex: this.props.parentIndex + } }; this.props.addMemember(data, () => { @@ -87,9 +77,7 @@ const Invite = React.createClass({ }); }); }, - render() { - const { handleToggle } = this.props; @@ -107,45 +95,36 @@ const Invite = React.createClass({

Search for a person by name or email or enter an email address to invite someone new.

-
- + Add - +
- - + Cancel - - - + + Send Invitation(s) - + ); } }); -module.exports = Invite; \ No newline at end of file +export default Invite; diff --git a/frontend/src/components/people-list/table/index.js b/frontend/src/components/people-list/table/index.js index e1c2456e..abc8836b 100644 --- a/frontend/src/components/people-list/table/index.js +++ b/frontend/src/components/people-list/table/index.js @@ -1,39 +1,31 @@ -const React = require('react'); -const Styled = require('styled-components'); +import React from 'react'; +import styled from 'styled-components'; -const Table = require('@ui/components/table-data-table'); -const Form = require('@ui/components/form'); +import Table from '@ui/components/table-data-table'; +import { remcalc } from '@ui/shared/functions'; -const fns = require('@ui/shared/functions'); +import PersonStatus from './person-status'; +import PersonRole from './person-role'; +import PersonDelete from './person-delete'; -const PersonStatus = require('./person-status'); -const PersonRole = require('./person-role'); -const PersonDelete = require('./person-delete'); - -const { - default: styled -} = Styled; - -const { - remcalc -} = fns; - -const { +import { Checkbox, FormGroup -} = Form; +} from '@ui/components/form'; -const PeopleTable = (props) => { - const { - handleRoleTooltip, - handleStatusTooltip, - handleMemberUpdate, - people = [], - parentIndex, - removeMember, - UI = {} - } = props; +const StyledWrapper = styled.div` + margin-top: ${remcalc(40)}; +`; +const PeopleTable = ({ + handleRoleTooltip, + handleStatusTooltip, + handleMemberUpdate, + people = [], + parentIndex, + removeMember, + UI = {} +}) => { const columns = [{ title: ( @@ -101,10 +93,6 @@ const PeopleTable = (props) => { }; }); - const StyledWrapper = styled.div` - margin-top: ${remcalc(40)}; - `; - return ( { - - const { - personIndex, - parentIndex, - removeMember - } = props; - +const PersonDelete = ({ + personIndex, + parentIndex, + removeMember +}) => { const _onClick = () => removeMember({ personIndex, parentIndex @@ -40,4 +33,4 @@ PersonDelete.propTypes = { removeMember: React.PropTypes.func }; -module.exports = PersonDelete; \ No newline at end of file +export default PersonDelete; diff --git a/frontend/src/components/people-list/table/person-role.js b/frontend/src/components/people-list/table/person-role.js index ffbbaac8..6fc583a1 100644 --- a/frontend/src/components/people-list/table/person-role.js +++ b/frontend/src/components/people-list/table/person-role.js @@ -1,22 +1,9 @@ -const React = require('react'); -const Styled = require('styled-components'); +import React from 'react'; +import styled from 'styled-components'; -const fns = require('@ui/shared/functions'); -const composers = require('@ui/shared/composers'); - -const Tooltip = require('./tooltip'); - -const { - pseudoEl -} = composers; - -const { - default: styled -} = Styled; - -const { - remcalc -} = fns; +import { remcalc } from '@ui/shared/functions'; +import { pseudoEl } from '@ui/shared/composers'; +import Tooltip from './tooltip'; const borderSide = props => props.toggled ? 'bottom' @@ -26,12 +13,12 @@ const StyledWrapper = styled.div` position: relative; display: inline-block; min-width: ${remcalc(130)}; - + &:after { border-left: ${remcalc(5)} solid transparent; border-right: ${remcalc(5)} solid transparent; border-${borderSide}: ${remcalc(5)} solid black; - + ${pseudoEl({ top: '40%', right: remcalc(-10) @@ -48,18 +35,15 @@ const PlainButton = styled.button` color: inherit; `; -const PersonRole = (props) => { - - const { - toggledID, - membersRolesOptions, - person, - personIndex, - handleRoleTooltip, - handleMemberUpdate, - parentIndex - } = props; - +const PersonRole = ({ + toggledID, + membersRolesOptions, + person, + personIndex, + handleRoleTooltip, + handleMemberUpdate, + parentIndex +}) => { const toggled = toggledID === person.uuid; const handleClick = () => handleRoleTooltip(person.uuid); const handleOptionSelect = (updatedMember) => @@ -72,22 +56,23 @@ const PersonRole = (props) => { role: person.role }; + const tooltip = !toggled ? null : ( + + ); + return ( {person.role} - - { toggledID === person.uuid - ? - : null } + {tooltip} ); }; @@ -105,4 +90,4 @@ PersonRole.propTypes = { ]) }; -module.exports = PersonRole; \ No newline at end of file +export default PersonRole; diff --git a/frontend/src/components/people-list/table/person-status.js b/frontend/src/components/people-list/table/person-status.js index fc177df8..3e029f6f 100644 --- a/frontend/src/components/people-list/table/person-status.js +++ b/frontend/src/components/people-list/table/person-status.js @@ -1,22 +1,8 @@ -const React = require('react'); -const Styled = require('styled-components'); - -const fns = require('@ui/shared/functions'); -const composers = require('@ui/shared/composers'); - -const Tooltip = require('./tooltip'); - -const { - pseudoEl -} = composers; - -const { - default: styled -} = Styled; - -const { - remcalc -} = fns; +import React from 'react'; +import styled from 'styled-components'; +import { remcalc } from '@ui/shared/functions'; +import { pseudoEl } from '@ui/shared/composers'; +import Tooltip from './tooltip'; const borderSide = props => props.toggled ? 'bottom' @@ -26,12 +12,12 @@ const StyledWrapper = styled.div` position: relative; display: inline-block; min-width: ${remcalc(130)}; - + &:after { border-left: ${remcalc(5)} solid transparent; border-right: ${remcalc(5)} solid transparent; border-${borderSide}: ${remcalc(5)} solid black; - + ${pseudoEl({ top: '40%', right: remcalc(-10) @@ -48,20 +34,20 @@ const PlainButton = styled.button` color: inherit; `; -const PersonStatus = (props) => { - - const { - toggledID, - membersStatusOptions, - person, - personIndex, - handleStatusTooltip, - handleMemberUpdate, - parentIndex - } = props; - +const PersonStatus = ({ + toggledID, + membersStatusOptions, + person, + personIndex, + handleStatusTooltip, + handleMemberUpdate, + parentIndex +}) => { const toggled = toggledID === person.uuid; - const handleClick = () => handleStatusTooltip(person.uuid); + + const handleClick = () => + handleStatusTooltip(person.uuid); + const handleOptionSelect = (updatedMember) => handleMemberUpdate(updatedMember); @@ -72,22 +58,23 @@ const PersonStatus = (props) => { role: person.role }; + const tooltip = !toggled ? null : ( + + ); + return ( {person.status} - - { toggledID === person.uuid - ? - : null } + {tooltip} ); }; @@ -105,4 +92,4 @@ PersonStatus.propTypes = { ]) }; -module.exports = PersonStatus; \ No newline at end of file +export default PersonStatus; diff --git a/frontend/src/components/people-list/table/tooltip.js b/frontend/src/components/people-list/table/tooltip.js index 165724b5..4c0c3a6a 100644 --- a/frontend/src/components/people-list/table/tooltip.js +++ b/frontend/src/components/people-list/table/tooltip.js @@ -1,11 +1,6 @@ -const React = require('react'); -const Styled = require('styled-components'); - -const Tooltip = require('@ui/components/tooltip'); - -const { - default: styled -} = Styled; +import React from 'react'; +import Tooltip from '@ui/components/tooltip'; +import styled from 'styled-components'; const StyledTooltip = styled(Tooltip)` position: absolute; @@ -19,7 +14,7 @@ const arrowPosition = { right: '10%' }; -module.exports = ({ +const ExtendedTooltip = ({ handleSelect, person = {}, personAttr, @@ -27,9 +22,7 @@ module.exports = ({ options = [], parentIndex }) => { - const _options = options.map( (option, i) => { - const payload = { person: { uuid: person.uuid, @@ -41,14 +34,15 @@ module.exports = ({ parentIndex }; - const _onClick = () => handleSelect(payload); + const _onClick = () => + handleSelect(payload); return (
  • {option}
    • @@ -65,11 +59,13 @@ module.exports = ({ ); }; -module.exports.propTypes = { +ExtendedTooltip.propTypes = { handleSelect: React.PropTypes.func, options: React.PropTypes.array, parentIndex: React.PropTypes.number, person: React.PropTypes.object, personAttr: React.PropTypes.string, personIndex: React.PropTypes.number -}; \ No newline at end of file +}; + +export default ExtendedTooltip; diff --git a/frontend/src/components/redirect/index.js b/frontend/src/components/redirect/index.js index 1d4d0483..c54f399d 100644 --- a/frontend/src/components/redirect/index.js +++ b/frontend/src/components/redirect/index.js @@ -1,10 +1,6 @@ -const React = require('react'); -const ReactRouter = require('react-router-dom'); +import React from 'react'; +import { Redirect } from 'react-router-dom'; -const { - Redirect -} = ReactRouter; - -module.exports = (to) => () => ( +export default (to) => () => ( ); diff --git a/frontend/src/components/section/index.js b/frontend/src/components/section/index.js index c2b7334b..d6314a33 100644 --- a/frontend/src/components/section/index.js +++ b/frontend/src/components/section/index.js @@ -1,30 +1,14 @@ -const React = require('react'); -const ReactIntl = require('react-intl'); -const Styled = require('styled-components'); +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import styled from 'styled-components'; -const Li = require('@ui/components/horizontal-list/li'); -const NavLink = require('@ui/components/nav-link'); -const constants = require('@ui/shared/constants'); -const fns = require('@ui/shared/functions'); -const PropTypes = require('@root/prop-types'); -const Ul = require('@ui/components/horizontal-list/ul'); -const Breadcrumb = require('@components/breadcrumb'); - -const { - default: styled -} = Styled; - -const { - FormattedMessage -} = ReactIntl; - -const { - breakpoints -} = constants; - -const { - remcalc -} = fns; +import Li from '@ui/components/horizontal-list/li'; +import NavLink from '@ui/components/nav-link'; +import { breakpoints } from '@ui/shared/constants'; +import { remcalc } from '@ui/shared/functions'; +import PropTypes from '@root/prop-types'; +import Ul from '@ui/components/horizontal-list/ul'; +import Breadcrumb from '@components/breadcrumb'; const StyledHorizontalList = styled(Ul)` padding: 0; @@ -57,7 +41,7 @@ const Section = (props) => { return (
    - + {navLinks} {children} @@ -70,4 +54,4 @@ Section.propTypes = { links: React.PropTypes.arrayOf(PropTypes.link) }; -module.exports = Section; +export default Section; diff --git a/frontend/src/components/service/item.js b/frontend/src/components/service/item.js index 46e96694..1758b7d8 100644 --- a/frontend/src/components/service/item.js +++ b/frontend/src/components/service/item.js @@ -1,17 +1,12 @@ -const forceArray = require('force-array'); -const React = require('react'); -const ReactRouter = require('react-router-dom'); +import React from 'react'; +import { Link } from 'react-router-dom'; +import forceArray from 'force-array'; -const Anchor = require('@ui/components/anchor'); -const List = require('@ui/components/list'); -const MetricsOutlet = require('@components/metrics-outlet'); -const PropTypes = require('@root/prop-types'); +import Anchor from '@ui/components/anchor'; +import MetricsOutlet from '@components/metrics-outlet'; +import PropTypes from '@root/prop-types'; -const { - Link -} = ReactRouter; - -const { +import { ListItem, ListItemView, ListItemMeta, @@ -21,7 +16,7 @@ const { ListItemGroupView, ListItemOptions, ListItemHeader -} = List; +} from '@ui/components/list'; const ServiceItem = ({ org = '', @@ -109,4 +104,4 @@ ServiceItem.propTypes = { service: PropTypes.service }; -module.exports = ServiceItem; +export default ServiceItem; diff --git a/frontend/src/components/service/view-toggle.js b/frontend/src/components/service/view-toggle.js index 66178661..27f0c1da 100644 --- a/frontend/src/components/service/view-toggle.js +++ b/frontend/src/components/service/view-toggle.js @@ -1,17 +1,8 @@ -const React = require('react'); -const Toggle = require('@ui/components/toggle'); +import React from 'react'; +import styled from 'styled-components'; -const fns = require('@ui/shared/functions'); - -const Styled = require('styled-components'); - -const { - remcalc -} = fns; - -const { - default: styled -} = Styled; +import Toggle from '@ui/components/toggle'; +import { remcalc } from '@ui/shared/functions'; const StyledWrapper = styled.div` margin-top: ${remcalc(9)}; @@ -22,14 +13,11 @@ const StyledSpan = styled.span` margin-right: ${remcalc(6)}; `; -const ServiceToggle = () => { +const ServiceToggle = () => ( + + View + + +); - return ( - - View - - - ); -}; - -module.exports = ServiceToggle; \ No newline at end of file +export default ServiceToggle; diff --git a/frontend/src/containers/app.js b/frontend/src/containers/app.js index e73d615b..2bf3c3bd 100644 --- a/frontend/src/containers/app.js +++ b/frontend/src/containers/app.js @@ -1,35 +1,17 @@ -const React = require('react'); -const ReactRedux = require('react-redux'); -const ReactRouter = require('react-router-dom'); -const Styled = require('styled-components'); - -const actions = require('@state/actions'); -const Article = require('@components/article'); -const Base = require('@ui/components/base'); -const BaselineGrid = require('@ui/components/baseline-grid'); -const Footer = require('@components/footer'); -const Header = require('@containers/header'); -const Home = require('@containers/home'); -const NotFound = require('@containers/not-found'); -const Nav = require('@components/navigation'); -const OrgNavigation = require('@components/navigation/org'); - -const { - updateRouter -} = actions; - -const { - connect -} = ReactRedux; - -const { - Switch, - Route -} = ReactRouter; - -const { - injectGlobal -} = Styled; +import React from 'react'; +import { connect } from 'react-redux'; +import { Switch, Route } from 'react-router-dom'; +import { injectGlobal } from 'styled-components'; +import { updateRouter } from '@state/actions'; +import Article from '@components/article'; +import Base from '@ui/components/base'; +import BaselineGrid from '@ui/components/baseline-grid'; +import Footer from '@components/footer'; +import Header from '@containers/header'; +import Home from '@containers/home'; +import NotFound from '@containers/not-found'; +import Nav from '@components/navigation'; +import OrgNavigation from '@components/navigation/org'; const App = connect()(React.createClass({ displayName: 'App', @@ -80,18 +62,18 @@ const App = connect()(React.createClass({ } })); -module.exports = (props) => ( +export default (props) => (
    -
    - +
    )); diff --git a/ui/src/components/table-data-table/table-body.js b/ui/src/components/table-data-table/table-body.js index b095f777..37e30d71 100644 --- a/ui/src/components/table-data-table/table-body.js +++ b/ui/src/components/table-data-table/table-body.js @@ -1,22 +1,18 @@ -const composers = require('../../shared/composers'); -const React = require('react'); - -const Row = require('./table-row'); - -const { - Baseline -} = composers; +import Row from './table-row'; +import { Baseline } from '../../shared/composers'; +import React from 'react'; const TableBody = ({ columns, - data + data, + ...props }) => { const rows = columns.map((column, index) => ( )); return ( - + {rows} ); @@ -27,6 +23,6 @@ TableBody.propTypes = { data: React.PropTypes.array }; -module.exports = Baseline( +export default Baseline( TableBody ); diff --git a/ui/src/components/table-data-table/table-content.js b/ui/src/components/table-data-table/table-content.js index 556fbcd7..faa950b6 100644 --- a/ui/src/components/table-data-table/table-content.js +++ b/ui/src/components/table-data-table/table-content.js @@ -1,17 +1,8 @@ -const composers = require('../../shared/composers'); -const React = require('react'); -const Styled = require('styled-components'); - -const TableBody = require('./table-body'); -const TableHeader = require('./table-head'); - -const { - default: styled -} = Styled; - -const { - Baseline -} = composers; +import TableBody from './table-body'; +import TableHeader from './table-head'; +import { Baseline } from '../../shared/composers'; +import styled from 'styled-components'; +import React from 'react'; const StyledTable = styled.table` width: 100%; @@ -22,9 +13,9 @@ const TableContent = ({ data, hasHeader = columns.length >= 1, hasBody = data.length >= 1, - width = '100%' + ...props }) => ( - + {hasHeader ? : null} {hasBody ? : null} @@ -34,10 +25,9 @@ TableContent.propTypes = { columns: React.PropTypes.array, data: React.PropTypes.array, hasBody: React.PropTypes.bool, - hasHeader: React.PropTypes.bool, - width: React.PropTypes.string + hasHeader: React.PropTypes.bool }; -module.exports = Baseline( +export default Baseline( TableContent ); diff --git a/ui/src/components/table-data-table/table-head.js b/ui/src/components/table-data-table/table-head.js index d74cb6d0..6d8a48b7 100644 --- a/ui/src/components/table-data-table/table-head.js +++ b/ui/src/components/table-data-table/table-head.js @@ -1,37 +1,18 @@ -const React = require('react'); -const Styled = require('styled-components'); - -const fns = require('../../shared/functions'); -const constants = require('../../shared/constants'); -const composers = require('../../shared/composers'); - -const { - remcalc -} = fns; - -const { - breakpoints, - colors -} = constants; - -const { - Baseline -} = composers; - -const { - default: styled -} = Styled; +import { remcalc } from '../../shared/functions'; +import { breakpoints, colors } from '../../shared/constants'; +import { Baseline } from '../../shared/composers'; +import styled from 'styled-components'; +import React from 'react'; const StyledTableHeadItem = styled.td` border-bottom: none; padding: ${remcalc(24)}; ${breakpoints.medium` - ${props => `width: ${props.mdWidth}`} - `} + ${props => `width: ${props.mdWidth}`}; + `}; `; - const StyledTableHead = styled.thead` background: #fafafa; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); @@ -39,13 +20,14 @@ const StyledTableHead = styled.thead` ${breakpoints.smallOnly` display: none; - `} + `}; `; -const TableHeader = ({ - columns -}) => { - const fallBackWidth = `${100 / parseInt(columns.length)}%`; +const TableHeader = ({ + columns, + ...props +}) => { + const fallBackWidth = `${100 / Number(columns.length)}%`; const titles = columns.map((column, i) => ( + {titles} @@ -69,6 +51,6 @@ TableHeader.propTypes = { columns: React.PropTypes.array }; -module.exports = Baseline( +export default Baseline( TableHeader ); diff --git a/ui/src/components/table-data-table/table-row.js b/ui/src/components/table-data-table/table-row.js index 6ffac062..04eb799a 100644 --- a/ui/src/components/table-data-table/table-row.js +++ b/ui/src/components/table-data-table/table-row.js @@ -1,26 +1,8 @@ -const React = require('react'); -const Styled = require('styled-components'); - -const fns = require('../../shared/functions'); -const constants = require('../../shared/constants'); -const composers = require('../../shared/composers'); - -const { - remcalc -} = fns; - -const { - default: styled -} = Styled; - -const { - breakpoints, - colors -} = constants; - -const { - Baseline -} = composers; +import { remcalc } from '../../shared/functions'; +import { breakpoints, colors } from '../../shared/constants'; +import { Baseline } from '../../shared/composers'; +import styled from 'styled-components'; +import React from 'react'; const StyledRow = styled.tr` border: solid ${remcalc(1)} ${colors.base.grey}; @@ -57,6 +39,6 @@ Row.propTypes = { dataItem: React.PropTypes.object }; -module.exports = Baseline( +export default Baseline( Row ); diff --git a/ui/src/components/table-simple-table/index.js b/ui/src/components/table-simple-table/index.js index 385255b9..467d3a71 100644 --- a/ui/src/components/table-simple-table/index.js +++ b/ui/src/components/table-simple-table/index.js @@ -1,7 +1,13 @@ -module.exports = { - Table: require('./table'), - TableHead: require('./table-head'), - TableBody: require('./table-body'), - TableRow: require('./table-row'), - TableItem: require('./table-item') +import Table from './table'; +import TableHead from './table-head'; +import TableBody from './table-body'; +import TableRow from './table-row'; +import TableItem from './table-item'; + +export { + Table, + TableHead, + TableBody, + TableRow, + TableItem }; diff --git a/ui/src/components/table-simple-table/story.js b/ui/src/components/table-simple-table/story.js index 9b3b48ff..c84b72a3 100644 --- a/ui/src/components/table-simple-table/story.js +++ b/ui/src/components/table-simple-table/story.js @@ -1,51 +1,43 @@ -const React = require('react'); -const Base = require('../base'); +import { storiesOf } from '@kadira/storybook'; +import React from 'react'; -const { - storiesOf -} = require('@kadira/storybook'); - -const _table = require('./'); - -const { +import { Table, TableHead, TableItem, TableBody, TableRow -} = _table; +} from './'; storiesOf('Table - Simple', module) .add('Default', () => ( - -
    - - Member - Status - Role - {/*Empty last Column*/} - +
    + + Member + Status + Role + {/*Empty last Column*/} + - - - -

    Nicola (You)

    -

    nicola@biztech.com

    -     - Active - Owner - 🗑️ -     - - -

    Nicola (You)

    -

    nicola@biztech.com

    -     - Active - Owner - 🗑️ -     -     -
    - + + + +

    Nicola (You)

    +

    nicola@biztech.com

    +     + Active + Owner + 🗑️ +     + + +

    Nicola (You)

    +

    nicola@biztech.com

    +     + Active + Owner + 🗑️ +     +     + )); diff --git a/ui/src/components/table-simple-table/table-body.js b/ui/src/components/table-simple-table/table-body.js index 1b104c52..a707c8a9 100644 --- a/ui/src/components/table-simple-table/table-body.js +++ b/ui/src/components/table-simple-table/table-body.js @@ -1,43 +1,25 @@ -const composers = require('../../shared/composers'); - -const React = require('react'); -const Styled = require('styled-components'); - -const { - default: styled -} = Styled; - -const { - clearfix, - Baseline -} = composers; +import { clearfix, Baseline } from '../../shared/composers'; +import styled from 'styled-components'; +import React from 'react'; const StyledTableBody = styled.article` box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); - ${clearfix} `; const TableBody = ({ - children -}) => { - const itemCount = children.length; - - if (itemCount <= 1) { - return null; - } - - return ( - - {children} - - ); -}; + children, + ...props +}) => children.length <= 1 ? null : ( + + {children} + +); TableBody.propTypes = { children: React.PropTypes.node }; -module.exports = Baseline( +export default Baseline( StyledTableBody -); \ No newline at end of file +); diff --git a/ui/src/components/table-simple-table/table-head.js b/ui/src/components/table-simple-table/table-head.js index 95000822..ea85f9ff 100644 --- a/ui/src/components/table-simple-table/table-head.js +++ b/ui/src/components/table-simple-table/table-head.js @@ -1,22 +1,7 @@ -const fns = require('../../shared/functions'); -const composers = require('../../shared/composers'); - -const React = require('react'); -const Styled = require('styled-components'); - -const { - remcalc -} = fns; - -const { - default: styled, - css -} = Styled; - -const { - clearfix, - Baseline -} = composers; +import { remcalc } from '../../shared/functions'; +import { clearfix, Baseline } from '../../shared/composers'; +import styled, { css } from 'styled-components'; +import React from 'react'; const StyledTableHead = styled.header` background: #fafafa; @@ -38,25 +23,18 @@ const StyledTableHead = styled.header` `; const TableHead = ({ - children -}) => { - const itemCount = children.length; - - if (itemCount <= 1) { - return null; - } - - return ( - - {children} - - ); -}; + children, + ...props +}) => children.length <= 1 ? null : ( + + {children} + +); TableHead.propTypes = { children: React.PropTypes.node }; -module.exports = Baseline( +export default Baseline( TableHead -); \ No newline at end of file +); diff --git a/ui/src/components/table-simple-table/table-item.js b/ui/src/components/table-simple-table/table-item.js index db73c86a..c131db7b 100644 --- a/ui/src/components/table-simple-table/table-item.js +++ b/ui/src/components/table-simple-table/table-item.js @@ -1,15 +1,6 @@ -const React = require('react'); -const Styled = require('styled-components'); - -const composers = require('../../shared/composers'); - -const { - default: styled -} = Styled; - -const { - Baseline -} = composers; +import styled from 'styled-components'; +import { Baseline } from '../../shared/composers'; +import React from 'react'; const Item = styled.div` display: inline-block; @@ -17,9 +8,10 @@ const Item = styled.div` `; const TableItem = ({ - children + children, + ...props }) => ( - + {children} ); @@ -28,6 +20,6 @@ TableItem.propTypes = { children: React.PropTypes.node }; -module.exports = Baseline( +export default Baseline( TableItem ); diff --git a/ui/src/components/table-simple-table/table-row.js b/ui/src/components/table-simple-table/table-row.js index dd8f1436..890e7481 100644 --- a/ui/src/components/table-simple-table/table-row.js +++ b/ui/src/components/table-simple-table/table-row.js @@ -1,27 +1,8 @@ -const React = require('react'); -const Styled = require('styled-components'); - -const fns = require('../../shared/functions'); -const composers = require('../../shared/composers'); -const constants = require('../../shared/constants'); - -const { - default: styled, - css -} = Styled; - -const { - clearfix, - Baseline -} = composers; - -const { - remcalc -} = fns; - -const { - colors -} = constants; +import { remcalc } from '../../shared/functions'; +import { clearfix, Baseline } from '../../shared/composers'; +import { colors } from '../../shared/constants'; +import styled, { css } from 'styled-components'; +import React from 'react'; const StyledTableRow = styled.div` ${clearfix} @@ -42,9 +23,10 @@ const StyledTableRow = styled.div` `; const TableRow = ({ - children + children, + ...props }) => ( - + {children} ); @@ -53,6 +35,6 @@ TableRow.propTypes = { children: React.PropTypes.node }; -module.exports = Baseline( +export default Baseline( TableRow ); diff --git a/ui/src/components/table-simple-table/table.js b/ui/src/components/table-simple-table/table.js index e3c02423..32323523 100644 --- a/ui/src/components/table-simple-table/table.js +++ b/ui/src/components/table-simple-table/table.js @@ -1,20 +1,7 @@ -const React = require('react'); -const Styled = require('styled-components'); - -const constants = require('../../shared/constants'); -const composers = require('../../shared/composers'); - -const { - default: styled -} = Styled; - -const { - colors -} = constants; - -const { - Baseline -} = composers; +import { colors } from '../../shared/constants'; +import { Baseline } from '../../shared/composers'; +import styled from 'styled-components'; +import React from 'react'; const StyledTableWrapper = styled.section` border: solid 1px ${colors.base.grey} @@ -24,22 +11,17 @@ const StyledTableWrapper = styled.section` const Table = ({ children, - className, - style, - title + ...props }) => ( - + {children} ); Table.propTypes = { - children: React.PropTypes.node, - className: React.PropTypes.string, - style: React.PropTypes.object, - title: React.PropTypes.string + children: React.PropTypes.node }; -module.exports = Baseline( +export default Baseline( Table ); diff --git a/ui/src/components/tabs/index.js b/ui/src/components/tabs/index.js deleted file mode 100644 index 1a9b06ac..00000000 --- a/ui/src/components/tabs/index.js +++ /dev/null @@ -1,64 +0,0 @@ -const React = require('react'); -const fns = require('../../shared/functions'); -const composers = require('../../shared/composers'); -const Styled = require('styled-components'); - -const { - rndId -} = fns; - -const { - default: styled -} = Styled; - -const { - Baseline -} = composers; - -const StyledTabs = styled.div` - font-size: 0; - - &::after { - clear: both; - content: ""; - display: table; - } -`; - -const Tabs = ({ - className, - children, // array of - id = rndId(), - name = '', - style -}) => { - const _children = React.Children.map(children, (child, i) => { - return React.cloneElement(child, { - defaultChecked: i === 0, - name - }); - }); - - return ( - - {_children} - - ); -}; - -Tabs.propTypes = { - children: React.PropTypes.node, - className: React.PropTypes.string, - id: React.PropTypes.string, - name: React.PropTypes.string.isRequired, - style: React.PropTypes.object -}; - -module.exports = Baseline( - Tabs -); diff --git a/ui/src/components/tabs/readme.md b/ui/src/components/tabs/readme.md deleted file mode 100644 index 95dd79ef..00000000 --- a/ui/src/components/tabs/readme.md +++ /dev/null @@ -1,51 +0,0 @@ -# `` - -## demo - -```embed -const React = require('react'); -const ReactDOM = require('react-dom/server'); -const Base = require('../base'); -const Row = require('../row'); -const Column = require('../column'); -const Tabs = require('./index'); -const Tab = require('./tab'); -const styles = require('./style.css'); - -nmodule.exports = ReactDOM.renderToString( - - - - - -

    Containers

    -     - -

    User

    -     -     -     -     - -); -``` - - -```js - - - Your Dashboard - - - Make Us Proud - - - - Your Dashboard - - - -

    Make Us Proud

    -     -     -``` \ No newline at end of file diff --git a/ui/src/components/tabs/story.js b/ui/src/components/tabs/story.js deleted file mode 100644 index 939a55e6..00000000 --- a/ui/src/components/tabs/story.js +++ /dev/null @@ -1,23 +0,0 @@ -const React = require('react'); - -const { - storiesOf -} = require('@kadira/storybook'); - -const Tabs = require('./'); -const Tab = require('./tab'); -const Base = require('../base'); - -storiesOf('Tabs', module) - .add('Default', () => ( - - - -

    Containers

    -     - -

    User

    -     -     - - )); \ No newline at end of file diff --git a/ui/src/components/tabs/tab/index.js b/ui/src/components/tabs/tab/index.js deleted file mode 100644 index 50fb1a19..00000000 --- a/ui/src/components/tabs/tab/index.js +++ /dev/null @@ -1,143 +0,0 @@ -const composers = require('../../../shared/composers'); -const constants = require('../../../shared/constants'); -const fns = require('../../../shared/functions'); -const paramCase = require('param-case'); -const React = require('react'); -const Styled = require('styled-components'); - -const { - moveZ, - Baseline -} = composers; - -const { - boxes, - colors -} = constants; - -const { - remcalc, - rndId -} = fns; - -const { - default: styled -} = Styled; - -const classNames = { - label: rndId(), - panel: rndId() -}; - -const StyledTab = styled.div` - display: inline; -`; - -const StyledRadio = styled.input` - clip: rect(0 0 0 0); - height: ${remcalc(1)}; - opacity: 0; - width: ${remcalc(1)}; - - ${moveZ({ - position: 'fixed', - amount: -1 - })} - - &:checked { - & + .${classNames.label} { - background: ${colors.inactive.default}; - border-bottom-width: 0; - - ${moveZ({ - amount: 1 - })} - } - - & ~ .${classNames.panel} { - display: inline; - } - } -`; - -const StyledLabel = styled.label` - background: transparent; - border: ${remcalc(1)} solid ${colors.base.grey}; - display: inline-block; - font-size: ${remcalc(20)}; - padding: ${remcalc('12 25')}; - margin-right: 0.5rem; - vertical-align: bottom; -`; - -const StyledPanel = styled.div` - display: inline-block; - height: 0; - overflow: hidden; - position: relative; - width: 0; -`; - -const StyledContent = styled.div` - background: ${colors.inactive.default}; - border: ${boxes.border.unchecked}; - box-sizing: border-box; - box-shadow: 0 ${remcalc(-1)} ${remcalc(26)} 0 rgba(0, 0, 0, 0.2); - display: block; - float: left; - font-size: ${remcalc(16)}; - margin-top: ${remcalc(-9)}; - padding: ${remcalc('20 25')}; - width: 100%; -`; - -const Tab = ({ - className, - children, - checked, - defaultChecked = false, - disabled = false, - id, - name, - title = '', - style -}) => { - const tabId = paramCase(title); - - return ( - - - - {title} - - - - {children} - - - - ); -}; - -Tab.propTypes = { - checked: React.PropTypes.bool, - children: React.PropTypes.node, - className: React.PropTypes.string, - defaultChecked: React.PropTypes.bool, - disabled: React.PropTypes.bool, - id: React.PropTypes.string, - name: React.PropTypes.string, - style: React.PropTypes.object, - title: React.PropTypes.string -}; - -module.exports = Baseline( - Tab -); diff --git a/ui/src/components/tabs/tab/readme.md b/ui/src/components/tabs/tab/readme.md deleted file mode 100644 index bb2fab52..00000000 --- a/ui/src/components/tabs/tab/readme.md +++ /dev/null @@ -1,32 +0,0 @@ -# `` - -## demo - -```embed -const React = require('react'); -const ReactDOM = require('react-dom/server'); -const Base = require('../../base'); -const Container = require('../../container'); -const Row = require('../../row'); -const Column = require('../../column'); -const Tabs = require('../'); -const Tab = require('./index'); -const styles = require('./style.css'); - -nmodule.exports = ReactDOM.renderToString( - - - - - -

    Containers

    -     - -

    User

    -     -     -     -     - -); -``` diff --git a/ui/src/components/textarea/index.js b/ui/src/components/textarea/index.js deleted file mode 100644 index f3485e36..00000000 --- a/ui/src/components/textarea/index.js +++ /dev/null @@ -1,149 +0,0 @@ -const React = require('react'); - -const composers = require('../../shared/composers'); -const constants = require('../../shared/constants'); -const fns = require('../../shared/functions'); -const Styled = require('styled-components'); - -const { - boxes, - colors -} = constants; - -const { - remcalc -} = fns; - -const { - baseBox, - Baseline -} = composers; - -const { - default: styled -} = Styled; - -const Label = styled.label` - color: ${props => props.error ? colors.base.red : colors.fonts.regular} -`; - -const InputField = styled.textarea` - background: ${colors.secondary}; - color: ${props => props.error ? colors.base.red : colors.fonts.semibold} - display: block; - font-size: ${remcalc(16)}; - padding: ${remcalc('15 18')}; - visibility: visible; - width: 100%; - min-height: ${remcalc(96)}; - ${baseBox()}; - border-color: ${props => props.error ? colors.base.red : ''}; - - &:focus { - border-color: ${boxes.border.checked}; - outline: none; - } -`; - -const Error = styled.span` - float: right; - color: ${colors.alert}; - font-size: ${remcalc(14)}; -`; - -const Textarea = ({ - autoComplete, - autoFocus, - children, - className, - disabled = false, - error, - form, - id, - inputMode, - label, - labelledby, - list, - name, - onChange, - pattern, - placeholder, - readOnly, - required, - selectionDirection, - spellCheck, - style, - tabIndex, - type, - value -}) => { - const _label = label || children; - const _children = label && children ? children : null; - const _error = error ? ({error}) : null; - - return ( -
    - - {_error} - - {_children} -
    - ); -}; - -Textarea.propTypes = { - autoComplete: React.PropTypes.string, - autoFocus: React.PropTypes.bool, - children: React.PropTypes.node, - className: React.PropTypes.string, - disabled: React.PropTypes.bool, - error: React.PropTypes.string, - form: React.PropTypes.string, - id: React.PropTypes.string, - inputMode: React.PropTypes.string, - label: React.PropTypes.string, - labelledby: React.PropTypes.string, - list: React.PropTypes.string, - name: React.PropTypes.string, - onChange: React.PropTypes.func, - pattern: React.PropTypes.string, - placeholder: React.PropTypes.string, - readOnly: React.PropTypes.bool, - required: React.PropTypes.bool, - selectionDirection: React.PropTypes.string, - spellCheck: React.PropTypes.bool, - style: React.PropTypes.object, - tabIndex: React.PropTypes.string, - type: React.PropTypes.string, - value: React.PropTypes.string -}; - -module.exports = Baseline( - Textarea -); diff --git a/ui/src/components/toggle/index.js b/ui/src/components/toggle/index.js index b37e2993..a3d21ec7 100644 --- a/ui/src/components/toggle/index.js +++ b/ui/src/components/toggle/index.js @@ -1,27 +1,8 @@ -const constants = require('../../shared/constants'); -const composers = require('../../shared/composers'); -const fns = require('../../shared/functions'); -const React = require('react'); -const Styled = require('styled-components'); - -const { - colors -} = constants; - -const { - baseBox, - Baseline -} = composers; - -const { - remcalc, - rndId -} = fns; - -const { - default: styled, - css -} = Styled; +import { remcalc, rndId } from '../../shared/functions'; +import { colors } from '../../shared/constants'; +import { baseBox, Baseline } from '../../shared/composers'; +import styled, { css } from 'styled-components'; +import React from 'react'; const StyledText = styled.span` padding: 1rem; @@ -92,64 +73,59 @@ const StyledLabel = styled.label` `; const Toggle = ({ - checked, - className, - defaultChecked, - options = [ - { - label: 'On', - checked: true - }, - { - label: 'Off', - checked: false - } - ], - id = rndId(), - style + options = [{ + label: 'On', + checked: true + }, { + label: 'Off', + checked: false + }], + ...props }) => { + const _options = options.map( (option, index) => { + if (index >= 2) { + return null; + } + + const customProps = { + defaultChecked: option.checked, + name: 'toggler', + type: 'radio', + value: option.label, + id: rndId() + }; + + const InputVarients = { + input_0: ( + + ), + input_1: ( + + ) + }; + + return ( + + {InputVarients[`input_${index}`]} + {option.label} + + ); + }); + return ( - - {options.map( (option, index) => { - - if ( index >= 2 ) return; - - const customProps = { - defaultChecked: option.checked, - name: 'toggler', - type: 'radio', - value: option.label, - id: rndId() - }; - - const InputVarients = { - input_0: (), - input_1: () - }; - - return ( - - {InputVarients[`input_${index}`]} - {option.label} - - ); - })} + + {_options} ); }; Toggle.propTypes = { - checked: React.PropTypes.bool, - className: React.PropTypes.string, - defaultChecked: React.PropTypes.bool, - id: React.PropTypes.string, - options: React.PropTypes.array, - style: React.PropTypes.object + options: React.PropTypes.array }; -module.exports = Baseline( +export default Baseline( Toggle ); diff --git a/ui/src/components/toggle/story.js b/ui/src/components/toggle/story.js index da5059bb..6c685ab0 100644 --- a/ui/src/components/toggle/story.js +++ b/ui/src/components/toggle/story.js @@ -1,37 +1,23 @@ -const React = require('react'); - -const { - storiesOf -} = require('@kadira/storybook'); - -const Base = require('../base'); -const Toggle = require('./'); +import React from 'react'; +import { storiesOf } from '@kadira/storybook'; +import Toggle from './'; storiesOf('Toggle', module) .add('default', () => ( - - - + )) .add('checked', () => ( - - - + )) .add('no props', () => ( - - - - )); \ No newline at end of file + + )); diff --git a/ui/src/components/tooltip/index.js b/ui/src/components/tooltip/index.js index b41e7634..ba49fbe5 100644 --- a/ui/src/components/tooltip/index.js +++ b/ui/src/components/tooltip/index.js @@ -1,34 +1,13 @@ -// TODO: use a checkbox - -const React = require('react'); -const composers = require('../../shared/composers'); -const constants = require('../../shared/constants'); -const fns = require('../../shared/functions'); -const Styled = require('styled-components'); - -const { - baseBox, - pseudoEl, - Baseline -} = composers; - -const { - remcalc -} = fns; - -const { - default: styled -} = Styled; - -const { - colors -} = constants; +import { remcalc } from '../../shared/functions'; +import { baseBox, pseudoEl, Baseline } from '../../shared/composers'; +import { colors } from '../../shared/constants'; +import styled from 'styled-components'; +import React from 'react'; const ItemPadder = 9; const WrapperPadder = 24; const ulPadder = `${WrapperPadder - ItemPadder} 0`; - const StyledList = styled.ul` position: relative; background: #fff; @@ -77,29 +56,22 @@ const StyledList = styled.ul` const Tooltip = ({ children, - className, - style, arrowPosition = { bottom: '100%', left: '10%' - } + }, + ...props }) => ( - + {children} ); Tooltip.propTypes = { arrowPosition: React.PropTypes.object, - children: React.PropTypes.node, - className: React.PropTypes.string, - style: React.PropTypes.object + children: React.PropTypes.node }; -module.exports = Baseline( +export default Baseline( Tooltip ); diff --git a/ui/src/components/tooltip/story.js b/ui/src/components/tooltip/story.js index 260d6120..fa12a084 100644 --- a/ui/src/components/tooltip/story.js +++ b/ui/src/components/tooltip/story.js @@ -1,10 +1,6 @@ -const React = require('react'); - -const { - storiesOf -} = require('@kadira/storybook'); - -const Tooltip = require('./'); +import { storiesOf } from '@kadira/storybook'; +import React from 'react'; +import Tooltip from './'; storiesOf('Tooltip', module) .add('default', () => ( @@ -26,4 +22,4 @@ storiesOf('Tooltip', module)
  • Three
    • ); - }); \ No newline at end of file + }); diff --git a/ui/src/components/topology-old/index.js b/ui/src/components/topology-old/index.js index ef9cd212..36143b56 100644 --- a/ui/src/components/topology-old/index.js +++ b/ui/src/components/topology-old/index.js @@ -1,25 +1,9 @@ -const composers = require('../../shared/composers'); -const constants = require('../../shared/constants'); -const d3 = require('d3'); -const fns = require('../../shared/functions'); -const React = require('react'); -const Styled = require('styled-components'); - -const { - colors -} = constants; - -const { - Baseline -} = composers; - -const { - remcalc -} = fns; - -const { - default: styled -} = Styled; +import styled from 'styled-components'; +import { remcalc } from '../../shared/functions'; +import { Baseline } from '../../shared/composers'; +import { colors } from '../../shared/constants'; +import React from 'react'; +import d3 from 'd3'; /* eslint-disable */ function rightRoundedRect(x, y, width, height, radius) { @@ -426,6 +410,6 @@ TopologyGraph.propTypes = { width: React.PropTypes.number }; -module.exports = Baseline( +export default Baseline( TopologyGraph ); diff --git a/ui/src/components/topology-old/story.js b/ui/src/components/topology-old/story.js index c475a379..bdc3a5af 100644 --- a/ui/src/components/topology-old/story.js +++ b/ui/src/components/topology-old/story.js @@ -1,154 +1,117 @@ -const React = require('react'); +import { storiesOf } from '@kadira/storybook'; +import Topology from './'; +import TopologyView from './view'; +import React from 'react'; -const { - storiesOf -} = require('@kadira/storybook'); - -const Base = require('../base'); -const Topology = require('./'); -const TopologyView = require('./view'); const services = { - nodes: [ - { - id: 'Nginx', - attrs: { - dcs: 1, - instances: 2, - healthy: true - }, - metrics: [ - { - name: 'CPU', - stat: '50%' - }, - { - name: 'Memory', - stat: '20%' - }, - { - name: 'Network', - stat: '5.9KB/sec' - } - ] + nodes: [{ + id: 'Nginx', + attrs: { + dcs: 1, + instances: 2, + healthy: true }, - { - id: 'WordPress', - attrs: { - dcs: 1, - instances: 2, - healthy: true - }, - metrics: [ - { - name: 'CPU', - stat: '50%' - }, - { - name: 'Memory', - stat: '20%' - }, - { - name: 'Network', - stat: '5.9KB/sec' - } - ] + metrics: [{ + name: 'CPU', + stat: '50%' + }, { + name: 'Memory', + stat: '20%' + }, { + name: 'Network', + stat: '5.9KB/sec' + }] + }, { + id: 'WordPress', + attrs: { + dcs: 1, + instances: 2, + healthy: true }, - { - id: 'Memcached', - attrs: { - dcs: 1, - instances: 2, - healthy: true - }, - metrics: [ - { - name: 'CPU', - stat: '50%' - }, - { - name: 'Memory', - stat: '20%' - }, - { - name: 'Network', - stat: '5.9KB/sec' - } - ] + metrics: [{ + name: 'CPU', + stat: '50%' + }, { + name: 'Memory', + stat: '20%' + }, { + name: 'Network', + stat: '5.9KB/sec' + }] + }, { + id: 'Memcached', + attrs: { + dcs: 1, + instances: 2, + healthy: true }, - { - id: 'Percona', - attrs: { - dcs: 1, - instances: 2, - healthy: true - }, - metrics: [ - { - name: 'CPU', - stat: '50%' - }, - { - name: 'Memory', - stat: '20%' - }, - { - name: 'Network', - stat: '5.9KB/sec' - } - ] + metrics: [{ + name: 'CPU', + stat: '50%' + }, { + name: 'Memory', + stat: '20%' + }, { + name: 'Network', + stat: '5.9KB/sec' + }] + }, { + id: 'Percona', + attrs: { + dcs: 1, + instances: 2, + healthy: true }, - { - id: 'NFS', - attrs: { - dcs: 1, - instances: 2, - healthy: true - }, - metrics: [ - { - name: 'CPU', - stat: '50%' - }, - { - name: 'Memory', - stat: '20%' - }, - { - name: 'Network', - stat: '5.9KB/sec' - } - ] - } - ], - links: [ - { - source: 'Nginx', - target: 'WordPress' + metrics: [{ + name: 'CPU', + stat: '50%' + }, { + name: 'Memory', + stat: '20%' + }, { + name: 'Network', + stat: '5.9KB/sec' + }] + }, { + id: 'NFS', + attrs: { + dcs: 1, + instances: 2, + healthy: true }, - { - source: 'WordPress', - target: 'Memcached' - }, - { - source: 'WordPress', - target: 'NFS' - }, - { - source: 'WordPress', - target: 'Percona' - } - ] + metrics: [{ + name: 'CPU', + stat: '50%' + }, { + name: 'Memory', + stat: '20%' + }, { + name: 'Network', + stat: '5.9KB/sec' + }] + }], + links: [{ + source: 'Nginx', + target: 'WordPress' + }, { + source: 'WordPress', + target: 'Memcached' + }, { + source: 'WordPress', + target: 'NFS' + }, { + source: 'WordPress', + target: 'Percona' + }] }; storiesOf('Topology', module) .add('5 services', () => ( - - - - - + + + )); diff --git a/ui/src/components/topology-old/view.js b/ui/src/components/topology-old/view.js index 1bce6f28..5dfbfdc1 100644 --- a/ui/src/components/topology-old/view.js +++ b/ui/src/components/topology-old/view.js @@ -1,33 +1,20 @@ -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 { - colors -} = constants; - -const { - Baseline -} = composers; - -const { - remcalc -} = fns; - -const { - default: styled -} = Styled; +import { remcalc } from '../../shared/functions'; +import { Baseline } from '../../shared/composers'; +import { colors } from '../../shared/constants'; +import styled from 'styled-components'; +import React from 'react'; const TopologyView = styled.div` border: ${remcalc(1)} solid ${colors.borderSecondary}; background-color: ${colors.brandSecondary}; `; -const Topology = (props) => ( +const Topology = ({ + children, + ...props +}) => ( - {props.children} + {children} ); @@ -35,6 +22,6 @@ Topology.propTypes = { children: React.PropTypes.node }; -module.exports = Baseline( +export default Baseline( Topology ); diff --git a/ui/src/components/topology/data.js b/ui/src/components/topology/data.js index 2ce7671c..32bb39da 100644 --- a/ui/src/components/topology/data.js +++ b/ui/src/components/topology/data.js @@ -1,283 +1,118 @@ -/*eslint-disable */ - -module.exports = [ - { - "uuid":"081a792c-47e0-4439-924b-2efa9788ae9e", - "id":"nginx", - "name":"Nginx", - "project":"e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances":1, - "metrics":[ - { - "name":"CPU", - "value":"50%" - }, - { - "name":"Memory", - "value":"20%" - }, - { - "name":"Network", - "value":"2.9Kb/sec" - } - ], - "connections":[ - "be227788-74f1-4e5b-a85f-b5c71cbae8d8" - ], - "healthy":true, - "datacentres":1 - }, - { - "uuid":"be227788-74f1-4e5b-a85f-b5c71cbae8d8", - "id":"wordpress", - "name":"Wordpress", - "project":"e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances":2, - "metrics":[ - { - "name":"CPU", - "value":"50%" - }, - { - "name":"Memory", - "value":"20%" - }, - { - "name":"Network", - "value":"2.9Kb/sec" - } - ], - "connections":[ - "6a0eee76-c019-413b-9d5f-44712b55b993", - "6d31aff4-de1e-4042-a983-fbd23d5c530c", - "4ee4103e-1a52-4099-a48e-01588f597c70" - ], - "healthy":true, - "datacentres":2 - }, - { - "uuid":"6a0eee76-c019-413b-9d5f-44712b55b993", - "id":"nfs", - "name":"NFS", - "project":"e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances":2, - "metrics":[ - { - "name":"CPU", - "value":"50%" - }, - { - "name":"Memory", - "value":"20%" - }, - { - "name":"Network", - "value":"2.9Kb/sec" - } - ], - "healthy":true, - "datacentres":2 - }, - { - "uuid":"6d31aff4-de1e-4042-a983-fbd23d5c530c", - "id":"memcached", - "name":"Memcached", - "project":"e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances":2, - "metrics":[ - { - "name":"CPU", - "value":"50%" - }, - { - "name":"Memory", - "value":"20%" - }, - { - "name":"Network", - "value":"2.9Kb/sec" - } - ], - "healthy":true, - "datacentres":2 - }, - { - "uuid":"4ee4103e-1a52-4099-a48e-01588f597c70", - "id":"percona", - "name":"Percona", - "project":"e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances":2, - "metrics":[ - { - "name":"CPU", - "value":"50%" - }, - { - "name":"Memory", - "value":"20%" - }, - { - "name":"Network", - "value":"2.9Kb/sec" - } - ], - "healthy":true, - "datacentres":1 - }, - { - "uuid":"97c68055-db88-45c9-ad49-f26da4264777", - "id":"consul", - "name":"Consul", - "project":"e0ea0c02-55cc-45fe-8064-3e5176a59401", - "instances":2, - "metrics":[ - { - "name":"CPU", - "value":"50%" - }, - { - "name":"Memory", - "value":"20%" - }, - { - "name":"Network", - "value":"2.9Kb/sec" - } - ], - "healthy":true, - "datacentres":2 - } -]; - -/*module.exports = { - nodes: [ - { - id: 'Nginx', - attrs: { - dcs: 1, - instances: 2, - healthy: true, - }, - metrics: [ - { - name: 'CPU', - stat: '50%', - }, - { - name: 'Memory', - stat: '20%', - }, - { - name: 'Network', - stat: '5.9KB/sec', - }, - ] - }, - { - id: 'WordPress', - attrs: { - dcs: 1, - instances: 2, - healthy: true, - }, - metrics: [ - { - name: 'CPU', - stat: '50%', - }, - { - name: 'Memory', - stat: '20%', - }, - { - name: 'Network', - stat: '5.9KB/sec', - }, - ] - }, - { - id: 'Memcached', - attrs: { - dcs: 1, - instances: 2, - healthy: true, - }, - metrics: [ - { - name: 'CPU', - stat: '50%', - }, - { - name: 'Memory', - stat: '20%', - }, - { - name: 'Network', - stat: '5.9KB/sec', - }, - ] - }, - { - id: 'Percona', - attrs: { - dcs: 1, - instances: 2, - healthy: true, - }, - metrics: [ - { - name: 'CPU', - stat: '50%', - }, - { - name: 'Memory', - stat: '20%', - }, - { - name: 'Network', - stat: '5.9KB/sec', - }, - ] - }, - { - id: 'NFS', - attrs: { - dcs: 1, - instances: 2, - healthy: true, - }, - metrics: [ - { - name: 'CPU', - stat: '50%', - }, - { - name: 'Memory', - stat: '20%', - }, - { - name: 'Network', - stat: '5.9KB/sec', - }, - ] - } +/* eslint-disable */ +module.exports = [{ + "uuid": "081a792c-47e0-4439-924b-2efa9788ae9e", + "id": "nginx", + "name": "Nginx", + "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", + "instances": 1, + "metrics": [{ + "name": "CPU", + "value": "50%" + }, { + "name": "Memory", + "value": "20%" + }, { + "name": "Network", + "value": "2.9Kb/sec" + }], + "connections": [ + "be227788-74f1-4e5b-a85f-b5c71cbae8d8" ], - links: [ - { - source: 'Nginx', - target: 'WordPress', - }, - { - source: 'WordPress', - target: 'Memcached', - }, - { - source: 'WordPress', - target: 'NFS', - }, - { - source: 'WordPress', - target: 'Percona', - } - ] -};*/ + "healthy": true, + "datacentres": 1 +}, { + "uuid": "be227788-74f1-4e5b-a85f-b5c71cbae8d8", + "id": "wordpress", + "name": "Wordpress", + "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", + "instances": 2, + "metrics": [{ + "name": "CPU", + "value": "50%" + }, { + "name": "Memory", + "value": "20%" + }, { + "name": "Network", + "value": "2.9Kb/sec" + }], + "connections": [ + "6a0eee76-c019-413b-9d5f-44712b55b993", + "6d31aff4-de1e-4042-a983-fbd23d5c530c", + "4ee4103e-1a52-4099-a48e-01588f597c70" + ], + "healthy": true, + "datacentres": 2 +}, { + "uuid": "6a0eee76-c019-413b-9d5f-44712b55b993", + "id": "nfs", + "name": "NFS", + "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", + "instances": 2, + "metrics": [{ + "name": "CPU", + "value": "50%" + }, { + "name": "Memory", + "value": "20%" + }, { + "name": "Network", + "value": "2.9Kb/sec" + }], + "healthy": true, + "datacentres": 2 +}, { + "uuid": "6d31aff4-de1e-4042-a983-fbd23d5c530c", + "id": "memcached", + "name": "Memcached", + "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", + "instances": 2, + "metrics": [{ + "name": "CPU", + "value": "50%" + }, { + "name": "Memory", + "value": "20%" + }, { + "name": "Network", + "value": "2.9Kb/sec" + }], + "healthy": true, + "datacentres": 2 +}, { + "uuid": "4ee4103e-1a52-4099-a48e-01588f597c70", + "id": "percona", + "name": "Percona", + "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", + "instances": 2, + "metrics": [{ + "name": "CPU", + "value": "50%" + }, { + "name": "Memory", + "value": "20%" + }, { + "name": "Network", + "value": "2.9Kb/sec" + }], + "healthy": true, + "datacentres": 1 +}, { + "uuid": "97c68055-db88-45c9-ad49-f26da4264777", + "id": "consul", + "name": "Consul", + "project": "e0ea0c02-55cc-45fe-8064-3e5176a59401", + "instances": 2, + "metrics": [{ + "name": "CPU", + "value": "50%" + }, { + "name": "Memory", + "value": "20%" + }, { + "name": "Network", + "value": "2.9Kb/sec" + }], + "healthy": true, + "datacentres": 2 +}]; diff --git a/ui/src/components/topology/graph-link.js b/ui/src/components/topology/graph-link.js index f772d491..0b365836 100644 --- a/ui/src/components/topology/graph-link.js +++ b/ui/src/components/topology/graph-link.js @@ -1,15 +1,7 @@ -const React = require('react'); -const Styled = require('styled-components'); -const composers = require('../../shared/composers'); -const PropTypes = require('./prop-types'); - -const { - default: styled -} = Styled; - -const { - Baseline -} = composers; +import styled from 'styled-components'; +import { Baseline } from '../../shared/composers'; +import PropTypes from './prop-types'; +import React from 'react'; const StyledLine = styled.line` stroke: #343434; @@ -156,6 +148,6 @@ GraphLink.propTypes = { nodeSize: PropTypes.Size }; -module.exports = Baseline( +export default Baseline( GraphLink ); diff --git a/ui/src/components/topology/graph-node-button.js b/ui/src/components/topology/graph-node-button.js index 9720ae2d..56d6d1c3 100644 --- a/ui/src/components/topology/graph-node-button.js +++ b/ui/src/components/topology/graph-node-button.js @@ -1,14 +1,6 @@ -const React = require('react'); -const composers = require('../../shared/composers'); -const Styled = require('styled-components'); - -const { - default: styled -} = Styled; - -const { - Baseline -} = composers; +import React from 'react'; +import { Baseline } from '../../shared/composers'; +import styled from 'styled-components'; const StyledButton = styled.rect` opacity: 0; @@ -62,6 +54,6 @@ GraphNodeButton.propTypes = { onButtonClick: React.PropTypes.func.isRequired }; -module.exports = Baseline( +export default Baseline( GraphNodeButton ); diff --git a/ui/src/components/topology/graph-node-info.js b/ui/src/components/topology/graph-node-info.js index 8c81283a..2f3d45dc 100644 --- a/ui/src/components/topology/graph-node-info.js +++ b/ui/src/components/topology/graph-node-info.js @@ -1,23 +1,8 @@ -const React = require('react'); -const composers = require('../../shared/composers'); -const Styled = require('styled-components'); - -const DataCentresIcon = require( - // eslint-disable-next-line max-len - '!babel-loader!svg-react-loader!./icon-data-centers.svg?name=DataCentresIcon' -); - -const InstancesIcon = require( - '!babel-loader!svg-react-loader!./icon-instances.svg?name=InstancesIcon' -); - -const { - default: styled -} = Styled; - -const { - Baseline -} = composers; +import React from 'react'; +import { Baseline } from '../../shared/composers'; +import DataCentresIcon from './icon-data-centers.svg'; +import InstancesIcon from './icon-instances.svg'; +import styled from 'styled-components'; const StyledText = styled.text` fill: ${props => props.connected ? '#ffffff' : '#464646'}; @@ -78,6 +63,6 @@ GraphNodeInfo.propTypes = { instances: React.PropTypes.number }; -module.exports = Baseline( +export default Baseline( GraphNodeInfo ); diff --git a/ui/src/components/topology/graph-node-metrics.js b/ui/src/components/topology/graph-node-metrics.js index a53e08f2..6f89ae5e 100644 --- a/ui/src/components/topology/graph-node-metrics.js +++ b/ui/src/components/topology/graph-node-metrics.js @@ -1,14 +1,6 @@ -const React = require('react'); -const composers = require('../../shared/composers'); -const Styled = require('styled-components'); - -const { - default: styled -} = Styled; - -const { - Baseline -} = composers; +import React from 'react'; +import { Baseline } from '../../shared/composers'; +import styled from 'styled-components'; const StyledText = styled.text` fill: ${props => props.connected ? '#ffffff' : '#464646'}; @@ -53,6 +45,6 @@ GraphNodeMetrics.propTypes = { }) }; -module.exports = Baseline( +export default Baseline( GraphNodeMetrics ); diff --git a/ui/src/components/topology/graph-node.js b/ui/src/components/topology/graph-node.js index 4151e17b..b89cca95 100644 --- a/ui/src/components/topology/graph-node.js +++ b/ui/src/components/topology/graph-node.js @@ -1,22 +1,11 @@ -const React = require('react'); -const composers = require('../../shared/composers'); -const Styled = require('styled-components'); -const PropTypes = require('./prop-types'); -const GraphNodeButton = require('./graph-node-button'); -const GraphNodeInfo = require('./graph-node-info'); -const GraphNodeMetrics = require('./graph-node-metrics'); - -const HeartIcon = require( - '!babel-loader!svg-react-loader!./icon-heart.svg?name=HeartIcon' -); - -const { - default: styled -} = Styled; - -const { - Baseline -} = composers; +import { Baseline } from '../../shared/composers'; +import PropTypes from './prop-types'; +import HeartIcon from './icon-heart.svg'; +import GraphNodeButton from './graph-node-button'; +import GraphNodeInfo from './graph-node-info'; +import GraphNodeMetrics from './graph-node-metrics'; +import styled from 'styled-components'; +import React from 'react'; const StyledRect = styled.rect` stroke: ${props => props.connected ? '#343434' : '#d8d8d8'}; @@ -186,6 +175,6 @@ GraphNode.propTypes = { size: PropTypes.Size }; -module.exports = Baseline( +export default Baseline( GraphNode ); diff --git a/ui/src/components/topology/graph-simulation.js b/ui/src/components/topology/graph-simulation.js index c1bdba86..36c4efe9 100644 --- a/ui/src/components/topology/graph-simulation.js +++ b/ui/src/components/topology/graph-simulation.js @@ -1,4 +1,4 @@ -const d3 = require('d3'); +import { forceSimulation, forceLink, forceCollide, forceCenter } from 'd3'; const hypotenuse = (a, b) => Math.sqrt(a*a + b*b); @@ -48,10 +48,10 @@ const createSimulation = ( const nodeRadius = rectRadius(nodeSize); return ({ - simulation: d3.forceSimulation(nodes) - .force('link', d3.forceLink(links).id(d => d.id)) - .force('collide', d3.forceCollide(nodeRadius)) - .force('center', d3.forceCenter(width/2, height/2)) + simulation: forceSimulation(nodes) + .force('link', forceLink(links).id(d => d.id)) + .force('collide', forceCollide(nodeRadius)) + .force('center', forceCenter(width/2, height/2)) .on('tick', onTick) .on('end', onEnd), nodes: nodes, @@ -96,10 +96,10 @@ const updateSimulation = ( const nodeRadius = rectRadius(nodeSize); return ({ - simulation: d3.forceSimulation(nodes) - .force('link', d3.forceLink(links).id(d => d.id)) - .force('collide', d3.forceCollide(nodeRadius)) - .force('center', d3.forceCenter(width/2, height/2)) + simulation: forceSimulation(nodes) + .force('link', forceLink(links).id(d => d.id)) + .force('collide', forceCollide(nodeRadius)) + .force('center', forceCenter(width/2, height/2)) .on('tick', onTick) .on('end', onEnd), nodes: nodes, @@ -107,20 +107,20 @@ const updateSimulation = ( }); }; -module.exports = { +export { createSimulation, updateSimulation }; /* -const simulation = d3.forceSimulation(dataNodes) +const simulation = forceSimulation(dataNodes) // .alpha(1).alphaDecay(0.1) - // .force('charge', d3.forceManyBody()) - .force('link', d3.forceLink(dataLinks) + // .force('charge', forceManyBody()) + .force('link', forceLink(dataLinks) //.distance(() => linkDistance) .id(d => d.id)) - .force('collide', d3.forceCollide(nodeRadius)) - .force('center', d3.forceCenter(1024/2, 860/2)) + .force('collide', forceCollide(nodeRadius)) + .force('center', forceCenter(1024/2, 860/2)) .on('tick', () => { console.log('SIMULATION TICK'); console.log('tickCounter = ', tickCounter); diff --git a/ui/src/components/topology/index.js b/ui/src/components/topology/index.js index af78de04..cbd63aa3 100644 --- a/ui/src/components/topology/index.js +++ b/ui/src/components/topology/index.js @@ -1,7 +1,13 @@ -module.exports = { - TopologyGraph: require('./topology-graph'), - TopologyGraphNode: require('./graph-node'), - TopologyGraphLink: require('./graph-link'), - TopologyGraphNodeButton: require('./graph-node-button'), - TopologyGraphNodeMetrics: require('./graph-node-metrics') +import TopologyGraph from './topology-graph'; +import TopologyGraphNode from './graph-node'; +import TopologyGraphLink from './graph-link'; +import TopologyGraphNodeButton from './graph-node-button'; +import TopologyGraphNodeMetrics from './graph-node-metrics'; + +export { + TopologyGraph, + TopologyGraphNode, + TopologyGraphLink, + TopologyGraphNodeButton, + TopologyGraphNodeMetrics }; diff --git a/ui/src/components/topology/prop-types.js b/ui/src/components/topology/prop-types.js index ce854981..a1f1109a 100644 --- a/ui/src/components/topology/prop-types.js +++ b/ui/src/components/topology/prop-types.js @@ -1,4 +1,4 @@ -const React = require('react'); +import React from 'react'; const p = { x: React.PropTypes.number.isRequired, @@ -23,7 +23,7 @@ const Rect = React.PropTypes.shape({ ...s }); -module.exports = { +export default { Point, Rect, Size diff --git a/ui/src/components/topology/story-helper.js b/ui/src/components/topology/story-helper.js index 4d180464..b6e4f0b9 100644 --- a/ui/src/components/topology/story-helper.js +++ b/ui/src/components/topology/story-helper.js @@ -1,27 +1,11 @@ -const React = require('react'); -const Styled = require('styled-components'); -const composers = require('../../shared/composers'); -const fns = require('../../shared/functions'); -const Input = require('../form/input'); -const Select = require('../form/select'); -const Topology = require('./'); -const data = require('./data'); - -const { - default: styled -} = Styled; - -const { - rndId -} = fns; - -const { - Baseline -} = composers; - -const { - TopologyGraph -} = Topology; +import styled from 'styled-components'; +import { rndId } from '../../shared/functions'; +import { Baseline } from '../../shared/composers'; +import Input from '../form/input'; +import Select from '../form/select'; +import { TopologyGraph } from './'; +import data from './data'; +import React from 'react'; const StyledForm = styled.form` display: flex; @@ -115,6 +99,6 @@ class StoryHelper extends React.Component { } } -module.exports = Baseline( +export default Baseline( StoryHelper ); diff --git a/ui/src/components/topology/story.js b/ui/src/components/topology/story.js index bd2d8ba0..f790472c 100644 --- a/ui/src/components/topology/story.js +++ b/ui/src/components/topology/story.js @@ -1,10 +1,7 @@ -const React = require('react'); -const StoryHelper = require('./story-helper'); -const GraphNode = require('./graph-node'); - -const { - storiesOf -} = require('@kadira/storybook'); +import GraphNode from './graph-node'; +import StoryHelper from './story-helper'; +import { storiesOf } from '@kadira/storybook'; +import React from 'react'; storiesOf('Topology', module) .add('5 services', () => ( diff --git a/ui/src/components/topology/topology-graph.js b/ui/src/components/topology/topology-graph.js index 61f5d50d..a3307a57 100644 --- a/ui/src/components/topology/topology-graph.js +++ b/ui/src/components/topology/topology-graph.js @@ -1,22 +1,9 @@ -const React = require('react'); -const Styled = require('styled-components'); -const composers = require('../../shared/composers'); -const GraphSimulation = require('./graph-simulation'); -const GraphNode = require('./graph-node'); -const GraphLink = require('./graph-link'); - -const { - default: styled -} = Styled; - -const { - createSimulation, - updateSimulation -} = GraphSimulation; - -const { - Baseline -} = composers; +import styled from 'styled-components'; +import { Baseline } from '../../shared/composers'; +import { createSimulation, updateSimulation } from './graph-simulation'; +import GraphNode from './graph-node'; +import GraphLink from './graph-link'; +import React from 'react'; const StyledSvg = styled.svg` width: 1024px; @@ -258,6 +245,6 @@ TopologyGraph.propTypes = { services: React.PropTypes.array }; -module.exports = Baseline( +export default Baseline( TopologyGraph ); diff --git a/ui/src/components/widget/index.js b/ui/src/components/widget/index.js index 602eca82..2ea7d23a 100644 --- a/ui/src/components/widget/index.js +++ b/ui/src/components/widget/index.js @@ -1,25 +1,8 @@ -const React = require('react'); -const composers = require('../../shared/composers'); -const constants = require('../../shared/constants'); -const fns = require('../../shared/functions'); -const Styled = require('styled-components'); - -const { - boxes -} = constants; - -const { - Baseline -} = composers; - -const { - rndId, - remcalc -} = fns; - -const { - default: styled -} = Styled; +import { rndId, remcalc } from '../../shared/functions'; +import { Baseline } from '../../shared/composers'; +import { boxes } from '../../shared/constants'; +import styled from 'styled-components'; +import React from 'react'; const classNames = { content: rndId() @@ -91,7 +74,7 @@ const Widget = ({ Widget.propTypes = { checked: React.PropTypes.bool, - children: React.PropTypes.object, + children: React.PropTypes.node, className: React.PropTypes.string, disabled: React.PropTypes.bool, id: React.PropTypes.string, @@ -101,6 +84,6 @@ Widget.propTypes = { value: React.PropTypes.string }; -module.exports = Baseline( +export default Baseline( Widget ); diff --git a/ui/src/components/widget/story.js b/ui/src/components/widget/story.js index a2fbe982..8a751d36 100644 --- a/ui/src/components/widget/story.js +++ b/ui/src/components/widget/story.js @@ -1,10 +1,6 @@ -const React = require('react'); - -const { - storiesOf -} = require('@kadira/storybook'); - -const Widget = require('./'); +import { storiesOf } from '@kadira/storybook'; +import React from 'react'; +import Widget from './'; storiesOf('Widget', module) .add('single', () => ( @@ -21,4 +17,4 @@ storiesOf('Widget', module) />

    Some text

    - )); \ No newline at end of file + )); diff --git a/ui/src/index.js b/ui/src/index.js index 80da8dc9..e80c107f 100644 --- a/ui/src/index.js +++ b/ui/src/index.js @@ -1,31 +1,198 @@ -module.exports = { - Base: require('./components/base'), - AddMetric: require('./components/add-metric'), - Anchor: require('./components/anchor'), - Avatar: require('./components/avatar'), - Button: require('./components/button'), - Checkbox: require('./components/form/checkbox'), - Column: require('./components/column'), - Container: require('./components/container'), - Close: require('./components/close'), - Form: require('./components/form'), - Input: require('./components/form/input'), - List: require('./components/list'), - Modal: require('./components/modal'), - MiniMetric: require('./components/mini-metric'), - NavLink: require('./components/nav-link'), - Notificaton: require('./components/notification'), - Pagination: require('./components/pagination'), - Radio: require('./components/form/radio').RadioList, - RangeSlider: require('./components/range-slider'), - Row: require('./components/row'), - Select: require('./components/form/select'), - SelectCustom: require('./components/select-custom'), - Tab: require('./components/tabs/tab'), - Tabs: require('./components/tabs'), - Toggle: require('./components/toggle'), - Topology: require('./components/topology'), - Tooltip: require('./components/tooltip'), - Widget: require('./components/widget'), - BaseElements: require('./components/base-elements') +import { + AddMetricButton, + AddMetricDescription, + AddMetricLink, + AddMetricTile, + AddMetricTitle +} from './components/add-metric'; + +import Anchor, { fn as AnchorFn } from './components/anchor'; +import Avatar from './components/avatar'; +import Base from './components/base'; +import GlobalBase from './components/base/global'; +import { H1, H2, H3, P, Small } from './components/base-elements'; +import BaselineGrid from './components/baseline-grid'; +import Button from './components/button'; +import Close from './components/close'; +import Column from './components/column'; +import Container from './components/container'; + +import { + Checkbox, + Fieldset, + FormGroup, + Input, + FormLabel, + Legend, + FormMeta, + Radio, + RadioList, + Select +} from './components/form'; + +import { + Ul as HorizontalUl, + Li as HorizontalLi +} from './components/horizontal-list'; + +import Label from './components/label'; + +import { + ListItemDescription, + ListItemHeader, + ListItemGroupView, + ListItem, + ListItemMeta, + ListItemOptions, + ListItemOutlet, + ListItemSubTitle, + ListItemTitle, + ListItemView +} from './components/list'; + +import { + MetricGraph, + MetricCloseButton, + MetricHeader, + MetricSelect, + MetricSettingsButton, + MetricTitle, + MetricView +} from './components/metric'; + +import { + MiniMetricGraph, + MiniMetricMeta, + MiniMetricTitle, + MiniMetricSubtitle, + MiniMetricView +} from './components/mini-metric'; + +import Modal from './components/modal'; +import NavLink from './components/nav-link'; +import Notificaton from './components/notification'; +import Pagination from './components/pagination'; + +import { + PaymentCard, + PaymentCardDetail, + PaymentCardDetails, + PaymentCardView +} from './components/payment-card'; + +import RangeSlider from './components/range-slider'; +import Row from './components/row'; +import SelectCustom from './components/select-custom'; +import TableDataTable from './components/table-data-table'; +import TableDataBody from './components/table-data-table/table-body'; +import TableDataContent from './components/table-data-table/table-content'; +import TableDataHead from './components/table-data-table/table-head'; +import TableDataRow from './components/table-data-table/table-row'; + +import { + Table as TableSimple, + TableHead as TableSimpleHead, + TableBody as TableSimpleBody, + TableRow as TableSimpleRow, + TableItem as TableSimpleItem +} from './components/table-simple-table'; + +import Toggle from './components/toggle'; +import Tooltip from './components/tooltip'; + +import { + TopologyGraph, + TopologyGraphNode, + TopologyGraphLink, + TopologyGraphNodeButton, + TopologyGraphNodeMetrics +} from './components/topology'; + +import Widget from './components/widget'; + +export { + AddMetricButton, + AddMetricDescription, + AddMetricLink, + AddMetricTile, + AddMetricTitle, + Anchor, + AnchorFn, + Avatar, + Base, + GlobalBase, + H1, + H2, + H3, + P, + Small, + BaselineGrid, + Button, + Close, + Column, + Container, + Checkbox, + Fieldset, + FormGroup, + Input, + FormLabel, + Legend, + FormMeta, + Radio, + RadioList, + Select, + HorizontalUl, + HorizontalLi, + Label, + ListItemDescription, + ListItemHeader, + ListItemGroupView, + ListItem, + ListItemMeta, + ListItemOptions, + ListItemOutlet, + ListItemSubTitle, + ListItemTitle, + ListItemView, + MetricGraph, + MetricCloseButton, + MetricHeader, + MetricSelect, + MetricSettingsButton, + MetricTitle, + MetricView, + MiniMetricGraph, + MiniMetricMeta, + MiniMetricTitle, + MiniMetricSubtitle, + MiniMetricView, + Modal, + NavLink, + Notificaton, + Pagination, + PaymentCard, + PaymentCardDetail, + PaymentCardDetails, + PaymentCardView, + RangeSlider, + Row, + SelectCustom, + TableDataTable, + TableDataBody, + TableDataContent, + TableDataHead, + TableDataRow, + TableSimple, + TableSimpleHead, + TableSimpleBody, + TableSimpleRow, + TableSimpleItem, + Toggle, + Tooltip, + TopologyGraph, + TopologyGraphNode, + TopologyGraphLink, + TopologyGraphNodeButton, + TopologyGraphNodeMetrics, + Widget }; diff --git a/ui/src/shared/composers/index.js b/ui/src/shared/composers/index.js index 19ff83b1..bd6a1c4d 100644 --- a/ui/src/shared/composers/index.js +++ b/ui/src/shared/composers/index.js @@ -1,21 +1,7 @@ -const Styled = require('styled-components'); -const camelCase = require('camel-case'); - -const constants = require('../constants'); -const fns = require('../functions'); - -const { - boxes -} = constants; - -const { - unitcalc -} = fns; - -const { - default: styled, - css -} = Styled; +import styled, { css } from 'styled-components'; +import camelCase from 'camel-case'; +import { boxes } from '../constants'; +import { unitcalc } from '../functions'; const sides = [ 'top', @@ -53,57 +39,61 @@ const unitsFromProps = (props) => unitProps `) .join(';\n'); -module.exports = { - Baseline: (Component) => styled(Component)` - ${unitsFromProps} - `, - verticallyAlignCenter: css` - /* Need to place position:relative on parent */ - left: 50%; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - `, - clear: css` - display: block; - content: ""; - clear: both; - `, - moveZ: ({ - amount = 0, - position = 'relative' - }) => css` - position: ${position}; - z-index: ${amount}; - `, - baseBox: ({ - radius = boxes.borderRadius, - border = boxes.border.unchecked, - shadow = boxes.bottomShaddow - } = {}) => css` - border: ${border}; - border-radius: ${radius}; - box-shadow: ${shadow}; - `, - pseudoEl: ( - positions = {} - ) => css` - content: ""; - position: absolute; - top: ${positions.top || 'auto'}; - right: ${positions.right || 'auto'}; - bottom: ${positions.bottom || 'auto'}; - left: ${positions.left || 'auto'}; - `, - clearfix: css` - &:before, - &:after { - content:""; - display:table; - } +export const Baseline = (Component) => styled(Component)` + ${unitsFromProps} +`; - &:after { - clear:both; - } - ` -}; +export const verticallyAlignCenter = css` + /* Need to place position:relative on parent */ + left: 50%; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); +`; + +export const clear = css` + display: block; + content: ""; + clear: both; +`; + +export const moveZ = ({ + amount = 0, + position = 'relative' +}) => css` + position: ${position}; + z-index: ${amount}; +`; + +export const baseBox = ({ + radius = boxes.borderRadius, + border = boxes.border.unchecked, + shadow = boxes.bottomShaddow +} = {}) => css` + border: ${border}; + border-radius: ${radius}; + box-shadow: ${shadow}; +`; + +export const pseudoEl = ( + positions = {} +) => css` + content: ""; + position: absolute; + top: ${positions.top || 'auto'}; + right: ${positions.right || 'auto'}; + bottom: ${positions.bottom || 'auto'}; + left: ${positions.left || 'auto'}; +`; + +export const clearfix = css` + &:before, + &:after { + content:""; + display:table; + } + + &:after { + clear:both; + } +`; diff --git a/ui/src/shared/composers/typography.js b/ui/src/shared/composers/typography.js index 47f910ae..e5033381 100644 --- a/ui/src/shared/composers/typography.js +++ b/ui/src/shared/composers/typography.js @@ -1,34 +1,30 @@ -const Styled = require('styled-components'); -const constants = require('../../shared/constants'); +import { css } from 'styled-components'; +import { colors } from '../../shared/constants'; -const { - colors -} = constants; +export const libreFranklin = ` + font-family: 'LibreFranklin', Helvetica, sans-serif; +`; -const { - css -} = Styled; +export const libreFranklinSemiBold = ` + font-family: 'LibreFranklin-Semi-Bold', Helvetica, sans-serif; +`; -module.exports = { - libreFranklin: ` - font-family: 'LibreFranklin', Helvetica, sans-serif; - `, - libreFranklinSemiBold: ` - font-family: 'LibreFranklin-Semi-Bold', Helvetica, sans-serif; - `, - libreFranklinBold: ` - font-family: 'LibreFranklin-Bold', Helvetica, sans-serif; - `, - bold: css` - font-weight: 600; - `, - regular: css` - font-weight: normal; - `, - titleColor: css` - color: ${colors.base.secondary}; - `, - bodyColor: css` - color: ${colors.base.text}; - ` -}; +export const libreFranklinBold = ` + font-family: 'LibreFranklin-Bold', Helvetica, sans-serif; +`; + +export const bold = css` + font-weight: 600; +`; + +export const regular = css` + font-weight: normal; +`; + +export const titleColor = css` + color: ${colors.base.secondary}; +`; + +export const bodyColor = css` + color: ${colors.base.text}; +`; diff --git a/ui/src/shared/constants/boxes.js b/ui/src/shared/constants/boxes.js index 03457772..d4f80bc7 100644 --- a/ui/src/shared/constants/boxes.js +++ b/ui/src/shared/constants/boxes.js @@ -1,23 +1,14 @@ -const colors = require('./colors'); -const fns = require('../functions'); +import { base } from './colors'; +import { remcalc } from '../functions'; -const { - remcalc -} = fns; +export const borderRadius = remcalc(4); +export const bottomShaddow = `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)`; +export const bottomShaddowDarker = `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.1)`; +export const insetShaddow = `inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)`; -const { - base -} = colors; - -module.exports = { - borderRadius: remcalc(4), - bottomShaddow: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)`, - bottomShaddowDarker: `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.1)`, - insetShaddow: `inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)`, - border: { - checked: `${remcalc(1)} solid ${base.primary}`, - unchecked: `${remcalc(1)} solid ${base.grey}`, - confirmed: `${remcalc(1)} solid ${base.grey}`, - error: `${remcalc(1)} solid ${base.red}` - } +export const border = { + checked: `${remcalc(1)} solid ${base.primary}`, + unchecked: `${remcalc(1)} solid ${base.grey}`, + confirmed: `${remcalc(1)} solid ${base.grey}`, + error: `${remcalc(1)} solid ${base.red}` }; diff --git a/ui/src/shared/constants/breakpoints.js b/ui/src/shared/constants/breakpoints.js index b0000ed4..c73f6b1b 100644 --- a/ui/src/shared/constants/breakpoints.js +++ b/ui/src/shared/constants/breakpoints.js @@ -1,59 +1,57 @@ -const styled = require('styled-components'); - -const { - css -} = styled; - // github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css -const small = { - upper: '48rem' -}; -const medium = { - upper: '64rem', - lower: '48.1rem' -}; +import { css } from 'styled-components'; +import { remcalc } from '../functions'; -const large = { - upper: '75rem', - lower: '64.1rem' +const bounds = { + small: { + upper: remcalc(768) + }, + medium: { + upper: remcalc(1024), + lower: remcalc(769) + }, + large: { + upper: remcalc(1200), + lower: remcalc(1025) + }, + xlarge: { + lower: remcalc(1201) + } }; -const xlarge = { - lower: '75.1rem' -}; - -const screen = 'only screen'; - const screens = { // >= 768px - 'smallOnly': `${screen} and (max-width: ${small.upper})`, - 'small': `${screen} and (min-width: ${small.upper}})`, + smallOnly: `only screen and (max-width: ${bounds.small.upper})`, + small: `only screen and (min-width: ${bounds.small.upper}})`, // >= 1024px - 'mediumOnly': `${screen} and (min-width: ${medium.lower}) - and (max-width: ${medium.upper})`, - 'mediumDown': `${screen} and (max-width: ${medium.upper})`, - 'medium': `${screen} and (min-width: ${medium.lower})`, + mediumOnly: `only screen and (min-width: ${bounds.medium.lower}) + and (max-width: ${bounds.medium.upper})`, + mediumDown: `only screen and (max-width: ${bounds.medium.upper})`, + medium: `only screen and (min-width: ${bounds.medium.lower})`, // >= 1200px - 'largeOnly': `${screen} and (min-width: ${large.lower}) - and (max-width: ${large.upper})`, - 'largeDown': `${screen} and (max-width: ${large.upper})`, - 'large': `${screen} and (min-width: 75rem)`, - - 'xlarge': `${screen} and (min-width: ${xlarge.lower}) - and (max-width: ${xlarge.upper})`, - 'xlargeUp': `${screen} and (min-width: ${xlarge.lower})` + largeOnly: `only screen and (min-width: ${bounds.large.lower}) + and (max-width: ${bounds.large.upper})`, + largeDown: `only screen and (max-width: ${bounds.large.upper})`, + large: `only screen and (min-width: ${bounds.large.upper})`, + xlarge: `only screen and (min-width: ${bounds.xlarge.lower}) + and (max-width: ${bounds.xlarge.upper})`, + xlargeUp: `only screen and (min-width: ${bounds.xlarge.lower})` }; -const breakpoints = Object.keys(screens).reduce((acc, label) => { - return { - ...acc, - [label]: (...args) => css` - @media ${screens[label]} { - ${css(...args)} - } - ` - }; -}, {}); +const breakpoint = (label) => (...args) => css` + @media ${screens[label]} { + ${css(...args)} + } +`; -module.exports = breakpoints; +export const smallOnly = breakpoint('smallOnly'); +export const small = breakpoint('small'); +export const mediumOnly = breakpoint('mediumOnly'); +export const mediumDown = breakpoint('mediumDown'); +export const medium = breakpoint('medium'); +export const largeOnly = breakpoint('largeOnly'); +export const largeDown = breakpoint('largeDown'); +export const large = breakpoint('large'); +export const xlarge = breakpoint('xlarge'); +export const xlargeUp = breakpoint('xlargeUp'); diff --git a/ui/src/shared/constants/colors.js b/ui/src/shared/constants/colors.js index 6d0a07f0..3b374c61 100644 --- a/ui/src/shared/constants/colors.js +++ b/ui/src/shared/constants/colors.js @@ -40,7 +40,9 @@ const white = { whiteActive: '#E9E9E9' }; -const base = { +/************************************ BASE ************************************/ + +export const base = { ...primary, ...secondary, ...white, @@ -56,45 +58,39 @@ const base = { redDark: '#CD251B' }; -const fonts = { +/************************************ FONTS ***********************************/ + +export const fonts = { semibold: base.secondary, regular: base.text }; -const inactive = { +/********************************** INACTIVE **********************************/ + +export const inactive = { default: base.disabled, border: base.grey, text: base.grey }; -const notifications = { +/******************************* NOTIFICATIONS ********************************/ + +export const notifications = { alert: base.red, confirmation: base.green, warning: base.orange }; -const forms = { - inputError: base.red, - inputWarning: base.orange -}; +/*********************************** FORMS ************************************/ -const metrics = { - miniBackground: '#F3F4F9', - seperator: '#D9DEF3' -}; +export const inputError = base.red; +export const inputWarning = base.orange; -const topology = { - topologyBackground: base.secondaryActive -}; +/********************************** METRICS **********************************/ -const colors = { - ...metrics, - ...topology, - ...forms, - inactive, - notifications, - base, - fonts -}; +export const miniBackground = '#F3F4F9'; +export const seperator = '#D9DEF3'; -module.exports = colors; +/********************************** TOPOLOGY **********************************/ + +export const topologyBackground = base.secondaryActive; diff --git a/ui/src/shared/constants/index.js b/ui/src/shared/constants/index.js index 2368e31d..6da2bf72 100644 --- a/ui/src/shared/constants/index.js +++ b/ui/src/shared/constants/index.js @@ -1,11 +1,10 @@ -const traverse = require('traverse'); -const isFunction = require('lodash.isfunction'); - -const colors = require('./colors'); -const boxes = require('./boxes'); -const typography = require('./typography'); -const sizes = require('./sizes'); -const breakpoints = require('./breakpoints'); +import traverse from 'traverse'; +import isFunction from 'lodash.isfunction'; +import * as colors from './colors'; +import * as boxes from './boxes'; +import * as typography from './typography'; +import * as sizes from './sizes'; +import * as breakpoints from './breakpoints'; const tables = { bg: 'transparent', @@ -27,7 +26,19 @@ const constants = traverse({ return isFunction(x) ? x(this.parent.node) : x; }); -module.exports = { - ...constants, - breakpoints +const expBoxes = constants.boxes; +const expColors = constants.colors; +const expForms = constants.forms; +const expSizes = constants.sizes; +const expTables = constants.tables; +const expTypography = constants.typography; + +export { + breakpoints, + expBoxes as boxes, + expColors as colors, + expForms as forms, + expSizes as sizes, + expTables as tables, + expTypography as typography }; diff --git a/ui/src/shared/constants/sizes.js b/ui/src/shared/constants/sizes.js index e7d7aa74..e9737f52 100644 --- a/ui/src/shared/constants/sizes.js +++ b/ui/src/shared/constants/sizes.js @@ -1,62 +1,49 @@ -const calc = require('reduce-css-calc'); +import calc from 'reduce-css-calc'; // github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css -const sizes = { - gridColumns: 12, - gutterWidth: '1rem', - outerMargin: '2rem', - gutterCompensation: ({ - gutterWidth - }) => { - return calc(`calc((${gutterWidth} * 0.5) * -1)`); - }, - halfGutterWidth: ({ - gutterWidth - }) => { - return calc(`calc(${gutterWidth} * 0.5)`); - }, - xsMin: 30, - smMin: 48, - mdMin: 64, - lgMin: 75, - screenXsMin: ({ - xsMin - }) => { - return `${xsMin}em`; - }, - screenSmMin: ({ - smMin - }) => { - return `${smMin}em`; - }, - screenMdMin: ({ - mdMin - }) => { - return `${mdMin}em`; - }, - screenLgMin: ({ - lgMin - }) => { - return `${lgMin}em`; - }, - containerSm: ({ - gutterWidth, - smMin - }) => { - return calc(`calc(${smMin} + ${gutterWidth})`); - }, - containerMd: ({ - gutterWidth, - mdMin - }) => { - return calc(`calc(${mdMin} + ${gutterWidth})`); - }, - containerLg: ({ - gutterWidth, - lgMin - }) => { - return calc(`calc(${lgMin} + ${gutterWidth})`); - } -}; +export const gridColumns = 12; +export const gutterWidth = '1rem'; +export const outerMargin = '2rem'; +export const xsMin = 30; +export const smMin = 48; +export const mdMin = 64; +export const lgMin = 75; -module.exports = sizes; +export const gutterCompensation = ({ + gutterWidth +}) => calc(`calc((${gutterWidth} * 0.5) * -1)`); + +export const halfGutterWidth = ({ + gutterWidth +}) => calc(`calc(${gutterWidth} * 0.5)`); + +export const screenXsMin = ({ + xsMin +}) => `${xsMin}em`; + +export const screenSmMin = ({ + smMin +}) => `${smMin}em`; + +export const screenMdMin = ({ + mdMin +}) => `${mdMin}em`; + +export const screenLgMin = ({ + lgMin +}) => `${lgMin}em`; + +export const containerSm = ({ + gutterWidth, + smMin +}) => calc(`calc(${smMin} + ${gutterWidth})`); + +export const containerMd = ({ + gutterWidth, + mdMin +}) => calc(`calc(${mdMin} + ${gutterWidth})`); + +export const containerLg = ({ + gutterWidth, + lgMin +}) => calc(`calc(${lgMin} + ${gutterWidth})`); diff --git a/ui/src/shared/constants/typography.js b/ui/src/shared/constants/typography.js index 5fc403d5..24b78683 100644 --- a/ui/src/shared/constants/typography.js +++ b/ui/src/shared/constants/typography.js @@ -1,12 +1,4 @@ -const colors = require('./colors'); +import { base } from './colors'; -const { - base -} = colors; - -const typography = { - abbrBorderColor: base.secondary, - textMuted: base.secondary -}; - -module.exports = typography; +export const abbrBorderColor = base.secondary; +export const textMuted = base.secondary; diff --git a/ui/src/shared/fake-data/index.js b/ui/src/shared/fake-data/index.js index 127a155f..4a2cc150 100644 --- a/ui/src/shared/fake-data/index.js +++ b/ui/src/shared/fake-data/index.js @@ -21,7 +21,7 @@ const selectData = [{ // eslint-disable-next-line max-len const profile = 'https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlff_400x400.jpg'; -module.exports = { +export { profile, selectData }; diff --git a/ui/src/shared/functions.js b/ui/src/shared/functions.js index 077d4c89..1f23db4f 100644 --- a/ui/src/shared/functions.js +++ b/ui/src/shared/functions.js @@ -1,7 +1,7 @@ -const calc = require('reduce-css-calc'); -const randomNatural = require('random-natural'); +import { css } from 'styled-components'; +import calc from 'reduce-css-calc'; +import randomNatural from 'random-natural'; -const pathToFont = './fonts/'; const remBase = 16; const unitBase = 6; @@ -26,44 +26,16 @@ const unitcalc = (...values) => values.map( (value) => remcalc(value * unitBase) ); -const generateFonts = (fonts) => fonts.reduce((sum, { - filename, - family, - style, - weight -}) => { - const eot = require(`${pathToFont + filename}.eot`); - const woff = require(`${pathToFont + filename}.woff`); - const woff2 = require(`${pathToFont + filename}.woff2`); - const ttf = require(`${pathToFont + filename}.ttf`); - const svg = require(`${pathToFont + filename}.svg`); +const cssCalc = (str) => calc(`calc(${str})`); - sum += ` - @font-face { - font-family: '${family}'; - src: url('${eot}'), - url('${eot}?#iefix') - format('embedded-opentype'), - url('${woff}') - format('woff'), - url('${woff2}') - format('woff2'), - url('${ttf}') - format('truetype'), - url('${svg}#${family}') - format('svg'); - font-weight: ${weight}; - font-style: ${style}; - } - `; +const is = (prop) => (...args) => (props) => props[prop] + ? css(...args) + : css``; - return sum; -}); - -module.exports = { - unitcalc: unitcalc, - remcalc: remcalc, - calc: (str) => calc(`calc(${str})`), +export { + unitcalc, + remcalc, + cssCalc as calc, rndId, - generateFonts + is }; diff --git a/ui/src/shared/is.js b/ui/src/shared/is.js deleted file mode 100644 index 6de6aff7..00000000 --- a/ui/src/shared/is.js +++ /dev/null @@ -1,9 +0,0 @@ -const Styled = require('styled-components'); - -const { - css -} = Styled; - -module.exports = (prop) => (...args) => (props) => props[prop] - ? css(...args) - : css``; diff --git a/ui/src/shared/match.js b/ui/src/shared/match.js index e68b6e45..0886c807 100644 --- a/ui/src/shared/match.js +++ b/ui/src/shared/match.js @@ -1,5 +1,5 @@ -const find = require('lodash.find'); -const isFunction = require('lodash.isfunction'); +import find from 'lodash.find'; +import isFunction from 'lodash.isfunction'; /** * get values based on the props @@ -27,7 +27,7 @@ const isFunction = require('lodash.isfunction'); * }); //=> 15 * ``` **/ -module.exports = (obj = {}, initial = '') => (props) => { +export default (obj = {}, initial = '') => (props) => { const key = find(Object.keys(obj), (key) => props[key]); if (!key) { @@ -59,7 +59,7 @@ module.exports = (obj = {}, initial = '') => (props) => { * }); //=> 15 * ``` **/ -module.exports.prop = (obj = {}, initial = '') => (prop) => (props = {}) => { +export const prop = (obj = {}, initial = '') => (prop) => (props = {}) => { const value = props[prop]; if (!value) { diff --git a/ui/src/shared/redux-form-proxy.js b/ui/src/shared/redux-form-proxy.js index 469e6b55..9b9c6a60 100644 --- a/ui/src/shared/redux-form-proxy.js +++ b/ui/src/shared/redux-form-proxy.js @@ -1,29 +1,20 @@ -const React = require('react'); -const transformPropsWith = require('transform-props-with'); +import React from 'react'; +import tx from 'transform-props-with'; -const { - default: tx -} = transformPropsWith; - -const Proxy = tx(props => { - - const { - input, - meta, - ...rest - } = props; - - return { - ...input, - ...meta, - ...rest - }; -}); +const Proxy = tx(({ + input, + meta, + ...rest +}) => ({ + ...input, + ...meta, + ...rest +})); const isReduxForm = (props) => props.hasOwnProperty('input') || props.hasOwnProperty('meta'); -module.exports = (Component) => { +export default (Component) => { const ProxiedComponent = Proxy(Component); return (props) => { diff --git a/ui/src/shared/transfer-props.js b/ui/src/shared/transfer-props.js index 275dc6e3..72ef6452 100644 --- a/ui/src/shared/transfer-props.js +++ b/ui/src/shared/transfer-props.js @@ -1,5 +1,5 @@ -const isString = require('lodash.isstring'); -const React = require('react'); +import isString from 'lodash.isstring'; +import React from 'react'; const transfer = (parentProps, props) => { // eslint-disable-next-line react/prop-types @@ -14,7 +14,7 @@ const transfer = (parentProps, props) => { }); }; -module.exports = (parentProps, Component) => (props) => { +export default (parentProps, Component) => (props) => { // eslint-disable-next-line react/prop-types const _children = !isString(props.children) ? transfer(parentProps, props) diff --git a/ui/stories/index.js b/ui/stories/index.js deleted file mode 100644 index fb7bfabd..00000000 --- a/ui/stories/index.js +++ /dev/null @@ -1,109 +0,0 @@ -const React = require('react'); -const { - storiesOf -} = require('@kadira/storybook'); - -const { - Base, - Column, - Container, - MiniMetric: { - MiniMetricGraph, - MiniMetricMeta, - MiniMetricTitle, - MiniMetricSubtitle, - MiniMetricView - }, - Row -} = require('../src/'); - -const MiniMetricData = require('../src/components/list/mini-metric-data'); - -const styles = { - base: { - backgroundColor: '#FFEBEE' - }, - row: { - backgroundColor: '#EF5350' - }, - column: { - backgroundColor: '#B71C1C', - textAlign: 'center', - color: 'white' - } -}; - -storiesOf('Grid', module) - .add('Row and Column', () => ( - - - - - - 1 - 2 - 3 - - - - - - )); - -storiesOf('Metrics', module) - .add('Mini Metric', () => ( - - - - - - Memory: 54% - (1280/3000 MB) - - - - - - - - Memory: 54% - (1280/3000 MB) - - - - - - - - Memory: 54% - (1280/3000 MB) - - - - - - - )); diff --git a/ui/test/index.js b/ui/test/index.js index 6dd37aa2..e120248d 100644 --- a/ui/test/index.js +++ b/ui/test/index.js @@ -7,43 +7,43 @@ const { } = enzyme; test('renders without exploding', (t) => { - const Avatar = require('../src/components/avatar'); + const Avatar = require('../src/components/avatar').default; const wrapper = shallow(); t.deepEqual(wrapper.length, 1); }); test('renders without exploding', (t) => { - const Base = require('../src/components/base'); + const Base = require('../src/components/base').default; const wrapper = shallow(); t.deepEqual(wrapper.length, 1); }); test('renders