feat: add homeassistant integration (#578)

packages/widgets/src/index.tsx

@@ -12,6 +12,8 @@ import * as dnsHoleSummary from "./dns-hole/summary";
 import * as iframe from "./iframe";
 import type { WidgetImportRecord } from "./import";
 import * as notebook from "./notebook";
+import * as smartHomeEntityState from "./smart-home/entity-state";
+import * as smartHomeExecuteAutomation from "./smart-home/execute-automation";
 import * as video from "./video";
 import * as weather from "./weather";
 
@@ -29,10 +31,13 @@ export const widgetImports = {
   iframe,
   video,
   dnsHoleSummary,
+  "smartHome-entityState": smartHomeEntityState,
+  "smartHome-executeAutomation": smartHomeExecuteAutomation,
 } satisfies WidgetImportRecord;
 
 export type WidgetImports = typeof widgetImports;
 export type WidgetImportKey = keyof WidgetImports;
+export type { WidgetComponentProps };
 
 const loadedComponents = new Map<WidgetKind, ComponentType<WidgetComponentProps<WidgetKind>>>();
 

packages/widgets/src/smart-home/entity-state/component.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import React, { useState } from "react";
+import { Center, Stack, Text, UnstyledButton } from "@mantine/core";
+
+import { clientApi } from "@homarr/api/client";
+
+import type { WidgetComponentProps } from "../../definition";
+
+export default function SmartHomeEntityStateWidget({
+  options,
+  integrationIds,
+  isEditMode,
+}: WidgetComponentProps<"smartHome-entityState">) {
+  const [lastState, setLastState] = useState<{
+    entityId: string;
+    state: string;
+  }>();
+
+  const utils = clientApi.useUtils();
+
+  clientApi.widget.smartHome.subscribeEntityState.useSubscription(
+    {
+      entityId: options.entityId,
+    },
+    {
+      onData(data) {
+        setLastState(data);
+      },
+    },
+  );
+
+  const { mutate } = clientApi.widget.smartHome.switchEntity.useMutation({
+    onSettled: () => {
+      void utils.widget.smartHome.invalidate();
+    },
+  });
+
+  const attribute = options.entityUnit.length > 0 ? " " + options.entityUnit : "";
+
+  const handleClick = React.useCallback(() => {
+    if (isEditMode) {
+      return;
+    }
+
+    if (!options.clickable) {
+      return;
+    }
+
+    mutate({
+      entityId: options.entityId,
+      integrationId: integrationIds[0] ?? "",
+    });
+  }, []);
+
+  return (
+    <UnstyledButton
+      onClick={handleClick}
+      w="100%"
+      h="100%"
+      styles={{ root: { cursor: options.clickable && !isEditMode ? "pointer" : "initial" } }}
+    >
+      <Center h="100%" w="100%">
+        <Stack align="center" gap="md">
+          <Text ta="center" fw="bold" size="lg">
+            {options.displayName}
+          </Text>
+          <Text ta="center">
+            {lastState?.state}
+            {attribute}
+          </Text>
+        </Stack>
+      </Center>
+    </UnstyledButton>
+  );
+}

packages/widgets/src/smart-home/entity-state/index.ts

@@ -0,0 +1,19 @@
+import { IconBinaryTree } from "@tabler/icons-react";
+
+import { createWidgetDefinition } from "../../definition";
+import { optionsBuilder } from "../../options";
+
+export const { definition, componentLoader } = createWidgetDefinition("smartHome-entityState", {
+  icon: IconBinaryTree,
+  options: optionsBuilder.from((factory) => ({
+    entityId: factory.text({
+      defaultValue: "sun.sun",
+    }),
+    displayName: factory.text({
+      defaultValue: "Sun",
+    }),
+    entityUnit: factory.text(),
+    clickable: factory.switch(),
+  })),
+  supportedIntegrations: ["homeAssistant"],
+}).withDynamicImport(() => import("./component"));

packages/widgets/src/smart-home/execute-automation/component.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { ActionIcon, Center, LoadingOverlay, Overlay, Stack, Text, UnstyledButton } from "@mantine/core";
+import { useDisclosure, useTimeout } from "@mantine/hooks";
+import { IconAutomation, IconCheck } from "@tabler/icons-react";
+
+import { clientApi } from "@homarr/api/client";
+
+import type { WidgetComponentProps } from "../../definition";
+
+export default function SmartHomeTriggerAutomationWidget({
+  options,
+  integrationIds,
+  isEditMode,
+}: WidgetComponentProps<"smartHome-executeAutomation">) {
+  const [isShowSuccess, { open: showSuccess, close: closeSuccess }] = useDisclosure();
+  const { start } = useTimeout(() => {
+    closeSuccess();
+  }, 1000);
+
+  const { mutateAsync, isPending } = clientApi.widget.smartHome.executeAutomation.useMutation({
+    onSuccess: () => {
+      showSuccess();
+      start();
+    },
+  });
+  const handleClick = React.useCallback(async () => {
+    if (isEditMode) {
+      return;
+    }
+    await mutateAsync({
+      automationId: options.automationId,
+      integrationId: integrationIds[0] ?? "",
+    });
+  }, [isEditMode]);
+  return (
+    <UnstyledButton onClick={handleClick} style={{ cursor: !isEditMode ? "pointer" : "initial" }} w="100%" h="100%">
+      {isShowSuccess && (
+        <Overlay>
+          <Center w="100%" h="100%">
+            <ActionIcon variant="filled" color="green" size="xl" radius="xl">
+              <IconCheck style={{ width: "70%", height: "70%" }} stroke={1.5} />
+            </ActionIcon>
+          </Center>
+        </Overlay>
+      )}
+      <LoadingOverlay visible={isPending} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
+      <Center w="100%" h="100%">
+        <Stack align="center" gap="md">
+          <IconAutomation />
+          <Text fw="bold">{options.displayName}</Text>
+        </Stack>
+      </Center>
+    </UnstyledButton>
+  );
+}

packages/widgets/src/smart-home/execute-automation/index.ts

@@ -0,0 +1,13 @@
+import { IconBinaryTree } from "@tabler/icons-react";
+
+import { createWidgetDefinition } from "../../definition";
+import { optionsBuilder } from "../../options";
+
+export const { definition, componentLoader } = createWidgetDefinition("smartHome-executeAutomation", {
+  icon: IconBinaryTree,
+  options: optionsBuilder.from((factory) => ({
+    displayName: factory.text(),
+    automationId: factory.text(),
+  })),
+  supportedIntegrations: ["homeAssistant"],
+}).withDynamicImport(() => import("./component"));