artsy
diff --git a/Collapse file: .eslintrc
‎.eslintrc‎
Copy file name to clipboard
+9-2Lines changed: 9 additions & 2 deletions b/Collapse file: .eslintrc
‎.eslintrc‎
Copy file name to clipboard
+9-2Lines changed: 9 additions & 2 deletions
diff --git a/Collapse file: .flowconfig
‎.flowconfig‎
Copy file name to clipboard
+1-11Lines changed: 1 addition & 11 deletions b/Collapse file: .flowconfig
‎.flowconfig‎
Copy file name to clipboard
+1-11Lines changed: 1 addition & 11 deletions
diff --git a/Collapse file: .vscode/settings.json
‎.vscode/settings.json‎
Copy file name to clipboard
+3Lines changed: 3 additions & 0 deletions b/Collapse file: .vscode/settings.json
‎.vscode/settings.json‎
Copy file name to clipboard
+3Lines changed: 3 additions & 0 deletions
diff --git a/Collapse file: Example/Emission.xcodeproj/project.pbxproj
‎Example/Emission.xcodeproj/project.pbxproj‎
Copy file name to clipboard
+20-4Lines changed: 20 additions & 4 deletions b/Collapse file: Example/Emission.xcodeproj/project.pbxproj
‎Example/Emission.xcodeproj/project.pbxproj‎
Copy file name to clipboard
+20-4Lines changed: 20 additions & 4 deletions
diff --git a/Collapse file: Example/Emission/AppDelegate.m
‎Example/Emission/AppDelegate.m‎
Copy file name to clipboard
+11Lines changed: 11 additions & 0 deletions b/Collapse file: Example/Emission/AppDelegate.m
‎Example/Emission/AppDelegate.m‎
Copy file name to clipboard
+11Lines changed: 11 additions & 0 deletions
diff --git a/Collapse file: Example/Emission/Base.lproj/LaunchScreen.xib
‎Example/Emission/Base.lproj/LaunchScreen.xib‎
Copy file name to clipboard
+4-4Lines changed: 4 additions & 4 deletions b/Collapse file: Example/Emission/Base.lproj/LaunchScreen.xib
‎Example/Emission/Base.lproj/LaunchScreen.xib‎
Copy file name to clipboard
+4-4Lines changed: 4 additions & 4 deletions
diff --git a/Collapse file: Example/Emission/stub_container.js
‎Example/Emission/stub_container.js‎
Copy file name to clipboard
-40Lines changed: 0 additions & 40 deletions b/Collapse file: Example/Emission/stub_container.js
‎Example/Emission/stub_container.js‎
Copy file name to clipboard
-40Lines changed: 0 additions & 40 deletions
diff --git a/Collapse file: docs/choose-theme.png
‎docs/choose-theme.png‎
Copy file name to clipboard
72.2 KB
Display the source diff
Display the rich diff b/Collapse file: docs/choose-theme.png
‎docs/choose-theme.png‎
Copy file name to clipboard
72.2 KB
Display the source diff
Display the rich diff
diff --git a/Collapse file: docs/vscode.md
‎docs/vscode.md‎
Copy file name to clipboard
+59-2Lines changed: 59 additions & 2 deletions
Display the source diff
Display the rich diff b/Collapse file: docs/vscode.md
‎docs/vscode.md‎
Copy file name to clipboard
+59-2Lines changed: 59 additions & 2 deletions
Display the source diff
Display the rich diff
diff --git a/Collapse file: jsconfig.json
‎jsconfig.json‎
Copy file name to clipboard
+12Lines changed: 12 additions & 0 deletions b/Collapse file: jsconfig.json
‎jsconfig.json‎
Copy file name to clipboard
+12Lines changed: 12 additions & 0 deletions
@@ -11,7 +11,9 @@
   },
 
   "plugins": [
-    "react"
+    "react",
+    "flow-vars",
+    "flowtype"
   ],
 
   // Map from global var to bool specifying if it can be redefined
