@springmicro/forms 0.1.3

package/src/fields/SchemaField.tsx

@@ -0,0 +1,402 @@
+import React from "react";
+import type {
+  FieldProps,
+  FieldTemplateProps,
+  IdSchema,
+  Registry,
+  RJSFSchema,
+  UIOptionsType,
+  GenericObjectType,
+} from "@rjsf/utils";
+import {
+  mergeObjects,
+  deepEquals,
+  getUiOptions,
+  getSchemaType,
+  getTemplate,
+  ID_KEY,
+} from "@rjsf/utils";
+import isObject from "lodash/isObject";
+import omit from "lodash/omit";
+
+/** The map of component type to FieldName */
+const COMPONENT_TYPES: { [key: string]: string } = {
+  array: "ArrayField",
+  boolean: "BooleanField",
+  integer: "NumberField",
+  number: "NumberField",
+  object: "ObjectField",
+  string: "StringField",
+  null: "NullField",
+};
+
+/** Computes and returns which `Field` implementation to return in order to render the field represented by the
+ * `schema`. The `uiOptions` are used to alter what potential `Field` implementation is actually returned. If no
+ * appropriate `Field` implementation can be found then a wrapper around `UnsupportedFieldTemplate` is used.
+ *
+ * @param schema - The schema from which to obtain the type
+ * @param uiOptions - The UI Options that may affect the component decision
+ * @param idSchema - The id that is passed to the `UnsupportedFieldTemplate`
+ * @param registry - The registry from which fields and templates are obtained
+ * @returns - The `Field` component that is used to render the actual field data
+ */
+function getFieldComponent<T, F extends GenericObjectType = any>(
+  schema: F,
+  uiOptions: UIOptionsType<T, F>,
+  idSchema: IdSchema<T>,
+  registry: Registry<T, F>
+) {
+  const field = uiOptions.field;
+  const { fields } = registry;
+  if (typeof field === "function") {
+    return field;
+  }
+  if (typeof field === "string" && field in fields) {
+    return fields[field];
+  }
+
+  const schemaType = getSchemaType(schema);
+  const type: string = Array.isArray(schemaType)
+    ? schemaType[0]
+    : schemaType || "";
+  const componentName = COMPONENT_TYPES[type];
+
+  // If the type is not defined and the schema uses 'anyOf' or 'oneOf', don't
+  // render a field and let the MultiSchemaField component handle the form display
+  if (!componentName && (schema.anyOf || schema.oneOf)) {
+    return () => null;
+  }
+
+  return componentName in fields
+    ? fields[componentName]
+    : () => {
+        const UnsupportedFieldTemplate = getTemplate<
+          "UnsupportedFieldTemplate",
+          T,
+          F
+        >("UnsupportedFieldTemplate", registry, uiOptions);
+
+        return (
+          <UnsupportedFieldTemplate
+            schema={schema}
+            idSchema={idSchema}
+            reason={`Unknown field type ${schema.type}`}
+            registry={registry}
+          />
+        );
+      };
+}
+
+/** The `Help` component renders any help desired for a field
+ *
+ * @param props - The id and help information to be rendered
+ */
+function Help(props: { id: string; help?: string | React.ReactElement }) {
+  const { id, help } = props;
+  if (!help) {
+    return null;
+  }
+  if (typeof help === "string") {
+    return (
+      <p id={id} className="help-block">
+        {help}
+      </p>
+    );
+  }
+  return (
+    <div id={id} className="help-block">
+      {help}
+    </div>
+  );
+}
+
+/** The `ErrorList` component renders the errors local to the particular field
+ *
+ * @param props - The list of errors to show
+ */
+function ErrorList(props: { errors?: string[] }) {
+  const { errors = [] } = props;
+  if (errors.length === 0) {
+    return null;
+  }
+
+  return (
+    <div>
+      <ul className="error-detail bs-callout bs-callout-info">
+        {errors
+          .filter((elem) => !!elem)
+          .map((error, index) => {
+            return (
+              <li className="text-danger" key={index}>
+                {error}
+              </li>
+            );
+          })}
+      </ul>
+    </div>
+  );
+}
+
+/** The `SchemaFieldRender` component is the work-horse of react-jsonschema-form, determining what kind of real field to
+ * render based on the `schema`, `uiSchema` and all the other props. It also deals with rendering the `anyOf` and
+ * `oneOf` fields.
+ *
+ * @param props - The `FieldProps` for this component
+ */
+function SchemaFieldRender<T, F extends GenericObjectType = any>(
+  props: FieldProps<T, F>
+) {
+  const {
+    schema: _schema,
+    idSchema: _idSchema,
+    uiSchema,
+    formData,
+    errorSchema,
+    idPrefix,
+    idSeparator,
+    name,
+    onChange,
+    onKeyChange,
+    onDropPropertyClick,
+    required,
+    registry,
+    wasPropertyKeyModified = false,
+  } = props;
+  const { formContext, schemaUtils } = registry;
+  const uiOptions = getUiOptions<T, F>(uiSchema);
+  const FieldTemplate = getTemplate<"FieldTemplate", T, F>(
+    "FieldTemplate",
+    registry,
+    uiOptions
+  );
+  const DescriptionFieldTemplate = getTemplate<
+    "DescriptionFieldTemplate",
+    T,
+    F
+  >("DescriptionFieldTemplate", registry, uiOptions);
+  const schema = schemaUtils.retrieveSchema(_schema, formData);
+  const idSchema = mergeObjects(
+    schemaUtils.toIdSchema(
+      schema,
+      _idSchema.$id,
+      formData,
+      idPrefix,
+      idSeparator
+    ),
+    _idSchema
+  ) as IdSchema<T>;
+  // @ts-ignore
+  const FieldComponent = getFieldComponent(
+    schema,
+    uiOptions,
+    idSchema,
+    registry
+  );
+  const disabled = Boolean(props.disabled || uiOptions.disabled);
+  const readonly = Boolean(
+    props.readonly ||
+      uiOptions.readonly ||
+      props.schema.readOnly ||
+      schema.readOnly
+  );
+  const uiSchemaHideError = uiOptions.hideError;
+  // Set hideError to the value provided in the uiSchema, otherwise stick with the prop to propagate to children
+  const hideError =
+    uiSchemaHideError === undefined
+      ? props.hideError
+      : Boolean(uiSchemaHideError);
+  const autofocus = Boolean(props.autofocus || uiOptions.autofocus);
+  if (Object.keys(schema).length === 0) {
+    return null;
+  }
+
+  const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
+
+  const { __errors, ...fieldErrorSchema } = errorSchema || {};
+  // See #439: uiSchema: Don't pass consumed class names to child components
+  const fieldUiSchema = omit(uiSchema, ["ui:classNames", "classNames"]);
+  if ("ui:options" in fieldUiSchema) {
+    fieldUiSchema["ui:options"] = omit(fieldUiSchema["ui:options"], [
+      "classNames",
+    ]);
+  }
+
+  const field = (
+    // @ts-ignore
+    <FieldComponent
+      {...props}
+      idSchema={idSchema}
+      schema={schema}
+      uiSchema={fieldUiSchema}
+      disabled={disabled}
+      readonly={readonly}
+      hideError={hideError}
+      autofocus={autofocus}
+      errorSchema={fieldErrorSchema}
+      formContext={formContext}
+      rawErrors={__errors}
+    />
+  );
+
+  const id = idSchema[ID_KEY];
+
+  // If this schema has a title defined, but the user has set a new key/label, retain their input.
+  let label;
+  if (wasPropertyKeyModified) {
+    label = name;
+  } else {
+    label = uiOptions.title || props.schema.title || schema.title || name;
+  }
+
+  const description =
+    uiOptions.description ||
+    props.schema.description ||
+    schema.description ||
+    "";
+  const errors = __errors;
+  const help = uiOptions.help;
+  const hidden = uiOptions.widget === "hidden";
+
+  const classNames = ["form-control", "mb-2", "field", `field-${schema.type}`];
+  if (!hideError && errors && errors.length > 0) {
+    classNames.push("field-error has-error has-danger");
+  }
+  if (uiSchema?.classNames) {
+    if (import.meta.env.NODE_ENV !== "production") {
+      console.warn(
+        "'uiSchema.classNames' is deprecated and may be removed in a major release; Use 'ui:classNames' instead."
+      );
+    }
+    classNames.push(uiSchema.classNames);
+  }
+  if (uiOptions.classNames) {
+    classNames.push(uiOptions.classNames);
+  }
+
+  const fieldProps: Omit<FieldTemplateProps<T, F>, "children"> = {
+    description: (
+      <DescriptionFieldTemplate
+        schema={schema}
+        id={`${id}__description`}
+        description={description}
+        registry={registry}
+      />
+    ),
+    rawDescription: description,
+    help: <Help id={`${id}__help`} help={help} />,
+    rawHelp: typeof help === "string" ? help : undefined,
+    errors: hideError ? undefined : <ErrorList errors={errors} />,
+    rawErrors: hideError ? undefined : errors,
+    id,
+    label,
+    hidden,
+    onChange,
+    onKeyChange,
+    onDropPropertyClick,
+    required,
+    disabled,
+    readonly,
+    hideError,
+    displayLabel,
+    classNames: classNames.join(" ").trim(),
+    formContext,
+    formData,
+    schema,
+    uiSchema,
+    registry,
+  };
+
+  const _AnyOfField = registry.fields.AnyOfField;
+  const _OneOfField = registry.fields.OneOfField;
+
+  return (
+    <FieldTemplate {...fieldProps}>
+      <>
+        {field}
+        {/*
+        If the schema `anyOf` or 'oneOf' can be rendered as a select control, don't
+        render the selection and let `StringField` component handle
+        rendering
+      */}
+        {schema.anyOf &&
+          !uiSchema?.["ui:field"] &&
+          !schemaUtils.isSelect(schema) && (
+            <_AnyOfField
+              name={name}
+              disabled={disabled}
+              readonly={readonly}
+              hideError={hideError}
+              errorSchema={errorSchema}
+              formData={formData}
+              formContext={formContext}
+              idPrefix={idPrefix}
+              idSchema={idSchema}
+              idSeparator={idSeparator}
+              onBlur={props.onBlur}
+              onChange={props.onChange}
+              onFocus={props.onFocus}
+              options={schema.anyOf.map((_schema: any) =>
+                schemaUtils.retrieveSchema(
+                  // @ts-ignore
+                  isObject(_schema) ? _schema : {},
+                  formData
+                )
+              )}
+              baseType={schema.type}
+              registry={registry}
+              schema={schema}
+              uiSchema={uiSchema}
+            />
+          )}
+        {schema.oneOf &&
+          !uiSchema?.["ui:field"] &&
+          !schemaUtils.isSelect(schema) && (
+            <_OneOfField
+              name={name}
+              disabled={disabled}
+              readonly={readonly}
+              hideError={hideError}
+              errorSchema={errorSchema}
+              formData={formData}
+              formContext={formContext}
+              idPrefix={idPrefix}
+              idSchema={idSchema}
+              idSeparator={idSeparator}
+              onBlur={props.onBlur}
+              onChange={props.onChange}
+              onFocus={props.onFocus}
+              options={schema.oneOf.map((_schema: any) =>
+                schemaUtils.retrieveSchema(
+                  // @ts-ignore
+                  isObject(_schema) ? _schema : {},
+                  formData
+                )
+              )}
+              baseType={schema.type}
+              registry={registry}
+              schema={schema}
+              uiSchema={uiSchema}
+            />
+          )}
+      </>
+    </FieldTemplate>
+  );
+}
+
+/** The `SchemaField` component determines whether it is necessary to rerender the component based on any props changes
+ * and if so, calls the `SchemaFieldRender` component with the props.
+ */
+class SchemaField<
+  T = any,
+  F extends GenericObjectType = any,
+> extends React.Component<FieldProps<T, F>> {
+  shouldComponentUpdate(nextProps: Readonly<FieldProps<T, F>>) {
+    return !deepEquals(this.props, nextProps);
+  }
+
+  render() {
+    return <SchemaFieldRender<T, F> {...this.props} />;
+  }
+}
+
+export default SchemaField;

