Draft: UrlField

.changeset/breezy-geese-train.md

@@ -0,0 +1,9 @@
+---
+"@comet/admin": minor
+---
+
+Add `UrlField` and `FinalFormUrlInput` components for URL input with automatic protocol handling
+
+The new components automatically adds `https://` to URLs that don't have a protocol and `mailto:` to email addresses when the field loses focus.
+Existing protocols (e.g., `http:`, `ftp://`) are preserved.
+The field also has a rudimentary validation that checks if a protocol is present.

packages/admin/admin/package.json

@@ -46,7 +46,8 @@
         "query-string": "^7.1.3",
         "react-dropzone": "^14.3.8",
         "use-constant": "^2.0.0",
-        "uuid": "^11.1.0"
+        "uuid": "^11.1.0",
+        "validator": "^13.15.26"
     },
     "devDependencies": {
         "@apollo/client": "^3.14.0",
@@ -81,6 +82,7 @@
         "@types/react-dom": "^18.3.7",
         "@types/react-router": "^5.1.20",
         "@types/react-router-dom": "^5.3.3",
+        "@types/validator": "^13.15.10",
         "eslint": "^9.30.1",
         "eslint-plugin-storybook": "^9.1.10",
         "final-form": "^4.20.10",

packages/admin/admin/src/form/FinalFormUrlInput.tsx

@@ -0,0 +1,55 @@
+import { InputBase, type InputBaseProps } from "@mui/material";
+import { type FocusEvent } from "react";
+import { type FieldRenderProps } from "react-final-form";
+
+import { ClearInputAdornment } from "../common/ClearInputAdornment";
+import { ensureUrlHasProtocol } from "./helpers/urlProtocol";
+
+export type FinalFormUrlInputProps = InputBaseProps & {
+    clearable?: boolean;
+};
+
+type FinalFormUrlInputInternalProps = FieldRenderProps<string, HTMLInputElement | HTMLTextAreaElement>;
+
+/**
+ * Final Form-compatible UrlInput component.
+ *
+ * @see {@link UrlField} – preferred for typical form use. Use this only if no Field wrapper is needed.
+ */
+export function FinalFormUrlInput({
+    meta,
+    input,
+    innerRef,
+    endAdornment,
+    clearable,
+    ...props
+}: FinalFormUrlInputProps & FinalFormUrlInputInternalProps) {
+    const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+        const formattedValue = ensureUrlHasProtocol(event.target.value);
+
+        if (formattedValue !== event.target.value) {
+            input.onChange(formattedValue);
+        }
+
+        input.onBlur(event);
+    };
+
+    return (
+        <InputBase
+            {...input}
+            {...props}
+            onBlur={handleBlur}
+            type="url"
+            endAdornment={
+                (endAdornment || clearable) && (
+                    <>
+                        {clearable && (
+                            <ClearInputAdornment position="end" hasClearableContent={Boolean(input.value)} onClick={() => input.onChange("")} />
+                        )}
+                        {endAdornment}
+                    </>
+                )
+            }
+        />
+    );
+}

packages/admin/admin/src/form/fields/UrlField.tsx

@@ -0,0 +1,9 @@
+import { Field, type FieldProps } from "../Field";
+import { FinalFormUrlInput, type FinalFormUrlInputProps } from "../FinalFormUrlInput";
+import { validateUrl } from "../helpers/urlProtocol";
+
+export type UrlFieldProps = FieldProps<string, HTMLInputElement> & FinalFormUrlInputProps;
+
+export const UrlField = ({ validate, ...props }: UrlFieldProps) => {
+    return <Field component={FinalFormUrlInput} validate={validate ?? validateUrl} {...props} />;
+};