packages/plugins: move to plugins/

plugins/hello-world/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  ...require('@spotify/web-scripts/config/jest.config.js'),
+  setupFilesAfterEnv: ['../jest.setup.ts'],
+};

plugins/hello-world/jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

plugins/hello-world/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@spotify-backstage/plugin-hello-world",
+  "version": "0.0.0",
+  "main": "dist/cjs",
+  "devDependencies": {
+    "@spotify-backstage/cli": "^1.2.0",
+    "@spotify-backstage/core": "1.0.0",
+    "@material-ui/core": "^4.9.1",
+    "@material-ui/icons": "^4.9.1",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "google-protobuf": "^3.11.2",
+    "grpc-web": "^1.0.7",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  },
+  "scripts": {
+    "build": "backstage-cli plugin:build",
+    "lint": "backstage-cli plugin:lint",
+    "test": "backstage-cli plugin:test"
+  },
+  "license": "Apache-2.0"
+}

plugins/hello-world/src/components/MyComponent/MyComponent.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import MyComponent from './MyComponent';
+
+describe('MyComponent', () => {
+  it('should render', () => {
+    const rendered = render(<MyComponent />);
+    expect(rendered.getByText('Hello!')).toBeInTheDocument();
+  });
+});

plugins/hello-world/src/components/MyComponent/MyComponent.tsx

@@ -0,0 +1,44 @@
+import React, { FC, useState, useEffect, Fragment } from 'react';
+import Button from '@material-ui/core/Button';
+import { HelloPromiseClient } from '../../proto/hello_grpc_web_pb';
+import { HelloRequest } from '../../proto/hello_pb';
+import { Typography } from '@material-ui/core';
+
+const MyComponent: FC<{}> = () => {
+  const [message, setMessage] = useState<string>('');
+  const [error, setError] = useState<string>();
+
+  useEffect(() => {
+    const client = new HelloPromiseClient('http://localhost:8080');
+
+    const request = new HelloRequest();
+    request.setName('Spotify');
+
+    client.hello(request).then(
+      reply => {
+        setMessage(reply.getMessage() ?? '');
+      },
+      err => {
+        setError(err.message);
+      },
+    );
+  }, []);
+
+  return (
+    <Fragment>
+      <Typography variant="body1">{message}</Typography>
+      <Typography variant="body1" color="error">
+        {error}
+      </Typography>
+      <Button
+        variant="contained"
+        color="primary"
+        onClick={() => window.location.reload()}
+      >
+        Hello!
+      </Button>
+    </Fragment>
+  );
+};
+
+export default MyComponent;

plugins/hello-world/src/components/MyComponent/index.ts

@@ -0,0 +1 @@
+export { default } from './MyComponent';

plugins/hello-world/src/index.ts

@@ -0,0 +1,2 @@
+export { default } from './plugin';
+export { default as MyComponent } from './components/MyComponent';

plugins/hello-world/src/plugin.test.ts

@@ -0,0 +1,7 @@
+import plugin from './plugin';
+
+describe('plugin', () => {
+  it('should export plugin', () => {
+    expect(plugin).toBeDefined();
+  });
+});

plugins/hello-world/src/plugin.ts

@@ -0,0 +1,5 @@
+import { createPlugin } from '@spotify-backstage/core';
+
+export default createPlugin({
+  id: 'hello-world',
+});

plugins/hello-world/src/proto/hello_grpc_web_pb.d.ts

@@ -0,0 +1,32 @@
+import * as grpcWeb from 'grpc-web';
+
+import {
+  HelloReply,
+  HelloRequest} from './hello_pb';
+
+export class HelloClient {
+  constructor (hostname: string,
+               credentials?: null | { [index: string]: string; },
+               options?: null | { [index: string]: string; });
+
+  hello(
+    request: HelloRequest,
+    metadata: grpcWeb.Metadata | undefined,
+    callback: (err: grpcWeb.Error,
+               response: HelloReply) => void
+  ): grpcWeb.ClientReadableStream<HelloReply>;
+
+}
+
+export class HelloPromiseClient {
+  constructor (hostname: string,
+               credentials?: null | { [index: string]: string; },
+               options?: null | { [index: string]: string; });
+
+  hello(
+    request: HelloRequest,
+    metadata?: grpcWeb.Metadata
+  ): Promise<HelloReply>;
+
+}
+

