plugin(npm): create a standalone demo application for npm plugin

workspaces/npm/.changeset/sweet-tomatoes-grow.md

@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-npm': patch
+---
+
+Add standalone demo application

workspaces/npm/packages/app/src/components/catalog/EntityPage.tsx

@@ -71,9 +71,9 @@ import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
 
 import {
   isNpmAvailable,
-  NpmInfoCard,
-  NpmReleaseOverviewCard,
-  NpmReleaseTableCard,
+  EntityNpmInfoCard,
+  EntityNpmReleaseOverviewCard,
+  EntityNpmReleaseTableCard,
 } from '@backstage-community/plugin-npm';
 
 const techdocsContent = (
@@ -154,10 +154,10 @@ const overviewContent = (
       <EntitySwitch.Case if={isNpmAvailable}>
         <Grid container item md={6} xs={12}>
           <Grid item md={12}>
-            <NpmInfoCard />
+            <EntityNpmInfoCard />
           </Grid>
           <Grid item md={12}>
-            <NpmReleaseOverviewCard />
+            <EntityNpmReleaseOverviewCard />
           </Grid>
         </Grid>
       </EntitySwitch.Case>
@@ -191,7 +191,7 @@ const serviceEntityPage = (
       path="/npm-releases"
       title="NPM Releases"
     >
-      <NpmReleaseTableCard />
+      <EntityNpmReleaseTableCard />
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/api" title="API">
@@ -237,7 +237,7 @@ const websiteEntityPage = (
       path="/npm-releases"
       title="NPM Releases"
     >
-      <NpmReleaseTableCard />
+      <EntityNpmReleaseTableCard />
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/dependencies" title="Dependencies">
@@ -275,7 +275,7 @@ const defaultEntityPage = (
       path="/npm-releases"
       title="NPM Releases"
     >
-      <NpmReleaseTableCard />
+      <EntityNpmReleaseTableCard />
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/docs" title="Docs">

workspaces/npm/plugins/npm/README.md

@@ -27,9 +27,9 @@ After all other imports:
 ```tsx
 import {
   isNpmAvailable,
-  NpmInfoCard,
-  NpmReleaseOverviewCard,
-  NpmReleaseTableCard,
+  EntityNpmInfoCard,
+  EntityNpmReleaseOverviewCard,
+  EntityNpmReleaseTableCard,
 } from '@backstage-community/plugin-npm';
 ```
 
@@ -40,10 +40,10 @@ Add to `const overviewContent` after `EntityAboutCard`:
   <EntitySwitch.Case if={isNpmAvailable}>
     <Grid container item md={6} xs={12}>
       <Grid item md={12}>
-        <NpmInfoCard />
+        <EntityNpmInfoCard />
       </Grid>
       <Grid item md={12}>
-        <NpmReleaseOverviewCard />
+        <EntityNpmReleaseOverviewCard />
       </Grid>
     </Grid>
   </EntitySwitch.Case>
@@ -59,6 +59,6 @@ and to `const defaultEntityPage` between the `/` and `/docs` routecase.
   path="/npm-releases"
   title="NPM Releases"
 >
-  <NpmReleaseTableCard />
+  <EntityNpmReleaseTableCard />
 </EntityLayout.Route>
 ```

workspaces/npm/plugins/npm/dev/index.tsx

@@ -15,13 +15,52 @@
  */
 import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { npmPlugin } from '../src/plugin';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
+import { Content, Header, Page } from '@backstage/core-components';
+import { Grid } from '@material-ui/core';
+import {
+  npmPlugin,
+  EntityNpmInfoCard,
+  EntityNpmReleaseTableCard,
+} from '../src/plugin';
+
+const mockEntity = {
+  apiVersion: 'backstage.io/v1alpha1',
+  kind: 'Component',
+  metadata: {
+    name: 'backstage-plugin-catalog',
+    annotations: {
+      'npm/package': '@backstage/plugin-catalog',
+    },
+  },
+  spec: {
+    type: 'website',
+    lifecycle: 'production',
+    owner: 'guests',
+  },
+};
 
 createDevApp()
   .registerPlugin(npmPlugin)
   .addPage({
-    element: <div />,
-    title: 'Root Page',
+    element: (
+      <Page themeId="tool">
+        <Header title="Npm demo application" subtitle="standalone app" />
+        <Content>
+          <EntityProvider entity={mockEntity}>
+            <Grid container>
+              <Grid item xs={8}>
+                <EntityNpmReleaseTableCard />
+              </Grid>
+              <Grid item xs={4}>
+                <EntityNpmInfoCard />
+              </Grid>
+            </Grid>
+          </EntityProvider>
+        </Content>
+      </Page>
+    ),
+    title: 'Npm',
     path: '/npm',
   })
   .render();

workspaces/npm/plugins/npm/package.json

@@ -69,7 +69,8 @@
   "homepage": "https://github.com/backstage/community-plugins/tree/main/workspaces/npm/plugins/npm",
   "bugs": "https://github.com/backstage/community-plugins/issues",
   "maintainers": [
-    "jerolimov"
+    "jerolimov",
+    "karthikjeeyar"
   ],
   "author": "Christoph Jerolimov"
 }

workspaces/npm/plugins/npm/report.api.md

@@ -3,16 +3,24 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
+/// <reference types="react" />
+
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { Entity } from '@backstage/catalog-model';
-import { default as React_2 } from 'react';
+import { JSX as JSX_2 } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
 
 // @public
-export const isNpmAvailable: (entity: Entity) => boolean;
+export const EntityNpmInfoCard: () => JSX_2.Element;
+
+// @public
+export const EntityNpmReleaseOverviewCard: () => JSX_2.Element;
 
 // @public
-export function NpmInfoCard(): React_2.JSX.Element;
+export const EntityNpmReleaseTableCard: () => JSX_2.Element;
+
+// @public
+export const isNpmAvailable: (entity: Entity) => boolean;
 
 // @public
 export const npmPlugin: BackstagePlugin<
@@ -22,10 +30,4 @@ export const npmPlugin: BackstagePlugin<
   {},
   {}
 >;
-
-// @public
-export function NpmReleaseOverviewCard(): React_2.JSX.Element;
-
-// @public
-export function NpmReleaseTableCard(): React_2.JSX.Element;
 ```

workspaces/npm/plugins/npm/src/components/NpmInfoCard.tsx

@@ -78,9 +78,8 @@ function GridItem({
  * name, description, keywords, license, some links and
  * the latest version if available.
  *
- * @public
  */
-export function NpmInfoCard() {
+export const NpmInfoCard = () => {
   const { entity } = useEntity();
 
   const packageName = entity.metadata.annotations?.[NPM_PACKAGE_ANNOTATION];
@@ -235,4 +234,4 @@ export function NpmInfoCard() {
       </Grid>
     </InfoCard>
   );
-}
+};

workspaces/npm/plugins/npm/src/components/NpmReleaseOverviewCard.tsx

@@ -62,9 +62,8 @@ const tagColumns: TableColumn<TagRow>[] = [
  * Card for the catalog (entiy page) that shows the latest tags
  * with their version number and the release date.
  *
- * @public
  */
-export function NpmReleaseOverviewCard() {
+export const NpmReleaseOverviewCard = () => {
   const { entity } = useEntity();
 
   const packageName = entity.metadata.annotations?.[NPM_PACKAGE_ANNOTATION];
@@ -108,4 +107,4 @@ export function NpmReleaseOverviewCard() {
       emptyContent={emptyContent}
     />
   );
-}
+};

workspaces/npm/plugins/npm/src/components/NpmReleaseTableCard.tsx

@@ -86,9 +86,8 @@ const columns: TableColumn<TableData>[] = [
  * One for the latest tags and versions of a npm package.
  * And another one for the complete version history.
  *
- * @public
  */
-export function NpmReleaseTableCard() {
+export const NpmReleaseTableCard = () => {
   const { entity } = useEntity();
 
   const packageName = entity.metadata.annotations?.[NPM_PACKAGE_ANNOTATION];
@@ -155,4 +154,4 @@ export function NpmReleaseTableCard() {
       />
     </>
   );
-}
+};

workspaces/npm/plugins/npm/src/components/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { NpmReleaseTableCard } from './NpmReleaseTableCard';
+export { NpmInfoCard } from './NpmInfoCard';
+export { NpmReleaseOverviewCard } from './NpmReleaseOverviewCard';

workspaces/npm/plugins/npm/src/index.ts

@@ -20,9 +20,11 @@
  * @packageDocumentation
  */
 
-export { npmPlugin } from './plugin';
+export {
+  npmPlugin,
+  EntityNpmInfoCard,
+  EntityNpmReleaseOverviewCard,
+  EntityNpmReleaseTableCard,
+} from './plugin';
 
 export { isNpmAvailable } from './utils/isNpmAvailable';
-export { NpmInfoCard } from './components/NpmInfoCard';
-export { NpmReleaseOverviewCard } from './components/NpmReleaseOverviewCard';
-export { NpmReleaseTableCard } from './components/NpmReleaseTableCard';

workspaces/npm/plugins/npm/src/plugin.ts

@@ -13,7 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { createPlugin } from '@backstage/core-plugin-api';
+import {
+  createComponentExtension,
+  createPlugin,
+} from '@backstage/core-plugin-api';
 
 import { rootRouteRef } from './routes';
 
@@ -28,3 +31,56 @@ export const npmPlugin = createPlugin({
     root: rootRouteRef,
   },
 });
+
+/**
+ * Page content for the catalog (entiy page) that shows two tables.
+ * One for the latest tags and versions of a npm package.
+ * And another one for the complete version history.
+ *  @public
+ */
+export const EntityNpmReleaseTableCard = npmPlugin.provide(
+  createComponentExtension({
+    name: 'EntityNpmReleaseTableCard',
+    component: {
+      lazy: () =>
+        import('./components/NpmReleaseTableCard').then(
+          m => m.NpmReleaseTableCard,
+        ),
+    },
+  }),
+);
+
+/**
+ *
+ * Card for the catalog (entity page) that shows the npm
+ * name, description, keywords, license, some links and
+ * the latest version if available.
+ *
+ * @public
+ */
+export const EntityNpmInfoCard = npmPlugin.provide(
+  createComponentExtension({
+    name: 'EntityNpmInfoCard',
+    component: {
+      lazy: () => import('./components/NpmInfoCard').then(m => m.NpmInfoCard),
+    },
+  }),
+);
+
+/**
+ * Card for the catalog (entiy page) that shows the latest tags
+ * with their version number and the release date.
+ *
+ * @public
+ */
+export const EntityNpmReleaseOverviewCard = npmPlugin.provide(
+  createComponentExtension({
+    name: 'EntityNpmReleaseOverviewCard',
+    component: {
+      lazy: () =>
+        import('./components/NpmReleaseOverviewCard').then(
+          m => m.NpmReleaseOverviewCard,
+        ),
+    },
+  }),
+);