@springmicro/forms 0.1.3

package/src/templates/ArrayFieldTemplate.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import type {
+  ArrayFieldTemplateProps,
+  ArrayFieldTemplateItemType,
+  GenericObjectType,
+} from "@rjsf/utils";
+import { getTemplate, getUiOptions } from "@rjsf/utils";
+
+/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` props for the component
+ */
+export default function ArrayFieldTemplate<
+  T = any,
+  F extends GenericObjectType = any
+>(props: ArrayFieldTemplateProps<T, F>) {
+  const {
+    canAdd,
+    className,
+    disabled,
+    idSchema,
+    uiSchema,
+    items,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title,
+  } = props;
+  const uiOptions = getUiOptions<T, F>(uiSchema);
+  const ArrayFieldDescriptionTemplate = getTemplate<
+    "ArrayFieldDescriptionTemplate",
+    T,
+    F
+  >("ArrayFieldDescriptionTemplate", registry, uiOptions);
+  const ArrayFieldItemTemplate = getTemplate<"ArrayFieldItemTemplate", T, F>(
+    "ArrayFieldItemTemplate",
+    registry,
+    uiOptions
+  );
+  const ArrayFieldTitleTemplate = getTemplate<"ArrayFieldTitleTemplate", T, F>(
+    "ArrayFieldTitleTemplate",
+    registry,
+    uiOptions
+  );
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+  return (
+    <fieldset className={className} id={idSchema.$id}>
+      <ArrayFieldTitleTemplate
+        schema={schema}
+        idSchema={idSchema}
+        title={uiOptions.title || title}
+        required={required}
+        uiSchema={uiSchema}
+        registry={registry}
+      />
+      {(uiOptions.description || schema.description) && (
+        <ArrayFieldDescriptionTemplate
+          schema={schema}
+          idSchema={idSchema}
+          description={(uiOptions.description || schema.description)!}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      <div className="row array-item-list">
+        {items &&
+          items.map(
+            // @ts-ignore
+            ({ key, ...itemProps }: ArrayFieldTemplateItemType) => (
+              // @ts-ignore
+              <ArrayFieldItemTemplate key={key} {...itemProps} />
+            )
+          )}
+      </div>
+      {canAdd && (
+        <AddButton
+          registry={registry}
+          className="array-item-add"
+          onClick={onAddClick}
+          disabled={disabled || readonly}
+        />
+      )}
+    </fieldset>
+  );
+}

package/src/templates/ArrayFieldTitleTemplate.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import type {
+  ArrayFieldTitleProps,
+  TemplatesType,
+  GenericObjectType,
+  Registry,
+  UiSchema,
+} from "@rjsf/utils";
+import { getTemplate, getUiOptions } from "@rjsf/utils";
+
+/** The `ArrayFieldTitleTemplate` component renders a `TitleFieldTemplate` with an `id` derived from
+ * the `idSchema`.
+ *
+ * @param props - The `ArrayFieldTitleProps` for the component
+ */
+export default function ArrayFieldTitleTemplate<
+  T = any,
+  F extends GenericObjectType = any
+>(props: ArrayFieldTitleProps) {
+  const { schema, idSchema, title, uiSchema, required, registry } = props;
+  if (!title) {
+    return null;
+  }
+  const options = getUiOptions<T, F>(
+    uiSchema as unknown as UiSchema<T, F, any>
+  );
+  const TitleFieldTemplate: TemplatesType<T, F>["TitleFieldTemplate"] =
+    getTemplate<"TitleFieldTemplate", T, F>(
+      "TitleFieldTemplate",
+      registry as unknown as Registry<T, F, any>,
+      options
+    );
+  const id = `${idSchema.$id}__title`;
+  return (
+    <TitleFieldTemplate
+      schema={schema as unknown as F}
+      id={id}
+      title={title}
+      required={required}
+      uiSchema={uiSchema as unknown as UiSchema<T, F, any>}
+      registry={registry as unknown as Registry<T, F, any>}
+    />
+  );
+}

package/src/templates/BaseInputTemplate.tsx

@@ -0,0 +1,94 @@
+import React, { useCallback } from "react";
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+import { getInputProps } from "@rjsf/utils";
+
+/** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
+ * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
+ * It can be customized/overridden for other themes or individual implementations as needed.
+ *
+ * @param props - The `WidgetProps` for this template
+ */
+export default function BaseInputTemplate<
+  T = any,
+  F extends GenericObjectType = any
+>(props: WidgetProps<T, F>) {
+  const {
+    id,
+    value,
+    readonly,
+    disabled,
+    autofocus,
+    onBlur,
+    onFocus,
+    onChange,
+    options,
+    schema,
+    uiSchema,
+    formContext,
+    registry,
+    rawErrors,
+    type,
+    ...rest
+  } = props;
+
+  // Note: since React 15.2.0 we can't forward unknown element attributes, so we
+  // exclude the "options" and "schema" ones here.
+  if (!id) {
+    console.log("No id for", props);
+    throw new Error(`no id for props ${JSON.stringify(props)}`);
+  }
+  const inputProps = { ...rest, ...getInputProps<T, F>(schema, type, options) };
+
+  let inputValue;
+  if (inputProps.type === "number" || inputProps.type === "integer") {
+    inputValue = value || value === 0 ? value : "";
+  } else {
+    inputValue = value == null ? "" : value;
+  }
+
+  const _onChange = useCallback(
+    ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) =>
+      onChange(value === "" ? options.emptyValue : value),
+    [onChange, options]
+  );
+  const _onBlur = useCallback(
+    ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
+      onBlur(id, value),
+    [onBlur, id]
+  );
+  const _onFocus = useCallback(
+    ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
+      onFocus(id, value),
+    [onFocus, id]
+  );
+
+  return (
+    <>
+      <input
+        key={id}
+        id={id}
+        className="input input-bordered"
+        readOnly={readonly}
+        disabled={disabled}
+        autoFocus={autofocus}
+        value={inputValue}
+        {...inputProps}
+        list={schema.examples ? `examples_${id}` : undefined}
+        onChange={_onChange}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+      />
+      {Array.isArray(schema.examples) && (
+        <datalist key={`datalist_${id}`} id={`examples_${id}`}>
+          {[
+            ...new Set(
+              schema.examples.concat(schema.default ? [schema.default] : [])
+            ),
+          ].map((example: any) => (
+            <option key={example} value={example} />
+          ))}
+        </datalist>
+      )}
+    </>
+  );
+}

package/src/templates/ButtonTemplates/AddButton.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { IconButtonProps } from "@rjsf/utils";
+
+import IconButton from "./IconButton";
+
+/** The `AddButton` renders a button that represent the `Add` action on a form
+ */
+export default function AddButton({
+  registry,
+  className,
+  onClick,
+  disabled,
+}: IconButtonProps) {
+  return (
+    <div className="row">
+      <p className={`col-xs-3 col-xs-offset-9 text-right ${className}`}>
+        <IconButton
+          registry={registry}
+          iconType="info"
+          icon="plus"
+          className="btn-add col-xs-12"
+          title="Add"
+          onClick={onClick}
+          disabled={disabled}
+        />
+      </p>
+    </div>
+  );
+}

package/src/templates/ButtonTemplates/IconButton.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { IconButtonProps } from "@rjsf/utils";
+
+export default function IconButton(props: IconButtonProps) {
+  const { iconType = "default", icon, className, ...otherProps } = props;
+  return (
+    <button
+      type="button"
+      className={`btn btn-${iconType} ${className}`}
+      {...otherProps}
+    >
+      <i className={`glyphicon glyphicon-${icon}`} />
+    </button>
+  );
+}
+
+export function MoveDownButton(props: IconButtonProps) {
+  return (
+    <IconButton
+      title="Move down"
+      className="array-item-move-down"
+      {...props}
+      icon="arrow-down"
+    />
+  );
+}
+
+export function MoveUpButton(props: IconButtonProps) {
+  return (
+    <IconButton
+      title="Move up"
+      className="array-item-move-up"
+      {...props}
+      icon="arrow-up"
+    />
+  );
+}
+
+export function RemoveButton(props: IconButtonProps) {
+  return (
+    <IconButton
+      title="Remove"
+      className="array-item-remove"
+      {...props}
+      iconType="danger"
+      icon="remove"
+    />
+  );
+}

package/src/templates/ButtonTemplates/SubmitButton.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { SubmitButtonProps, GenericObjectType } from "@rjsf/utils";
+import { getSubmitButtonOptions } from "@rjsf/utils";
+
+/** The `SubmitButton` renders a button that represent the `Submit` action on a form
+ */
+export default function SubmitButton<T, F extends GenericObjectType = any>({
+  uiSchema,
+}: SubmitButtonProps<T, F>) {
+  const {
+    submitText,
+    norender,
+    props: submitButtonProps = {},
+  } = getSubmitButtonOptions(uiSchema);
+  if (norender) {
+    return null;
+  }
+  return (
+    <div>
+      <button
+        type="submit"
+        {...submitButtonProps}
+        className={`btn btn-primary ${submitButtonProps.className}`}
+      >
+        {submitText}
+      </button>
+    </div>
+  );
+}

package/src/templates/ButtonTemplates/index.ts

@@ -0,0 +1,16 @@
+import { TemplatesType } from "@rjsf/utils";
+
+import SubmitButton from "./SubmitButton";
+import AddButton from "./AddButton";
+import { RemoveButton, MoveDownButton, MoveUpButton } from "./IconButton";
+
+// @ts-ignore
+const buttonTemplates: TemplatesType["ButtonTemplates"] = {
+  SubmitButton,
+  AddButton,
+  MoveDownButton,
+  MoveUpButton,
+  RemoveButton,
+};
+
+export default buttonTemplates;

package/src/templates/DescriptionField.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { DescriptionFieldProps, GenericObjectType } from "@rjsf/utils";
+
+/** The `DescriptionField` is the template to use to render the description of a field
+ *
+ * @param props - The `DescriptionFieldProps` for this component
+ */
+export default function DescriptionField<
+  T = any,
+  F extends GenericObjectType = any
+>(props: DescriptionFieldProps<T, F>) {
+  const { id, description } = props;
+  if (!description) {
+    return null;
+  }
+  if (typeof description === "string") {
+    return (
+      <p id={id} className="field-description">
+        {description}
+      </p>
+    );
+  } else {
+    return (
+      <div id={id} className="field-description">
+        {description}
+      </div>
+    );
+  }
+}

package/src/templates/ErrorList.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { ErrorListProps, RJSFValidationError } from "@rjsf/utils";
+
+/** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
+ *
+ * @param props - The `ErrorListProps` for this component
+ */
+export default function ErrorList<T = any>({ errors }: ErrorListProps<T>) {
+  return (
+    <div className="panel panel-danger errors">
+      <div className="panel-heading">
+        <h3 className="panel-title">Errors</h3>
+      </div>
+      <ul className="list-group">
+        {errors.map((error: RJSFValidationError, i: number) => {
+          return (
+            <li key={i} className="list-group-item text-danger">
+              {error.stack}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

package/src/templates/FieldTemplate/FieldTemplate.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { FieldTemplateProps, GenericObjectType } from "@rjsf/utils";
+
+import Label from "./Label";
+import WrapIfAdditional from "./WrapIfAdditional";
+
+/** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
+ * content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
+ *
+ * @param props - The `FieldTemplateProps` for this component
+ */
+export default function FieldTemplate<
+  T = any,
+  F extends GenericObjectType = any
+>(props: FieldTemplateProps<T, F>) {
+  const {
+    id,
+    label,
+    children,
+    errors,
+    help,
+    description,
+    hidden,
+    required,
+    displayLabel,
+  } = props;
+  if (hidden) {
+    return <div className="hidden">{children}</div>;
+  }
+  return (
+    <WrapIfAdditional<T, F> {...props}>
+      {displayLabel && <Label label={label} required={required} id={id} />}
+      {displayLabel && description ? description : null}
+      {children}
+      {errors}
+      {help}
+    </WrapIfAdditional>
+  );
+}

package/src/templates/FieldTemplate/Label.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+const REQUIRED_FIELD_SYMBOL = "*";
+
+export type LabelProps = {
+  /** The label for the field */
+  label?: string;
+  /** A boolean value stating if the field is required */
+  required?: boolean;
+  /** The id of the input field being labeled */
+  id?: string;
+};
+
+/** Renders a label for a field
+ *
+ * @param props - The `LabelProps` for this component
+ */
+export default function Label(props: LabelProps) {
+  const { label, required, id } = props;
+  if (!label) {
+    return null;
+  }
+  return (
+    <label className="justify-start gap-1 label" htmlFor={id}>
+      <span className="label-text">{label}</span>
+      {required && <span className="required">{REQUIRED_FIELD_SYMBOL}</span>}
+    </label>
+  );
+}

package/src/templates/FieldTemplate/WrapIfAdditional.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { FieldTemplateProps, GenericObjectType } from "@rjsf/utils";
+import { ADDITIONAL_PROPERTY_FLAG } from "@rjsf/utils";
+
+import Label from "./Label";
+
+/** The properties that are passed to a WrapIfAdditionalTemplate implementation */
+export type WrapIfAdditionalProps<
+  T = any,
+  F extends GenericObjectType = any
+> = {
+  children: React.ReactNode;
+} & Pick<
+  FieldTemplateProps<T, F>,
+  | "classNames"
+  | "disabled"
+  | "id"
+  | "label"
+  | "onDropPropertyClick"
+  | "onKeyChange"
+  | "readonly"
+  | "required"
+  | "schema"
+  | "registry"
+>;
+
+/** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
+ * part of an `additionalProperties` part of a schema.
+ *
+ * @param props - The `WrapIfAdditionalProps` for this component
+ */
+export default function WrapIfAdditional<
+  T = any,
+  F extends GenericObjectType = any
+>(props: WrapIfAdditionalProps<T, F>) {
+  const {
+    id,
+    classNames,
+    disabled,
+    label,
+    onKeyChange,
+    onDropPropertyClick,
+    readonly,
+    required,
+    schema,
+    children,
+    registry,
+  } = props;
+  const { RemoveButton } = registry.templates.ButtonTemplates;
+  const keyLabel = `${label} Key`; // i18n ?
+  const additional = ADDITIONAL_PROPERTY_FLAG in schema;
+
+  if (!additional) {
+    return <div className={classNames}>{children}</div>;
+  }
+
+  return (
+    <div className={classNames}>
+      <div className="row">
+        <div className="form-additional">
+          <div className="form-control">
+            <Label label={keyLabel} required={required} id={`${id}-key`} />
+            <input
+              className="form-control"
+              type="text"
+              id={`${id}-key`}
+              onBlur={(event) => onKeyChange(event.target.value)}
+              defaultValue={label}
+            />
+          </div>
+        </div>
+        <div className="form-additional form-control">{children}</div>
+        <div className="col-xs-2">
+          <RemoveButton
+            registry={registry}
+            className="array-item-remove btn-block"
+            style={{ border: "0" }}
+            disabled={disabled || readonly}
+            onClick={onDropPropertyClick(label)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/templates/FieldTemplate/index.ts

@@ -0,0 +1,3 @@
+import FieldTemplate from "./FieldTemplate";
+
+export default FieldTemplate;

package/src/templates/ObjectFieldTemplate.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import {
+  GenericObjectType,
+  ObjectFieldTemplatePropertyType,
+  ObjectFieldTemplateProps,
+} from "@rjsf/utils";
+import { canExpand, getTemplate, getUiOptions } from "@rjsf/utils";
+
+/** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
+ * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
+ * the properties.
+ *
+ * @param props - The `ObjectFieldTemplateProps` for this component
+ */
+export default function ObjectFieldTemplate<
+  T = any,
+  F extends GenericObjectType = any
+>(props: ObjectFieldTemplateProps<T, F>) {
+  const {
+    description,
+    disabled,
+    formData,
+    idSchema,
+    onAddClick,
+    properties,
+    readonly,
+    registry,
+    required,
+    schema,
+    title,
+    uiSchema,
+  } = props;
+  const options = getUiOptions<T, F>(uiSchema);
+  const TitleFieldTemplate = getTemplate<"TitleFieldTemplate", T, F>(
+    "TitleFieldTemplate",
+    registry,
+    options
+  );
+  const DescriptionFieldTemplate = getTemplate<
+    "DescriptionFieldTemplate",
+    T,
+    F
+  >("DescriptionFieldTemplate", registry, options);
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+  return (
+    <fieldset id={idSchema.$id}>
+      {(options.title || title) && (
+        <TitleFieldTemplate
+          schema={schema}
+          id={`${idSchema.$id}__title`}
+          title={options.title || title}
+          required={required}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      {(options.description || description) && (
+        <DescriptionFieldTemplate
+          schema={schema}
+          id={`${idSchema.$id}__description`}
+          description={options.description || description!}
+          registry={registry}
+        />
+      )}
+      {properties.map((prop: ObjectFieldTemplatePropertyType) => prop.content)}
+      {canExpand(schema, uiSchema, formData) && (
+        <AddButton
+          registry={registry}
+          className="object-property-expand"
+          onClick={onAddClick(schema)}
+          disabled={disabled || readonly}
+        />
+      )}
+    </fieldset>
+  );
+}

package/src/templates/TitleField.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { GenericObjectType, TitleFieldProps } from "@rjsf/utils";
+
+const REQUIRED_FIELD_SYMBOL = "*";
+
+/** The `TitleField` is the template to use to render the title of a field
+ *
+ * @param props - The `TitleFieldProps` for this component
+ */
+export default function TitleField<T = any, F extends GenericObjectType = any>(
+  props: TitleFieldProps<T, F>
+) {
+  const { id, title, required } = props;
+  return (
+    <legend id={id}>
+      {title}
+      {required && <span className="required">{REQUIRED_FIELD_SYMBOL}</span>}
+    </legend>
+  );
+}