plugins/hello-world/src/proto/hello_grpc_web_pb.js

@@ -0,0 +1,153 @@
+/**
+ * @fileoverview gRPC-Web generated client stub for spotify.backstage.hello.v1alpha1
+ * @enhanceable
+ * @public
+ */
+
+// GENERATED CODE -- DO NOT EDIT!
+
+
+
+const grpc = {};
+grpc.web = require('grpc-web');
+
+const proto = {};
+proto.spotify = {};
+proto.spotify.backstage = {};
+proto.spotify.backstage.hello = {};
+proto.spotify.backstage.hello.v1alpha1 = require('./hello_pb.js');
+
+/**
+ * @param {string} hostname
+ * @param {?Object} credentials
+ * @param {?Object} options
+ * @constructor
+ * @struct
+ * @final
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloClient =
+    function(hostname, credentials, options) {
+  if (!options) options = {};
+  options['format'] = 'text';
+
+  /**
+   * @private @const {!grpc.web.GrpcWebClientBase} The client
+   */
+  this.client_ = new grpc.web.GrpcWebClientBase(options);
+
+  /**
+   * @private @const {string} The hostname
+   */
+  this.hostname_ = hostname;
+
+};
+
+
+/**
+ * @param {string} hostname
+ * @param {?Object} credentials
+ * @param {?Object} options
+ * @constructor
+ * @struct
+ * @final
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloPromiseClient =
+    function(hostname, credentials, options) {
+  if (!options) options = {};
+  options['format'] = 'text';
+
+  /**
+   * @private @const {!grpc.web.GrpcWebClientBase} The client
+   */
+  this.client_ = new grpc.web.GrpcWebClientBase(options);
+
+  /**
+   * @private @const {string} The hostname
+   */
+  this.hostname_ = hostname;
+
+};
+
+
+/**
+ * @const
+ * @type {!grpc.web.MethodDescriptor<
+ *   !proto.spotify.backstage.hello.v1alpha1.HelloRequest,
+ *   !proto.spotify.backstage.hello.v1alpha1.HelloReply>}
+ */
+const methodDescriptor_Hello_Hello = new grpc.web.MethodDescriptor(
+  '/spotify.backstage.hello.v1alpha1.Hello/Hello',
+  grpc.web.MethodType.UNARY,
+  proto.spotify.backstage.hello.v1alpha1.HelloRequest,
+  proto.spotify.backstage.hello.v1alpha1.HelloReply,
+  /**
+   * @param {!proto.spotify.backstage.hello.v1alpha1.HelloRequest} request
+   * @return {!Uint8Array}
+   */
+  function(request) {
+    return request.serializeBinary();
+  },
+  proto.spotify.backstage.hello.v1alpha1.HelloReply.deserializeBinary
+);
+
+
+/**
+ * @const
+ * @type {!grpc.web.AbstractClientBase.MethodInfo<
+ *   !proto.spotify.backstage.hello.v1alpha1.HelloRequest,
+ *   !proto.spotify.backstage.hello.v1alpha1.HelloReply>}
+ */
+const methodInfo_Hello_Hello = new grpc.web.AbstractClientBase.MethodInfo(
+  proto.spotify.backstage.hello.v1alpha1.HelloReply,
+  /**
+   * @param {!proto.spotify.backstage.hello.v1alpha1.HelloRequest} request
+   * @return {!Uint8Array}
+   */
+  function(request) {
+    return request.serializeBinary();
+  },
+  proto.spotify.backstage.hello.v1alpha1.HelloReply.deserializeBinary
+);
+
+
+/**
+ * @param {!proto.spotify.backstage.hello.v1alpha1.HelloRequest} request The
+ *     request proto
+ * @param {?Object<string, string>} metadata User defined
+ *     call metadata
+ * @param {function(?grpc.web.Error, ?proto.spotify.backstage.hello.v1alpha1.HelloReply)}
+ *     callback The callback function(error, response)
+ * @return {!grpc.web.ClientReadableStream<!proto.spotify.backstage.hello.v1alpha1.HelloReply>|undefined}
+ *     The XHR Node Readable Stream
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloClient.prototype.hello =
+    function(request, metadata, callback) {
+  return this.client_.rpcCall(this.hostname_ +
+      '/spotify.backstage.hello.v1alpha1.Hello/Hello',
+      request,
+      metadata || {},
+      methodDescriptor_Hello_Hello,
+      callback);
+};
+
+
+/**
+ * @param {!proto.spotify.backstage.hello.v1alpha1.HelloRequest} request The
+ *     request proto
+ * @param {?Object<string, string>} metadata User defined
+ *     call metadata
+ * @return {!Promise<!proto.spotify.backstage.hello.v1alpha1.HelloReply>}
+ *     A native promise that resolves to the response
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloPromiseClient.prototype.hello =
+    function(request, metadata) {
+  return this.client_.unaryCall(this.hostname_ +
+      '/spotify.backstage.hello.v1alpha1.Hello/Hello',
+      request,
+      metadata || {},
+      methodDescriptor_Hello_Hello);
+};
+
+
+module.exports = proto.spotify.backstage.hello.v1alpha1;
+

plugins/hello-world/src/proto/hello_pb.d.ts

@@ -0,0 +1,38 @@
+import * as jspb from "google-protobuf"
+
+export class HelloRequest extends jspb.Message {
+  getName(): string;
+  setName(value: string): void;
+
+  serializeBinary(): Uint8Array;
+  toObject(includeInstance?: boolean): HelloRequest.AsObject;
+  static toObject(includeInstance: boolean, msg: HelloRequest): HelloRequest.AsObject;
+  static serializeBinaryToWriter(message: HelloRequest, writer: jspb.BinaryWriter): void;
+  static deserializeBinary(bytes: Uint8Array): HelloRequest;
+  static deserializeBinaryFromReader(message: HelloRequest, reader: jspb.BinaryReader): HelloRequest;
+}
+
+export namespace HelloRequest {
+  export type AsObject = {
+    name: string,
+  }
+}
+
+export class HelloReply extends jspb.Message {
+  getMessage(): string;
+  setMessage(value: string): void;
+
+  serializeBinary(): Uint8Array;
+  toObject(includeInstance?: boolean): HelloReply.AsObject;
+  static toObject(includeInstance: boolean, msg: HelloReply): HelloReply.AsObject;
+  static serializeBinaryToWriter(message: HelloReply, writer: jspb.BinaryWriter): void;
+  static deserializeBinary(bytes: Uint8Array): HelloReply;
+  static deserializeBinaryFromReader(message: HelloReply, reader: jspb.BinaryReader): HelloReply;
+}
+
+export namespace HelloReply {
+  export type AsObject = {
+    message: string,
+  }
+}
+

plugins/hello-world/src/proto/hello_pb.js

@@ -0,0 +1,308 @@
+/**
+ * @fileoverview
+ * @enhanceable
+ * @suppress {messageConventions} JS Compiler reports an error if a variable or
+ *     field starts with 'MSG_' and isn't a translatable message.
+ * @public
+ */
+// GENERATED CODE -- DO NOT EDIT!
+
+var jspb = require('google-protobuf');
+var goog = jspb;
+var global = Function('return this')();
+
+goog.exportSymbol('proto.spotify.backstage.hello.v1alpha1.HelloReply', null, global);
+goog.exportSymbol('proto.spotify.backstage.hello.v1alpha1.HelloRequest', null, global);
+/**
+ * Generated by JsPbCodeGenerator.
+ * @param {Array=} opt_data Optional initial data array, typically from a
+ * server response, or constructed directly in Javascript. The array is used
+ * in place and becomes part of the constructed object. It is not cloned.
+ * If no data is provided, the constructed object will be empty, but still
+ * valid.
+ * @extends {jspb.Message}
+ * @constructor
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloRequest = function(opt_data) {
+  jspb.Message.initialize(this, opt_data, 0, -1, null, null);
+};
+goog.inherits(proto.spotify.backstage.hello.v1alpha1.HelloRequest, jspb.Message);
+if (goog.DEBUG && !COMPILED) {
+  /**
+   * @public
+   * @override
+   */
+  proto.spotify.backstage.hello.v1alpha1.HelloRequest.displayName = 'proto.spotify.backstage.hello.v1alpha1.HelloRequest';
+}
+/**
+ * Generated by JsPbCodeGenerator.
+ * @param {Array=} opt_data Optional initial data array, typically from a
+ * server response, or constructed directly in Javascript. The array is used
+ * in place and becomes part of the constructed object. It is not cloned.
+ * If no data is provided, the constructed object will be empty, but still
+ * valid.
+ * @extends {jspb.Message}
+ * @constructor
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloReply = function(opt_data) {
+  jspb.Message.initialize(this, opt_data, 0, -1, null, null);
+};
+goog.inherits(proto.spotify.backstage.hello.v1alpha1.HelloReply, jspb.Message);
+if (goog.DEBUG && !COMPILED) {
+  /**
+   * @public
+   * @override
+   */
+  proto.spotify.backstage.hello.v1alpha1.HelloReply.displayName = 'proto.spotify.backstage.hello.v1alpha1.HelloReply';
+}
+
+
+
+if (jspb.Message.GENERATE_TO_OBJECT) {
+/**
+ * Creates an object representation of this proto suitable for use in Soy templates.
+ * Field names that are reserved in JavaScript and will be renamed to pb_name.
+ * To access a reserved field use, foo.pb_<name>, eg, foo.pb_default.
+ * For the list of reserved names please see:
+ *     com.google.apps.jspb.JsClassTemplate.JS_RESERVED_WORDS.
+ * @param {boolean=} opt_includeInstance Whether to include the JSPB instance
+ *     for transitional soy proto support: http://goto/soy-param-migration
+ * @return {!Object}
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloRequest.prototype.toObject = function(opt_includeInstance) {
+  return proto.spotify.backstage.hello.v1alpha1.HelloRequest.toObject(opt_includeInstance, this);
+};
+
+
+/**
+ * Static version of the {@see toObject} method.
+ * @param {boolean|undefined} includeInstance Whether to include the JSPB
+ *     instance for transitional soy proto support:
+ *     http://goto/soy-param-migration
+ * @param {!proto.spotify.backstage.hello.v1alpha1.HelloRequest} msg The msg instance to transform.
+ * @return {!Object}
+ * @suppress {unusedLocalVariables} f is only used for nested messages
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloRequest.toObject = function(includeInstance, msg) {
+  var f, obj = {
+    name: jspb.Message.getFieldWithDefault(msg, 1, "")
+  };
+
+  if (includeInstance) {
+    obj.$jspbMessageInstance = msg;
+  }
+  return obj;
+};
+}
+
+
+/**
+ * Deserializes binary data (in protobuf wire format).
+ * @param {jspb.ByteSource} bytes The bytes to deserialize.
+ * @return {!proto.spotify.backstage.hello.v1alpha1.HelloRequest}
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloRequest.deserializeBinary = function(bytes) {
+  var reader = new jspb.BinaryReader(bytes);
+  var msg = new proto.spotify.backstage.hello.v1alpha1.HelloRequest;
+  return proto.spotify.backstage.hello.v1alpha1.HelloRequest.deserializeBinaryFromReader(msg, reader);
+};
+
+
+/**
+ * Deserializes binary data (in protobuf wire format) from the
+ * given reader into the given message object.
+ * @param {!proto.spotify.backstage.hello.v1alpha1.HelloRequest} msg The message object to deserialize into.
+ * @param {!jspb.BinaryReader} reader The BinaryReader to use.
+ * @return {!proto.spotify.backstage.hello.v1alpha1.HelloRequest}
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloRequest.deserializeBinaryFromReader = function(msg, reader) {
+  while (reader.nextField()) {
+    if (reader.isEndGroup()) {
+      break;
+    }
+    var field = reader.getFieldNumber();
+    switch (field) {
+    case 1:
+      var value = /** @type {string} */ (reader.readString());
+      msg.setName(value);
+      break;
+    default:
+      reader.skipField();
+      break;
+    }
+  }
+  return msg;
+};
+
+
+/**
+ * Serializes the message to binary data (in protobuf wire format).
+ * @return {!Uint8Array}
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloRequest.prototype.serializeBinary = function() {
+  var writer = new jspb.BinaryWriter();
+  proto.spotify.backstage.hello.v1alpha1.HelloRequest.serializeBinaryToWriter(this, writer);
+  return writer.getResultBuffer();
+};
+
+
+/**
+ * Serializes the given message to binary data (in protobuf wire
+ * format), writing to the given BinaryWriter.
+ * @param {!proto.spotify.backstage.hello.v1alpha1.HelloRequest} message
+ * @param {!jspb.BinaryWriter} writer
+ * @suppress {unusedLocalVariables} f is only used for nested messages
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloRequest.serializeBinaryToWriter = function(message, writer) {
+  var f = undefined;
+  f = message.getName();
+  if (f.length > 0) {
+    writer.writeString(
+      1,
+      f
+    );
+  }
+};
+
+
+/**
+ * optional string name = 1;
+ * @return {string}
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloRequest.prototype.getName = function() {
+  return /** @type {string} */ (jspb.Message.getFieldWithDefault(this, 1, ""));
+};
+
+
+/** @param {string} value */
+proto.spotify.backstage.hello.v1alpha1.HelloRequest.prototype.setName = function(value) {
+  jspb.Message.setProto3StringField(this, 1, value);
+};
+
+
+
+
+
+if (jspb.Message.GENERATE_TO_OBJECT) {
+/**
+ * Creates an object representation of this proto suitable for use in Soy templates.
+ * Field names that are reserved in JavaScript and will be renamed to pb_name.
+ * To access a reserved field use, foo.pb_<name>, eg, foo.pb_default.
+ * For the list of reserved names please see:
+ *     com.google.apps.jspb.JsClassTemplate.JS_RESERVED_WORDS.
+ * @param {boolean=} opt_includeInstance Whether to include the JSPB instance
+ *     for transitional soy proto support: http://goto/soy-param-migration
+ * @return {!Object}
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloReply.prototype.toObject = function(opt_includeInstance) {
+  return proto.spotify.backstage.hello.v1alpha1.HelloReply.toObject(opt_includeInstance, this);
+};
+
+
+/**
+ * Static version of the {@see toObject} method.
+ * @param {boolean|undefined} includeInstance Whether to include the JSPB
+ *     instance for transitional soy proto support:
+ *     http://goto/soy-param-migration
+ * @param {!proto.spotify.backstage.hello.v1alpha1.HelloReply} msg The msg instance to transform.
+ * @return {!Object}
+ * @suppress {unusedLocalVariables} f is only used for nested messages
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloReply.toObject = function(includeInstance, msg) {
+  var f, obj = {
+    message: jspb.Message.getFieldWithDefault(msg, 1, "")
+  };
+
+  if (includeInstance) {
+    obj.$jspbMessageInstance = msg;
+  }
+  return obj;
+};
+}
+
+
+/**
+ * Deserializes binary data (in protobuf wire format).
+ * @param {jspb.ByteSource} bytes The bytes to deserialize.
+ * @return {!proto.spotify.backstage.hello.v1alpha1.HelloReply}
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloReply.deserializeBinary = function(bytes) {
+  var reader = new jspb.BinaryReader(bytes);
+  var msg = new proto.spotify.backstage.hello.v1alpha1.HelloReply;
+  return proto.spotify.backstage.hello.v1alpha1.HelloReply.deserializeBinaryFromReader(msg, reader);
+};
+
+
+/**
+ * Deserializes binary data (in protobuf wire format) from the
+ * given reader into the given message object.
+ * @param {!proto.spotify.backstage.hello.v1alpha1.HelloReply} msg The message object to deserialize into.
+ * @param {!jspb.BinaryReader} reader The BinaryReader to use.
+ * @return {!proto.spotify.backstage.hello.v1alpha1.HelloReply}
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloReply.deserializeBinaryFromReader = function(msg, reader) {
+  while (reader.nextField()) {
+    if (reader.isEndGroup()) {
+      break;
+    }
+    var field = reader.getFieldNumber();
+    switch (field) {
+    case 1:
+      var value = /** @type {string} */ (reader.readString());
+      msg.setMessage(value);
+      break;
+    default:
+      reader.skipField();
+      break;
+    }
+  }
+  return msg;
+};
+
+
+/**
+ * Serializes the message to binary data (in protobuf wire format).
+ * @return {!Uint8Array}
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloReply.prototype.serializeBinary = function() {
+  var writer = new jspb.BinaryWriter();
+  proto.spotify.backstage.hello.v1alpha1.HelloReply.serializeBinaryToWriter(this, writer);
+  return writer.getResultBuffer();
+};
+
+
+/**
+ * Serializes the given message to binary data (in protobuf wire
+ * format), writing to the given BinaryWriter.
+ * @param {!proto.spotify.backstage.hello.v1alpha1.HelloReply} message
+ * @param {!jspb.BinaryWriter} writer
+ * @suppress {unusedLocalVariables} f is only used for nested messages
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloReply.serializeBinaryToWriter = function(message, writer) {
+  var f = undefined;
+  f = message.getMessage();
+  if (f.length > 0) {
+    writer.writeString(
+      1,
+      f
+    );
+  }
+};
+
+
+/**
+ * optional string message = 1;
+ * @return {string}
+ */
+proto.spotify.backstage.hello.v1alpha1.HelloReply.prototype.getMessage = function() {
+  return /** @type {string} */ (jspb.Message.getFieldWithDefault(this, 1, ""));
+};
+
+
+/** @param {string} value */
+proto.spotify.backstage.hello.v1alpha1.HelloReply.prototype.setMessage = function(value) {
+  jspb.Message.setProto3StringField(this, 1, value);
+};
+
+
+goog.object.extend(exports, proto.spotify.backstage.hello.v1alpha1);