package/src/fields/StringField.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import type { FieldProps, GenericObjectType } from "@rjsf/utils";
+import { getWidget, getUiOptions, optionsList, hasWidget } from "@rjsf/utils";
+
+/** The `StringField` component is used to render a schema field that represents a string type
+ *
+ * @param props - The `FieldProps` for this template
+ */
+function StringField<T = any, F extends GenericObjectType = any>(
+  props: FieldProps<T, F>
+) {
+  const {
+    schema,
+    name,
+    uiSchema,
+    idSchema,
+    formData,
+    required,
+    disabled = false,
+    readonly = false,
+    autofocus = false,
+    onChange,
+    onBlur,
+    onFocus,
+    registry,
+    rawErrors,
+  } = props;
+  const { title, format } = schema;
+  const { widgets, formContext, schemaUtils } = registry;
+  const enumOptions = schemaUtils.isSelect(schema)
+    ? optionsList(schema)
+    : undefined;
+  let defaultWidget = enumOptions ? "select" : "text";
+  if (format && hasWidget<T, F>(schema, format, widgets)) {
+    defaultWidget = format;
+  }
+  const {
+    widget = defaultWidget,
+    placeholder = "",
+    ...options
+  } = getUiOptions<T, F>(uiSchema);
+  const Widget = getWidget<T, F>(schema, widget, widgets);
+  return (
+    <Widget
+      name={name}
+      options={{ ...options, enumOptions }}
+      schema={schema}
+      uiSchema={uiSchema}
+      id={idSchema && idSchema.$id}
+      label={title === undefined ? name : title}
+      value={formData}
+      onChange={onChange}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      required={required}
+      disabled={disabled}
+      readonly={readonly}
+      formContext={formContext}
+      autofocus={autofocus}
+      registry={registry}
+      placeholder={placeholder}
+      rawErrors={rawErrors}
+    />
+  );
+}
+
+export default StringField;

