implement SelectorInput (#18)

.storybook/stories.js

@@ -1,2 +1,3 @@
 require('../src/components/Header/Header.story');
 require('../src/components/Countdown/Countdown.story.js');
+require('../src/components/SelectorInput/SelectorInput.story.js');

src/components/SelectorInput/SelectorInput.js

@@ -0,0 +1,47 @@
+import { h } from 'preact';
+
+import * as Colors from './selector-input-color-palette';
+
+const SelectorInput = ({ onChange, disabled }) => (
+    <input
+        type="text"
+        onChange={e => onChange(e.target.value)}
+        disabled={disabled}
+        placeholder="Enter your selector here..."
+    >
+        <style jsx>{`
+            input {
+                width: 100%;
+                flex: 1;
+                box-sizing: border-box;
+                outline: none;
+                padding: 20px;
+                background: ${Colors.BACKGROUND};
+                border: 1px solid ${Colors.BORDER};
+                border-radius: 3px;
+                color: ${Colors.TEXT};
+                align-self: center;
+                font-family: monospace;
+                font-size: 16px;
+            }
+
+            input:focus {
+                border: 1px solid ${Colors.BORDER_FOCUSED};
+                box-shadow:
+                    0 0 4px 0px ${Colors.BOX_SHADOW_FOCUSED} inset,
+                    0 0 4px 0px ${Colors.BOX_SHADOW_FOCUSED};
+            }
+
+            input:disabled {
+                background: ${Colors.BACKGROUND_DISABLED};
+                color: ${Colors.TEXT_DISABLED};
+            }
+
+            input::placeholder {
+                color: ${Colors.PLACEHOLDER};
+            }
+        `}</style>
+    </input>
+);
+
+export { SelectorInput };

src/components/SelectorInput/SelectorInput.story.js

@@ -0,0 +1,18 @@
+import { h } from 'preact';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { SelectorInput } from './SelectorInput';
+
+storiesOf('SelectorInput', module)
+    .add('default', () => (
+        <SelectorInput
+            onChange={action('onChange')}
+        />
+    ))
+    .add('disabled', () => (
+        <SelectorInput
+            onChange={action('onChange')}
+            disabled
+        />
+    ));

src/components/SelectorInput/selector-input-color-palette.js

@@ -0,0 +1,10 @@
+export const BACKGROUND = '#2f5e5a';
+export const BORDER = '#739c92';
+export const TEXT = '#fff';
+export const PLACEHOLDER = '#badece';
+
+export const BORDER_FOCUSED = 'rgba(248, 217, 64, 0.4)';
+export const BOX_SHADOW_FOCUSED = 'rgba(248, 217, 64, 0.2)';
+
+export const BACKGROUND_DISABLED = 'rgba(84, 165, 158, 0.5)';
+export const TEXT_DISABLED = '#b5bdbd';