From 08f3f562815c551b6fd49b10206ef9ab1bb0be37 Mon Sep 17 00:00:00 2001 From: ngduc Date: Mon, 5 Dec 2016 10:40:35 -0800 Subject: [PATCH] feat: added SimpleNavigator & sample pages --- .editorconfig | 15 +++++++ .eslintrc | 85 +++++++++++++++++++++++++++++++++++++ App/View/AboutView.js | 23 ++++++++++ App/View/App.js | 77 +++++++++------------------------ App/View/ContactUsView.js | 27 ++++++++++++ App/View/MainView.js | 72 +++++++++++++++++++++++++++++++ App/View/SimpleNavigator.js | 38 +++++++++++++++++ App/baseStyles.js | 18 ++++++++ README.md | 7 ++- package.json | 4 +- web/webpack.config.dev.js | 1 + 11 files changed, 307 insertions(+), 60 deletions(-) create mode 100644 .editorconfig create mode 100644 .eslintrc create mode 100644 App/View/AboutView.js create mode 100644 App/View/ContactUsView.js create mode 100644 App/View/MainView.js create mode 100644 App/View/SimpleNavigator.js create mode 100644 App/baseStyles.js diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..bebb3eb --- /dev/null +++ b/.editorconfig @@ -0,0 +1,15 @@ +# EditorConfig: http://EditorConfig.org + +root = true + +[*] +indent_style = space +indent_size = 2 + +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..724ebc4 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,85 @@ +{ + "plugins": [ + "react", "jsdoc" + ], + "parser": "babel-eslint", + "parserOptions": { + "ecmaVersion": 6, + "ecmaFeatures": { + "jsx": true, + "experimentalObjectRestSpread": true + } + }, + "env": { + "browser": true, + "node": true, + "es6": true + }, + "rules": { + // Common js rules + "brace-style": [2, "1tbs", { "allowSingleLine": true }], + "camelcase": 2, + "curly": 2, + "eqeqeq": 2, + "no-extend-native": 2, + "no-proto": 2, + "no-caller": 2, + "no-unused-vars": [2, { "vars": "all", "args": "none" }], + "indent": [2, 2, {"SwitchCase": 1}], + "new-cap": 2, + "quotes": [2, "single"], + "max-depth": [2, 3], + "max-statements": [2, 45], + "max-len": [2, 150], + "no-eq-null": 2, + "operator-linebreak": 2, + "no-multiple-empty-lines": [2, { max: 2 }], + "no-mixed-spaces-and-tabs": 2, + "space-unary-ops": 2, + "no-multi-spaces": 2, + "space-before-blocks": 2, + "space-before-function-paren": [2, "always"], + "keyword-spacing": 2, + "space-infix-ops": 2, + "object-curly-spacing": [2, "always"], + "comma-spacing": [2, { "before": false, "after": true }], + "no-trailing-spaces": 2, + "comma-dangle": 2, + "wrap-iife": 2, + "no-extra-semi": 2, + "semi-spacing": 2, + "semi": [2, "never"], + "spaced-comment": 2, + "func-names": 2, + + // NodeJs rules + "block-scoped-var": 2, + "global-require": 2, + "no-mixed-requires": 2, + "no-new-require": 2, + + // ES6 rules + "arrow-spacing": 2, + "no-const-assign": 2, + "no-var": 2, + "prefer-const": 2, + + // React + "jsx-quotes": [2, "prefer-double"], + "react/jsx-uses-react": 1, + "react/jsx-uses-vars": 1, + + // JSDoc + "jsdoc/check-param-names": 1, + "jsdoc/check-tag-names": 1, + "jsdoc/check-types": 1, + "jsdoc/newline-after-description": 0, + "jsdoc/require-description-complete-sentence": 1, + "jsdoc/require-hyphen-before-param-description": 1, + "jsdoc/require-param": 1, + "jsdoc/require-param-description": 1, + "jsdoc/require-param-type": 1, + "jsdoc/require-returns-description": 1, + "jsdoc/require-returns-type": 1 + } +} diff --git a/App/View/AboutView.js b/App/View/AboutView.js new file mode 100644 index 0000000..4d6753b --- /dev/null +++ b/App/View/AboutView.js @@ -0,0 +1,23 @@ +import React from 'react' +import { + View, + Text +} from 'react-native' +import baseStyles from '../baseStyles' + +export default class AboutView extends React.Component { + + render () { + return ( + + + About Us + + + this.props.nav.back()}> + ⟨ Go Back + + + ) + } +} diff --git a/App/View/App.js b/App/View/App.js index 510692a..c6e82cb 100644 --- a/App/View/App.js +++ b/App/View/App.js @@ -1,72 +1,33 @@ -/** - * Sample React Native App - * https://github.com/facebook/react-native - * @flow - */ - import React, { Component } from 'react' -import { - AppRegistry, - StyleSheet, - Text, - View, - Platform, - TextInput -} from 'react-native' -const { GiftedForm } = require('react-native-gifted-form') +import { StyleSheet, View } from 'react-native' + +import SimpleNavigator from './SimpleNavigator' +import MainView from './MainView' +import ContactUsView from './ContactUsView' +import AboutView from './AboutView' export class App extends Component { - render() { - return ( - - - Welcome to React Native for {Platform.OS}!!!! - - - To get started, edit index.{Platform.OS}.js YA! - - - Press Cmd+R to reload,{'\n'} - { Platform.OS !== "web"?"Cmd+D or shake for dev menu":"" } - + state = {} - - - - + render () { + return ( + + ) } } const styles = StyleSheet.create({ - container: { + view: { flex: 1, - justifyContent: 'center', + justifyContent: 'flex-start', alignItems: 'center', backgroundColor: '#F5FCFF', - }, - welcome: { - fontSize: 20, - textAlign: 'center', - margin: 10, - }, - instructions: { - textAlign: 'center', - color: '#333333', - marginBottom: 5, - }, - myForm: { - width: 400 + paddingTop: 50 } -}) \ No newline at end of file +}) diff --git a/App/View/ContactUsView.js b/App/View/ContactUsView.js new file mode 100644 index 0000000..e344615 --- /dev/null +++ b/App/View/ContactUsView.js @@ -0,0 +1,27 @@ +import React from 'react' +import { + View, + Text +} from 'react-native' +import baseStyles from '../baseStyles' + +export default class ContactUsView extends React.Component { + + render () { + return ( + + + Contact Us + + + this.props.nav.linkTo('about')}> + About Us + + + this.props.nav.back()}> + ⟨ Go Back + + + ) + } +} diff --git a/App/View/MainView.js b/App/View/MainView.js new file mode 100644 index 0000000..d390cef --- /dev/null +++ b/App/View/MainView.js @@ -0,0 +1,72 @@ +import React from 'react' +import { + StyleSheet, + Text, + View, + Platform +} from 'react-native' +import baseStyles from '../baseStyles' + +const { GiftedForm } = require('react-native-gifted-form') + +export default class MainView extends React.Component { + render () { + return ( + + + Welcome to React Native for {Platform.OS}! + + + To get started, edit App.js + + + Press Cmd+R to reload,{'\n'} + { Platform.OS !== "web" ? "Cmd+D or shake for dev menu": "" } + + + this.props.nav.linkTo('contactUs')}> + Go to Contact Us + + + + + + + + + ) + } +} + +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, + }, + myForm: { + marginTop: 20, + alignSelf: 'stretch' + } +}) diff --git a/App/View/SimpleNavigator.js b/App/View/SimpleNavigator.js new file mode 100644 index 0000000..9c8c0bd --- /dev/null +++ b/App/View/SimpleNavigator.js @@ -0,0 +1,38 @@ +import React from 'react' +import { View } from 'react-native' + +export default class SimpleNavigator extends React.Component { + state = { + currentView: null, + view: null + } + currentComp = null + history = [] + + back = () => { + this.history.pop() + const lastViewId = this.history[ this.history.length - 1 ] + this.setState({ currentView: lastViewId }) + } + + linkTo = (viewId) => { + this.history.push(viewId) + this.setState({ currentView: viewId }) + } + + render () { + if (this.state.currentView) { + this.currentComp = this.props.views[ this.state.currentView ] + } else { + this.history = ['index'] + this.currentComp = this.props.views[ 'index' ] + } + const viewEl = + + return ( + + {viewEl} + + ) + } +} diff --git a/App/baseStyles.js b/App/baseStyles.js new file mode 100644 index 0000000..71f4897 --- /dev/null +++ b/App/baseStyles.js @@ -0,0 +1,18 @@ +import { + StyleSheet +} from 'react-native' + +export default StyleSheet.create({ + view: { + padding: 10, + paddingTop: 30, + backgroundColor: '#F5FCFF' + }, + h3: { + fontSize: 20 + }, + link: { + color: 'darkblue', + marginTop: 20, + } +}) diff --git a/README.md b/README.md index 6e23502..0a3a9fa 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,12 @@ Rhinos-app is a react-native app which uses [react-native-web](https://github.com/necolas/react-native-web) to achieve cross-platform design. -![Demo image](https://s3-us-west-1.amazonaws.com/usw-files/581cae09337cb42aa7ab9365.3edebc80-4f0c-4ee4-ae12-14969ad8b789.jpg) +![Demo image](https://s3-us-west-1.amazonaws.com/usw-files/581cae09337cb42aa7ab9365.e01c8e85-6249-4a2b-b323-7413bd02c478.jpg) + +## FEATURES: + + * Runs on Android, iOS, Web (can run as a Windows/MacOS/Linux desktop app with Electron) + * Miscellaneous features: ESLint, Webpack, SimpleNavigator ## PREREQUISITES: diff --git a/package.json b/package.json index fb966eb..352e703 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest", - "web": "webpack-dev-server --port 3000 --config web/webpack.config.dev.js --inline --hot --colors" + "web": "webpack-dev-server --port 3000 --config web/webpack.config.dev.js -d --inline --hot --colors" }, "dependencies": { "react": "~15.3.2", @@ -23,6 +23,8 @@ "babel-preset-react-native": "1.9.0", "babel-preset-stage-1": "^6.5.0", "babel-runtime": "^6.9.2", + "eslint": "^3.11.1", + "eslint-plugin-react": "^6.7.1", "jest": "17.0.3", "react-test-renderer": "15.4.1", "url-loader": "^0.5.7", diff --git a/web/webpack.config.dev.js b/web/webpack.config.dev.js index 602133b..7ec2673 100644 --- a/web/webpack.config.dev.js +++ b/web/webpack.config.dev.js @@ -14,6 +14,7 @@ module.exports = { loaders: [ { test: /\.js$/, + // exclude node_modules except ES6 modules: exclude: /node_modules\/(?!(react-native-|apsl-react-native)).*/, include: [ path.resolve(__dirname, "../App"),