package/src/fields/index.ts

@@ -0,0 +1,24 @@
+import { RegistryFieldsType } from "@rjsf/utils";
+
+import ArrayField from "./ArrayField";
+import BooleanField from "./BooleanField";
+import MultiSchemaField from "./MultiSchemaField";
+import NumberField from "./NumberField";
+import ObjectField from "./ObjectField";
+import SchemaField from "./SchemaField";
+import StringField from "./StringField";
+import NullField from "./NullField";
+
+const fields: RegistryFieldsType = {
+  AnyOfField: MultiSchemaField,
+  ArrayField,
+  BooleanField,
+  NumberField,
+  ObjectField,
+  OneOfField: MultiSchemaField,
+  SchemaField,
+  StringField,
+  NullField,
+};
+
+export default fields;

package/src/index.tsx

@@ -0,0 +1,17 @@
+import widgets from "./widgets";
+import templates from "./templates";
+import fields from "./fields";
+import { ThemeProps, withTheme } from "@rjsf/core";
+import type { IChangeEvent } from "@rjsf/core";
+import type { RJSFSchema } from "@rjsf/utils";
+import validator from "@rjsf/validator-ajv8";
+
+const rjsfDaisyUiTheme: ThemeProps = {
+  fields,
+  templates,
+  widgets,
+};
+
+const BaseForm = withTheme(rjsfDaisyUiTheme);
+
+export { rjsfDaisyUiTheme, IChangeEvent, RJSFSchema, validator, BaseForm };

