Merge pull request #81 from Staffbase/NFS-2146-icon-fix

Staffbase · Jun 26, 2024 · e6d7b44 · e6d7b44
2 parents e1cb852 + 01d945e
commit e6d7b44
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 39 deletions.
diff --git a/catalog-info.yaml 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
diff --git 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
@@ -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<string, string>) => {
@@ -24,14 +24,69 @@ const updateWidget = (data: Record<string, string>) => {
   }
 };
 
-ReactDOM.render(
-  <Form
-    schema={configurationSchema}
-    uiSchema={uiSchema}
-    onSubmit={(e) => {
-      updateWidget(e.formData);
-    }}
-    autoComplete={"off"}
-  />,
-  document.getElementById("config")
-);
+type BlockDefinition = ExternalBlockDefinition["blockDefinition"];
+
+type Props = {
+  blockDefinition: BlockDefinition;
+};
+
+const Config: FC<Props> = ({ blockDefinition }) => {
+  return (
+    <div className="display: flex; flex-direction: column; justify-content: space-evenly">
+      <div className="box">
+        <h3>Icon preview:</h3>
+        <section id="icon">
+          <div
+            aria-label={blockDefinition.label}
+            style={{
+              background: "rgb(247, 247, 247)",
+              cursor: "pointer",
+              height: "96px",
+              flex: "0 0 20%",
+              borderRadius: "3px",
+              padding: "0px",
+              margin: "0px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexDirection: "column",
+            }}
+          >
+            <img
+              height="28"
+              src={blockDefinition.iconUrl}
+              style={{ maxWidth: "80px" }}
+            />
+            <div
+              aria-hidden="true"
+              style={{
+                textAlign: "center",
+                fontSize: "14px",
+                color: "rgb(120, 120, 120)",
+                marginTop: "8px",
+                width: "100%",
+              }}
+            >
+              {blockDefinition.label}
+            </div>
+          </div>
+        </section>
+      </div>
+      <div className="box">
+        <h3>Configuration preview:</h3>
+        <section id="config">
+          <Form
+            schema={configurationSchema}
+            uiSchema={uiSchema}
+            onSubmit={(e) => {
+              updateWidget(e.formData);
+            }}
+            autoComplete={"off"}
+          />
+        </section>
+      </div>
+    </div>
+  );
+};
+
+export default Config;
diff --git 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/resources/index.html b/samples/weather-forecast/resources/index.html
@@ -3,12 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="shortcut icon" href="favicon.png">
+    <link rel="shortcut icon" href="favicon.png" />
     <title>staffbase/weather-forecast</title>
     <!-- locally stored versions of Staffbase frontend assets -->
-    <link href="/css/app.css" rel="stylesheet">
-    <link href="/css/libs.css" rel="stylesheet">
-    <link href="/css/font.css" rel="stylesheet">
+    <link href="/css/app.css" rel="stylesheet" />
+    <link href="/css/libs.css" rel="stylesheet" />
+    <link href="/css/font.css" rel="stylesheet" />
     <style>
       body {
         padding: 50px;
@@ -17,25 +17,22 @@
         border: 2px dashed gray;
         padding: 40px;
       }
+      .box h3 {
+        margin-bottom: 20px;
+      }
     </style>
   </head>
-  <body>
-    <div style="display: flex; flex-direction: column; justify-content: space-evenly;">
-      <div class="box">
-        <h3>Widget preview:</h3>
-        <br />
-        <br />
-        <section id="preview">
-            <weather-forecast></weather-forecast>
-        </section>
-      </div>
-      <div class="box">
-      <h3>Configuration preview:</h3>
-        <section id="config"></section>
-      </div>
+  <body style="display: flex">
+    <div class="box" style="flex: 2">
+      <h3>Widget preview:</h3>
+      <br />
+      <br />
+      <section id="preview">
+        <weather-forecast></weather-forecast>
+      </section>
     </div>
+    <div id="config" style="flex: 1"></div>
   </body>
   <script src="bootstrap.js"></script>
   <script src="staffbase.weather-forecast.js"></script>
-  <script src="config.js"></script>
 </html>
diff --git 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 = `
+        <div id="preview"></div>
+        <div id="config"></div>
+        `;
+  });
+
   it("should render the widget", async () => {
     mockAxios.mockImplementation(
       (url: string, _config?: AxiosRequestConfig): Promise<unknown> => {
@@ -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();
   });
 });
diff --git 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
@@ -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"