From a4743bd80e45f77cf8e64c8d728ac02cb0d95c4b Mon Sep 17 00:00:00 2001 From: JUDIT GRESKOVITS Date: Mon, 20 Feb 2017 16:15:36 +0000 Subject: [PATCH] re-write forms with react-broadcast --- frontend/package.json | 12 +- .../src/components/create-monitor/index.js | 67 +++--- frontend/src/components/navigation/org.js | 4 +- frontend/src/components/new-project/index.js | 26 +-- .../src/components/new-project/new-billing.js | 82 ++++--- frontend/src/components/people-list/invite.js | 53 ++--- .../src/components/people-list/table/index.js | 22 +- frontend/src/components/section/index.js | 2 +- frontend/src/containers/metrics/monitors.js | 10 +- .../src/containers/new-project/billing.js | 13 +- .../src/containers/new-project/new-billing.js | 13 +- .../src/containers/new-project/new-project.js | 13 +- frontend/src/containers/org/people.js | 14 +- frontend/src/containers/project/people.js | 12 +- frontend/src/index.js | 2 +- frontend/src/utils/form/normalize.js | 72 ++++++ frontend/yarn.lock | 210 +++++++++-------- package.json | 1 + spikes/form/redux-form/client/app.js | 1 + .../redux-form/client/form/form-normalize.js | 86 +++++++ spikes/form/redux-form/client/form/form.js | 15 +- .../redux-form/client/form/normalizePhone.js | 24 ++ spikes/form/redux-form/client/root.js | 2 + ui/.storybook/config.js | 2 +- ui/.storybook/head.html | 1 - ui/package.json | 13 +- ui/src/components/baseline-grid/story.js | 2 +- ui/src/components/checkbox/index.js | 127 ---------- ui/src/components/checkbox/readme.md | 40 ---- ui/src/components/checkbox/story.js | 18 -- ui/src/components/form/base-input.js | 152 ++++++++++++ ui/src/components/form/checkbox.js | 15 ++ ui/src/components/form/fieldset.js | 31 +++ ui/src/components/form/group.js | 93 ++++++++ ui/src/components/form/index.js | 10 + ui/src/components/form/input.js | 14 ++ ui/src/components/form/label-row.js | 30 --- ui/src/components/form/label.js | 60 +++-- ui/src/components/form/{view.js => legend.js} | 6 +- ui/src/components/form/meta.js | 128 ++++++++++ ui/src/components/form/msg.js | 38 --- ui/src/components/form/outlet.js | 73 ------ ui/src/components/form/radio.js | 35 +++ ui/src/components/form/select.js | 14 ++ ui/src/components/form/toggle.js | 178 ++++++++++++++ ui/src/components/input/index.js | 89 ------- ui/src/components/input/readme.md | 60 ----- ui/src/components/input/story.js | 42 ---- ui/src/components/label/index.js | 32 +++ ui/src/components/radio-group/index.js | 160 ------------- ui/src/components/radio-group/readme.md | 35 --- ui/src/components/radio-group/story.js | 27 --- ui/src/components/radio/readme.md | 43 ---- ui/src/components/radio/story.js | 20 -- ui/src/components/row/index.js | 31 ++- ui/src/components/select/index.js | 102 -------- ui/src/components/select/readme.md | 60 ----- ui/src/components/select/story.js | 80 ------- ui/src/components/table-data-table/index.js | 4 +- ui/src/components/table-simple-table/table.js | 6 +- ui/src/components/textarea/readme.md | 60 ----- ui/src/components/textarea/story.js | 24 -- ui/src/components/topology/story-helper.js | 4 +- ui/src/index.js | 13 +- ui/src/shared/is.js | 9 + ui/test/index.js | 8 +- ui/yarn.lock | 221 +++++++++++------- yarn.lock | 9 +- 68 files changed, 1452 insertions(+), 1523 deletions(-) create mode 100644 frontend/src/utils/form/normalize.js create mode 100644 spikes/form/redux-form/client/form/form-normalize.js create mode 100644 spikes/form/redux-form/client/form/normalizePhone.js delete mode 100644 ui/.storybook/head.html delete mode 100644 ui/src/components/checkbox/index.js delete mode 100644 ui/src/components/checkbox/readme.md delete mode 100644 ui/src/components/checkbox/story.js create mode 100644 ui/src/components/form/base-input.js create mode 100644 ui/src/components/form/checkbox.js create mode 100644 ui/src/components/form/fieldset.js create mode 100644 ui/src/components/form/group.js create mode 100644 ui/src/components/form/index.js create mode 100644 ui/src/components/form/input.js delete mode 100644 ui/src/components/form/label-row.js rename ui/src/components/form/{view.js => legend.js} (85%) create mode 100644 ui/src/components/form/meta.js delete mode 100644 ui/src/components/form/msg.js delete mode 100644 ui/src/components/form/outlet.js create mode 100644 ui/src/components/form/radio.js create mode 100644 ui/src/components/form/select.js create mode 100644 ui/src/components/form/toggle.js delete mode 100644 ui/src/components/input/index.js delete mode 100644 ui/src/components/input/readme.md delete mode 100644 ui/src/components/input/story.js create mode 100644 ui/src/components/label/index.js delete mode 100644 ui/src/components/radio-group/index.js delete mode 100644 ui/src/components/radio-group/readme.md delete mode 100644 ui/src/components/radio-group/story.js delete mode 100644 ui/src/components/radio/readme.md delete mode 100644 ui/src/components/radio/story.js delete mode 100644 ui/src/components/select/index.js delete mode 100644 ui/src/components/select/readme.md delete mode 100644 ui/src/components/select/story.js delete mode 100644 ui/src/components/textarea/readme.md delete mode 100644 ui/src/components/textarea/story.js create mode 100644 ui/src/shared/is.js diff --git a/frontend/package.json b/frontend/package.json index a6e4e812..84bafb95 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -38,7 +38,7 @@ "react-a11y": "^0.3.3", "react-dom": "^15.4.2", "react-intl": "^2.2.3", - "react-intl-redux": "^0.3.0", + "react-intl-redux": "^0.4.0", "react-redux": "^5.0.2", "react-router-dom": "4.0.0-beta.4", "react-select": "^1.0.0-rc.3", @@ -59,7 +59,7 @@ "url-loader": "^0.5.7" }, "devDependencies": { - "ava": "^0.18.1", + "ava": "^0.18.2", "babel-cli": "^6.23.0", "babel-core": "^6.23.1", "babel-eslint": "^7.1.1", @@ -81,14 +81,14 @@ "babel-register": "^6.23.0", "case-sensitive-paths-webpack-plugin": "^1.1.4", "enzyme": "^2.7.1", - "eslint": "^3.15.0", + "eslint": "^3.16.0", "eslint-config-react-app": "^0.5.1", "eslint-config-semistandard": "^7.0.0", "eslint-config-standard": "^6.2.1", "eslint-loader": "^1.6.1", "eslint-plugin-babel": "^4.0.1", "eslint-plugin-jsx-a11y": "^4.0.0", - "eslint-plugin-promise": "^3.4.1", + "eslint-plugin-promise": "^3.4.2", "eslint-plugin-react": "^6.10.0", "eslint-plugin-standard": "^2.0.1", "file-loader": "^0.10.0", @@ -102,14 +102,14 @@ "react-dev-utils": "^0.5.0", "redux-ava": "^2.2.0", "simple-mock": "^0.7.3", - "stylelint": "^7.8.0", + "stylelint": "^7.9.0", "stylelint-config-standard": "^16.0.0", "stylelint-processor-styled-components": "^0.0.4", "tap-xunit": "^1.7.0", "thenify": "^3.2.1", "url-loader": "^0.5.7", "webpack": "^2.2.1", - "webpack-dev-server": "^2.3.0", + "webpack-dev-server": "^2.4.1", "webpack-manifest-plugin": "^1.1.0", "webpack-shell-plugin": "^0.5.0" }, diff --git a/frontend/src/components/create-monitor/index.js b/frontend/src/components/create-monitor/index.js index 64cb45a0..83bb4a58 100644 --- a/frontend/src/components/create-monitor/index.js +++ b/frontend/src/components/create-monitor/index.js @@ -1,18 +1,19 @@ -const ReduxForm = require('redux-form'); const React = require('react'); const ReactIntl = require('react-intl'); const Styled = require('styled-components'); +const Form = require('@ui/components/form'); const Button = require('@ui/components/button'); const Column = require('@ui/components/column'); -const Input = require('@ui/components/input'); const fns = require('@ui/shared/functions'); const Row = require('@ui/components/row'); -const Select = require('@ui/components/select'); + const { - Field -} = ReduxForm; + FormGroup, + Select, + Input +} = Form; const { FormattedMessage @@ -75,27 +76,33 @@ const CreateMonitor = ({ - - - - - + + + - + + + - - - + + + @@ -103,11 +110,13 @@ const CreateMonitor = ({ - - - + + +

@@ -118,7 +127,9 @@ const CreateMonitor = ({

- + + + diff --git a/frontend/src/components/navigation/org.js b/frontend/src/components/navigation/org.js index 30ea213f..18accd13 100644 --- a/frontend/src/components/navigation/org.js +++ b/frontend/src/components/navigation/org.js @@ -147,4 +147,6 @@ const mapStateToProps = (state) => ({ orgs: orgsSelector(state) }); -module.exports = connect(mapStateToProps)(OrgNavigation); +module.exports = connect( + mapStateToProps +)(OrgNavigation); diff --git a/frontend/src/components/new-project/index.js b/frontend/src/components/new-project/index.js index c4dcf705..63f91b86 100644 --- a/frontend/src/components/new-project/index.js +++ b/frontend/src/components/new-project/index.js @@ -1,22 +1,23 @@ const React = require('react'); -const ReduxForm = require('redux-form'); const ReactIntl = require('react-intl'); const Styled = require('styled-components'); const constants = require('@ui/shared/constants'); const fns = require('@ui/shared/functions'); - -const Input = require('@ui/components/input'); const Button = require('@ui/components/button'); const BaseElements = require('@ui/components/base-elements'); +const Form = require('@ui/components/form'); const { - H2, + H2 } = BaseElements; const { - Field -} = ReduxForm; + FormGroup, + FormLabel, + FormMeta, + Input +} = Form; const { FormattedMessage @@ -51,7 +52,7 @@ const Description = styled.p` max-width: ${remcalc(380)}; `; -const ProjectNameInput = styled(Input)` +const ProjectNameFormGroup = styled(FormGroup)` max-width: ${remcalc(380)}; margin-bottom: ${remcalc(16)}; `; @@ -88,12 +89,11 @@ const CreateProject = (props) => { - + + Project name + + + diff --git a/frontend/src/components/new-project/new-billing.js b/frontend/src/components/new-project/new-billing.js index c939b803..5e17d6d8 100644 --- a/frontend/src/components/new-project/new-billing.js +++ b/frontend/src/components/new-project/new-billing.js @@ -1,22 +1,24 @@ const React = require('react'); -const ReduxForm = require('redux-form'); const ReactIntl = require('react-intl'); const Styled = require('styled-components'); const constants = require('@ui/shared/constants'); const fns = require('@ui/shared/functions'); - -const Input = require('@ui/components/input'); -const Button = require('@ui/components/button'); const BaseElements = require('@ui/components/base-elements'); +const normalize = require('@root/utils/form/normalize'); +const Form = require('@ui/components/form'); +const Button = require('@ui/components/button'); const { - H2, + H2 } = BaseElements; const { - Field -} = ReduxForm; + FormGroup, + FormLabel, + FormMeta, + Input +} = Form; const { FormattedMessage @@ -34,6 +36,12 @@ const { remcalc } = fns; +const { + normalizeCardNumber, + normalizeCardCVV, + normalizeCardExpiry +} = normalize; + const Container = styled.div` padding: ${remcalc(96)} ${remcalc(40)}; `; @@ -51,17 +59,17 @@ const Description = styled.p` max-width: ${remcalc(380)}; `; -const LongInput = styled(Input)` +const LongFormGroup = styled(FormGroup)` max-width: ${remcalc(380)}; margin-bottom: ${remcalc(16)}; `; -const ShortInputs = styled.div` +const ShortFormGroups = styled.div` display: flex; flex-flow: row; `; -const ShortInput = styled(Input)` +const ShortFormGroup = styled(FormGroup)` max-width: ${remcalc(184)}; margin-right: ${remcalc(12)} margin-bottom: ${remcalc(16)}; @@ -99,32 +107,40 @@ const CreateBilling = (props) => { - - - + Card number + + + + + - + CVV Code + + + + - - + normalize={normalizeCardExpiry} + reduxForm + > + Expiry date + + + + + + Name on card + + + diff --git a/frontend/src/components/people-list/invite.js b/frontend/src/components/people-list/invite.js index aa9b9576..d0889839 100644 --- a/frontend/src/components/people-list/invite.js +++ b/frontend/src/components/people-list/invite.js @@ -1,37 +1,57 @@ const React = require('react'); -const styled = require('styled-components'); +const Styled = require('styled-components'); const Row = require('@ui/components/row'); const Column = require('@ui/components/column'); const Button = require('@ui/components/button'); const { - default: Styled -} = styled; + default: styled +} = Styled; // TOOD: Require from UI Components - causes issue ATM. const Select = require('react-select'); require('react-select/dist/react-select.css'); -const SelectWrapper = Styled.div` - +const SelectWrapper = styled.div` + .Select-menu-outer { margin-top: 48px; } - + .Select-arrow { position: relative; top: -4px; } `; +const StyledSubmitButton = styled(Button)` + float: right; + width: 20%; +`; + +const StyledInlineButton = styled(Button)` + display: inline-block; +`; + +// TODO: When removing react-select css +// change this to styled-components format +const InputStyle = { + float: 'left', + width: '75%', + minHeight: '50px', + marginBottom: '20px', + paddingTop: '10px' +}; + + const Invite = React.createClass({ propTypes: { addMemember: React.PropTypes.func, handleToggle: React.PropTypes.func, parentIndex: React.PropTypes.number, - platformMembers: React.PropTypes.array, + platformMembers: React.PropTypes.array }, getInitialState() { @@ -74,25 +94,6 @@ const Invite = React.createClass({ handleToggle, } = this.props; - // TODO: When removing react-select css - // change this to styled-components format - const InputStyle = { - float: 'left', - width: '75%', - minHeight: '50px', - marginBottom: '20px', - paddingTop: '10px' - }; - - const StyledSubmitButton = styled(Button)` - float: right; - width: 20%; - `; - - const StyledInlineButton = styled(Button)` - display: inline-block; - `; - const selectData = this.getFormattedPlatformMembers(); const handleSelectChange = (v) => { diff --git a/frontend/src/components/people-list/table/index.js b/frontend/src/components/people-list/table/index.js index ed1f26bb..e65efd74 100644 --- a/frontend/src/components/people-list/table/index.js +++ b/frontend/src/components/people-list/table/index.js @@ -2,7 +2,7 @@ const React = require('react'); const Styled = require('styled-components'); const Table = require('@ui/components/table-data-table'); -const Checkbox = require('@ui/components/checkbox'); +const Form = require('@ui/components/form'); const fns = require('@ui/shared/functions'); @@ -18,8 +18,12 @@ const { remcalc } = fns; -const PeopleTable = (props) => { +const { + Checkbox, + FormGroup +} = Form; +const PeopleTable = (props) => { const { handleRoleTooltip, handleStatusTooltip, @@ -31,7 +35,11 @@ const PeopleTable = (props) => { } = props; const columns = [{ - title: , + title: ( + + + + ), width: '5%' }, { title: 'Member', @@ -81,7 +89,11 @@ const PeopleTable = (props) => { ); return { - checkbox: , + checkbox: ( + + + + ), name: person.name, status: status(person), role: role(person), @@ -113,4 +125,4 @@ PeopleTable.propTypes = { removeMember: React.PropTypes.func, }; -module.exports = PeopleTable; \ No newline at end of file +module.exports = PeopleTable; diff --git a/frontend/src/components/section/index.js b/frontend/src/components/section/index.js index 11650821..f724f589 100644 --- a/frontend/src/components/section/index.js +++ b/frontend/src/components/section/index.js @@ -34,7 +34,7 @@ const StyledHorizontalListItem = styled(Li)` ${breakpoints.smallOnly` display: block; `} - + & + li { margin-left: ${remcalc(21)}; } diff --git a/frontend/src/containers/metrics/monitors.js b/frontend/src/containers/metrics/monitors.js index 7220ac11..1a4ed035 100644 --- a/frontend/src/containers/metrics/monitors.js +++ b/frontend/src/containers/metrics/monitors.js @@ -1,5 +1,5 @@ const React = require('react'); -const ReduxForm = require('redux-form'); +// const ReduxForm = require('redux-form'); const ReactRedux = require('react-redux'); const actions = require('@state/actions'); @@ -8,9 +8,9 @@ const ManageMonitor = require('@components/manage-monitor'); const Monitors = require('@components/monitors'); const selectors = require('@state/selectors'); -const { +/*const { reduxForm -} = ReduxForm; +} = ReduxForm;*/ const { connect @@ -25,9 +25,9 @@ const { switchMonitorViewPage } = actions; -const ConnectedCreateMonitor = reduxForm({ +const ConnectedCreateMonitor = CreateMonitor; /*reduxForm({ form: 'create-monitor' -})(CreateMonitor); +})(CreateMonitor);*/ // const ConnectedCreateMonitor = reduxForm()(CreateMonitor); const MetricMonitors = (props) => { diff --git a/frontend/src/containers/new-project/billing.js b/frontend/src/containers/new-project/billing.js index 630edc42..179cb5be 100644 --- a/frontend/src/containers/new-project/billing.js +++ b/frontend/src/containers/new-project/billing.js @@ -34,7 +34,7 @@ const Billing = (props) => { const { cards, handleNewProject, - router, + pushRoute, org } = props; @@ -45,11 +45,11 @@ const Billing = (props) => { values, org }); - router.push(`/${org.id}/projects`); + pushRoute(`/${org.id}/projects`); }; const onNewBilling = (evt) => - router.push(`/${org.id}/new-project/new-billing`); + pushRoute(`/${org.id}/new-project/new-billing`); return ( ({ // TODO add cards - as above org: orgByIdSelector(match.params.org)(state), - router: state.app.router + pushRoute: push }); const mapDispatchToProps = (dispatch) => ({ diff --git a/frontend/src/containers/new-project/new-billing.js b/frontend/src/containers/new-project/new-billing.js index 770268a9..22d00530 100644 --- a/frontend/src/containers/new-project/new-billing.js +++ b/frontend/src/containers/new-project/new-billing.js @@ -31,19 +31,19 @@ const NewBilling = (props) => { const { handleNewProject, - router, + pushRoute, org } = props; const onBack = (evt) => - router.push(`/${org.id}/new-project/billing`); + pushRoute(`/${org.id}/new-project/billing`); const onSubmit = (values) => { handleNewProject({ values, org }); - router.push(`/${org.id}/projects`); + pushRoute(`/${org.id}/projects`); }; return ( @@ -57,17 +57,18 @@ const NewBilling = (props) => { NewBilling.propTypes = { handleNewProject: React.PropTypes.func.isRequired, org: PropTypes.org.isRequired, - router: React.PropTypes.object + pushRoute: React.PropTypes.func }; const mapStateToProps = (state, { match = { params: {} - } + }, + push }) => ({ // TODO add cards - as above org: orgByIdSelector(match.params.org)(state), - router: state.app.router + pushRoute: push }); const mapDispatchToProps = (dispatch) => ({ diff --git a/frontend/src/containers/new-project/new-project.js b/frontend/src/containers/new-project/new-project.js index 11d4f404..d52ba5ee 100644 --- a/frontend/src/containers/new-project/new-project.js +++ b/frontend/src/containers/new-project/new-project.js @@ -27,14 +27,14 @@ const NewProject = (props) => { const { org, - push + pushRoute } = props; const onCancel = (values) => - push(`/${org.id}/projects`); + pushRoute(`/${org.id}/projects`); const onSubmit = (values) => - push(`/${org.id}/new-project/billing`); + pushRoute(`/${org.id}/new-project/billing`); return ( { NewProject.propTypes = { org: PropTypes.org.isRequired, - push: React.PropTypes.func + pushRoute: React.PropTypes.func }; // TODO we'll need to know whether there any cards // otherwise go to new billing straight away const mapStateToProps = (state, { match = { params: {} - } + }, + push }) => ({ org: orgByIdSelector(match.params.org)(state), - router: state.app.router + pushRoute: push }); const mapDispatchToProps = (dispatch) => ({}); diff --git a/frontend/src/containers/org/people.js b/frontend/src/containers/org/people.js index c26799f8..1a968f05 100644 --- a/frontend/src/containers/org/people.js +++ b/frontend/src/containers/org/people.js @@ -48,14 +48,16 @@ const mapStateToProps = (state, { const mapDispatchToProps = (dispatch) => ({ addMemember: (member, callback) => dispatch(addMemberToOrg(member, callback)), - handleToggle: () => dispatch(orgHandleInviteToggle()), - handleStatusTooltip: (id) => dispatch(orgHandlePeopleStatusTooltip(id)), - handleRoleTooltip: (id) => dispatch(orgHandlePeopleRoleTooltip(id)), + handleToggle: () => + dispatch(orgHandleInviteToggle()), + handleStatusTooltip: (id) => + dispatch(orgHandlePeopleStatusTooltip(id)), + handleRoleTooltip: (id) => + dispatch(orgHandlePeopleRoleTooltip(id)), handleMemberUpdate: (updatedMember) => - dispatch(orgHandleMemberUpdate(updatedMember)), + dispatch(orgHandleMemberUpdate(updatedMember)), removeMember: (removeData) => - dispatch(orgRemoveMember(removeData)), - + dispatch(orgRemoveMember(removeData)) }); module.exports = connect( diff --git a/frontend/src/containers/project/people.js b/frontend/src/containers/project/people.js index 2717b740..123fb346 100644 --- a/frontend/src/containers/project/people.js +++ b/frontend/src/containers/project/people.js @@ -43,14 +43,16 @@ const mapStateToProps = (state, { const mapDispatchToProps = (dispatch) => ({ addMemember: (member, callback) => dispatch(addMemberToProject(member, callback)), - handleToggle: () => dispatch(projectHandleInviteToggle()), - handleStatusTooltip: (id) => dispatch(projectHandlePeopleStatusTooltip(id)), - handleRoleTooltip: (id) => dispatch(projectHandlePeopleRoleTooltip(id)), + handleToggle: () => + dispatch(projectHandleInviteToggle()), + handleStatusTooltip: (id) => + dispatch(projectHandlePeopleStatusTooltip(id)), + handleRoleTooltip: (id) => + dispatch(projectHandlePeopleRoleTooltip(id)), handleMemberUpdate: (updatedMember) => dispatch(projectHandleMemberUpdate(updatedMember)), removeMember: (removeData) => - dispatch(projectRemoveMember(removeData)), - + dispatch(projectRemoveMember(removeData)) }); module.exports = connect( diff --git a/frontend/src/index.js b/frontend/src/index.js index f4682985..eb9aeee1 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -16,4 +16,4 @@ const render = () => { ); }; -render(); +render(); \ No newline at end of file diff --git a/frontend/src/utils/form/normalize.js b/frontend/src/utils/form/normalize.js new file mode 100644 index 00000000..63444b3d --- /dev/null +++ b/frontend/src/utils/form/normalize.js @@ -0,0 +1,72 @@ +const numbers = (value) => value.replace(/[^\d]/g, ''); + +const normalizeCardNumber = (value, previousValue) => { + + if(!value) { + return value; + } + + const n = numbers(value); + if (!previousValue || value.length > previousValue.length) { + if (n.length === 4) { + return n + '-'; + } + if (n.length === 8) { + return n.slice(0, 4) + '-' + n.slice(4) + '-'; + } + if (n.length === 12) { + return n.slice(0, 4) + '-' + n.slice(4, 8) + '-' + n.slice(8); + } + } + if (n.length <= 4) { + return n; + } + if (n.length <= 8) { + return n.slice(0, 4) + '-' + n.slice(4); + } + if (n.length <= 12) { + return n.slice(0, 4) + '-' + n.slice(4, 8) + '-' + n.slice(8); + } + return n.slice(0, 4) + '-' + n.slice(4, 8) + '-' + + n.slice(8, 12) + '-' + n.slice(12, 16); +}; + +const normalizeCardCVV = (value, previousValue) => { + + if(!value) { + return value; + } + + const n = numbers(value); + + if(n.length > 3) { + return n.slice(0, 3); + } + + return n; +}; + +const normalizeCardExpiry = (value, previousValue) => { + + if(!value) { + return value; + } + + const n = numbers(value); + + if (!previousValue || value.length > previousValue.length) { + if (n.length === 2) { + return n + '/'; + } + } + if (n.length <= 2) { + return n; + } + return n.slice(0, 2) + '/' + n.slice(2, 4); +}; + +module.exports = { + normalizeCardNumber, + normalizeCardCVV, + normalizeCardExpiry +}; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 813bb6ab..5dc21db4 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -25,17 +25,19 @@ babel-plugin-espower "^2.3.2" package-hash "^1.2.0" -"@ava/pretty-format@^1.0.0": - version "1.0.2" - resolved "https://registry.yarnpkg.com/@ava/pretty-format/-/pretty-format-1.0.2.tgz#e3a90465cc014bf542036555e5ec9796031db858" +"@ava/pretty-format@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@ava/pretty-format/-/pretty-format-1.1.0.tgz#d0a57d25eb9aeab9643bdd1a030642b91c123e28" dependencies: ansi-styles "^2.2.1" + esutils "^2.0.2" "@tomgco/joyent-portal-ui@alpha": - version "0.0.1-706" - resolved "https://registry.yarnpkg.com/@tomgco/joyent-portal-ui/-/joyent-portal-ui-0.0.1-706.tgz#78974e23d073898e3cd4e3621a63dcc116bfd8ef" + version "0.0.1-793" + resolved "https://registry.yarnpkg.com/@tomgco/joyent-portal-ui/-/joyent-portal-ui-0.0.1-793.tgz#30ab6bebe1b155722ecfeb50b757410f2f53b2f6" 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" @@ -323,8 +325,8 @@ async@^1.4.0, async@^1.4.2, async@^1.5.2: resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" async@^2.1.2: - version "2.1.4" - resolved "https://registry.yarnpkg.com/async/-/async-2.1.4.tgz#2d2160c7788032e4dd6cbe2502f1f9a2c8f6cde4" + version "2.1.5" + resolved "https://registry.yarnpkg.com/async/-/async-2.1.5.tgz#e587c68580994ac67fc56ff86d3ac56bdbe810bc" dependencies: lodash "^4.14.0" @@ -341,14 +343,14 @@ auto-bind@^1.1.0: resolved "https://registry.yarnpkg.com/auto-bind/-/auto-bind-1.1.0.tgz#93b864dc7ee01a326281775d5c75ca0a751e5961" autoprefixer@^6.0.0, autoprefixer@^6.3.1: - version "6.7.3" - resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.3.tgz#bc2c28018e9a226f24f0ded36ce81014dccec817" + version "6.7.4" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.4.tgz#b4405a263325c04a7c2b1c86fc603ad7bbfe01c6" dependencies: - browserslist "^1.7.2" - caniuse-db "^1.0.30000623" + browserslist "^1.7.4" + caniuse-db "^1.0.30000624" normalize-range "^0.1.2" num2fraction "^1.2.2" - postcss "^5.2.13" + postcss "^5.2.14" postcss-value-parser "^3.2.3" ava-init@^0.2.0: @@ -361,13 +363,13 @@ ava-init@^0.2.0: read-pkg-up "^2.0.0" write-pkg "^2.0.0" -ava@^0.18.1: - version "0.18.1" - resolved "https://registry.yarnpkg.com/ava/-/ava-0.18.1.tgz#5f47e09642b397aba471e09ffc1e5a59c670a52d" +ava@^0.18.2: + version "0.18.2" + resolved "https://registry.yarnpkg.com/ava/-/ava-0.18.2.tgz#79253d1636077034a2780bb55b5c3e6c3d7f312f" dependencies: "@ava/babel-preset-stage-4" "^1.0.0" "@ava/babel-preset-transform-test-files" "^2.0.0" - "@ava/pretty-format" "^1.0.0" + "@ava/pretty-format" "^1.1.0" arr-flatten "^1.0.1" array-union "^1.0.1" array-uniq "^1.0.2" @@ -432,7 +434,7 @@ ava@^0.18.1: resolve-cwd "^1.0.0" slash "^1.0.0" source-map-support "^0.4.0" - stack-utils "^0.4.0" + stack-utils "^1.0.0" strip-ansi "^3.0.1" strip-bom-buf "^1.0.0" time-require "^0.1.2" @@ -1407,11 +1409,11 @@ browserify-zlib@^0.1.4: dependencies: pako "~0.2.0" -browserslist@^1.0.1, browserslist@^1.1.1, browserslist@^1.1.3, browserslist@^1.4.0, browserslist@^1.5.2, browserslist@^1.7.2: - version "1.7.3" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.3.tgz#25ead9c917b278ad668b83f39c8025697797b2ab" +browserslist@^1.0.1, browserslist@^1.1.1, browserslist@^1.1.3, browserslist@^1.4.0, browserslist@^1.5.2, browserslist@^1.7.4: + version "1.7.4" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.4.tgz#56a12da876f787223743a866224ccd8f97014628" dependencies: - caniuse-db "^1.0.30000623" + caniuse-db "^1.0.30000624" electron-to-chromium "^1.2.2" buf-compare@^1.0.0: @@ -1497,6 +1499,13 @@ callsites@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/callsites/-/callsites-0.2.0.tgz#afab96262910a7f33c19a5775825c69f34e350ca" +camel-case@^3.0.0: + 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" @@ -1525,9 +1534,9 @@ caniuse-api@^1.5.2: lodash.memoize "^4.1.0" lodash.uniq "^4.3.0" -caniuse-db@^1.0.30000187, caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000623: - version "1.0.30000623" - resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000623.tgz#6e9dc4385d00a8f587efbb23fcbed7916f186e5d" +caniuse-db@^1.0.30000187, caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000624: + version "1.0.30000624" + resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000624.tgz#554b87547895e36f5fe128f4b7448a2ea5bf2213" capture-stack-trace@^1.0.0: version "1.0.0" @@ -1598,8 +1607,8 @@ chartjs-color-string@^0.4.0: color-name "^1.0.0" chartjs-color@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.0.0.tgz#7f60c7256589b24914814ece757659117381e35b" + version "2.1.0" + resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.1.0.tgz#9c39ac830ccd98996ae80c9f11086ff12c98a756" dependencies: chartjs-color-string "^0.4.0" color-convert "^0.5.3" @@ -2287,15 +2296,15 @@ d3-format@1, d3-format@1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.0.2.tgz#138618320b4bbeb43b5c0ff30519079fbbd7375e" -d3-geo@1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.4.0.tgz#15e58c414b5bafa1a960eeeb29059c94a60d8408" +d3-geo@1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.5.0.tgz#cf32c26f61cc5130382f74d40c4d3503dd226a1f" dependencies: d3-array "1" -d3-hierarchy@1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.1.tgz#6deefccdf19f370dfc77b6538284e953e0e769b3" +d3-hierarchy@1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.2.tgz#63d168424320fdb4f5c80df458e5bd0d9f2218e6" d3-interpolate@1, d3-interpolate@1.1.3: version "1.1.3" @@ -2394,8 +2403,8 @@ d3-zoom@1.1.1: d3-transition "1" d3@^4.5.0: - version "4.5.0" - resolved "https://registry.yarnpkg.com/d3/-/d3-4.5.0.tgz#b68412b84ace3c18a49fee43be1b212b13a23f97" + version "4.6.0" + resolved "https://registry.yarnpkg.com/d3/-/d3-4.6.0.tgz#af2f0ddd00f4cc9737b8b0a565608bf6b787eafc" dependencies: d3-array "1.0.2" d3-axis "1.0.4" @@ -2409,8 +2418,8 @@ d3@^4.5.0: d3-ease "1.0.2" d3-force "1.0.4" d3-format "1.0.2" - d3-geo "1.4.0" - d3-hierarchy "1.1.1" + d3-geo "1.5.0" + d3-hierarchy "1.1.2" d3-interpolate "1.1.3" d3-path "1.0.3" d3-polygon "1.0.2" @@ -2623,8 +2632,8 @@ dot-prop@^3.0.0: is-obj "^1.0.0" dot-prop@^4.1.0: - version "4.1.0" - resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.1.0.tgz#eb29eac57dfa31fda1edef50ea462ee3d38ff3ab" + version "4.1.1" + resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.1.1.tgz#a8493f0b7b5eeec82525b5c7587fa7de7ca859c1" dependencies: is-obj "^1.0.0" @@ -2881,9 +2890,9 @@ eslint-plugin-jsx-a11y@^4.0.0: jsx-ast-utils "^1.0.0" object-assign "^4.0.1" -eslint-plugin-promise@^3.4.1: - version "3.4.1" - resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.4.1.tgz#6911a9010bf84e17d82e19e0ab0f80ab3ad6db4c" +eslint-plugin-promise@^3.4.2: + version "3.4.2" + resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.4.2.tgz#1be2793eafe2d18b5b123b8136c269f804fe7122" eslint-plugin-react@^6.10.0: version "6.10.0" @@ -2899,9 +2908,9 @@ eslint-plugin-standard@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/eslint-plugin-standard/-/eslint-plugin-standard-2.0.1.tgz#3589699ff9c917f2c25f76a916687f641c369ff3" -eslint@^3.15.0: - version "3.15.0" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.15.0.tgz#bdcc6a6c5ffe08160e7b93c066695362a91e30f2" +eslint@^3.16.0: + version "3.16.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-3.16.0.tgz#4a468ab93618a9eb6e3f1499038b38851f828630" dependencies: babel-code-frame "^6.16.0" chalk "^1.1.3" @@ -3014,7 +3023,7 @@ events@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924" -eventsource@^0.1.3, eventsource@~0.1.6: +eventsource@^0.1.3, eventsource@0.1.6: version "0.1.6" resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232" dependencies: @@ -3301,8 +3310,8 @@ fs.realpath@^1.0.0: resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" fsevents@^1.0.0: - version "1.0.17" - resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.0.17.tgz#8537f3f12272678765b4fd6528c0f1f66f8f4558" + version "1.1.1" + resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.1.tgz#f19fd28f43eeaf761680e519a203c4d0b3d31aff" dependencies: nan "^2.3.0" node-pre-gyp "^0.6.29" @@ -3427,8 +3436,8 @@ glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.0.6: path-is-absolute "^1.0.0" globals@^9.0.0, globals@^9.14.0: - version "9.15.0" - resolved "https://registry.yarnpkg.com/globals/-/globals-9.15.0.tgz#7a5d8fd865e69de910b090b15a87772f9423c5de" + version "9.16.0" + resolved "https://registry.yarnpkg.com/globals/-/globals-9.16.0.tgz#63e903658171ec2d9f51b1d31de5e2b8dc01fb80" globby@^5.0.0: version "5.0.0" @@ -3720,8 +3729,8 @@ ignore-by-default@^1.0.0: resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09" ignore@^3.2.0: - version "3.2.2" - resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.2.tgz#1c51e1ef53bab6ddc15db4d9ac4ec139eceb3410" + version "3.2.4" + resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.4.tgz#4055e03596729a8fabe45a43c100ad5ed815c4e8" immutable@^3.8.1: version "3.8.1" @@ -4046,8 +4055,10 @@ is-redirect@^1.0.0: resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24" is-regex@^1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.3.tgz#0d55182bddf9f2fde278220aec3a75642c908637" + version "1.0.4" + resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491" + dependencies: + has "^1.0.1" is-regexp@^1.0.0: version "1.0.0" @@ -4603,7 +4614,7 @@ lodash@^3.5.0: version "3.10.1" resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6" -lodash@^4.0.0, lodash@^4.1.0, lodash@^4.10.0, lodash@^4.12.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1, "lodash@>=3.5 <5": +lodash@^4.0.0, lodash@^4.1.0, lodash@^4.10.0, lodash@^4.12.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.6.1, "lodash@>=3.5 <5": version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" @@ -4854,8 +4865,8 @@ ncp@^2.0.0: resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3" nearley@^2.7.7: - version "2.7.12" - resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.7.12.tgz#20f2dc4a46455056edbd5f98e1b292d560e8540b" + version "2.7.13" + resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.7.13.tgz#ae19927cc821a4b517de91962db9ed0e90d991fa" dependencies: nomnom "~1.6.2" railroad-diagrams "^1.0.0" @@ -5527,8 +5538,8 @@ postcss-merge-longhand@^2.0.1: postcss "^5.0.4" postcss-merge-rules@^2.0.3: - version "2.1.1" - resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.1.tgz#5e5640020ce43cddd343c73bba91c9a358d1fe0f" + version "2.1.2" + resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz#d1df5dfaa7b1acc3be553f0e9e10e87c61b5f721" dependencies: browserslist "^1.5.2" caniuse-api "^1.5.2" @@ -5708,9 +5719,9 @@ postcss-zindex@^2.0.1: postcss "^5.0.4" uniqs "^2.0.0" -postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.18, postcss@^5.0.2, postcss@^5.0.20, postcss@^5.0.21, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.13, postcss@^5.2.4: - version "5.2.13" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.13.tgz#1be52a32cf2ef58c0d75f1aedb3beabcf257cef3" +postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.18, postcss@^5.0.2, postcss@^5.0.20, postcss@^5.0.21, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.13, postcss@^5.2.14, postcss@^5.2.4: + version "5.2.14" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.14.tgz#47b4fbde363fd4f81e547f7e0e43d6d300267330" dependencies: chalk "^1.1.3" js-base64 "^2.1.9" @@ -5885,13 +5896,13 @@ range-parser@^1.0.3, range-parser@~1.2.0: resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e" rc@^1.0.1, rc@^1.1.6, rc@~1.1.6: - version "1.1.6" - resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.6.tgz#43651b76b6ae53b5c802f1151fa3fc3b059969c9" + version "1.1.7" + resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.7.tgz#c5ea564bb07aff9fd3a5b32e906c1d3a65940fea" dependencies: deep-extend "~0.4.0" ini "~1.3.0" minimist "^1.2.0" - strip-json-comments "~1.0.4" + strip-json-comments "~2.0.1" react-a11y@^0.3.3: version "0.3.3" @@ -5930,16 +5941,13 @@ react-input-autosize@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-1.1.0.tgz#3fe1ac832387d8abab85f6051ceab1c9e5570853" -react-intl-redux@^0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/react-intl-redux/-/react-intl-redux-0.3.0.tgz#f42041c0b2edbf88ad693def6fbd00adef673d63" +react-intl-redux@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/react-intl-redux/-/react-intl-redux-0.4.0.tgz#2bb3111ac2da7b273eb2889950b22d6064bf9dfb" dependencies: - react-intl "^2.2.2" - react-redux "^5.0.1" - redux "^3.6.0" warning "^3.0.0" -react-intl@^2.2.2, react-intl@^2.2.3: +react-intl@^2.2.3: version "2.2.3" resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-2.2.3.tgz#8eebb03cddc38b337ed22fab78037ab53a594270" dependencies: @@ -5948,7 +5956,7 @@ react-intl@^2.2.2, react-intl@^2.2.3: intl-relativeformat "^1.3.0" invariant "^2.1.1" -react-redux@^5.0.1, react-redux@^5.0.2: +react-redux@^5.0.2: version "5.0.2" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.2.tgz#3d9878f5f71c6fafcd45de1fbb162ea31f389814" dependencies: @@ -6181,8 +6189,8 @@ regenerate@^1.2.1: resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260" regenerator-runtime@^0.10.0: - version "0.10.1" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.1.tgz#257f41961ce44558b18f7814af48c17559f9faeb" + version "0.10.3" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.3.tgz#8c4367a904b51ea62a908ac310bf99ff90a82a3e" regenerator-transform@0.9.8: version "0.9.8" @@ -6360,7 +6368,13 @@ right-align@^0.1.1: dependencies: align-text "^0.1.1" -rimraf@^2.2.8, rimraf@^2.3.3, rimraf@^2.4.3, rimraf@^2.4.4, rimraf@^2.5.0, rimraf@^2.5.4, rimraf@~2.5.1, rimraf@~2.5.4, rimraf@2: +rimraf@^2.2.8, rimraf@^2.3.3, rimraf@^2.4.3, rimraf@^2.4.4, rimraf@^2.5.0, rimraf@^2.5.4, rimraf@2: + version "2.6.0" + resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.0.tgz#89b8a0fe432b9ff9ec9a925a00b6cdb3a91bbada" + dependencies: + glob "^7.0.5" + +rimraf@~2.5.1, rimraf@~2.5.4: version "2.5.4" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04" dependencies: @@ -6541,12 +6555,12 @@ sockjs-client@1.0.1: json3 "^3.3.2" url-parse "^1.0.1" -sockjs-client@1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.1.tgz#284843e9a9784d7c474b1571b3240fca9dda4bb0" +sockjs-client@1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.2.tgz#f0212a8550e4c9468c8cceaeefd2e3493c033ad5" dependencies: debug "^2.2.0" - eventsource "~0.1.6" + eventsource "0.1.6" faye-websocket "~0.11.0" inherits "^2.0.1" json3 "^3.3.2" @@ -6672,9 +6686,9 @@ sshpk@^1.7.0: jsbn "~0.1.0" tweetnacl "~0.14.0" -stack-utils@^0.4.0: - version "0.4.0" - resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-0.4.0.tgz#940cb82fccfa84e8ff2f3fdf293fe78016beccd1" +stack-utils@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.0.tgz#2392cd8ddbd222492ed6c047960f7414b46c0f83" statehood@5.x.x: version "5.0.1" @@ -6778,10 +6792,6 @@ strip-indent@^1.0.1: dependencies: get-stdin "^4.0.1" -strip-json-comments@~1.0.4: - version "1.0.4" - resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-1.0.4.tgz#1e15fbcac97d3ee99bf2d73b4c656b082bbafb91" - strip-json-comments@~2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a" @@ -6836,9 +6846,9 @@ stylelint-processor-styled-components@^0.0.4: babel-traverse "^6.16.0" babylon "^6.12.0" -stylelint@^7.8.0: - version "7.8.0" - resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-7.8.0.tgz#ac701044ed03c44f7a9f73d4d5dc1bd1eaae12d1" +stylelint@^7.9.0: + version "7.9.0" + resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-7.9.0.tgz#b8d9ea20f887ab351075c6aded9528de24509327" dependencies: autoprefixer "^6.0.0" balanced-match "^0.4.0" @@ -6853,7 +6863,7 @@ stylelint@^7.8.0: html-tags "^1.1.1" ignore "^3.2.0" known-css-properties "^0.0.6" - lodash "^4.0.0" + lodash "^4.17.4" log-symbols "^1.0.2" meow "^3.3.0" micromatch "^2.3.11" @@ -7252,8 +7262,8 @@ url-parse-lax@^1.0.0: prepend-http "^1.0.1" url-parse@^1.0.1, url-parse@^1.1.1: - version "1.1.7" - resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.7.tgz#025cff999653a459ab34232147d89514cc87d74a" + version "1.1.8" + resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.8.tgz#7a65b3a8d57a1e86af6b4e2276e34774167c0156" dependencies: querystringify "0.0.x" requires-port "1.0.x" @@ -7376,17 +7386,17 @@ webidl-conversions@^4.0.0: resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.0.tgz#0a8c727ae4e5649687b7742368dcfbf13ed40118" webpack-dev-middleware@^1.9.0: - version "1.10.0" - resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.10.0.tgz#7d5be2651e692fddfafd8aaed177c16ff51f0eb8" + version "1.10.1" + resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.10.1.tgz#c6b4cf428139cf1aefbe06a0c00fdb4f8da2f893" dependencies: memory-fs "~0.4.1" mime "^1.3.4" path-is-absolute "^1.0.0" range-parser "^1.0.3" -webpack-dev-server@^2.3.0: - version "2.3.0" - resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.3.0.tgz#0437704bbd4d941a6e4c061eb3cc232ed7d06101" +webpack-dev-server@^2.4.1: + version "2.4.1" + resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.4.1.tgz#48556f793186eac0758df94730c034ed9a4d0f12" dependencies: ansi-html "0.0.7" chokidar "^1.6.0" @@ -7399,7 +7409,7 @@ webpack-dev-server@^2.3.0: portfinder "^1.0.9" serve-index "^1.7.2" sockjs "0.3.18" - sockjs-client "1.1.1" + sockjs-client "1.1.2" spdy "^3.4.1" strip-ansi "^3.0.0" supports-color "^3.1.1" @@ -7470,8 +7480,8 @@ whatwg-fetch@>=0.10.0: resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.2.tgz#fe294d1d89e36c5be8b3195057f2e4bc74fc980e" whatwg-url@^4.3.0: - version "4.3.0" - resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.3.0.tgz#92aaee21f4f2a642074357d70ef8500a7cbb171a" + version "4.4.0" + resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.4.0.tgz#594f95781545c13934a62db40897c818cafa2e04" dependencies: tr46 "~0.0.3" webidl-conversions "^3.0.0" diff --git a/package.json b/package.json index 2c369ce3..5c3ea0d0 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "prepush": "make test" }, "dependencies": { + "eslint-plugin-babel": "^4.0.1", "husky": "^0.13.1", "license-to-fail": "^2.2.0", "lodash.findindex": "^4.6.0", diff --git a/spikes/form/redux-form/client/app.js b/spikes/form/redux-form/client/app.js index eaa95045..a7cccc07 100644 --- a/spikes/form/redux-form/client/app.js +++ b/spikes/form/redux-form/client/app.js @@ -33,6 +33,7 @@ const App = React.createClass({ Form Multi page form + Normalize form
{ children } diff --git a/spikes/form/redux-form/client/form/form-normalize.js b/spikes/form/redux-form/client/form/form-normalize.js new file mode 100644 index 00000000..18188eba --- /dev/null +++ b/spikes/form/redux-form/client/form/form-normalize.js @@ -0,0 +1,86 @@ +import React from 'react' +import { Field, reduxForm } from 'redux-form' +import normalizePhone from './normalizePhone' + +const upper = value => value && value.toUpperCase() +const lower = value => value && value.toLowerCase() +const lessThan = otherField => + (value, previousValue, allValues) => value < allValues[otherField] ? value : previousValue +const greaterThan = otherField => + (value, previousValue, allValues) => value > allValues[otherField] ? value : previousValue + +const FieldNormalizingForm = (props) => { + const { handleSubmit, pristine, reset, submitting } = props + return ( +
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ + +
+
+ ) +} + +export default reduxForm({ + form: 'normalizing', // a unique identifier for this form + initialValues: { min: 1, max: 10 } +})(FieldNormalizingForm) diff --git a/spikes/form/redux-form/client/form/form.js b/spikes/form/redux-form/client/form/form.js index c285c42c..89b284ba 100644 --- a/spikes/form/redux-form/client/form/form.js +++ b/spikes/form/redux-form/client/form/form.js @@ -50,6 +50,11 @@ const SimpleInput = (props) => { const onSubmit = values => { } +const upper = value => { + console.log('value = ', value); + return value && value.toUpperCase() +} + const TestForm = React.createClass({ render: function() { const { @@ -60,11 +65,19 @@ const TestForm = React.createClass({ } = this.props; return (
+
{ /* styled html input */ } - +
diff --git a/spikes/form/redux-form/client/form/normalizePhone.js b/spikes/form/redux-form/client/form/normalizePhone.js new file mode 100644 index 00000000..ce964e96 --- /dev/null +++ b/spikes/form/redux-form/client/form/normalizePhone.js @@ -0,0 +1,24 @@ +const normalizePhone = (value, previousValue) => { + if (!value) { + return value + } + const onlyNums = value.replace(/[^\d]/g, '') + if (!previousValue || value.length > previousValue.length) { + // typing forward + if (onlyNums.length === 3) { + return onlyNums + '-' + } + if (onlyNums.length === 6) { + return onlyNums.slice(0, 3) + '-' + onlyNums.slice(3) + '-' + } + } + if (onlyNums.length <= 3) { + return onlyNums + } + if (onlyNums.length <= 6) { + return onlyNums.slice(0, 3) + '-' + onlyNums.slice(3) + } + return onlyNums.slice(0, 3) + '-' + onlyNums.slice(3, 6) + '-' + onlyNums.slice(6, 10) +} + +export default normalizePhone diff --git a/spikes/form/redux-form/client/root.js b/spikes/form/redux-form/client/root.js index 3eb1a96d..fc60e657 100644 --- a/spikes/form/redux-form/client/root.js +++ b/spikes/form/redux-form/client/root.js @@ -8,6 +8,7 @@ const Multiform = require('./form/multiform'); const FormOne = require('./form/form-one'); const FormTwo = require('./form/form-two'); const FormThree = require('./form/form-three'); +const FormNormalize = require('./form/form-normalize'); const { AppContainer @@ -42,6 +43,7 @@ module.exports = ({ + diff --git a/ui/.storybook/config.js b/ui/.storybook/config.js index 76294912..b166bbcb 100644 --- a/ui/.storybook/config.js +++ b/ui/.storybook/config.js @@ -1,7 +1,7 @@ const React = require('react'); const { configure, addDecorator } = require('@kadira/storybook'); -const req = require.context('../src/components', true, /story.js$/); +const req = require.context('../src/components', true, /.+?(?=story.js$)/); const Styled = require('styled-components'); const Base = require('../src/components/base'); diff --git a/ui/.storybook/head.html b/ui/.storybook/head.html deleted file mode 100644 index f057aef5..00000000 --- a/ui/.storybook/head.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui/package.json b/ui/package.json index 631258fc..36fe2eb2 100644 --- a/ui/package.json +++ b/ui/package.json @@ -20,7 +20,7 @@ "chart.js": "^2.5.0", "chartjs-chart-box-plot": "prerelease", "color": "^1.0.3", - "d3": "^4.5.0", + "d3": "^4.6.0", "lodash.find": "^4.6.0", "lodash.first": "^3.0.0", "lodash.flatten": "^4.4.0", @@ -33,10 +33,13 @@ "param-case": "^2.1.0", "random-natural": "^1.0.3", "react": "^15.4.2", + "react-broadcast": "^0.1.2", "react-dom": "^15.4.2", + "react-redux": "^5.0.2", "react-router-dom": "4.0.0-beta.4", "react-select": "^1.0.0-rc.3", "reduce-css-calc": "^1.3.0", + "redux-form": "^6.5.0", "styled-components": "^1.4.3", "svg-react-loader": "^0.3.7", "transform-props-with": "^2.1.0", @@ -44,7 +47,7 @@ }, "devDependencies": { "@kadira/storybook": "^2.35.3", - "ava": "^0.18.1", + "ava": "^0.18.2", "babel-cli": "^6.23.0", "babel-core": "^6.23.1", "babel-eslint": "^7.1.1", @@ -61,12 +64,12 @@ "babel-preset-react": "^6.23.0", "dangerously-set-inner-html": "2.0.0", "enzyme": "^2.7.1", - "eslint": "^3.15.0", + "eslint": "^3.16.0", "eslint-config-semistandard": "^7.0.0", "eslint-config-standard": "^6.2.1", "eslint-plugin-babel": "^4.0.1", "eslint-plugin-jsx-a11y": "^4.0.0", - "eslint-plugin-promise": "^3.4.1", + "eslint-plugin-promise": "^3.4.2", "eslint-plugin-react": "^6.10.0", "eslint-plugin-standard": "^2.0.1", "jsdom": "^9.11.0", @@ -76,7 +79,7 @@ "pre-commit": "^1.2.2", "react-addons-test-utils": "^15.4.2", "st": "^1.2.0", - "stylelint": "^7.8.0", + "stylelint": "^7.9.0", "stylelint-config-standard": "^16.0.0", "stylelint-processor-styled-components": "^0.0.4", "tap-xunit": "^1.7.0" diff --git a/ui/src/components/baseline-grid/story.js b/ui/src/components/baseline-grid/story.js index 14f16695..cf82d613 100644 --- a/ui/src/components/baseline-grid/story.js +++ b/ui/src/components/baseline-grid/story.js @@ -6,7 +6,7 @@ const { const Base = require('../base'); const BaseElements = require('../base-elements'); -const Input = require('../input'); +const Input = require('../form/input'); const { H1 diff --git a/ui/src/components/checkbox/index.js b/ui/src/components/checkbox/index.js deleted file mode 100644 index bdcc6615..00000000 --- a/ui/src/components/checkbox/index.js +++ /dev/null @@ -1,127 +0,0 @@ -const composers = require('../../shared/composers'); -const constants = require('../../shared/constants'); -const fns = require('../../shared/functions'); -const React = require('react'); -const Styled = require('styled-components'); - -const { - boxes -} = constants; - -const { - Baseline -} = composers; - -const { - remcalc -} = fns; - -const { - default: styled, -} = Styled; - -const StyledInput = styled.input` - visibility: hidden; - &:checked + label::after { - opacity: 1; - } - &:disabled + label { - background-color: rgb(249, 249, 249); - } - &:disabled + label::after { - opacity: 0.3; - } -`; - -const StyledLabel = styled.label` - color: rgb(100, 100, 100); - position: absolute; - width: ${remcalc(24)}; - height: ${remcalc(24)}; - top: 0; - border-radius: ${boxes.borderRadius}; - background-color: rgb(255, 255, 255); - box-shadow: ${boxes.insetShaddow}; - border: ${boxes.border.unchecked}; - - &::after { - opacity: 0; - content: ''; - position: absolute; - width: ${remcalc(9)}; - height: ${remcalc(4)}; - background: transparent; - top: ${remcalc(7)}; - left: ${remcalc(7)}; - border: ${remcalc(3)} solid #333; - border-top: none; - border-right: none; - transform: rotate(-45deg); - } - - &:hover { - &::after { - opacity: 0.3; - } - } -`; - -const StyledDiv = styled.div` - width: ${remcalc(24)}; - height: ${remcalc(24)}; - position: relative; -`; - -const Checkbox = ({ - checked = false, - children, - className, - disabled = false, - form, - id, - name, - onChange, - readOnly, - required, - selectionDirection, - style, - tabIndex -}) => ( - - - - {children} - - -); - -Checkbox.propTypes = { - checked: React.PropTypes.bool, - children: React.PropTypes.node, - className: React.PropTypes.string, - disabled: React.PropTypes.bool, - form: React.PropTypes.string, - id: React.PropTypes.string, - name: React.PropTypes.string, - onChange: React.PropTypes.func, - readOnly: React.PropTypes.bool, - required: React.PropTypes.bool, - selectionDirection: React.PropTypes.string, - style: React.PropTypes.object, - tabIndex: React.PropTypes.string -}; - -module.exports = Baseline( - Checkbox -); diff --git a/ui/src/components/checkbox/readme.md b/ui/src/components/checkbox/readme.md deleted file mode 100644 index 71d653dd..00000000 --- a/ui/src/components/checkbox/readme.md +++ /dev/null @@ -1,40 +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 Checkbox = require('./index.js'); -const styles = require('./style.css'); - -nmodule.exports = ReactDOM.renderToString( - - - - - Checkbox checked - - - - - - - Checkbox unchecked - - - - - - - Checkbox disabled - - - - -); -``` diff --git a/ui/src/components/checkbox/story.js b/ui/src/components/checkbox/story.js deleted file mode 100644 index bdbebdab..00000000 --- a/ui/src/components/checkbox/story.js +++ /dev/null @@ -1,18 +0,0 @@ -const React = require('react'); - -const { - storiesOf -} = require('@kadira/storybook'); - -const Checkbox = require('./'); - -storiesOf('Checkbox', module) - .add('Default', () => ( - - )) - .add('Checked', () => ( - - )) - .add('Disabled', () => ( - - )); \ No newline at end of file diff --git a/ui/src/components/form/base-input.js b/ui/src/components/form/base-input.js new file mode 100644 index 00000000..5b3b5e31 --- /dev/null +++ b/ui/src/components/form/base-input.js @@ -0,0 +1,152 @@ +const Styled = require('styled-components'); +const ReactBroadcast = require('react-broadcast'); +const React = require('react'); + +const constants = require('../../shared/constants'); +const fns = require('../../shared/functions'); +const is = require('../../shared/is'); + +const { + colors, + boxes +} = constants; + +const { + remcalc +} = fns; + +const { + default: styled, + css +} = Styled; + +const { + Subscriber +} = ReactBroadcast; + +const colorWithDisabled = (props) => props.disabled + ? colors.inactive.default + : colors.fonts.regular; + +const colorWithDefaultValue = (props) => props.value === props.defaultValue + ? colors.inactive.default + : colorWithDisabled(props); + +const color = (props) => props.defaultValue + ? colorWithDefaultValue(props) + : colorWithDisabled(props); + +const height = (props) => !props.multiple + ? remcalc(48) + : 'auto'; + +const paddingTop = (props) => props.multiple + ? remcalc(20) + : remcalc(13); + +const style = css` + box-sizing: border-box; + + width: 100%; + height: ${height}; + + margin-bottom: ${remcalc(8)}; + margin-top: ${remcalc(8)}; + padding: ${paddingTop} ${remcalc(18)}; + + border-radius: ${boxes.borderRadius}; + background-color: ${colors.base.white}; + box-shadow: ${boxes.insetShaddow}; + border: ${boxes.border.unchecked}; + + ${is('error')` + border-color: ${colors.inputError} + `}; + + ${is('warning')` + border-color: ${colors.inputWarning} + `}; + + ${is('success')` + border-color: ${colors.base.green} + `}; + + font-size: ${remcalc(16)}; + line-height: normal !important; + font-weight: normal; + font-style: normal; + font-stretch: normal; + color: ${color}; + + appearance: none; + outline: 0; + + &:focus { + border-color: ${colors.base.primary}; + outline: 0; + } +`; + +const BaseInput = (Component) => (props) => { + const render = (value) => { + const _value = (value || {}); + + const { + input = {}, + meta = {}, + id = '' + } = _value; + + const hasError = !!( + props.error || // eslint-disable-line react/prop-types + _value.error || + meta.error + ); + + const hasWarning = !!( + props.warning || // eslint-disable-line react/prop-types + _value.warning || + meta.warning + ); + + const hasSuccess = !!( + props.success || // eslint-disable-line react/prop-types + _value.success || + meta.success + ); + + return ( + + ); + }; + + return ( + + {render} + + ); +}; + +BaseInput.propTypes = { + error: React.PropTypes.bool, + warning: React.PropTypes.bool +}; + +module.exports = BaseInput; + +module.exports.Stylable = (Component) => { + const stylable = typeof Component === 'string' + ? styled[Component] + : styled(Component); + + return stylable` + ${style} + `; +}; diff --git a/ui/src/components/form/checkbox.js b/ui/src/components/form/checkbox.js new file mode 100644 index 00000000..a0a0589f --- /dev/null +++ b/ui/src/components/form/checkbox.js @@ -0,0 +1,15 @@ +const composers = require('../../shared/composers'); +const BaseInput = require('./base-input'); +const Toggle = require('./toggle'); + +const { + Baseline +} = composers; + +const Checkbox = Toggle({ + type: 'checkbox' +}); + +module.exports = Baseline( + BaseInput(Checkbox) +); diff --git a/ui/src/components/form/fieldset.js b/ui/src/components/form/fieldset.js new file mode 100644 index 00000000..1e868e8c --- /dev/null +++ b/ui/src/components/form/fieldset.js @@ -0,0 +1,31 @@ +const Styled = require('styled-components'); +const composers = require('../../shared/composers'); + +const { + Baseline +} = composers; + +const { + default: styled +} = Styled; + +const Fieldset = styled.fieldset` + display: inline-block; + margin: 0; + padding: 0; + border: none; + overflow: hidden; + width: 100%; + height: auto; + + -webkit-margin-start: 0; + -webkit-margin-end: 0; + -webkit-padding-before: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + -webkit-padding-after: 0; +`; + +module.exports = Baseline( + Fieldset +); diff --git a/ui/src/components/form/group.js b/ui/src/components/form/group.js new file mode 100644 index 00000000..ba2684ec --- /dev/null +++ b/ui/src/components/form/group.js @@ -0,0 +1,93 @@ +const ReactBroadcast = require('react-broadcast'); +const ReduxForm = require('redux-form'); +const React = require('react'); + +const Fieldset = require('./fieldset'); +const composers = require('../../shared/composers'); +const fns = require('../../shared/functions'); + +const { + Broadcast +} = ReactBroadcast; + +const { + Field +} = ReduxForm; + +const { + Baseline +} = composers; + +const { + rndId +} = fns; + +const { + Component +} = React; + +class FormGroup extends Component { + constructor(props) { + super(props); + this.renderGroup = this.renderGroup.bind(this); + } + renderGroup(inputProps) { + const { + className, + style, + children, + ...rest + } = this.props; + + const value = { + id: rndId(), + ...rest, + ...inputProps + }; + + return ( +
+ +
+ {children} +
+ +
+ ); + } + render() { + const { + name = rndId(), + defaultValue, + normalize, + reduxForm = false + } = this.props; + + if (!reduxForm) { + return this.renderGroup({}); + } + + return ( + + ); + } +} + +FormGroup.propTypes = { + children: React.PropTypes.node, + className: React.PropTypes.string, + defaultValue: React.PropTypes.string, + name: React.PropTypes.string, + normalize: React.PropTypes.func, + reduxForm: React.PropTypes.bool, + style: React.PropTypes.object +}; + +module.exports = Baseline( + FormGroup +); diff --git a/ui/src/components/form/index.js b/ui/src/components/form/index.js new file mode 100644 index 00000000..3dc5373d --- /dev/null +++ b/ui/src/components/form/index.js @@ -0,0 +1,10 @@ +module.exports = { + Checkbox: require('./checkbox'), + FormGroup: require('./group'), + FormLabel: require('./label'), + FormMeta: require('./meta'), + Input: require('./input'), + Select: require('./select'), + Radio: require('./radio').RadioList, + Fieldset: require('./fieldset') +}; diff --git a/ui/src/components/form/input.js b/ui/src/components/form/input.js new file mode 100644 index 00000000..3c5981f9 --- /dev/null +++ b/ui/src/components/form/input.js @@ -0,0 +1,14 @@ +const composers = require('../../shared/composers'); +const BaseInput = require('./base-input'); + +const { + Baseline +} = composers; + +const { + Stylable +} = BaseInput; + +module.exports = Baseline( + BaseInput(Stylable('input')) +); diff --git a/ui/src/components/form/label-row.js b/ui/src/components/form/label-row.js deleted file mode 100644 index 2fc0278e..00000000 --- a/ui/src/components/form/label-row.js +++ /dev/null @@ -1,30 +0,0 @@ -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) => ( - - {children} - - )); - - return ( - - {labels} - - ); -}; - -LabelRow.propTypes = { - children: React.PropTypes.node -}; - -module.exports = Baseline( - LabelRow -); diff --git a/ui/src/components/form/label.js b/ui/src/components/form/label.js index 016490d9..001a877e 100644 --- a/ui/src/components/form/label.js +++ b/ui/src/components/form/label.js @@ -1,33 +1,43 @@ -const composers = require('../../shared/composers'); -const constants = require('../../shared/constants'); -const fns = require('../../shared/functions'); +const React = require('react'); +const ReactBroadcast = require('react-broadcast'); const Styled = require('styled-components'); - -const { - colors -} = constants; - -const { - remcalc -} = fns; - -const { - Baseline -} = composers; +const fns = require('../../shared/functions'); const { default: styled } = Styled; -const Label = styled.label` - width: 100%; - font-size: ${remcalc(16)}; - font-weight: 600; - font-style: normal; - font-stretch: normal; - color: ${colors.base.secondary}; +const { + remcalc +} = fns; + +const Label = require('../label'); + +const { + Subscriber +} = ReactBroadcast; + +const StyledLabel = styled(Label)` + margin-right: ${remcalc(12)}; `; -module.exports = Baseline( - Label -); +module.exports = (props) => { + const render = (value) => { + const { + id = '' + } = (value || {}); + + return ( + + ); + }; + + return ( + + {render} + + ); +}; diff --git a/ui/src/components/form/view.js b/ui/src/components/form/legend.js similarity index 85% rename from ui/src/components/form/view.js rename to ui/src/components/form/legend.js index bfa342ea..156dfa69 100644 --- a/ui/src/components/form/view.js +++ b/ui/src/components/form/legend.js @@ -1,5 +1,5 @@ -const composers = require('../../shared/composers'); const Styled = require('styled-components'); +const composers = require('../../shared/composers'); const { Baseline @@ -9,8 +9,6 @@ const { default: styled } = Styled; -const View = styled.div``; - module.exports = Baseline( - View + styled.legend`` ); diff --git a/ui/src/components/form/meta.js b/ui/src/components/form/meta.js new file mode 100644 index 00000000..942e66c9 --- /dev/null +++ b/ui/src/components/form/meta.js @@ -0,0 +1,128 @@ +const Styled = require('styled-components'); +const ReactBroadcast = require('react-broadcast'); +const React = require('react'); + +const Label = require('../label'); +const composers = require('../../shared/composers'); +const constants = require('../../shared/constants'); +const is = require('../../shared/is'); + +const { + Subscriber +} = ReactBroadcast; + +const { + breakpoints, + colors +} = constants; + +const { + Baseline +} = composers; + +const { + default: styled +} = Styled; + +const StyledLabel = styled(Label)` + ${breakpoints.medium` + text-align: right; + `}; + + ${is('right')` + float: right; + `}; + + ${is('error')` + color: ${colors.inputError}; + `}; + + ${is('warning')` + color: ${colors.inputWarning}; + `}; + + ${is('success')` + color: ${colors.base.green}; + `}; +`; + +const Meta = (props) => { + const render = (value) => { + const { + meta = {} + } = value; + + const msg = ( + props.children || + props.error || + props.warning || + props.success || + meta.error || + meta.warning || + meta.success || + value.error || + value.warning || + value.success + ); + + const hasError = !!( + props.error || + meta.error || + value.error + ); + + const hasWarning = !!( + props.warning || + meta.warning || + value.warning + ); + + const hasSuccess = !!( + props.success || + meta.success || + value.success + ); + + const isRight = !props.left; + + return ( + + {msg} + + ); + }; + + return ( + + {render} + + ); +}; + +Meta.propTypes = { + children: React.PropTypes.node, + error: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.bool + ]), + left: React.PropTypes.bool, + success: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.bool + ]), + warning: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.bool + ]) +}; + +module.exports = Baseline( + Meta +); diff --git a/ui/src/components/form/msg.js b/ui/src/components/form/msg.js deleted file mode 100644 index c94ab086..00000000 --- a/ui/src/components/form/msg.js +++ /dev/null @@ -1,38 +0,0 @@ -const composers = require('../../shared/composers'); -const constants = require('../../shared/constants'); -const Label = require('./label'); -const match = require('../../shared/match'); -const Styled = require('styled-components'); - -const { - breakpoints, - colors -} = constants; - -const { - Baseline -} = composers; - -const { - default: styled -} = Styled; - -const color = match.prop({ - warning: colors.inputWarning, - error: colors.inputError, - //disabled: colors.brandInactiveColor -})('type'); - - -const Msg = styled(Label)` - color: ${color}; - - ${breakpoints.medium` - float: right; - text-align: right; - `} -`; - -module.exports = Baseline( - Msg -); diff --git a/ui/src/components/form/outlet.js b/ui/src/components/form/outlet.js deleted file mode 100644 index 0c44ce7d..00000000 --- a/ui/src/components/form/outlet.js +++ /dev/null @@ -1,73 +0,0 @@ -const constants = require('../../shared/constants'); -const fns = require('../../shared/functions'); -const Styled = require('styled-components'); - -const { - colors, - boxes -} = constants; - -const { - remcalc -} = fns; - -const { - css -} = Styled; - -const colorWithDisabled = (props) => props.disabled - ? colors.inactive.default - : colors.fonts.regular; - -const colorWithDefaultValue = (props) => props.value === props.defaultValue - ? colors.inactive.default - : colorWithDisabled(props); - -const color = (props) => props.defaultValue - ? colorWithDefaultValue(props) - : colorWithDisabled(props); - -const border = (props) => props.error - ? boxes.border.error - : boxes.border.unchecked; - -const height = (props) => !props.multiple - ? remcalc(48) - : 'auto'; - -const paddingTop = (props) => props.multiple - ? remcalc(20) - : remcalc(13); - -const Outlet = css` - box-sizing: border-box; - - width: 100%; - height: ${height}; - - margin-bottom: ${remcalc(8)}; - margin-top: ${remcalc(8)}; - padding: ${paddingTop} ${remcalc(18)}; - - border-radius: ${boxes.borderRadius}; - background-color: ${colors.base.white}; - box-shadow: ${boxes.insetShaddow}; - border: ${border}; - - font-size: ${remcalc(16)}; - line-height: normal; - font-weight: normal; - font-style: normal; - font-stretch: normal; - color: ${color}; - - appearance: none; - outline: 0; - - &:focus { - border-color: ${colors.base.primary}; - outline: 0; - } -`; - -module.exports = Outlet; diff --git a/ui/src/components/form/radio.js b/ui/src/components/form/radio.js new file mode 100644 index 00000000..641fa4fa --- /dev/null +++ b/ui/src/components/form/radio.js @@ -0,0 +1,35 @@ +const Styled = require('styled-components'); + +const Toggle = require('./toggle'); +const composers = require('../../shared/composers'); +const BaseInput = require('./base-input'); + +const { + default: styled +} = Styled; + +const { + Baseline +} = composers; + +const RadioItem = BaseInput(styled.li` + list-style-type: none; +`); + +const RadioList = styled.ul` + margin: 0; + padding: 0; +`; + +const Radio = Toggle({ + container: RadioItem, + type: 'radio' +}); + +module.exports = Baseline( + Radio +); + +module.exports.RadioList = Baseline( + RadioList +); diff --git a/ui/src/components/form/select.js b/ui/src/components/form/select.js new file mode 100644 index 00000000..0be3bf65 --- /dev/null +++ b/ui/src/components/form/select.js @@ -0,0 +1,14 @@ +const composers = require('../../shared/composers'); +const BaseInput = require('./base-input'); + +const { + Baseline +} = composers; + +const { + Stylable +} = BaseInput; + +module.exports = Baseline( + BaseInput(Stylable('select')) +); diff --git a/ui/src/components/form/toggle.js b/ui/src/components/form/toggle.js new file mode 100644 index 00000000..263f4ae0 --- /dev/null +++ b/ui/src/components/form/toggle.js @@ -0,0 +1,178 @@ +const Styled = require('styled-components'); +const ReactBroadcast = require('react-broadcast'); +const React = require('react'); + +const fns = require('../../shared/functions'); +const is = require('../../shared/is'); +const constants = require('../../shared/constants'); +const BaseInput = require('./base-input'); + +const { + Subscriber +} = ReactBroadcast; + +const { + boxes, + colors +} = constants; + +const { + remcalc +} = fns; + +const { + default: styled, +} = Styled; + +const Input = styled.input` + display: none; + + &:checked + label::after { + opacity: 1; + } + + &:selected + label::after { + opacity: 1; + } + + &:disabled + label { + background-color: rgb(249, 249, 249); + } + + &:disabled + label::after { + opacity: 0.3; + } +`; + +const Label = styled.label` + color: rgb(100, 100, 100); + position: absolute; + width: ${remcalc(22)}; + height: ${remcalc(22)}; + top: 0; + + background-color: rgb(255, 255, 255); + box-shadow: ${boxes.insetShaddow}; + border: ${boxes.border.unchecked}; + + ${is('checkbox')` + border-radius: ${boxes.borderRadius}; + `}; + + ${is('radio')` + border-radius: ${remcalc(11)}; + `}; + + ${is('error')` + border-color: ${colors.inputError} + `}; + + ${is('warning')` + border-color: ${colors.inputWarning} + `}; + + ${is('success')` + border-color: ${colors.base.green} + `}; + + ${is('radio')` + &::after { + opacity: 0; + content: ''; + position: absolute; + width: ${remcalc(8)}; + height: ${remcalc(8)}; + border-radius: ${remcalc(4)}; + background-color: ${colors.base.secondaryDark}; + border-top: none; + border-right: none; + top: ${remcalc(8)}; + left: ${remcalc(8)}; + } + `}; + + ${is('checkbox')` + &::after { + opacity: 0; + content: ''; + position: absolute; + width: ${remcalc(9)}; + height: ${remcalc(4)}; + background: transparent; + top: ${remcalc(7)}; + left: ${remcalc(7)}; + border: ${remcalc(3)} solid #333; + border-top: none; + border-right: none; + transform: rotate(-45deg); + } + `}; + + &:hover { + &::after { + opacity: 0.3; + } + } +`; + +const InnerContainer = styled.div` + display: inline-block; + margin-right: ${remcalc(12)} + vertical-align: text-bottom; + width: ${remcalc(24)}; + height: ${remcalc(24)}; + position: relative; +`; + +const Toggle = ({ + container = null, + type = 'radio' +}) => BaseInput(({ + children, + ...props +}) => { + const OuterContainer = container + ? container + : null; + + const types = { + [type]: true + }; + + const render = (value) => { + const toggle = ( + + + + ); + + return !OuterContainer ? toggle : ( + + {toggle} + {children} + + ); + }; + + return ( + + {render} + + ); +}); + +module.exports = Toggle; diff --git a/ui/src/components/input/index.js b/ui/src/components/input/index.js deleted file mode 100644 index 75c3dca8..00000000 --- a/ui/src/components/input/index.js +++ /dev/null @@ -1,89 +0,0 @@ -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'); - -const Label = require('../form/label'); -const LabelRow = require('../form/label-row'); -const Msg = require('../form/msg'); -const Outlet = require('../form/outlet'); -const View = require('../form/view'); - -const { - rndId -} = fns; - -const { - Baseline -} = composers; - -const { - default: styled -} = Styled; - -const StyledInput = styled.input` - ${Outlet} -`; - -const Input = (props) => { - const { - children, - id = rndId(), - label = '', - error = '', - warning = '' - } = props; - - const viewProps = [ - 'children', - 'style', - 'className' - ]; - - // reset props for - const newProps = Object.keys(props).reduce((sum, key) => ({ - ...sum, - [key]: viewProps.indexOf(key) < 0 ? props[key] : null - }),{}); - - const _label = !label.length ? null : ( - - ); - - const msgType = error ? 'error' : (warning ? 'warning' : null); - - const _msg = !(error || warning) ? null : ( - - {error ? error : warning} - - ); - - return ( - - - {_label} - {_msg} - - - {children} - - ); -}; - -Input.propTypes = { - children: React.PropTypes.node, - className: React.PropTypes.string, - error: React.PropTypes.string, - id: React.PropTypes.string, - label: React.PropTypes.string, - style: React.PropTypes.object, - warning: React.PropTypes.string -}; - -module.exports = reduxFormProxy( - Baseline(Input) -); diff --git a/ui/src/components/input/readme.md b/ui/src/components/input/readme.md deleted file mode 100644 index e199c638..00000000 --- a/ui/src/components/input/readme.md +++ /dev/null @@ -1,60 +0,0 @@ -# Input - -## 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 Input = require('./index.js'); - -nmodule.exports = ReactDOM.renderToString( - - - - - We'll never share your email with anyone else. - - - - - - - Password - - - - -); -``` - -## usage - -```js -const React = require('react'); -const Input = require('ui/input'); - -module.exports = () => { - return ( -
- - We'll never share your email with anyone else. - - - Password - -
- ); -} -``` diff --git a/ui/src/components/input/story.js b/ui/src/components/input/story.js deleted file mode 100644 index c7571fae..00000000 --- a/ui/src/components/input/story.js +++ /dev/null @@ -1,42 +0,0 @@ -const React = require('react'); - -const { - storiesOf -} = require('@kadira/storybook'); - -const Base= require('../base'); -const Input = require('./'); - -storiesOf('Input', module) - .add('Default', () => ( - - - - )) - .add('type=email', () => ( - - - We'll never share your email with anyone else. - - - )) - .add('Error', () => ( - - - - )) - .add('Success', () => ( - - - - )); \ No newline at end of file diff --git a/ui/src/components/label/index.js b/ui/src/components/label/index.js new file mode 100644 index 00000000..b716e988 --- /dev/null +++ b/ui/src/components/label/index.js @@ -0,0 +1,32 @@ +const composers = require('../../shared/composers'); +const constants = require('../../shared/constants'); +const fns = require('../../shared/functions'); +const Styled = require('styled-components'); + +const { + colors +} = constants; + +const { + remcalc +} = fns; + +const { + Baseline +} = composers; + +const { + default: styled +} = Styled; + +const Label = styled.label` + font-size: ${remcalc(16)}; + font-weight: 600; + font-style: normal; + font-stretch: normal; + color: ${colors.base.secondary}; +`; + +module.exports = Baseline( + Label +); diff --git a/ui/src/components/radio-group/index.js b/ui/src/components/radio-group/index.js deleted file mode 100644 index 677d1a14..00000000 --- a/ui/src/components/radio-group/index.js +++ /dev/null @@ -1,160 +0,0 @@ -/* After some time tring to make this work without messing w/ checked property, - * I ended up using it *only* when none is defined - * - * This way we try to be as pure as possible and not mess with consumer's logic - * if they have any - */ - -const composers = require('../../shared/composers'); -const first = require('lodash.first'); -const isUndefined = require('lodash.isundefined'); -const get = require('lodash.get'); -const Item = require('./item'); -const find = require('lodash.find'); -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, - className: React.PropTypes.string, - id: React.PropTypes.string, - name: React.PropTypes.string, - onChange: React.PropTypes.func, - style: React.PropTypes.object - }, - getInitialState: function() { - return this.getState(this.props); - }, - componentWillReceiveProps: function(nextProps) { - return this.setState(nextProps); - }, - getState: function(props) { - const _children = React.Children.toArray(props.children).filter((child) => { - return get(child, 'type.displayName') === 'Radio'; - }); - - const hasChecked = _children.some((child) => { - return !isUndefined(get(child, 'props.checked')); - }); - - if (hasChecked) { - return { - hasChecked - }; - } - - const defaultChecked = get(find(_children, (child) => { - return get(child, 'props.defaultChecked'); - }), 'props.value'); - - const checked = (() => { - const stateChecked = get(this, 'state.checked'); - const fallback = isUndefined(defaultChecked) - ? get(first(_children), 'props.value') - : defaultChecked; - - return !isUndefined(stateChecked) ? stateChecked : fallback; - })(); - - return { - checked - }; - }, - handleChange: function(key) { - return (ev) => { - const { - onChange = () => {} - } = this.props; - - this.setState({ - checked: key - }, () => { - onChange(ev); - }); - }; - }, - render: function() { - const { - name, - children, - className, - id, - style - } = this.props; - - const { - hasChecked, - checked - } = this.state; - - const { - handleChange - } = this; - - const cn = classNames( - className - ); - - const _children = React.Children.map(children, (child, i) => { - if (child.type.name !== 'Radio') { - return child; - } - - const tabIndex = i + 1; - const disabled = get(child, 'props.disabled'); - const value = get(child, 'props.value'); - const itemContent = get(child, 'props.children'); - - const _handleChange = (!hasChecked && !disabled) - ? handleChange(value) - : undefined; - - const _child = hasChecked ? ( - React.cloneElement(child, { - name - }) - ) : ( - React.cloneElement(child, { - onChange: _handleChange, - checked: value === checked, - defaultChecked: undefined, - name - }) - ); - - const _checked = get(_child, 'props.checked'); - - return ( - - {_child} - - ); - }); - - return ( -
- {_children} -
- ); - } -}); - -module.exports = Baseline( - RadioGroup -); diff --git a/ui/src/components/radio-group/readme.md b/ui/src/components/radio-group/readme.md deleted file mode 100644 index 2245bb3f..00000000 --- a/ui/src/components/radio-group/readme.md +++ /dev/null @@ -1,35 +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 Radio = require('../radio'); -const RadioGroup = require('./index'); -const styles = require('./style.css'); - -nmodule.exports = ReactDOM.renderToString( - - - - - -

You get all the good bits and none of the rubbish

- - -

You get all the good bits and extra brownies

- - -

You get none of the good bits

- - - - - -); -``` \ No newline at end of file diff --git a/ui/src/components/radio-group/story.js b/ui/src/components/radio-group/story.js deleted file mode 100644 index 09d7b34f..00000000 --- a/ui/src/components/radio-group/story.js +++ /dev/null @@ -1,27 +0,0 @@ -const React = require('react'); - -const { - storiesOf -} = require('@kadira/storybook'); - -const Base= require('../base'); -const RadioGroup = require('./'); -const Radio = require('./item'); - - -storiesOf('Radio Group', module) - .add('Default', () => ( - - - - Video killed the radio star - - - Video killed the radio star - - - Video killed the radio star - - - - )); \ No newline at end of file diff --git a/ui/src/components/radio/readme.md b/ui/src/components/radio/readme.md deleted file mode 100644 index 743ac817..00000000 --- a/ui/src/components/radio/readme.md +++ /dev/null @@ -1,43 +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 Radio = require('./index.js'); -const styles = require('./style.css'); - -nmodule.exports = ReactDOM.renderToString( - - - - - Female - - - Male - - - - -); -``` - -## usage - -```js -const React = require('react'); -const Radio = require('ui/radio'); - -module.exports = () => { - return ( - - - ); -} -``` diff --git a/ui/src/components/radio/story.js b/ui/src/components/radio/story.js deleted file mode 100644 index ed9697ad..00000000 --- a/ui/src/components/radio/story.js +++ /dev/null @@ -1,20 +0,0 @@ -const React = require('react'); - -const { - storiesOf -} = require('@kadira/storybook'); - -const Radio = require('./'); - -storiesOf('Radio', module) - .add('Default', () => ( - - Video killed the radio star - - )) - .add('Checked', () => ( - - )) - .add('Disabled', () => ( - - )); \ No newline at end of file diff --git a/ui/src/components/row/index.js b/ui/src/components/row/index.js index a6709599..695fead4 100644 --- a/ui/src/components/row/index.js +++ b/ui/src/components/row/index.js @@ -3,11 +3,14 @@ * github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Row.js */ +const Styled = require('styled-components'); +const React = require('react'); + +const Column = require('../column'); const composers = require('../../shared/composers'); const constants = require('../../shared/constants'); const match = require('../../shared/match'); const sizeMatch = require('./size-match'); -const Styled = require('styled-components'); const { breakpoints, @@ -56,7 +59,7 @@ const alignItems = (size) => match(sizeMatch(size, { * * ``` **/ -const Row = styled.div` +const StyledRow = styled.div` box-sizing: border-box; display: flex; flex: 0 1 auto; @@ -76,7 +79,6 @@ const Row = styled.div` justify-content: ${justify('sm')}; text-align: ${textAlign('sm')}; align-items: ${alignItems('sm')}; - `} ${breakpoints.medium` @@ -94,6 +96,29 @@ const Row = styled.div` `} `; +const Row = ({ + stretch = false, + children, + ...rest +}) => { + return stretch ? ( + + + {children} + + + ) : ( + + {children} + + ); +}; + +Row.propTypes = { + children: React.PropTypes.node, + stretch: React.PropTypes.bool +}; + module.exports = Baseline( Row ); diff --git a/ui/src/components/select/index.js b/ui/src/components/select/index.js deleted file mode 100644 index e1f94c3b..00000000 --- a/ui/src/components/select/index.js +++ /dev/null @@ -1,102 +0,0 @@ -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'); - -const Label = require('../form/label'); -const LabelRow = require('../form/label-row'); -const Msg = require('../form/msg'); -const Outlet = require('../form/outlet'); -const View = require('../form/view'); - -const { - rndId -} = fns; - -const { - Baseline -} = composers; - -const { - default: styled -} = Styled; - -const defaultValue = rndId(); - -const StyledSelect = styled.select` - ${Outlet} -`; - -const Select = (props) => { - const { - children, - disabled = false, - error = '', - id = rndId(), - label = '', - multiple = false, - name = '', - placeholder = '', - value = defaultValue, - warning = '' - } = props; - - const _label = !label.length ? null : ( - - ); - - const _placeholder = !placeholder ? null : ( - - ); - - const msgType = error ? 'error' : (warning ? 'warning' : null); - - const _msg = !(error || warning) ? null : ( - - {error ? error : warning} - - ); - - return ( - - - {_label} - {_msg} - - - {_placeholder} - {children} - - - ); -}; - -Select.propTypes = { - children: React.PropTypes.node, - disabled: React.PropTypes.bool, - error: React.PropTypes.string, - id: React.PropTypes.string, - label: React.PropTypes.string, - multiple: React.PropTypes.bool, - name: React.PropTypes.string, - placeholder: React.PropTypes.string, - value: React.PropTypes.string, - warning: React.PropTypes.string -}; - -module.exports = reduxFormProxy( - Baseline(Select) -); diff --git a/ui/src/components/select/readme.md b/ui/src/components/select/readme.md deleted file mode 100644 index 78684710..00000000 --- a/ui/src/components/select/readme.md +++ /dev/null @@ -1,60 +0,0 @@ -# Select - - -## 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 Select = require('./index.js'); - -nmodule.exports = ReactDOM.renderToString( - - - - - - - - - - - - -); -``` - -## usage - -```js -const React = require('react'); -const Select = require('ui/select'); - -module.exports = () => { - return ( - - ); -} -``` diff --git a/ui/src/components/select/story.js b/ui/src/components/select/story.js deleted file mode 100644 index 697d5833..00000000 --- a/ui/src/components/select/story.js +++ /dev/null @@ -1,80 +0,0 @@ -const React = require('react'); - -const { - storiesOf -} = require('@kadira/storybook'); - -const Select = require('./'); -const Base = require('../base'); - - -storiesOf('Select', module) - .add('Default', () => ( - - - - )) - .add('disabled', () => ( - - - - )) - .add('selected', () => ( - - - - )) - .add('multiple', () => ( - - - - )) - .add('warning', () => ( - - - - )) - .add('error', () => ( - - - - )); diff --git a/ui/src/components/table-data-table/index.js b/ui/src/components/table-data-table/index.js index 3dfd5648..14a5d320 100644 --- a/ui/src/components/table-data-table/index.js +++ b/ui/src/components/table-data-table/index.js @@ -23,12 +23,13 @@ const StyledTableWrapper = styled.section` const Table = ({ children, + className, columns = [], data = [], style, title }) => ( - + {title} ( - + {children} ); Table.propTypes = { children: React.PropTypes.node, + className: React.PropTypes.string, style: React.PropTypes.object, - title: React.PropTypes.string, + title: React.PropTypes.string }; module.exports = Baseline( diff --git a/ui/src/components/textarea/readme.md b/ui/src/components/textarea/readme.md deleted file mode 100644 index e199c638..00000000 --- a/ui/src/components/textarea/readme.md +++ /dev/null @@ -1,60 +0,0 @@ -# Input - -## 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 Input = require('./index.js'); - -nmodule.exports = ReactDOM.renderToString( - - - - - We'll never share your email with anyone else. - - - - - - - Password - - - - -); -``` - -## usage - -```js -const React = require('react'); -const Input = require('ui/input'); - -module.exports = () => { - return ( -
- - We'll never share your email with anyone else. - - - Password - -
- ); -} -``` diff --git a/ui/src/components/textarea/story.js b/ui/src/components/textarea/story.js deleted file mode 100644 index d74a5ee3..00000000 --- a/ui/src/components/textarea/story.js +++ /dev/null @@ -1,24 +0,0 @@ -const React = require('react'); - -const { - storiesOf -} = require('@kadira/storybook'); - -const Base= require('../base'); -const Textarea = require('./'); - -storiesOf('Textarea', module) - .add('Default', () => ( - -