diff options
Diffstat (limited to 'app_expo/components/form-row')
-rw-r--r-- | app_expo/components/form-row/form-row.presets.ts | 71 | ||||
-rw-r--r-- | app_expo/components/form-row/form-row.props.tsx | 23 | ||||
-rw-r--r-- | app_expo/components/form-row/form-row.story.tsx | 107 | ||||
-rw-r--r-- | app_expo/components/form-row/form-row.tsx | 13 |
4 files changed, 0 insertions, 214 deletions
diff --git a/app_expo/components/form-row/form-row.presets.ts b/app_expo/components/form-row/form-row.presets.ts deleted file mode 100644 index 0c796c2..0000000 --- a/app_expo/components/form-row/form-row.presets.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { ViewStyle } from 'react-native' -import { color, spacing } from '../../theme' - -/** - * The size of the border radius. - */ -const RADIUS = 8 - -/** - * The default style of the container. - */ -const ROOT: ViewStyle = { - borderWidth: 1, - borderColor: color.line, - padding: spacing[2], -} - -/** - * What each of the presets look like. - */ -export const PRESETS = { - /** - * Rounded borders on the the top only. - */ - top: { - ...ROOT, - borderTopLeftRadius: RADIUS, - borderTopRightRadius: RADIUS, - borderBottomWidth: 0, - }, - /** - * No rounded borders. - */ - middle: { - ...ROOT, - borderBottomWidth: 0, - }, - /** - * Rounded borders on the bottom. - */ - bottom: { - ...ROOT, - borderBottomLeftRadius: RADIUS, - borderBottomRightRadius: RADIUS, - }, - /** - * Rounded borders everywhere. - */ - soloRound: { - ...ROOT, - borderRadius: RADIUS, - }, - /** - * Straight borders everywhere. - */ - soloStraight: { - ...ROOT, - }, - /** - * Transparent borders useful to keep things lined up. - */ - clear: { - ...ROOT, - borderColor: color.transparent, - }, -} - -/** - * The names of the presets supported by FormRow. - */ -export type FormRowPresets = keyof typeof PRESETS diff --git a/app_expo/components/form-row/form-row.props.tsx b/app_expo/components/form-row/form-row.props.tsx deleted file mode 100644 index 55b632e..0000000 --- a/app_expo/components/form-row/form-row.props.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react' -import { StyleProp, ViewStyle } from 'react-native' -import { FormRowPresets } from './form-row.presets' - -/** - * The properties you can pass to FormRow. - */ -export interface FormRowProps { - /** - * Children components. - */ - children?: React.ReactNode - - /** - * Override the container style... useful for margins and padding. - */ - style?: StyleProp<ViewStyle> - - /** - * The type of border. - */ - preset: FormRowPresets -} diff --git a/app_expo/components/form-row/form-row.story.tsx b/app_expo/components/form-row/form-row.story.tsx deleted file mode 100644 index ea84e04..0000000 --- a/app_expo/components/form-row/form-row.story.tsx +++ /dev/null @@ -1,107 +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, FormRow } from '../' -import { color } from '../../theme/color' -import { ViewStyle } from 'react-native' - -declare let module - -const TEXT_STYLE_OVERRIDE = { - color: color.storybookTextColor, -} -const arrayStyle: ViewStyle[] = [{ borderWidth: 5 }, { borderColor: '#32cd32' }] - -storiesOf('FormRow', module) - .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>) - .add('Assembled', () => ( - <Story> - <UseCase - text="Fully Assembled" - usage="FormRow has many parts designed to fit together. Here is what it looks like all assembled." - > - <FormRow preset="top"> - <Text preset="fieldLabel" style={TEXT_STYLE_OVERRIDE}> - Hello! I am at the top - </Text> - </FormRow> - <FormRow preset="middle"> - <Text style={TEXT_STYLE_OVERRIDE}> - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi officia quo rerum - impedit asperiores hic ex quae, quam dolores vel odit doloribus, tempore atque deserunt - possimus incidunt, obcaecati numquam officiis. - </Text> - </FormRow> - <FormRow preset="middle"> - <Text preset="secondary" style={TEXT_STYLE_OVERRIDE}> - ...one more thing - </Text> - </FormRow> - <FormRow preset="bottom"> - <Text style={TEXT_STYLE_OVERRIDE}>🎉 Footers!</Text> - </FormRow> - </UseCase> - <UseCase text="Alternatives" usage="Less commonly used presets."> - <FormRow preset="clear"> - <Text style={TEXT_STYLE_OVERRIDE}> - My borders are still there, but they are clear. This causes the text to still align - properly due to the box model of flexbox. - </Text> - </FormRow> - <FormRow preset="soloRound"> - <Text style={TEXT_STYLE_OVERRIDE}>I'm round</Text> - </FormRow> - <FormRow preset="soloStraight" style={{ marginTop: 10, backgroundColor: '#ffe' }}> - <Text style={TEXT_STYLE_OVERRIDE}>I'm square and have a custom style.</Text> - </FormRow> - </UseCase> - </Story> - )) - .add('Presets', () => ( - <Story> - <UseCase text="top" usage="The top of a form."> - <FormRow preset="top"> - <Text style={TEXT_STYLE_OVERRIDE}>Curved borders at the top.</Text> - <Text style={TEXT_STYLE_OVERRIDE}>Nothing below</Text> - </FormRow> - </UseCase> - <UseCase text="middle" usage="A row in the middle of a form."> - <FormRow preset="middle"> - <Text style={TEXT_STYLE_OVERRIDE}>No curves and empty at the bottom.</Text> - </FormRow> - </UseCase> - <UseCase text="bottom" usage="The bottom of a form."> - <FormRow preset="bottom"> - <Text style={TEXT_STYLE_OVERRIDE}>Curved at the bottom</Text> - <Text style={TEXT_STYLE_OVERRIDE}>Line at the top.</Text> - </FormRow> - </UseCase> - <UseCase text="soloRound" usage="A standalone curved form row."> - <FormRow preset="soloRound"> - <Text style={TEXT_STYLE_OVERRIDE}>Curves all around.</Text> - </FormRow> - </UseCase> - <UseCase text="soloStraight" usage="A standalone straight form row."> - <FormRow preset="soloStraight"> - <Text style={TEXT_STYLE_OVERRIDE}>Curves nowhere.</Text> - </FormRow> - </UseCase> - <UseCase text="clear" usage="Identical dimensions but transparent edges."> - <FormRow preset="clear"> - <Text style={TEXT_STYLE_OVERRIDE}>Curves nowhere.</Text> - </FormRow> - </UseCase> - </Story> - )) - .add('Styling', () => ( - <Story> - <UseCase text="Style array" usage="Form row with an array of styles"> - <FormRow preset="soloStraight" style={arrayStyle}> - <Text style={TEXT_STYLE_OVERRIDE}>Array style.</Text> - </FormRow> - </UseCase> - </Story> - )) diff --git a/app_expo/components/form-row/form-row.tsx b/app_expo/components/form-row/form-row.tsx deleted file mode 100644 index c6453bc..0000000 --- a/app_expo/components/form-row/form-row.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react' -import { View } from 'react-native' -import { PRESETS } from './form-row.presets' -import { FormRowProps } from './form-row.props' - -/** - * A horizontal container component used to hold a row of a form. - */ -export function FormRow(props: FormRowProps) { - const viewStyle = [PRESETS[props.preset], props.style] - - return <View style={viewStyle}>{props.children}</View> -} |