Documentation V1.0

docs/docs/dev-implementation/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Dev Implementation",
+  "position": 4,
+  "link": {
+    "type": "generated-index",
+    "description": "Here we will discuss the development Implementation of this project"
+  }
+}

docs/docs/dev-implementation/conditions.md

@@ -0,0 +1,74 @@
+---
+sidebar_position: 2
+---
+
+# Conditions
+
+This is a developer implementation of condition
+
+## Default Render
+
+This type of structure will be there when a section is intended to be rendered without any condition.
+
+```js
+{
+  condition: "None";
+  type: "NONE";
+}
+```
+
+The detailed description of the two parameters are given below
+
+## Conditional Structure
+
+We represent condition is such a way
+
+```js
+{
+  condition: "Section 1 | Sample Question 1",
+  formId: "296a393d-5b0a-4a96-9322-67c0e0c7182d",
+  options: ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"],
+  value: ["Option 1"],
+  sectionId: "e705c2a6-b3b3-41e6-aea0-5140a714f2cb",
+  type: "CHECKBOX_INPUT",
+}
+```
+
+- `condition` here is represented in this nomenclature
+
+```
+<SECTION_TITLE> | <FORM_ELEMENT_TITLE>
+-----------------
+FORM_ELEMENT_TITLE -> The title of formElement which is used to create the condition
+SECTION_TITLE -> The title of the section under which the FORM_ELEMENT is defined
+-----------------
+```
+
+- `formId` is the `id` of the form element on which the condition is linked.
+
+- `sectionId` is the `id` of the section where the formId exists.
+
+- `options` is the options that are there on the form element.
+
+- `value` is the value which the user must enter in order to trigger that condition.
+
+- `type` is the type of the form element on which the condition is implemented
+
+:::info
+`value` is not necessarily always an `Array`.
+It is an array on form type `CHECKBOX_INPUT` and a `String` on other input types
+:::
+
+:::info
+If there is no `value` parameter in the condition then this implies that if the user leaves the question blank then the condition will be triggered
+:::
+
+:::warning
+More than one `Section` s connected to a parent `Section` cannot have same `condition` parameters
+
+Example :
+
+`Section 1` is connected to `Section 2` and `Section 1` is connected to `Section 3`
+
+Then `Section 2` and `Section 3` must have differed condition parameters
+:::

docs/docs/dev-implementation/formElements.md

