add tRPC to dev app

Signed-off-by: Oleg S <97077423+RobotSail@users.noreply.github.com>

plugins/api-docs/dev/index.tsx

@@ -32,6 +32,7 @@ import graphqlApiEntity from './graphql-example-api.yaml';
 import invalidLanguageApiEntity from './invalid-language-example-api.yaml';
 import openapiApiEntity from './openapi-example-api.yaml';
 import otherApiEntity from './other-example-api.yaml';
+import trpcApiEntity from './trpc-example-api.yaml';
 
 const mockEntities = [
   openapiApiEntity,
@@ -39,6 +40,7 @@ const mockEntities = [
   graphqlApiEntity,
   invalidLanguageApiEntity,
   otherApiEntity,
+  trpcApiEntity,
 ] as unknown as Entity[];
 
 createDevApp()
@@ -137,4 +139,17 @@ createDevApp()
       </Page>
     ),
   })
+  .addPage({
+    title: 'tRPC',
+    element: (
+      <Page themeId="home">
+        <Header title="tRPC" />
+        <Content>
+          <EntityProvider entity={trpcApiEntity as any as Entity}>
+            <EntityApiDefinitionCard />
+          </EntityProvider>
+        </Content>
+      </Page>
+    ),
+  })
   .render();

plugins/api-docs/dev/trpc-example-api.yaml

@@ -0,0 +1,25 @@
+apiVersion: backstage.io/v1alpha1
+kind: API
+metadata:
+  name: hello-world
+  description: Hello World example for tRPC
+spec:
+  type: trpc
+  lifecycle: experimental
+  owner: team-c
+  definition: |
+    import { z } from 'zod';
+    import { publicProcedure, router } from '../trpc';
+    
+    export const apiRouter = router({
+      version: publicProcedure.query(() => {
+        return { version: '0.42.0' };
+      }),
+      hello: publicProcedure
+        .input(z.object({ username: z.string().nullish() }).nullish())
+        .query(({ input, ctx }) => {
+          return {
+            text: `hello ${input?.username ?? ctx.user?.name ?? 'world'}`,
+          };
+        }),
+    });