@springmicro/forms 0.1.3

package/src/widgets/FileWidget.tsx

@@ -0,0 +1,144 @@
+import React, { ChangeEvent, useCallback, useMemo, useState } from "react";
+
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+import { dataURItoBlob } from "@rjsf/utils";
+
+function addNameToDataURL(dataURL: string, name: string) {
+  if (dataURL === null) {
+    return null;
+  }
+  return dataURL.replace(";base64", `;name=${encodeURIComponent(name)};base64`);
+}
+
+type FileInfoType = {
+  dataURL?: string | null;
+  name: string;
+  size: number;
+  type: string;
+};
+
+function processFile(file: File): Promise<FileInfoType> {
+  const { name, size, type } = file;
+  return new Promise((resolve, reject) => {
+    const reader = new window.FileReader();
+    reader.onerror = reject;
+    reader.onload = (event) => {
+      if (typeof event.target?.result === "string") {
+        resolve({
+          dataURL: addNameToDataURL(event.target.result, name),
+          name,
+          size,
+          type,
+        });
+      } else {
+        resolve({
+          dataURL: null,
+          name,
+          size,
+          type,
+        });
+      }
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+function processFiles(files: FileList) {
+  return Promise.all(Array.from(files).map(processFile));
+}
+
+function FilesInfo({
+  filesInfo,
+}: {
+  filesInfo: { name: string; size: number; type: string }[];
+}) {
+  if (filesInfo.length === 0) {
+    return null;
+  }
+  return (
+    <ul className="file-info">
+      {filesInfo.map((fileInfo, key) => {
+        const { name, size, type } = fileInfo;
+        return (
+          <li key={key}>
+            <strong>{name}</strong> ({type}, {size} bytes)
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+function extractFileInfo(dataURLs: string[]) {
+  return dataURLs
+    .filter((dataURL) => typeof dataURL !== "undefined")
+    .map((dataURL) => {
+      const { blob, name } = dataURItoBlob(dataURL);
+      return {
+        name: name,
+        size: blob.size,
+        type: blob.type,
+      };
+    });
+}
+
+/**
+ *  The `FileWidget` is a widget for rendering file upload fields.
+ *  It is typically used with a string property with data-url format.
+ */
+function FileWidget<T, F extends GenericObjectType = any>({
+  multiple,
+  id,
+  readonly,
+  disabled,
+  onChange,
+  value,
+  autofocus = false,
+  options,
+}: WidgetProps<T, F>) {
+  const extractedFilesInfo = useMemo(
+    () =>
+      Array.isArray(value) ? extractFileInfo(value) : extractFileInfo([value]),
+    [value]
+  );
+  const [filesInfo, setFilesInfo] =
+    useState<FileInfoType[]>(extractedFilesInfo);
+
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      if (!event.target.files) {
+        return;
+      }
+      processFiles(event.target.files).then((filesInfoEvent) => {
+        setFilesInfo(filesInfoEvent);
+        const newValue = filesInfoEvent.map((fileInfo) => fileInfo.dataURL);
+        if (multiple) {
+          onChange(newValue);
+        } else {
+          onChange(newValue[0]);
+        }
+      });
+    },
+    [multiple, onChange]
+  );
+
+  return (
+    <div>
+      <p>
+        <input
+          id={id}
+          type="file"
+          disabled={readonly || disabled}
+          onChange={handleChange}
+          defaultValue=""
+          autoFocus={autofocus}
+          multiple={multiple}
+          accept={options.accept ? String(options.accept) : undefined}
+        />
+      </p>
+      <FilesInfo filesInfo={filesInfo} />
+    </div>
+  );
+}
+
+export default FileWidget;

package/src/widgets/HiddenWidget.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+
+/** The `HiddenWidget` is a widget for rendering a hidden input field.
+ *  It is typically used by setting type to "hidden".
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function HiddenWidget<T = any, F extends GenericObjectType = any>({
+  id,
+  value,
+}: WidgetProps<T, F>) {
+  return (
+    <input
+      type="hidden"
+      id={id}
+      value={typeof value === "undefined" ? "" : value}
+    />
+  );
+}
+
+export default HiddenWidget;

package/src/widgets/PasswordWidget.tsx

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

package/src/widgets/RadioWidget.tsx

@@ -0,0 +1,87 @@
+import React, { FocusEvent, useCallback } from "react";
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+
+/** The `RadioWidget` is a widget for rendering a radio group.
+ *  It is typically used with a string property constrained with enum options.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function RadioWidget<T = any, F extends GenericObjectType = any>({
+  options,
+  value,
+  required,
+  disabled,
+  readonly,
+  autofocus = false,
+  onBlur,
+  onFocus,
+  onChange,
+  id,
+}: WidgetProps<T, F>) {
+  // Generating a unique field name to identify this set of radio buttons
+  const name = Math.random().toString();
+  const { enumOptions, enumDisabled, inline } = options;
+  // checked={checked} has been moved above name={name}, As mentioned in #349;
+  // this is a temporary fix for radio button rendering bug in React, facebook/react#7630.
+
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => onBlur(id, event.target.value),
+    [onBlur, id]
+  );
+
+  const handleFocus = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => onFocus(id, event.target.value),
+    [onFocus, id]
+  );
+
+  return (
+    <div
+      className={`flex field-radio-group ${
+        inline ? "flex-row gap-2" : "flex-col"
+      }`}
+      id={id}
+    >
+      {Array.isArray(enumOptions) &&
+        enumOptions.map((option, i) => {
+          const checked = option.value === value;
+          const itemDisabled =
+            enumDisabled && enumDisabled.indexOf(option.value) != -1;
+          const disabledCls =
+            disabled || itemDisabled || readonly ? "disabled" : "";
+
+          const handleChange = () => onChange(option.value);
+
+          const radio = (
+            <>
+              <input
+                type="radio"
+                className="radio radio-secondary"
+                id={`${id}_${i}`}
+                checked={checked}
+                name={id}
+                required={required}
+                value={option.value}
+                disabled={disabled || itemDisabled || readonly}
+                autoFocus={autofocus && i === 0}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                onFocus={handleFocus}
+              />
+              <span className="label-text">{option.label}</span>
+            </>
+          );
+
+          return (
+            <label
+              key={i}
+              className={`label justify-start gap-2 ${disabledCls}`}
+            >
+              {radio}
+            </label>
+          );
+        })}
+    </div>
+  );
+}
+
+export default RadioWidget;

package/src/widgets/RangeWidget.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import type { WidgetProps, GenericObjectType } from "@rjsf/utils";
+
+/** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
+ * in a div, with the value along side it.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function RangeWidget<T = any, F extends GenericObjectType = any>(
+  props: WidgetProps<T, F>
+) {
+  const {
+    value,
+    registry: {
+      templates: { BaseInputTemplate },
+    },
+  } = props;
+  return (
+    <div className="field-range-wrapper">
+      <BaseInputTemplate type="range" {...props} />
+      <span className="range-view">{value}</span>
+    </div>
+  );
+}

package/src/widgets/SelectWidget.tsx

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

package/src/widgets/TextWidget.tsx

@@ -0,0 +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} />;
+}

package/src/widgets/TextareaWidget.tsx

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

package/src/widgets/URLWidget.tsx

@@ -0,0 +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} />;
+}

package/src/widgets/UpDownWidget.tsx

@@ -0,0 +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} />;
+}

package/src/widgets/index.ts

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

package/tsconfig.json

@@ -0,0 +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" }]
+}

package/tsconfig.node.json

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

package/vite.config.ts

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