@springmicro/forms 0.7.0 → 0.7.1

package/src/templates/ButtonTemplates/index.ts

@@ -1,16 +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;
+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

@@ -1,29 +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>
-    );
-  }
-}
+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

@@ -1,25 +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>
-  );
-}
+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

@@ -1,39 +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>
-  );
-}
+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

@@ -1,29 +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>
-  );
-}
+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

@@ -1,85 +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>
-  );
-}
+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

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

package/src/templates/ObjectFieldTemplate.tsx

@@ -1,79 +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>
-  );
-}
+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

@@ -1,20 +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>
-  );
-}
+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>
+  );
+}