plugins/hello-world/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}

plugins/home-page/README.md

@@ -0,0 +1 @@
+Welcome to your home-page plugin!

plugins/home-page/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  ...require('@spotify/web-scripts/config/jest.config.js'),
+  setupFilesAfterEnv: ['../jest.setup.ts'],
+};

plugins/home-page/jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

plugins/home-page/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@spotify-backstage/plugin-home-page",
+  "version": "0.0.0",
+  "main": "dist/cjs",
+  "devDependencies": {
+    "@spotify-backstage/cli": "^1.2.0",
+    "@spotify-backstage/core": "1.0.0",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "@material-ui/core": "^4.9.1",
+    "@material-ui/icons": "^4.9.1"
+  },
+  "scripts": {
+    "build": "backstage-cli plugin:build",
+    "lint": "backstage-cli plugin:lint",
+    "test": "backstage-cli plugin:test"
+  },
+  "license": "Apache-2.0"
+}

plugins/home-page/src/components/HomePage/HomePage.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import HomePage from './HomePage';
+import { ThemeProvider } from '@material-ui/core';
+import { BackstageTheme } from '@spotify-backstage/core';
+
+describe('HomePage', () => {
+  it('should render', () => {
+    const rendered = render(
+      <ThemeProvider theme={BackstageTheme}>
+        <HomePage />
+      </ThemeProvider>,
+    );
+    expect(rendered.baseElement).toBeInTheDocument();
+  });
+});

