Add information confirmation ui

barcodetest/app/App.tsx

@@ -1,15 +1,35 @@
 import React from 'react';
-import {SafeAreaView, Text, View, Button} from 'react-native';
+import {NavigationContainer} from '@react-navigation/native';
+import {createStackNavigator} from '@react-navigation/stack';
 
-import * as style from './styles';
+import {Start} from './module-sto-in/screens/start';
+import {InfomationConfirmation} from './module-sto-in/screens/sto-information-confirmation';
+import {PreviewMode} from './module-sto-in/screens/sto-preview-mode';
+
+import {Colors} from './theme';
 
 export const App = () => {
+  const Stack = createStackNavigator();
+
   return (
-    <SafeAreaView style={style.SAFEAREAVIEW}>
-      <View style={style.APP}>
-        <Text>test</Text>
-        <Button title="press me" onPress={() => console.log('press me')} />
-      </View>
-    </SafeAreaView>
+    <NavigationContainer>
+      <Stack.Navigator
+        initialRouteName="start"
+        screenOptions={{
+          headerStyle: {
+            backgroundColor: Colors.ColorPrimary,
+          },
+          headerTintColor: Colors.ColorTextWhite,
+          headerBackTitleVisible: false,
+          headerTitleAlign: 'left',
+        }}>
+        <Stack.Screen name="start" component={Start} />
+        <Stack.Screen
+          name="InfomationConfirmation"
+          component={InfomationConfirmation}
+        />
+        <Stack.Screen name="PreviewMode" component={PreviewMode} />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 };

barcodetest/app/components/button/button.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {TouchableOpacity, StyleProp, ViewStyle, TextStyle} from 'react-native';
+import {Text} from '../text/text';
+
+import {viewPresets, ButtonPresets, textPresets} from './button_preset';
+
+interface ButtonProps {
+  preset?: ButtonPresets;
+  text?: string | number;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+export const Button = (props: ButtonProps) => {
+  const {
+    preset = 'primary',
+    text,
+    style: styleOverride,
+    textStyle: textStyleOverride,
+  } = props;
+
+  const viewStyle = viewPresets[preset] || viewPresets.primary;
+  const viewStyles = [viewStyle, styleOverride];
+
+  const textStyle = textPresets[preset] || textPresets.primary;
+  const textStyles = [textStyle, textStyleOverride];
+
+  return (
+    <TouchableOpacity style={viewStyles}>
+      <Text text={text} style={textStyles} />
+    </TouchableOpacity>
+  );
+};

barcodetest/app/components/button/button_preset.ts

@@ -0,0 +1,24 @@
+import {ViewStyle, TextStyle} from 'react-native';
+import {adapter, Colors} from '../../theme';
+
+const PRIMARY_VIEW: ViewStyle = {
+  paddingVertical: adapter.W(8),
+  paddingHorizontal: adapter.H(8),
+  borderRadius: 4,
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+
+const PRIMARY_TEXT: TextStyle = {
+  paddingHorizontal: adapter.H(3),
+};
+
+export const viewPresets = {
+  primary: {...PRIMARY_VIEW, backgroundColor: Colors.ColorPrimary},
+};
+
+export const textPresets = {
+  primary: {...PRIMARY_TEXT, fontSize: 9, color: Colors.ColorTextWhite},
+};
+
+export type ButtonPresets = keyof typeof viewPresets;

barcodetest/app/components/index.tsx

@@ -0,0 +1,2 @@
+export * from './button/button';
+export * from './text/text';

barcodetest/app/components/text/text.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {Text as ReactNativeText, StyleProp, TextStyle} from 'react-native';
+
+import {presets, TextPresets} from './text_preset';
+
+interface TextProps {
+  preset?: TextPresets;
+  text?: string | number;
+  children?: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export const Text = (props: TextProps) => {
+  const {preset = 'default', text, children, style: styleOverride} = props;
+
+  const style = presets[preset] || presets.default;
+  const styles = [style, styleOverride];
+
+  const content = text || children;
+
+  return <ReactNativeText style={styles}>{content}</ReactNativeText>;
+};

barcodetest/app/components/text/text_preset.ts

@@ -0,0 +1,13 @@
+import {TextStyle} from 'react-native';
+import {Colors, Typography} from '../../theme';
+
+const DEFAULT: TextStyle = {
+  color: Colors.ColorTextPrimary,
+  fontSize: Typography.FontSizeBase,
+};
+
+export const presets = {
+  default: DEFAULT,
+};
+
+export type TextPresets = keyof typeof presets;

barcodetest/app/module-sto-in/screens/start/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {View, Button} from 'react-native';
+
+export const Start = ({navigation}) => {
+  return (
+    <View>
+      <Button
+        title="Infomation Confirmation"
+        onPress={() => navigation.navigate('InfomationConfirmation')}
+      />
+      <Button
+        title="PREVIEW Mode"
+        onPress={() => navigation.navigate('PreviewMode')}
+      />
+    </View>
+  );
+};

barcodetest/app/module-sto-in/screens/sto-information-confirmation/components/info-header/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {View, Text} from 'react-native';
+import * as styles from './styles';
+
+export const InfoHeader = () => {
+  return (
+    <View style={styles.INFORMATIONHEADER}>
+      <View style={styles.INFORMATIONBOX}>
+        <View>
+          <Text style={styles.TEXTTITLE}>Supplying Plant:</Text>
+          <Text style={styles.TEXTDATA}>1400 1600</Text>
+        </View>
+        <View style={styles.DRIVERTEL}>
+          <Text style={styles.TEXTTITLE}>Driver Tel:</Text>
+          <Text style={styles.TEXTDATA}>12345678900</Text>
+        </View>
+      </View>
+      <View style={styles.SHIPTO}>
+        <Text style={styles.TEXTTITLE}>Ship to:</Text>
+        <Text style={styles.TEXTDATA}>
+          Milpitas Warehouse 625 Vista Way Milpitas CA 95035 USA.
+        </Text>
+      </View>
+    </View>
+  );
+};

barcodetest/app/module-sto-in/screens/sto-information-confirmation/components/info-header/styles.ts

@@ -0,0 +1,32 @@
+import {ViewStyle, TextStyle} from 'react-native';
+import {Colors, Typography, adapter} from '../../../../../theme';
+
+export const INFORMATIONHEADER: ViewStyle = {
+  marginVertical: adapter.H(22),
+  marginLeft: adapter.W(14),
+};
+
+export const INFORMATIONBOX: ViewStyle = {
+  flexDirection: 'row',
+};
+
+export const DRIVERTEL: ViewStyle = {
+  marginLeft: adapter.W(50),
+};
+
+export const TEXTTITLE: TextStyle = {
+  marginBottom: adapter.H(9),
+  color: Colors.ColorTextRegular,
+  fontSize: Typography.FontSizeLarge,
+  fontWeight: '500',
+};
+
+export const TEXTDATA: TextStyle = {
+  color: Colors.ColorTextRegular,
+  fontSize: Typography.FontSizeExtralarge,
+  fontWeight: Typography.FontWeightPrimary,
+};
+
+export const SHIPTO: ViewStyle = {
+  marginTop: adapter.H(25),
+};

barcodetest/app/module-sto-in/screens/sto-information-confirmation/components/info-list-item/hook.ts

@@ -0,0 +1,28 @@
+import {IInfoItemListProps} from './props';
+
+export const useAction = () => {
+  const infoItemList: IInfoItemListProps[] = [
+    {
+      No: 1,
+      StoNumber: '5000043515',
+      ShippingAddress: 'adress1',
+    },
+    {
+      No: 2,
+      StoNumber: '5000043516',
+      ShippingAddress: 'adress2',
+    },
+    {
+      No: 3,
+      StoNumber: '5000043517',
+      ShippingAddress: 'adress3',
+    },
+    {
+      No: 4,
+      StoNumber: '5000043514',
+      ShippingAddress: 'adress4',
+    },
+  ];
+
+  return {infoItemList};
+};