Merge pull request #13 from andrerfneves/feature/input

Feature/input

app/components/Input.mdx

@@ -0,0 +1,26 @@
+---
+name: Input
+---
+
+import { Playground, PropsTable } from 'docz'
+
+import { InputComponent } from './input.js'
+import { DoczWrapper } from '../theme.js'
+
+# Input
+
+<PropsTable of={InputComponent} />
+
+## Text Input
+
+<Playground>
+  <DoczWrapper>{() => <InputComponent inputType="input" value="Hello World!" onChange={console.log} />}</DoczWrapper>
+</Playground>
+
+## Textarea
+
+<Playground>
+  <DoczWrapper>
+    {() => <InputComponent inputType="textarea" value="I'm ZCash Electron Wallet" onChange={console.log} rows={10} />}
+  </DoczWrapper>
+</Playground>

app/components/input.js

@@ -0,0 +1,53 @@
+// @flow
+import React from 'react';
+
+import styled from 'styled-components';
+
+// TODO: Missing styles
+
+const defaultStyles = `
+  padding: 10px;
+  width: 100%;
+  outline: none;
+  font-family: ${props => props.theme.fontFamily}
+`;
+
+const Input = styled.input.attrs({
+  type: 'text',
+})`
+  ${defaultStyles};
+`;
+
+const Textarea = styled.textarea`
+  ${defaultStyles};
+`;
+
+type Props = {
+  inputType?: 'input' | 'textarea' | 'dropdown',
+  value: string,
+  onChange: string => void,
+  rows?: number,
+  disabled?: boolean,
+  type?: string,
+};
+
+export const InputComponent = ({ inputType, onChange, ...props }: Props) => {
+  const inputTypes = {
+    input: () => <Input onChange={evt => onChange(evt.target.value)} {...props} />,
+    textarea: () => <Textarea onChange={evt => onChange(evt.target.value)} {...props} />,
+    dropdown: () => null,
+  };
+
+  if (!Object.keys(inputTypes).find(key => key === inputType)) {
+    throw new Error(`Invalid input type: ${inputType}`);
+  }
+
+  return inputTypes[inputType]();
+};
+
+InputComponent.defaultProps = {
+  inputType: 'input',
+  rows: 4,
+  disabled: false,
+  type: 'text',
+};