feat(custom-widgets): complete Custom JSX v2 (#6390)

2026-08-13 19:48:57 +02:00
1 parent 3a1245cbc5
commit acdfcbb18e
@@ -0,0 +1,123 @@
+import { useState } from "react";
+import { useColorMode } from "@docusaurus/theme-common";
+import { MantineProvider, Select, Stack, Text } from "@mantine/core";
+/* oxlint-disable import/no-unassigned-import -- Mantine component styles intentionally load for side effects. */
+import "@mantine/core/styles.layer.css";
+/* oxlint-enable import/no-unassigned-import */
+
+import {
+  BUNDLED_CUSTOM_WIDGETS,
+  CUSTOM_WIDGET_OPTIONS_EXAMPLES,
+  CUSTOM_WIDGET_REQUEST_EXAMPLES,
+} from "@homarr/custom-widgets/core";
+import type { CustomWidgetEditorMessages } from "@homarr/custom-widgets/workbench";
+import { CustomWidgetCodeEditor, ReadOnlyCustomWidgetCode } from "@homarr/custom-widgets/workbench";
+
+import type {
+  CanonicalCustomWidgetExampleProps,
+  CustomWidgetCodeExampleProps,
+  CustomWidgetCodeInputProps,
+} from "./custom-widget-code";
+
+const messages: CustomWidgetEditorMessages = {
+  languageJsx: "JSX",
+  languageJson: "JSON",
+  undo: "Undo",
+  redo: "Redo",
+  components: "Components",
+  componentSearch: "Search components",
+  componentEmpty: "No matching components",
+  componentCount: (count) => `${count} components`,
+  insertStarter: "Insert starter",
+  format: "Format",
+  copy: "Copy",
+  copied: "Copied",
+  schema: "Schema",
+  schemaTab: "JSON Schema",
+  minimalTab: "Minimal example",
+  fullTab: "Full example",
+  errors: (count) => `${count} errors`,
+  warnings: (count) => `${count} warnings`,
+  ready: "Read-only example",
+  position: ({ line, column }) => `Ln ${line}, Col ${column}`,
+  characters: (count, limit) => (limit ? `${count} / ${limit}` : `${count} characters`),
+  diagnosticsTitle: "Diagnostics",
+  diagnostic: (diagnostic) => diagnostic.value ?? diagnostic.code,
+};
+const editableMessages: CustomWidgetEditorMessages = { ...messages, ready: "Ready" };
+
+export function CanonicalCustomWidgetExampleClient({ id, label, example, height }: CanonicalCustomWidgetExampleProps) {
+  const value = example === "requests" ? CUSTOM_WIDGET_REQUEST_EXAMPLES.full : CUSTOM_WIDGET_OPTIONS_EXAMPLES.full;
+
+  return <CustomWidgetCodeExampleClient id={id} label={label} code={JSON.stringify(value, null, 2)} height={height} />;
+}
+
+export function CustomWidgetCodeExampleClient(props: CustomWidgetCodeExampleProps) {
+  const { colorMode } = useColorMode();
+
+  return (
+    <MantineProvider forceColorScheme={colorMode}>
+      <ReadOnlyCustomWidgetCode
+        id={props.id}
+        label={props.label}
+        language={props.language ?? "json"}
+        value={props.code}
+        messages={messages}
+        height={props.height}
+      />
+    </MantineProvider>
+  );
+}
+
+export function CustomWidgetCodeInputClient(props: CustomWidgetCodeInputProps) {
+  const { colorMode } = useColorMode();
+
+  return (
+    <MantineProvider forceColorScheme={colorMode}>
+      <CustomWidgetCodeEditor {...props} messages={editableMessages} />
+    </MantineProvider>
+  );
+}
+
+export function BundledCustomWidgetGalleryClient() {
+  const { colorMode } = useColorMode();
+  const [selectedId, setSelectedId] = useState(BUNDLED_CUSTOM_WIDGETS[0]?.id ?? null);
+  const selected = BUNDLED_CUSTOM_WIDGETS.find(({ id }) => id === selectedId) ?? BUNDLED_CUSTOM_WIDGETS[0];
+  if (!selected) return null;
+  const manifest = { ...selected.widget, template: "__HOMARR_TEMPLATE__" };
+
+  return (
+    <MantineProvider forceColorScheme={colorMode}>
+      <Stack gap="md">
+        <Select
+          label="Bundled widget"
+          data={BUNDLED_CUSTOM_WIDGETS.map(({ id, widget }) => ({ value: id, label: widget.name }))}
+          value={selected.id}
+          onChange={(value) => {
+            if (value) setSelectedId(value);
+          }}
+          allowDeselect={false}
+        />
+        <Text size="sm" c="dimmed">
+          {selected.widget.description}
+        </Text>
+        <ReadOnlyCustomWidgetCode
+          id={`${selected.id}-manifest`}
+          label="widget.json"
+          language="json"
+          value={JSON.stringify(manifest, null, 2)}
+          messages={messages}
+          height="340px"
+        />
+        <ReadOnlyCustomWidgetCode
+          id={`${selected.id}-template`}
+          label="widget.jsx"
+          language="jsx"
+          value={selected.widget.template}
+          messages={messages}
+          height="340px"
+        />
+      </Stack>
+    </MantineProvider>
+  );
+}