@@ -0,0 +1,109 @@
+---
+sidebar_position: 1
+---
+
+# Form Elements
+
+This is a developer implementation of Form elements.
+
+## How it is implemented?
+
+`FormElements`are just basically an object with the required details that a question needs.
+
+A sample is
+
+```js
+// A singular form element
+
+{
+  id: "296a393d-5b0a-4a96-9322-67c0e0c7182d",
+  isRequired: false,
+  isIdentifier: true,
+  label: "Sample Question 1",
+  options: ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"],
+  type: "CHECKBOX_INPUT"
+}
+```
+
+- Now `id` is a unique `uuid` which is generated every time when a form element gets created
+
+- `isRequired` and `isIdentifier` are optional identifiers which are specified by the user while creating the form element.
+
+- Here `label` is a `Required` parameter which will be rendered as a label.
+
+- `options` describes the options given by the user. This will only be available in specific form types.
+
+- `type` describes the type of the form element.
+
+:::info
+
+All `Condition Supported` form elements must have the `options` parameter.
+:::
+
+### Form Types
+
+Form Types are defined in the `/constants` folder
+
+```js title="/src/constants/formTypes.js"
+export const FORM_TYPES = {
+  SHORT_TEXT: "SHORT_TEXT",
+  LONG_TEXT: "LONG_TEXT",
+  CHECKBOX_INPUT: "CHECKBOX_INPUT",
+  DROPDOWN: "DROPDOWN",
+  MULTIPLE_CHOICE: "MULTIPLE_CHOICE",
+  LINEAR_SCALE: "LINEAR_SCALE",
+  EMBED_CONTENT: "EMBED_CONTENT",
+};
+
+export const CONDITIONAL_FORM_TYPES = {
+  SHORT_TEXT: false,
+  LONG_TEXT: false,
+  CHECKBOX_INPUT: true,
+  DROPDOWN: true,
+  MULTIPLE_CHOICE: true,
+  LINEAR_SCALE: false,
+  EMBED_CONTENT: false,
+};
+
+export const USER_SIDE_FORM_TYPES = {
+  "Short Text": "SHORT_TEXT",
+  "Long Text": "LONG_TEXT",
+  "Checkbox Input": "CHECKBOX_INPUT",
+  Dropdown: "DROPDOWN",
+  "Multiple Choice": "MULTIPLE_CHOICE",
+  "Linear Scale": "LINEAR_SCALE",
+  "Embed Content": "EMBED_CONTENT",
+};
+
+export const getFormType = (type) => {
+  return USER_SIDE_FORM_TYPES[type];
+};
+
+export const getUserSideFormTypeById = (id) => {
+  for (let key in USER_SIDE_FORM_TYPES) {
+    if (USER_SIDE_FORM_TYPES[key] === id) return key;
+  }
+};
+
+export const getUserSideFormTypes = () => {
+  const formTypes = [];
+  for (let key in USER_SIDE_FORM_TYPES)
+    formTypes.push({ value: key, key: USER_SIDE_FORM_TYPES[key] });
+  return formTypes;
+};
+```
+
+- `FORM_TYPES` describes all the different form types
+
+- `CONDITIONAL_FORM_TYPES` describes all the form types which have support for conditions
+
+- `USER_SIDE_FORM_TYPES` describes by what name the `FORM_TYPES` will be shown to the user
+
+All the other functions are helper functions to convert from one form to another or to fetch the form types in different formats
+
+So we store the `formElements` in this way.
+
+```js
+// This shows the interface
+formElements:Array<FORM_ELEMENT>
+```

docs/docs/dev-implementation/schema.md

@@ -0,0 +1,102 @@
+---
+sidebar_position: 4
+---
+
+# Schema
+
+Here we will discuss about the total schema of the form.
+
+## Form Structure
+
+This is an example structure
+
+```js
+{
+  title: "Sample Form Title",
+  description: "This is a sample description on how to collect genomics data",
+  startingGroupId:"e705c2a6-b3b3-41e6-aea0-5140a714f2cb",
+  schema: [
+    "e705c2a6-b3b3-41e6-aea0-5140a714f2cb": {
+        title: "Section 1",
+        description: "This is the first section",
+        condition: {
+            condition: "None",
+            type: "NONE"
+        },
+        formElements: [],
+        groupsConnectedTo: [
+            {id: '13355d24-e983-4d5d-8fd7-5ea308785a99', renderType: 'default'}
+        ],
+        id: "e705c2a6-b3b3-41e6-aea0-5140a714f2cb",
+        previousConnections: [null],
+        renderType: "default",
+        warning: ""
+    },
+    "13355d24-e983-4d5d-8fd7-5ea308785a99": {
+        title: "Section 2",
+        description: "This is a section which is connected to Section 1 and Section 3.",
+        condition: {
+            condition: "None",
+            type: "NONE"
+        },
+        formElements: [
+            {
+                id: "296a393d-5b0a-4a96-9322-67c0e0c7182d",
+                isRequired: false,
+                isIdentifier: true,
+                label: "Sample Question 1",
+                options: ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"],
+                type: "CHECKBOX_INPUT"
+            }
+        ],
+        groupsConnectedTo: [
+            {id: '14555d24-e900-4d5d-8fd7-5ea308785a91', renderType: 'default'}
+        ],
+        id: "13355d24-e983-4d5d-8fd7-5ea308785a99",
+        previousConnections: ['e705c2a6-b3b3-41e6-aea0-5140a714f2cb'],
+        renderType: "default",
+        warning: ""
+    },
+    "14555d24-e900-4d5d-8fd7-5ea308785a91": {
+        title: "Section 3",
+        description: "This is a section which is connected to Section 2.",
+        condition: {
+            condition: "None",
+            type: "NONE"
+        },
+        formElements: [
+            {
+                id: "296a393d-5b0a-4a96-9322-67c0e0c7182d",
+                isRequired: false,
+                isIdentifier: true,
+                label: "Sample Question 1",
+                options: ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"],
+                type: "CHECKBOX_INPUT"
+            }
+        ],
+        groupsConnectedTo: [],
+        id: "14555d24-e900-4d5d-8fd7-5ea308785a91",
+        previousConnections: ['13355d24-e983-4d5d-8fd7-5ea308785a99'],
+        renderType: "default",
+        warning: ""
+    }
+  ]
+}
+```
+
+- `title` and `description` are to indicate for the whole form
+
+- `startingGroupId` is the `id` of the first section which needs to be rendered.
+
+- `schema` contains all the `Sections` and `Section` contains all the `formElements`
+
+So first the `startingGroupId` gets rendered then after the first section is filled the `groupsConnectedTo` is used to render the next section.
+
+:::info
+If `groupsConnectedTo` is an empty array that means the form should get submitted at that state.
+
+Also if none of the condition satisfy for the `groupsConnectedTo` sections then also it means that the form is in a state to submitted.
+:::
+
+:::info
+All the `CRUD` operations on this structure is done by `GraphStructureService` present in **`/src/services/graph.structurer.service.js`**

