feat: add iframe widget (#291)

* feat: add nestjs replacement, remove nestjs

* feat: add iframe widget

* fix: format issue

* fix: format issue

* fix: format issue

* fix: lockfile frozen

packages/widgets/src/iframe/component.module.css

@@ -0,0 +1,8 @@
+.iframe {
+  border-radius: var(--mantine-radius-sm);
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: none;
+  background-color: transparent;
+}

packages/widgets/src/iframe/component.tsx

@@ -0,0 +1,62 @@
+import { objectEntries } from "@homarr/common";
+import { useI18n } from "@homarr/translation/client";
+import { Box, IconBrowserOff, Stack, Text, Title } from "@homarr/ui";
+
+import type { WidgetComponentProps } from "../definition";
+import classes from "./component.module.css";
+
+export default function IFrameWidget({
+  options,
+}: WidgetComponentProps<"iframe">) {
+  const t = useI18n();
+  const { embedUrl, ...permissions } = options;
+  const allowedPermissions = getAllowedPermissions(permissions);
+
+  if (embedUrl.trim() === "") return <NoUrl />;
+
+  return (
+    <Box h="100%" w="100%">
+      <iframe
+        className={classes.iframe}
+        src={embedUrl}
+        title="widget iframe"
+        allow={allowedPermissions.join(" ")}
+      >
+        <Text>{t("widget.iframe.error.noBrowerSupport")}</Text>
+      </iframe>
+    </Box>
+  );
+}
+
+const NoUrl = () => {
+  const t = useI18n();
+
+  return (
+    <Stack align="center" justify="center" h="100%">
+      <IconBrowserOff />
+      <Title order={4}>{t("widget.iframe.error.noUrl")}</Title>
+    </Stack>
+  );
+};
+
+const getAllowedPermissions = (
+  permissions: Omit<WidgetComponentProps<"iframe">["options"], "embedUrl">,
+) => {
+  return objectEntries(permissions)
+    .filter(([_key, value]) => value)
+    .map(([key]) => permissionMapping[key]);
+};
+
+const permissionMapping = {
+  allowAutoPlay: "autoplay",
+  allowCamera: "camera",
+  allowFullScreen: "fullscreen",
+  allowGeolocation: "geolocation",
+  allowMicrophone: "microphone",
+  allowPayment: "payment",
+  allowScrolling: "scrolling",
+  allowTransparency: "transparency",
+} satisfies Record<
+  keyof Omit<WidgetComponentProps<"iframe">["options"], "embedUrl">,
+  string
+>;

packages/widgets/src/iframe/index.ts

@@ -0,0 +1,24 @@
+import { IconBrowser } from "@homarr/ui";
+
+import { createWidgetDefinition } from "../definition";
+import { optionsBuilder } from "../options";
+
+export const { definition, componentLoader } = createWidgetDefinition(
+  "iframe",
+  {
+    icon: IconBrowser,
+    options: optionsBuilder.from((factory) => ({
+      embedUrl: factory.text(),
+      allowFullScreen: factory.switch(),
+      allowScrolling: factory.switch({
+        defaultValue: true,
+      }),
+      allowTransparency: factory.switch(),
+      allowPayment: factory.switch(),
+      allowAutoPlay: factory.switch(),
+      allowMicrophone: factory.switch(),
+      allowCamera: factory.switch(),
+      allowGeolocation: factory.switch(),
+    })),
+  },
+).withDynamicImport(() => import("./component"));