[WIP] Examples (#902)

* remove previous examples * initial SSR example with meteor * prettier files * cleaned up flow typed * added flow example * tweak ssr example * added typescript example * start work on multi project runner * added tests using current test utilities * add testing to SSR example and change flow to base * remove reports * updated base app and removed flow code * prettied base files * fix travis file
apollographql · Jul 31, 2017 · a17394b · a17394b
1 parent 9697f4e
commit a17394b
Show file tree

Hide file tree

Showing 175 changed files with 8,455 additions and 22,712 deletions.
diff --git a/.gitignore b/.gitignore
@@ -31,6 +31,7 @@ lib
 test-lib
 dist
 npm
+.reports
 
 # don't track yarn lock but allow contributors to use it for local dev
 yarn.lock

diff --git a/.travis.yml b/.travis.yml
@@ -14,15 +14,21 @@ before_install:
 
 install:
   - npm install
-  - cd examples/create-react-app && yarn && cd ../../
+  - cd examples/typescript && npm i && cd ../../
+  - cd examples/base && npm i && cd ../../
+  # - cd examples/ssr && npm && cd ../../
+  # XXX install meteor
+  # start meteor app for integration testing
 
 script:
   - npm run danger
   - npm test
   - coveralls < ./coverage/lcov.info || true # ignore coveralls error
   - npm run compile
   - npm run bundle
-  - cd examples/create-react-app && npm test && cd ../../
+  - cd examples/base && npm test && cd ../../
+  - cd examples/typescript && npm test && cd ../../
+    # XXX test SSR
   - npm run filesize
 
 # Allow Travis tests to run in containers.

diff --git a/examples/base/.gitignore b/examples/base/.gitignore
@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/base/README.md b/examples/base/README.md
diff --git a/examples/base/package.json b/examples/base/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "flow",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "apollo-client": "^1.9.0-1",
+    "graphql-tag": "^2.4.2",
+    "react": "^15.6.1",
+    "react-apollo": "file:../..",
+    "react-dom": "^15.6.1",
+    "react-scripts": "1.0.10"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "devDependencies": {}
+}
diff --git a/examples/create-react-app/public/favicon.ico → examples/base/public/favicon.ico b/examples/create-react-app/public/favicon.ico → examples/base/public/favicon.ico
diff --git a/examples/create-react-app/public/index.html → examples/base/public/index.html b/examples/create-react-app/public/index.html → examples/base/public/index.html
@@ -2,20 +2,29 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <!--
-      Notice the use of %PUBLIC_URL% in the tag above.
+      Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favico.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
   </head>
   <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
     <div id="root"></div>
     <!--
       This HTML file is a template.
@@ -24,8 +33,8 @@
       You can add webfonts, meta tags, or analytics to this file.
       The build step will place the bundled scripts into the <body> tag.
 
-      To begin the development, run `npm start`.
-      To create a production bundle, use `npm run build`.
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
 </html>
diff --git a/examples/base/public/manifest.json b/examples/base/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/examples/base/src/App.js b/examples/base/src/App.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
+
+export const HERO_QUERY = gql`
+  query GetCharacter($episode: Episode!) {
+    hero(episode: $episode) {
+      name
+      id
+      friends {
+        name
+        id
+        appearsIn
+      }
+    }
+  }
+`;
+
+export const withCharacter = graphql(HERO_QUERY, {
+  options: ({ episode }) => ({
+    variables: { episode },
+  }),
+  props: ({ data }) => ({ ...data }),
+});
+
+export const CharacterWithoutData = ({ loading, hero, error }) => {
+  if (loading) return <div>Loading</div>;
+  if (error) return <h1>ERROR</h1>;
+  return (
+    <div>
+      {hero &&
+        <div>
+          <h3>
+            {hero.name}
+          </h3>
+
+          {hero.friends &&
+            hero.friends.map(
+              friend =>
+                friend &&
+                <h6 key={friend.id}>
+                  {friend.name}:{' '}
+                  {friend.appearsIn.map(x => x && x.toLowerCase()).join(', ')}
+                </h6>,
+            )}
+        </div>}
+    </div>
+  );
+};
+
+export const Character = withCharacter(CharacterWithoutData);
+
+export const App = () =>
+  <div>
+    <Character episode="NEWHOPE" />
+  </div>;
diff --git a/examples/base/src/__mocks__/data.js b/examples/base/src/__mocks__/data.js
@@ -0,0 +1,32 @@
+export const empty = null;
+
+export const hero_no_friends = {
+  __typename: 'Droid',
+  name: 'r2d2',
+  id: '1',
+  friends: null,
+};
+
+export const empty_array_friends = {
+  ...hero_no_friends,
+  ...{
+    friends: [null],
+  },
+};
+
+export const friend_without_appearsIn = {
+  ...hero_no_friends,
+  ...{
+    friends: [
+      { name: 'luke', id: '2', appearsIn: ['NEWHOPE'] },
+      { name: 'james', id: '777', appearsIn: [null] },
+    ],
+  },
+};
+
+export const full = {
+  ...hero_no_friends,
+  ...{
+    friends: [{ name: 'luke', id: '2', appearsIn: ['NEWHOPE'] }],
+  },
+};