updated structure

template/src/App.tsx

@@ -48,7 +48,7 @@ class App extends Component<{}, State> {
 
   public renderNavigation = (): ReactElement => {
     // Generate the root nav of the app based on presence of a user (restored in setup functions above)
-    const currentUser = false;
+    const currentUser = true;
 
     return currentUser ? <AppNav /> : <GuestNav />;
   };

template/src/components/Button/Button.tsx → template/src/components/Button.tsx

@@ -9,17 +9,17 @@ import {
   LayoutProps,
 } from 'styled-system';
 
-import { Container } from '../Container';
-import { Text } from '../Text';
-import { Touchable } from '../Touchable';
-import { colors } from '../../styles';
-import { AccessbilityRole } from '../../types/AccessibilityRole';
+import { AccessbilityRole } from '../types/AccessibilityRole';
+import { colors } from '../styles';
+import { Container } from './Container';
+import { Text } from './Text';
+import { Touchable } from './Touchable';
 
 interface ButtonProps {
   /**
-  * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
-  * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
-  */
+   * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
+   * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
+   */
   accessibilityLabel: string;
   /** Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on.  */
   accessbilityRole?: AccessbilityRole;

template/src/components/Container/Container.tsx → template/src/components/Container.tsx

@@ -11,7 +11,7 @@ import {
 } from 'styled-system';
 import styled from '@emotion/native';
 
-import { margins } from '../../styles';
+import { margins } from '../styles';
 
 interface ContainerProps {
   /** applies "flex: 1" style */

template/src/components/Login/Login.tsx → template/src/components/Login.tsx

@@ -1,13 +1,12 @@
 import React, { FC } from 'react';
 import { BorderProps, ColorProps, SpaceProps, FlexProps } from 'styled-system';
 import { Icon } from 'react-native-elements';
-import { Button } from '../Button';
-import { Text } from '../Text';
-import { TextInput } from '../TextInput';
-import { Touchable } from '../Touchable';
-import { Container } from '../Container';
-
-import { colors } from '../../styles';
+import { colors } from '../styles';
+import { Button } from './Button';
+import { Text } from './Text';
+import { TextInput } from './TextInput';
+import { Touchable } from './Touchable';
+import { Container } from './Container';
 
 interface LoginProps {
   /** the callbacks to be invoked onPress */

template/src/components/Registration/Registration.tsx → template/src/components/Registration.tsx

@@ -12,13 +12,12 @@ import {
 } from 'styled-system';
 import styled from '@emotion/native';
 import { Icon, Input } from 'react-native-elements';
-import { Button } from '../Button';
-import { Text } from '../Text';
-import { TextInput } from '../TextInput';
-import { Touchable } from '../Touchable';
-import { Container } from '../Container';
-
-import { colors } from '../../styles';
+import { colors } from '../styles';
+import { Button } from './Button';
+import { Text } from './Text';
+import { TextInput } from './TextInput';
+import { Touchable } from './Touchable';
+import { Container } from './Container';
 
 interface RegistrationProps {
   /** the callbacks to be invoked onPress */

template/src/components/Screen/Screen.tsx → template/src/components/Screen.tsx

@@ -3,10 +3,9 @@ import styled from '@emotion/native';
 import SafeAreaView from 'react-native-safe-area-view';
 import { color, space, FlexProps, SpaceProps } from 'styled-system';
 
-import { Container } from '../Container';
+import { theme, colors } from '../styles';
 
-import { theme } from '../../styles';
-import { colors } from '../../styles';
+import { Container } from './Container';
 
 const VerticallyPaddedView = styled.View`
   flex: 1;
@@ -23,7 +22,7 @@ interface ScreenProps {
   /** The content to render within the screen */
   children?: ReactNode;
   /** Whether to force the topInset. Use to prevent screen jank on tab screens */
-  forceTopInset?: Boolean;
+  forceTopInset?: boolean;
 }
 
 type ComponentProps = ScreenProps & FlexProps & SpaceProps;

template/src/components/Text/Text.tsx → template/src/components/Text.tsx

@@ -10,7 +10,7 @@ import {
   TypographyProps,
 } from 'styled-system';
 
-import { colors } from '../../styles';
+import { colors } from '../styles';
 
 interface TextProps {}
 

template/src/components/TextInput/TextInput.tsx → template/src/components/TextInput.tsx

@@ -18,20 +18,20 @@ import {
   TypographyProps,
 } from 'styled-system';
 import { Icon } from 'react-native-elements';
-import { Container } from '../Container';
-import { Text } from '../Text';
-import { colors } from '../../styles';
+import { colors } from '../styles';
+import { Container } from './Container';
+import { Text } from './Text';
 
 interface TextInputProps extends TextInputBaseProps {
   /** An optional header label to render above the input */
   topLabel?: string;
   //** An option icon to be displayed to the left of the input box */
   icon?: Icon;
   /**
-  * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
-  * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
-  */
-   accessibilityLabel?: string;
+   * Overrides the text that's read by the screen reader when the user interacts with the element. By default, the
+   * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
+   */
+  accessibilityLabel?: string;
 }
 
 type ComponentProps = TextInputProps &

template/src/screens/IntroScreen/IntroScreen.tsx → template/src/screens/IntroScreen.tsx

@@ -3,12 +3,12 @@ import { ImageBackground, StatusBar, StyleSheet } from 'react-native';
 import { NavigationScreenProps } from 'react-navigation';
 import styled from '@emotion/native';
 
-import { Button } from '../../components/Button';
-import { Screen } from '../../components/Screen';
-import { Text } from '../../components/Text';
-import { Container } from '../../components/Container';
-import { colors } from '../../styles';
-import bgImage from '../../assets/images/background.png';
+import { Button } from '../components/Button';
+import { Screen } from '../components/Screen';
+import { Text } from '../components/Text';
+import { Container } from '../components/Container';
+import { colors } from '../styles';
+import bgImage from '../assets/images/background.png';
 
 const BackgroundImage = styled(ImageBackground)`
   ${StyleSheet.absoluteFillObject};

template/src/screens/LoginScreen/LoginScreen.tsx → template/src/screens/LoginScreen.tsx

@@ -3,14 +3,15 @@ import { Alert, ImageBackground, StatusBar, StyleSheet } from 'react-native';
 import { NavigationScreenProps } from 'react-navigation';
 import styled from '@emotion/native';
 
-import { Login } from '../../components/Login';
-import { Screen } from '../../components/Screen';
-import bgImage from '../../assets/images/background.png';
-import { colors } from '../../styles';
+import { Login } from '../components/Login';
+import { Screen } from '../components/Screen';
+import bgImage from '../assets/images/background.png';
+import { colors } from '../styles';
 
 const BackgroundImage = styled(ImageBackground)`
   ${StyleSheet.absoluteFillObject};
 `;
+
 export const LoginScreen: FC<NavigationScreenProps> = ({ navigation }) => {
   const loginClick = (): void => {
     navigation.navigate('Intro');
@@ -33,7 +34,6 @@ export const LoginScreen: FC<NavigationScreenProps> = ({ navigation }) => {
         barStyle="light-content"
       />
       <Screen testID="loginScreen" backgroundColor={colors.transparent} paddingTop={60} margin={20}>
-
         <Login
           loginPress={loginClick}
           registrationPress={registrationClick}

template/src/screens/RegistrationScreen/RegistrationScreen.tsx → template/src/screens/RegistrationScreen.tsx

@@ -3,11 +3,11 @@ import { ImageBackground, StatusBar, StyleSheet } from 'react-native';
 import { NavigationScreenProps } from 'react-navigation';
 import styled from '@emotion/native';
 
-import { Registration } from '../../components/Registration';
-import { Screen } from '../../components/Screen';
+import { Registration } from '../components/Registration';
+import { Screen } from '../components/Screen';
 
-import bgImage from '../../assets/images/background.png';
-import { colors } from '../../styles';
+import bgImage from '../assets/images/background.png';
+import { colors } from '../styles';
 
 const BackgroundImage = styled(ImageBackground)`
   ${StyleSheet.absoluteFillObject};
@@ -17,6 +17,7 @@ export const RegistrationScreen: FC<NavigationScreenProps> = ({ navigation }) =>
   const createClick = () => {
     navigation.navigate('Intro');
   };
+
   return (
     <BackgroundImage source={bgImage} resizeMode="cover">
       <StatusBar

template/storybook/stories/Button.stories.tsx

@@ -0,0 +1,6 @@
+import { storiesOf } from '@storybook/react-native';
+import React from 'react';
+
+import { Button } from '../../src/components/Button';
+
+storiesOf('components/Button', module).add('Default', () => <Button label="Button" />);

template/src/components/Container/Container.stories.tsx → template/storybook/stories/Container.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react-native';
 
-import { Container } from './Container';
+import { Container } from '../../src/components/Container';
 
 storiesOf('components/Container', module).add('Default', () => <Container />);

template/src/components/Login/Login.stories.tsx → template/storybook/stories/Login.stories.tsx

@@ -1,9 +1,9 @@
 import { storiesOf } from '@storybook/react-native';
 import React from 'react';
 
-import { Login } from './Login';
-import { Screen } from '../Screen';
-import { colors } from '../../styles';
+import { Login } from '../../src/components/Login';
+import { Screen } from '../../src/components/Screen';
+import { colors } from '../../src/styles';
 
 const ScreenDecorator = storyFn => <Screen padding={10}>{storyFn()}</Screen>;
 

template/src/components/Registration/Registration.stories.tsx → template/storybook/stories/Registration.stories.tsx

@@ -1,8 +1,6 @@
 import { storiesOf } from '@storybook/react-native';
 import React from 'react';
 
-import { Registration } from './Registration';
+import { Registration } from '../../src/components/Registration';
 
-storiesOf('components/Registration', module).add('Default', () => (
-  <Registration />
-));
+storiesOf('components/Registration', module).add('Default', () => <Registration />);

template/src/components/Screen/Screen.stories.tsx → template/storybook/stories/Screen.stories.tsx

@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/react-native';
 import React from 'react';
 
-import { Screen } from './Screen';
+import { Screen } from '../../src/components/Screen';
 
 storiesOf('components/Screen', module)
   .add('Default', () => <Screen />)

template/src/components/Text/Text.stories.tsx → template/storybook/stories/Text.stories.tsx

@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/react-native';
 import React from 'react';
 
-import { Text } from './Text';
+import { Text } from '../../src/components/Text';
 
 storiesOf('components/Text', module)
   .add('Default', () => <Text />)

template/src/components/TextInput/TextInput.stories.tsx → template/storybook/stories/TextInput.stories.tsx

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react-native';
 import React from 'react';
 
-import { TextInput } from './TextInput';
+import { TextInput } from '../../src/components/TextInput';
 
 storiesOf('components/TextInput', module).add('Default', () => <TextInput />);

template/src/components/Touchable/Touchable.stories.tsx → template/storybook/stories/Touchable.stories.tsx

@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/react-native';
 import React from 'react';
 
-import { Touchable } from './Touchable';
+import { Touchable } from '../../src/components/Touchable';
 
 storiesOf('components/Touchable', module).add('Default', () => <Touchable />);

template/storybook/stories/index.js

@@ -0,0 +1,7 @@
+import './Button.stories';
+import './Container.stories';
+import './Screen.stories';
+import './Text.stories';
+import './TextInput.stories';
+import './Touchable.stories';
+import './Login.stories';