Feature/form group validation

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@kadira/storybook/addons';
+import '@kadira/storybook-addon-knobs/register'

package.json

@@ -33,6 +33,7 @@
   },
   "devDependencies": {
     "@kadira/storybook": "^2.21.0",
+    "@kadira/storybook-addon-knobs": "^1.7.1",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
     "babel-eslint": "^7.2.3",

spec/components/bootstrap/inputs/FormGroup.spec.js

@@ -20,6 +20,7 @@ describe('FormGroup', () => {
 
     expect(component.find(Label)).toHaveLength(1)
     expect(component.find(Text)).toHaveLength(1)
+    expect(component.hasClass('has-danger')).toBeFalsy()
   })
 
   it('should render FormGroup without label', () => {
@@ -37,4 +38,38 @@ describe('FormGroup', () => {
 
     expect(component.find(Text)).toHaveLength(0)
   })
+
+  describe('validation', () => {
+    it('should render has-danger css class', () => {
+      component.setProps({
+        hasDanger: true,
+      })
+
+      expect(component.hasClass('has-danger')).toBeTruthy()
+    })
+
+    it('should render has-error css class', () => {
+      component.setProps({
+        hasError: true,
+      })
+
+      expect(component.hasClass('has-error')).toBeTruthy()
+    })
+
+    it('should render has-success css class', () => {
+      component.setProps({
+        hasSuccess: true,
+      })
+
+      expect(component.hasClass('has-success')).toBeTruthy()
+    })
+
+    it('should render has-warning css class', () => {
+      component.setProps({
+        hasWarning: true,
+      })
+
+      expect(component.hasClass('has-warning')).toBeTruthy()
+    })
+  })
 })

src/components/bootstrap/inputs/FormGroup.js

@@ -1,10 +1,36 @@
 import React from 'react'
+import { compose, withProps } from 'recompose'
+import { compact } from 'lodash'
 
-const FormGroup = ({ input, label }) => (
-  <div className="form-group">
+const FormGroup = ({ className, input, label }) => (
+  <div className={className}>
     {label}
     {input}
   </div>
 )
 
-export default FormGroup
+const parseValidation = ({
+  hasDanger,
+  hasError,
+  hasSuccess,
+  hasWarning,
+}) => (
+  (hasDanger && 'has-danger') ||
+  (hasError && 'has-error') ||
+  (hasSuccess && 'has-success') ||
+  (hasWarning && 'has-warning') ||
+  ''
+)
+
+const parseFormGroupCssClass = ({ className, ...rest }) => (
+  compact([
+    'form-group',
+    parseValidation(rest),
+  ]).join(' ')
+)
+
+export default compose(
+  withProps(props => ({
+    className: parseFormGroupCssClass(props),
+  })),
+)(FormGroup)

src/components/bootstrap/inputs/InputGroup.js

@@ -1,18 +1,18 @@
 import React from 'react'
-import _ from 'lodash'
+import { isArray } from 'lodash'
 
 const InputGroup = ({ children, leftAddon, rightAddon }) => (
   <div className="input-group">
     {leftAddon && (
-      (_.isArray(leftAddon) ? leftAddon : [leftAddon]).map((addon, index) => (
+      (isArray(leftAddon) ? leftAddon : [leftAddon]).map((addon, index) => (
         <span key={index} className="input-group-addon">
           {addon}
         </span>
       ))
     )}
     {children}
     {rightAddon && (
-      (_.isArray(rightAddon) ? rightAddon : [rightAddon]).map((addon, index) => (
+      (isArray(rightAddon) ? rightAddon : [rightAddon]).map((addon, index) => (
         <span key={index} className="input-group-addon">
           {addon}
         </span>

src/components/inputs/Select.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { compose, withProps, withHandlers } from 'recompose'
 import ReactSelect from 'react-select'
-import _ from 'lodash'
+import { isArray, isEqual } from 'lodash'
 
 import 'react-select/dist/react-select.css'
 
@@ -31,12 +31,12 @@ export default compose(
       }
 
       const newValueId = (
-        _.isArray(newValue) ?
+        isArray(newValue) ?
           newValue.map(v => v.id) :
           newValue.id
       )
 
-      if (_.isEqual(value, newValueId)) {
+      if (isEqual(value, newValueId)) {
         return
       }
 

stories/components/bootstrap/inputs/FormGroup.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { storiesOf } from '@kadira/storybook'
+import { boolean } from '@kadira/storybook-addon-knobs'
 
 import { FormGroup, Icon, InputGroup, Label } from '../../../../src'
 import { DatePickerWithState } from '../../inputs/DatePicker'
@@ -10,7 +11,11 @@ export default () => {
   storiesOf('Bootstrap > FormGroup', module)
     .add('Default', () => (
       <FormGroup
-        label={<Label>Name</Label>}
+        hasDanger={boolean('has-danger')}
+        hasError={boolean('has-error')}
+        hasSuccess={boolean('has-success')}
+        hasWarning={boolean('has-warning')}
+        label={<Label className="form-control-label">Name</Label>}
         input={
           <TextWithState
             className="form-control"

stories/index.js

@@ -1,5 +1,10 @@
-import Welcome from './Welcome'
-import components from './components'
+import { addDecorator } from '@kadira/storybook'
+import { withKnobs } from '@kadira/storybook-addon-knobs'
 
-Welcome()
-components()
+import addWelcome from './Welcome'
+import addComponents from './components'
+
+addDecorator(withKnobs)
+
+addWelcome()
+addComponents()

yarn.lock

@@ -14,6 +14,18 @@
     json-stringify-safe "^5.0.1"
     react-inspector "^1.1.0"
 
+"@kadira/storybook-addon-knobs@^1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@kadira/storybook-addon-knobs/-/storybook-addon-knobs-1.7.1.tgz#5c6278c2c67652408358a7ee49e789fd1396b831"
+  dependencies:
+    babel-runtime "^6.5.0"
+    deep-equal "^1.0.1"
+    insert-css "^1.0.0"
+    moment "^2.15.0"
+    react-color "^2.4.3"
+    react-datetime "^2.6.0"
+    react-textarea-autosize "^4.0.5"
+
 "@kadira/storybook-addon-links@^1.0.0":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@kadira/storybook-addon-links/-/storybook-addon-links-1.0.1.tgz#566136a8020b60f82f146ef37d93b0c86de969d8"
@@ -2955,6 +2967,10 @@ inquirer@^0.12.0:
     strip-ansi "^3.0.0"
     through "^2.3.6"
 
+insert-css@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/insert-css/-/insert-css-1.1.0.tgz#4a3f7a3e783877381bb8471a6452d1d27315db9e"
+
 interpret@^0.6.4:
   version "0.6.6"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-0.6.6.tgz#fecd7a18e7ce5ca6abfb953e1f86213a49f1625b"
@@ -3741,7 +3757,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-lodash@4.x.x, lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
+lodash@4.x.x, lodash@^4.0.0, lodash@^4.0.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
@@ -3784,6 +3800,10 @@ mantra-core@^1.7.0:
     react-komposer "^1.9.0"
     react-simple-di "^1.2.0"
 
+material-colors@^1.2.1:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.5.tgz#5292593e6754cb1bcc2b98030e4e0d6a3afc9ea1"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
@@ -3878,7 +3898,7 @@ mobx@^2.3.4:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/mobx/-/mobx-2.7.0.tgz#cf3d82d18c0ca7f458d8f2a240817b3dc7e54a01"
 
-moment@^2.17.1, moment@^2.18.1:
+moment@^2.15.0, moment@^2.17.1, moment@^2.18.1:
   version "2.18.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
 
@@ -4048,6 +4068,10 @@ oauth-sign@~0.8.1:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
 
+object-assign@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
+
 object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -4677,6 +4701,16 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-color@^2.4.3:
+  version "2.11.7"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.11.7.tgz#746465b75feda63c2567607dfbcb276fc954a5b7"
+  dependencies:
+    lodash "^4.0.1"
+    material-colors "^1.2.1"
+    prop-types "^15.5.4"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.1.2"
+
 react-datepicker@^0.46.0:
   version "0.46.0"
   resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-0.46.0.tgz#dd0c58efde9931964a248854e073151374fc937f"
@@ -4687,6 +4721,15 @@ react-datepicker@^0.46.0:
     react-onclickoutside "^5.11.1"
     tether "^1.4.0"
 
+react-datetime@^2.6.0:
+  version "2.8.10"
+  resolved "https://registry.yarnpkg.com/react-datetime/-/react-datetime-2.8.10.tgz#06d4317b7734310e0e8109555526656128346132"
+  dependencies:
+    create-react-class "^15.5.2"
+    object-assign "^3.0.0"
+    prop-types "^15.5.7"
+    react-onclickoutside "^5.9.0"
+
 react-docgen@^2.12.1:
   version "2.14.1"
   resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-2.14.1.tgz#29810af1b181957c989390f18048a12c11812169"
@@ -4757,7 +4800,7 @@ react-modal@^1.2.0, react-modal@^1.2.1:
     lodash.assign "^4.2.0"
     prop-types "^15.5.7"
 
-react-onclickoutside@^5.11.1:
+react-onclickoutside@^5.11.1, react-onclickoutside@^5.9.0:
   version "5.11.1"
   resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-5.11.1.tgz#00314e52567cf55faba94cabbacd119619070623"
   dependencies:
@@ -4790,6 +4833,12 @@ react-test-renderer@^15.5.4:
     fbjs "^0.8.9"
     object-assign "^4.1.0"
 
+react-textarea-autosize@^4.0.5:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-4.2.2.tgz#57f0b676a8845afd0d0f9dde42efe8d9c063f62e"
+  dependencies:
+    prop-types "^15.5.8"
+
 react@^15.5.4:
   version "15.5.4"
   resolved "https://registry.yarnpkg.com/react/-/react-15.5.4.tgz#fa83eb01506ab237cdc1c8c3b1cea8de012bf047"
@@ -4799,6 +4848,12 @@ react@^15.5.4:
     object-assign "^4.1.0"
     prop-types "^15.5.7"
 
+reactcss@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.2.tgz#41b0ef43e01d54880357c34b11ac1531209350ef"
+  dependencies:
+    lodash "^4.0.1"
+
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -5480,6 +5535,10 @@ timers-browserify@^2.0.2:
   dependencies:
     setimmediate "^1.0.4"
 
+tinycolor2@^1.1.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
+
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"