package/src/interfaces/MessagesProps.interface.ts

@@ -0,0 +1,5 @@
+import { Message } from "../types/Message.type";
+
+export interface MessagesProps {
+  data: Message[];
+}

package/src/interfaces/Option.interface.ts

@@ -0,0 +1,4 @@
+export interface Option {
+  label: string;
+  value: string;
+}

package/src/styles/select.styles.ts

@@ -0,0 +1,28 @@
+import { GroupBase, StylesConfig } from "react-select";
+import { Option } from "../interfaces/Option.interface";
+
+export const selectStyles: StylesConfig<Option, boolean, GroupBase<Option>> = {
+  option: (provided, state) => ({
+    ...provided,
+  }),
+  control: (provided) => ({
+    ...provided,
+    borderRadius: "0.5rem",
+    height: "3rem",
+  }),
+  singleValue: (provided, state) => {
+    const opacity = state.isDisabled ? 0.5 : 1;
+    const transition = "opacity 300ms";
+
+    return { ...provided, opacity, transition };
+  },
+  multiValue: (styles, { data }) => ({
+    ...styles,
+    backgroundColor: "#560DF8",
+    color: "white",
+  }),
+  multiValueLabel: (styles, { data }) => ({
+    ...styles,
+    color: "white",
+  }),
+};

