Skip to content

Commit e6d7b44

Browse files
NinerianNinerian
authored
Merge pull request #81 from Staffbase/NFS-2146-icon-fix
2 parents e1cb852 + 01d945e commit e6d7b44

8 files changed

Lines changed: 138 additions & 39 deletions

File tree

‎catalog-info.yaml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
apiVersion: backstage.io/v1alpha1
2+
kind: Component
3+
metadata:
4+
name: custom-widget examples
5+
description: Some examples how to use the third party widget framework
6+
annotations:
7+
github.com/project-slug: Staffbase/custom-widget-examples
8+
tags:
9+
- widgets
10+
- typescript
11+
spec:
12+
type: library
13+
lifecycle: production
14+
owner: need-for-speed-devs

‎samples/weather-forecast/dev/bootstrap.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ import { BaseBlock } from "@staffbase/widget-sdk";
1515
import WidgetApiMock from "./widget-api-mock";
1616
import { fromDataUri, prepareAttributes } from "./utils/DataUtil";
1717
import { baseAttributes } from "./constants";
18+
import Config from "./config";
19+
import ReactDOM from "react-dom";
20+
import React from "react";
1821

1922
/**
2023
* Simulated hosting class to run the widget
@@ -69,4 +72,11 @@ window.defineBlock = function (externalBlockDefinition) {
6972
WidgetApiMock
7073
);
7174
window.customElements.define(customElementName, CustomElementClass);
75+
76+
ReactDOM.render(
77+
React.createElement(Config, {
78+
blockDefinition: externalBlockDefinition.blockDefinition,
79+
}),
80+
document.getElementById("config")
81+
);
7282
};

‎samples/weather-forecast/dev/config.tsx‎

Lines changed: 68 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@
1111
* limitations under the License.
1212
*/
1313

14-
import ReactDOM from "react-dom";
14+
import { ExternalBlockDefinition } from "widget-sdk";
1515
import { configurationSchema, uiSchema } from "../src/configuration-schema";
16-
import React from "react";
16+
import React, { FC } from "react";
1717
import Form from "@rjsf/material-ui";
1818

1919
const updateWidget = (data: Record<string, string>) => {
@@ -24,14 +24,69 @@ const updateWidget = (data: Record<string, string>) => {
2424
}
2525
};
2626

27-
ReactDOM.render(
28-
<Form
29-
schema={configurationSchema}
30-
uiSchema={uiSchema}
31-
onSubmit={(e) => {
32-
updateWidget(e.formData);
33-
}}
34-
autoComplete={"off"}
35-
/>,
36-
document.getElementById("config")
37-
);
27+
type BlockDefinition = ExternalBlockDefinition["blockDefinition"];
28+
29+
type Props = {
30+
blockDefinition: BlockDefinition;
31+
};
32+
33+
const Config: FC<Props> = ({ blockDefinition }) => {
34+
return (
35+
<div className="display: flex; flex-direction: column; justify-content: space-evenly">
36+
<div className="box">
37+
<h3>Icon preview:</h3>
38+
<section id="icon">
39+
<div
40+
aria-label={blockDefinition.label}
41+
style={{
42+
background: "rgb(247, 247, 247)",
43+
cursor: "pointer",
44+
height: "96px",
45+
flex: "0 0 20%",
46+
borderRadius: "3px",
47+
padding: "0px",
48+
margin: "0px",
49+
display: "flex",
50+
alignItems: "center",
51+
justifyContent: "center",
52+
flexDirection: "column",
53+
}}
54+
>
55+
<img
56+
height="28"
57+
src={blockDefinition.iconUrl}
58+
style={{ maxWidth: "80px" }}
59+
/>
60+
<div
61+
aria-hidden="true"
62+
style={{
63+
textAlign: "center",
64+
fontSize: "14px",
65+
color: "rgb(120, 120, 120)",
66+
marginTop: "8px",
67+
width: "100%",
68+
}}
69+
>
70+
{blockDefinition.label}
71+
</div>
72+
</div>
73+
</section>
74+
</div>
75+
<div className="box">
76+
<h3>Configuration preview:</h3>
77+
<section id="config">
78+
<Form
79+
schema={configurationSchema}
80+
uiSchema={uiSchema}
81+
onSubmit={(e) => {
82+
updateWidget(e.formData);
83+
}}
84+
autoComplete={"off"}
85+
/>
86+
</section>
87+
</div>
88+
</div>
89+
);
90+
};
91+
92+
export default Config;

‎samples/weather-forecast/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
"ts-loader": "^9.2.5",
7373
"ts-node": "10.2.1",
7474
"typescript": "4.4.2",
75+
"url-loader": "^4.1.1",
7576
"webpack": "^5.51.1",
7677
"webpack-cli": "^4.8.0",
7778
"webpack-dev-server": "^4.1.0",

