@springmicro/forms 0.1.3

package/src/templates/UnsupportedField.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { GenericObjectType, UnsupportedFieldProps } from "@rjsf/utils";
+
+/** The `UnsupportedField` component is used to render a field in the schema is one that is not supported by
+ * react-jsonschema-form.
+ *
+ * @param props - The `FieldProps` for this template
+ */
+function UnsupportedField<T = any, F extends GenericObjectType = any>(
+  props: UnsupportedFieldProps<T, F>
+) {
+  const { schema, idSchema, reason } = props;
+  return (
+    <div className="unsupported-field">
+      <p>
+        Unsupported field schema
+        {idSchema && idSchema.$id && (
+          <span>
+            {" for"} field <code>{idSchema.$id}</code>
+          </span>
+        )}
+        {reason && <em>: {reason}</em>}.
+      </p>
+      {schema && <pre>{JSON.stringify(schema, null, 2)}</pre>}
+    </div>
+  );
+}
+
+export default UnsupportedField;

package/src/templates/index.ts

@@ -0,0 +1,32 @@
+import { TemplatesType } from "@rjsf/utils";
+
+import ArrayFieldDescriptionTemplate from "./ArrayFieldDescriptionTemplate";
+import ArrayFieldItemTemplate from "./ArrayFieldItemTemplate";
+import ArrayFieldTemplate from "./ArrayFieldTemplate";
+import ArrayFieldTitleTemplate from "./ArrayFieldTitleTemplate";
+import BaseInputTemplate from "./BaseInputTemplate";
+import ButtonTemplates from "./ButtonTemplates";
+import DescriptionField from "./DescriptionField";
+import ErrorList from "./ErrorList";
+import FieldTemplate from "./FieldTemplate";
+import ObjectFieldTemplate from "./ObjectFieldTemplate";
+import TitleField from "./TitleField";
+import UnsupportedField from "./UnsupportedField";
+
+// @ts-ignore
+const templates: TemplatesType = {
+  ArrayFieldDescriptionTemplate,
+  ArrayFieldItemTemplate,
+  ArrayFieldTemplate,
+  ArrayFieldTitleTemplate,
+  ButtonTemplates,
+  BaseInputTemplate,
+  DescriptionFieldTemplate: DescriptionField,
+  ErrorListTemplate: ErrorList,
+  FieldTemplate,
+  ObjectFieldTemplate,
+  TitleFieldTemplate: TitleField,
+  UnsupportedFieldTemplate: UnsupportedField,
+};
+
+export default templates;

package/src/types/Message.type.ts

@@ -0,0 +1,6 @@
+export type Message = {
+  actions: string;
+  name: string;
+  body: string;
+  date_created: Date;
+};

package/src/types/RawMessage.type.ts

@@ -0,0 +1,15 @@
+export type RawMessage = {
+  sid: string;
+  date_created: string;
+  date_updated: string;
+  date_sent?: string;
+  account_sid: string;
+  to: string;
+  from: string;
+  body: string;
+  status: string;
+  flags: string[];
+  api_version: string;
+  price?: string;
+  uri: string;
+};

package/src/utils/processSelectValue.ts

@@ -0,0 +1,50 @@
+import type { GenericObjectType, RJSFSchema, UIOptionsType } from "@rjsf/utils";
+import { asNumber, guessType } from "@rjsf/utils";
+import get from "lodash/get";
+
+const nums = new Set<any>(["number", "integer"]);
+
+/** DEPRECATED in V5, copied from V4.
+ * https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/97bda160aeca8684770da6f3fed5b01b3828a1fa/packages/utils/src/processSelectValue.ts
+ * Returns the real value for a select widget due to a silly limitation in the DOM which causes option change event
+ * values to always be retrieved as strings. Uses the `schema` to help determine the value's true type. If the value is
+ * an empty string, then the `emptyValue` from the `options` is returned, falling back to undefined.
+ *
+ * @param schema - The schema to used to determine the value's true type
+ * @param [value] - The value to convert
+ * @param [options] - The UIOptionsType from which to potentially extract the emptyValue
+ * @returns - The `value` converted to the proper type
+ */
+export default function processSelectValue<
+  T = any,
+  F extends GenericObjectType = any
+>(schema: RJSFSchema, value?: any, options?: UIOptionsType<T, F>) {
+  const { enum: schemaEnum, type, items } = schema;
+  if (value === "") {
+    return options && options.emptyValue !== undefined
+      ? options.emptyValue
+      : undefined;
+  }
+  if (type === "array" && items && nums.has(get(items, "type"))) {
+    return value.map(asNumber);
+  }
+  if (type === "boolean") {
+    return value === "true";
+  }
+  if (nums.has(type)) {
+    return asNumber(value);
+  }
+
+  // If type is undefined, but an enum is present, try and infer the type from
+  // the enum values
+  if (Array.isArray(schemaEnum)) {
+    if (schemaEnum.every((x: any) => nums.has(guessType(x)))) {
+      return asNumber(value);
+    }
+    if (schemaEnum.every((x: any) => guessType(x) === "boolean")) {
+      return value === "true";
+    }
+  }
+
+  return value;
+}

