feat(NumberInput): add basic component

src/Input/NumberInput/README.md

@@ -0,0 +1 @@
+<!-- STORY -->

src/Input/NumberInput/__stories__/NumberInput.stories.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, number, select, text, boolean } from '@storybook/addon-knobs/react';
+import { action } from '@storybook/addon-actions';
+import { State, Store } from '@sambego/storybook-state';
+import { NumberInput } from '../..';
+import { Data as IconNames } from '../../../Icon/data';
+
+const onChangeAction = action('onChange');
+const onFocusAction = action('onFocus');
+const onBlurAction = action('onBlur');
+
+storiesOf('Input - NumberInput', module)
+  .addDecorator(withKnobs)
+  .add('default', () => {
+    // - - - Appearance knobs - - -
+    const validateValue = boolean('Validate', true, 'Appearance');
+
+    // - - - Range knobs - - -
+    const stepValue = number(
+      'Step',
+      1,
+      {
+        range: true,
+        min: 0.1,
+        max: 2.0,
+        step: 0.1,
+      },
+      'Range',
+    );
+
+    // - - - Format knobs - - -
+    const decimalsValue = number(
+      'Decimals',
+      2,
+      {
+        range: true,
+        min: 0,
+        max: 4,
+        step: 1,
+      },
+      'Format',
+    );
+    const defaultSeparatorValue = boolean('Use default separator', true, 'Format');
+    const separatorValue = text('Separator', ',', 'Format');
+
+    return (
+      <NumberInput
+        validate={validateValue}
+        min={0}
+        max={15}
+        step={stepValue}
+        decimals={decimalsValue}
+        separator={defaultSeparatorValue ? undefined : separatorValue || '.'}
+        onChange={value => onChangeAction(value)}
+      />
+    );
+  });

src/Input/NumberInput/__tests__/NumberInput.test.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import 'jest-styled-components';
+
+import NumberInput from '..';
+
+describe('<NumberInput />', () => {
+  it('should render withouth a problem', () => {
+    const render = mountWithTheme(<NumberInput />);
+    expect(render).toMatchSnapshot();
+  });
+
+  it('should render withouth a problem when focused and unfocused', () => {
+    const render = mountWithTheme(<NumberInput />);
+
+    render.find('input').simulate('focus');
+    expect(render).toMatchSnapshot();
+
+    render.find('input').simulate('blur');
+    expect(render).toMatchSnapshot();
+  });
+});

src/Input/NumberInput/__tests__/__snapshots__/NumberInput.test.js.snap

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NumberInput /> should render withouth a problem 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 25rem;
+  height: 4rem;
+  overflow: hidden;
+  border-radius: 0.4rem;
+  border: 1px solid hsl(218,18%,91%);
+  background-color: hsl(0,100%,100%);
+}
+
+.c1 {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  height: 100%;
+  background-color: hsl(0,100%,100%);
+  margin: 0 0.7rem;
+  border-radius: 0.4rem;
+  font-size: 1.2rem;
+  border: none;
+  padding: 0;
+  text-align: left;
+}
+
+.c1:focus,
+.c1:active {
+  outline: none;
+}
+
+<NumberInput
+  decimals={0}
+  max={null}
+  min={null}
+  onChange={[Function]}
+  separator="\\\\."
+  step={1}
+  validate={false}
+>
+  <TextInput
+    _onBlur={[Function]}
+    _onFocus={[Function]}
+    disabled={false}
+    error={false}
+    fluid={false}
+    id=""
+    info={false}
+    label={null}
+    labelPosition="left"
+    loading={false}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    password={false}
+    placeHolder=""
+    search={false}
+    success={false}
+    tabIndex="0"
+    value="0"
+    warning={false}
+    width="25rem"
+  >
+    <styled.div
+      disabled={false}
+      error={false}
+      hasFocus={false}
+      info={false}
+      success={false}
+      warning={false}
+      width="25rem"
+    >
+      <div
+        className="c0"
+        disabled={false}
+        width="25rem"
+      >
+        <styled.input
+          disabled={false}
+          id=""
+          innerRef={[Function]}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder=""
+          tabIndex="0"
+          type="text"
+          value="0"
+        >
+          <input
+            className="c1"
+            disabled={false}
+            id=""
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder=""
+            tabIndex="0"
+            type="text"
+            value="0"
+          />
+        </styled.input>
+      </div>
+    </styled.div>
+  </TextInput>
+</NumberInput>
+`;