plugins/home-page/src/components/HomePage/HomePage.tsx

@@ -0,0 +1,80 @@
+import React, { FC } from 'react';
+import { Typography, makeStyles, Theme, Grid } from '@material-ui/core';
+import HomePageTimer from '../HomepageTimer';
+import {
+  Content,
+  EntityLink,
+  InfoCard,
+  SortableTable,
+  Header,
+  Page,
+  theme,
+} from '@spotify-backstage/core';
+import SquadTechHealth from './SquadTechHealth';
+
+const STATIC_DATA = [
+  { id: 'backstage', kind: 'service' },
+  { id: 'backstage-microsite', kind: 'website' },
+];
+
+const useStyles = makeStyles<Theme>(theme => ({
+  mainContentArea: {
+    overflowX: 'hidden',
+    overflowY: 'auto',
+  },
+  avatarButton: {
+    padding: theme.spacing(2),
+  },
+}));
+
+const HomePage: FC<{}> = () => {
+  const classes = useStyles();
+  const columns = [
+    { id: 'entity', label: 'ID' },
+    { id: 'kind', label: 'Kind' },
+  ];
+
+  const data = STATIC_DATA.map(({ id, kind }) => {
+    return {
+      id,
+      entity: (
+        <EntityLink kind={kind} id={id}>
+          <Typography color="primary">{id}</Typography>
+        </EntityLink>
+      ),
+      kind: <Typography>{kind}</Typography>,
+    };
+  });
+
+  const profile = { givenName: 'Suzy' };
+
+  return (
+    <Page theme={theme.home}>
+      <div className={classes.mainContentArea}>
+        <Header
+          title={profile ? `Hello, ${profile.givenName}` : 'Hello'}
+          subtitle="Welcome to Backstage"
+        >
+          <HomePageTimer />
+        </Header>
+        <Content>
+          <Grid container direction="row" spacing={3}>
+            <Grid item xs={6}>
+              <Typography variant="h3" style={{ padding: '8px 0 16px 0' }}>
+                Things you own
+              </Typography>
+              <InfoCard maxWidth>
+                <SortableTable data={data} columns={columns} orderBy="id" />
+              </InfoCard>
+            </Grid>
+            <Grid item xs={6}>
+              <SquadTechHealth />
+            </Grid>
+          </Grid>
+        </Content>
+      </div>
+    </Page>
+  );
+};
+
+export default HomePage;

