From 09f02a5af9bda209274383ed3b8e732e77087657 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Gro=C3=9Fe?= Date: Mon, 24 Jun 2024 13:10:29 +0200 Subject: [PATCH 1/4] fix: use url loader for icon --- samples/weather-forecast/package.json | 1 + samples/weather-forecast/webpack.common.ts | 10 +++++++++- samples/weather-forecast/yarn.lock | 14 +++++++++----- 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/samples/weather-forecast/package.json b/samples/weather-forecast/package.json index 40dee9f..b6d93df 100644 --- a/samples/weather-forecast/package.json +++ b/samples/weather-forecast/package.json @@ -72,6 +72,7 @@ "ts-loader": "^9.2.5", "ts-node": "10.2.1", "typescript": "4.4.2", + "url-loader": "^4.1.1", "webpack": "^5.51.1", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.1.0", diff --git a/samples/weather-forecast/webpack.common.ts b/samples/weather-forecast/webpack.common.ts index 9730d36..d732935 100644 --- a/samples/weather-forecast/webpack.common.ts +++ b/samples/weather-forecast/webpack.common.ts @@ -28,7 +28,15 @@ const config: webpack.Configuration = { }, { test: /\.svg$/i, - use: ["@svgr/webpack"], + use: [{ loader: "@svgr/webpack", options: { icon: true } }], + }, + { + test: /weather-forecast\.svg$/, + use: [ + { + loader: "url-loader", + }, + ], }, ], }, diff --git a/samples/weather-forecast/yarn.lock b/samples/weather-forecast/yarn.lock index da92d03..96ab3ee 100644 --- a/samples/weather-forecast/yarn.lock +++ b/samples/weather-forecast/yarn.lock @@ -2485,11 +2485,6 @@ dependencies: "@sinonjs/commons" "^1.7.0" -"@staffbase/browserslist-config@1.0.0": - version "1.0.0" - resolved "https://npm.pkg.github.com/download/@Staffbase/browserslist-config/1.0.0/57ddcbc99a2509ba6a58e37ec6c2730dccc875de#57ddcbc99a2509ba6a58e37ec6c2730dccc875de" - integrity sha512-IvzkYFUaeH/BIrg097Lw3L/pO2XRIEJEcPmmnhORrZrbnpoWknx836sm6te8fad9qRjQwY+y0UzuWX2VcEtFhg== - "@staffbase/widget-sdk@^3.3.3": version "3.3.3" resolved "https://registry.yarnpkg.com/@staffbase/widget-sdk/-/widget-sdk-3.3.3.tgz#79da379765dddedd76d50dbf955f01a9e3a4907f" @@ -8305,6 +8300,15 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" +url-loader@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2" + integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA== + dependencies: + loader-utils "^2.0.0" + mime-types "^2.1.27" + schema-utils "^3.0.0" + url@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1" From 2941597a12ec13da8fb8374e6e52dc1e6d6b822d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Gro=C3=9Fe?= Date: Mon, 24 Jun 2024 13:11:01 +0200 Subject: [PATCH 2/4] fix: add icon preview for dev view --- samples/weather-forecast/dev/bootstrap.ts | 10 +++ samples/weather-forecast/dev/config.tsx | 81 ++++++++++++++++--- samples/weather-forecast/resources/index.html | 35 ++++---- 3 files changed, 94 insertions(+), 32 deletions(-) diff --git a/samples/weather-forecast/dev/bootstrap.ts b/samples/weather-forecast/dev/bootstrap.ts index ef047de..df85871 100644 --- a/samples/weather-forecast/dev/bootstrap.ts +++ b/samples/weather-forecast/dev/bootstrap.ts @@ -15,6 +15,9 @@ import { BaseBlock } from "@staffbase/widget-sdk"; import WidgetApiMock from "./widget-api-mock"; import { fromDataUri, prepareAttributes } from "./utils/DataUtil"; import { baseAttributes } from "./constants"; +import Config from "./config"; +import ReactDOM from "react-dom"; +import React from "react"; /** * Simulated hosting class to run the widget @@ -69,4 +72,11 @@ window.defineBlock = function (externalBlockDefinition) { WidgetApiMock ); window.customElements.define(customElementName, CustomElementClass); + + ReactDOM.render( + React.createElement(Config, { + blockDefinition: externalBlockDefinition.blockDefinition, + }), + document.getElementById("config") + ); }; diff --git a/samples/weather-forecast/dev/config.tsx b/samples/weather-forecast/dev/config.tsx index 1a831b8..650ecb5 100644 --- a/samples/weather-forecast/dev/config.tsx +++ b/samples/weather-forecast/dev/config.tsx @@ -11,9 +11,9 @@ * limitations under the License. */ -import ReactDOM from "react-dom"; +import { ExternalBlockDefinition } from "widget-sdk"; import { configurationSchema, uiSchema } from "../src/configuration-schema"; -import React from "react"; +import React, { FC } from "react"; import Form from "@rjsf/material-ui"; const updateWidget = (data: Record) => { @@ -24,14 +24,69 @@ const updateWidget = (data: Record) => { } }; -ReactDOM.render( -
{ - updateWidget(e.formData); - }} - autoComplete={"off"} - />, - document.getElementById("config") -); +type BlockDefinition = ExternalBlockDefinition["blockDefinition"]; + +type Props = { + blockDefinition: BlockDefinition; +}; + +const Config: FC = ({ blockDefinition }) => { + return ( +
+
+

Icon preview:

+
+
+ + +
+
+
+
+

Configuration preview:

+
+ { + updateWidget(e.formData); + }} + autoComplete={"off"} + /> +
+
+
+ ); +}; + +export default Config; diff --git a/samples/weather-forecast/resources/index.html b/samples/weather-forecast/resources/index.html index db08fb4..a7e545d 100644 --- a/samples/weather-forecast/resources/index.html +++ b/samples/weather-forecast/resources/index.html @@ -3,12 +3,12 @@ - + staffbase/weather-forecast - - - + + + - -
-
-