package/src/templates/ArrayFieldDescriptionTemplate.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import type {
+  ArrayFieldDescriptionProps,
+  GenericObjectType,
+  UiSchema,
+  Registry,
+} from "@rjsf/utils";
+import { getTemplate, getUiOptions } from "@rjsf/utils";
+
+/** The `ArrayFieldDescriptionTemplate` component renders a `DescriptionFieldTemplate` with an `id` derived from
+ * the `idSchema`.
+ *
+ * @param props - The `ArrayFieldDescriptionProps` for the component
+ */
+export default function ArrayFieldDescriptionTemplate<
+  T = any,
+  F extends GenericObjectType = any
+>(props: ArrayFieldDescriptionProps) {
+  const { schema, idSchema, description, registry, uiSchema } = props;
+  if (!description || !uiSchema) {
+    return null;
+  }
+  const options = getUiOptions<T, F>(uiSchema as UiSchema<T, F, any>);
+  const DescriptionFieldTemplate = getTemplate<
+    "DescriptionFieldTemplate",
+    T,
+    F
+  >(
+    "DescriptionFieldTemplate",
+    registry as unknown as Registry<T, F, any>,
+    options
+  );
+  const id = `${idSchema.$id}__description`;
+  return (
+    <DescriptionFieldTemplate
+      schema={schema as F}
+      id={id}
+      description={description}
+      registry={registry as unknown as Registry<T, F, any>}
+    />
+  );
+}

package/src/templates/ArrayFieldItemTemplate.tsx

@@ -0,0 +1,78 @@
+import React, { CSSProperties } from "react";
+import type {
+  ArrayFieldTemplateItemType,
+  GenericObjectType,
+} from "@rjsf/utils";
+
+/** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
+ *
+ * @param props - The `ArrayFieldTemplateItemType` props for the component
+ */
+export default function ArrayFieldItemTemplate<
+  T = any,
+  F extends GenericObjectType = any
+>(props: ArrayFieldTemplateItemType<T, F>) {
+  const {
+    children,
+    className,
+    disabled,
+    hasToolbar,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    index,
+    onDropIndexClick,
+    onReorderClick,
+    readonly,
+    registry,
+  } = props;
+  const { MoveDownButton, MoveUpButton, RemoveButton } =
+    registry.templates.ButtonTemplates;
+  const btnStyle: CSSProperties = {
+    flex: 1,
+    paddingLeft: 6,
+    paddingRight: 6,
+    fontWeight: "bold",
+  };
+  return (
+    <div className={className}>
+      <div className={hasToolbar ? "col-xs-9" : "col-xs-12"}>{children}</div>
+      {hasToolbar && (
+        <div className="col-xs-3 array-item-toolbox">
+          <div
+            className="btn-group"
+            style={{
+              display: "flex",
+              justifyContent: "space-around",
+            }}
+          >
+            {(hasMoveUp || hasMoveDown) && (
+              <MoveUpButton
+                registry={registry}
+                style={btnStyle}
+                disabled={disabled || readonly || !hasMoveUp}
+                onClick={onReorderClick(index, index - 1)}
+              />
+            )}
+            {(hasMoveUp || hasMoveDown) && (
+              <MoveDownButton
+                registry={registry}
+                style={btnStyle}
+                disabled={disabled || readonly || !hasMoveDown}
+                onClick={onReorderClick(index, index + 1)}
+              />
+            )}
+            {hasRemove && (
+              <RemoveButton
+                registry={registry}
+                style={btnStyle}
+                disabled={disabled || readonly}
+                onClick={onDropIndexClick(index)}
+              />
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}