baseline composer

This commit is contained in:
Sérgio Ramos 2017-02-15 01:19:26 +00:00 committed by Judit Greskovits
parent 0c74b56791
commit 3ab029248f
92 changed files with 1168 additions and 615 deletions

View File

@ -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",

View File

@ -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 ?
(
<StyledButton
disabled
name='add-metric-button'
>
{children}
</StyledButton>
) : (
<StyledButton
name='add-metric-button'
onClick={onButtonClick}
secondary
>
{children}
</StyledButton>
);
return disabled ? (
<StyledButton
disabled
name='add-metric-button'
>
{children}
</StyledButton>
) : (
<StyledButton
name='add-metric-button'
onClick={onButtonClick}
secondary
>
{children}
</StyledButton>
);
};
AddMetricButton.propTypes = {
@ -50,4 +61,6 @@ AddMetricButton.propTypes = {
onClick: React.PropTypes.func,
};
module.exports = AddMetricButton;
module.exports = Baseline(
AddMetricButton
);

View File

@ -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
);

View File

@ -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
);

View File

@ -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 (
<StyledTile name='add-metric-tile'>
{children}
</StyledTile>
);
};
}) => (
<StyledTile name='add-metric-tile'>
{children}
</StyledTile>
);
Tile.propTypes = {
children: React.PropTypes.node
};
module.exports = Tile;
module.exports = Baseline(
Tile
);

View File

@ -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
);

View File

@ -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, {

View File

@ -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 (
<Avatar className={className} style={_style}>
<Container className={className} style={_style}>
{av}
</Avatar>
</Container>
);
};
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
);

View File

@ -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 (
<StyledElement style={style}>
{children}
</StyledElement>
);
};
const Component = ({
className = '',
children = null,
style = {}
}) => (
<StyledElement className={className} style={style}>
{children}
</StyledElement>
);
// TODO: Fix proptype validation and remove eslint ignore line 1
BaseElements[ElementName].propTypes = {
Component.propTypes = {
children: React.PropTypes.node,
style: React.PropTypes.object,
};
});
return {
...acc,
[name]: Baseline(Component)
};
}, {});
module.exports = BaseElements;

View File

@ -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 StyledBaselineBackground = styled.div`
position: relative;
@ -31,7 +36,7 @@ const StyledBaselineBackground = styled.div`
}
`;
const Baseline = ({
const BaselineGrid = ({
children
}) => (
<StyledBaselineBackground>
@ -39,8 +44,10 @@ const Baseline = ({
</StyledBaselineBackground>
);
Baseline.propTypes = {
children: React.PropTypes.node,
BaselineGrid.propTypes = {
children: React.PropTypes.node
};
module.exports = Baseline;
module.exports = Baseline(
BaselineGrid
);

View File

@ -1,37 +0,0 @@
# `<Icon>`
## 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(
<Base>
<Row>
<Column>
<Icon iconSet='fa' name='beer' />
</Column>
</Row>
</Base>
);
```
## usage
```js
const React = require('react');
const Icon = require('ui/icon');
module.exports = () => {
return (
<Icon iconSet='fa' name='beer' />
);
}
```

View File

@ -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', () => (
<Base>
<H1 marginLeft='2'>Heyo</H1>
</Base>
))
.add('padding', () => (
<Base>
<Input padding='3' />
</Base>
));

View File

@ -1,3 +0,0 @@
.icon {
font-size: inherit;
}

View File

@ -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
);

View File

