From 3ab029248f20f4f1a0a9129945476d43171a5bd6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Wed, 15 Feb 2017 01:19:26 +0000 Subject: [PATCH] baseline composer --- ui/package.json | 1 + ui/src/components/add-metric/button.js | 49 ++++--- ui/src/components/add-metric/description.js | 9 +- ui/src/components/add-metric/link.js | 9 +- ui/src/components/add-metric/tile.js | 21 +-- ui/src/components/add-metric/title.js | 9 +- ui/src/components/anchor/index.js | 21 ++- ui/src/components/avatar/index.js | 18 ++- ui/src/components/base-elements/index.js | 122 +++++++++--------- ui/src/components/baseline-grid/index.js | 17 ++- ui/src/components/baseline-grid/readme.md | 37 ------ ui/src/components/baseline-grid/story.js | 25 ++++ ui/src/components/baseline-grid/style.css | 3 - ui/src/components/button/index.js | 9 +- ui/src/components/checkbox/index.js | 49 +++---- ui/src/components/close/index.js | 35 ++--- ui/src/components/column/index.js | 13 +- ui/src/components/container/index.js | 11 +- ui/src/components/form/label-row.js | 9 +- ui/src/components/form/label.js | 11 +- ui/src/components/form/msg.js | 11 +- ui/src/components/form/outlet.js | 4 +- ui/src/components/form/view.js | 11 +- ui/src/components/horizontal-list/li.js | 15 ++- ui/src/components/horizontal-list/ul.js | 11 +- ui/src/components/input/index.js | 10 +- ui/src/components/list/description.js | 9 +- ui/src/components/list/group-view.js | 11 +- ui/src/components/list/header.js | 11 +- ui/src/components/list/item.js | 24 ++-- ui/src/components/list/meta.js | 12 +- ui/src/components/list/options.js | 9 +- ui/src/components/list/outlet.js | 9 +- ui/src/components/list/subtitle.js | 9 +- ui/src/components/list/title.js | 9 +- ui/src/components/list/view.js | 15 ++- ui/src/components/metric/close-button.js | 19 ++- ui/src/components/metric/graph.js | 15 ++- ui/src/components/metric/header.js | 9 +- ui/src/components/metric/select.js | 43 +++--- ui/src/components/metric/settings-button.js | 18 ++- ui/src/components/metric/title.js | 11 +- ui/src/components/metric/view.js | 10 +- ui/src/components/mini-metric/graph.js | 9 +- ui/src/components/mini-metric/meta.js | 9 +- ui/src/components/mini-metric/subtitle.js | 11 +- ui/src/components/mini-metric/title.js | 11 +- ui/src/components/mini-metric/view.js | 9 +- ui/src/components/modal/index.js | 44 +++---- ui/src/components/notification/index.js | 20 +-- ui/src/components/pagination/index.js | 8 +- ui/src/components/payment-card/detail.js | 9 +- ui/src/components/payment-card/details.js | 11 +- .../components/payment-card/payment-card.js | 29 +++-- ui/src/components/payment-card/view.js | 9 +- ui/src/components/radio-group/index.js | 9 +- ui/src/components/radio-group/item.js | 35 ++--- ui/src/components/radio/index.js | 64 ++++----- ui/src/components/range-slider/index.js | 25 ++-- ui/src/components/row/index.js | 11 +- ui/src/components/select-custom/index.js | 58 +++++---- ui/src/components/select/index.js | 11 +- ui/src/components/table-data-table/index.js | 36 +++--- ui/src/components/table-data-table/story.js | 14 +- .../components/table-data-table/table-body.js | 15 ++- .../table-data-table/table-content.js | 24 ++-- .../components/table-data-table/table-head.js | 28 ++-- .../components/table-data-table/table-row.js | 19 +-- .../table-simple-table/table-body.js | 14 +- .../table-simple-table/table-head.js | 20 +-- .../table-simple-table/table-item.js | 23 ++-- .../table-simple-table/table-row.js | 21 ++- ui/src/components/table-simple-table/table.js | 11 +- ui/src/components/tabs/index.js | 9 +- ui/src/components/tabs/tab/index.js | 7 +- ui/src/components/textarea/index.js | 7 +- ui/src/components/toggle/index.js | 7 +- ui/src/components/tooltip/index.js | 32 +++-- ui/src/components/topology-old/index.js | 10 +- ui/src/components/topology-old/view.js | 9 +- ui/src/components/topology/graph-link.js | 9 +- .../components/topology/graph-node-button.js | 9 +- ui/src/components/topology/graph-node-info.js | 27 ++-- .../components/topology/graph-node-metrics.js | 9 +- ui/src/components/topology/graph-node.js | 17 ++- ui/src/components/topology/story-helper.js | 9 +- ui/src/components/topology/topology-graph.js | 11 +- ui/src/components/widget/index.js | 9 +- ui/src/shared/composers.js | 55 +++++++- ui/src/shared/fake-data/index.js | 47 +++---- ui/src/shared/functions.js | 89 +++++++------ ui/yarn.lock | 11 ++ 92 files changed, 1168 insertions(+), 615 deletions(-) delete mode 100644 ui/src/components/baseline-grid/readme.md create mode 100644 ui/src/components/baseline-grid/story.js delete mode 100644 ui/src/components/baseline-grid/style.css diff --git a/ui/package.json b/ui/package.json index 516c74c9..631258fc 100644 --- a/ui/package.json +++ b/ui/package.json @@ -16,6 +16,7 @@ }, "dependencies": { "build-array": "^1.0.0", + "camel-case": "^3.0.0", "chart.js": "^2.5.0", "chartjs-chart-box-plot": "prerelease", "color": "^1.0.3", diff --git a/ui/src/components/add-metric/button.js b/ui/src/components/add-metric/button.js index 80282ad5..c6b10e1b 100644 --- a/ui/src/components/add-metric/button.js +++ b/ui/src/components/add-metric/button.js @@ -1,5 +1,6 @@ const React = require('react'); const Styled = require('styled-components'); +const composers = require('../../shared/composers'); const fns = require('../../shared/functions'); const Button = require('../button'); @@ -11,10 +12,20 @@ const { remcalc } = fns; +const { + Baseline +} = composers; + +const { + baseline +} = composers; + const StyledButton = styled(Button)` position: absolute; left: ${remcalc(24)}; bottom: ${remcalc(24)}; + + ${baseline}; `; const AddMetricButton = ({ @@ -24,23 +35,23 @@ const AddMetricButton = ({ onClick }) => { const onButtonClick = (e) => onClick(metric); - return disabled ? - ( - - {children} - - ) : ( - - {children} - - ); + + return disabled ? ( + + {children} + + ) : ( + + {children} + + ); }; AddMetricButton.propTypes = { @@ -50,4 +61,6 @@ AddMetricButton.propTypes = { onClick: React.PropTypes.func, }; -module.exports = AddMetricButton; +module.exports = Baseline( + AddMetricButton +); diff --git a/ui/src/components/add-metric/description.js b/ui/src/components/add-metric/description.js index 72aa0d89..214d8db9 100644 --- a/ui/src/components/add-metric/description.js +++ b/ui/src/components/add-metric/description.js @@ -1,11 +1,16 @@ const React = require('react'); const Styled = require('styled-components'); const constants = require('../../shared/constants'); +const composers = require('../../shared/composers'); const { colors } = constants; +const { + Baseline +} = composers; + const { default: styled } = Styled; @@ -25,4 +30,6 @@ Description.propTypes = { children: React.PropTypes.node }; -module.exports = Description; +module.exports = Baseline( + Description +); diff --git a/ui/src/components/add-metric/link.js b/ui/src/components/add-metric/link.js index e9535a9a..f5dfdec7 100644 --- a/ui/src/components/add-metric/link.js +++ b/ui/src/components/add-metric/link.js @@ -1,10 +1,15 @@ const React = require('react'); +const composers = require('../../shared/composers'); const Styled = require('styled-components'); const { default: styled } = Styled; +const { + Baseline +} = composers; + const StyledLink = styled.a` text-decoration: underline; `; @@ -23,4 +28,6 @@ Link.propTypes = { href: React.PropTypes.string.isRequired }; -module.exports = Link; +module.exports = Baseline( + Link +); diff --git a/ui/src/components/add-metric/tile.js b/ui/src/components/add-metric/tile.js index 955b5657..9fe1afaa 100644 --- a/ui/src/components/add-metric/tile.js +++ b/ui/src/components/add-metric/tile.js @@ -1,6 +1,7 @@ const React = require('react'); const Styled = require('styled-components'); const constants = require('../../shared/constants'); +const composers = require('../../shared/composers'); const fns = require('../../shared/functions'); const { @@ -9,6 +10,10 @@ const { colors } = constants; +const { + Baseline +} = composers; + const { remcalc } = fns; @@ -49,16 +54,16 @@ const StyledTile = styled.div` const Tile = ({ children -}) => { - return ( - - {children} - - ); -}; +}) => ( + + {children} + +); Tile.propTypes = { children: React.PropTypes.node }; -module.exports = Tile; +module.exports = Baseline( + Tile +); diff --git a/ui/src/components/add-metric/title.js b/ui/src/components/add-metric/title.js index c4a00e88..9d769dea 100644 --- a/ui/src/components/add-metric/title.js +++ b/ui/src/components/add-metric/title.js @@ -1,11 +1,16 @@ const React = require('react'); const Styled = require('styled-components'); const constants = require('../../shared/constants'); +const composers = require('../../shared/composers'); const { colors } = constants; +const { + Baseline +} = composers; + const { default: styled } = Styled; @@ -27,4 +32,6 @@ Title.propTypes = { children: React.PropTypes.node }; -module.exports = Title; +module.exports = Baseline( + Title +); diff --git a/ui/src/components/anchor/index.js b/ui/src/components/anchor/index.js index 655e09c2..e70007b0 100644 --- a/ui/src/components/anchor/index.js +++ b/ui/src/components/anchor/index.js @@ -1,23 +1,32 @@ -const constants = require('../../shared/constants'); const React = require('react'); +const constants = require('../../shared/constants'); +const composers = require('../../shared/composers'); const Styled = require('styled-components'); const { - base, -} = constants.colors; + colors +} = constants; + +const { + Baseline +} = composers; const { default: styled } = Styled; const color = (props) => props.secondary - ? base.secondary - : base.primary; + ? colors.base.secondary + : colors.base.primary; -const Anchor = styled.a` +const StyledAnchor = styled.a` color: ${color} !important; `; +const Anchor = Baseline( + StyledAnchor +); + module.exports = Anchor; module.exports.fn = (element) => (props) => React.cloneElement(element, { diff --git a/ui/src/components/avatar/index.js b/ui/src/components/avatar/index.js index b43210a3..dd6cab12 100644 --- a/ui/src/components/avatar/index.js +++ b/ui/src/components/avatar/index.js @@ -13,6 +13,10 @@ const { remcalc } = fns; +const { + Baseline +} = composers; + const { default: styled } = Styled; @@ -31,7 +35,7 @@ const Letter = styled.p` font-weight: 600; `; -const Avatar = styled.div` +const Container = styled.div` border-radius: 100%; display: inline-block; overflow: hidden; @@ -39,7 +43,7 @@ const Avatar = styled.div` text-align: center; `; -module.exports = ({ +const Avatar = ({ alt, className, color = '#ACC014', @@ -77,13 +81,13 @@ module.exports = ({ ); return ( - + {av} - + ); }; -module.exports.propTypes = { +Avatar.propTypes = { alt: React.PropTypes.string, className: React.PropTypes.string, color: React.PropTypes.string, @@ -97,3 +101,7 @@ module.exports.propTypes = { style: React.PropTypes.object, width: React.PropTypes.string, }; + +module.exports = Baseline( + Avatar +); diff --git a/ui/src/components/base-elements/index.js b/ui/src/components/base-elements/index.js index 7214b154..960ac99a 100644 --- a/ui/src/components/base-elements/index.js +++ b/ui/src/components/base-elements/index.js @@ -5,6 +5,7 @@ const React = require('react'); const fns = require('../../shared/functions'); const constants = require('../../shared/constants'); +const composers = require('../../shared/composers'); const { default: styled @@ -14,51 +15,49 @@ const { colors, } = constants; +const { + Baseline +} = composers; + const { remcalc } = fns; // If specificity is an issue (i.e nested elements) check base/index.js first // before using !important -const elements = [ - { - name: 'H1', - properties: { - 'font-size': remcalc(36), - 'font-weight': 600, - 'font-style': 'normal', - 'font-stretch': 'normal', - 'color': colors.base.primaryLight, - 'margin' : 0 - } - }, - { - name: 'H2', - properties: { - 'font-size': remcalc(24), - } - }, - { - name: 'H3', - properties: { - 'font-size': remcalc(16), - } - }, - { - name: 'P', - properties: { - 'line-height': remcalc(24), - 'font-size': remcalc(16), - } - }, - { - name: 'Small', - properties: { - 'line-height': remcalc(18), - 'font-size': remcalc(14), - }, +const elements = [{ + name: 'H1', + properties: { + 'font-size': remcalc(36), + 'font-weight': 600, + 'font-style': 'normal', + 'font-stretch': 'normal', + 'color': colors.base.primaryLight, + 'margin': 0 } -]; +}, { + name: 'H2', + properties: { + 'font-size': remcalc(24), + } +}, { + name: 'H3', + properties: { + 'font-size': remcalc(16), + } +}, { + name: 'P', + properties: { + 'line-height': remcalc(24), + 'font-size': remcalc(16), + } +}, { + name: 'Small', + properties: { + 'line-height': remcalc(18), + 'font-size': remcalc(14), + }, +}]; /* Loop over each item in element array. @@ -69,33 +68,34 @@ const elements = [ Usage: const H1 = require(base-components).H1; */ +const BaseElements = elements.reduce((acc, { + name = '', + properties = {} +}) => { + const StyledElement = styled[name.toLowerCase()]` + ${properties} + `; -const BaseElements = {}; - -elements.forEach( element => { - const ElementName = element.name; - - BaseElements[ElementName] = ({ - children, - style - }) => { - - const StyledElement = styled[element.name.toLowerCase()]` - ${element.properties} - `; - - return ( - - {children} - - ); - }; + const Component = ({ + className = '', + children = null, + style = {} + }) => ( + + {children} + + ); // TODO: Fix proptype validation and remove eslint ignore line 1 - BaseElements[ElementName].propTypes = { + Component.propTypes = { children: React.PropTypes.node, style: React.PropTypes.object, }; -}); -module.exports = BaseElements; \ No newline at end of file + return { + ...acc, + [name]: Baseline(Component) + }; +}, {}); + +module.exports = BaseElements; diff --git a/ui/src/components/baseline-grid/index.js b/ui/src/components/baseline-grid/index.js index 989a395b..ced7160e 100644 --- a/ui/src/components/baseline-grid/index.js +++ b/ui/src/components/baseline-grid/index.js @@ -1,13 +1,18 @@ const React = require('react'); +const composers = require('../../shared/composers'); const Styled = require('styled-components'); const { default: styled } = Styled; +const { + Baseline +} = composers; + const StyledBaselineBackground = styled.div` position: relative; - + &:after { position: absolute; width: auto; @@ -31,7 +36,7 @@ const StyledBaselineBackground = styled.div` } `; -const Baseline = ({ +const BaselineGrid = ({ children }) => ( @@ -39,8 +44,10 @@ const Baseline = ({ ); -Baseline.propTypes = { - children: React.PropTypes.node, +BaselineGrid.propTypes = { + children: React.PropTypes.node }; -module.exports = Baseline; +module.exports = Baseline( + BaselineGrid +); diff --git a/ui/src/components/baseline-grid/readme.md b/ui/src/components/baseline-grid/readme.md deleted file mode 100644 index e7d5b6a3..00000000 --- a/ui/src/components/baseline-grid/readme.md +++ /dev/null @@ -1,37 +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 Icon = require('./index.js'); -const styles = require('./style.css'); - -nmodule.exports = ReactDOM.renderToString( - - - - - - - -); -``` - -## usage - -```js -const React = require('react'); -const Icon = require('ui/icon'); - -module.exports = () => { - return ( - - ); -} -``` diff --git a/ui/src/components/baseline-grid/story.js b/ui/src/components/baseline-grid/story.js new file mode 100644 index 00000000..14f16695 --- /dev/null +++ b/ui/src/components/baseline-grid/story.js @@ -0,0 +1,25 @@ +const React = require('react'); + +const { + storiesOf +} = require('@kadira/storybook'); + +const Base = require('../base'); +const BaseElements = require('../base-elements'); +const Input = require('../input'); + +const { + H1 +} = BaseElements; + +storiesOf('Baseline', module) + .add('margin-left', () => ( + +

Heyo

+ + )) + .add('padding', () => ( + + + + )); diff --git a/ui/src/components/baseline-grid/style.css b/ui/src/components/baseline-grid/style.css deleted file mode 100644 index 86e66eb4..00000000 --- a/ui/src/components/baseline-grid/style.css +++ /dev/null @@ -1,3 +0,0 @@ -.icon { - font-size: inherit; -} diff --git a/ui/src/components/button/index.js b/ui/src/components/button/index.js index 9946c935..da16134a 100644 --- a/ui/src/components/button/index.js +++ b/ui/src/components/button/index.js @@ -1,3 +1,4 @@ +const composers = require('../../shared/composers'); const constants = require('../../shared/constants'); const fns = require('../../shared/functions'); const isString = require('lodash.isstring'); @@ -15,6 +16,10 @@ const { boxes } = constants; +const { + Baseline +} = composers; + const { remcalc } = fns; @@ -184,4 +189,6 @@ Button.propTypes = { rr: React.PropTypes.bool }; -module.exports = Button; +module.exports = Baseline( + Button +); diff --git a/ui/src/components/checkbox/index.js b/ui/src/components/checkbox/index.js index 15b0ce48..bdcc6615 100644 --- a/ui/src/components/checkbox/index.js +++ b/ui/src/components/checkbox/index.js @@ -1,3 +1,4 @@ +const composers = require('../../shared/composers'); const constants = require('../../shared/constants'); const fns = require('../../shared/functions'); const React = require('react'); @@ -7,6 +8,10 @@ const { boxes } = constants; +const { + Baseline +} = composers; + const { remcalc } = fns; @@ -81,27 +86,25 @@ const Checkbox = ({ selectionDirection, style, tabIndex -}) => { - return ( - - - - {children} - - - ); -}; +}) => ( + + + + {children} + + +); Checkbox.propTypes = { checked: React.PropTypes.bool, @@ -119,4 +122,6 @@ Checkbox.propTypes = { tabIndex: React.PropTypes.string }; -module.exports = Checkbox; +module.exports = Baseline( + Checkbox +); diff --git a/ui/src/components/close/index.js b/ui/src/components/close/index.js index d69296de..57376ada 100644 --- a/ui/src/components/close/index.js +++ b/ui/src/components/close/index.js @@ -1,6 +1,7 @@ const React = require('react'); const Styled = require('styled-components'); +const composers = require('../../shared/composers'); const fns = require('../../shared/functions'); const { @@ -11,6 +12,10 @@ const { remcalc } = fns; +const { + Baseline +} = composers; + const StyledButton = styled.button` background: none; border: none; @@ -21,24 +26,24 @@ const StyledButton = styled.button` const Close = ({ style, - onClick, -}) => { - return ( - - Close - - ); -}; + onClick +}) => ( + + Close + +); Close.propTypes = { onClick: React.PropTypes.func, style: React.PropTypes.object }; -module.exports = Close; +module.exports = Baseline( + Close +); diff --git a/ui/src/components/column/index.js b/ui/src/components/column/index.js index 252f0f52..f32040ad 100644 --- a/ui/src/components/column/index.js +++ b/ui/src/components/column/index.js @@ -4,6 +4,7 @@ */ const constants = require('../../shared/constants'); +const composers = require('../../shared/composers'); const isUndefined = require('lodash.isundefined'); const fns = require('../../shared/functions'); const Styled = require('styled-components'); @@ -13,6 +14,10 @@ const { sizes } = constants; +const { + Baseline +} = composers; + const { calc } = fns; @@ -60,11 +65,11 @@ const mdOffset = breakpoint('mdOffset', 'medium'); const lg = breakpoint('lg', 'large'); const lgOffset = breakpoint('lgOffset', 'large'); -module.exports = styled.div` +const Column = styled.div` box-sizing: border-box; padding-left: ${padding}; padding-right: ${padding}; - + // If no column size is passed, make it full width width: 100%; @@ -108,3 +113,7 @@ module.exports = styled.div` margin-left: ${marginLeft('lgOffset')}; `} `; + +module.exports = Baseline( + Column +); diff --git a/ui/src/components/container/index.js b/ui/src/components/container/index.js index e23e7727..763ea8c8 100644 --- a/ui/src/components/container/index.js +++ b/ui/src/components/container/index.js @@ -3,6 +3,7 @@ * github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Grid.js */ +const composers = require('../../shared/composers'); const constants = require('../../shared/constants'); const Styled = require('styled-components'); @@ -11,6 +12,10 @@ const { sizes } = constants; +const { + Baseline +} = composers; + const { default: styled, css @@ -21,7 +26,7 @@ const fluid = (props) => props.fluid && css` padding-right: ${sizes.outerMargin}; `; -module.exports = styled.div` +const Container = styled.div` margin-left: auto; margin-right: auto; @@ -39,3 +44,7 @@ module.exports = styled.div` max-width: ${sizes.containerLg || '71rem'}; `} `; + +module.exports = Baseline( + Container +); diff --git a/ui/src/components/form/label-row.js b/ui/src/components/form/label-row.js index 0faab365..2fc0278e 100644 --- a/ui/src/components/form/label-row.js +++ b/ui/src/components/form/label-row.js @@ -1,7 +1,12 @@ +const composers = require('../../shared/composers'); const Column = require('../column'); const React = require('react'); const Row = require('../row'); +const { + Baseline +} = composers; + const LabelRow = (props) => { const labels = React.Children.map(props.children, (children) => ( @@ -20,4 +25,6 @@ LabelRow.propTypes = { children: React.PropTypes.node }; -module.exports = LabelRow; +module.exports = Baseline( + LabelRow +); diff --git a/ui/src/components/form/label.js b/ui/src/components/form/label.js index 96225ffc..016490d9 100644 --- a/ui/src/components/form/label.js +++ b/ui/src/components/form/label.js @@ -1,3 +1,4 @@ +const composers = require('../../shared/composers'); const constants = require('../../shared/constants'); const fns = require('../../shared/functions'); const Styled = require('styled-components'); @@ -10,11 +11,15 @@ const { remcalc } = fns; +const { + Baseline +} = composers; + const { default: styled } = Styled; -module.exports = styled.label` +const Label = styled.label` width: 100%; font-size: ${remcalc(16)}; font-weight: 600; @@ -22,3 +27,7 @@ module.exports = styled.label` font-stretch: normal; color: ${colors.base.secondary}; `; + +module.exports = Baseline( + Label +); diff --git a/ui/src/components/form/msg.js b/ui/src/components/form/msg.js index c5378b46..c94ab086 100644 --- a/ui/src/components/form/msg.js +++ b/ui/src/components/form/msg.js @@ -1,3 +1,4 @@ +const composers = require('../../shared/composers'); const constants = require('../../shared/constants'); const Label = require('./label'); const match = require('../../shared/match'); @@ -8,6 +9,10 @@ const { colors } = constants; +const { + Baseline +} = composers; + const { default: styled } = Styled; @@ -19,7 +24,7 @@ const color = match.prop({ })('type'); -module.exports = styled(Label)` +const Msg = styled(Label)` color: ${color}; ${breakpoints.medium` @@ -27,3 +32,7 @@ module.exports = styled(Label)` text-align: right; `} `; + +module.exports = Baseline( + Msg +); diff --git a/ui/src/components/form/outlet.js b/ui/src/components/form/outlet.js index 54004670..17ecad7d 100644 --- a/ui/src/components/form/outlet.js +++ b/ui/src/components/form/outlet.js @@ -35,7 +35,7 @@ const paddingTop = (props) => props.multiple ? remcalc(20) : remcalc(13); -module.exports = css` +const Outlet = css` box-sizing: border-box; width: 100%; @@ -65,3 +65,5 @@ module.exports = css` outline: 0; } `; + +module.exports = Outlet; diff --git a/ui/src/components/form/view.js b/ui/src/components/form/view.js index c95c7c88..bfa342ea 100644 --- a/ui/src/components/form/view.js +++ b/ui/src/components/form/view.js @@ -1,7 +1,16 @@ +const composers = require('../../shared/composers'); const Styled = require('styled-components'); +const { + Baseline +} = composers; + const { default: styled } = Styled; -module.exports = styled.div``; \ No newline at end of file +const View = styled.div``; + +module.exports = Baseline( + View +); diff --git a/ui/src/components/horizontal-list/li.js b/ui/src/components/horizontal-list/li.js index b7cd1e3b..14a502d9 100644 --- a/ui/src/components/horizontal-list/li.js +++ b/ui/src/components/horizontal-list/li.js @@ -1,3 +1,4 @@ +const composers = require('../../shared/composers'); const fns = require('../../shared/functions'); const constants = require('../../shared/constants'); const Styled = require('styled-components'); @@ -10,13 +11,17 @@ const { colors } = constants; +const { + Baseline +} = composers; + const { default: styled } = Styled; -module.exports = styled.li` +const Li = styled.li` display: inline-block; - + & + & { margin-left: ${remcalc(24)}; } @@ -25,7 +30,7 @@ module.exports = styled.li` color: ${colors.base.secondaryDark}; text-decoration: none; padding-bottom: ${remcalc(6)}; - + &.active { cursor: default; color: ${colors.base.primary}; @@ -33,3 +38,7 @@ module.exports = styled.li` } } `; + +module.exports = Baseline( + Li +); diff --git a/ui/src/components/horizontal-list/ul.js b/ui/src/components/horizontal-list/ul.js index 5e90c926..df5638bb 100644 --- a/ui/src/components/horizontal-list/ul.js +++ b/ui/src/components/horizontal-list/ul.js @@ -1,15 +1,24 @@ const Styled = require('styled-components'); +const composers = require('../../shared/composers'); const fns = require('../../shared/functions'); const { remcalc } = fns; +const { + Baseline +} = composers; + const { default: styled } = Styled; -module.exports = styled.ul` +const Ul = styled.ul` list-style-type: none; margin-bottom: ${remcalc(33)}; `; + +module.exports = Baseline( + Ul +); \ No newline at end of file diff --git a/ui/src/components/input/index.js b/ui/src/components/input/index.js index 9e2068c2..75c3dca8 100644 --- a/ui/src/components/input/index.js +++ b/ui/src/components/input/index.js @@ -1,5 +1,7 @@ const fns = require('../../shared/functions'); const reduxFormProxy = require('../../shared/redux-form-proxy'); +const composers = require('../../shared/composers'); + const React = require('react'); const Styled = require('styled-components'); @@ -13,6 +15,10 @@ const { rndId } = fns; +const { + Baseline +} = composers; + const { default: styled } = Styled; @@ -78,4 +84,6 @@ Input.propTypes = { warning: React.PropTypes.string }; -module.exports = reduxFormProxy(Input); +module.exports = reduxFormProxy( + Baseline(Input) +); diff --git a/ui/src/components/list/description.js b/ui/src/components/list/description.js index ae5b1210..6a7cc303 100644 --- a/ui/src/components/list/description.js +++ b/ui/src/components/list/description.js @@ -1,3 +1,4 @@ +const composers = require('../../shared/composers'); const fns = require('../../shared/functions'); const React = require('react'); const Styled = require('styled-components'); @@ -7,6 +8,10 @@ const { remcalc } = fns; +const { + Baseline +} = composers; + const { default: styled, css @@ -62,4 +67,6 @@ Description.propTypes = { collapsed: React.PropTypes.bool }; -module.exports = Description; +module.exports = Baseline( + Description +); diff --git a/ui/src/components/list/group-view.js b/ui/src/components/list/group-view.js index bb12365a..17da188a 100644 --- a/ui/src/components/list/group-view.js +++ b/ui/src/components/list/group-view.js @@ -1,3 +1,4 @@ +const composers = require('../../shared/composers'); const constants = require('../../shared/constants'); const fns = require('../../shared/functions'); const View = require('./view').raw; @@ -7,6 +8,10 @@ const { colors } = constants; +const { + Baseline +} = composers; + const { remcalc } = fns; @@ -15,7 +20,7 @@ const { default: styled } = Styled; -module.exports = styled(View)` +const GroupView = styled(View)` display: block; padding-top: ${remcalc(62)}; padding-left: ${remcalc(23)}; @@ -23,3 +28,7 @@ module.exports = styled(View)` padding-bottom: ${remcalc(5)}; background-color: ${colors.inactive.default}; `; + +module.exports = Baseline( + GroupView +); \ No newline at end of file diff --git a/ui/src/components/list/header.js b/ui/src/components/list/header.js index 5a88aa4c..13581729 100644 --- a/ui/src/components/list/header.js +++ b/ui/src/components/list/header.js @@ -1,4 +1,5 @@ const fns = require('../../shared/functions'); +const composers = require('../../shared/composers'); const constants = require('../../shared/constants'); const Item = require('./item'); const React = require('react'); @@ -12,6 +13,10 @@ const { colors } = constants; +const { + Baseline +} = composers; + const { default: styled } = Styled; @@ -30,7 +35,7 @@ const StyledItem = styled(Item)` top: ${remcalc(-1)}; left: ${remcalc(-1)}; right: ${remcalc(-1)}; - + & [name="list-item-subtitle"], & [name="list-item-title"] { color: ${colors.base.white}; @@ -58,4 +63,6 @@ Header.propTypes = { children: React.PropTypes.node }; -module.exports = Header; +module.exports = Baseline( + Header +); diff --git a/ui/src/components/list/item.js b/ui/src/components/list/item.js index 9938369c..f320fe59 100644 --- a/ui/src/components/list/item.js +++ b/ui/src/components/list/item.js @@ -1,3 +1,4 @@ +const composers = require('../../shared/composers'); const constants = require('../../shared/constants'); const fns = require('../../shared/functions'); const React = require('react'); @@ -14,6 +15,10 @@ const { remcalc } = fns; +const { + Baseline +} = composers; + const { default: styled } = Styled; @@ -56,11 +61,14 @@ const Item = styled(Row)` margin-bottom: ${marginBottom}; `; -module.exports = transferProps([ - 'collapsed', - 'headed' -], (props) => ( - - {props.children} - -)); +module.exports = Baseline( + transferProps([ + 'collapsed', + 'headed' + ], (props) => ( + + {props.children} + + )) +); + diff --git a/ui/src/components/list/meta.js b/ui/src/components/list/meta.js index bfa0cd03..302e3bf1 100644 --- a/ui/src/components/list/meta.js +++ b/ui/src/components/list/meta.js @@ -3,12 +3,17 @@ const React = require('react'); const Row = require('../row'); const Styled = require('styled-components'); const transferProps = require('../../shared/transfer-props'); +const composers = require('../../shared/composers'); const View = require('./view'); const { default: styled } = Styled; +const { + Baseline +} = composers; + const md = (props) => props.collapsed ? 12 : 6; @@ -22,12 +27,11 @@ const InnerRow = styled(Row)` height: 100%; `; -module.exports = transferProps([ +const Meta = transferProps([ 'collapsed', 'headed', 'fromHeader' ], (props) => { - const meta = ( ); }); + +module.exports = Baseline( + Meta +); diff --git a/ui/src/components/list/options.js b/ui/src/components/list/options.js index 1f232165..6743a1f5 100644 --- a/ui/src/components/list/options.js +++ b/ui/src/components/list/options.js @@ -1,4 +1,5 @@ const Button = require('../button'); +const composers = require('../../shared/composers'); const constants = require('../../shared/constants'); const fns = require('../../shared/functions'); const React = require('react'); @@ -13,6 +14,10 @@ const { remcalc } = fns; +const { + Baseline +} = composers; + const { default: styled } = Styled; @@ -74,4 +79,6 @@ Options.propTypes = { children: React.PropTypes.node }; -module.exports = Options; +module.exports = Baseline( + Options +); diff --git a/ui/src/components/list/outlet.js b/ui/src/components/list/outlet.js index 7cfeb62f..799f614b 100644 --- a/ui/src/components/list/outlet.js +++ b/ui/src/components/list/outlet.js @@ -1,3 +1,4 @@ +const composers = require('../../shared/composers'); const Column = require('../column'); const Styled = require('styled-components'); const React = require('react'); @@ -6,6 +7,10 @@ const { default: styled } = Styled; +const { + Baseline +} = composers; + const display = (props) => props.collapsed ? 'none' : 'block'; @@ -29,4 +34,6 @@ Outlet.propTypes = { children: React.PropTypes.node }; -module.exports = Outlet; +module.exports = Baseline( + Outlet +); diff --git a/ui/src/components/list/subtitle.js b/ui/src/components/list/subtitle.js index f44e09ca..7b87ef72 100644 --- a/ui/src/components/list/subtitle.js +++ b/ui/src/components/list/subtitle.js @@ -1,3 +1,4 @@ +const composers = require('../../shared/composers'); const fns = require('../../shared/functions'); const Title = require('./title'); const React = require('react'); @@ -7,6 +8,10 @@ const { remcalc } = fns; +const { + Baseline +} = composers; + const { default: styled } = Styled; @@ -51,4 +56,6 @@ Subtitle.propTypes = { fromHeader: React.PropTypes.bool }; -module.exports = Subtitle; \ No newline at end of file +module.exports = Baseline( + Subtitle +); diff --git a/ui/src/components/list/title.js b/ui/src/components/list/title.js index 41ee4a98..f2dc35c2 100644 --- a/ui/src/components/list/title.js +++ b/ui/src/components/list/title.js @@ -1,3 +1,4 @@ +const composers = require('../../shared/composers'); const constants = require('../../shared/constants'); const fns = require('../../shared/functions'); const isString = require('lodash.isstring'); @@ -12,6 +13,10 @@ const { remcalc } = fns; +const { + Baseline +} = composers; + const { default: styled } = Styled; @@ -92,4 +97,6 @@ Title.propTypes = { collapsed: React.PropTypes.bool }; -module.exports = Title; +module.exports = Baseline( + Title +); diff --git a/ui/src/components/list/view.js b/ui/src/components/list/view.js index cbdde2fe..cc9cbb7b 100644 --- a/ui/src/components/list/view.js +++ b/ui/src/components/list/view.js @@ -1,13 +1,18 @@ +const composers = require('../../shared/composers'); +const transferProps = require('../../shared/transfer-props'); const fns = require('../../shared/functions'); const React = require('react'); const Row = require('../row'); const Styled = require('styled-components'); -const transferProps = require('../../shared/transfer-props'); const { remcalc } = fns; +const { + Baseline +} = composers; + const { default: styled } = Styled; @@ -44,10 +49,14 @@ View.propTypes = { headed: React.PropTypes.bool }; +const BaselineView = Baseline( + View +); + module.exports = transferProps([ 'collapsed', 'headed', 'fromHeader' -], View); +], BaselineView); -module.exports.raw = View; +module.exports.raw = BaselineView; diff --git a/ui/src/components/metric/close-button.js b/ui/src/components/metric/close-button.js index 435b222c..6ab33445 100644 --- a/ui/src/components/metric/close-button.js +++ b/ui/src/components/metric/close-button.js @@ -2,10 +2,11 @@ const React = require('react'); const Styled = require('styled-components'); const fns = require('../../shared/functions'); const constants = require('../../shared/constants'); -const CloseIcon = - require( - '!babel-loader!svg-react-loader!./close.svg?name=CloseIcon' - ); +const composers = require('../../shared/composers'); + +const CloseIcon = require( + '!babel-loader!svg-react-loader!./close.svg?name=CloseIcon' +); const { default: styled @@ -15,6 +16,10 @@ const { remcalc } = fns; +const { + Baseline +} = composers; + const { colors } = constants; @@ -39,8 +44,8 @@ const StyledIcon = styled(CloseIcon)` const AddMetricButton = ({ onClick }) => { - const onButtonClick = (e) => onClick(); + return ( { - return ( - - - {children} - - - ); -}; +}) => ( + + + {children} + + +); Select.propTypes = { autoFocus: React.PropTypes.bool, @@ -96,4 +95,6 @@ Select.propTypes = { value: React.PropTypes.string }; -module.exports = Select; +module.exports = Baseline( + Select +); diff --git a/ui/src/components/metric/settings-button.js b/ui/src/components/metric/settings-button.js index 5768a5b8..78d038ea 100644 --- a/ui/src/components/metric/settings-button.js +++ b/ui/src/components/metric/settings-button.js @@ -2,11 +2,12 @@ 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 Button = require('../button'); -const SettingsIcon = - require( - '!babel-loader!svg-react-loader!./icon-settings.svg?name=SettingsIcon' - ); + +const SettingsIcon = require( + '!babel-loader!svg-react-loader!./icon-settings.svg?name=SettingsIcon' +); const { default: styled @@ -20,6 +21,10 @@ const { colors } = constants; +const { + Baseline +} = composers; + const StyledButton = styled(Button)` position: relative; display: flex; @@ -54,6 +59,7 @@ const AddMetricButton = ({ onClick }) => { const onButtonClick = (e) => onClick(metric); + return ( { - if (!props.active) { - return null; - } - - return ( -
- - - {props.children} - -
- ); -}; +const Modal = (props) => !props.active ? null : ( +
+ + + {props.children} + +
+); Modal.propTypes = { active: React.PropTypes.bool, @@ -68,4 +66,6 @@ Modal.propTypes = { handleDismiss: React.PropTypes.func }; -module.exports = Modal; +module.exports = Baseline( + Modal +); diff --git a/ui/src/components/notification/index.js b/ui/src/components/notification/index.js index 619b559f..8ff158ce 100644 --- a/ui/src/components/notification/index.js +++ b/ui/src/components/notification/index.js @@ -1,6 +1,6 @@ const constants = require('../../shared/constants'); -const fns = require('../../shared/functions'); const composers = require('../../shared/composers'); +const fns = require('../../shared/functions'); const React = require('react'); const Styled = require('styled-components'); const Close = require('../close'); @@ -19,7 +19,8 @@ const { const { baseBox, - pseudoEl + pseudoEl, + Baseline } = composers; const decorationWidth = remcalc(108); @@ -31,12 +32,12 @@ const StyledNotification = styled.div` width: 100%; ${baseBox(0)} - + &::before { background-color: ${props => colors[props.type] || colors.brandPrimary} width: ${decorationWidth}; height: 100%; - + ${pseudoEl()} } `; @@ -55,7 +56,9 @@ const Notificaton = ({ type, close }) => { - const renderClose = close ? () : null; + const renderClose = !close ? null : ( + + ); return ( - { renderClose } - + {renderClose} {children} @@ -80,4 +82,6 @@ Notificaton.propTypes = { type: React.PropTypes.string }; -module.exports = Notificaton; +module.exports = Baseline( + Notificaton +); diff --git a/ui/src/components/pagination/index.js b/ui/src/components/pagination/index.js index ca69b1fb..bb7e8888 100644 --- a/ui/src/components/pagination/index.js +++ b/ui/src/components/pagination/index.js @@ -5,7 +5,8 @@ const React = require('react'); const Styled = require('styled-components'); const { - baseBox + baseBox, + Baseline } = composers; const { @@ -64,7 +65,6 @@ const StyledLi = styled.li` } `; - const Pagination = ({ children, className, @@ -104,4 +104,6 @@ Pagination.propTypes = { style: React.PropTypes.object }; -module.exports = Pagination; +module.exports = Baseline( + Pagination +); diff --git a/ui/src/components/payment-card/detail.js b/ui/src/components/payment-card/detail.js index c6e6d33b..3611af4b 100644 --- a/ui/src/components/payment-card/detail.js +++ b/ui/src/components/payment-card/detail.js @@ -1,3 +1,4 @@ +const composers = require('../../shared/composers'); const React = require('react'); const Styled = require('styled-components'); @@ -5,6 +6,10 @@ const { default: styled } = Styled; +const { + Baseline +} = composers; + const Container = styled.p` margin: 0; line-height: 1.2; @@ -20,4 +25,6 @@ Detail.propTypes = { children: React.PropTypes.node }; -module.exports = Detail; +module.exports = Baseline( + Detail +); diff --git a/ui/src/components/payment-card/details.js b/ui/src/components/payment-card/details.js index 1ee45f4e..43069b27 100644 --- a/ui/src/components/payment-card/details.js +++ b/ui/src/components/payment-card/details.js @@ -1,11 +1,16 @@ +const composers = require('../../shared/composers'); +const fns = require('../../shared/functions'); const React = require('react'); const Styled = require('styled-components'); -const fns = require('../../shared/functions'); const { remcalc } = fns; +const { + Baseline +} = composers; + const { default: styled } = Styled; @@ -25,4 +30,6 @@ Details.propTypes = { children: React.PropTypes.node }; -module.exports = Details; +module.exports = Baseline( + Details +); diff --git a/ui/src/components/payment-card/payment-card.js b/ui/src/components/payment-card/payment-card.js index 02391edb..d1cdf253 100644 --- a/ui/src/components/payment-card/payment-card.js +++ b/ui/src/components/payment-card/payment-card.js @@ -2,13 +2,13 @@ const React = require('react'); const Styled = require('styled-components'); +const composers = require('../../shared/composers'); const constants = require('../../shared/constants'); const fns = require('../../shared/functions'); -const MastercardIcon = - require( - '!babel-loader!svg-react-loader!./mastercard.svg?name=MastercardIcon' - ); +const MastercardIcon = require( + '!babel-loader!svg-react-loader!./mastercard.svg?name=MastercardIcon' +); const { default: styled @@ -23,6 +23,10 @@ const { remcalc } = fns; +const { + Baseline +} = composers; + const icons = { mastercard: MastercardIcon }; @@ -57,18 +61,19 @@ const LargeCard = styled(Card)` `; const PaymentCard = ({ - type='mastercard', - size='small' + type = 'mastercard', + size = 'small' }) => { - const icon = React.createElement( icons[type], sizes[size] ); - return size === 'small' ? - {icon} : - {icon}; + return size === 'small' ? ( + {icon} + ) : ( + {icon} + ); }; PaymentCard.propTypes = { @@ -81,4 +86,6 @@ PaymentCard.propTypes = { ]).isRequired }; -module.exports = PaymentCard; +module.exports = Baseline( + PaymentCard +); diff --git a/ui/src/components/payment-card/view.js b/ui/src/components/payment-card/view.js index 201f3186..cb92d910 100644 --- a/ui/src/components/payment-card/view.js +++ b/ui/src/components/payment-card/view.js @@ -1,11 +1,16 @@ const React = require('react'); const Styled = require('styled-components'); +const composers = require('../../shared/composers'); const fns = require('../../shared/functions'); const { remcalc } = fns; +const { + Baseline +} = composers; + const { default: styled } = Styled; @@ -26,4 +31,6 @@ View.propTypes = { children: React.PropTypes.node }; -module.exports = View; +module.exports = Baseline( + View +); diff --git a/ui/src/components/radio-group/index.js b/ui/src/components/radio-group/index.js index 6bb576c1..677d1a14 100644 --- a/ui/src/components/radio-group/index.js +++ b/ui/src/components/radio-group/index.js @@ -5,6 +5,7 @@ * if they have any */ +const composers = require('../../shared/composers'); const first = require('lodash.first'); const isUndefined = require('lodash.isundefined'); const get = require('lodash.get'); @@ -14,6 +15,10 @@ const classNames = require('classnames'); const React = require('react'); // const styles = require('./style.css'); +const { + Baseline +} = composers; + const RadioGroup = React.createClass({ propTypes: { children: React.PropTypes.node, @@ -150,4 +155,6 @@ const RadioGroup = React.createClass({ } }); -module.exports = RadioGroup; +module.exports = Baseline( + RadioGroup +); diff --git a/ui/src/components/radio-group/item.js b/ui/src/components/radio-group/item.js index 18333b44..4645e9a0 100644 --- a/ui/src/components/radio-group/item.js +++ b/ui/src/components/radio-group/item.js @@ -1,7 +1,12 @@ const React = require('react'); const fns = require('../../shared/functions'); -const Styled = require('styled-components'); const constants = require('../../shared/constants'); +const composers = require('../../shared/composers'); +const Styled = require('styled-components'); + +const { + Baseline +} = composers; const { remcalc @@ -47,19 +52,17 @@ const Item = ({ disabled = false, onClick, tabIndex -}) => { - return ( - - {children} - - ); -}; +}) => ( + + {children} + +); Item.propTypes = { checked: React.PropTypes.bool, @@ -70,4 +73,6 @@ Item.propTypes = { tabIndex: React.PropTypes.number }; -module.exports = Item; +module.exports = Baseline( + Item +); diff --git a/ui/src/components/radio/index.js b/ui/src/components/radio/index.js index cf1a77cc..494496a4 100644 --- a/ui/src/components/radio/index.js +++ b/ui/src/components/radio/index.js @@ -1,7 +1,8 @@ -const React = require('react'); const constants = require('../../shared/constants'); -const Styled = require('styled-components'); +const composers = require('../../shared/composers'); const fns = require('../../shared/functions'); +const React = require('react'); +const Styled = require('styled-components'); const { colors @@ -11,6 +12,10 @@ const { remcalc } = fns; +const { + Baseline +} = composers; + const { default: styled } = Styled; @@ -78,33 +83,30 @@ const Radio = ({ style, tabIndex, value -}) => { - - return ( - - - - - {children} - - - - ); -}; +}) => ( + + + + + {children} + + + +); Radio.propTypes = { checked: React.PropTypes.bool, @@ -125,4 +127,6 @@ Radio.propTypes = { value: React.PropTypes.string.isRequired }; -module.exports = Radio; +module.exports = Baseline( + Radio +); diff --git a/ui/src/components/range-slider/index.js b/ui/src/components/range-slider/index.js index 0373bb59..7646b4b5 100644 --- a/ui/src/components/range-slider/index.js +++ b/ui/src/components/range-slider/index.js @@ -5,7 +5,8 @@ const React = require('react'); const Styled = require('styled-components'); const { - baseBox + baseBox, + Baseline } = composers; const { @@ -133,16 +134,14 @@ const RangeSlider = ({ className, onChange, style -}) => { - return ( - - ); -}; +}) => ( + +); RangeSlider.propTypes = { className: React.PropTypes.string, @@ -150,4 +149,6 @@ RangeSlider.propTypes = { style: React.PropTypes.object }; -module.exports = RangeSlider; +module.exports = Baseline( + RangeSlider +); diff --git a/ui/src/components/row/index.js b/ui/src/components/row/index.js index e3abecf0..a6709599 100644 --- a/ui/src/components/row/index.js +++ b/ui/src/components/row/index.js @@ -3,6 +3,7 @@ * github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Row.js */ +const composers = require('../../shared/composers'); const constants = require('../../shared/constants'); const match = require('../../shared/match'); const sizeMatch = require('./size-match'); @@ -13,6 +14,10 @@ const { sizes } = constants; +const { + Baseline +} = composers; + const { default: styled } = Styled; @@ -51,7 +56,7 @@ const alignItems = (size) => match(sizeMatch(size, { * * ``` **/ -module.exports = styled.div` +const Row = styled.div` box-sizing: border-box; display: flex; flex: 0 1 auto; @@ -88,3 +93,7 @@ module.exports = styled.div` align-items: ${alignItems('lg')}; `} `; + +module.exports = Baseline( + Row +); diff --git a/ui/src/components/select-custom/index.js b/ui/src/components/select-custom/index.js index f2bd9bca..a09c7b88 100644 --- a/ui/src/components/select-custom/index.js +++ b/ui/src/components/select-custom/index.js @@ -1,4 +1,5 @@ const fns = require('../../shared/functions'); +const composers = require('../../shared/composers'); const constants = require('../../shared/constants'); const React = require('react'); const Styled = require('styled-components'); @@ -15,6 +16,10 @@ const { colors } = constants; +const { + Baseline +} = composers; + const { default: styled } = Styled; @@ -29,38 +34,35 @@ const SelectCustom = ({ children, className, disabled, - form, - id = rndId(), + form, + id = rndId(), isLoading, - label, + label, multi = false, name, - onChange, - options, + onChange, + options, required = false, style, value = '' -}) => { - - return ( -
- - {label} - - +
+); SelectCustom.propTypes = { async: React.PropTypes.bool, @@ -81,4 +83,6 @@ SelectCustom.propTypes = { value: React.PropTypes.string }; -module.exports = SelectCustom; +module.exports = Baseline( + SelectCustom +); diff --git a/ui/src/components/select/index.js b/ui/src/components/select/index.js index 475353d8..e1f94c3b 100644 --- a/ui/src/components/select/index.js +++ b/ui/src/components/select/index.js @@ -1,5 +1,6 @@ -const fns = require('../../shared/functions'); +const composers = require('../../shared/composers'); const reduxFormProxy = require('../../shared/redux-form-proxy'); +const fns = require('../../shared/functions'); const React = require('react'); const Styled = require('styled-components'); @@ -13,6 +14,10 @@ const { rndId } = fns; +const { + Baseline +} = composers; + const { default: styled } = Styled; @@ -92,4 +97,6 @@ Select.propTypes = { warning: React.PropTypes.string }; -module.exports = reduxFormProxy(Select); +module.exports = reduxFormProxy( + Baseline(Select) +); diff --git a/ui/src/components/table-data-table/index.js b/ui/src/components/table-data-table/index.js index 461dd0da..3dfd5648 100644 --- a/ui/src/components/table-data-table/index.js +++ b/ui/src/components/table-data-table/index.js @@ -1,3 +1,4 @@ +const composers = require('../../shared/composers'); const React = require('react'); const Styled = require('styled-components'); @@ -7,13 +8,17 @@ const { default: styled } = Styled; +const { + Baseline +} = composers; + const StyledTitle = styled.h3` text-align: center `; const StyledTableWrapper = styled.section` font-family: 'LibreFranklin', sans-serif; - font-style: normal; + font-style: normal; `; const Table = ({ @@ -21,21 +26,16 @@ const Table = ({ columns = [], data = [], style, - title, -}) => { - - return ( - - - {title} - - - - ); -}; + title +}) => ( + + {title} + + +); Table.propTypes = { children: React.PropTypes.node, @@ -45,4 +45,6 @@ Table.propTypes = { title: React.PropTypes.string, }; -module.exports = Table; +module.exports = Baseline( + Table +); diff --git a/ui/src/components/table-data-table/story.js b/ui/src/components/table-data-table/story.js index bdaaa917..190f6e83 100644 --- a/ui/src/components/table-data-table/story.js +++ b/ui/src/components/table-data-table/story.js @@ -7,14 +7,12 @@ const { const Table = require('./'); -const memberDetail = (name) => { - return ( -
-

{name}

- {name}@biztech.com -
- ); -}; +const memberDetail = (name) => ( +
+

{name}

+ {name}@biztech.com +
+); const columns = [{ title: 'Memeber', diff --git a/ui/src/components/table-data-table/table-body.js b/ui/src/components/table-data-table/table-body.js index a1dbd7fd..b095f777 100644 --- a/ui/src/components/table-data-table/table-body.js +++ b/ui/src/components/table-data-table/table-body.js @@ -1,14 +1,19 @@ +const composers = require('../../shared/composers'); const React = require('react'); const Row = require('./table-row'); +const { + Baseline +} = composers; + const TableBody = ({ columns, data }) => { - const rows = columns.map( (column, index) => { - return ; - }); + const rows = columns.map((column, index) => ( + + )); return ( @@ -22,4 +27,6 @@ TableBody.propTypes = { data: React.PropTypes.array }; -module.exports = TableBody; \ No newline at end of file +module.exports = 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 0bb3d16c..7eea541a 100644 --- a/ui/src/components/table-data-table/table-content.js +++ b/ui/src/components/table-data-table/table-content.js @@ -1,3 +1,4 @@ +const composers = require('../../shared/composers'); const React = require('react'); const Styled = require('styled-components'); @@ -8,6 +9,10 @@ const { default: styled } = Styled; +const { + Baseline +} = composers; + const StyledTable = styled.table` width: 100%; `; @@ -18,15 +23,12 @@ const TableContent = ({ hasHeader = columns.length >= 1, hasBody = data.length >= 1, width = '100%' -}) => { - - return ( - - {hasHeader ? : null} - {hasBody ? : null} - - ); -}; +}) => ( + + {hasHeader ? : null} + {hasBody ? : null} + +); TableContent.propTypes = { columns: React.PropTypes.array, @@ -36,4 +38,6 @@ TableContent.propTypes = { width: React.PropTypes.string, }; -module.exports = TableContent; +module.exports = 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 18a2848a..ee228c7b 100644 --- a/ui/src/components/table-data-table/table-head.js +++ b/ui/src/components/table-data-table/table-head.js @@ -3,6 +3,7 @@ const Styled = require('styled-components'); const fns = require('../../shared/functions'); const constants = require('../../shared/constants'); +const composers = require('../../shared/composers'); const { remcalc @@ -13,6 +14,10 @@ const { colors } = constants; +const { + Baseline +} = composers; + const { default: styled } = Styled; @@ -42,17 +47,14 @@ const TableHeader = ({ const fallBackWidth = `${100 / parseInt(columns.length)}%`; - const titles = columns.map( (column, i) => { - - return ( - - {column.title} - - ); - }); + const titles = columns.map((column, i) => ( + + {column.title} + + )); return ( @@ -67,4 +69,6 @@ TableHeader.propTypes = { columns: React.PropTypes.array }; -module.exports = TableHeader; \ No newline at end of file +module.exports = 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 b9d1abf2..ef572904 100644 --- a/ui/src/components/table-data-table/table-row.js +++ b/ui/src/components/table-data-table/table-row.js @@ -3,6 +3,7 @@ const Styled = require('styled-components'); const fns = require('../../shared/functions'); const constants = require('../../shared/constants'); +const composers = require('../../shared/composers'); const { remcalc @@ -17,6 +18,10 @@ const { colors } = constants; +const { + Baseline +} = composers; + const StyledRow = styled.tr` border: solid ${remcalc(1)} ${colors.base.greyDark}; @@ -36,13 +41,9 @@ const StyledTableItem = styled.td` const Row = ({ dataItem = {} }) => { - const _dataItem = dataItem; - - const rowItems = Object.keys(_dataItem).map( (item, i) => { - const value = _dataItem[item]; - - return {value}; - }); + const rowItems = Object.keys(dataItem).map((item, i) => ( + {dataItem[item]} + )); return ( @@ -55,4 +56,6 @@ Row.propTypes = { dataItem: React.PropTypes.object }; -module.exports = Row; \ No newline at end of file +module.exports = Baseline( + Row +); diff --git a/ui/src/components/table-simple-table/table-body.js b/ui/src/components/table-simple-table/table-body.js index 62066e6a..aeb24f89 100644 --- a/ui/src/components/table-simple-table/table-body.js +++ b/ui/src/components/table-simple-table/table-body.js @@ -8,22 +8,24 @@ const { } = Styled; const { - clearfix + clearfix, + Baseline } = composers; 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; + if (itemCount <= 1) { + return null; + } return ( @@ -36,4 +38,6 @@ TableBody.propTypes = { children: React.PropTypes.node }; -module.exports = StyledTableBody; \ No newline at end of file +module.exports = 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 2b80b85f..95000822 100644 --- a/ui/src/components/table-simple-table/table-head.js +++ b/ui/src/components/table-simple-table/table-head.js @@ -14,23 +14,24 @@ const { } = Styled; const { - clearfix + clearfix, + Baseline } = composers; const StyledTableHead = styled.header` background: #fafafa; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05); padding: ${remcalc(24)} 0; - + ${clearfix} - + & > .table-item { text-align: center; - + ${props => { const width = 100 / props.itemCount; return css` - width: ${width}%; + width: ${width}%; `; }} } @@ -39,10 +40,11 @@ const StyledTableHead = styled.header` const TableHead = ({ children }) => { - const itemCount = children.length; - if (itemCount <= 1) return; + if (itemCount <= 1) { + return null; + } return ( @@ -55,4 +57,6 @@ TableHead.propTypes = { children: React.PropTypes.node }; -module.exports = TableHead; \ No newline at end of file +module.exports = 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 e43bc69b..db73c86a 100644 --- a/ui/src/components/table-simple-table/table-item.js +++ b/ui/src/components/table-simple-table/table-item.js @@ -1,10 +1,16 @@ const React = require('react'); const Styled = require('styled-components'); +const composers = require('../../shared/composers'); + const { default: styled } = Styled; +const { + Baseline +} = composers; + const Item = styled.div` display: inline-block; float: left; @@ -12,17 +18,16 @@ const Item = styled.div` const TableItem = ({ children -}) => { - - return ( - - {children} - - ); -}; +}) => ( + + {children} + +); TableItem.propTypes = { children: React.PropTypes.node }; -module.exports = TableItem; \ No newline at end of file +module.exports = 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 cdbaa9fa..f14c009f 100644 --- a/ui/src/components/table-simple-table/table-row.js +++ b/ui/src/components/table-simple-table/table-row.js @@ -11,7 +11,8 @@ const { } = Styled; const { - clearfix + clearfix, + Baseline } = composers; const { @@ -42,18 +43,16 @@ const StyledTableRow = styled.div` const TableRow = ({ children -}) => { - const itemCount = children.length; - - return ( - - {children} - - ); -}; +}) => ( + + {children} + +); TableRow.propTypes = { children: React.PropTypes.node }; -module.exports = TableRow; \ No newline at end of file +module.exports = Baseline( + TableRow +); diff --git a/ui/src/components/table-simple-table/table.js b/ui/src/components/table-simple-table/table.js index 80de0238..ed5a5faf 100644 --- a/ui/src/components/table-simple-table/table.js +++ b/ui/src/components/table-simple-table/table.js @@ -2,6 +2,7 @@ const React = require('react'); const Styled = require('styled-components'); const constants = require('../../shared/constants'); +const composers = require('../../shared/composers'); const { default: styled @@ -11,6 +12,10 @@ const { colors } = constants; +const { + Baseline +} = composers; + const StyledTableWrapper = styled.section` border: solid 1px ${colors.base.greyDark} font-family: 'LibreFranklin', sans-serif; @@ -20,7 +25,7 @@ const StyledTableWrapper = styled.section` const Table = ({ children, style, - title, + title }) => ( {children} @@ -33,4 +38,6 @@ Table.propTypes = { title: React.PropTypes.string, }; -module.exports = Table; +module.exports = Baseline( + Table +); diff --git a/ui/src/components/tabs/index.js b/ui/src/components/tabs/index.js index 25b84fb7..1a9b06ac 100644 --- a/ui/src/components/tabs/index.js +++ b/ui/src/components/tabs/index.js @@ -1,5 +1,6 @@ const React = require('react'); const fns = require('../../shared/functions'); +const composers = require('../../shared/composers'); const Styled = require('styled-components'); const { @@ -10,6 +11,10 @@ const { default: styled } = Styled; +const { + Baseline +} = composers; + const StyledTabs = styled.div` font-size: 0; @@ -54,4 +59,6 @@ Tabs.propTypes = { style: React.PropTypes.object }; -module.exports = Tabs; +module.exports = Baseline( + Tabs +); diff --git a/ui/src/components/tabs/tab/index.js b/ui/src/components/tabs/tab/index.js index df6320e3..30191a6e 100644 --- a/ui/src/components/tabs/tab/index.js +++ b/ui/src/components/tabs/tab/index.js @@ -6,7 +6,8 @@ const React = require('react'); const Styled = require('styled-components'); const { - moveZ + moveZ, + Baseline } = composers; const { @@ -137,4 +138,6 @@ Tab.propTypes = { title: React.PropTypes.string }; -module.exports = Tab; +module.exports = Baseline( + Tab +); diff --git a/ui/src/components/textarea/index.js b/ui/src/components/textarea/index.js index e8511276..f8c7d0cd 100644 --- a/ui/src/components/textarea/index.js +++ b/ui/src/components/textarea/index.js @@ -15,7 +15,8 @@ const { } = fns; const { - baseBox + baseBox, + Baseline } = composers; const { @@ -143,4 +144,6 @@ Textarea.propTypes = { value: React.PropTypes.string }; -module.exports = Textarea; +module.exports = Baseline( + Textarea +); diff --git a/ui/src/components/toggle/index.js b/ui/src/components/toggle/index.js index 67b20b94..b37e2993 100644 --- a/ui/src/components/toggle/index.js +++ b/ui/src/components/toggle/index.js @@ -9,7 +9,8 @@ const { } = constants; const { - baseBox + baseBox, + Baseline } = composers; const { @@ -149,4 +150,6 @@ Toggle.propTypes = { style: React.PropTypes.object }; -module.exports = Toggle; +module.exports = Baseline( + Toggle +); diff --git a/ui/src/components/tooltip/index.js b/ui/src/components/tooltip/index.js index 85c743e4..21ea2a0e 100644 --- a/ui/src/components/tooltip/index.js +++ b/ui/src/components/tooltip/index.js @@ -2,13 +2,14 @@ const React = require('react'); const composers = require('../../shared/composers'); -const fns = require('../../shared/functions'); const constants = require('../../shared/constants'); +const fns = require('../../shared/functions'); const Styled = require('styled-components'); const { baseBox, pseudoEl, + Baseline } = composers; const { @@ -73,7 +74,8 @@ const StyledList = styled.ul` margin-left: ${remcalc(-12)}; } `; -module.exports = ({ + +const Tooltip = ({ children, className, style, @@ -81,21 +83,23 @@ module.exports = ({ bottom: '100%', left: '10%' } -}) => { - return ( - - {children} - - ); -}; +}) => ( + + {children} + +); -module.exports.propTypes = { +Tooltip.propTypes = { arrowPosition: React.PropTypes.object, children: React.PropTypes.node, className: React.PropTypes.string, style: React.PropTypes.object }; + +module.exports = Baseline( + Tooltip +); diff --git a/ui/src/components/topology-old/index.js b/ui/src/components/topology-old/index.js index c4f9d7d4..833582c3 100644 --- a/ui/src/components/topology-old/index.js +++ b/ui/src/components/topology-old/index.js @@ -1,3 +1,4 @@ +const composers = require('../../shared/composers'); const constants = require('../../shared/constants'); const d3 = require('d3'); const fns = require('../../shared/functions'); @@ -8,6 +9,10 @@ const { colors } = constants; +const { + Baseline +} = composers; + const { remcalc } = fns; @@ -413,7 +418,6 @@ class TopologyGraph extends React.Component { /> ); } - } TopologyGraph.propTypes = { @@ -422,4 +426,6 @@ TopologyGraph.propTypes = { width: React.PropTypes.number, }; -module.exports = TopologyGraph; +module.exports = Baseline( + TopologyGraph +); diff --git a/ui/src/components/topology-old/view.js b/ui/src/components/topology-old/view.js index 83aba5b5..e04ad057 100644 --- a/ui/src/components/topology-old/view.js +++ b/ui/src/components/topology-old/view.js @@ -1,3 +1,4 @@ +const composers = require('../../shared/composers'); const constants = require('../../shared/constants'); const fns = require('../../shared/functions'); const React = require('react'); @@ -7,6 +8,10 @@ const { colors } = constants; +const { + Baseline +} = composers; + const { remcalc } = fns; @@ -30,4 +35,6 @@ Topology.propTypes = { children: React.PropTypes.node, }; -module.exports = Topology; +module.exports = Baseline( + Topology +); diff --git a/ui/src/components/topology/graph-link.js b/ui/src/components/topology/graph-link.js index 047c6996..f772d491 100644 --- a/ui/src/components/topology/graph-link.js +++ b/ui/src/components/topology/graph-link.js @@ -1,11 +1,16 @@ 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; + const StyledLine = styled.line` stroke: #343434; stroke-width: 1.5; @@ -151,4 +156,6 @@ GraphLink.propTypes = { nodeSize: PropTypes.Size }; -module.exports = GraphLink; +module.exports = Baseline( + GraphLink +); diff --git a/ui/src/components/topology/graph-node-button.js b/ui/src/components/topology/graph-node-button.js index 62679ed9..d8856a31 100644 --- a/ui/src/components/topology/graph-node-button.js +++ b/ui/src/components/topology/graph-node-button.js @@ -1,10 +1,15 @@ const React = require('react'); +const composers = require('../../shared/composers'); const Styled = require('styled-components'); const { default: styled } = Styled; +const { + Baseline +} = composers; + const StyledButton = styled.rect` opacity: 0; cursor: pointer; @@ -54,4 +59,6 @@ GraphNodeButton.propTypes = { onButtonClick: React.PropTypes.func.isRequired }; -module.exports = GraphNodeButton; +module.exports = Baseline( + GraphNodeButton +); diff --git a/ui/src/components/topology/graph-node-info.js b/ui/src/components/topology/graph-node-info.js index c3c65f6d..fb9adecf 100644 --- a/ui/src/components/topology/graph-node-info.js +++ b/ui/src/components/topology/graph-node-info.js @@ -1,19 +1,24 @@ 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 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; + const StyledText = styled.text` fill: white; font-size: 12px; @@ -56,4 +61,6 @@ GraphNodeInfo.propTypes = { }) }; -module.exports = GraphNodeInfo; +module.exports = Baseline( + GraphNodeInfo +); diff --git a/ui/src/components/topology/graph-node-metrics.js b/ui/src/components/topology/graph-node-metrics.js index 42e032a3..777649b0 100644 --- a/ui/src/components/topology/graph-node-metrics.js +++ b/ui/src/components/topology/graph-node-metrics.js @@ -1,10 +1,15 @@ const React = require('react'); +const composers = require('../../shared/composers'); const Styled = require('styled-components'); const { default: styled } = Styled; +const { + Baseline +} = composers; + const StyledText = styled.text` fill: white; font-size: 12px; @@ -45,4 +50,6 @@ GraphNodeMetrics.propTypes = { }) }; -module.exports = GraphNodeMetrics; +module.exports = Baseline( + GraphNodeMetrics +); diff --git a/ui/src/components/topology/graph-node.js b/ui/src/components/topology/graph-node.js index 5ad315e9..5501b8bd 100644 --- a/ui/src/components/topology/graph-node.js +++ b/ui/src/components/topology/graph-node.js @@ -1,18 +1,23 @@ 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 HeartIcon = require( + '!babel-loader!svg-react-loader!./icon-heart.svg?name=HeartIcon' +); const { default: styled } = Styled; +const { + Baseline +} = composers; + const StyledRect = styled.rect` stroke: #343434; fill: #464646; @@ -144,4 +149,6 @@ GraphNode.propTypes = { size: PropTypes.Size }; -module.exports = GraphNode; +module.exports = Baseline( + GraphNode +); diff --git a/ui/src/components/topology/story-helper.js b/ui/src/components/topology/story-helper.js index 138e1cec..b7ca9e3d 100644 --- a/ui/src/components/topology/story-helper.js +++ b/ui/src/components/topology/story-helper.js @@ -1,5 +1,6 @@ const React = require('react'); const Styled = require('styled-components'); +const composers = require('../../shared/composers'); const Input = require('../input'); const Select = require('../select'); const Topology = require('./'); @@ -9,6 +10,10 @@ const { default: styled } = Styled; +const { + Baseline +} = composers; + const { TopologyGraph } = Topology; @@ -101,4 +106,6 @@ class StoryHelper extends React.Component { } } -module.exports = StoryHelper; +module.exports = Baseline( + StoryHelper +); diff --git a/ui/src/components/topology/topology-graph.js b/ui/src/components/topology/topology-graph.js index cdc6b4a8..b79a68c0 100644 --- a/ui/src/components/topology/topology-graph.js +++ b/ui/src/components/topology/topology-graph.js @@ -1,5 +1,6 @@ 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'); @@ -13,6 +14,10 @@ const { updateSimulation } = GraphSimulation; +const { + Baseline +} = composers; + const StyledSvg = styled.svg` width: 1024px; height: 860px; @@ -36,9 +41,7 @@ let dragInfo = { }; class TopologyGraph extends React.Component { - componentWillMount() { - const { nodes, links @@ -265,4 +268,6 @@ TopologyGraph.propTypes = { }) }; -module.exports = TopologyGraph; +module.exports = Baseline( + TopologyGraph +); diff --git a/ui/src/components/widget/index.js b/ui/src/components/widget/index.js index 377619d4..da8d6c41 100644 --- a/ui/src/components/widget/index.js +++ b/ui/src/components/widget/index.js @@ -1,4 +1,5 @@ const React = require('react'); +const composers = require('../../shared/composers'); const constants = require('../../shared/constants'); const fns = require('../../shared/functions'); const Styled = require('styled-components'); @@ -7,6 +8,10 @@ const { boxes } = constants; +const { + Baseline +} = composers; + const { rndId, remcalc @@ -96,4 +101,6 @@ Widget.propTypes = { value: React.PropTypes.string }; -module.exports = Widget; +module.exports = Baseline( + Widget +); diff --git a/ui/src/shared/composers.js b/ui/src/shared/composers.js index 457975c4..de5389cd 100644 --- a/ui/src/shared/composers.js +++ b/ui/src/shared/composers.js @@ -1,15 +1,62 @@ -const constants = require('./constants'); 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; +const sides = [ + 'top', + 'right', + 'bottom', + 'left' +]; + +const unitProps = (() => { + const sided = (rule) => + sides.map((side) => `${rule}-${side}`); + + const measures = [ + 'margin', + 'padding' + ].reduce((props, rule) => [ + ...props, + rule, + ...sided(rule) + ], []); + + return sides.reduce((acc, side) => [ + ...acc, + `border-${side}-width` + ], [ + 'border', + ...measures + ]); +})(); + +const unitsFromProps = (props) => unitProps + .filter((measure) => props[camelCase(measure)]) + .map((measure) => ` + ${measure}: ${unitcalc(props[camelCase(measure)])}; + `) + .join(';\n'); + module.exports = { + Baseline: (Component) => styled(Component)` + ${unitsFromProps} + `, verticallyAlignCenter: css` /* Need to place position:relative on parent */ left: 50%; @@ -48,15 +95,15 @@ module.exports = { bottom: ${positions.bottom || 'auto'}; left: ${positions.left || 'auto'}; `, - clearfix: css` + clearfix: css` &:before, &:after { content:""; display:table; } - + &:after { clear:both; } - `, + ` }; diff --git a/ui/src/shared/fake-data/index.js b/ui/src/shared/fake-data/index.js index 366dce5e..127a155f 100644 --- a/ui/src/shared/fake-data/index.js +++ b/ui/src/shared/fake-data/index.js @@ -1,29 +1,22 @@ -const selectData = [ - { - value: 'one', - label: 'One' - }, - { - value: 'two', - label: 'Two' - }, - { - value: 'three', - label: 'Three' - }, - { - value: 'four', - label: 'Four' - }, - { - value: 'five', - label: 'Five' - }, - { - value: 'six', - label: 'Six' - } -]; +const selectData = [{ + value: 'one', + label: 'One' +}, { + value: 'two', + label: 'Two' +}, { + value: 'three', + label: 'Three' +}, { + value: 'four', + label: 'Four' +}, { + value: 'five', + label: 'Five' +}, { + value: 'six', + label: 'Six' +}]; // eslint-disable-next-line max-len const profile = 'https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlff_400x400.jpg'; @@ -31,4 +24,4 @@ const profile = 'https://pbs.twimg.com/profile_images/641289584580493312/VBfsPlf module.exports = { profile, selectData -}; \ No newline at end of file +}; diff --git a/ui/src/shared/functions.js b/ui/src/shared/functions.js index 45a2227e..077d4c89 100644 --- a/ui/src/shared/functions.js +++ b/ui/src/shared/functions.js @@ -1,6 +1,10 @@ const calc = require('reduce-css-calc'); const randomNatural = require('random-natural'); +const pathToFont = './fonts/'; +const remBase = 16; +const unitBase = 6; + // from https://github.com/styled-components/styled-components/blob/065001c725744629c7870240e4a955b924ef5337/src/utils/generateAlphabeticName.js const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''); const rndId = (_code) => { @@ -14,52 +18,51 @@ const rndId = (_code) => { : lastDigit; }; -const generateFonts = (fonts) => { - const pathToFont = './fonts/'; - let fontCSS = ''; +const remcalc = (...values) => values.map((value) => ( + `${String(value).replace('px', '') / remBase}rem` +)).join(' '); - fonts.forEach((obj) => { - const eot = require(`${pathToFont + obj.filename}.eot`); - const woff = require(`${pathToFont + obj.filename}.woff`); - const woff2 = require(`${pathToFont + obj.filename}.woff2`); - const ttf = require(`${pathToFont + obj.filename}.ttf`); - const svg = require(`${pathToFont + obj.filename}.svg`); - fontCSS += ` - @font-face { - font-family: '${obj.family}'; - src: url('${eot}'), - url('${eot}?#iefix') - format('embedded-opentype'), - url('${woff}') - format('woff'), - url('${woff2}') - format('woff2'), - url('${ttf}') - format('truetype'), - url('${svg}#${obj.family}') - format('svg'); - font-weight: ${obj.weight}; - font-style: ${obj.style}; - } - `; - }); - return fontCSS; -}; +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`); + + 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}; + } + `; + + return sum; +}); module.exports = { - remcalc: (values) => { - values = values.toString().replace('px', '').split(' '); - - let outputRems = ''; - const base = 16; - - values.forEach( (value, i) => { - const remValue = value / base; - outputRems += i === 0 ? `${remValue}rem` : ` ${remValue}rem`; - }); - - return outputRems; - }, + unitcalc: unitcalc, + remcalc: remcalc, calc: (str) => calc(`calc(${str})`), rndId, generateFonts diff --git a/ui/yarn.lock b/ui/yarn.lock index 7743ee48..f804c479 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -1496,6 +1496,13 @@ callsites@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca" +camel-case: + version "3.0.0" + resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73" + dependencies: + no-case "^2.2.0" + upper-case "^1.1.1" + camelcase-keys@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7" @@ -6803,6 +6810,10 @@ update-notifier@^1.0.0: semver-diff "^2.0.0" xdg-basedir "^2.0.0" +upper-case@^1.1.1: + version "1.1.3" + resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598" + url-loader@^0.5.7: version "0.5.7" resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.7.tgz#67e8779759f8000da74994906680c943a9b0925d"