Widget preview:

-
-
-
- -
-
-
-

Configuration preview:

-
-
+ +
+

Widget preview:

+
+
+
+ +
+
- From 8da9721163ce5415be55f89c94e50fcf10414d8b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Gro=C3=9Fe?= Date: Mon, 24 Jun 2024 13:24:20 +0200 Subject: [PATCH 3/4] test: fix test --- samples/weather-forecast/src/index.test.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/samples/weather-forecast/src/index.test.tsx b/samples/weather-forecast/src/index.test.tsx index f395431..3ef3f88 100644 --- a/samples/weather-forecast/src/index.test.tsx +++ b/samples/weather-forecast/src/index.test.tsx @@ -15,13 +15,19 @@ import { screen } from "@testing-library/dom"; import axios, { AxiosRequestConfig } from "axios"; import "../dev/bootstrap"; -import "./index"; import { weather, city } from "./api/mockData"; const mockAxios = jest.spyOn(axios, "get"); describe("Widget test", () => { + beforeAll(() => { + document.body.innerHTML = ` +
+
+ `; + }); + it("should render the widget", async () => { mockAxios.mockImplementation( (url: string, _config?: AxiosRequestConfig): Promise => { @@ -33,6 +39,8 @@ describe("Widget test", () => { } ); + await import("./index"); + const widget = document.createElement("weather-forecast"); widget.setAttribute("apikey", "123"); @@ -42,5 +50,7 @@ describe("Widget test", () => { document.body.appendChild(widget); expect(await screen.findByText(/Chemnitz/)).toBeInTheDocument(); + expect(screen.getByLabelText(/Weather/)).toBeInTheDocument(); + expect(screen.getByText(/Weather/)).toBeInTheDocument(); }); }); From 01d945e5737c8ce6077d8c4d59f40e79bbdce964 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Gro=C3=9Fe?= Date: Mon, 24 Jun 2024 13:26:59 +0200 Subject: [PATCH 4/4] chore: add backstage file --- catalog-info.yaml | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 catalog-info.yaml diff --git a/catalog-info.yaml b/catalog-info.yaml new file mode 100644 index 0000000..a15af51 --- /dev/null +++ b/catalog-info.yaml @@ -0,0 +1,14 @@ +apiVersion: backstage.io/v1alpha1 +kind: Component +metadata: + name: custom-widget examples + description: Some examples how to use the third party widget framework + annotations: + github.com/project-slug: Staffbase/custom-widget-examples + tags: + - widgets + - typescript +spec: + type: library + lifecycle: production + owner: need-for-speed-devs