From 72a06103d01cc0d16b2ca87664624f9f17ede9de Mon Sep 17 00:00:00 2001
From: Oleg S <97077423+RobotSail@users.noreply.github.com>
Date: Tue, 31 Jan 2023 16:09:35 -0500
Subject: [PATCH] add trpc widget

Signed-off-by: Oleg S <97077423+RobotSail@users.noreply.github.com>
---
 .../ApiDefinitionCard/ApiDefinitionWidget.tsx |  8 ++++
 .../GraphQlDefinition.tsx                     |  2 +-
 .../TrpcApiDefinitionWidget.test.tsx          | 32 +++++++++++++++
 .../TrpcApiDefinitionWidget.tsx               | 40 +++++++++++++++++++
 .../components/TrpcDefinitionWidget/index.ts  | 19 +++++++++
 plugins/api-docs/src/components/index.ts      |  1 +
 6 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.test.tsx
 create mode 100644 plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.tsx
 create mode 100644 plugins/api-docs/src/components/TrpcDefinitionWidget/index.ts

diff --git a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionWidget.tsx b/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionWidget.tsx
index 03a56eaa78..8d7d7a7729 100644
--- a/plugins/api-docs/src/components/ApiDefinitionCard/ApiDefinitionWidget.tsx
+++ b/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} />
+      ),
+    },
   ];
 }
diff --git a/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx b/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx
index d3fddf70cf..3dbe941be3 100644
--- a/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx
+++ b/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);
 
diff --git a/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.test.tsx b/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.test.tsx
new file mode 100644
index 0000000000..d7e6951e2e
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.tsx b/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.tsx
new file mode 100644
index 0000000000..c4cf56bedb
--- /dev/null
+++ b/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
+    />
+  );
+};
diff --git a/plugins/api-docs/src/components/TrpcDefinitionWidget/index.ts b/plugins/api-docs/src/components/TrpcDefinitionWidget/index.ts
new file mode 100644
index 0000000000..604adb06f3
--- /dev/null
+++ b/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';
diff --git a/plugins/api-docs/src/components/index.ts b/plugins/api-docs/src/components/index.ts
index ea40076af4..7e7b206c54 100644
--- a/plugins/api-docs/src/components/index.ts
+++ b/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';