feat(Form): Add form related components

src/components/Form/Checkbox.js

@@ -0,0 +1 @@
+export { Checkbox as default } from 'react-bootstrap';

src/components/Form/ControlLabel.js

@@ -0,0 +1 @@
+export { ControlLabel as default } from 'react-bootstrap';

src/components/Form/Form.js

@@ -0,0 +1 @@
+export { Form as default } from 'react-bootstrap';

src/components/Form/Form.stories.js

@@ -0,0 +1,254 @@
+/* eslint react/prop-types: 0 */
+
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+import { defaultTemplate } from '../../../storybook/decorators/storyTemplates';
+import { Icon } from '../Icon';
+import { Col, Row, Grid } from '../Grid';
+import { Button } from '../Button';
+import { Modal } from '../Modal';
+import { Form } from './index';
+
+import {
+  InlineFormFields,
+  InlineFormButtons,
+  getInlineFormKnobs
+} from './Stories/InlineForm';
+import {
+  BasicFormFields,
+  BasicFormButtons,
+  BasicFormSpinner,
+  getBasicFormKnobs
+} from './Stories/BasicForm';
+import {
+  SupportedControlsFormFields,
+  getSupportedControlsFormKnobs
+} from './Stories/SupportedControlsForm';
+import {
+  InputGroupsFormFields,
+  getInputGroupsFormKnobs
+} from './Stories/InputGroupsForm';
+import { InlineFormField } from './Stories/InlineFormField';
+import { HorizontalFormField } from './Stories/HorizontalFormField';
+import { VerticalFormField } from './Stories/VerticalFormField';
+
+const stories = storiesOf('Forms', module);
+
+stories.addDecorator(withKnobs);
+
+const description = (
+  <p>
+    Those components are based on React Bootstrap Form components. See{' '}
+    <a href="https://react-bootstrap.github.io/components/forms/">
+      React Bootstrap Docs
+    </a>{' '}
+    for complete Form components documentation.
+  </p>
+);
+
+stories.addDecorator(
+  defaultTemplate({
+    title: 'Forms',
+    documentationLink:
+      'http://www.patternfly.org/pattern-library/widgets/#forms',
+    description: description
+  })
+);
+
+stories.addWithInfo('Inline Form', '', () => {
+  const formFieldsKnobs = getInlineFormKnobs();
+  const { bsSize, disabled } = formFieldsKnobs;
+  const buttonsProps = {};
+
+  if (bsSize) buttonsProps.bsSize = bsSize;
+  if (disabled) buttonsProps.disabled = disabled;
+
+  const formFields = InlineFormFields.map(formField =>
+    InlineFormField({ ...formField, ...formFieldsKnobs })
+  ).reduce((result = [], element) => {
+    return [...result, element, ' ']; // create spacing betwwen elements
+  }, []);
+
+  const formButtons = InlineFormButtons.map(({ text, ...props }) => (
+    <Button key={text} {...props} {...buttonsProps}>
+      {text}
+    </Button>
+  ));
+
+  return (
+    <Grid>
+      <Form inline>
+        {formFields} {formButtons}
+      </Form>
+    </Grid>
+  );
+});
+
+stories.addWithInfo('Horizontal Form', '', () => {
+  const formFieldsKnobs = getBasicFormKnobs();
+  const { bsSize, disabled } = formFieldsKnobs;
+  const buttonsProps = {};
+
+  if (bsSize) buttonsProps.bsSize = bsSize;
+  if (disabled) buttonsProps.disabled = disabled;
+
+  const showLoading = boolean('Show Loading', false);
+
+  const formFields = BasicFormFields.map(formField =>
+    HorizontalFormField({ ...formField, ...formFieldsKnobs })
+  );
+
+  const formButtons = BasicFormButtons.map(({ text, ...props }) => (
+    <span key={text}>
+      <Button {...props} {...buttonsProps}>
+        {text}
+      </Button>{' '}
+    </span>
+  ));
+
+  return (
+    <Grid>
+      <Form horizontal>
+        {formFields}
+        <Row style={{ paddingTop: '10px', paddingBottom: '10px' }}>
+          <Col smOffset={3} sm={9}>
+            {formButtons}
+          </Col>
+        </Row>
+        {showLoading && (
+          <Row style={{ paddingTop: '10px', paddingBottom: '10px' }}>
+            <Col smOffset={3} sm={9}>
+              {[...BasicFormSpinner]}
+            </Col>
+          </Row>
+        )}
+      </Form>
+    </Grid>
+  );
+});
+
+stories.addWithInfo('Vertical Form', '', () => {
+  const formFieldsKnobs = getBasicFormKnobs();
+  const { bsSize, disabled } = formFieldsKnobs;
+  const buttonsProps = {};
+
+  if (bsSize) buttonsProps.bsSize = bsSize;
+  if (disabled) buttonsProps.disabled = disabled;
+
+  const showLoading = boolean('Show Loading', false);
+
+  const formFields = BasicFormFields.map(formField =>
+    VerticalFormField({ ...formField, ...formFieldsKnobs })
+  );
+
+  const formButtons = BasicFormButtons.map(({ text, ...props }) => (
+    <span key={text}>
+      <Button {...props} {...buttonsProps}>
+        {text}
+      </Button>{' '}
+    </span>
+  ));
+
+  return (
+    <Grid>
+      <Form>
+        <Row>
+          <Col>{formFields}</Col>
+        </Row>
+        <Row style={{ paddingTop: '10px', paddingBottom: '10px' }}>
+          <Col>{formButtons}</Col>
+        </Row>
+        {showLoading && (
+          <Row style={{ paddingTop: '10px', paddingBottom: '10px' }}>
+            <Col>{BasicFormSpinner}</Col>
+          </Row>
+        )}
+      </Form>
+    </Grid>
+  );
+});
+
+stories.addWithInfo('Modal Form', '', () => {
+  const formFieldsKnobs = getBasicFormKnobs();
+  const { bsSize, disabled } = formFieldsKnobs;
+  const buttonsProps = {};
+
+  if (bsSize) buttonsProps.bsSize = bsSize;
+  if (disabled) buttonsProps.disabled = disabled;
+
+  const showModal = boolean('Show Modal', true);
+  const showLoading = boolean('Show Loading', false);
+
+  const formFields = BasicFormFields.map(formField =>
+    HorizontalFormField({ ...formField, ...formFieldsKnobs })
+  );
+
+  const formButtons = BasicFormButtons.map(({ text, ...props }) => (
+    <Button key={text} {...props} {...buttonsProps}>
+      {text}
+    </Button>
+  )).reverse();
+
+  const formSpinner = (
+    <div style={{ paddingTop: '20px', paddingBottom: '10px' }}>
+      {[...BasicFormSpinner].reverse()}
+    </div>
+  );
+
+  return (
+    <Modal show={showModal}>
+      <Modal.Header>
+        <button
+          className="close"
+          onClick={action('Close')}
+          aria-hidden="true"
+          aria-label="Close"
+        >
+          <Icon type="pf" name="close" />
+        </button>
+        <Modal.Title>Basic Settings</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Form horizontal>{formFields}</Form>
+      </Modal.Body>
+      <Modal.Footer>
+        {formButtons}
+        {showLoading && formSpinner}
+      </Modal.Footer>
+    </Modal>
+  );
+});
+
+stories.addWithInfo('Supported Controls', '', () => {
+  const formFieldsKnobs = getSupportedControlsFormKnobs();
+
+  const formFields = SupportedControlsFormFields.map(formField =>
+    VerticalFormField({ ...formField, ...formFieldsKnobs })
+  );
+
+  return (
+    <Grid>
+      <Form>{formFields}</Form>
+    </Grid>
+  );
+});
+
+stories.addWithInfo('Input Groups', '', () => {
+  const formFieldsKnobs = getInputGroupsFormKnobs();
+
+  const formFields = InputGroupsFormFields.map(formField =>
+    VerticalFormField({ ...formField, ...formFieldsKnobs })
+  );
+
+  return (
+    <Grid>
+      <Form>
+        <Row>
+          <Col>{formFields}</Col>
+        </Row>
+      </Form>
+    </Grid>
+  );
+});

