@@ -576,11 +587,9 @@ class Playground extends Component {
-
+ {stylesheetUrls.map(url => (
+
+ ))}
{theme === "antd" && (
, document.getElementById("app"));
diff --git a/packages/primereact/.gitignore b/packages/primereact/.gitignore
new file mode 100644
index 0000000000..489fbb01d1
--- /dev/null
+++ b/packages/primereact/.gitignore
@@ -0,0 +1 @@
+.rts2_**
diff --git a/packages/primereact/README.md b/packages/primereact/README.md
new file mode 100644
index 0000000000..f8c400bcef
--- /dev/null
+++ b/packages/primereact/README.md
@@ -0,0 +1,109 @@
+
+
+ = ({
+ id,
+ label,
+ value,
+ disabled,
+ required,
+ readonly,
+ options,
+ onChange,
+ onBlur,
+ onFocus,
+ schema,
+ rawErrors = [],
+ uiSchema,
+}) => {
+ const _onChange = ({ value }: ColorPickerChangeParams) =>
+ onChange(value === "" ? options.emptyValue : value);
+ const _onBlur = ({ target: { value } }: React.FocusEvent) =>
+ onBlur(id, value);
+ const _onFocus = ({
+ target: { value },
+ }: React.FocusEvent) => onFocus(id, value);
+ const labelValue = uiSchema["ui:title"] || schema.title || label;
+
+ return (
+ ) => {
+ if (description) {
+ return error.stack).join("\n")}
+ />
+);
+
+export default ErrorList;
diff --git a/packages/primereact/src/ErrorList/index.ts b/packages/primereact/src/ErrorList/index.ts
new file mode 100644
index 0000000000..79376ace11
--- /dev/null
+++ b/packages/primereact/src/ErrorList/index.ts
@@ -0,0 +1,2 @@
+export { default } from './ErrorList';
+export * from './ErrorList';
diff --git a/packages/primereact/src/FieldTemplate/FieldTemplate.tsx b/packages/primereact/src/FieldTemplate/FieldTemplate.tsx
new file mode 100644
index 0000000000..011025445d
--- /dev/null
+++ b/packages/primereact/src/FieldTemplate/FieldTemplate.tsx
@@ -0,0 +1,47 @@
+import { FieldTemplateProps } from "@rjsf/core";
+import cn from "clsx";
+import React from "react";
+
+const FieldTemplate = ({
+ id,
+ hidden,
+ children,
+ displayLabel,
+ rawErrors = [],
+ rawHelp,
+ rawDescription,
+}: FieldTemplateProps) => {
+ if (hidden) {
+ return <>{children};
+ }
+
+ return (
+ >
+ | FunctionComponent> = withTheme(Theme);
+
+export default Form;
diff --git a/packages/primereact/src/Form/index.ts b/packages/primereact/src/Form/index.ts
new file mode 100644
index 0000000000..dbca2de64e
--- /dev/null
+++ b/packages/primereact/src/Form/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./Form";
+export * from "./Form";
diff --git a/packages/primereact/src/IconButton/IconButton.tsx b/packages/primereact/src/IconButton/IconButton.tsx
new file mode 100644
index 0000000000..e9c740832a
--- /dev/null
+++ b/packages/primereact/src/IconButton/IconButton.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { Button } from "primereact/button";
+import { PrimeIcons } from "primereact/api";
+import cn from "clsx";
+
+const mappings = {
+ remove: ,
+ plus: ,
+ "arrow-up": ,
+ "arrow-down": ,
+};
+
+type IconButtonProps = {
+ icon: keyof typeof mappings;
+ className?: string;
+ tabIndex?: number;
+ style?: any;
+ disabled?: any;
+ onClick?: any;
+};
+
+const IconButton = (props: IconButtonProps) => {
+ const { icon, className, ...otherProps } = props;
+ return (
+
+ );
+};
+
+export default IconButton;
diff --git a/packages/primereact/src/IconButton/index.ts b/packages/primereact/src/IconButton/index.ts
new file mode 100644
index 0000000000..655ec4c488
--- /dev/null
+++ b/packages/primereact/src/IconButton/index.ts
@@ -0,0 +1,2 @@
+export { default } from './IconButton';
+export * from './IconButton';
diff --git a/packages/primereact/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/packages/primereact/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
new file mode 100644
index 0000000000..de89b355c5
--- /dev/null
+++ b/packages/primereact/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
@@ -0,0 +1,43 @@
+import { ObjectFieldTemplateProps } from "@rjsf/core";
+import React from "react";
+
+const ObjectFieldTemplate = ({
+ DescriptionField,
+ description,
+ TitleField,
+ title,
+ properties,
+ required,
+ uiSchema,
+ idSchema,
+}: ObjectFieldTemplateProps) => {
+ return (
+ <>
+ {(uiSchema["ui:title"] || title) && (
+ ) =>
+ onChange(value === "" ? options.emptyValue : value);
+ const _onBlur = ({ target: { value } }: React.FocusEvent) =>
+ onBlur(id, value);
+ const _onFocus = ({
+ target: { value },
+ }: React.FocusEvent) => onFocus(id, value);
+ const labelValue = uiSchema["ui:title"] || schema.title || label;
+
+ return (
+ ) =>
+ onChange(value === "" ? options.emptyValue : value);
+ const _onBlur = ({ target: { value } }: React.FocusEvent) =>
+ onBlur(id, value);
+ const _onFocus = ({
+ target: { value },
+ }: React.FocusEvent) => onFocus(id, value);
+ const inputType = (type || schema.type) === "string" ? "text" : `${type || schema.type}`
+ const labelValue = uiSchema["ui:title"] || schema.title || label;
+
+ return (
+ ) =>
+ onChange(value === "" ? options.emptyValue : value);
+ const _onBlur = ({
+ target: { value },
+ }: React.FocusEvent) => onBlur(id, value);
+ const _onFocus = ({
+ target: { value },
+ }: React.FocusEvent) => onFocus(id, value);
+ const labelValue = uiSchema["ui:title"] || schema.title || label;
+
+ return (
+ ) => (
+ ) =>
+ onBlur(id, value);
+ const _onFocus = ({
+ target: { value },
+ }: React.FocusEvent) => onFocus(id, value);
+ const labelValue = uiSchema["ui:title"] || schema.title || label;
+
+ return (
+ void 0}
+ disabled={false}
+ />
+ )
+ .toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+
+ test("disable", () => {
+ const tree = renderer
+ .create( = {}
+): WidgetProps {
+ return {
+ uiSchema: {},
+ schema: mockSchema,
+ required: true,
+ disabled: false,
+ readonly: true,
+ autofocus: true,
+ label: "Some simple label",
+ onChange: mockEventHandlers,
+ onBlur: mockEventHandlers,
+ onFocus: mockEventHandlers,
+ multiple: false,
+ rawErrors: [""],
+ value: "value",
+ options: {},
+ formContext: {},
+ id: "_id",
+ placeholder: "",
+ registry: {
+ fields: {},
+ widgets: { TextWidget },
+ formContext: {},
+ definitions: {},
+ rootSchema: {},
+ },
+ ...props,
+ };
+}
diff --git a/packages/primereact/tsconfig.json b/packages/primereact/tsconfig.json
new file mode 100644
index 0000000000..8d3b50e5bf
--- /dev/null
+++ b/packages/primereact/tsconfig.json
@@ -0,0 +1,32 @@
+{
+ "include": ["src", "types"],
+ "compilerOptions": {
+ "target": "es5",
+ "module": "esnext",
+ "lib": ["dom", "esnext"],
+ "importHelpers": true,
+ "declaration": true,
+ "sourceMap": true,
+ "rootDir": "./src",
+ "strict": true,
+ "noImplicitAny": true,
+ "strictNullChecks": true,
+ "strictFunctionTypes": true,
+ "strictPropertyInitialization": true,
+ "noImplicitThis": true,
+ "alwaysStrict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ "allowSyntheticDefaultImports": true,
+ "moduleResolution": "node",
+ "baseUrl": "./",
+ "paths": {
+ "*": ["src/*", "node_modules/*"]
+ },
+ "jsx": "react",
+ "esModuleInterop": true,
+ "allowJs": true
+ }
+}
+
+
+ 
+
+
+
@rjsf/primereact
+ +
+ PrimeReact theme, fields, and widgets for react-jsonschema-form.
+
+ Explore the docs »
+
+
+ View Playground
+ ·
+ Report Bug
+ ·
+ Request Feature
+
+
+ );
+};
+
+const DefaultFixedArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
+ return (
+
+ );
+};
+
+const DefaultNormalArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
+ return (
+ <>
+ {props.children}
+
+ {props.hasToolbar && (
+
+
+ {canMoveItems && (
+ <>
+
+ )}
+
+ {props.items && props.items.map(p => DefaultArrayItem(p))}
+
+ {props.canAdd && (
+
+
+ );
+};
+
+export default ArrayFieldTemplate;
diff --git a/packages/primereact/src/ArrayFieldTemplate/index.ts b/packages/primereact/src/ArrayFieldTemplate/index.ts
new file mode 100644
index 0000000000..ab908dec2c
--- /dev/null
+++ b/packages/primereact/src/ArrayFieldTemplate/index.ts
@@ -0,0 +1,2 @@
+export { default } from './ArrayFieldTemplate';
+export * from './ArrayFieldTemplate';
diff --git a/packages/primereact/src/CheckboxWidget/CheckboxWidget.tsx b/packages/primereact/src/CheckboxWidget/CheckboxWidget.tsx
new file mode 100644
index 0000000000..45db879923
--- /dev/null
+++ b/packages/primereact/src/CheckboxWidget/CheckboxWidget.tsx
@@ -0,0 +1,34 @@
+import { WidgetProps } from "@rjsf/core";
+import { Checkbox, CheckboxChangeParams } from "primereact/checkbox";
+import React from "react";
+
+const CheckboxWidget = (props: WidgetProps) => {
+ const {
+ id,
+ value,
+ required,
+ disabled,
+ readonly,
+ label,
+ schema,
+ onChange,
+ } = props;
+
+ const _onChange = ({ checked }: CheckboxChangeParams) => onChange(checked);
+
+ const desc = label || schema.description;
+ return (
+
+
+ );
+};
+
+export default CheckboxWidget;
diff --git a/packages/primereact/src/CheckboxWidget/index.ts b/packages/primereact/src/CheckboxWidget/index.ts
new file mode 100644
index 0000000000..b9e3c318ec
--- /dev/null
+++ b/packages/primereact/src/CheckboxWidget/index.ts
@@ -0,0 +1,2 @@
+export { default } from './CheckboxWidget';
+export * from './CheckboxWidget';
diff --git a/packages/primereact/src/CheckboxesWidget/CheckboxesWidget.tsx b/packages/primereact/src/CheckboxesWidget/CheckboxesWidget.tsx
new file mode 100644
index 0000000000..68c2897cf1
--- /dev/null
+++ b/packages/primereact/src/CheckboxesWidget/CheckboxesWidget.tsx
@@ -0,0 +1,72 @@
+import { WidgetProps } from "@rjsf/core";
+import { Checkbox, CheckboxChangeParams } from "primereact/checkbox";
+import React from "react";
+import cn from "clsx";
+
+const selectValue = (value: any, selected: any, all: any) => {
+ const at = all.indexOf(value);
+ const updated = selected.slice(0, at).concat(value, selected.slice(at));
+
+ // As inserting values at predefined index positions doesn't work with empty
+ // arrays, we need to reorder the updated selection to match the initial order
+ return updated.sort((a: any, b: any) => all.indexOf(a) > all.indexOf(b));
+};
+
+const deselectValue = (value: any, selected: any) => {
+ return selected.filter((v: any) => v !== value);
+};
+
+const CheckboxesWidget = ({
+ schema,
+ label,
+ id,
+ disabled,
+ options,
+ value,
+ readonly,
+ required,
+ onChange,
+}: WidgetProps) => {
+ const { enumOptions, enumDisabled, inline } = options;
+
+ const _onChange = (option: any) => ({ checked }: CheckboxChangeParams) => {
+ const all = (enumOptions as any).map(({ value }: any) => value);
+ if (checked) {
+ onChange(selectValue(option.value, value, all));
+ } else {
+ onChange(deselectValue(option.value, value));
+ }
+ };
+ const labelValue = label || schema.title;
+
+ return (
+
+ {labelValue && (
+
+ )}
+
+ );
+};
+
+export default CheckboxesWidget;
diff --git a/packages/primereact/src/CheckboxesWidget/index.ts b/packages/primereact/src/CheckboxesWidget/index.ts
new file mode 100644
index 0000000000..97152004fa
--- /dev/null
+++ b/packages/primereact/src/CheckboxesWidget/index.ts
@@ -0,0 +1,2 @@
+export { default } from './CheckboxesWidget';
+export * from './CheckboxesWidget';
diff --git a/packages/primereact/src/ColorWidget/ColorWidget.tsx b/packages/primereact/src/ColorWidget/ColorWidget.tsx
new file mode 100644
index 0000000000..de859d0afb
--- /dev/null
+++ b/packages/primereact/src/ColorWidget/ColorWidget.tsx
@@ -0,0 +1,52 @@
+import React, { FunctionComponent } from "react";
+import { WidgetProps } from "@rjsf/core";
+import { ColorPicker, ColorPickerChangeParams } from "primereact/colorpicker";
+import cn from "clsx";
+
+const ColorWidget: FunctionComponent
+ {(enumOptions as any).map((option: any, index: number) => {
+ const checked = Array.isArray(value) ? value.includes(option.value) : value === option.value;
+ const itemDisabled = Array.isArray(enumDisabled) && (enumDisabled as string[]).includes(option.value);
+
+ return (
+
+
+
+ );
+ })}
+
+ {labelValue && (
+
+ )}
+
+ );
+};
+
+export default ColorWidget;
diff --git a/packages/primereact/src/ColorWidget/index.ts b/packages/primereact/src/ColorWidget/index.ts
new file mode 100644
index 0000000000..95e1f017ed
--- /dev/null
+++ b/packages/primereact/src/ColorWidget/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./ColorWidget";
+export * from "./ColorWidget";
diff --git a/packages/primereact/src/DateTimeWidget/DateTimeWidget.tsx b/packages/primereact/src/DateTimeWidget/DateTimeWidget.tsx
new file mode 100644
index 0000000000..086adf23e8
--- /dev/null
+++ b/packages/primereact/src/DateTimeWidget/DateTimeWidget.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { utils, WidgetProps } from "@rjsf/core";
+
+const { localToUTC, utcToLocal } = utils;
+
+const DateTimeWidget = (props: WidgetProps) => {
+ const { registry } = props;
+ const { TextWidget } = registry.widgets;
+ const value = utcToLocal(props.value);
+ const onChange = (value: any) => {
+ props.onChange(localToUTC(value));
+ };
+
+ return (
+ {description}
;
+ }
+
+ return null;
+};
+
+export default DescriptionField;
diff --git a/packages/primereact/src/DescriptionField/index.ts b/packages/primereact/src/DescriptionField/index.ts
new file mode 100644
index 0000000000..401540d99b
--- /dev/null
+++ b/packages/primereact/src/DescriptionField/index.ts
@@ -0,0 +1,2 @@
+export { default } from './DescriptionField';
+export * from './DescriptionField';
diff --git a/packages/primereact/src/EmailWidget/EmailWidget.tsx b/packages/primereact/src/EmailWidget/EmailWidget.tsx
new file mode 100644
index 0000000000..372a6b3f93
--- /dev/null
+++ b/packages/primereact/src/EmailWidget/EmailWidget.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { WidgetProps } from '@rjsf/core';
+
+const EmailWidget = (props: WidgetProps) => {
+ const { registry } = props;
+ const { TextWidget } = registry.widgets;
+ return
+ {children}
+ {displayLabel && rawDescription && (
+
+ );
+};
+
+export default FieldTemplate;
diff --git a/packages/primereact/src/FieldTemplate/index.ts b/packages/primereact/src/FieldTemplate/index.ts
new file mode 100644
index 0000000000..6f7dc3861c
--- /dev/null
+++ b/packages/primereact/src/FieldTemplate/index.ts
@@ -0,0 +1,2 @@
+export { default } from './FieldTemplate';
+export * from './FieldTemplate';
diff --git a/packages/primereact/src/Fields/Fields.ts b/packages/primereact/src/Fields/Fields.ts
new file mode 100644
index 0000000000..a1871ac4a8
--- /dev/null
+++ b/packages/primereact/src/Fields/Fields.ts
@@ -0,0 +1,7 @@
+import DescriptionField from '../DescriptionField/DescriptionField';
+import TitleField from '../TitleField/TitleField';
+
+export default {
+ DescriptionField,
+ TitleField,
+};
diff --git a/packages/primereact/src/Fields/index.ts b/packages/primereact/src/Fields/index.ts
new file mode 100644
index 0000000000..c65ffe072d
--- /dev/null
+++ b/packages/primereact/src/Fields/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Fields';
+export * from './Fields';
diff --git a/packages/primereact/src/FileWidget/FileWidget.tsx b/packages/primereact/src/FileWidget/FileWidget.tsx
new file mode 100644
index 0000000000..8ec8ba28fd
--- /dev/null
+++ b/packages/primereact/src/FileWidget/FileWidget.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { WidgetProps } from '@rjsf/core';
+
+const FileWidget = (props: WidgetProps) => {
+ const { registry } = props;
+ const { TextWidget } = registry.widgets;
+ return 0 ? "text-color-danger" : "text-color-muted")}>
+ {rawDescription}
+
+ )}
+ {rawErrors.length > 0 && (
+ -
+ {rawErrors.map((error: string) => (
+
- + {error} + + ))} +
0 ? "text-color-danger" : "text-color-muted")}
+ >
+ {rawHelp}
+
+ )}
+
+ {properties.map((element: any, index: number) => (
+
+
+ );
+};
+
+export default ObjectFieldTemplate;
diff --git a/packages/primereact/src/ObjectFieldTemplate/index.ts b/packages/primereact/src/ObjectFieldTemplate/index.ts
new file mode 100644
index 0000000000..77c68a9a40
--- /dev/null
+++ b/packages/primereact/src/ObjectFieldTemplate/index.ts
@@ -0,0 +1,2 @@
+export { default } from './ObjectFieldTemplate';
+export * from './ObjectFieldTemplate';
diff --git a/packages/primereact/src/PasswordWidget/PasswordWidget.tsx b/packages/primereact/src/PasswordWidget/PasswordWidget.tsx
new file mode 100644
index 0000000000..c32f5e98ba
--- /dev/null
+++ b/packages/primereact/src/PasswordWidget/PasswordWidget.tsx
@@ -0,0 +1,57 @@
+import { WidgetProps } from "@rjsf/core";
+import { Password } from "primereact/password";
+import React from "react";
+import cn from "clsx";
+
+const PasswordWidget = ({
+ id,
+ required,
+ readonly,
+ disabled,
+ value,
+ label,
+ onFocus,
+ onBlur,
+ onChange,
+ options,
+ autofocus,
+ schema,
+ uiSchema,
+ rawErrors = [],
+}: WidgetProps) => {
+ const _onChange = ({
+ target: { value },
+ }: React.ChangeEvent
+ {element.content}
+
+ ))}
+
+ {labelValue && (
+
+ )}
+ 0 ? "p-invalid" : undefined}
+ required={required}
+ disabled={disabled}
+ readOnly={readonly}
+ value={value ? value : ""}
+ onChange={_onChange}
+ onFocus={_onFocus}
+ onBlur={_onBlur}
+ />
+
+ );
+};
+
+export default PasswordWidget;
diff --git a/packages/primereact/src/PasswordWidget/index.ts b/packages/primereact/src/PasswordWidget/index.ts
new file mode 100644
index 0000000000..84fd5e9026
--- /dev/null
+++ b/packages/primereact/src/PasswordWidget/index.ts
@@ -0,0 +1,2 @@
+export { default } from './PasswordWidget';
+export * from './PasswordWidget';
diff --git a/packages/primereact/src/RadioWidget/RadioWidget.tsx b/packages/primereact/src/RadioWidget/RadioWidget.tsx
new file mode 100644
index 0000000000..a9d15cc50b
--- /dev/null
+++ b/packages/primereact/src/RadioWidget/RadioWidget.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import { WidgetProps } from "@rjsf/core";
+import { RadioButton, RadioButtonChangeParams } from "primereact/radiobutton";
+import cn from "clsx";
+
+const RadioWidget = ({
+ id,
+ schema,
+ options,
+ value,
+ required,
+ disabled,
+ readonly,
+ label,
+ onChange,
+ uiSchema,
+}: WidgetProps) => {
+ const { enumOptions, enumDisabled } = options;
+
+ const _onChange = ({ value }: RadioButtonChangeParams) =>
+ onChange(schema.type == "boolean" ? value !== "false" : value);
+
+ const inline = Boolean(options && options.inline);
+ const labelValue = uiSchema["ui:title"] || schema.title || label;
+
+ return (
+
+ {labelValue && (
+
+ )}
+
+ );
+};
+
+export default RadioWidget;
diff --git a/packages/primereact/src/RadioWidget/index.ts b/packages/primereact/src/RadioWidget/index.ts
new file mode 100644
index 0000000000..10292dc565
--- /dev/null
+++ b/packages/primereact/src/RadioWidget/index.ts
@@ -0,0 +1,2 @@
+export { default } from './RadioWidget';
+export * from './RadioWidget';
diff --git a/packages/primereact/src/RangeWidget/RangeWidget.tsx b/packages/primereact/src/RangeWidget/RangeWidget.tsx
new file mode 100644
index 0000000000..d37127c162
--- /dev/null
+++ b/packages/primereact/src/RangeWidget/RangeWidget.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { utils, WidgetProps } from "@rjsf/core";
+import { Slider, SliderChangeParams } from "primereact/slider";
+
+const { rangeSpec } = utils;
+
+const RangeWidget = ({
+ value,
+ readonly,
+ disabled,
+ schema,
+ onChange,
+ required,
+ label,
+ id,
+ uiSchema,
+}: WidgetProps) => {
+ const sliderProps = { value, label, id, ...rangeSpec(schema) };
+
+ const _onChange = ({ value }: SliderChangeParams) =>
+ onChange(value as number);
+ const labelValue = uiSchema["ui:title"] || schema.title || label;
+
+ return (
+
+ {(enumOptions as any[]).map((option, i) => {
+ const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
+ const checked = option.value == value;
+
+ return (
+
+
+
+ );
+ })}
+
+ {labelValue && (
+
+ )}
+
+ );
+};
+
+export default RangeWidget;
diff --git a/packages/primereact/src/RangeWidget/index.ts b/packages/primereact/src/RangeWidget/index.ts
new file mode 100644
index 0000000000..d8c49226c6
--- /dev/null
+++ b/packages/primereact/src/RangeWidget/index.ts
@@ -0,0 +1,2 @@
+export { default } from './RangeWidget';
+export * from './RangeWidget';
diff --git a/packages/primereact/src/SelectWidget/SelectWidget.tsx b/packages/primereact/src/SelectWidget/SelectWidget.tsx
new file mode 100644
index 0000000000..73b00b73f6
--- /dev/null
+++ b/packages/primereact/src/SelectWidget/SelectWidget.tsx
@@ -0,0 +1,149 @@
+import { utils, WidgetProps } from "@rjsf/core";
+import cn from "clsx";
+import { Dropdown, DropdownChangeParams } from "primereact/dropdown";
+import React from "react";
+import { MultiSelect, MultiSelectChangeParams } from "primereact/multiselect";
+
+const { asNumber, guessType } = utils;
+
+const nums = new Set(["number", "integer"]);
+
+/**
+ * This is a silly limitation in the DOM where option change event values are
+ * always retrieved as strings.
+ */
+const processValue = (schema: any, value: any): number | number[] | boolean | boolean[] | undefined | unknown => {
+ // "enum" is a reserved word, so only "type" and "items" can be destructured
+ const { type, items } = schema;
+ if (value === "") {
+ return undefined;
+ }
+ if (type === "array" && items && nums.has(items.type)) {
+ return value.map(asNumber);
+ }
+ if (type === "boolean") {
+ return value === "true";
+ }
+ if (type === "number") {
+ return asNumber(value);
+ }
+
+ // If type is undefined, but an enum is present, try and infer the type from
+ // the enum values
+ if (schema.enum) {
+ if (schema.enum.every((x: any) => guessType(x) === "number")) {
+ return asNumber(value);
+ }
+ if (schema.enum.every((x: any) => guessType(x) === "boolean")) {
+ return value === "true";
+ }
+ }
+
+ return value;
+};
+
+const SelectWidget = ({
+ schema,
+ id,
+ options,
+ label,
+ required,
+ disabled,
+ value,
+ multiple,
+ autofocus,
+ onChange,
+ onBlur,
+ onFocus,
+ placeholder,
+ rawErrors = [],
+}: WidgetProps) => {
+ const { enumOptions, enumDisabled } = options;
+
+ const emptyValue = multiple ? [] : "";
+
+ type Option = { label: string; value: any; disabled: boolean };
+ const optionsList = (enumOptions as any[]).map(({ label, value }: { label: string; value: any }): Option => {
+ const disabled = Array.isArray(enumDisabled) && enumDisabled.includes(value);
+ return {
+ label,
+ value,
+ disabled,
+ };
+ });
+
+ const getValue = (event: MultiSelectChangeParams | DropdownChangeParams) => {
+ if (multiple) {
+ const value: any[] = Array.isArray((event as MultiSelectChangeParams).value) ?
+ (event as MultiSelectChangeParams).value :
+ [(event as MultiSelectChangeParams).value];
+ return value.map((o: any) => o.value);
+ }
+ return (event as DropdownChangeParams).value;
+ }
+ const labelValue = label || schema.title;
+
+ return (
+
+ {labelValue && (
+
+ )}
+ {multiple ? (
+ 0 ? "is-invalid" : ""}
+ onBlur={
+ onBlur &&
+ (() => {
+ onBlur(id, processValue(schema, value));
+ })
+ }
+ onFocus={
+ onFocus &&
+ (() => {
+ onFocus(id, processValue(schema, value));
+ })
+ }
+ onChange={(event) => {
+ onChange(processValue(schema, getValue(event)));
+ }}
+ />
+ ) : (
+ 0 ? "is-invalid" : ""}
+ onBlur={
+ onBlur &&
+ (() => {
+ onBlur(id, processValue(schema, value));
+ })
+ }
+ onFocus={
+ onFocus &&
+ (() => {
+ onFocus(id, processValue(schema, value));
+ })
+ }
+ onChange={(event) => {
+ onChange(processValue(schema, getValue(event)));
+ }}
+ />
+ )}
+
+ );
+};
+
+export default SelectWidget;
diff --git a/packages/primereact/src/SelectWidget/index.ts b/packages/primereact/src/SelectWidget/index.ts
new file mode 100644
index 0000000000..e37ea725b8
--- /dev/null
+++ b/packages/primereact/src/SelectWidget/index.ts
@@ -0,0 +1,2 @@
+export { default } from './SelectWidget';
+export * from './SelectWidget';
diff --git a/packages/primereact/src/TextWidget/TextWidget.tsx b/packages/primereact/src/TextWidget/TextWidget.tsx
new file mode 100644
index 0000000000..022ebe2a53
--- /dev/null
+++ b/packages/primereact/src/TextWidget/TextWidget.tsx
@@ -0,0 +1,72 @@
+import { WidgetProps } from "@rjsf/core";
+import { InputText } from "primereact/inputtext";
+import React from "react";
+import cn from "clsx";
+
+const TextWidget = ({
+ id,
+ placeholder,
+ required,
+ readonly,
+ disabled,
+ type,
+ label,
+ value,
+ onChange,
+ onBlur,
+ onFocus,
+ autofocus,
+ options,
+ schema,
+ uiSchema,
+ rawErrors = [],
+}: WidgetProps) => {
+ const _onChange = ({
+ target: { value },
+ }: React.ChangeEvent
+ {labelValue && (
+
+ )}
+ 0 ? "p-invalid" : "")}
+ list={schema.examples ? `examples_${id}` : undefined}
+ type={inputType}
+ value={value || value === 0 ? value : ""}
+ onChange={_onChange}
+ onBlur={_onBlur}
+ onFocus={_onFocus}
+ />
+ {schema.examples ? (
+
+ ) : null}
+
+ );
+};
+
+export default TextWidget;
diff --git a/packages/primereact/src/TextWidget/index.ts b/packages/primereact/src/TextWidget/index.ts
new file mode 100644
index 0000000000..fc1bc51a03
--- /dev/null
+++ b/packages/primereact/src/TextWidget/index.ts
@@ -0,0 +1,2 @@
+export { default } from './TextWidget';
+export * from './TextWidget';
diff --git a/packages/primereact/src/TextareaWidget/TextareaWidget.tsx b/packages/primereact/src/TextareaWidget/TextareaWidget.tsx
new file mode 100644
index 0000000000..8ab2516340
--- /dev/null
+++ b/packages/primereact/src/TextareaWidget/TextareaWidget.tsx
@@ -0,0 +1,66 @@
+import { WidgetProps } from "@rjsf/core";
+import React from "react";
+import { InputTextarea } from "primereact/inputtextarea";
+import cn from "clsx";
+
+type CustomWidgetProps = WidgetProps & {
+ options: any;
+};
+
+const TextareaWidget = ({
+ id,
+ placeholder,
+ value,
+ required,
+ disabled,
+ autofocus,
+ label,
+ readonly,
+ onBlur,
+ onFocus,
+ onChange,
+ options,
+ schema,
+ rawErrors = [],
+ uiSchema,
+}: CustomWidgetProps) => {
+ const _onChange = ({
+ target: { value },
+ }: React.ChangeEvent
+ {labelValue && (
+
+ )}
+ 0 ? "p-invalid" : "")}
+ placeholder={placeholder}
+ disabled={disabled}
+ readOnly={readonly}
+ value={value}
+ required={required}
+ autoFocus={autofocus}
+ rows={options.rows || 5}
+ autoResize
+ onChange={_onChange}
+ onBlur={_onBlur}
+ onFocus={_onFocus}
+ />
+
+ );
+};
+
+export default TextareaWidget;
diff --git a/packages/primereact/src/TextareaWidget/index.ts b/packages/primereact/src/TextareaWidget/index.ts
new file mode 100644
index 0000000000..20e6d8e26b
--- /dev/null
+++ b/packages/primereact/src/TextareaWidget/index.ts
@@ -0,0 +1,2 @@
+export { default } from './TextareaWidget';
+export * from './TextareaWidget';
diff --git a/packages/primereact/src/Theme/Theme.tsx b/packages/primereact/src/Theme/Theme.tsx
new file mode 100644
index 0000000000..0bf80f65f1
--- /dev/null
+++ b/packages/primereact/src/Theme/Theme.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+import { Button } from "primereact/button";
+
+import ArrayFieldTemplate from "../ArrayFieldTemplate";
+import ErrorList from "../ErrorList";
+import Fields from "../Fields";
+import FieldTemplate from "../FieldTemplate";
+import ObjectFieldTemplate from "../ObjectFieldTemplate";
+import Widgets from "../Widgets";
+
+import { ThemeProps } from "@rjsf/core";
+import { utils } from "@rjsf/core";
+
+const { getDefaultRegistry } = utils;
+
+const { fields, widgets } = getDefaultRegistry();
+
+const DefaultChildren = (
+
+);
+
+const Theme: ThemeProps = {
+ children: DefaultChildren,
+ ArrayFieldTemplate,
+ fields: { ...fields, ...Fields },
+ FieldTemplate,
+ ObjectFieldTemplate,
+ ErrorList,
+ widgets: { ...widgets, ...Widgets },
+};
+
+export default Theme;
diff --git a/packages/primereact/src/Theme/index.ts b/packages/primereact/src/Theme/index.ts
new file mode 100644
index 0000000000..6dfd7fa6e1
--- /dev/null
+++ b/packages/primereact/src/Theme/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Theme';
+export * from './Theme';
diff --git a/packages/primereact/src/TitleField/TitleField.tsx b/packages/primereact/src/TitleField/TitleField.tsx
new file mode 100644
index 0000000000..070fa94fc6
--- /dev/null
+++ b/packages/primereact/src/TitleField/TitleField.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { FieldProps } from "@rjsf/core";
+
+const TitleField = ({ title, uiSchema }: Pick
+
+);
+
+export default TitleField;
diff --git a/packages/primereact/src/TitleField/index.ts b/packages/primereact/src/TitleField/index.ts
new file mode 100644
index 0000000000..cfa479d034
--- /dev/null
+++ b/packages/primereact/src/TitleField/index.ts
@@ -0,0 +1,2 @@
+export { default } from './TitleField';
+export * from './TitleField';
diff --git a/packages/primereact/src/URLWidget/URLWidget.tsx b/packages/primereact/src/URLWidget/URLWidget.tsx
new file mode 100644
index 0000000000..f2ede6bd7d
--- /dev/null
+++ b/packages/primereact/src/URLWidget/URLWidget.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { WidgetProps } from '@rjsf/core';
+
+const URLWidget = (props: WidgetProps) => {
+ const { registry } = props;
+ const { TextWidget } = registry.widgets;
+ return {(uiSchema && uiSchema["ui:title"]) || title}
+
+ {labelValue && (
+
+ )}
+
+ );
+};
+
+export default UpDownWidget;
diff --git a/packages/primereact/src/UpDownWidget/index.ts b/packages/primereact/src/UpDownWidget/index.ts
new file mode 100644
index 0000000000..2e2ae55279
--- /dev/null
+++ b/packages/primereact/src/UpDownWidget/index.ts
@@ -0,0 +1,2 @@
+export { default } from './UpDownWidget';
+export * from './UpDownWidget';
diff --git a/packages/primereact/src/Widgets/Widgets.ts b/packages/primereact/src/Widgets/Widgets.ts
new file mode 100644
index 0000000000..3f6876bbff
--- /dev/null
+++ b/packages/primereact/src/Widgets/Widgets.ts
@@ -0,0 +1,33 @@
+import CheckboxWidget from "../CheckboxWidget/CheckboxWidget";
+import CheckboxesWidget from "../CheckboxesWidget/CheckboxesWidget";
+import ColorWidget from "../ColorWidget/ColorWidget";
+import DateWidget from "../DateWidget/DateWidget";
+import DateTimeWidget from "../DateTimeWidget/DateTimeWidget";
+import EmailWidget from "../EmailWidget/EmailWidget";
+import PasswordWidget from "../PasswordWidget/PasswordWidget";
+import RadioWidget from "../RadioWidget/RadioWidget";
+import RangeWidget from "../RangeWidget/RangeWidget";
+import SelectWidget from "../SelectWidget/SelectWidget";
+import TextareaWidget from "../TextareaWidget/TextareaWidget";
+import TextWidget from "../TextWidget/TextWidget";
+import UpDownWidget from "../UpDownWidget/UpDownWidget";
+import URLWidget from "../URLWidget/URLWidget";
+import FileWidget from "../FileWidget/FileWidget";
+
+export default {
+ CheckboxWidget,
+ CheckboxesWidget,
+ ColorWidget,
+ DateWidget,
+ DateTimeWidget,
+ EmailWidget,
+ PasswordWidget,
+ RadioWidget,
+ RangeWidget,
+ SelectWidget,
+ TextareaWidget,
+ TextWidget,
+ UpDownWidget,
+ URLWidget,
+ FileWidget
+};
diff --git a/packages/primereact/src/Widgets/index.ts b/packages/primereact/src/Widgets/index.ts
new file mode 100644
index 0000000000..de857bf557
--- /dev/null
+++ b/packages/primereact/src/Widgets/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Widgets';
+export * from './Widgets';
diff --git a/packages/primereact/src/index.ts b/packages/primereact/src/index.ts
new file mode 100644
index 0000000000..73b55acbf6
--- /dev/null
+++ b/packages/primereact/src/index.ts
@@ -0,0 +1,10 @@
+import Form from "./Form/Form";
+
+export { default as Fields } from "./Fields";
+export { default as FieldTemplate } from "./FieldTemplate";
+export { default as Form } from "./Form";
+export { default as ObjectFieldTemplate } from "./ObjectFieldTemplate";
+export { default as Theme } from "./Theme";
+export { default as Widgets } from "./Widgets";
+
+export default Form;
diff --git a/packages/primereact/test/Array.test.tsx b/packages/primereact/test/Array.test.tsx
new file mode 100644
index 0000000000..c21977bdba
--- /dev/null
+++ b/packages/primereact/test/Array.test.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import Form from "../src/index";
+import { JSONSchema7 } from "json-schema";
+import renderer from "react-test-renderer";
+
+describe("array fields", () => {
+ test("array", () => {
+ const schema: JSONSchema7 = {
+ type: "array",
+ items: {
+ type: "string"
+ }
+ };
+ const tree = renderer
+ .create()
+ .toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+ test("fixed array", () => {
+ const schema: JSONSchema7 = {
+ type: "array",
+ items: [
+ {
+ type: "string"
+ },
+ {
+ type: "number"
+ }
+ ]
+ };
+ const tree = renderer
+ .create()
+ .toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+ test("checkboxes", () => {
+ const schema: JSONSchema7 = {
+ type: "array",
+ items: {
+ type: "string",
+ enum: ["a", "b", "c"]
+ },
+ uniqueItems: true
+ };
+ const tree = renderer
+ .create()
+ .toJSON();
+ expect(tree).toMatchSnapshot();
+ });
+});
\ No newline at end of file
diff --git a/packages/primereact/test/ArrayFieldTemplate.test.tsx b/packages/primereact/test/ArrayFieldTemplate.test.tsx
new file mode 100644
index 0000000000..6011c0d800
--- /dev/null
+++ b/packages/primereact/test/ArrayFieldTemplate.test.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import ArrayFieldTemplate from "../src/ArrayFieldTemplate";
+import DescriptionField from "../src/DescriptionField";
+import renderer from "react-test-renderer";
+import TitleField from "../src/TitleField";
+import { mockSchema } from "./helpers/createMocks";
+import { utils } from "@rjsf/core";
+const { getDefaultRegistry } = utils;
+
+describe("ArrayFieldTemplate", () => {
+ test("simple", () => {
+ const tree = renderer
+ .create(
+
+
+
+`;
diff --git a/packages/primereact/test/__snapshots__/CheckboxWidget.test.tsx.snap b/packages/primereact/test/__snapshots__/CheckboxWidget.test.tsx.snap
new file mode 100644
index 0000000000..eb36faf6ed
--- /dev/null
+++ b/packages/primereact/test/__snapshots__/CheckboxWidget.test.tsx.snap
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CheckboxWidget simple 1`] = `
+
+
+`;
diff --git a/packages/primereact/test/__snapshots__/CheckboxesWidget.test.tsx.snap b/packages/primereact/test/__snapshots__/CheckboxesWidget.test.tsx.snap
new file mode 100644
index 0000000000..8dfbe07420
--- /dev/null
+++ b/packages/primereact/test/__snapshots__/CheckboxesWidget.test.tsx.snap
@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CheckboxesWidget inline 1`] = `
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`CheckboxesWidget simple 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/primereact/test/__snapshots__/ColorWidget.test.tsx.snap b/packages/primereact/test/__snapshots__/ColorWidget.test.tsx.snap
new file mode 100644
index 0000000000..323e85a557
--- /dev/null
+++ b/packages/primereact/test/__snapshots__/ColorWidget.test.tsx.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorWidget simple 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/primereact/test/__snapshots__/DateTimeWidget.test.tsx.snap b/packages/primereact/test/__snapshots__/DateTimeWidget.test.tsx.snap
new file mode 100644
index 0000000000..f3465c7ea9
--- /dev/null
+++ b/packages/primereact/test/__snapshots__/DateTimeWidget.test.tsx.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DateTimeWidget simple 1`] = `
+
+
+
+
+
+
+
+`;
diff --git a/packages/primereact/test/__snapshots__/DateWidget.test.tsx.snap b/packages/primereact/test/__snapshots__/DateWidget.test.tsx.snap
new file mode 100644
index 0000000000..16fe7e4be4
--- /dev/null
+++ b/packages/primereact/test/__snapshots__/DateWidget.test.tsx.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DateWidget simple 1`] = `
+
+
+
+
+`;
diff --git a/packages/primereact/test/__snapshots__/DescriptionField.test.tsx.snap b/packages/primereact/test/__snapshots__/DescriptionField.test.tsx.snap
new file mode 100644
index 0000000000..911fa6e0bf
--- /dev/null
+++ b/packages/primereact/test/__snapshots__/DescriptionField.test.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DescriptionField should return h2 element when description is being passed as props 1`] = `
+
+ SOME THING
+
+`;
diff --git a/packages/primereact/test/__snapshots__/Form.test.tsx.snap b/packages/primereact/test/__snapshots__/Form.test.tsx.snap
new file mode 100644
index 0000000000..7697f01c31
--- /dev/null
+++ b/packages/primereact/test/__snapshots__/Form.test.tsx.snap
@@ -0,0 +1,1200 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`single fields checkbox field 1`] = `
+
+`;
+
+exports[`single fields checkbox field 2`] = `
+
+`;
+
+exports[`single fields checkboxes field 1`] = `
+
+`;
+
+exports[`single fields format color 1`] = `
+
+`;
+
+exports[`single fields format date 1`] = `
+
+`;
+
+exports[`single fields format datetime 1`] = `
+
+`;
+
+exports[`single fields hidden field 1`] = `
+
+`;
+
+exports[`single fields null field 1`] = `
+
+`;
+
+exports[`single fields number field 0 1`] = `
+
+`;
+
+exports[`single fields number field 1`] = `
+
+`;
+
+exports[`single fields password field 1`] = `
+
+`;
+
+exports[`single fields radio field 1`] = `
+
+`;
+
+exports[`single fields select field 1`] = `
+
+`;
+
+exports[`single fields slider field 1`] = `
+
+`;
+
+exports[`single fields string field format data-url 1`] = `
+
+`;
+
+exports[`single fields string field format email 1`] = `
+
+`;
+
+exports[`single fields string field format uri 1`] = `
+
+`;
+
+exports[`single fields string field regular 1`] = `
+
+`;
+
+exports[`single fields string field with placeholder 1`] = `
+
+`;
+
+exports[`single fields textarea field 1`] = `
+
+`;
+
+exports[`single fields title field 1`] = `
+
+`;
+
+exports[`single fields unsupported field 1`] = `
+
+`;
diff --git a/packages/primereact/test/__snapshots__/IconButton.test.tsx.snap b/packages/primereact/test/__snapshots__/IconButton.test.tsx.snap
new file mode 100644
index 0000000000..ed8f4d7a76
--- /dev/null
+++ b/packages/primereact/test/__snapshots__/IconButton.test.tsx.snap
@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IconButton disable 1`] = `
+
+`;
+
+exports[`IconButton simple 1`] = `
+
+`;
diff --git a/packages/primereact/test/__snapshots__/Object.test.tsx.snap b/packages/primereact/test/__snapshots__/Object.test.tsx.snap
new file mode 100644
index 0000000000..e767cef236
--- /dev/null
+++ b/packages/primereact/test/__snapshots__/Object.test.tsx.snap
@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`object fields object 1`] = `
+
+`;
diff --git a/packages/primereact/test/__snapshots__/TextAreaWidget.test.tsx.snap b/packages/primereact/test/__snapshots__/TextAreaWidget.test.tsx.snap
new file mode 100644
index 0000000000..a6b0b8437b
--- /dev/null
+++ b/packages/primereact/test/__snapshots__/TextAreaWidget.test.tsx.snap
@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextareaWidget simple with errors 1`] = `
+
+
+
+
+`;
+
+exports[`TextareaWidget simple without errors 1`] = `
+
+
+
+
+`;
+
+exports[`TextareaWidget simple without required 1`] = `
+
+
+
+
+`;
diff --git a/packages/primereact/test/__snapshots__/TextWidget.test.tsx.snap b/packages/primereact/test/__snapshots__/TextWidget.test.tsx.snap
new file mode 100644
index 0000000000..6733df834b
--- /dev/null
+++ b/packages/primereact/test/__snapshots__/TextWidget.test.tsx.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextWidget simple 1`] = `
+
+
+
+
+`;
diff --git a/packages/primereact/test/__snapshots__/TitleField.test.tsx.snap b/packages/primereact/test/__snapshots__/TitleField.test.tsx.snap
new file mode 100644
index 0000000000..2c39302117
--- /dev/null
+++ b/packages/primereact/test/__snapshots__/TitleField.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TitleField simple 1`] = `
+
+
+`;
diff --git a/packages/primereact/test/__snapshots__/UpDownWidget.test.tsx.snap b/packages/primereact/test/__snapshots__/UpDownWidget.test.tsx.snap
new file mode 100644
index 0000000000..7c4769beec
--- /dev/null
+++ b/packages/primereact/test/__snapshots__/UpDownWidget.test.tsx.snap
@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UpDownWidget renders 0 as 0 and not '' 1`] = `
++ Hello +
+
+
+
+
+
+
+`;
diff --git a/packages/primereact/test/helpers/createMocks.ts b/packages/primereact/test/helpers/createMocks.ts
new file mode 100644
index 0000000000..329f676141
--- /dev/null
+++ b/packages/primereact/test/helpers/createMocks.ts
@@ -0,0 +1,45 @@
+import { WidgetProps } from "@rjsf/core";
+import { JSONSchema7 } from "json-schema";
+
+import TextWidget from "../../src/TextWidget/TextWidget";
+
+export const mockSchema: JSONSchema7 = {
+ type: "array",
+ items: {
+ type: "string",
+ },
+};
+
+export const mockEventHandlers = (): void => void 0;
+
+export function makeWidgetMockProps(
+ props: Partial