summaryrefslogtreecommitdiff
path: root/app/components/text-field/text-field.story.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'app/components/text-field/text-field.story.tsx')
-rw-r--r--app/components/text-field/text-field.story.tsx168
1 files changed, 0 insertions, 168 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>
- ))