plugins/home-page/src/components/HomePage/SquadTechHealth.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from 'react';
+import { Grid, Typography } from '@material-ui/core';
+
+import { HorizontalScrollGrid, ProgressCard } from '@spotify-backstage/core';
+
+const SquadTechHealth: FC<{}> = () => {
+  return (
+    <>
+      <Typography variant="h3" style={{ padding: '8px 0 16px 0' }}>
+        Team Metrics
+      </Typography>
+      <HorizontalScrollGrid scrollStep={400} scrollSpeed={100}>
+        <Grid item>
+          <ProgressCard
+            title="Test Certified"
+            progress={0.23}
+            deepLink={{
+              link: '/some-url',
+              title: 'About Test Certs',
+            }}
+          />
+        </Grid>
+        <Grid item>
+          <ProgressCard
+            title="k8s Migration"
+            progress={0.78}
+            deepLink={{
+              link: '/some-url',
+              title: 'About k8s',
+            }}
+          />
+        </Grid>
+      </HorizontalScrollGrid>
+    </>
+  );
+};
+
+export default SquadTechHealth;

plugins/home-page/src/components/HomePage/index.ts

@@ -0,0 +1 @@
+export { default } from './HomePage';

plugins/home-page/src/components/HomepageTimer/HomepageTimer.tsx