‎samples/weather-forecast/resources/index.html‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link rel="shortcut icon" href="favicon.png">
6+
<link rel="shortcut icon" href="favicon.png" />
77
<title>staffbase/weather-forecast</title>
88
<!-- locally stored versions of Staffbase frontend assets -->
9-
<link href="/css/app.css" rel="stylesheet">
10-
<link href="/css/libs.css" rel="stylesheet">
11-
<link href="/css/font.css" rel="stylesheet">
9+
<link href="/css/app.css" rel="stylesheet" />
10+
<link href="/css/libs.css" rel="stylesheet" />
11+
<link href="/css/font.css" rel="stylesheet" />
1212
<style>
1313
body {
1414
padding: 50px;
@@ -17,25 +17,22 @@
1717
border: 2px dashed gray;
1818
padding: 40px;
1919
}
20+
.box h3 {
21+
margin-bottom: 20px;
22+
}
2023
</style>
2124
</head>
22-
<body>
23-
<div style="display: flex; flex-direction: column; justify-content: space-evenly;">
24-
<div class="box">
25-
<h3>Widget preview:</h3>
26-
<br />
27-
<br />
28-
<section id="preview">
29-
<weather-forecast></weather-forecast>
30-
</section>
31-
</div>
32-
<div class="box">
33-
<h3>Configuration preview:</h3>
34-
<section id="config"></section>
35-
</div>
25+
<body style="display: flex">
26+
<div class="box" style="flex: 2">
27+
<h3>Widget preview:</h3>
28+
<br />
29+
<br />
30+
<section id="preview">
31+
<weather-forecast></weather-forecast>
32+
</section>
3633
</div>
34+
<div id="config" style="flex: 1"></div>
3735
</body>
3836
<script src="bootstrap.js"></script>
3937
<script src="staffbase.weather-forecast.js"></script>
40-
<script src="config.js"></script>
4138
</html>

‎samples/weather-forecast/src/index.test.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,19 @@ import { screen } from "@testing-library/dom";
1515
import axios, { AxiosRequestConfig } from "axios";
1616

1717
import "../dev/bootstrap";
18-
import "./index";
1918

2019
import { weather, city } from "./api/mockData";
2120

2221
const mockAxios = jest.spyOn(axios, "get");
2322

2423
describe("Widget test", () => {
24+
beforeAll(() => {
25+
document.body.innerHTML = `
26+
<div id="preview"></div>
27+
<div id="config"></div>
28+
`;
29+
});
30+
2531
it("should render the widget", async () => {
2632
mockAxios.mockImplementation(
2733
(url: string, _config?: AxiosRequestConfig): Promise<unknown> => {
@@ -33,6 +39,8 @@ describe("Widget test", () => {
3339
}
3440
);
3541

42+
await import("./index");
43+
3644
const widget = document.createElement("weather-forecast");
3745

3846
widget.setAttribute("apikey", "123");
@@ -42,5 +50,7 @@ describe("Widget test", () => {
4250
document.body.appendChild(widget);
4351

4452
expect(await screen.findByText(/Chemnitz/)).toBeInTheDocument();
53+
expect(screen.getByLabelText(/Weather/)).toBeInTheDocument();
54+
expect(screen.getByText(/Weather/)).toBeInTheDocument();
4555
});
4656
});

‎samples/weather-forecast/webpack.common.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,15 @@ const config: webpack.Configuration = {
2828
},
2929
{
3030
test: /\.svg$/i,
31-
use: ["@svgr/webpack"],
31+
use: [{ loader: "@svgr/webpack", options: { icon: true } }],
32+
},
33+
{
34+
test: /weather-forecast\.svg$/,
35+
use: [
36+
{
37+
loader: "url-loader",
38+
},
39+
],
3240
},
3341
],
3442
},

‎samples/weather-forecast/yarn.lock‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2485,11 +2485,6 @@
24852485
dependencies:
24862486
"@sinonjs/commons" "^1.7.0"
24872487

2488-
"@staffbase/browserslist-config@1.0.0":
2489-
version "1.0.0"
2490-
resolved "https://npm.pkg.github.com/download/@Staffbase/browserslist-config/1.0.0/57ddcbc99a2509ba6a58e37ec6c2730dccc875de#57ddcbc99a2509ba6a58e37ec6c2730dccc875de"
2491-
integrity sha512-IvzkYFUaeH/BIrg097Lw3L/pO2XRIEJEcPmmnhORrZrbnpoWknx836sm6te8fad9qRjQwY+y0UzuWX2VcEtFhg==
2492-
24932488
"@staffbase/widget-sdk@^3.3.3":
24942489
version "3.3.3"
24952490
resolved "https://registry.yarnpkg.com/@staffbase/widget-sdk/-/widget-sdk-3.3.3.tgz#79da379765dddedd76d50dbf955f01a9e3a4907f"
@@ -8305,6 +8300,15 @@ uri-js@^4.2.2:
83058300
dependencies:
83068301
punycode "^2.1.0"
83078302

8303+
url-loader@^4.1.1:
8304+
version "4.1.1"
8305+
resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
8306+
integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==
8307+
dependencies:
8308+
loader-utils "^2.0.0"
8309+
mime-types "^2.1.27"
8310+
schema-utils "^3.0.0"
8311+
83088312
url@^0.11.0:
83098313
version "0.11.0"
83108314
resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"

0 commit comments

Comments
 (0)