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 01/11] 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[] { ), }, + { + type: 'trpc', + title: 'tRPC', + component: 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 = ({ 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('', () => { + it('renders plain text', async () => { + const { getAllByText } = await renderInTestApp( + , + ); + + 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 = ( + props: TrpcApiDefinitionWidgetProps, +) => { + const { definition } = props; + const theme = useTheme(); + return ( + + ); +}; 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'; From 9ed53218a5395667523e2ed9dfd50d5ab655b767 Mon Sep 17 00:00:00 2001 From: Oleg S <97077423+RobotSail@users.noreply.github.com> Date: Tue, 31 Jan 2023 16:21:13 -0500 Subject: [PATCH 02/11] add changeset for api-docs plugins Signed-off-by: Oleg S <97077423+RobotSail@users.noreply.github.com> --- .changeset/great-goats-talk.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/great-goats-talk.md diff --git a/.changeset/great-goats-talk.md b/.changeset/great-goats-talk.md new file mode 100644 index 0000000000..92a1cd59ee --- /dev/null +++ b/.changeset/great-goats-talk.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-api-docs': minor +--- + +Adds a new tRPC API definition widget which users can utilize to integrate their tRPC API definitions into Backstage. From ed40fbbe7e48eb3a6d51ec6da436eefd5ee37c40 Mon Sep 17 00:00:00 2001 From: Oleg S <97077423+RobotSail@users.noreply.github.com> Date: Tue, 31 Jan 2023 16:42:05 -0500 Subject: [PATCH 03/11] add tRPC to dev app Signed-off-by: Oleg S <97077423+RobotSail@users.noreply.github.com> --- plugins/api-docs/dev/index.tsx | 15 +++++++++++++ plugins/api-docs/dev/trpc-example-api.yaml | 25 ++++++++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 plugins/api-docs/dev/trpc-example-api.yaml diff --git a/plugins/api-docs/dev/index.tsx b/plugins/api-docs/dev/index.tsx index 9975e91e98..995aa9c2fb 100644 --- a/plugins/api-docs/dev/index.tsx +++ b/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() ), }) + .addPage({ + title: 'tRPC', + element: ( + +
+ + + + + + + ), + }) .render(); diff --git a/plugins/api-docs/dev/trpc-example-api.yaml b/plugins/api-docs/dev/trpc-example-api.yaml new file mode 100644 index 0000000000..4adf78835c --- /dev/null +++ b/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'}`, + }; + }), + }); From a2194b2a4d0415b27d49dcaac5b916462d6dcc79 Mon Sep 17 00:00:00 2001 From: Oleg S <97077423+RobotSail@users.noreply.github.com> Date: Tue, 31 Jan 2023 16:47:51 -0500 Subject: [PATCH 04/11] rename trpc-sample api Signed-off-by: Oleg S <97077423+RobotSail@users.noreply.github.com> --- plugins/api-docs/dev/trpc-example-api.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/api-docs/dev/trpc-example-api.yaml b/plugins/api-docs/dev/trpc-example-api.yaml index 4adf78835c..eff7efa8f1 100644 --- a/plugins/api-docs/dev/trpc-example-api.yaml +++ b/plugins/api-docs/dev/trpc-example-api.yaml @@ -1,7 +1,7 @@ apiVersion: backstage.io/v1alpha1 kind: API metadata: - name: hello-world + name: hello-world-trpc description: Hello World example for tRPC spec: type: trpc From a16f81df082b8e89b323c71d6d70c80e3e788c52 Mon Sep 17 00:00:00 2001 From: Oleg S <97077423+RobotSail@users.noreply.github.com> Date: Tue, 31 Jan 2023 17:06:16 -0500 Subject: [PATCH 05/11] add the tRPC hello world example Signed-off-by: Oleg S <97077423+RobotSail@users.noreply.github.com> --- .../examples/apis/hello-world-trpc-api.yaml | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 packages/catalog-model/examples/apis/hello-world-trpc-api.yaml diff --git a/packages/catalog-model/examples/apis/hello-world-trpc-api.yaml b/packages/catalog-model/examples/apis/hello-world-trpc-api.yaml new file mode 100644 index 0000000000..eff7efa8f1 --- /dev/null +++ b/packages/catalog-model/examples/apis/hello-world-trpc-api.yaml @@ -0,0 +1,25 @@ +apiVersion: backstage.io/v1alpha1 +kind: API +metadata: + name: hello-world-trpc + 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'}`, + }; + }), + }); From d2e1364c981dd94d9aaceee3af36d82aab12e5f2 Mon Sep 17 00:00:00 2001 From: Oleg S <97077423+RobotSail@users.noreply.github.com> Date: Wed, 1 Feb 2023 14:09:07 -0500 Subject: [PATCH 06/11] add target to fix all prettier issues Signed-off-by: Oleg S <97077423+RobotSail@users.noreply.github.com> --- package.json | 1 + packages/catalog-model/examples/apis/hello-world-trpc-api.yaml | 2 +- plugins/api-docs/dev/trpc-example-api.yaml | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 912dd53b8a..e08ca3adfd 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "create-plugin": "echo \"use 'yarn new' instead\"", "release": "node scripts/prepare-release.js && changeset version && yarn prettier --write '{packages,plugins}/*/{package.json,CHANGELOG.md}' '.changeset/*.json' && yarn install --no-immutable", "prettier:check": "prettier --check .", + "prettier:fix": "prettier --write .", "storybook": "yarn ./storybook run start", "snyk:test": "npx snyk test --yarn-workspaces --strict-out-of-sync=false", "snyk:test:package": "yarn snyk:test --include", diff --git a/packages/catalog-model/examples/apis/hello-world-trpc-api.yaml b/packages/catalog-model/examples/apis/hello-world-trpc-api.yaml index eff7efa8f1..f5807537b3 100644 --- a/packages/catalog-model/examples/apis/hello-world-trpc-api.yaml +++ b/packages/catalog-model/examples/apis/hello-world-trpc-api.yaml @@ -10,7 +10,7 @@ spec: definition: | import { z } from 'zod'; import { publicProcedure, router } from '../trpc'; - + export const apiRouter = router({ version: publicProcedure.query(() => { return { version: '0.42.0' }; diff --git a/plugins/api-docs/dev/trpc-example-api.yaml b/plugins/api-docs/dev/trpc-example-api.yaml index eff7efa8f1..f5807537b3 100644 --- a/plugins/api-docs/dev/trpc-example-api.yaml +++ b/plugins/api-docs/dev/trpc-example-api.yaml @@ -10,7 +10,7 @@ spec: definition: | import { z } from 'zod'; import { publicProcedure, router } from '../trpc'; - + export const apiRouter = router({ version: publicProcedure.query(() => { return { version: '0.42.0' }; From 60a466094c1478f797ab569479a1897c89d98581 Mon Sep 17 00:00:00 2001 From: Oleg S <97077423+RobotSail@users.noreply.github.com> Date: Wed, 1 Feb 2023 14:39:43 -0500 Subject: [PATCH 07/11] update api-report.md Signed-off-by: Oleg S <97077423+RobotSail@users.noreply.github.com> --- plugins/api-docs/api-report.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/plugins/api-docs/api-report.md b/plugins/api-docs/api-report.md index 0872d97355..070e950202 100644 --- a/plugins/api-docs/api-report.md +++ b/plugins/api-docs/api-report.md @@ -173,4 +173,12 @@ export const ProvidedApisCard: (props: { export const ProvidingComponentsCard: (props: { variant?: InfoCardVariants; }) => JSX.Element; + +// @public (undocumented) +export const TrpcApiDefinitionWidget: React_2.FC; + +// @public (undocumented) +export type TrpcApiDefinitionWidgetProps = { + definition: string; +}; ``` From e4a78a13dac6dd32d27b9857c780fe524e03b795 Mon Sep 17 00:00:00 2001 From: Oleg S <97077423+RobotSail@users.noreply.github.com> Date: Wed, 1 Feb 2023 15:54:12 -0500 Subject: [PATCH 08/11] add trpc example to development build, ensure syntax highlighting works Signed-off-by: Oleg S <97077423+RobotSail@users.noreply.github.com> --- packages/catalog-model/examples/all-apis.yaml | 1 + .../components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/catalog-model/examples/all-apis.yaml b/packages/catalog-model/examples/all-apis.yaml index e23f1b3656..472897bfac 100644 --- a/packages/catalog-model/examples/all-apis.yaml +++ b/packages/catalog-model/examples/all-apis.yaml @@ -6,6 +6,7 @@ metadata: spec: targets: - ./apis/hello-world-api.yaml + - ./apis/hello-world-trpc-api.yaml - ./apis/petstore-api.yaml - ./apis/spotify-api.yaml - ./apis/streetlights-api.yaml diff --git a/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.tsx b/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.tsx index c4cf56bedb..81bec09769 100644 --- a/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.tsx +++ b/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.tsx @@ -33,7 +33,7 @@ export const TrpcApiDefinitionWidget: React.FC = ( ); From 192f68d53c79a357197eabbc80e07e32d01ef749 Mon Sep 17 00:00:00 2001 From: Oleg S <97077423+RobotSail@users.noreply.github.com> Date: Thu, 2 Feb 2023 09:16:57 -0500 Subject: [PATCH 09/11] add trpc to api catalog Signed-off-by: Oleg S <97077423+RobotSail@users.noreply.github.com> --- .../catalog-model/src/schema/kinds/API.v1alpha1.schema.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/catalog-model/src/schema/kinds/API.v1alpha1.schema.json b/packages/catalog-model/src/schema/kinds/API.v1alpha1.schema.json index fae1225764..3d5af710e0 100644 --- a/packages/catalog-model/src/schema/kinds/API.v1alpha1.schema.json +++ b/packages/catalog-model/src/schema/kinds/API.v1alpha1.schema.json @@ -46,7 +46,7 @@ "type": { "type": "string", "description": "The type of the API definition.", - "examples": ["openapi", "asyncapi", "graphql", "grpc"], + "examples": ["openapi", "asyncapi", "graphql", "grpc", "trpc"], "minLength": 1 }, "lifecycle": { From d51668882d678bbaf971ea3d4f9e73c020e3491d Mon Sep 17 00:00:00 2001 From: Oleg S <97077423+RobotSail@users.noreply.github.com> Date: Thu, 2 Feb 2023 16:48:00 -0500 Subject: [PATCH 10/11] updates catalog-model changeset to include the tRPC API type Signed-off-by: Oleg S <97077423+RobotSail@users.noreply.github.com> --- .changeset/many-pans-unite.md | 5 +++++ .../components/GraphQlDefinitionWidget/GraphQlDefinition.tsx | 2 +- .../TrpcDefinitionWidget/TrpcApiDefinitionWidget.tsx | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/many-pans-unite.md diff --git a/.changeset/many-pans-unite.md b/.changeset/many-pans-unite.md new file mode 100644 index 0000000000..59c068cec1 --- /dev/null +++ b/.changeset/many-pans-unite.md @@ -0,0 +1,5 @@ +--- +'@backstage/catalog-model': minor +--- + +Adds the tRPC API type to the catalog. diff --git a/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx b/plugins/api-docs/src/components/GraphQlDefinitionWidget/GraphQlDefinition.tsx index 3dbe941be3..d3fddf70cf 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: React.FC = ({ definition }: Props) => { +export const GraphQlDefinition = ({ definition }: Props) => { const classes = useStyles(); const schema = buildSchema(definition); diff --git a/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.tsx b/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.tsx index 81bec09769..af73335dbd 100644 --- a/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.tsx +++ b/plugins/api-docs/src/components/TrpcDefinitionWidget/TrpcApiDefinitionWidget.tsx @@ -24,7 +24,7 @@ export type TrpcApiDefinitionWidgetProps = { }; /** @public */ -export const TrpcApiDefinitionWidget: React.FC = ( +export const TrpcApiDefinitionWidget = ( props: TrpcApiDefinitionWidgetProps, ) => { const { definition } = props; From 4b8b2faf8623757963e3f55ba17cdf293b3c90ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= Date: Fri, 3 Feb 2023 10:11:21 +0100 Subject: [PATCH 11/11] fix api reports MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Fredrik Adelöw --- plugins/api-docs/api-report.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/plugins/api-docs/api-report.md b/plugins/api-docs/api-report.md index 070e950202..a4f61872f2 100644 --- a/plugins/api-docs/api-report.md +++ b/plugins/api-docs/api-report.md @@ -175,7 +175,9 @@ export const ProvidingComponentsCard: (props: { }) => JSX.Element; // @public (undocumented) -export const TrpcApiDefinitionWidget: React_2.FC; +export const TrpcApiDefinitionWidget: ( + props: TrpcApiDefinitionWidgetProps, +) => JSX.Element; // @public (undocumented) export type TrpcApiDefinitionWidgetProps = {