add standalone demo environment for npm plugin

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

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 { EntityProvider } from '@backstage/plugin-catalog-react';
+import { Content, Header, Page } from '@backstage/core-components';
+import { Grid } from '@material-ui/core';
+import { npmPlugin, NpmInfoCard, NpmReleaseTableCard } 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}>
+                <NpmReleaseTableCard />
+              </Grid>
+              <Grid item xs={4}>
+                <NpmInfoCard />
+              </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/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,39 @@ export const npmPlugin = createPlugin({
     root: rootRouteRef,
   },
 });
+
+/** @public */
+export const NpmReleaseTableCard = npmPlugin.provide(
+  createComponentExtension({
+    name: 'NpmReleaseTableCard',
+    component: {
+      lazy: () =>
+        import('./components/NpmReleaseTableCard').then(
+          m => m.NpmReleaseTableCard,
+        ),
+    },
+  }),
+);
+
+/** @public */
+export const NpmInfoCard = npmPlugin.provide(
+  createComponentExtension({
+    name: 'NpmInfoCard',
+    component: {
+      lazy: () => import('./components/NpmInfoCard').then(m => m.NpmInfoCard),
+    },
+  }),
+);
+
+/** @public */
+export const NpmReleaseOverviewCard = npmPlugin.provide(
+  createComponentExtension({
+    name: 'NpmReleaseOverviewCard',
+    component: {
+      lazy: () =>
+        import('./components/NpmReleaseOverviewCard').then(
+          m => m.NpmReleaseOverviewCard,
+        ),
+    },
+  }),
+);