Init

Preview: http://dashboards.webkom.co/react/airframe

app/routes/Forms/DatePicker/components/AddonInput.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+    InputGroup,
+    InputGroupAddon,
+    Input
+} from './../../../../components';
+
+// eslint-disable-next-line react/display-name
+const AddonInputFR = React.forwardRef((props, ref) => (
+    <InputGroup className={props.className}>
+        <InputGroupAddon addonType="prepend">
+            <i className="fa fa-calendar-o"></i>
+        </InputGroupAddon>
+        <Input
+            onClick={ props.onClick }
+            onChange={ props.onChange }
+            value={ props.value }
+            ref={ ref }
+        />
+    </InputGroup>
+));
+AddonInputFR.propTypes = {
+    onClick: PropTypes.func,
+    onChange: PropTypes.func,
+    value: PropTypes.string,
+    className: PropTypes.string
+}
+
+export { AddonInputFR as AddonInput };

app/routes/Forms/DatePicker/components/ButtonInput.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+    Button
+} from './../../../../components';
+
+// eslint-disable-next-line react/display-name
+const ButtonInputFR = React.forwardRef((props, ref) => (
+    <Button outline
+        onClick={props.onClick}
+        ref={ref}
+    >
+        <i className="fa fa-fw fa-calendar-o mr-1" />
+        { props.value }
+    </Button>
+));
+ButtonInputFR.propTypes = {
+    onClick: PropTypes.func,
+    value: PropTypes.string
+}
+
+export { ButtonInputFR as ButtonInput };

app/routes/Forms/DatePicker/components/Example.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+    Row,
+    Col,
+    FormGroup,
+    Label
+} from './../../../../components';
+
+export const Example = ({ title, exampleInput, children, no }) => (
+    <Row>
+        <Col sm={ 12 }>
+            <h6>
+                { title }
+                <span className="small ml-1 text-muted">
+                    #{ no }
+                </span>
+            </h6>
+        </Col>
+        <Col md={ 12 }>
+            <FormGroup>
+                <Label>
+                    Example
+                </Label>
+                <div>
+                    { exampleInput }
+                </div>
+            </FormGroup>
+        </Col>
+        <Col md={ 12 }>
+            <FormGroup>
+                <Label>
+                    Code
+                </Label>
+                <pre>
+                    <code>
+                        { children }
+                    </code>
+                </pre>
+            </FormGroup>
+        </Col>
+    </Row>
+);
+
+Example.propTypes = {
+    exampleInput: PropTypes.node.isRequired,
+    children: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    no:  PropTypes.node.isRequired
+}

app/routes/Forms/DatePicker/components/index.js

@@ -0,0 +1,3 @@
+export * from './Example';
+export * from './ButtonInput';
+export * from './AddonInput';