Added petstore external API and created empty react plugin

sreez-showcase/plugins/testfrontend-react/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

sreez-showcase/plugins/testfrontend-react/README.md

@@ -0,0 +1,5 @@
+# backstage-plugin-testfrontend-react
+
+Welcome to the web library package for the testfrontend plugin!
+
+_This plugin was created through the Backstage CLI_

sreez-showcase/plugins/testfrontend-react/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "backstage-plugin-testfrontend-react",
+  "description": "Web library for the testfrontend plugin",
+  "version": "0.1.0",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "license": "Apache-2.0",
+  "private": true,
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "web-library"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
+    "clean": "backstage-cli package clean",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack"
+  },
+  "dependencies": {
+    "@backstage/core-plugin-api": "^1.9.2",
+    "@material-ui/core": "^4.9.13"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.26.3",
+    "@backstage/test-utils": "^1.5.4",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "typescript-language-server": "^4.3.3"
+  },
+  "files": [
+    "dist"
+  ]
+}

sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/ExampleComponent.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { ExampleComponent } from './ExampleComponent';
+
+describe('ExampleComponent', () => {
+  it('should render', async () => {
+    await renderInTestApp(<ExampleComponent />);
+
+    expect(screen.getByText('Hello World')).toBeInTheDocument();
+  });
+
+  it('should display a custom message', async () => {
+    await renderInTestApp(<ExampleComponent message="Hello Example" />);
+
+    expect(screen.getByText('Hello Example')).toBeInTheDocument();
+  });
+});

sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/ExampleComponent.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Typography } from '@material-ui/core';
+
+/**
+ * Props for {@link ExampleComponent}.
+ *
+ * @public
+ */
+export interface ExampleComponentProps {
+  message?: string;
+}
+
+/**
+ * Displays an example.
+ *
+ * @remarks
+ *
+ * Longer descriptions should be put after the `@remarks` tag. That way the initial summary
+ * will show up in the API docs overview section, while the longer description will only be
+ * displayed on the page for the specific API.
+ *
+ * @public
+ */
+export function ExampleComponent(props: ExampleComponentProps) {
+  // By destructuring props here rather than in the signature the API docs will look nicer
+  const { message = 'Hello World' } = props;
+
+  return <Typography variant="h1">{message}</Typography>;
+}

sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/index.ts

@@ -0,0 +1,2 @@
+export { ExampleComponent } from './ExampleComponent';
+export type { ExampleComponentProps } from './ExampleComponent';

sreez-showcase/plugins/testfrontend-react/src/components/index.ts

@@ -0,0 +1,5 @@
+/***/
+// The index file in ./components/ is typically responsible for selecting
+// which components are public API and should be exported from the package.
+
+export * from './ExampleComponent';

sreez-showcase/plugins/testfrontend-react/src/hooks/index.ts

@@ -0,0 +1,5 @@
+/***/
+// The index file in ./hooks/ is typically responsible for selecting
+// which hooks are public API and should be exported from the package.
+
+export * from './useExample';

sreez-showcase/plugins/testfrontend-react/src/hooks/useExample/index.ts

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

sreez-showcase/plugins/testfrontend-react/src/hooks/useExample/useExample.ts

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { useApi, alertApiRef } from '@backstage/core-plugin-api';
+
+/**
+ * Shows an example alert.
+ *
+ * @public
+ */
+export function useExample() {
+  const alertApi = useApi(alertApiRef);
+
+  useEffect(() => {
+    alertApi.post({ message: 'Hello World!' });
+  }, [alertApi]);
+}

sreez-showcase/plugins/testfrontend-react/src/index.ts

@@ -0,0 +1,12 @@
+/***/
+/**
+ * Web library for the testfrontend plugin.
+ *
+ * @packageDocumentation
+ */
+
+// In this package you might for example export components or hooks
+// that are useful to other plugins or modules.
+
+export * from './components';
+export * from './hooks';

sreez-showcase/plugins/testfrontend-react/src/setupTests.ts

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