From 748cdeb2bb24d6fe24fc4519dc6f7e955448c397 Mon Sep 17 00:00:00 2001
From: patomation <patomation@gmail.com>
Date: Wed, 6 May 2020 17:33:41 +0700
Subject: [PATCH 1/2] feat: textArea and select event

---
 package.json                |   2 +-
 src/Input/index.tsx         |  23 ++------
 src/Select/index.tsx        |   4 +-
 src/TextArea/index.test.tsx |  10 ++++
 src/TextArea/index.tsx      | 109 ++++++++++++++++++++++++++++++++++++
 src/TextArea/readme.md      |   7 +++
 src/TextArea/styles.ts      |  42 ++++++++++++++
 src/index.ts                |   1 +
 8 files changed, 176 insertions(+), 22 deletions(-)
 create mode 100644 src/TextArea/index.test.tsx
 create mode 100644 src/TextArea/index.tsx
 create mode 100644 src/TextArea/readme.md
 create mode 100644 src/TextArea/styles.ts

diff --git a/package.json b/package.json
index 6fe4a46..c133721 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patomation/ui",
-  "version": "2.0.0-beta16",
+  "version": "2.0.0-beta17",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
diff --git a/src/Input/index.tsx b/src/Input/index.tsx
index c41249c..c9bc3a6 100644
--- a/src/Input/index.tsx
+++ b/src/Input/index.tsx
@@ -6,9 +6,8 @@ import Error from '../Error'
 import Gutter from '../Gutter'
 
 interface Props {
-  type?: string
   name?: string
-  onChange?: InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>['onChange']
+  onChange?: InputHTMLAttributes<HTMLInputElement>['onChange']
   onFocus?: () => void
   onBlur?: () => void
   value?: string | number
@@ -29,8 +28,6 @@ interface Props {
   max?: number
   step?: number
   textAlign?: 'center' | 'left' | '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset' | 'right' | 'end' | 'justify' | 'match-parent' | 'start' | undefined
-  cols?: number
-  rows?: number
   prefix?: string
   suffix?: string
   disabled?: boolean
@@ -40,17 +37,14 @@ interface Props {
 * A standardized input component plus textarea
 */
 const Input: FunctionComponent<Props> = ({
-  type, name, onChange, onFocus, onBlur, value, defaultValue, error, placeholder,
+  name, onChange, onFocus, onBlur, value, defaultValue, error, placeholder,
   className, onClick, background, color,
   containerStyle, inputStyle, inputErrorStyle, errorStyle, style,
   textAlign,
-  rows = 3, cols,
   label, min, max, step,
   prefix, suffix,
   disabled
 }) => {
-  const InputType = type === 'textarea' ? 'textarea' : 'input'
-
   return (
     <div
       className={concat('input', className)}
@@ -80,12 +74,9 @@ const Input: FunctionComponent<Props> = ({
         : null
       }
 
-      <InputType
+      <input
         className='input__input'
-        type={type}
         name={name}
-        rows={rows} // textarea
-        cols={cols} // textarea
         min={min}
         max={max}
         step={step}
@@ -101,17 +92,11 @@ const Input: FunctionComponent<Props> = ({
           ...(prefix ? {
             paddingLeft: '2rem'
           } : null),
-          ...(type === 'textarea' ? {
-            textAlign: 'left' as 'left',
-            resize: 'none',
-            padding: '1rem'
-          } : null),
           ...(background ? { background: background } : null),
           ...(color ? { color: color } : null),
           textAlign,
           ...inputStyle,
-          ...(error ? (inputErrorStyle || styles.errorBorder) : null),
-          ...(type === 'textarea' ? { height: 'auto' } : null)
+          ...(error ? (inputErrorStyle || styles.errorBorder) : null)
         }}
         disabled={disabled}/>
 
diff --git a/src/Select/index.tsx b/src/Select/index.tsx
index 615738c..cadce09 100644
--- a/src/Select/index.tsx
+++ b/src/Select/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { FunctionComponent, ReactNode } from 'react'
+import { FunctionComponent, ReactNode, InputHTMLAttributes } from 'react'
 import styles from './styles'
 import concat from '../_utility/concat'
 
@@ -9,7 +9,7 @@ interface Props {
   children?: [ReactNode] | ReactNode
   className?: string
   name?: string
-  onChange?: React.ChangeEventHandler
+  onChange?: InputHTMLAttributes<HTMLSelectElement>['onChange']
   onBlur?: () => void
   value?: string | number
   error?: string | boolean
diff --git a/src/TextArea/index.test.tsx b/src/TextArea/index.test.tsx
new file mode 100644
index 0000000..eaad757
--- /dev/null
+++ b/src/TextArea/index.test.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { mount } from 'enzyme'
+
+import TextArea from './index'
+
+describe('<TextArea />', () => {
+  it('renders', () => {
+    mount(<TextArea />)
+  })
+})
diff --git a/src/TextArea/index.tsx b/src/TextArea/index.tsx
new file mode 100644
index 0000000..2cc0645
--- /dev/null
+++ b/src/TextArea/index.tsx
@@ -0,0 +1,109 @@
+import * as React from 'react'
+import { FunctionComponent, InputHTMLAttributes } from 'react'
+import styles from './styles'
+import concat from '../_utility/concat'
+import Error from '../Error'
+import Gutter from '../Gutter'
+
+interface Props {
+  name?: string
+  onChange?: InputHTMLAttributes<HTMLTextAreaElement>['onChange']
+  onFocus?: () => void
+  onBlur?: () => void
+  value?: string | number
+  defaultValue?: string | number
+  error?: string | boolean
+  placeholder?: string
+  className?: string
+  onClick?: (MouseEvent) => void
+  background?: string
+  color?: string
+  containerStyle?: object
+  inputStyle?: object
+  inputErrorStyle?: object
+  errorStyle?: object
+  style?: object
+  label?: string
+  min?: number
+  max?: number
+  step?: number
+  textAlign?: 'center' | 'left' | '-moz-initial' | 'inherit' | 'initial' | 'revert' | 'unset' | 'right' | 'end' | 'justify' | 'match-parent' | 'start' | undefined
+  cols?: number
+  rows?: number
+  prefix?: string
+  suffix?: string
+  disabled?: boolean
+}
+
+/**
+* A standardized input component plus textarea
+*/
+const Input: FunctionComponent<Props> = ({
+  name, onChange, onFocus, onBlur, value, defaultValue, error, placeholder,
+  className, onClick, background, color,
+  containerStyle, inputStyle, inputErrorStyle, errorStyle, style,
+  textAlign,
+  rows = 3, cols,
+  label, min, max, step,
+  disabled
+}) => {
+  return (
+    <div
+      className={concat('text-area', className)}
+      style={{
+        ...styles.container,
+        position: 'relative',
+        ...style,
+        ...containerStyle
+      }}>
+
+      { label
+        ? <>
+          <label className='text-area__label'> {label} </label>
+          <Gutter half />
+        </>
+        : null }
+
+      <textarea
+        className='textarea__input'
+        name={name}
+        rows={rows} // textarea
+        cols={cols} // textarea
+        onChange={onChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        placeholder={placeholder}
+        value={value}
+        defaultValue={defaultValue}
+        onClick={onClick}
+        style={{
+          ...styles.input,
+          textAlign: textAlign || 'left' as 'left',
+          resize: 'none',
+          padding: '1rem',
+          ...(background ? { background: background } : null),
+          ...(color ? { color: color } : null),
+          ...inputStyle,
+          ...(error ? (inputErrorStyle || styles.errorBorder) : null),
+          height: 'auto'
+        }}
+        disabled={disabled}/>
+
+      { typeof error === 'string'
+        ? <Error
+          className='input__error'
+          style={{
+            ...styles.error,
+            ...errorStyle
+          }}>
+
+          {error}
+
+        </Error>
+        : null }
+
+    </div>
+  )
+}
+
+export default Input
diff --git a/src/TextArea/readme.md b/src/TextArea/readme.md
new file mode 100644
index 0000000..5bd5131
--- /dev/null
+++ b/src/TextArea/readme.md
@@ -0,0 +1,7 @@
+
+Input example:
+
+```js
+<TextArea />
+
+```
diff --git a/src/TextArea/styles.ts b/src/TextArea/styles.ts
new file mode 100644
index 0000000..2484754
--- /dev/null
+++ b/src/TextArea/styles.ts
@@ -0,0 +1,42 @@
+import config from '../config'
+
+export default {
+  container: {
+    width: '100%',
+    display: 'block'
+  },
+  input: {
+    height: '42px', // uniform height
+    border: '1px solid rgba(0,0,0, 0.20)',
+    borderRadius: config.size.corners,
+    WebkitBorderRadius: config.size.corners,
+    MozBorderRadius: config.size.corners,
+    WebkitAppearance: 'none' as 'none', // Disable chrome styles
+    MozAppearance: 'none' as 'none', // Disable firefox styles
+    // border: 'none',
+    // height: '100%',
+    width: '100%',
+    margin: 0,
+    padding: 0,
+    paddingLeft: '1rem',
+    paddingRight: '1px', // border fix
+    WebkitBoxSizing: 'border-box' as 'border-box', /* Safari/Chrome, other WebKit */
+    MozBoxSizing: 'border-box' as 'border-box', /* Firefox, other Gecko */
+    boxSizing: 'border-box' as 'border-box', /* Opera/IE 8+ */
+    // width: '100%',
+    fontFamily: 'sans-serif',
+    fontSize: '1rem',
+    textAlign: 'center' as 'center',
+    textDecoration: 'none'
+  },
+  textarea: {
+
+  },
+
+  errorBorder: {
+    border: '2px solid red'
+  },
+  error: {
+    padding: '1rem 0 0 0'
+  }
+}
diff --git a/src/index.ts b/src/index.ts
index a80f1aa..a231f43 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -46,4 +46,5 @@ export { default as Skeleton } from './Skeleton'
 export { default as Spinner } from './Spinner'
 export { default as Table } from './Table'
 export { default as Tabs } from './Tabs'
+export { default as TextArea } from './TextArea'
 export { default as Typography } from './Typography'

From 4fe7bc3dace1b04f7e41a6a9428b8aae51dc73c2 Mon Sep 17 00:00:00 2001
From: Renovate Bot <bot@renovateapp.com>
Date: Wed, 6 May 2020 10:35:41 +0000
Subject: [PATCH 2/2] chore(deps): pin dependencies

---
 package-lock.json | 2 +-
 package.json      | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b284059..de3ee8e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@patomation/ui",
-  "version": "2.0.0-beta12",
+  "version": "2.0.0-beta17",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index c133721..affded3 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@commitlint/config-conventional": "8.3.4",
     "@types/jest": "25.2.1",
     "@types/node": "13.11.1",
-    "@types/react": "^16.9.33",
+    "@types/react": "16.9.34",
     "@typescript-eslint/eslint-plugin": "2.27.0",
     "acorn": "7.1.1",
     "autoprefixer": "9.7.6",
@@ -63,7 +63,7 @@
     "minimist": "1.2.5",
     "nodemon": "2.0.3",
     "react-docgen-typescript": "1.16.3",
-    "react-dom": "^16.13.1",
+    "react-dom": "16.13.1",
     "react-router-dom": "5.1.2",
     "react-styleguidist": "11.0.5",
     "ts-jest": "25.3.1",
@@ -71,7 +71,7 @@
     "tsconfigs": "4.0.2",
     "typescript": "3.8.3",
     "webpack": "4.42.1",
-    "webpack-bundle-analyzer": "^3.6.1"
+    "webpack-bundle-analyzer": "3.6.1"
   },
   "peerDependencies": {
     "react": "^16.13.1",