add trpc widget

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

plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionWidget.tsx

@@ -18,6 +18,7 @@ import { AsyncApiDefinitionWidget } from '../AsyncApiDefinitionWidget';
 import { GraphQlDefinitionWidget } from '../GraphQlDefinitionWidget';
 import { OpenApiDefinitionWidget } from '../OpenApiDefinitionWidget';
 import { GrpcApiDefinitionWidget } from '../GrpcApiDefinitionWidget';
+import { TrpcApiDefinitionWidget } from '../TrpcDefinitionWidget';
 
 /** @public */
 export type ApiDefinitionWidget = {
@@ -61,5 +62,12 @@ export function defaultDefinitionWidgets(): ApiDefinitionWidget[] {
         <GrpcApiDefinitionWidget definition={definition} />
       ),
     },
+    {
+      type: 'trpc',
+      title: 'tRPC',
+      component: definition => (
+        <TrpcApiDefinitionWidget definition={definition} />
+      ),
+    },
   ];
 }

plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx

@@ -44,7 +44,7 @@ type Props = {
   definition: string;
 };
 
-export const GraphQlDefinition = ({ definition }: Props) => {
+export const GraphQlDefinition: React.FC<Props> = ({ definition }: Props) => {
   const classes = useStyles();
   const schema = buildSchema(definition);
 

plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.test.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2020 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.
+ */
+
+import { renderInTestApp } from '@backstage/test-utils';
+import React from 'react';
+import { TrpcApiDefinitionWidget } from './TrpcApiDefinitionWidget';
+
+describe('<TrpcApiDefinitionWidget />', () => {
+  it('renders plain text', async () => {
+    const { getAllByText } = await renderInTestApp(
+      <TrpcApiDefinitionWidget definition="Hello World" />,
+    );
+
+    expect(
+      getAllByText((_text, element) => element?.textContent === 'Hello World')
+        .length,
+    ).toBeGreaterThan(0);
+  });
+});

plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2023 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.
+ */
+import React from 'react';
+import { CodeSnippet } from '@backstage/core-components';
+import { useTheme } from '@material-ui/core/styles';
+import { BackstageTheme } from '@backstage/theme';
+
+/** @public */
+export type TrpcApiDefinitionWidgetProps = {
+  definition: string;
+};
+
+/** @public */
+export const TrpcApiDefinitionWidget: React.FC<TrpcApiDefinitionWidgetProps> = (
+  props: TrpcApiDefinitionWidgetProps,
+) => {
+  const { definition } = props;
+  const theme = useTheme<BackstageTheme>();
+  return (
+    <CodeSnippet
+      customStyle={{ backgroundColor: theme.palette.background.default }}
+      text={definition}
+      language="ts"
+      showCopyCodeButton
+    />
+  );
+};

plugins/api-docs/src/components/TrpcDefinitionWidget/index.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2023 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 {
+  TrpcApiDefinitionWidget,
+  type TrpcApiDefinitionWidgetProps,
+} from './TrpcApiDefinitionWidget';

plugins/api-docs/src/components/index.ts

@@ -22,3 +22,4 @@ export * from './ComponentsCards';
 export * from './GraphQlDefinitionWidget';
 export * from './OpenApiDefinitionWidget';
 export * from './PlainApiDefinitionWidget';
+export * from './TrpcDefinitionWidget';