@@ -232,6 +234,11 @@
     "react/prop-types": 0,
     "react/react-in-jsx-scope": 0,
     "react/self-closing-comp": 1,
-    "react/wrap-multilines": 0
+    "react/wrap-multilines": 0,
+
+    // Flow
+    "flow-vars/define-flow-type": 1,
+    "flow-vars/use-flow-type": 1
+
   }
 }
@@ -1,11 +1,5 @@
 [ignore]
 
-# We fork some components by platform.
-.*/*.android.js
-
-# Ignore templates with `@flow` in header
-.*/local-cli/generator.*
-
 # Ignore malformed json
 .*/node_modules/y18n/test/.*\.json
 
@@ -29,13 +23,9 @@ munge_underscores=true
 module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
 module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
 
-suppress_type=$FlowIssue
-suppress_type=$FlowFixMe
-suppress_type=$FixMe
-
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-7]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
 suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-7]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 
 [version]
-^0.27.0
+^0.29.0
@@ -4,12 +4,15 @@
         "*.podspec": "ruby",
         "Podfile": "ruby",
         "*.h": "objective-c",
+        "*.js": "flow"
     },
     "files.trimTrailingWhitespace": true,
 
 	"editor.renderWhitespace": true,
     "editor.rulers": [120],
     "editor.tabSize": 2,
 
+    // Because we use Flow - see https://github.com/flowtype/flow-for-vscode#setup
+    "javascript.validate.enable": false,
     "clang.compilationDatabase": "${workspaceRoot}/Example/compile_commands.json",
 }
@@ -105,13 +105,11 @@
 				51E682F51D2DAE24008BC152 /* Configuration.h */,
 				510DCB131CCA69EC0075E8CB /* AppDelegate.h */,
 				510DCB141CCA69EC0075E8CB /* AppDelegate.m */,
+				60D3D56D1D42532600A15671 /* Navigation */,
+				60D3D56C1D42531200A15671 /* Storybooks */,
 				510DCB1C1CCA69EC0075E8CB /* Assets.xcassets */,
 				510DCB211CCA69EC0075E8CB /* Info.plist */,
 				510DCB101CCA69EC0075E8CB /* Supporting Files */,
-				51F3E9A21CF3B8A4004A2013 /* RotationNavigationController.h */,
-				51F3E9A31CF3B8A4004A2013 /* RotationNavigationController.m */,
-				60B743B51D3EB12600E6B2A3 /* ARStorybookComponentViewController.h */,
-				60B743B61D3EB12600E6B2A3 /* ARStorybookComponentViewController.m */,
 			);
 			path = Emission;
 			sourceTree = "<group>";
@@ -179,6 +177,24 @@
 			name = "Podspec Metadata";
 			sourceTree = "<group>";
 		};
