@backstage/cli 0.22.4-next.0 → 0.22.4

package/templates/default-react-plugin-package/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();
+  })
+})

package/templates/default-react-plugin-package/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>;
+}

package/templates/default-react-plugin-package/src/components/ExampleComponent/index.ts

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

package/templates/default-react-plugin-package/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';

package/templates/default-react-plugin-package/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';

package/templates/default-react-plugin-package/src/hooks/useExample/index.ts

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

package/templates/default-react-plugin-package/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])
+}

package/templates/default-react-plugin-package/src/index.ts.hbs

@@ -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'

package/templates/default-react-plugin-package/src/setupTests.ts

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

package/templates/default-react-plugin-package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@backstage/cli/config/tsconfig.json",
+  "include": [
+    "src",
+  ],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "outDir": "dist-types",
+    "rootDir": "."
+  }
+}