From a92d2f2d172896b5ef09425620d718fb5dcd88a7 Mon Sep 17 00:00:00 2001 From: jeangab Date: Thu, 18 Apr 2024 23:12:17 -0400 Subject: [PATCH] Added petstore external API and created empty react plugin --- sreez-showcase/app-config.yaml | 2 + .../plugins/testfrontend-react/.eslintrc.js | 1 + .../plugins/testfrontend-react/README.md | 5 +++ .../plugins/testfrontend-react/package.json | 44 +++++++++++++++++++ .../ExampleComponent.test.tsx | 18 ++++++++ .../ExampleComponent/ExampleComponent.tsx | 29 ++++++++++++ .../src/components/ExampleComponent/index.ts | 2 + .../src/components/index.ts | 5 +++ .../testfrontend-react/src/hooks/index.ts | 5 +++ .../src/hooks/useExample/index.ts | 1 + .../src/hooks/useExample/useExample.ts | 15 +++++++ .../plugins/testfrontend-react/src/index.ts | 12 +++++ .../testfrontend-react/src/setupTests.ts | 1 + sreez-showcase/yarn.lock | 23 +++++++++- 14 files changed, 161 insertions(+), 2 deletions(-) create mode 100644 sreez-showcase/plugins/testfrontend-react/.eslintrc.js create mode 100644 sreez-showcase/plugins/testfrontend-react/README.md create mode 100644 sreez-showcase/plugins/testfrontend-react/package.json create mode 100644 sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/ExampleComponent.test.tsx create mode 100644 sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/ExampleComponent.tsx create mode 100644 sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/index.ts create mode 100644 sreez-showcase/plugins/testfrontend-react/src/components/index.ts create mode 100644 sreez-showcase/plugins/testfrontend-react/src/hooks/index.ts create mode 100644 sreez-showcase/plugins/testfrontend-react/src/hooks/useExample/index.ts create mode 100644 sreez-showcase/plugins/testfrontend-react/src/hooks/useExample/useExample.ts create mode 100644 sreez-showcase/plugins/testfrontend-react/src/index.ts create mode 100644 sreez-showcase/plugins/testfrontend-react/src/setupTests.ts diff --git a/sreez-showcase/app-config.yaml b/sreez-showcase/app-config.yaml index 248cff1..66c7820 100644 --- a/sreez-showcase/app-config.yaml +++ b/sreez-showcase/app-config.yaml @@ -93,6 +93,8 @@ catalog: target: ../../examples/org.yaml rules: - allow: [User, Group] + - type: url + target: https://github.com/backstage/backstage/raw/master/packages/catalog-model/examples/apis/petstore-api.yaml ## Uncomment these lines to add more example data # - type: url diff --git a/sreez-showcase/plugins/testfrontend-react/.eslintrc.js b/sreez-showcase/plugins/testfrontend-react/.eslintrc.js new file mode 100644 index 0000000..e2a53a6 --- /dev/null +++ b/sreez-showcase/plugins/testfrontend-react/.eslintrc.js @@ -0,0 +1 @@ +module.exports = require('@backstage/cli/config/eslint-factory')(__dirname); diff --git a/sreez-showcase/plugins/testfrontend-react/README.md b/sreez-showcase/plugins/testfrontend-react/README.md new file mode 100644 index 0000000..c4db0c9 --- /dev/null +++ b/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_ diff --git a/sreez-showcase/plugins/testfrontend-react/package.json b/sreez-showcase/plugins/testfrontend-react/package.json new file mode 100644 index 0000000..61bccf9 --- /dev/null +++ b/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" + ] +} diff --git a/sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/ExampleComponent.test.tsx b/sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/ExampleComponent.test.tsx new file mode 100644 index 0000000..c421e05 --- /dev/null +++ b/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(); + + expect(screen.getByText('Hello World')).toBeInTheDocument(); + }); + + it('should display a custom message', async () => { + await renderInTestApp(); + + expect(screen.getByText('Hello Example')).toBeInTheDocument(); + }); +}); diff --git a/sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/ExampleComponent.tsx b/sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/ExampleComponent.tsx new file mode 100644 index 0000000..a1ab093 --- /dev/null +++ b/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 {message}; +} diff --git a/sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/index.ts b/sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/index.ts new file mode 100644 index 0000000..9bb2f2c --- /dev/null +++ b/sreez-showcase/plugins/testfrontend-react/src/components/ExampleComponent/index.ts @@ -0,0 +1,2 @@ +export { ExampleComponent } from './ExampleComponent'; +export type { ExampleComponentProps } from './ExampleComponent'; diff --git a/sreez-showcase/plugins/testfrontend-react/src/components/index.ts b/sreez-showcase/plugins/testfrontend-react/src/components/index.ts new file mode 100644 index 0000000..0380b8c --- /dev/null +++ b/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'; diff --git a/sreez-showcase/plugins/testfrontend-react/src/hooks/index.ts b/sreez-showcase/plugins/testfrontend-react/src/hooks/index.ts new file mode 100644 index 0000000..cec94f4 --- /dev/null +++ b/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'; diff --git a/sreez-showcase/plugins/testfrontend-react/src/hooks/useExample/index.ts b/sreez-showcase/plugins/testfrontend-react/src/hooks/useExample/index.ts new file mode 100644 index 0000000..f1fd276 --- /dev/null +++ b/sreez-showcase/plugins/testfrontend-react/src/hooks/useExample/index.ts @@ -0,0 +1 @@ +export { useExample } from './useExample'; diff --git a/sreez-showcase/plugins/testfrontend-react/src/hooks/useExample/useExample.ts b/sreez-showcase/plugins/testfrontend-react/src/hooks/useExample/useExample.ts new file mode 100644 index 0000000..3c6e2c4 --- /dev/null +++ b/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]); +} diff --git a/sreez-showcase/plugins/testfrontend-react/src/index.ts b/sreez-showcase/plugins/testfrontend-react/src/index.ts new file mode 100644 index 0000000..d7eb36d --- /dev/null +++ b/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'; diff --git a/sreez-showcase/plugins/testfrontend-react/src/setupTests.ts b/sreez-showcase/plugins/testfrontend-react/src/setupTests.ts new file mode 100644 index 0000000..7b0828b --- /dev/null +++ b/sreez-showcase/plugins/testfrontend-react/src/setupTests.ts @@ -0,0 +1 @@ +import '@testing-library/jest-dom'; diff --git a/sreez-showcase/yarn.lock b/sreez-showcase/yarn.lock index fb75079..2f849ad 100644 --- a/sreez-showcase/yarn.lock +++ b/sreez-showcase/yarn.lock @@ -8978,7 +8978,7 @@ resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb" integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ== -"@types/react-dom@*", "@types/react-dom@^18", "@types/react-dom@^18.0.0": +"@types/react-dom@*", "@types/react-dom@^18.0.0": version "18.2.25" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.25.tgz#2946a30081f53e7c8d585eb138277245caedc521" integrity sha512-o/V48vf4MQh7juIKZU2QGDfli6p1+OOi5oXx36Hffpc9adsHeXjVp8rHuPkjd8VT8sOJ2Zp05HR7CdpGTIUFUA== @@ -9016,7 +9016,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^16.13.1 || ^17.0.0", "@types/react@^16.13.1 || ^17.0.0 || ^18.0.0", "@types/react@^18": +"@types/react@*", "@types/react@^16.13.1 || ^17.0.0 || ^18.0.0": version "18.2.79" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.79.tgz#c40efb4f255711f554d47b449f796d1c7756d865" integrity sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w== @@ -9024,6 +9024,15 @@ "@types/prop-types" "*" csstype "^3.0.2" +"@types/react@^16.13.1 || ^17.0.0": + version "17.0.80" + resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.80.tgz#a5dfc351d6a41257eb592d73d3a85d3b7dbcbb41" + integrity sha512-LrgHIu2lEtIo8M7d1FcI3BdwXWoRQwMoXOZ7+dPTW0lYREjmlHl3P0U1VD0i/9tppOuv8/sam7sOjx34TxSFbA== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "^0.16" + csstype "^3.0.2" + "@types/request@^2.47.1", "@types/request@^2.48.8": version "2.48.12" resolved "https://registry.yarnpkg.com/@types/request/-/request-2.48.12.tgz#0f590f615a10f87da18e9790ac94c29ec4c5ef30" @@ -9056,6 +9065,11 @@ resolved "https://registry.yarnpkg.com/@types/sarif/-/sarif-2.1.7.tgz#dab4d16ba7568e9846c454a8764f33c5d98e5524" integrity sha512-kRz0VEkJqWLf1LLVN4pT1cg1Z9wAuvI6L97V3m2f5B76Tg8d413ddvLBPTEHAZJlnn4XSvu0FkZtViCQGVyrXQ== +"@types/scheduler@^0.16": + version "0.16.8" + resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff" + integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A== + "@types/semver@^7.3.12", "@types/semver@^7.5.0": version "7.5.8" resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e" @@ -23241,6 +23255,11 @@ typescript-json-schema@^0.63.0: typescript "~5.1.0" yargs "^17.1.1" +typescript-language-server@^4.3.3: + version "4.3.3" + resolved "https://registry.yarnpkg.com/typescript-language-server/-/typescript-language-server-4.3.3.tgz#b52836fa0ec7a9c05007af44d5a49605f5fe72e0" + integrity sha512-3QLj57Ru9S6zv10sa4z1pA3TIR1Rdkd04Ke0EszbO4fx5PLdlYhlC/PMxwlyxls9wrZs7wPCME1Ru0s1Gabz4Q== + typescript@5.4.2: version "5.4.2" resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.2.tgz#0ae9cebcfae970718474fe0da2c090cad6577372"