src/components/Form/FormControl.js

@@ -0,0 +1 @@
+export { FormControl as default } from 'react-bootstrap';

src/components/Form/FormGroup.js

@@ -0,0 +1 @@
+export { FormGroup as default } from 'react-bootstrap';

src/components/Form/HelpBlock.js

@@ -0,0 +1 @@
+export { HelpBlock as default } from 'react-bootstrap';

src/components/Form/InputGroup.js

@@ -0,0 +1 @@
+export { InputGroup as default } from 'react-bootstrap';

src/components/Form/Radio.js

@@ -0,0 +1 @@
+export { Radio as default } from 'react-bootstrap';

src/components/Form/Stories/BasicForm.js

@@ -0,0 +1,94 @@
+/* eslint react/prop-types: 0 */
+
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { select, boolean } from '@storybook/addon-knobs';
+import { Spinner } from '../../Spinner';
+import { Button } from '../../Button';
+import { FormControl, InputGroup } from '../index';
+
+export const BasicFormFields = [
+  {
+    controlId: 'name',
+    label: 'Name',
+    help: 'Enter your name',
+    formControl: ({ validationState, ...props }) => (
+      <FormControl type="text" {...props} />
+    )
+  },
+  {
+    controlId: 'address',
+    label: 'Address',
+    help: 'Enter your address',
+    formControl: ({ validationState, ...props }) => (
+      <FormControl type="address" {...props} />
+    )
+  },
+  {
+    controlId: 'city',
+    label: 'City',
+    help: 'Enter your city',
+    formControl: ({ validationState, ...props }) => (
+      <FormControl type="text" {...props} />
+    )
+  },
+  {
+    controlId: 'email',
+    label: 'Email',
+    help: 'Enter a valid email address',
+    formControl: ({ validationState, ...props }) => (
+      <FormControl type="email" {...props} />
+    )
+  },
+  {
+    controlId: 'url',
+    label: 'My meeting URL',
+    help: 'Enter a valid URL',
+    formControl: ({ validationState, disabled, ...props }) => {
+      const controlProps = { disabled };
+      return (
+        <InputGroup {...props}>
+          <FormControl type="url" {...controlProps} />
+          <InputGroup.Button>
+            <Button onClick={action('CopyUrl')} {...controlProps}>
+              Copy URL
+            </Button>
+          </InputGroup.Button>
+        </InputGroup>
+      );
+    }
+  }
+];
+
+export const BasicFormButtons = [
+  {
+    text: 'Save',
+    bsStyle: 'primary',
+    onClick: action('Save')
+  },
+  {
+    text: 'Cancel',
+    bsStyle: 'default',
+    onClick: action('Cancel')
+  }
+];
+
+export const BasicFormSpinner = [
+  <Spinner key="spinner" size="xs" loading inline />,
+  ' ',
+  <span key="text">
+    Do not refresh this page. This request may take a minute...
+  </span>
+];
+
+export const getBasicFormKnobs = () => ({
+  validationState: select('Validation State', [
+    null,
+    'success',
+    'warning',
+    'error'
+  ]),
+  bsSize: select('Size', [null, 'small', 'large']),
+  showHelp: boolean('Show Help', true),
+  disabled: boolean('Disabled', false)
+});