+		60D3D56C1D42531200A15671 /* Storybooks */ = {
+			isa = PBXGroup;
+			children = (
+				60B743B51D3EB12600E6B2A3 /* ARStorybookComponentViewController.h */,
+				60B743B61D3EB12600E6B2A3 /* ARStorybookComponentViewController.m */,
+			);
+			name = Storybooks;
+			sourceTree = "<group>";
+		};
+		60D3D56D1D42532600A15671 /* Navigation */ = {
+			isa = PBXGroup;
+			children = (
+				51F3E9A21CF3B8A4004A2013 /* RotationNavigationController.h */,
+				51F3E9A31CF3B8A4004A2013 /* RotationNavigationController.m */,
+			);
+			name = Navigation;
+			sourceTree = "<group>";
+		};
 		A8456AA0E39F581C091B5C1D /* Frameworks */ = {
 			isa = PBXGroup;
 			children = (
 
@@ -59,6 +59,7 @@ - (void)setupEmission;
   NSAssert(![OAUTH_TOKEN isEqualToString:@"TOKEN GOES HERE"], @"Specify your access token in Configuration.h");
 
   AREmission *emission = nil;
+
 #ifdef ENABLE_DEV_MODE
   NSURL *packagerURL = [NSURL URLWithString:@"https://localhost:8081/Example/Emission/index.ios.bundle?platform=ios&dev=true"];
   emission = [[AREmission alloc] initWithUserID:USER_ID authenticationToken:OAUTH_TOKEN packagerURL:packagerURL];
@@ -67,6 +68,7 @@ - (void)setupEmission;
 #endif
   [AREmission setSharedInstance:emission];
 
+
   emission.APIModule.artistFollowStatusProvider = ^(NSString *artistID, RCTResponseSenderBlock block) {
     NSNumber *following = @(randomBOOL());
     NSLog(@"Artist(%@).follow => %@", artistID, following);
@@ -88,12 +90,20 @@ - (void)setupEmission;
 
   emission.switchBoardModule.presentNavigationViewController = ^(UIViewController * _Nonnull fromViewController,
                                                                  NSString * _Nonnull route) {
+    if ([fromViewController isKindOfClass:ARStorybookComponentViewController.class]) {
+      NSLog(@"Route push - %@", route);
+      return;
+    }
     [fromViewController.navigationController pushViewController:[self viewControllerForRoute:route]
                                                        animated:YES];
   };
 
   emission.switchBoardModule.presentModalViewController = ^(UIViewController * _Nonnull fromViewController,
                                                             NSString * _Nonnull route) {
+    if ([fromViewController isKindOfClass:ARStorybookComponentViewController.class]) {
+      NSLog(@"Route modal - %@", route);
+      return;
+    }
     UIViewController *viewController = [self viewControllerForRoute:route];
     UINavigationController *navigationController = [[RotationNavigationController alloc] initWithRootViewController:viewController];
     viewController.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone
@@ -107,6 +117,7 @@ - (void)setupEmission;
   };
 }
 
+
 - (UIViewController *)viewControllerForRoute:(NSString *)route;
 {
   UIViewController *viewController = nil;
 
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="9532" systemVersion="15C50" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="10117" systemVersion="15G26a" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="9530"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="10085"/>
         <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
     </dependencies>
     <objects>
@@ -15,13 +15,13 @@
                 <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="  Copyright (c) 2015 Artsy. All rights reserved." textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
                     <rect key="frame" x="20" y="439" width="441" height="21"/>
                     <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                    <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
                     <nil key="highlightedColor"/>
                 </label>
                 <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Emission" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
                     <rect key="frame" x="20" y="140" width="441" height="43"/>
                     <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
-                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                    <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
                     <nil key="highlightedColor"/>
                 </label>
             </subviews>
 
@@ -4,19 +4,27 @@
 
 1. [Install VS Code](https://code.visualstudio.com).
 1. Install the [React Native Extension](https://github.com/Microsoft/vscode-react-native)
-1. Next install these extensions: ESLint, View Node Package, Flow Language, Spelling and Grammar Checker.
+1. Next install these extensions: ESLint, View Node Package, Flow Language, npm Intellisense, Spelling and Grammar Checker.
 1. Install the command line tools via the command: "Install 'code' command in PATH"/
 
 Note, if you are using [nvm](https://github.com/creationix/nvm), I strongly recommend always opening VS code from the terminal to ensure all the environment variables are correct.
 
-### Commands / Extensions / Tasks
+### Terminology - Commands / Extensions / Tasks
 
 A command is a one off thing the editor can do, press  `cmd + shift + p` to bring up a list, then type the one you want.
 
 An extension is a way to add specific features to the editor, you can run the command "Install Extensions" to start installing new ones.
 
 A task is a customizable command that is set up per-project.
 
+### Theming interlude
+
+The default theme for VS Code is pretty intense, if you're a light theme kind of person. I would recommend switching to "Light (Visual Studio)", via the "Change Theme" command.
+
+![https://github.com/artsy/emission/blob/master/docs/choose-theme.png?raw=true](https://github.com/artsy/emission/master/flow/docs/choose-theme.png?raw=true)
+
+This screenshot also includes a code font with JS ligatures, called [Fira Code](https://github.com/tonsky/FiraCode).
+
 ### Starting React-Native Services
 
 _note:_ this is not 100% where I want this, but it's at a "works well" stage. I'd like to turn these into one command eventually.
@@ -40,6 +48,45 @@ You should now have a fully working version of the development environment. You
 
 _Note:_ You can still launch Chrome as a JS debugger from inside the app if you need to use that for something. This should obviate a lot of the need for it though.
 
+### Linting
+
+We use [ESLint](https://eslint.org), a tool that let's us define what our JavaScript should look like. Assuming you installed the extension you will see underlines in your code in VS Code.
+
+To make changes with the keyboard, press `cmd + .` to have it ESLint make changes automatically for that one issue.
+
+To fix all fixable issues on the current file, use the command "ESLint: Fix All Fixable Issues."
+
+### Flow
+
+In order to get all of the auto-complete magic, you will need to have Flow installed. Flow let's you take a function like:
+
+```js
+function foo(one, two, three) {}
+```
+And write it as:
+
+```js
+function foo(one: any, two: number, three?): string {}
+```
+
+This can improve VS Code's autocompletion and ability to jump between objects quickly. As well as offer useful insight about accidental type coercion and nullability through static analysis. Most of the time the types can be inferred completely automatically, however sometimes you may need to [do it yourself](https://github.com/artsy/emission/commit/e5135618b0c8d10d23e64ea0a6ce5d35c0e4af95#diff-2f5aa3c37ef9f2653a0096c9f8344357R45).
+
+One of the interesting things about types in Flow, are that like Objective-C there are literal and reference types. Think `NSInteger` vs `NSNumber`. So you should be writing `string` not `String`, as the lowercase variant is the value and `String` is a specific type of class. For details there, [see the guide on built-in types](https://flowtype.org/docs/builtins.html).
+
+The most notable thing you will spot using Flow is that you have to declare what your `state` looks like, [see an example](https://github.com/artsy/emission/commit/e5135618b0c8d10d23e64ea0a6ce5d35c0e4af95#diff-84358beb6307a90d292cb841ec4ad693R30).  Flow also enforces string enums, so if an API says that it only supports a few string values, you will see errors there. This is covered well in the [React section of the Flow guides](https://flowtype.org/docs/react.html).
+
+_Note:_ React Native decides what part of what languages are exposed to us. This list you can find the [raw values here](https://github.com/facebook/react-native/blob/master/babel-preset/configs/main.js#L13). A human-readable version [is here](https://facebook.github.io/react-native/docs/javascript-environment.html). If you want the TLDR, you should use types as much as possible from Flow. React-Native [strips](https://babeljs.io/docs/plugins/transform-flow-strip-types/) those during transpliation.
+
+### Jump to Symbols
+
+VS Code uses Typescript under the hood to figure out all of the symbols.
+
+TODO: Decide re:typings.
+
+```sh
+npm install typings --global
+```
+
 ### Recommended Changes for Keyboard Shortcuts
 
 To get an Xcode-like feel for running Emission, it's recommended that you add these key commands to your `keybindings.json`.  To edit your keybindings, use `cmd + shift + p` and type `key` - choose "Open Keyboard Shortcuts."
@@ -61,3 +108,13 @@ This means you use `cmd+r` to start up emission in a iOS simulator. It's the sam
   ```
 * To jump between open tabs in tab group (each side of a split for example) a use `ctrl + tab`.
 * `cmd + shift + y` is also the "Show Debug Console" as it is in Xcode.
+* The Fira Code font improves readability, install the font then add these to your user settings.
+  ```json
+    "editor.fontFamily": "Fira Code",
+    "editor.fontSize": 16,
+    "editor.fontLigatures": true,
+  ```
+* To bring back Xcode's rename all in scope command, use this keybinding:
+  ```json
+    { "key": "ctrl+cmd+e",       "command" : "editor.action.changeAll" }
+  ```
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "module": "commonjs",
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": [
+    "node_modules",
+    "Pod/Assets",
+    "Example/Build"
+  ]
+}