@ -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 (
<StyledDiv>
<StyledInput
checked={checked}
disabled={disabled}
form={form}
name={name}
onChange={onChange}
readOnly={readOnly}
required={required}
style={style}
tabIndex={tabIndex}
type='checkbox'
/>
<StyledLabel>
<span>{children}</span>
</StyledLabel>
</StyledDiv>
);
};
}) => (
<StyledDiv>
<StyledInput
checked={checked}
disabled={disabled}
form={form}
name={name}
onChange={onChange}
readOnly={readOnly}
required={required}
style={style}
tabIndex={tabIndex}
type='checkbox'
/>
<StyledLabel>
<span>{children}</span>
</StyledLabel>
</StyledDiv>
);
Checkbox.propTypes = {
checked: React.PropTypes.bool,
@ -119,4 +122,6 @@ Checkbox.propTypes = {
tabIndex: React.PropTypes.string
};
module.exports = Checkbox;
module.exports = Baseline(
Checkbox
);

View File

@ -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 (
<StyledButton
onClick={onClick}
style={style}
>
<img
alt="Close"
src="./close.svg"
/>
</StyledButton>
);
};
onClick
}) => (
<StyledButton
onClick={onClick}
style={style}
>
<img
alt="Close"
src="./close.svg"
/>
</StyledButton>
);
Close.propTypes = {
onClick: React.PropTypes.func,
style: React.PropTypes.object
};
module.exports = Close;
module.exports = Baseline(
Close
);

View File

