From 7a52a918f297295c1b626cb19091bc8eb9abdddc Mon Sep 17 00:00:00 2001
From: suvarnakale <suvarna.kale@tekditechnologies.com>
Date: Tue, 9 Jul 2024 11:52:05 +0530
Subject: [PATCH] Issue #PS-1247 feat: Integrated RJSF library

---
 package.json                   |  8 ++++++-
 src/components/DynamicForm.tsx | 42 ++++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/components/DynamicForm.tsx

diff --git a/package.json b/package.json
index 6aee4809..fdae2c72 100644
--- a/package.json
+++ b/package.json
@@ -23,9 +23,13 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.15",
-    "@mui/material": "^5.15.15",
+    "@mui/material": "^5.15.21",
     "@project-sunbird/client-services": "^7.0.6",
     "@project-sunbird/telemetry-sdk": "^1.3.0",
+    "@rjsf/core": "^5.18.5",
+    "@rjsf/material-ui": "^5.18.5",
+    "@rjsf/utils": "^5.18.5",
+    "@rjsf/validator-ajv8": "^5.18.5",
     "@tanstack/react-query": "^5.45.1",
     "axios": "^1.6.8",
     "date-fns": "^3.6.0",
@@ -42,7 +46,9 @@
     "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18",
     "react-ga4": "^2.1.0",
+    "react-i18next": "^14.1.2",
     "react-joyride": "^2.8.2",
+    "react-select": "^5.8.0",
     "react-toastify": "^10.0.5",
     "sharp": "^0.33.3",
     "zustand": "^4.5.4"
diff --git a/src/components/DynamicForm.tsx b/src/components/DynamicForm.tsx
new file mode 100644
index 00000000..b29f010b
--- /dev/null
+++ b/src/components/DynamicForm.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import Form, { IChangeEvent } from '@rjsf/core';
+import ISubmitEvent from '@rjsf/core';
+import validator from '@rjsf/validator-ajv8';
+import { Theme as MaterialUITheme } from '@rjsf/material-ui';
+import { withTheme } from '@rjsf/core';
+
+const FormWithMaterialUI = withTheme(MaterialUITheme);
+
+interface DynamicFormProps {
+  schema: any;
+  uiSchema: any;
+  formData?: any;
+  onSubmit: (data: ISubmitEvent<any>, event: React.FormEvent<any>) => void;
+  onChange: (event: IChangeEvent<any>) => void;
+  onError: (errors: any) => void;
+  showErrorList: boolean;
+}
+const DynamicForm: React.FC<DynamicFormProps> = ({
+  schema,
+  uiSchema,
+  formData,
+  onSubmit,
+  onChange,
+  onError,
+}) => {
+  return (
+    <FormWithMaterialUI
+      schema={schema}
+      uiSchema={uiSchema}
+      formData={formData}
+      onChange={onChange}
+      onSubmit={onSubmit}
+      onError={onError}
+      validator={validator}
+      liveValidate
+      showErrorList={false}
+    />
+  );
+};
+
+export default DynamicForm;