cli: add web-plugin template

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
2023-03-10 13:23:51 +01:00
parent 9d8528eb8d
commit 09e87a95e2
16 changed files with 341 additions and 0 deletions
@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
@@ -0,0 +1,5 @@
+# {{name}}
+
+Welcome to the web library package for the {{id}} plugin!
+
+_This plugin was created through the Backstage CLI_
@@ -0,0 +1,47 @@
+{
+  "name": "{{name}}",
+  "description": "Web library for the {{id}} plugin",
+  "version": "{{pluginVersion}}",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "license": "Apache-2.0",
+{{#if privatePackage}}
+  "private": {{privatePackage}},
+{{/if}}
+  "publishConfig": {
+{{#if npmRegistry}}
+  "registry": "{{npmRegistry}}",
+{{/if}}
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "web-library"
+  },
+  "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": "{{versionQuery '@backstage/core-plugin-api'}}",
+    "@material-ui/core": "{{versionQuery '@material-ui/core' '4.12.2'}}"
+  },
+  "peerDependencies": {
+    "react": "{{versionQuery 'react' '^16.13.1 || ^17.0.0'}}"
+  },
+  "devDependencies": {
+    "@backstage/cli": "{{versionQuery '@backstage/cli'}}",
+    "@backstage/test-utils": "{{versionQuery '@backstage/test-utils'}}",
+    "@testing-library/jest-dom": "{{versionQuery '@testing-library/jest-dom' '5.10.1'}}",
+    "@testing-library/react": "{{versionQuery '@testing-library/react' '12.1.3'}}"
+  },
+  "files": [
+    "dist"
+  ]
+}
@@ -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();
+  })
+})
@@ -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>;
+}
@@ -0,0 +1,2 @@
+export { ExampleComponent } from './ExampleComponent';
+export type { ExampleComponentProps } from './ExampleComponent';
@@ -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';
@@ -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';
@@ -0,0 +1 @@
+export { useExample } from './useExample';
@@ -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])
+}
@@ -0,0 +1,12 @@
+/***/
+/**
+ * Web library for the {{id}} 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'
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
@@ -0,0 +1,11 @@
+{
+  "extends": "@backstage/cli/config/tsconfig.json",
+  "include": [
+    "src",
+  ],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "outDir": "dist-types",
+    "rootDir": "."
+  }
+}
				`@@ -0,0 +1 @@`
				`module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);`