chore(DateInput): extract abstract class tor Custom Control (#20)

ui/src/ucc-ui-extensions/DateInput/DateInput.tsx

@@ -1,10 +1,7 @@
 import React from "react";
-import DateSuiInput, { DatePropsBaseUncontrolled } from "@splunk/react-ui/Date";
+import DateSuiInput, { DateChangeHandler } from "@splunk/react-ui/Date";
 
-function DateInput(props: {
-  value?: string;
-  onChange: DatePropsBaseUncontrolled["onChange"];
-}) {
+function DateInput(props: { value?: string; onChange: DateChangeHandler }) {
   const today = props.value ?? new Date().toISOString().split("T")[0];
 
   return <DateSuiInput defaultValue={today} onChange={props.onChange} />;

ui/src/ucc-ui-extensions/DateInput/index.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { CustomControlBase } from "../../utils/CustomControl.ts";
+import DateInput from "./DateInput";
+
+import { DateChangeHandler } from "@splunk/react-ui/Date";
+
+export default class DateInputClass extends CustomControlBase {
+  onDateChange: DateChangeHandler = (_event, data) => {
+    this.setValue(data.value);
+  };
+
+  render() {
+    const dateValue = this.data.value;
+    const date =
+      typeof dateValue === "string" && dateValue.length !== 0
+        ? dateValue
+        : undefined;
+
+    ReactDOM.render(
+      <DateInput value={date} onChange={this.onDateChange} />,
+      this.el,
+    );
+  }
+}

ui/src/ucc-ui-extensions/README.md

@@ -3,11 +3,10 @@
 1. Create a new directory in `ui/src/ucc-ui-extensions` with the name of your extension.
 2. Add your extension's files to the directory.
 3. Add your default export to the `ui/src/ucc-ui-extensions/index.ts` file. This the only file that will be included in the final bundle with all their dependencies.
-4. Add the following in your service in globalConfig.json
+4. Add the following in your service in globalConfig.json:
 
 ```json
 {
-  // ...
   "type": "custom",
   "options": {
     "src": "FolderName",

ui/src/utils/types.ts → ui/src/utils/CustomControl.ts

@@ -10,8 +10,6 @@ export type AcceptableFormValueOrNullish =
   | AcceptableFormValueOrNull
   | undefined;
 
-export type AcceptableFormRecord = Record<string, AcceptableFormValueOrNull>;
-
 export type StandardPages = "configuration" | "inputs";
 
 export interface BaseFormStateData {
@@ -54,3 +52,19 @@ export interface ControlData {
   mode: Mode;
   serviceName: string;
 }
+
+type ValueSetter = (newValue: AcceptableFormValueOrNullish) => void;
+
+export abstract class CustomControlBase {
+  protected constructor(
+    public globalConfig: object,
+    public el: HTMLElement,
+    public data: ControlData,
+    public setValue: ValueSetter,
+    public util: UtilBaseForm,
+  ) {}
+
+  render?(): void;
+
+  validation?(field: string, value: ControlData["value"]): string | undefined;
+}