Merge branch 'master' into kkemple/support-react-360

Author: mathieudutour

.eslintrc

@@ -1,28 +1,6 @@
 {
   "parser": "babel-eslint",
   "extends": "airbnb",
-  "plugins": [
-    "prefer-object-spread"
-  ],
-  "ecmaFeatures": {
-    "arrowFunctions": true,
-    "blockBindings": true,
-    "classes": true,
-    "defaultParams": true,
-    "destructuring": true,
-    "forOf": false,
-    "generators": false,
-    "modules": true,
-    "experimentalObjectRestSpread": true,
-    "objectLiteralComputedProperties": true,
-    "objectLiteralDuplicateProperties": false,
-    "objectLiteralShorthandMethods": true,
-    "objectLiteralShorthandProperties": true,
-    "restParams": true,
-    "spread": true,
-    "superInFunctions": true,
-    "templateStrings": true
-  },
   "rules": {
     "prefer-template": 0,
     "new-cap": 0,
@@ -34,6 +12,11 @@
     "no-console": 0,
     // Disable `arrow-parens` because it conflicts with Flow.
     "arrow-parens": 0,
-    "prefer-object-spread/prefer-object-spread": 2
+    "global-require": 0,
+    "react/jsx-filename-extension": 0,
+    "no-underscore-dangle": 0,
+    "import/no-extraneous-dependencies": 0,
+    "react/no-unused-prop-types": 0,
+    "react/require-default-props": 0
   }
 }

.gitignore

@@ -28,6 +28,7 @@ node_modules
 
 # Optional npm cache directory
 .npm
+package-lock.json
 
 # Optional REPL history
 .node_repl_history

.travis.yml

@@ -1,12 +1,8 @@
 sudo: false
+os: osx
+osx_image: xcode8.2
 language: node_js
 node_js:
   - "6"
-addons:
-  # This is the latest version of Firefox that currently supports Happo.
-  # https://github.com/SeleniumHQ/selenium/issues/2559
-  firefox: "47.0.1"
-before_script:
-  - 'sh -e /etc/init.d/xvfb start'
 script:
   - 'npm run travis'

README.md

@@ -5,9 +5,32 @@ Primitive React Interfaces Across Targets
 ## Installation
 
 ```sh
-npm i --save react-primitives
+npm install --save react-primitives
 ```
 
+You will also need to install the targets you want to support:
+
+- web:
+  ```sh
+  npm install --save react-dom react-native-web react-art
+  ```
+- native iOS and Android:
+  ```sh
+  npm install --save react-native
+  ```
+- sketch:
+  ```sh
+  npm install --save react-sketchapp react-test-renderer
+  ```
+- vr:
+  ```sh
+  npm install --save react-vr
+  ```
+- Windows:
+  ```sh
+  npm install --save react-native-windows
+  ```
+
 ### Usage
 
 ```jsx
@@ -33,7 +56,6 @@ const styles = StyleSheet.create({
 });
 ```
 
-
 ## What is this?
 
 This library attempts to propose an ideal set of primitives around building
@@ -44,20 +66,24 @@ don't use platform-specific APIs.
 Importantly, this includes `StyleSheet` for declaring styles, as well as
 `Animated` for doing declarative Animations.
 
-The exported interface thus far is:
+The exported APIs thus far are:
 
 1. `Animated`: Pulled from the [animated](https://github.com/animatedjs/animated) project.
 2. `StyleSheet`: Follows React Native's StyleSheet API.
 3. `View`: A base component for Layout.
 4. `Text`: A base component for Text rendering.
 5. `Image`: A base component for Image rendering.
 6. `Touchable`: A base component for interaction.
+7. `Easing`: A base set of easing functions.
+8. `Dimensions`: Get the devices dimensions.
+9. `PixelRatio`: Get the devices pixel density.
+10. `Platform`: Get information about the platform. (iOS, Android, Web, Sketch, VR,...)
 
 In the future, a `TextInput` component may also be added.
 
 
 ## Props where props are due
 
-This library was largely inspired from the work done by [Nicolas Gallager](https://github.com/necolas) 
+This library was largely inspired from the work done by [Nicolas Gallager](https://github.com/necolas)
 and his great work on the [react-native-web](https://github.com/necolas/react-native-web) library. A few of the files
 in this repo are even copied directly from his project.

example/AllStories.js

@@ -6,6 +6,8 @@ import { getStories } from './StoryManager';
 import './stories/View';
 import './stories/Image';
 import './stories/Text';
+import './stories/Touchable';
+import './stories/Animated';
 
 const styles = StyleSheet.create({
   app: {

example/stories/Animated/Animated1.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { make } from '../../StoryManager';
+import { View, Text, Animated, Touchable } from '../../../src/index';
+
+make('Animated 1', () => {
+  class Example extends React.Component{
+    constructor(props) {
+      super(props)
+
+      this.state = {
+        anim: new Animated.Value(0),
+        on: false
+      }
+
+      this.handleClick = this.handleClick.bind(this)
+    }
+
+    render() {
+      return (
+        <Animated.View style={{left: this.state.anim}}>
+          <Touchable onPress={this.handleClick}>
+            <View style={{ borderWidth: 1, borderColor: '#000' }}>
+              <Text
+                style={{
+                  fontFamily: 'Helvetica',
+                  fontSize: 14,
+                  lineHeight: 16,
+                }}
+              >
+                Touch Me!
+              </Text>
+            </View>
+          </Touchable>
+        </Animated.View>
+      )
+    }
+
+    handleClick() {
+      if (this.state.on) {
+        Animated.timing(this.state.anim, {toValue: 0}).start();
+        this.setState({
+          on: false
+        })
+      } else {
+        Animated.timing(this.state.anim, {toValue: 400}).start();
+        this.setState({
+          on: true
+        })
+      }
+    }
+  }
+
+  return <Example />
+});

example/stories/Animated/index.js

@@ -0,0 +1 @@
+import './Animated1';

example/stories/Touchable/Touchable1.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { make } from '../../StoryManager';
+import { View, Text, Touchable } from '../../../src/index';
+
+make('Touchable 1', () => (
+  <Touchable onPress={() => console.log('pressed')}>
+    <View style={{ borderWidth: 1, borderColor: '#000' }}>
+      <Text
+        style={{
+          fontFamily: 'Helvetica',
+          fontSize: 14,
+          lineHeight: 16,
+        }}
+      >
+        Touch Me!
+      </Text>
+    </View>
+  </Touchable>
+));

example/stories/Touchable/index.js

@@ -0,0 +1 @@
+import './Touchable1';

example/web/example.html

@@ -3,6 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <title>Title</title>
+  <style>
+    html {
+      background: white;
+    }
+  </style>
 </head>
 <body>
   <div class="root"></div>