03 add shared components

package.json

@@ -37,11 +37,13 @@
     "postcss-flexbugs-fixes": "3.2.0",
     "postcss-loader": "2.0.6",
     "promise": "8.0.1",
-    "react": "16.0.0-alpha.12",
+    "react": "16.0.0-beta.5",
     "react-dev-utils": "^4.0.0",
     "react-dom": "^16.0.0-beta.5",
     "react-native": "0.47.2",
+    "react-primitives": "^0.4.3",
     "style-loader": "0.18.2",
+    "styled-components": "^2.1.2",
     "sw-precache-webpack-plugin": "0.11.4",
     "url-loader": "0.5.9",
     "webpack": "3.5.1",
@@ -51,7 +53,7 @@
   },
   "devDependencies": {
     "babel-jest": "20.0.3",
-    "babel-preset-react-native": "2.0.1",
+    "babel-preset-react-native": "2.1.0",
     "haul": "^1.0.0-beta.5",
     "jest": "20.0.4",
     "react-test-renderer": "16.0.0-alpha.12"

src/mobile/containers/App.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import TodoScreen from 'shared/components/TodoScreen';
+
+export default () => (<TodoScreen todos={[]} title='TODO APP' />);

src/mobile/index.android.js

@@ -1,53 +1,4 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
+import { AppRegistry } from 'react-native';
+import App from 'containers/App';
 
-import React, { Component } from 'react';
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
-
-export default class UniversalReactApp extends Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.android.js
-        </Text>
-        <Text style={styles.instructions}>
-          Double tap R on your keyboard to reload,{'\n'}
-          Shake or press menu button for dev menu
-        </Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
-
-AppRegistry.registerComponent('UniversalReactApp', () => UniversalReactApp);
+AppRegistry.registerComponent('UniversalReactApp', () => App);

src/mobile/index.ios.js

@@ -1,53 +1,4 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
+import { AppRegistry } from 'react-native';
+import App from 'containers/App';
 
-import React, { Component } from 'react';
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View
-} from 'react-native';
-
-export default class UniversalReactApp extends Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.ios.js
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          Cmd+D or shake for dev menu
-        </Text>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
-
-AppRegistry.registerComponent('UniversalReactApp', () => UniversalReactApp);
+AppRegistry.registerComponent('UniversalReactApp', () => App);

src/shared/components/ActionButton.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Touchable from 'shared/components/Touchable';
+
+const Wrapper = Touchable`
+  width: 30px;
+  height: 30px;
+  margin: 0;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+`;
+
+export default ({ onClick, children}) => <Wrapper onPress={onClick}>{children}</Wrapper>

src/shared/components/AddTodoInput.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import styled from 'styled-components';
+
+const TextInput = styled.input`
+  flex-grow: 1;
+`
+
+export default ({ onChangeText, value }) =>
+  <TextInput
+    onChange={(e) => { onChangeText(e.target.value) }}
+    value={value}
+    placeholder='Add Todo...'
+  />

src/shared/components/AddTodoInput.native.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import styled from 'styled-components/native';
+
+const TextInput = styled.TextInput`
+  flex-grow: 1;
+`
+
+export default ({ onChangeText, value }) =>
+  <TextInput
+    onChangeText={onChangeText}
+    value={value}
+    placeholder='Add Todo...'
+  />

src/shared/components/TodoItem.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import ActionButtons from 'shared/containers/ActionButtons';
+import styled from 'styled-components/primitives';
+
+const Wrapper = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+  padding: 0 2%;
+`;
+
+const Title = styled.Text`
+  font-size: 16px;
+  flex-grow: 1;
+`;
+
+export default ({ text, id }) => <Wrapper><Title>{text}</Title><ActionButtons id={id}/></Wrapper>

src/shared/components/TodoList.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styled from 'styled-components';
+import TodoItem from 'shared/components/TodoItem';
+
+const List = styled.ul`
+  flex: 1;
+  margin: 0;
+  list-style-type: none;
+  padding: 0;
+`
+const renderItem = ({ id, text }) => (<li key={id}><TodoItem id={id} text={text} /></li>)
+
+export default ({ todos }) => (<List>{todos.map(renderItem)}</List>)

src/shared/components/TodoList.native.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from 'styled-components/native';
+import TodoItem from 'shared/components/TodoItem';
+
+const List = styled.FlatList`
+  flex: 1;
+`
+
+const renderItem = ({ item: { id, text } }) => (<TodoItem id={id} text={text} />)
+
+export default ({ todos }) =>
+  (<List data={todos} renderItem={renderItem} keyExtractor={({ id }) => id} />)

src/shared/components/TodoScreen.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components/primitives';
+import AddTodo from 'shared/containers/AddTodo';
+import TodoList from 'shared/components/TodoList';
+
+
+const Wrapper = styled.View`
+  padding-top: 20px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+
+const Header = styled.Text`
+  font-size: 20px;
+  text-align: center;
+`;
+
+const TodoScreen = ({ title, todos }) => {
+  return (
+    <Wrapper>
+      <Header>{title}</Header>
+      <AddTodo />
+      <TodoList todos={todos} />
+    </Wrapper>);
+};
+
+export default TodoScreen;

src/shared/components/Touchable/index.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export default styled.button.attrs(({
+  onClick: (props) => props.onPress,
+}));

src/shared/components/Touchable/index.native.js

@@ -0,0 +1,3 @@
+import styled from 'styled-components/native';
+
+export default styled.TouchableOpacity;

src/shared/containers/ActionButtons.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import ActionButton from 'shared/components/ActionButton';
+import styled from 'styled-components/primitives';
+
+const Wrapper = styled.View`
+  display: flex;
+  flex-direction: row;
+`;
+
+const ButtonContent = styled.Text`
+  margin: 0;
+`;
+
+const ActionButtons = ({ removeTodo, toggleTodo, id }) => {
+  return (
+    <Wrapper>
+      <ActionButton onClick={() => { removeTodo(id); }}><ButtonContent>X</ButtonContent></ActionButton>
+      <ActionButton onClick={() => { toggleTodo(id); }}><ButtonContent>O</ButtonContent></ActionButton>
+    </Wrapper>);
+};
+
+export default ActionButtons;

src/shared/containers/AddTodo.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import styled from 'styled-components/primitives';
+import AddTodoInput from 'shared/components/AddTodoInput';
+import ActionButton from 'shared/components/ActionButton';
+
+const Wrapper = styled.View`
+  display: flex;
+  flex-direction: row;
+  padding: 5px 2%;
+  margin-top: 5px;
+`;
+
+const ButtonContent = styled.Text`
+  color: #00FF00;
+`
+
+class AddTodo extends Component {
+  state = {
+    text: '',
+  };
+
+  onChangeText = (text) => {
+    this.setState({ text });
+  };
+
+  onAdd = () => {
+    this.props.onAdd(this.state.text);
+  };
+
+  render() {
+    return (
+      <Wrapper>
+        <AddTodoInput
+          onChangeText={this.onChangeText}
+          value={this.state.text}
+        />
+        <ActionButton onClick={this.onAdd}>
+          <ButtonContent>+</ButtonContent>
+        </ActionButton>
+      </Wrapper>
+    );
+  };
+};
+
+export default AddTodo;