add npm standalone demo application

Signed-off-by: Karthik Jeeyar <[email protected]>

workspaces/npm/.changeset/fast-windows-grin.md

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

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

@@ -15,13 +15,48 @@
  */
 import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { npmPlugin } from '../src/plugin';
+import { npmPlugin, NpmReleases } from '../src/plugin';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
+import { NpmInfoCard } from '../src/components/NpmInfoCard';
+import { Content, Header, Page } from '@backstage/core-components';
+import { Grid } from '@material-ui/core';
 
+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}>
+                <NpmReleases />
+              </Grid>
+              <Grid item xs={4}>
+                <NpmInfoCard />
+              </Grid>
+            </Grid>
+          </EntityProvider>
+        </Content>
+      </Page>
+    ),
+    title: 'Npm',
     path: '/npm',
   })
   .render();

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 {
+  createPlugin,
+  createRoutableExtension,
+} from '@backstage/core-plugin-api';
 
 import { rootRouteRef } from './routes';
 
@@ -28,3 +31,15 @@ export const npmPlugin = createPlugin({
     root: rootRouteRef,
   },
 });
+
+/** @public */
+export const NpmReleases = npmPlugin.provide(
+  createRoutableExtension({
+    name: 'NpmReleasesTable',
+    component: () =>
+      import('./components/NpmReleaseTableCard').then(
+        m => m.NpmReleaseTableCard,
+      ),
+    mountPoint: rootRouteRef,
+  }),
+);