package/src/widgets/AltDateTimeWidget.tsx

@@ -0,0 +1,17 @@
+import { WidgetProps, GenericObjectType } from "@rjsf/utils";
+import React from "react";
+
+/** The `AltDateTimeWidget` is an alternative widget for rendering datetime properties.
+ *  It uses the AltDateWidget for rendering, with the `time` prop set to true by default.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function AltDateTimeWidget<T = any, F extends GenericObjectType = any>({
+  time = true,
+  ...props
+}: WidgetProps<T, F>) {
+  const { AltDateWidget } = props.registry.widgets;
+  return <AltDateWidget time={time} {...props} />;
+}
+
+export default AltDateTimeWidget;

package/src/widgets/AltDateWidget.tsx

@@ -0,0 +1,216 @@
+import React, { MouseEvent, useCallback, useEffect, useReducer } from "react";
+import { parseDateString, toDateString, pad } from "@rjsf/utils";
+import type { WidgetProps, DateObject, GenericObjectType } from "@rjsf/utils";
+
+function rangeOptions(start: number, stop: number) {
+  const options = [];
+  for (let i = start; i <= stop; i++) {
+    options.push({ value: i, label: pad(i, 2) });
+  }
+  return options;
+}
+
+function readyForChange(state: DateObject) {
+  return Object.values(state).every((value) => value !== -1);
+}
+
+function dateElementProps(
+  state: DateObject,
+  time: boolean,
+  yearsRange: [number, number] = [1900, new Date().getFullYear() + 2]
+) {
+  const { year, month, day, hour, minute, second } = state;
+  const data = [
+    {
+      type: "year",
+      range: yearsRange,
+      value: year,
+    },
+    { type: "month", range: [1, 12], value: month },
+    { type: "day", range: [1, 31], value: day },
+  ] as { type: string; range: [number, number]; value: number | undefined }[];
+  if (time) {
+    data.push(
+      { type: "hour", range: [0, 23], value: hour },
+      { type: "minute", range: [0, 59], value: minute },
+      { type: "second", range: [0, 59], value: second }
+    );
+  }
+  return data;
+}
+
+type DateElementProps<T, F extends GenericObjectType = any> = Pick<
+  WidgetProps<T, F>,
+  | "value"
+  | "disabled"
+  | "readonly"
+  | "autofocus"
+  | "registry"
+  | "onBlur"
+  | "onFocus"
+> & {
+  name: string;
+  rootId: string;
+  select: (property: keyof DateObject, value: any) => void;
+  type: string;
+  range: [number, number];
+};
+
+function DateElement<T, F extends GenericObjectType = any>({
+  type,
+  range,
+  name,
+  value,
+  select,
+  rootId,
+  disabled,
+  readonly,
+  autofocus,
+  registry,
+  onBlur,
+  onFocus,
+}: DateElementProps<T, F>) {
+  const id = rootId + "_" + type;
+  const { SelectWidget } = registry.widgets;
+  return (
+    <SelectWidget
+      schema={{ type: "integer" } as unknown as F}
+      name={name}
+      id={id}
+      className="form-control"
+      options={{ enumOptions: rangeOptions(range[0], range[1]) }}
+      placeholder={type}
+      value={value}
+      disabled={disabled}
+      readonly={readonly}
+      autofocus={autofocus}
+      onChange={(value: any) => select(type as keyof DateObject, value)}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      registry={registry}
+      label=""
+    />
+  );
+}
+
+/** The `AltDateWidget` is an alternative widget for rendering date properties.
+ * @param props - The `WidgetProps` for this component
+ */
+function AltDateWidget<T = any, F extends GenericObjectType = any>({
+  time = false,
+  disabled = false,
+  readonly = false,
+  autofocus = false,
+  options,
+  id,
+  name,
+  registry,
+  onBlur,
+  onFocus,
+  onChange,
+  value,
+}: WidgetProps<T, F>) {
+  const [state, setState] = useReducer(
+    (state: DateObject, action: Partial<DateObject>) => {
+      return { ...state, ...action };
+    },
+    parseDateString(value, time)
+  );
+
+  useEffect(() => {
+    if (value && value !== toDateString(state, time)) {
+      setState(parseDateString(value, time));
+    }
+  }, [value, state, time]);
+
+  useEffect(() => {
+    if (readyForChange(state)) {
+      // Only propagate to parent state if we have a complete date{time}
+      onChange(toDateString(state, time));
+    }
+  }, [state, time, onChange]);
+
+  const handleChange = useCallback(
+    (property: keyof DateObject, value: string) => {
+      setState({ [property]: value });
+    },
+    []
+  );
+
+  const handleSetNow = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      if (disabled || readonly) {
+        return;
+      }
+      const nowDateObj = parseDateString(new Date().toJSON(), time);
+      setState(nowDateObj);
+    },
+    [disabled, readonly, time]
+  );
+
+  const handleClear = useCallback(
+    (event: MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      if (disabled || readonly) {
+        return;
+      }
+      setState(parseDateString("", time));
+      onChange(undefined);
+    },
+    [disabled, readonly, time, onChange]
+  );
+
+  return (
+    <ul className="list-inline">
+      {dateElementProps(
+        state,
+        time,
+        options.yearsRange as [number, number] | undefined
+      ).map((elemProps, i) => (
+        <li key={i}>
+          <DateElement
+            name={name}
+            rootId={id}
+            select={handleChange}
+            {...elemProps}
+            disabled={disabled}
+            readonly={readonly}
+            registry={registry}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            autofocus={autofocus && i === 0}
+          />
+        </li>
+      ))}
+      {(options.hideNowButton !== "undefined"
+        ? !options.hideNowButton
+        : true) && (
+        <li>
+          <a
+            href="#"
+            className="btn btn-primary btn-now"
+            onClick={handleSetNow}
+          >
+            Now
+          </a>
+        </li>
+      )}
+      {(options.hideClearButton !== "undefined"
+        ? !options.hideClearButton
+        : true) && (
+        <li>
+          <a
+            href="#"
+            className="btn btn-warning btn-clear"
+            onClick={handleClear}
+          >
+            Clear
+          </a>
+        </li>
+      )}
+    </ul>
+  );
+}
+
+export default AltDateWidget;

