Add sample js and android plugin

Summary:
The start of an example plugin.

My intention is for this to be a place that we keep up to date with the current best practice for doing things.

For example, with the introduction on persistedStateReducer, there are two ways to receive incoming messages, but only one of them works in the background. This should act as a guideline.

For this reason, don't hold back on reviewing it. I want it to be 👌

Reviewed By: priteshrnandgaonkar

Differential Revision: D10448592

fbshipit-source-id: d5fa978c14e47a7fa3c9a29d0929d5a6109267af

src/plugins/example/index.js

@@ -0,0 +1,97 @@
+/**
+ * Copyright 2018-present Facebook.
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @format
+ * @flow
+ */
+
+import {Button, Input, FlipperPlugin, FlexColumn, styled, Text} from 'flipper';
+
+type DisplayMessageResponse = {
+  greeting: string,
+};
+
+type State = {
+  prompt: string,
+  message: string,
+};
+
+type PersistedState = {
+  currentNotificationId: number,
+};
+
+const Container = styled(FlexColumn)({
+  alignItems: 'center',
+  justifyContent: 'space-around',
+  padding: 20,
+});
+
+export default class extends FlipperPlugin<*, State, PersistedState> {
+  static title = 'Example';
+  static id = 'Example';
+  static icon = 'apps';
+
+  state = {
+    prompt: 'Type a message below to see it displayed on the mobile app',
+    message: '',
+  };
+
+  /*
+   * Reducer to process incoming "send" messages from the mobile counterpart.
+   */
+  static persistedStateReducer = (
+    persistedState: PersistedState,
+    method: string,
+    payload: Object,
+  ): PersistedState => {
+    if (method === 'triggerNotification') {
+      return {
+        currentNotificationId: payload.id,
+      };
+    }
+    return persistedState || {};
+  };
+
+  /*
+   * Callback to provide the currently active notifications.
+   */
+  static getActiveNotifications = (persistedState: PersistedState) => {
+    return [
+      {
+        id: 'test-notification:' + persistedState.currentNotificationId,
+        message: 'Example Notification',
+        severity: 'warning',
+        title: 'Notification: ' + persistedState.currentNotificationId,
+      },
+    ];
+  };
+
+  /*
+   * Call a method of the mobile counterpart, to display a message.
+   */
+  sendMessage() {
+    this.client
+      .call('displayMessage', {message: this.state.message || 'Weeeee!'})
+      .then((params: DisplayMessageResponse) => {
+        this.setState({
+          prompt: 'Nice',
+        });
+      });
+  }
+
+  render() {
+    return (
+      <Container>
+        <Text>{this.state.prompt}</Text>,
+        <Input
+          placeholder="Message"
+          onChange={event => {
+            this.setState({message: event.target.value});
+          }}
+        />,
+        <Button onClick={this.sendMessage.bind(this)}>Send</Button>,
+      </Container>
+    );
+  }
+}

src/plugins/example/package.json

@@ -0,0 +1,6 @@
+{
+    "name": "flipper-plugin-sample",
+    "version": "1.0.0",
+    "main": "index.js",
+    "license": "MIT"
+}

src/plugins/example/yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+