feat: Clock widget and dayjs locale standard (#79)

* feat: Clock widget and dayjs locale standard

Co-authored-by: Meier Lukas
- Widget options modifications
<meierschlumpf@gmail.com>

* perf: add improved time state for clock widget

* fix: final fixes

* refactor: unify selectOptions

* chore: fix CI & remove serverdata from clock widget

* chore: Change custom title to be under a toggle

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

packages/widgets/src/clock/component.tsx

@@ -1,9 +1,94 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import dayjs from "dayjs";
+import advancedFormat from "dayjs/plugin/advancedFormat";
+import timezones from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+
+import { Flex, Stack, Text } from "@homarr/ui";
+
 import type { WidgetComponentProps } from "../definition";
 
+dayjs.extend(advancedFormat);
+dayjs.extend(utc);
+dayjs.extend(timezones);
+
 export default function ClockWidget({
-  options: _options,
-  integrations: _integrations,
-  serverData: _serverData,
+  options,
 }: WidgetComponentProps<"clock">) {
-  return <div>CLOCK</div>;
+  const secondsFormat = options.showSeconds ? ":ss" : "";
+  const timeFormat = options.is24HourFormat
+    ? `HH:mm${secondsFormat}`
+    : `h:mm${secondsFormat} A`;
+  const dateFormat = options.dateFormat;
+  const timezone = options.useCustomTimezone
+    ? options.timezone
+    : Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const time = useCurrentTime(options);
+  return (
+    <Flex
+      classNames={{ root: "clock-wrapper" }}
+      align="center"
+      justify="center"
+      h="100%"
+    >
+      <Stack classNames={{ root: "clock-text-stack" }} align="center" gap="xs">
+        {options.customTitleToggle && (
+          <Text classNames={{ root: "clock-customTitle-text" }}>
+            {options.customTitle}
+          </Text>
+        )}
+        <Text
+          classNames={{ root: "clock-time-text" }}
+          fw={700}
+          size="2.125rem"
+          lh="1"
+        >
+          {dayjs(time).tz(timezone).format(timeFormat)}
+        </Text>
+        {options.showDate && (
+          <Text classNames={{ root: "clock-date-text" }} lineClamp={1}>
+            {dayjs(time).tz(timezone).format(dateFormat)}
+          </Text>
+        )}
+      </Stack>
+    </Flex>
+  );
 }
+
+interface UseCurrentTimeProps {
+  showSeconds: boolean;
+}
+
+const useCurrentTime = ({ showSeconds }: UseCurrentTimeProps) => {
+  const [time, setTime] = useState(new Date());
+  const timeoutRef = useRef<NodeJS.Timeout>();
+  const intervalRef = useRef<NodeJS.Timeout>();
+  const intervalMultiplier = useMemo(
+    () => (showSeconds ? 1 : 60),
+    [showSeconds],
+  );
+
+  useEffect(() => {
+    setTime(new Date());
+    timeoutRef.current = setTimeout(
+      () => {
+        setTime(new Date());
+
+        intervalRef.current = setInterval(() => {
+          setTime(new Date());
+        }, intervalMultiplier * 1000);
+      },
+      intervalMultiplier * 1000 -
+        (1000 * (showSeconds ? 0 : dayjs().second()) + dayjs().millisecond()),
+    );
+
+    return () => {
+      clearTimeout(timeoutRef.current);
+      clearInterval(intervalRef.current);
+    };
+  }, [intervalMultiplier, showSeconds]);
+
+  return time;
+};

packages/widgets/src/clock/index.ts

@@ -1,30 +1,63 @@
+import dayjs from "dayjs";
+
 import { IconClock } from "@homarr/ui";
 
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
-export const { definition, componentLoader, serverDataLoader } =
-  createWidgetDefinition("clock", {
-    icon: IconClock,
-    supportedIntegrations: ["adGuardHome", "piHole"],
-    options: optionsBuilder.from(
-      (factory) => ({
-        is24HourFormat: factory.switch({
-          defaultValue: true,
-          withDescription: true,
-        }),
-        isLocaleTime: factory.switch({ defaultValue: true }),
-        timezone: factory.select({
-          options: ["Europe/Berlin", "Europe/London", "Europe/Moscow"] as const,
-          defaultValue: "Europe/Berlin",
-        }),
+export const { definition, componentLoader } = createWidgetDefinition("clock", {
+  icon: IconClock,
+  options: optionsBuilder.from(
+    (factory) => ({
+      customTitleToggle: factory.switch({
+        defaultValue: false,
+        withDescription: true,
       }),
-      {
-        timezone: {
-          shouldHide: (options) => options.isLocaleTime,
-        },
+      customTitle: factory.text({
+        defaultValue: "",
+      }),
+      is24HourFormat: factory.switch({
+        defaultValue: true,
+        withDescription: true,
+      }),
+      showSeconds: factory.switch({
+        defaultValue: false,
+      }),
+      useCustomTimezone: factory.switch({ defaultValue: false }),
+      timezone: factory.select({
+        options: Intl.supportedValuesOf("timeZone").map((value) => value),
+        defaultValue: "Europe/London",
+        searchable: true,
+        withDescription: true,
+      }),
+      showDate: factory.switch({
+        defaultValue: true,
+      }),
+      dateFormat: factory.select({
+        options: [
+          { value: "dddd, MMMM D", label: dayjs().format("dddd, MMMM D") },
+          { value: "dddd, D MMMM", label: dayjs().format("dddd, D MMMM") },
+          { value: "MMM D", label: dayjs().format("MMM D") },
+          { value: "D MMM", label: dayjs().format("D MMM") },
+          { value: "DD/MM/YYYY", label: dayjs().format("DD/MM/YYYY") },
+          { value: "MM/DD/YYYY", label: dayjs().format("MM/DD/YYYY") },
+          { value: "DD/MM", label: dayjs().format("DD/MM") },
+          { value: "MM/DD", label: dayjs().format("MM/DD") },
+        ],
+        defaultValue: "dddd, MMMM D",
+        withDescription: true,
+      }),
+    }),
+    {
+      customTitle: {
+        shouldHide: (options) => !options.customTitleToggle,
       },
-    ),
-  })
-    .withServerData(() => import("./serverData"))
-    .withDynamicImport(() => import("./component"));
+      timezone: {
+        shouldHide: (options) => !options.useCustomTimezone,
+      },
+      dateFormat: {
+        shouldHide: (options) => !options.showDate,
+      },
+    },
+  ),
+}).withDynamicImport(() => import("./component"));

packages/widgets/src/clock/serverData.ts

@@ -1,10 +0,0 @@
-"use server";
-
-import { db } from "../../../db";
-import type { WidgetProps } from "../definition";
-
-export default async function getServerData(_item: WidgetProps<"clock">) {
-  const randomUuid = crypto.randomUUID();
-  const data = await db.query.items.findMany();
-  return { data, count: data.length, randomUuid };
-}