feat: add widget preview pages (#9)

* feat: add widget definition system

* fix: wrong typecheck command in turbo generator

* chore: fix formatting

* feat: add widget preview page

* chore: fix formatting and type errors

* chore: fix from widget edit modal and remove some never casts

* chore: address pull request feedback

packages/widgets/src/clock/component.tsx

@@ -0,0 +1,7 @@
+import type { WidgetComponentProps } from "../definition";
+
+export default function ClockWidget({
+  options,
+}: WidgetComponentProps<"clock">) {
+  return <pre>{JSON.stringify(options)}</pre>;
+}

packages/widgets/src/clock/index.ts

@@ -0,0 +1,26 @@
+import { IconClock } from "@homarr/ui";
+
+import { createWidgetDefinition } from "../definition";
+import { opt } from "../options";
+
+export const { definition, componentLoader } = createWidgetDefinition("clock", {
+  icon: IconClock,
+  options: opt.from(
+    (fac) => ({
+      is24HourFormat: fac.switch({
+        defaultValue: true,
+        withDescription: true,
+      }),
+      isLocaleTime: fac.switch({ defaultValue: true }),
+      timezone: fac.select({
+        options: ["Europe/Berlin", "Europe/London", "Europe/Moscow"] as const,
+        defaultValue: "Europe/Berlin",
+      }),
+    }),
+    {
+      timezone: {
+        shouldHide: (options) => options.isLocaleTime,
+      },
+    },
+  ),
+}).withDynamicImport(() => import("./component"));