A set of prototyping tools for Relay

Summary: This PR introduces two new tools for prototyping Relay apps:

1. An instance of GraphiQL that runs against an in-memory schema
2. A code playground that lets you live edit a Relay app and its schema

These tools are intended primarily for use on the Relay homepage and in the next generation of the Relay tutorial (#6).

Closes #240

Reviewed By: @wincent

Differential Revision: D2419910

.gitignore

@@ -5,4 +5,5 @@ npm-debug.log
 website/build
 website/src/relay/docs
 website/src/relay/graphql
+website/src/relay/prototyping
 .nvmrc

website-prototyping-tools/HelloApp.js

@@ -0,0 +1,40 @@
+class HelloApp extends React.Component {
+  render() {
+    return (
+      <h1>
+        {this.props.greetings.hello}
+      </h1>
+    );
+  }
+}
+
+HelloApp = Relay.createContainer(HelloApp, {
+  fragments: {
+    greetings: () => Relay.QL`
+      fragment on Greetings {
+        hello,
+      }
+    `,
+  }
+});
+
+class HelloRoute extends Relay.Route {
+  static routeName = 'Hello';
+  static queries = {
+    greetings: (Component) => Relay.QL`
+      query GreetingsQuery {
+        greetings {
+          ${Component.getFragment('greetings')},
+        },
+      }
+    `,
+  };
+}
+
+ReactDOM.render(
+  <Relay.RootContainer
+    Component={HelloApp}
+    route={new HelloRoute()}
+  />,
+  mountNode
+);

website-prototyping-tools/HelloSchema.js

@@ -0,0 +1,28 @@
+import {
+  GraphQLObjectType,
+  GraphQLSchema,
+  GraphQLString,
+} from 'graphql';
+
+var GREETINGS = {
+  hello: 'Hello world',
+};
+
+var GreetingsType = new GraphQLObjectType({
+  name: 'Greetings',
+  fields: () => ({
+    hello: {type: GraphQLString},
+  }),
+});
+
+export default new GraphQLSchema({
+  query: new GraphQLObjectType({
+    name: 'Query',
+    fields: () => ({
+      greetings: {
+        type: GreetingsType,
+        resolve: () => GREETINGS,
+      },
+    }),
+  }),
+});

website-prototyping-tools/RelayPlayground.css

@@ -0,0 +1,191 @@
+@import '~normalize.css';
+@import '~codemirror/lib/codemirror.css';
+@import '~codemirror/theme/solarized.css';
+
+body {
+  font-family: proxima-nova, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+.rpShell {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.rpCodeEditor {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 50%;
+  top: 0;
+}
+.rpCodeEditorNav, .rpResultHeader {
+  background-color: hsl(345, 7%, 23%);
+  height: 30px;
+  line-height: 30px;
+}
+.rpCodeEditorNav {
+  border-right: 1px solid hsl(345, 7%, 13%);
+}
+.rpResultHeader {
+  border-left: 1px solid hsl(345, 7%, 33%);
+}
+.rpCodeEditorNav button {
+  background-color: hsl(345, 7%, 63%);
+  border-bottom: none;
+  border-radius: 4px 4px 0 0;
+  border-width: 1px 1px 0;
+  border-style: solid;
+  border-color: hsl(345, 7%, 18%);
+  box-sizing: border-box;
+  color: hsl(345, 7%, 23%);
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  line-height: 23px;
+  margin-left: 3px;
+  outline: none;
+  padding: 0 10px;
+  vertical-align: bottom;
+}
+.rpCodeEditorNav .rpButtonActive {
+  background-color: #fdf6e3;
+  border-color: transparent;
+}
+.rpResult {
+  bottom: 0;
+  left: 50%;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.rpResultHeader {
+  color: white;
+  font-size: 16px;
+  font-weight: 400;
+  margin: 0;
+  padding: 0 10px 0 44px;
+}
+.rpActivity {
+  left: 10px;
+  position: absolute;
+  top: 0;
+}
+.rpActivity::after {
+  background-image: url(./logo.svg);
+  background-size: 100%;
+  content: '';
+  display: block;
+  height: 30px;
+  position: relative;
+  width: 30px;
+}
+@keyframes lookBusy {
+  from {
+    top: 5px;
+    left: 0;
+    opacity: 1;
+    animation-timing-function: ease-in;
+  }
+  23% {
+    top: 5px;
+    left: 13px;
+    opacity: 0.5;
+  }
+  30% {
+    top: 7px;
+    left: 15px;
+  }
+  37% {
+    top: 10px;
+    left: 13px;
+  }
+  50% {
+    opacity: 0.2;
+    transform: scale(0.2);
+  }
+  53% {
+    top: 10px;
+    left: 7px;
+  }
+  60% {
+    top: 12px;
+    left: 5px;
+  }
+  67% {
+    top: 15px;
+    left: 7px;
+    animation-timing-function: ease-out;
+  }
+  to {
+    top: 15px;
+    left: 20px;
+    opacity: 1;
+  }
+}
+.rpActivityBusy::before {
+  animation: lookBusy 600ms linear infinite;
+  animation-direction: alternate;
+  background: white;
+  border-radius: 5px;
+  content: '';
+  display: block;
+  height: 10px;
+  position: absolute;
+  top: 5px;
+  transition: 3s linear;
+  width: 10px;
+}
+.rpResultOutput {
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  padding: 10px;
+  position: absolute;
+  right: 0;
+  top: 30px;
+}
+.rpError {
+  background-color: rgb(204, 0, 0);
+  bottom: 0;
+  color: white;
+  left: 0;
+  padding: 16px;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.rpError h1 {
+  margin: 0;
+  line-height: 36px;
+  font-size: 24px;
+}
+.rpErrorStack {
+  bottom: 0;
+  font-family: monospace;
+  font-size: 12px;
+  left: 0;
+  margin: 0;
+  padding: 16px;
+  position: absolute;
+  right: 0;
+  top: 52px;
+}
+.ReactCodeMirror {
+  border-right: 1px solid #eee8d5;
+  border-top: 1px solid #eee8d5;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 30px;
+}
+.CodeMirror {
+  bottom: 0;
+  height: auto;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}