feat: consolidate and improve inputs

Author: minheq

package.json

@@ -55,6 +55,7 @@
     "@babel/preset-env": "7.3.1",
     "@babel/preset-react": "7.0.0",
     "@babel/preset-typescript": "7.1.0",
+    "@emotion/core": "^10.0.7",
     "@mdx-js/mdx": "0.16.8",
     "@semantic-release/changelog": "3.0.2",
     "@semantic-release/commit-analyzer": "6.1.0",
@@ -73,6 +74,7 @@
     "docz": "0.13.7",
     "docz-plugin-snapshots": "0.2.0",
     "docz-theme-default": "0.13.7",
+    "emotion-theming": "^10.0.7",
     "husky": "1.3.1",
     "jest": "23.6.0",
     "jest-canvas-mock": "1.1.0",

src/components/Inputs/ClearableTextInput.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { TextInput as RNTextInput, TouchableOpacity } from 'react-native';
+
+import { Icon } from '../../icons';
+import { ThemeContext } from '../../theme';
+import TextInputWithIcon, { TextInputWithIconProps } from './TextInputWithIcon';
+
+export interface ClearableTextInputProps extends TextInputWithIconProps {
+  onClear?: () => void;
+}
+
+const ClearableTextInputBase = (props: ClearableTextInputProps) => {
+  const { onClear, innerRef, onChangeText, ...textInputWithIconProps } = props;
+  const theme = React.useContext(ThemeContext);
+
+  return (
+    <TextInputWithIcon
+      ref={innerRef}
+      rightIcon={
+        <TouchableOpacity
+          onPress={() => {
+            if (onChangeText) onChangeText('');
+            if (onClear) onClear();
+          }}
+        >
+          <Icon name="x" size={24} color={theme.colors.text.default} />
+        </TouchableOpacity>
+      }
+      onChangeText={onChangeText}
+      {...textInputWithIconProps}
+    />
+  );
+};
+
+export const ClearableTextInput = React.forwardRef<
+  RNTextInput,
+  ClearableTextInputProps
+>((props, ref) => <ClearableTextInputBase {...props} innerRef={ref} />);
+
+export default ClearableTextInput;

src/components/Inputs/Inputs.mdx

@@ -0,0 +1,118 @@
+---
+name: Inputs
+menu: Components
+---
+
+import { Playground, PropsTable } from 'docz';
+import { State } from 'react-powerplug';
+
+import { Heading, Label } from '../Typography';
+import { Box, Spacing } from '../Layout';
+import TextInput from './TextInput';
+import ClearableTextInput from './ClearableTextInput';
+import TextArea from './TextArea';
+import PhoneNumberInput from './PhoneNumberInput';
+
+## TextInput
+
+<Playground>
+  <Box marginBottom={24} width={360}>
+    <Label size="medium">Medium (default)</Label>
+    <TextInput placeholder="With placeholder" />
+  </Box>
+  <Box marginBottom={24} width={360}>
+    <Label size="medium">Disabled</Label>
+    <TextInput value="This is disabled" isDisabled />
+  </Box>
+  <Box marginBottom={24} width={360}>
+    <Label size="medium">Is Invalid</Label>
+    <TextInput isInvalid />
+  </Box>
+  <Box marginBottom={24}>
+    <Label size="small">Small</Label>
+    <TextInput size="small" />
+  </Box>
+  <Box marginBottom={24}>
+    <Label size="medium">Medium</Label>
+    <TextInput size="medium" />
+  </Box>
+  <Box marginBottom={24}>
+    <Label size="large">Large</Label>
+    <TextInput size="large" />
+  </Box>
+</Playground>
+
+## TextArea
+
+<Playground>
+  <Box marginBottom={24} width={360}>
+    <Label size="medium">Medium (default)</Label>
+    <TextArea placeholder="With placeholder" />
+  </Box>
+  <Box marginBottom={24} width={360}>
+    <Label size="medium">Disabled</Label>
+    <TextArea value="This is disabled" isDisabled />
+  </Box>
+  <Box marginBottom={24} width={360}>
+    <Label size="medium">Is Invalid</Label>
+    <TextArea isInvalid />
+  </Box>
+  <Box marginBottom={24}>
+    <Label size="small">Small</Label>
+    <TextArea size="small" />
+  </Box>
+  <Box marginBottom={24}>
+    <Label size="medium">Medium</Label>
+    <TextArea size="medium" />
+  </Box>
+  <Box marginBottom={24}>
+    <Label size="large">Large</Label>
+    <TextArea size="large" />
+  </Box>
+</Playground>
+
+## ClearableTextInput
+
+<Playground>
+  <Box marginBottom={24}>
+    <State initial={{ value: '' }}>
+      {({ state, setState }) => (
+        <ClearableTextInput
+          onChangeText={text => setState({ value: text })}
+          value={state.value}
+          onClear={() => {
+            console.log('Cleared!');
+          }}
+          placeholder="Clearable text input"
+        />
+      )}
+    </State>
+  </Box>
+</Playground>
+
+## PhoneNumberInput
+
+### Usage
+
+<Playground>
+  <State initial={{ countryCode: 'US', phoneNumber: '' }}>
+    {({ state, setState }) => (
+      <PhoneNumberInput
+        header={
+          <Spacing marginVertical={3} paddingHorizontal={2}>
+            <Heading size="xxxlarge">Select your country</Heading>
+          </Spacing>
+        }
+        onChangeCountryCode={countryCode => setState({ countryCode })}
+        onChangePhoneNumber={phoneNumber => setState({ phoneNumber })}
+        phoneNumber={state.phoneNumber}
+        countryCode={state.countryCode}
+        placeholder="Enter your phone number"
+      />
+    )}
+  </State>
+</Playground>
+
+### Props
+
+<PropsTable of={PhoneNumberInput} />