Use cookiecutter variables in template + add component

frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/README.md

@@ -1 +1 @@
-{{cookiecutter.plugin_name}}
+Welcome to your {{cookiecutter.plugin_name}} plugin!

frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/ExampleComponent.test.tsx

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

frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/ExampleComponent.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import Button from '@material-ui/core/Button';
+
+const ExampleComponent: FC<{}> = () => {
+  return (
+    <Button
+      variant="contained"
+      color="primary"
+      onClick={() => window.location.reload()}
+    >
+      Hello!
+    </Button>
+  );
+};
+
+export default ExampleComponent;

frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/components/ExampleComponent/index.ts

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

frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@backstage/__CHANGE_ME__",
+  "name": "@backstage/{{ cookiecutter.plugin_name }}",
   "version": "0.0.0",
   "main": "src/index.ts",
   "main:src": "src/index.ts",

frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.test.ts

@@ -1,7 +1,7 @@
 import plugin from './plugin';
 
-describe('plugin-1', () => {
+describe('{{ cookiecutter.plugin_name }}', () => {
   it('should export plugin', () => {
-    expect(plugin.id).toBe('change-me-id');
+    expect(plugin.id).toBe('{{ cookiecutter.plugin_name }}');
   });
 });

frontend/packages/plugins/_template/{{ cookiecutter.plugin_name }}/src/plugin.ts

@@ -1,5 +1,5 @@
 import { createPlugin } from '@backstage/core';
 
 export default createPlugin({
-  id: 'change-me-id',
+  id: '{{ cookiecutter.plugin_name }}',
 });