docs/docs/dev-implementation/sections.md

@@ -0,0 +1,61 @@
+---
+sidebar_position: 3
+---
+
+# Sections
+
+This is a developer implementation of `Section`
+
+## Section Structure
+
+This is a sample structure of a `Section`
+
+```js
+// | Section 1 -> Section 2 -> Section 3 |
+
+{
+    title: "Section 2",
+    description: "This is a section which is connected to Section 1 and Section 2.",
+    condition: {
+        condition: "None",
+        type: "NONE"
+    },
+    formElements: [
+        {
+            id: "296a393d-5b0a-4a96-9322-67c0e0c7182d",
+            isRequired: false,
+            isIdentifier: true,
+            label: "Sample Question 1",
+            options: ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"],
+            type: "CHECKBOX_INPUT"
+        }
+    ],
+    groupsConnectedTo: [
+        {id: '13355d24-e983-4d5d-8fd7-5ea308785a99', renderType: 'default'}
+    ],
+    id: "13355d24-e983-4d5d-8fd7-5ea308785a99",
+    previousConnections: ['e705c2a6-b3b3-41e6-aea0-5140a714f2cb'],
+    renderType: "default",
+    warning: ""
+}
+```
+
+This is schema of Section 2 where `Section 1 -> Section 2 -> Section 3`
+
+- `title` is the title of the section
+
+- `description` is the description of the section
+
+- `id` is the id of the section
+
+- `groupsConnectedTo` can be read as the `sections` connected to the section. So here the `id` refers to the `id` of `Section 3`
+
+- `previousConnections` refers to the sections where this section is connected to. So here the `id` refers to the `id` of `Section 1`
+
+- `warning` is key which depicts if any warnings need to be shown to the user on frontend
+
+`condition` and `formElements` we have discussed in the previous sections.
+
+:::info
+Use of `renderType` is kept for future use and is undecided now.
+:::

docs/docusaurus.config.js

@@ -37,7 +37,7 @@ const config = {
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl:
-            "https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
+            "https://github.com/TrakGene/react-form-builder/tree/main/docs",
         },
         // blog: {
         //   showReadingTime: true,

src/components/Popup/types/AddGroup/AddGroup.jsx

@@ -58,6 +58,8 @@ function AddGroup({ edit }) {
   const [conditionOptions, setConditionOptions] = useState([]);
   const [error, setError] = useState("");
 
+  console.log(formData);
+
   useEffect(() => {
     if (popupContext.edit) {
       if (