package/src/widgets/CheckboxWidget.tsx

@@ -0,0 +1,80 @@
+import React, { useCallback } from "react";
+import type { GenericObjectType, WidgetProps } from "@rjsf/utils";
+import { getTemplate, schemaRequiresTrueValue } from "@rjsf/utils";
+
+/** The `CheckBoxWidget` is a widget for rendering boolean properties.
+ *  It is typically used to represent a boolean.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function CheckboxWidget<T = any, F extends GenericObjectType = any>({
+  schema,
+  options,
+  id,
+  value,
+  disabled,
+  readonly,
+  label,
+  autofocus = false,
+  onBlur,
+  onFocus,
+  onChange,
+  registry,
+}: WidgetProps<T, F>) {
+  const DescriptionFieldTemplate = getTemplate<
+    "DescriptionFieldTemplate",
+    T,
+    F
+  >("DescriptionFieldTemplate", registry, options);
+  // Because an unchecked checkbox will cause html5 validation to fail, only add
+  // the "required" attribute if the field value must be "true", due to the
+  // "const" or "enum" keywords
+  const required = schemaRequiresTrueValue(schema);
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) =>
+      onChange(event.target.checked),
+    [onChange]
+  );
+
+  const handleBlur = useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) =>
+      onBlur(id, event.target.checked),
+    [onBlur, id]
+  );
+
+  const handleFocus = useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) =>
+      onFocus(id, event.target.checked),
+    [onFocus, id]
+  );
+
+  return (
+    <div className={`checkbox ${disabled || readonly ? "disabled" : ""}`}>
+      {schema.description && (
+        <DescriptionFieldTemplate
+          schema={schema}
+          id={id + "__description"}
+          description={schema.description}
+          registry={registry}
+        />
+      )}
+      <label>
+        <input
+          type="checkbox"
+          id={id}
+          checked={typeof value === "undefined" ? false : value}
+          required={required}
+          disabled={disabled || readonly}
+          autoFocus={autofocus}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+        />
+        <span>{label}</span>
+      </label>
+    </div>
+  );
+}
+
+export default CheckboxWidget;

package/src/widgets/CheckboxesWidget.tsx

@@ -0,0 +1,74 @@
+import React, { ChangeEvent } from "react";
+import { WidgetProps, GenericObjectType } from "@rjsf/utils";
+
+function selectValue(value: any, selected: any[], all: any[]) {
+  const at = all.indexOf(value);
+  const updated = selected.slice(0, at).concat(value, selected.slice(at));
+  // As inserting values at predefined index positions doesn't work with empty
+  // arrays, we need to reorder the updated selection to match the initial order
+  return updated.sort((a, b) => Number(all.indexOf(a) > all.indexOf(b)));
+}
+
+function deselectValue(value: any, selected: any[]) {
+  return selected.filter((v) => v !== value);
+}
+
+/** The `CheckboxesWidget` is a widget for rendering checkbox groups.
+ *  It is typically used to represent an array of enums.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function CheckboxesWidget<T = any, F extends GenericObjectType = any>({
+  id,
+  disabled,
+  options: { inline = false, enumOptions, enumDisabled },
+  value,
+  autofocus = false,
+  readonly,
+  onChange,
+}: WidgetProps<T, F>) {
+  return (
+    <div
+      className={`flex checkboxes ${inline ? "flex-row gap-2" : "flex-col"}`}
+      id={id}
+    >
+      {Array.isArray(enumOptions) &&
+        enumOptions.map((option, index) => {
+          const checked = value.indexOf(option.value) !== -1;
+          const itemDisabled =
+            enumDisabled && enumDisabled.indexOf(option.value) != -1;
+          const disabledCls =
+            disabled || itemDisabled || readonly ? "disabled" : "";
+
+          const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+            const all = enumOptions.map(({ value }) => value);
+            if (event.target.checked) {
+              onChange(selectValue(option.value, value, all));
+            } else {
+              onChange(deselectValue(option.value, value));
+            }
+          };
+
+          return (
+            <div key={`${id}_${index}_container`} className="form-control">
+              <label className="justify-start gap-2 cursor-pointer label">
+                <input
+                  key={`${id}_${index}`}
+                  className="checkbox checkbox-primary"
+                  type="checkbox"
+                  id={`${id}_${index}`}
+                  checked={checked}
+                  disabled={disabled || itemDisabled || readonly}
+                  autoFocus={autofocus && index === 0}
+                  onChange={handleChange}
+                />
+                <span className="label-text">{option.label}</span>
+              </label>
+            </div>
+          );
+        })}
+    </div>
+  );
+}
+
+export default CheckboxesWidget;

package/src/widgets/ColorWidget.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+import { getTemplate } from "@rjsf/utils";
+
+/** The `ColorWidget` component uses the `BaseInputTemplate` changing the type to `color` and disables it when it is
+ * either disabled or readonly.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function ColorWidget<T = any, F extends GenericObjectType = any>(
+  props: WidgetProps<T, F>
+) {
+  const { disabled, readonly, options, registry } = props;
+  const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, F>(
+    "BaseInputTemplate",
+    registry,
+    options
+  );
+  return (
+    <BaseInputTemplate
+      type="color"
+      {...props}
+      disabled={disabled || readonly}
+    />
+  );
+}

package/src/widgets/DateTimeWidget.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+import { getTemplate, localToUTC, utcToLocal } from "@rjsf/utils";
+
+/** The `DateTimeWidget` component uses the `BaseInputTemplate` changing the type to `datetime-local` and transforms
+ * the value to/from utc using the appropriate utility functions.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function DateTimeWidget<
+  T = any,
+  F extends GenericObjectType = any
+>(props: WidgetProps<T, F>) {
+  const { onChange, value, options, registry } = props;
+  const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, F>(
+    "BaseInputTemplate",
+    registry,
+    options
+  );
+  return (
+    <BaseInputTemplate
+      type="datetime-local"
+      {...props}
+      value={utcToLocal(value)}
+      onChange={(value) => onChange(localToUTC(value))}
+    />
+  );
+}

package/src/widgets/DateWidget.tsx

@@ -0,0 +1,36 @@
+import React, { useCallback, useEffect } from "react";
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+
+// @ts-ignore
+import DatePicker from "react-datepicker";
+
+/** The `DateWidget` component uses the `BaseInputTemplate` changing the type to `date` and transforms
+ * the value to undefined when it is falsy during the `onChange` handling.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function DateWidget<T = any, F extends GenericObjectType = any>(
+  props: WidgetProps<T, F>
+) {
+  const { onChange } = props;
+
+  const handleChange = useCallback(
+    (selectedDate: Date) => {
+      onChange(selectedDate?.toISOString().split("T")[0] || undefined);
+    },
+    [onChange]
+  );
+
+  const getValue = () => {
+    const offset = new Date().getTimezoneOffset();
+    return props.value ? new Date(`${props.value}T19:00:00.${offset}Z`) : null;
+  };
+
+  return (
+    <DatePicker
+      selected={getValue()}
+      className="w-full input input-bordered"
+      onChange={handleChange}
+    />
+  );
+}

package/src/widgets/EmailWidget.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+import { getTemplate } from "@rjsf/utils";
+
+/** The `EmailWidget` component uses the `BaseInputTemplate` changing the type to `email`.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function EmailWidget<T = any, F extends GenericObjectType = any>(
+  props: WidgetProps<T, F>
+) {
+  const { options, registry } = props;
+  const BaseInputTemplate = getTemplate<"BaseInputTemplate", T, F>(
+    "BaseInputTemplate",
+    registry,
+    options
+  );
+  return <BaseInputTemplate type="email" {...props} />;
+}