Added some basic shared components, utils, hooks

client/src/shared/components/Textarea/Styles.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+import { color, font } from 'shared/utils/styles';
+
+export default styled.div`
+  display: inline-block;
+  width: 100%;
+  textarea {
+    width: 100%;
+    padding: 13px 15px 14px;
+    border-radius: 4px;
+    border: 1px solid ${color.borderLight};
+    box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.03);
+    background: #fff;
+    overflow-y: hidden;
+    ${font.regular}
+    ${font.size(14)}
+    &:focus {
+      border: 1px solid ${color.borderMedium};
+    }
+    ${props => (props.invalid ? `&, &:focus { border: 1px solid ${color.danger}; }` : '')}
+  }
+`;

client/src/shared/components/Textarea/index.jsx

@@ -0,0 +1,36 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import TextareaAutoSize from 'react-textarea-autosize';
+
+import StyledTextarea from './Styles';
+
+const propTypes = {
+  className: PropTypes.string,
+  invalid: PropTypes.bool,
+  minRows: PropTypes.number,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+const defaultProps = {
+  className: undefined,
+  invalid: false,
+  minRows: 2,
+  value: undefined,
+  onChange: () => {},
+};
+
+const Textarea = forwardRef(({ className, invalid, onChange, ...textareaProps }, ref) => (
+  <StyledTextarea className={className} invalid={invalid}>
+    <TextareaAutoSize
+      {...textareaProps}
+      onChange={event => onChange(event, event.target.value)}
+      ref={ref}
+    />
+  </StyledTextarea>
+));
+
+Textarea.propTypes = propTypes;
+Textarea.defaultProps = defaultProps;
+
+export default Textarea;