@springmicro/forms 0.6.4 → 0.7.0

package/src/widgets/SelectWidget.tsx

@@ -1,99 +1,99 @@
-import React, {
-  ChangeEvent,
-  FocusEvent,
-  FocusEventHandler,
-  useCallback,
-} from "react";
-import type {
-  EnumOptionsType,
-  GenericObjectType,
-  WidgetProps,
-} from "@rjsf/utils";
-import Select, { MultiValue, SingleValue } from "react-select";
-import { selectStyles } from "../styles/select.styles";
-import { Option } from "../interfaces/Option.interface";
-import processSelectValue from "../utils/processSelectValue";
-
-/** The `SelectWidget` is a widget for rendering dropdowns.
- *  It is typically used with string properties constrained with enum options.
- *
- * @param props - The `WidgetProps` for this component
- */
-function SelectWidget<T = any, F extends GenericObjectType = any>({
-  schema,
-  id,
-  options,
-  name,
-  value,
-  disabled,
-  readonly,
-  multiple = false,
-  autofocus = false,
-  onBlur,
-  onFocus,
-  onChange,
-}: WidgetProps<T, F>) {
-  const { enumOptions, enumDisabled } = options;
-  const emptyValue = multiple ? [] : "";
-
-  const handleFocus: FocusEventHandler<HTMLInputElement> = useCallback(
-    () => onFocus(id, processSelectValue(schema, value, options)),
-    [onFocus, id, schema, multiple, options]
-  );
-
-  const handleBlur: FocusEventHandler<HTMLInputElement> = useCallback(
-    () => onBlur(id, processSelectValue(schema, value, options)),
-    [onBlur, id, schema, multiple, options]
-  );
-
-  const handleChange = useCallback(
-    (event: MultiValue<EnumOptionsType> | SingleValue<EnumOptionsType>) => {
-      let newValue: string | string[] | undefined;
-      if (multiple && Array.isArray(event)) {
-        newValue = event.map((option) => option.value);
-      } else {
-        const singleEvent = event as SingleValue<EnumOptionsType>;
-        newValue = singleEvent?.value;
-      }
-      return onChange(processSelectValue(schema, newValue, options));
-    },
-    [onChange, schema, multiple, options]
-  );
-
-  const getEnumObjectFromVal = (val: string) => {
-    return (
-      enumOptions?.find((option: Option) => option.value === val) || {
-        label: "",
-        value: "",
-      }
-    );
-  };
-  const getSelectValue = () => {
-    let selectValue: Option | Option[] | undefined = undefined;
-    if (multiple && Array.isArray(value)) {
-      selectValue = value.map((val) => getEnumObjectFromVal(val.toString()));
-    } else if (value) {
-      selectValue = getEnumObjectFromVal(value.toString());
-    }
-    return selectValue;
-  };
-
-  return (
-    <Select
-      id={id}
-      instanceId={id}
-      isMulti={multiple}
-      name={name}
-      value={getSelectValue()}
-      isDisabled={disabled || readonly}
-      autoFocus={autofocus}
-      options={enumOptions}
-      onChange={handleChange}
-      onBlur={handleBlur}
-      onFocus={handleFocus}
-      styles={selectStyles}
-    />
-  );
-}
-
-export default SelectWidget;
+import React, {
+  ChangeEvent,
+  FocusEvent,
+  FocusEventHandler,
+  useCallback,
+} from "react";
+import type {
+  EnumOptionsType,
+  GenericObjectType,
+  WidgetProps,
+} from "@rjsf/utils";
+import Select, { MultiValue, SingleValue } from "react-select";
+import { selectStyles } from "../styles/select.styles";
+import { Option } from "../interfaces/Option.interface";
+import processSelectValue from "../utils/processSelectValue";
+
+/** The `SelectWidget` is a widget for rendering dropdowns.
+ *  It is typically used with string properties constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function SelectWidget<T = any, F extends GenericObjectType = any>({
+  schema,
+  id,
+  options,
+  name,
+  value,
+  disabled,
+  readonly,
+  multiple = false,
+  autofocus = false,
+  onBlur,
+  onFocus,
+  onChange,
+}: WidgetProps<T, F>) {
+  const { enumOptions, enumDisabled } = options;
+  const emptyValue = multiple ? [] : "";
+
+  const handleFocus: FocusEventHandler<HTMLInputElement> = useCallback(
+    () => onFocus(id, processSelectValue(schema, value, options)),
+    [onFocus, id, schema, multiple, options]
+  );
+
+  const handleBlur: FocusEventHandler<HTMLInputElement> = useCallback(
+    () => onBlur(id, processSelectValue(schema, value, options)),
+    [onBlur, id, schema, multiple, options]
+  );
+
+  const handleChange = useCallback(
+    (event: MultiValue<EnumOptionsType> | SingleValue<EnumOptionsType>) => {
+      let newValue: string | string[] | undefined;
+      if (multiple && Array.isArray(event)) {
+        newValue = event.map((option) => option.value);
+      } else {
+        const singleEvent = event as SingleValue<EnumOptionsType>;
+        newValue = singleEvent?.value;
+      }
+      return onChange(processSelectValue(schema, newValue, options));
+    },
+    [onChange, schema, multiple, options]
+  );
+
+  const getEnumObjectFromVal = (val: string) => {
+    return (
+      enumOptions?.find((option: Option) => option.value === val) || {
+        label: "",
+        value: "",
+      }
+    );
+  };
+  const getSelectValue = () => {
+    let selectValue: Option | Option[] | undefined = undefined;
+    if (multiple && Array.isArray(value)) {
+      selectValue = value.map((val) => getEnumObjectFromVal(val.toString()));
+    } else if (value) {
+      selectValue = getEnumObjectFromVal(value.toString());
+    }
+    return selectValue;
+  };
+
+  return (
+    <Select
+      id={id}
+      instanceId={id}
+      isMulti={multiple}
+      name={name}
+      value={getSelectValue()}
+      isDisabled={disabled || readonly}
+      autoFocus={autofocus}
+      options={enumOptions}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      styles={selectStyles}
+    />
+  );
+}
+
+export default SelectWidget;

package/src/widgets/TextWidget.tsx

@@ -1,19 +1,19 @@
-import React from "react";
-import type { GenericObjectType, WidgetProps } from "@rjsf/utils";
-import { getTemplate } from "@rjsf/utils";
-
-/** The `TextWidget` component uses the `BaseInputTemplate`.
- *
- * @param props - The `WidgetProps` for this component
- */
-export default function TextWidget<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 {...props} />;
-}
+import React from "react";
+import type { GenericObjectType, WidgetProps } from "@rjsf/utils";
+import { getTemplate } from "@rjsf/utils";
+
+/** The `TextWidget` component uses the `BaseInputTemplate`.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function TextWidget<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 {...props} />;
+}

package/src/widgets/TextareaWidget.tsx

@@ -1,64 +1,64 @@
-import React, { FocusEvent, useCallback } from "react";
-import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
-
-/** The `TextareaWidget` is a widget for rendering input fields as textarea.
- *
- * @param props - The `WidgetProps` for this component
- */
-function TextareaWidget<T = any, F extends GenericObjectType = any>({
-  id,
-  name,
-  options = {},
-  placeholder,
-  value,
-  required,
-  disabled,
-  readonly,
-  autofocus = false,
-  onChange,
-  onBlur,
-  onFocus,
-}: WidgetProps<T, F>) {
-  const handleChange = useCallback(
-    ({ target: { value } }: React.ChangeEvent<HTMLTextAreaElement>) =>
-      onChange(value === "" ? options.emptyValue : value),
-    [onChange, options.emptyValue]
-  );
-
-  const handleBlur = useCallback(
-    ({ target: { value } }: FocusEvent<HTMLTextAreaElement>) =>
-      onBlur(id, value),
-    [onBlur, id]
-  );
-
-  const handleFocus = useCallback(
-    ({ target: { value } }: FocusEvent<HTMLTextAreaElement>) =>
-      onFocus(id, value),
-    [id, onFocus]
-  );
-
-  return (
-    <textarea
-      id={id}
-      name={name}
-      className="textarea textarea-bordered"
-      value={value ? value : ""}
-      placeholder={placeholder}
-      required={required}
-      disabled={disabled}
-      readOnly={readonly}
-      autoFocus={autofocus}
-      rows={options.rows}
-      onBlur={handleBlur}
-      onFocus={handleFocus}
-      onChange={handleChange}
-    />
-  );
-}
-
-TextareaWidget.defaultProps = {
-  autofocus: false,
-  options: {},
-};
-
-export default TextareaWidget;
+import React, { FocusEvent, useCallback } from "react";
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+
+/** The `TextareaWidget` is a widget for rendering input fields as textarea.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function TextareaWidget<T = any, F extends GenericObjectType = any>({
+  id,
+  name,
+  options = {},
+  placeholder,
+  value,
+  required,
+  disabled,
+  readonly,
+  autofocus = false,
+  onChange,
+  onBlur,
+  onFocus,
+}: WidgetProps<T, F>) {
+  const handleChange = useCallback(
+    ({ target: { value } }: React.ChangeEvent<HTMLTextAreaElement>) =>
+      onChange(value === "" ? options.emptyValue : value),
+    [onChange, options.emptyValue]
+  );
+
+  const handleBlur = useCallback(
+    ({ target: { value } }: FocusEvent<HTMLTextAreaElement>) =>
+      onBlur(id, value),
+    [onBlur, id]
+  );
+
+  const handleFocus = useCallback(
+    ({ target: { value } }: FocusEvent<HTMLTextAreaElement>) =>
+      onFocus(id, value),
+    [id, onFocus]
+  );
+
+  return (
+    <textarea
+      id={id}
+      name={name}
+      className="textarea textarea-bordered"
+      value={value ? value : ""}
+      placeholder={placeholder}
+      required={required}
+      disabled={disabled}
+      readOnly={readonly}
+      autoFocus={autofocus}
+      rows={options.rows}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      onChange={handleChange}
+    />
+  );
+}
+
+TextareaWidget.defaultProps = {
+  autofocus: false,
+  options: {},
+};
+
+export default TextareaWidget;

package/src/widgets/URLWidget.tsx

@@ -1,19 +1,19 @@
-import React from "react";
-import type { GenericObjectType, WidgetProps } from "@rjsf/utils";
-import { getTemplate } from "@rjsf/utils";
-
-/** The `URLWidget` component uses the `BaseInputTemplate` changing the type to `url`.
- *
- * @param props - The `WidgetProps` for this component
- */
-export default function URLWidget<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="url" {...props} />;
-}
+import React from "react";
+import type { GenericObjectType, WidgetProps } from "@rjsf/utils";
+import { getTemplate } from "@rjsf/utils";
+
+/** The `URLWidget` component uses the `BaseInputTemplate` changing the type to `url`.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function URLWidget<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="url" {...props} />;
+}

package/src/widgets/UpDownWidget.tsx

@@ -1,20 +1,20 @@
-import React from "react";
-import type { GenericObjectType, WidgetProps } from "@rjsf/utils";
-import { getTemplate } from "@rjsf/utils";
-
-/** The `UpDownWidget` component uses the `BaseInputTemplate` changing the type to `number`.
- *
- * @param props - The `WidgetProps` for this component
- */
-export default function UpDownWidget<
-  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="number" {...props} />;
-}
+import React from "react";
+import type { GenericObjectType, WidgetProps } from "@rjsf/utils";
+import { getTemplate } from "@rjsf/utils";
+
+/** The `UpDownWidget` component uses the `BaseInputTemplate` changing the type to `number`.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function UpDownWidget<
+  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="number" {...props} />;
+}

package/src/widgets/index.ts

@@ -1,43 +1,43 @@
-import { RegistryWidgetsType } from "@rjsf/utils";
-
-import AltDateWidget from "./AltDateWidget";
-import AltDateTimeWidget from "./AltDateTimeWidget";
-import CheckboxWidget from "./CheckboxWidget";
-import CheckboxesWidget from "./CheckboxesWidget";
-import ColorWidget from "./ColorWidget";
-import DateWidget from "./DateWidget";
-import DateTimeWidget from "./DateTimeWidget";
-import EmailWidget from "./EmailWidget";
-import FileWidget from "./FileWidget";
-import HiddenWidget from "./HiddenWidget";
-import PasswordWidget from "./PasswordWidget";
-import RadioWidget from "./RadioWidget";
-import RangeWidget from "./RangeWidget";
-import SelectWidget from "./SelectWidget";
-import TextareaWidget from "./TextareaWidget";
-import TextWidget from "./TextWidget";
-import URLWidget from "./URLWidget";
-import UpDownWidget from "./UpDownWidget";
-
-const widgets: RegistryWidgetsType = {
-  PasswordWidget,
-  RadioWidget,
-  UpDownWidget,
-  RangeWidget,
-  SelectWidget,
-  TextWidget,
-  DateWidget,
-  DateTimeWidget,
-  AltDateWidget,
-  AltDateTimeWidget,
-  EmailWidget,
-  URLWidget,
-  TextareaWidget,
-  HiddenWidget,
-  ColorWidget,
-  FileWidget,
-  CheckboxWidget,
-  CheckboxesWidget,
-};
-
-export default widgets;
+import { RegistryWidgetsType } from "@rjsf/utils";
+
+import AltDateWidget from "./AltDateWidget";
+import AltDateTimeWidget from "./AltDateTimeWidget";
+import CheckboxWidget from "./CheckboxWidget";
+import CheckboxesWidget from "./CheckboxesWidget";
+import ColorWidget from "./ColorWidget";
+import DateWidget from "./DateWidget";
+import DateTimeWidget from "./DateTimeWidget";
+import EmailWidget from "./EmailWidget";
+import FileWidget from "./FileWidget";
+import HiddenWidget from "./HiddenWidget";
+import PasswordWidget from "./PasswordWidget";
+import RadioWidget from "./RadioWidget";
+import RangeWidget from "./RangeWidget";
+import SelectWidget from "./SelectWidget";
+import TextareaWidget from "./TextareaWidget";
+import TextWidget from "./TextWidget";
+import URLWidget from "./URLWidget";
+import UpDownWidget from "./UpDownWidget";
+
+const widgets: RegistryWidgetsType = {
+  PasswordWidget,
+  RadioWidget,
+  UpDownWidget,
+  RangeWidget,
+  SelectWidget,
+  TextWidget,
+  DateWidget,
+  DateTimeWidget,
+  AltDateWidget,
+  AltDateTimeWidget,
+  EmailWidget,
+  URLWidget,
+  TextareaWidget,
+  HiddenWidget,
+  ColorWidget,
+  FileWidget,
+  CheckboxWidget,
+  CheckboxesWidget,
+};
+
+export default widgets;

package/tsconfig.json

@@ -1,24 +1,24 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": false,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "exclude": ["src/main.tsx"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "exclude": ["src/main.tsx"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -1,10 +1,10 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -1,25 +1,25 @@
-import react from "@vitejs/plugin-react";
-import { resolve } from "path";
-import { defineConfig } from "vite";
-import dts from "vite-plugin-dts";
-
-export default defineConfig({
-  plugins: [react(), dts({ rollupTypes: true })],
-  build: {
-    lib: {
-      entry: resolve(__dirname, "src/index.tsx"),
-      name: "@springmicro/forms",
-      fileName: "index",
-    },
-    rollupOptions: {
-      external: ["react", "react-dom", "nanoid"],
-      output: {
-        globals: {
-          react: "React",
-          "react-dom": "ReactDOM",
-          nanoid: "Nanoid",
-        },
-      },
-    },
-  },
-});
+import react from "@vitejs/plugin-react";
+import { resolve } from "path";
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+
+export default defineConfig({
+  plugins: [react(), dts({ rollupTypes: true })],
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.tsx"),
+      name: "@springmicro/forms",
+      fileName: "index",
+    },
+    rollupOptions: {
+      external: ["react", "react-dom", "nanoid"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+          nanoid: "Nanoid",
+        },
+      },
+    },
+  },
+});