@@ -0,0 +1,58 @@
+import React, { FC } from 'react';
+import { HeaderLabel } from '@spotify-backstage/core';
+
+const timeFormat = { hour: '2-digit', minute: '2-digit' };
+const utcOptions = { timeZone: 'UTC', ...timeFormat };
+const nycOptions = { timeZone: 'America/New_York', ...timeFormat };
+const tyoOptions = { timeZone: 'Asia/Tokyo', ...timeFormat };
+const stoOptions = { timeZone: 'Europe/Stockholm', ...timeFormat };
+
+const defaultTimes = {
+  timeNY: '',
+  timeUTC: '',
+  timeTYO: '',
+  timeSTO: '',
+};
+
+function getTimes() {
+  const d = new Date();
+  const lang = window.navigator.language;
+
+  // Using the browser native toLocaleTimeString instead of huge moment-tz
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
+  const timeNY = d.toLocaleTimeString(lang, nycOptions);
+  const timeUTC = d.toLocaleTimeString(lang, utcOptions);
+  const timeTYO = d.toLocaleTimeString(lang, tyoOptions);
+  const timeSTO = d.toLocaleTimeString(lang, stoOptions);
+
+  return { timeNY, timeUTC, timeTYO, timeSTO };
+}
+
+const HomePageTimer: FC<{}> = () => {
+  const [{ timeNY, timeUTC, timeTYO, timeSTO }, setTimes] = React.useState(
+    defaultTimes,
+  );
+
+  React.useEffect(() => {
+    setTimes(getTimes());
+
+    const intervalId = setInterval(() => {
+      setTimes(getTimes());
+    }, 1000);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, []);
+
+  return (
+    <>
+      <HeaderLabel label="NYC" value={timeNY} />
+      <HeaderLabel label="UTC" value={timeUTC} />
+      <HeaderLabel label="STO" value={timeSTO} />
+      <HeaderLabel label="TYO" value={timeTYO} />
+    </>
+  );
+};
+
+export default HomePageTimer;

plugins/home-page/src/components/HomepageTimer/index.ts

@@ -0,0 +1 @@
+export { default } from './HomepageTimer';

plugins/home-page/src/index.ts

@@ -0,0 +1 @@
+export { default } from './plugin';

plugins/home-page/src/plugin.test.ts

@@ -0,0 +1,7 @@
+import plugin from './plugin';
+
+describe('home-page', () => {
+  it('should export plugin', () => {
+    expect(plugin).toBeDefined();
+  });
+});

plugins/home-page/src/plugin.ts

@@ -0,0 +1,9 @@
+import { createPlugin } from '@spotify-backstage/core';
+import HomePage from './components/HomePage';
+
+export default createPlugin({
+  id: 'home-page',
+  register({ router }) {
+    router.registerRoute('/', HomePage);
+  },
+});

plugins/home-page/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}