From 5d4ba124e47630d49f73a4f8ae78c6efa4806767 Mon Sep 17 00:00:00 2001
From: Vera Kutyavina <vera.kutiavina@scalewill.com>
Date: Sun, 20 Nov 2022 18:41:47 +0300
Subject: [PATCH 1/2] add  inputs

---
 App.tsx                          |  8 ++++--
 components/Buttons/Buttons.tsx   | 21 ++++++++++++++++
 components/Buttons/index.ts      |  1 +
 components/Input/CustomInput.tsx | 42 ++++++++++++++++++++++++++++++++
 components/Input/index.ts        |  1 +
 5 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 components/Buttons/Buttons.tsx
 create mode 100644 components/Buttons/index.ts
 create mode 100644 components/Input/CustomInput.tsx
 create mode 100644 components/Input/index.ts

diff --git a/App.tsx b/App.tsx
index 0329d0c..c260c79 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,10 +1,14 @@
+import React from "react";
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import Buttons from './components/Buttons';
+import CustomInput from './components/Input';
 
 export default function App() {
   return (
     <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
+      <Buttons />
+      <CustomInput />
       <StatusBar style="auto" />
     </View>
   );
diff --git a/components/Buttons/Buttons.tsx b/components/Buttons/Buttons.tsx
new file mode 100644
index 0000000..38dfeda
--- /dev/null
+++ b/components/Buttons/Buttons.tsx
@@ -0,0 +1,21 @@
+import React, {useState} from 'react';
+import {Button} from "react-native";
+
+const Buttons = () => {
+  const [clickCount, setClickCount] = useState(0);
+  return (
+    <>
+      <Button
+        title="Click!"
+        onPress={() => setClickCount(clickCount + 1)}
+        disabled={clickCount >= 3}
+      />
+      <Button
+        title="Reset"
+        onPress={() => setClickCount(0)}
+      />
+    </>
+  )
+};
+
+export default Buttons;
\ No newline at end of file
diff --git a/components/Buttons/index.ts b/components/Buttons/index.ts
new file mode 100644
index 0000000..bdef67b
--- /dev/null
+++ b/components/Buttons/index.ts
@@ -0,0 +1 @@
+export { default } from './Buttons';
diff --git a/components/Input/CustomInput.tsx b/components/Input/CustomInput.tsx
new file mode 100644
index 0000000..6f14d2b
--- /dev/null
+++ b/components/Input/CustomInput.tsx
@@ -0,0 +1,42 @@
+import React, {useState} from 'react';
+import {Button, Text, TextInput, StyleSheet} from "react-native";
+
+const CustomInput = () => {
+  const [value, setValue] = useState<string>("");
+  const [submitValue, setSubmitValue] = useState<string>("");
+  const [currentValue, setCurrentValue] = useState<string>("");
+
+  const onSubmit = () => setSubmitValue(currentValue);
+
+  return (
+    <>
+      <Text style={styles.text}> {value} </Text>
+      <TextInput style={styles.inputStyles} onChangeText={setValue} />
+
+      <Text style={styles.text}> {submitValue} </Text>
+      <TextInput style={styles.inputStyles} onChangeText={setCurrentValue} />
+      <Button onPress={onSubmit} title="submit" />
+    </>
+  )
+};
+
+const styles = StyleSheet.create({
+  inputStyles: {
+    borderWidth: 1,
+    height: 40,
+    borderColor: '#2287eb',
+    borderRadius: 3,
+    width: '75%',
+    marginRight: 8,
+    paddingHorizontal: 12,
+  },
+  text: {
+    marginVertical: 16,
+  },
+  searchForm: {
+    flexDirection: 'row',
+    alignItems: "center",
+  },
+});
+
+export default CustomInput;
\ No newline at end of file
diff --git a/components/Input/index.ts b/components/Input/index.ts
new file mode 100644
index 0000000..c0a2616
--- /dev/null
+++ b/components/Input/index.ts
@@ -0,0 +1 @@
+export { default } from './CustomInput';

From 9d4353b7678f1bceed72afd976f2020793df734b Mon Sep 17 00:00:00 2001
From: Vera Kutyavina <vera.kutiavina@scalewill.com>
Date: Wed, 23 Nov 2022 21:58:36 +0300
Subject: [PATCH 2/2] add box

---
 App.tsx                                |  8 ++-
 components/BoxForm/BoxForm.tsx         | 75 ++++++++++++++++++++++++++
 components/BoxForm/index.ts            |  1 +
 components/WelcomeForm/WelcomeForm.tsx | 54 +++++++++++++++++++
 components/WelcomeForm/index.ts        |  1 +
 5 files changed, 137 insertions(+), 2 deletions(-)
 create mode 100644 components/BoxForm/BoxForm.tsx
 create mode 100644 components/BoxForm/index.ts
 create mode 100644 components/WelcomeForm/WelcomeForm.tsx
 create mode 100644 components/WelcomeForm/index.ts

diff --git a/App.tsx b/App.tsx
index c260c79..6a58582 100644
--- a/App.tsx
+++ b/App.tsx
@@ -3,12 +3,16 @@ import { StatusBar } from 'expo-status-bar';
 import { StyleSheet, View } from 'react-native';
 import Buttons from './components/Buttons';
 import CustomInput from './components/Input';
+import WelcomeForm from "./components/WelcomeForm";
+import BoxForm from "./components/BoxForm";
 
 export default function App() {
   return (
     <View style={styles.container}>
-      <Buttons />
-      <CustomInput />
+      {/*<Buttons />*/}
+      {/*<CustomInput />*/}
+      {/*<WelcomeForm />*/}
+      <BoxForm />
       <StatusBar style="auto" />
     </View>
   );
diff --git a/components/BoxForm/BoxForm.tsx b/components/BoxForm/BoxForm.tsx
new file mode 100644
index 0000000..bbac694
--- /dev/null
+++ b/components/BoxForm/BoxForm.tsx
@@ -0,0 +1,75 @@
+import React, {useState} from 'react';
+import { View, Text, StyleSheet, TextInput, Button } from 'react-native';
+
+type TBox = { width?: number, height?: number, color?: string };
+const defaultBox = [
+  {
+    color: 'red',
+  },
+  {
+    color: 'blue',
+  },
+]
+
+const BoxForm = () => {
+  const [height, setHeight] = useState<string>('');
+  const [width, setWidth] = useState<string>('');
+  const [color, setColor] = useState<string>('');
+  const [boxArray, setBoxArray] = useState<TBox[]>(defaultBox);
+
+  const onSubmit = () => {
+    const newBox = {
+      height: height ? Number.parseInt(height) : undefined,
+      width:  width ? Number.parseInt(width) : undefined,
+      color: color ? color.toLocaleLowerCase() : undefined,
+    };
+    setBoxArray([...boxArray, newBox])
+  };
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center'}} >
+      {boxArray.map(({ color, width, height }, i) =>
+        <Box key={i} height={height} width={width} color={color} />
+      )}
+
+      <View style={styles.form}>
+        <TextInput placeholder="width" style={styles.inputStyles} onChangeText={setWidth} />
+        <TextInput placeholder="height" style={styles.inputStyles} onChangeText={setHeight} />
+        <TextInput placeholder="color" style={styles.inputStyles} onChangeText={setColor} />
+      </View>
+      <Button onPress={onSubmit} title="Add" />
+    </View>
+  );
+}
+
+export default BoxForm;
+
+export const Box = ({ width = 100, height = 100, color = 'red' }: TBox) => (
+  <View style={{ width: width, height: height, backgroundColor: color}} />
+);
+
+const styles = StyleSheet.create({
+  inputStyles: {
+    borderWidth: 1,
+    height: 40,
+    borderColor: '#2287eb',
+    borderRadius: 3,
+    marginRight: 8,
+    marginTop: 16,
+    paddingHorizontal: 12,
+    width: 100,
+  },
+  text: {
+    marginTop: 16,
+    color: 'red',
+  },
+  searchForm: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  form: {
+    flexDirection: 'row',
+    alignItems: 'center',
+
+  }
+});
\ No newline at end of file
diff --git a/components/BoxForm/index.ts b/components/BoxForm/index.ts
new file mode 100644
index 0000000..e9ceb53
--- /dev/null
+++ b/components/BoxForm/index.ts
@@ -0,0 +1 @@
+export { default } from './BoxForm';
diff --git a/components/WelcomeForm/WelcomeForm.tsx b/components/WelcomeForm/WelcomeForm.tsx
new file mode 100644
index 0000000..395fa5a
--- /dev/null
+++ b/components/WelcomeForm/WelcomeForm.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { Button, Text, TextInput, StyleSheet } from 'react-native';
+
+const WelcomeForm = () => {
+  const [password, setPassword] = useState<string>("");
+  const [login, setLogin] = useState<string>("");
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
+
+  const onSubmit = () => {
+    if (!password || !login) {
+      setError("Fill in all fields please");
+      return;
+    };
+    setIsSubmitting(true);
+  };
+
+  return (
+    <>
+      {isSubmitting ? <Text> Welcome! </Text> : (
+        <>
+          <Text> Sign In </Text>
+          <TextInput placeholder="Login" style={styles.inputStyles} onChangeText={setLogin} />
+          <TextInput secureTextEntry={true}  placeholder="Password" style={styles.inputStyles} onChangeText={setPassword} />
+          {error && <Text style={styles.text}> {error} </Text>}
+          <Button onPress={onSubmit} title="submit" />
+        </>
+      )}
+    </>
+  )
+};
+
+const styles = StyleSheet.create({
+  inputStyles: {
+    borderWidth: 1,
+    height: 40,
+    borderColor: '#2287eb',
+    borderRadius: 3,
+    width: '75%',
+    marginRight: 8,
+    marginTop: 16,
+    paddingHorizontal: 12,
+  },
+  text: {
+    marginTop: 16,
+    color: 'red',
+  },
+  searchForm: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
+export default WelcomeForm;
\ No newline at end of file
diff --git a/components/WelcomeForm/index.ts b/components/WelcomeForm/index.ts
new file mode 100644
index 0000000..efcbb70
--- /dev/null
+++ b/components/WelcomeForm/index.ts
@@ -0,0 +1 @@
+export { default } from './WelcomeForm';