@springmicro/forms 0.7.0 → 0.7.1

package/src/fields/StringField.tsx

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

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

@@ -1,26 +1,26 @@
-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";
-import { emailOnlySG, emailOnlySGJSON } from "@springmicro/utils/forms";
-
-const rjsfDaisyUiTheme: ThemeProps = {
-  fields,
-  templates,
-  widgets,
-};
-
-const BaseForm = withTheme(rjsfDaisyUiTheme);
-
-export {
-  rjsfDaisyUiTheme,
-  IChangeEvent,
-  RJSFSchema,
-  validator,
-  BaseForm,
-  emailOnlySG,
-  emailOnlySGJSON,
-};
+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";
+import { emailOnlySG, emailOnlySGJSON } from "@springmicro/utils/forms";
+
+const rjsfDaisyUiTheme: ThemeProps = {
+  fields,
+  templates,
+  widgets,
+};
+
+const BaseForm = withTheme(rjsfDaisyUiTheme);
+
+export {
+  rjsfDaisyUiTheme,
+  IChangeEvent,
+  RJSFSchema,
+  validator,
+  BaseForm,
+  emailOnlySG,
+  emailOnlySGJSON,
+};

package/src/interfaces/MessagesProps.interface.ts

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

package/src/interfaces/Option.interface.ts

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

package/src/styles/select.styles.ts

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

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

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