WIP

2 files changed, 0 insertions, 275 deletions

diff --git a/app/components/text-field/text-field.story.tsx b/app/components/text-field/text-field.story.tsx
deleted file mode 100644
index 20c73a4..0000000
--- a/app/components/text-field/text-field.story.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-/* eslint-disable react-native/no-inline-styles */
-/* eslint-disable react-native/no-color-literals */
-
-import * as React from 'react'
-import { storiesOf } from '@storybook/react-native'
-import { StoryScreen, Story, UseCase } from '../../../storybook/views'
-import { Text, TextField } from '../'
-import { State } from 'react-powerplug'
-import { ViewStyle, TextStyle, Alert } from 'react-native'
-
-declare let module
-
-const styleArray: ViewStyle[] = [{ paddingHorizontal: 30 }, { borderWidth: 30 }]
-
-const inputStyleArray: TextStyle[] = [
-  {
-    backgroundColor: 'rebeccapurple',
-    color: 'white',
-    padding: 40,
-  },
-  {
-    borderWidth: 10,
-    borderRadius: 4,
-    borderColor: '#7fff00',
-  },
-]
-let alertWhenFocused = true
-
-storiesOf('TextField', module)
-  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
-  .add('Labelling', () => (
-    <Story>
-      <UseCase
-        text="Normal text"
-        usage="Use placeholder and label to set the text."
-      >
-        <State initial={{ value: '' }}>
-          {({ state, setState }) => (
-            <TextField
-              onChangeText={(value) => setState({ value })}
-              value={state.value}
-              label="Name"
-              placeholder="omg your name"
-            />
-          )}
-        </State>
-      </UseCase>
-
-      <UseCase
-        text="i18n text"
-        usage="Use placeholderTx and labelTx for i18n lookups"
-      >
-        <State initial={{ value: '' }}>
-          {({ state, setState }) => (
-            <TextField
-              onChangeText={(value) => setState({ value })}
-              value={state.value}
-              placeholderTx="storybook.placeholder"
-              labelTx="storybook.field"
-            />
-          )}
-        </State>
-      </UseCase>
-    </Story>
-  ))
-  .add('Style Overrides', () => (
-    <Story>
-      <UseCase
-        noPad
-        text="Container Styles"
-        usage="Useful for applying margins when laying out a form to remove padding if the form brings its own."
-      >
-        <State initial={{ value: 'Inigo' }}>
-          {({ state, setState }) => (
-            <TextField
-              onChangeText={(value) => setState({ value })}
-              value={state.value}
-              label="First Name"
-              style={{ paddingTop: 0, paddingHorizontal: 40 }}
-            />
-          )}
-        </State>
-        <State initial={{ value: 'Montoya' }}>
-          {({ state, setState }) => (
-            <TextField
-              onChangeText={(value) => setState({ value })}
-              value={state.value}
-              label="Last Name"
-              style={{ paddingBottom: 0 }}
-            />
-          )}
-        </State>
-      </UseCase>
-      <UseCase
-        text="Input Styles"
-        usage="Useful for 1-off exceptions.  Try to steer towards presets for this kind of thing."
-      >
-        <State initial={{ value: 'fancy colour' }}>
-          {({ state, setState }) => (
-            <TextField
-              onChangeText={(value) => setState({ value })}
-              value={state.value}
-              label="Name"
-              inputStyle={{
-                backgroundColor: 'rebeccapurple',
-                color: 'white',
-                padding: 40,
-                borderWidth: 10,
-                borderRadius: 4,
-                borderColor: 'hotpink',
-              }}
-            />
-          )}
-        </State>
-        <Text text="* attention designers:  i am so sorry" preset="secondary" />
-      </UseCase>
-
-      <UseCase
-        text="Style array"
-        usage="Useful for 1-off exceptions, but using style arrays."
-      >
-        <State initial={{ value: 'fancy colour' }}>
-          {({ state, setState }) => (
-            <TextField
-              onChangeText={(value) => setState({ value })}
-              value={state.value}
-              label="Name"
-              style={styleArray}
-              inputStyle={inputStyleArray}
-            />
-          )}
-        </State>
-        <Text text="* attention designers:  i am so sorry" preset="secondary" />
-      </UseCase>
-    </Story>
-  ))
-  .add('Ref Forwarding', () => (
-    <Story>
-      <UseCase text="Ref Forwarding" usage="">
-        <State initial={{ value: 'fancy colour' }}>
-          {({ state, setState }) => (
-            <TextField
-              onChangeText={(value) => setState({ value })}
-              value={state.value}
-              label="Name"
-              inputStyle={{
-                backgroundColor: 'rebeccapurple',
-                color: 'white',
-                padding: 40,
-                borderWidth: 10,
-                borderRadius: 4,
-                borderColor: 'hotpink',
-              }}
-              forwardedRef={(ref) => ref}
-              onFocus={() => {
-                if (alertWhenFocused) {
-                  // Prevent text field focus from being repeatedly triggering alert
-                  alertWhenFocused = false
-                  Alert.alert('Text field focuesed with forwarded ref!')
-                }
-              }}
-            />
-          )}
-        </State>
-        <Text text="* attention designers:  i am so sorry" preset="secondary" />
-      </UseCase>
-    </Story>
-  ))
diff --git a/app/components/text-field/text-field.tsx b/app/components/text-field/text-field.tsx
deleted file mode 100644
index 4da1591..0000000
--- a/app/components/text-field/text-field.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import React from 'react'
-import {
-  StyleProp,
-  TextInput,
-  TextInputProps,
-  TextStyle,
-  View,
-  ViewStyle,
-} from 'react-native'
-import { color, spacing, typography } from '../../theme'
-import { translate, TxKeyPath } from '../../i18n'
-import { Text } from '../text/text'
-
-// the base styling for the container
-const CONTAINER: ViewStyle = {
-  paddingVertical: spacing[3],
-}
-
-// the base styling for the TextInput
-const INPUT: TextStyle = {
-  fontFamily: typography.primary,
-  color: color.text,
-  minHeight: 44,
-  fontSize: 18,
-  backgroundColor: color.palette.white,
-}
-
-// currently we have no presets, but that changes quickly when you build your app.
-const PRESETS: { [name: string]: ViewStyle } = {
-  default: {},
-}
-
-export interface TextFieldProps extends TextInputProps {
-  /**
-   * The placeholder i18n key.
-   */
-  placeholderTx?: TxKeyPath
-
-  /**
-   * The Placeholder text if no placeholderTx is provided.
-   */
-  placeholder?: string
-
-  /**
-   * The label i18n key.
-   */
-  labelTx?: TxKeyPath
-
-  /**
-   * The label text if no labelTx is provided.
-   */
-  label?: string
-
-  /**
-   * Optional container style overrides useful for margins & padding.
-   */
-  style?: StyleProp<ViewStyle>
-
-  /**
-   * Optional style overrides for the input.
-   */
-  inputStyle?: StyleProp<TextStyle>
-
-  /**
-   * Various look & feels.
-   */
-  preset?: keyof typeof PRESETS
-
-  forwardedRef?: any
-}
-
-/**
- * A component which has a label and an input together.
- */
-export function TextField(props: TextFieldProps) {
-  const {
-    placeholderTx,
-    placeholder,
-    labelTx,
-    label,
-    preset = 'default',
-    style: styleOverride,
-    inputStyle: inputStyleOverride,
-    forwardedRef,
-    ...rest
-  } = props
-
-  const containerStyles = [CONTAINER, PRESETS[preset], styleOverride]
-  const inputStyles = [INPUT, inputStyleOverride]
-  const actualPlaceholder = placeholderTx
-    ? translate(placeholderTx)
-    : placeholder
-
-  return (
-    <View style={containerStyles}>
-      <Text preset="fieldLabel" tx={labelTx} text={label} />
-      <TextInput
-        placeholder={actualPlaceholder}
-        placeholderTextColor={color.palette.lighterGrey}
-        underlineColorAndroid={color.transparent}
-        {...rest}
-        style={inputStyles}
-        ref={forwardedRef}
-      />
-    </View>
-  )
-}