@ -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,7 +65,7 @@ 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};
@ -108,3 +113,7 @@ module.exports = styled.div`
margin-left: ${marginLeft('lgOffset')};
`}
`;
module.exports = Baseline(
Column
);

View File

@ -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
);

View File

@ -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) => (
<Column xs={12}>
@ -20,4 +25,6 @@ LabelRow.propTypes = {
children: React.PropTypes.node
};
module.exports = LabelRow;
module.exports = Baseline(
LabelRow
);

View File

@ -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
);

View File

@ -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
);

View File

@ -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;

View File

@ -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``;
const View = styled.div``;
module.exports = Baseline(
View
);

View File

@ -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,11 +11,15 @@ const {
colors
} = constants;
const {
Baseline
} = composers;
const {
default: styled
} = Styled;
module.exports = styled.li`
const Li = styled.li`
display: inline-block;
& + & {
@ -33,3 +38,7 @@ module.exports = styled.li`
}
}
`;
module.exports = Baseline(
Li
);

View File

@ -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
);

View File

@ -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)
);

View File

@ -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
);

View File

@ -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
);

View File

@ -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;
@ -58,4 +63,6 @@ Header.propTypes = {
children: React.PropTypes.node
};
module.exports = Header;
module.exports = Baseline(
Header
);

View File

@ -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) => (
<Item name='list-item' {...props}>
{props.children}
</Item>
));
module.exports = Baseline(
transferProps([
'collapsed',
'headed'
], (props) => (
<Item name='list-item' {...props}>
{props.children}
</Item>
))
);

View File

@ -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 = (
<Column
md={md(props)}
@ -47,3 +51,7 @@ module.exports = transferProps([
</View>
);
});
module.exports = Baseline(
Meta
);

View File

@ -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
);

View File

@ -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
);

View File

@ -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;
module.exports = Baseline(
Subtitle
);

View File

@ -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
);

View File

@ -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;

View File

@ -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 (
<StyledButton
name='close-button'
@ -55,4 +60,6 @@ AddMetricButton.propTypes = {
onClick: React.PropTypes.func,
};
module.exports = AddMetricButton;
module.exports = Baseline(
AddMetricButton
);

View File

@ -4,6 +4,7 @@ const moment = require('moment');
const Chart = require('chart.js');
const whisker = require('chartjs-chart-box-plot');
const constants = require('../../shared/constants');
const composers = require('../../shared/composers');
whisker(Chart);
@ -11,6 +12,10 @@ const {
colors
} = constants;
const {
Baseline
} = composers;
const {
default: styled
} = Styled;
@ -22,12 +27,9 @@ const Container = styled.div`
background-color: ${colors.base.white};
`;
const Canvas = styled.canvas`
`;
const Canvas = styled.canvas``;
class Graph extends React.Component {
componentDidMount() {
const {
yMax = 100,
@ -168,7 +170,6 @@ class Graph extends React.Component {
}
render() {
return (
<Container name='metric-body'>
<Canvas
@ -189,4 +190,6 @@ Graph.propTypes = {
yMin: React.PropTypes.number
};
module.exports = Graph;
module.exports = Baseline(
Graph
);

View File

@ -1,3 +1,4 @@
const composers = require('../../shared/composers');
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const React = require('react');
@ -11,6 +12,10 @@ const {
remcalc
} = fns;
const {
Baseline
} = composers;
const {
default: styled
} = Styled;
@ -36,4 +41,6 @@ Header.propTypes = {
children: React.PropTypes.node
};
module.exports = Header;
module.exports = Baseline(
Header
);

View File

@ -10,7 +10,8 @@ const {
} = fns;
const {
pseudoEl
pseudoEl,
Baseline
} = composers;
const {
@ -63,25 +64,23 @@ const Select = ({
required,
selected,
value
}) => {
return (
<SelectWrapper>
<StyledSelect
autoFocus={autoFocus}
disabled={disabled}
form={form}
id={id}
name={name}
onChange={onChange}
required={required}
selected={selected}
value={value}
>
{children}
</StyledSelect>
</SelectWrapper>
);
};
}) => (
<SelectWrapper>
<StyledSelect
autoFocus={autoFocus}
disabled={disabled}
form={form}
id={id}
name={name}
onChange={onChange}
required={required}
selected={selected}
value={value}
>
{children}
</StyledSelect>
</SelectWrapper>
);
Select.propTypes = {
autoFocus: React.PropTypes.bool,
@ -96,4 +95,6 @@ Select.propTypes = {
value: React.PropTypes.string
};
module.exports = Select;
module.exports = Baseline(
Select
);

View File

@ -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 (
<StyledButton
name='add-metric-button'
@ -71,4 +77,6 @@ AddMetricButton.propTypes = {
onClick: React.PropTypes.func,
};
module.exports = AddMetricButton;
module.exports = Baseline(
AddMetricButton
);

View File

@ -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,12 +11,16 @@ const {
remcalc
} = fns;
const {
Baseline
} = composers;
const {
default: styled
} = Styled;
//margin: ${remcalc(18)} ${remcalc(24)} !important;
module.exports = styled.h3`
const Title = styled.h3`
display: flex;
align-self: flex-start;
margin: ${remcalc(18)} auto ${remcalc(18)} ${remcalc(24)} !important;
@ -25,3 +30,7 @@ module.exports = styled.h3`
line-height: 1.5;
color: ${colors.base.white};
`;
module.exports = Baseline(
Title
);

View File

@ -1,5 +1,7 @@
const composers = require('../../shared/composers');
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const React = require('react');
const Styled = require('styled-components');
@ -12,6 +14,10 @@ const {
remcalc
} = fns;
const {
Baseline
} = composers;
const {
default: styled
} = Styled;
@ -36,4 +42,6 @@ View.propTypes = {
children: React.PropTypes.node
};
module.exports = View;
module.exports = Baseline(
View
);

View File

@ -4,6 +4,7 @@ const fns = require('../../shared/functions');
const React = require('react');
const Styled = require('styled-components');
const whisker = require('chartjs-chart-box-plot');
const composers = require('../../shared/composers');
whisker(Chart);
@ -11,6 +12,10 @@ const {
remcalc
} = fns;
const {
Baseline
} = composers;
const {
default: styled
} = Styled;
@ -112,4 +117,6 @@ Graph.propTypes = {
min: React.PropTypes.number
};
module.exports = Graph;
module.exports = Baseline(
Graph
);

View File

@ -1,3 +1,4 @@
const composers = require('../../shared/composers');
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const React = require('react');
@ -11,6 +12,10 @@ const {
remcalc
} = fns;
const {
Baseline
} = composers;
const {
default: styled
} = Styled;
@ -38,4 +43,6 @@ Meta.propTypes = {
children: React.PropTypes.node
};
module.exports = Meta;
module.exports = Baseline(
Meta
);

View File

@ -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 {
colors
} = constants;
const {
Baseline
} = composers;
const {
default: styled
} = Styled;
module.exports = styled.p`
const Subtitle = styled.p`
margin: 0;
text-align: right;
font-size: ${remcalc(12)};
@ -24,3 +29,7 @@ module.exports = styled.p`
font-stretch: normal;
color: ${colors.regular};
`;
module.exports = Baseline(
Subtitle
);

View File

@ -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.h3`
const Title = styled.h3`
margin: 0;
text-align: right;
font-size: ${remcalc(14)};
@ -24,3 +29,7 @@ module.exports = styled.h3`
color: ${colors.semibold};
margin-bottom: ${remcalc(3)} !important;
`;
module.exports = Baseline(
Title
);

View File

@ -1,3 +1,4 @@
const composers = require('../../shared/composers');
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const React = require('react');
@ -11,6 +12,10 @@ const {
remcalc
} = fns;
const {
Baseline
} = composers;
const {
default: styled
} = Styled;
@ -49,4 +54,6 @@ View.propTypes = {
children: React.PropTypes.node
};
module.exports = View;
module.exports = Baseline(
View
);

View File

@ -1,6 +1,6 @@
const fns = require('../../shared/functions');
const composers = require('../../shared/composers');
const constants = require('../../shared/constants');
const fns = require('../../shared/functions');
const React = require('react');
const Styled = require('styled-components');
@ -12,6 +12,10 @@ const {
remcalc
} = fns;
const {
Baseline
} = composers;
const {
default: styled
} = Styled;
@ -42,25 +46,19 @@ const StyledOverlay = styled.div`
z-index: 1;
`;
const Modal = (props) => {
if (!props.active) {
return null;
}
return (
<div>
<StyledOverlay
aria-label='overlay'
onClick={props.handleDismiss}
role='link'
tabIndex={-2}
/>
<StyledModal {...props}>
{props.children}
</StyledModal>
</div>
);
};
const Modal = (props) => !props.active ? null : (
<div>
<StyledOverlay
aria-label='overlay'
onClick={props.handleDismiss}
role='link'
tabIndex={-2}
/>
<StyledModal {...props}>
{props.children}
</StyledModal>
</div>
);
Modal.propTypes = {
active: React.PropTypes.bool,
@ -68,4 +66,6 @@ Modal.propTypes = {
handleDismiss: React.PropTypes.func
};
module.exports = Modal;
module.exports = Baseline(
Modal
);

View File

@ -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);
@ -55,7 +56,9 @@ const Notificaton = ({
type,
close
}) => {
const renderClose = close ? (<Close onClick={close} />) : null;
const renderClose = !close ? null : (
<Close onClick={close} />
);
return (
<StyledNotification
@ -63,8 +66,7 @@ const Notificaton = ({
style={style}
type={type}
>
{ renderClose }
{renderClose}
<StyledContent>
{children}
</StyledContent>
@ -80,4 +82,6 @@ Notificaton.propTypes = {
type: React.PropTypes.string
};
module.exports = Notificaton;
module.exports = Baseline(
Notificaton
);

View File

@ -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
);

View File

@ -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
);

View File

@ -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
);

View File

@ -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' ?
<SmallCard>{icon}</SmallCard> :
<LargeCard>{icon}</LargeCard>;
return size === 'small' ? (
<SmallCard>{icon}</SmallCard>
) : (
<LargeCard>{icon}</LargeCard>
);
};
PaymentCard.propTypes = {
@ -81,4 +86,6 @@ PaymentCard.propTypes = {
]).isRequired
};
module.exports = PaymentCard;
module.exports = Baseline(
PaymentCard
);

View File

@ -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
);

View File

@ -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
);

View File

@ -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 (
<RadioItem
aria-checked={checked}
aria-disabled={disabled}
onClick={onClick}
role='radio'
tabIndex={tabIndex}
>
{children}
</RadioItem>
);
};
}) => (
<RadioItem
aria-checked={checked}
aria-disabled={disabled}
onClick={onClick}
role='radio'
tabIndex={tabIndex}
>
{children}
</RadioItem>
);
Item.propTypes = {
checked: React.PropTypes.bool,
@ -70,4 +73,6 @@ Item.propTypes = {
tabIndex: React.PropTypes.number
};
module.exports = Item;
module.exports = Baseline(
Item
);

View File

@ -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 (
<StyledLabel style={style}>
<StyledInput
checked={checked}
defaultChecked={defaultChecked}
disabled={disabled}
form={form}
id={id}
name={name}
onChange={onChange}
readOnly={readOnly}
required={required}
selectionDirection={selectionDirection}
tabIndex={tabIndex}
type='radio'
value={value}
/>
<StyledSpan>
<StyledContent>
{children}
</StyledContent>
</StyledSpan>
</StyledLabel>
);
};
}) => (
<StyledLabel style={style}>
<StyledInput
checked={checked}
defaultChecked={defaultChecked}
disabled={disabled}
form={form}
id={id}
name={name}
onChange={onChange}
readOnly={readOnly}
required={required}
selectionDirection={selectionDirection}
tabIndex={tabIndex}
type='radio'
value={value}
/>
<StyledSpan>
<StyledContent>
{children}
</StyledContent>
</StyledSpan>
</StyledLabel>
);
Radio.propTypes = {
checked: React.PropTypes.bool,
@ -125,4 +127,6 @@ Radio.propTypes = {
value: React.PropTypes.string.isRequired
};
module.exports = Radio;
module.exports = Baseline(
Radio
);

View File

@ -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 (
<StyledRange
className={className}
onChange={onChange}
style={style}
type='range'
/>
);
};
}) => (
<StyledRange
className={className}
onChange={onChange}
style={style}
type='range'
/>
);
RangeSlider.propTypes = {
className: React.PropTypes.string,
@ -150,4 +149,6 @@ RangeSlider.propTypes = {
style: React.PropTypes.object
};
module.exports = RangeSlider;
module.exports = Baseline(
RangeSlider
);

View File

@ -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, {
* <row center top={['xs', 'sm']} first='lg' />
* ```
**/
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
);

