Merge pull request #361 from suvarnakale/shiksha-2.0

Issue #PS-1247 feat: Integrated RJSF library

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"

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;