View File

@ -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 (
<div style={style}>
<StyledLabel>
{label}
</StyledLabel>
<Select
autofocus
className={className}
disabled={disabled}
loadOptions={async ? options : ''}
multi={multi}
name={name}
onChange={onChange}
options={!async ? options : ''}
value={value}
/>
</div>
);
};
}) => (
<div style={style}>
<StyledLabel>
{label}
</StyledLabel>
<Select
autofocus
className={className}
disabled={disabled}
loadOptions={async ? options : ''}
multi={multi}
name={name}
onChange={onChange}
options={!async ? options : ''}
value={value}
/>
</div>
);
SelectCustom.propTypes = {
async: React.PropTypes.bool,
@ -81,4 +83,6 @@ SelectCustom.propTypes = {
value: React.PropTypes.string
};
module.exports = SelectCustom;
module.exports = Baseline(
SelectCustom
);

View File

@ -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)
);

View File

@ -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 (
<StyledTableWrapper style={style}>
<StyledTitle>{title}</StyledTitle>
<TableContent
columns={columns}
data={data}
/>
</StyledTableWrapper>
);
};
title
}) => (
<StyledTableWrapper style={style}>
<StyledTitle>{title}</StyledTitle>
<TableContent
columns={columns}
data={data}
/>
</StyledTableWrapper>
);
Table.propTypes = {
children: React.PropTypes.node,
@ -45,4 +45,6 @@ Table.propTypes = {
title: React.PropTypes.string,
};
module.exports = Table;
module.exports = Baseline(
Table
);

View File

@ -7,14 +7,12 @@ const {
const Table = require('./');
const memberDetail = (name) => {
return (
<div>
<h4>{name}</h4>
<small>{name}@biztech.com</small>
</div>
);
};
const memberDetail = (name) => (
<div>
<h4>{name}</h4>
<small>{name}@biztech.com</small>
</div>
);
const columns = [{
title: 'Memeber',

View File

@ -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 <Row dataItem={data[index]} key={index} />;
});
const rows = columns.map((column, index) => (
<Row dataItem={data[index]} key={index} />
));
return (
<tbody>
@ -22,4 +27,6 @@ TableBody.propTypes = {
data: React.PropTypes.array
};
module.exports = TableBody;
module.exports = Baseline(
TableBody
);

View File

@ -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 (
<StyledTable>
{hasHeader ? <TableHeader columns={columns} /> : null}
{hasBody ? <TableBody columns={columns} data={data} /> : null}
</StyledTable>
);
};
}) => (
<StyledTable>
{hasHeader ? <TableHeader columns={columns} /> : null}
{hasBody ? <TableBody columns={columns} data={data} /> : null}
</StyledTable>
);
TableContent.propTypes = {
columns: React.PropTypes.array,
@ -36,4 +38,6 @@ TableContent.propTypes = {
width: React.PropTypes.string,
};
module.exports = TableContent;
module.exports = Baseline(
TableContent
);

View File

@ -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 (
<StyledTableHeadItem
key={i}
mdWidth={column.width || fallBackWidth}
>
{column.title}
</StyledTableHeadItem>
);
});
const titles = columns.map((column, i) => (
<StyledTableHeadItem
key={i}
mdWidth={column.width || fallBackWidth}
>
{column.title}
</StyledTableHeadItem>
));
return (
<StyledTableHead>
@ -67,4 +69,6 @@ TableHeader.propTypes = {
columns: React.PropTypes.array
};
module.exports = TableHeader;
module.exports = Baseline(
TableHeader
);

View File

@ -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 <StyledTableItem key={i}>{value}</StyledTableItem>;
});
const rowItems = Object.keys(dataItem).map((item, i) => (
<StyledTableItem key={i}>{dataItem[item]}</StyledTableItem>
));
return (
<StyledRow>
@ -55,4 +56,6 @@ Row.propTypes = {
dataItem: React.PropTypes.object
};
module.exports = Row;
module.exports = Baseline(
Row
);

View File

@ -8,7 +8,8 @@ const {
} = Styled;
const {
clearfix
clearfix,
Baseline
} = composers;
const StyledTableBody = styled.article`
@ -20,10 +21,11 @@ const StyledTableBody = styled.article`
const TableBody = ({
children
}) => {
const itemCount = children.length;
if (itemCount <= 1) return;
if (itemCount <= 1) {
return null;
}
return (
<StyledTableBody itemCount={itemCount}>
@ -36,4 +38,6 @@ TableBody.propTypes = {
children: React.PropTypes.node
};
module.exports = StyledTableBody;
module.exports = Baseline(
StyledTableBody
);

View File

@ -14,7 +14,8 @@ const {
} = Styled;
const {
clearfix
clearfix,
Baseline
} = composers;
const StyledTableHead = styled.header`
@ -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 (
<StyledTableHead itemCount={itemCount}>
@ -55,4 +57,6 @@ TableHead.propTypes = {
children: React.PropTypes.node
};
module.exports = TableHead;
module.exports = Baseline(
TableHead
);

View File

@ -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 (
<Item className="table-item">
{children}
</Item>
);
};
}) => (
<Item className="table-item">
{children}
</Item>
);
TableItem.propTypes = {
children: React.PropTypes.node
};
module.exports = TableItem;
module.exports = Baseline(
TableItem
);

View File

@ -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 (
<StyledTableRow itemCount={itemCount}>
{children}
</StyledTableRow>
);
};
}) => (
<StyledTableRow itemCount={children.length}>
{children}
</StyledTableRow>
);
TableRow.propTypes = {
children: React.PropTypes.node
};
module.exports = TableRow;
module.exports = Baseline(
TableRow
);

View File

@ -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
}) => (
<StyledTableWrapper style={style}>
{children}
@ -33,4 +38,6 @@ Table.propTypes = {
title: React.PropTypes.string,
};
module.exports = Table;
module.exports = Baseline(
Table
);

View File

@ -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
);

View File

@ -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
);

View File

@ -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
);

View File

@ -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
);

View File

@ -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 (
<StyledList
arrowPosition={arrowPosition}
className={className}
styles={style}
>
{children}
</StyledList>
);
};
}) => (
<StyledList
arrowPosition={arrowPosition}
className={className}
style={style}
>
{children}
</StyledList>
);
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
);

View File

@ -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
);

View File

@ -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
);

View File

@ -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
);

View File

@ -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
);

View File

@ -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
);

View File

@ -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
);

View File

@ -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
);

View File

@ -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
);

View File

@ -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
);

View File

@ -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
);

View File

@ -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%;
@ -58,5 +105,5 @@ module.exports = {
&:after {
clear:both;
}
`,
`
};

View File

@ -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';

View File

@ -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

View File

@ -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"