added default prop in checkbox widget (ToolJet#3063)

* added default prop in checkbox widget

* removed unwanted code

* changing defaultValue prop display name to Default Status

* added value key in exposedVariables prop

* Fixed :  the issue where checkbox is getting filled instead of checked

Co-authored-by: Sherfin Shamsudeen <sherfin94@gmail.com>

frontend/src/Editor/Components/Checkbox.jsx

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 export const Checkbox = function Checkbox({ height, properties, styles, fireEvent, setExposedVariable }) {
-  const [checked, setChecked] = React.useState(false);
+  const defaultValueFromProperties = properties.defaultValue ?? false;
+  const [defaultValue, setDefaultvalue] = React.useState(defaultValueFromProperties);
+  const [checked, setChecked] = React.useState(defaultValueFromProperties);
   const { label } = properties;
   const { visibility, disabledState, checkboxColor, textColor } = styles;
 
@@ -15,6 +17,12 @@ export const Checkbox = function Checkbox({ height, properties, styles, fireEven
       fireEvent('onUnCheck');
     }
   }
+  useEffect(() => {
+    setExposedVariable('value', defaultValueFromProperties);
+    setDefaultvalue(defaultValueFromProperties);
+    setChecked(defaultValueFromProperties);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultValueFromProperties]);
 
   return (
     <div data-disabled={disabledState} className="row py-1" style={{ height, display: visibility ? '' : 'none' }}>
@@ -26,6 +34,8 @@ export const Checkbox = function Checkbox({ height, properties, styles, fireEven
             onClick={(e) => {
               toggleValue(e);
             }}
+            defaultChecked={defaultValue}
+            checked={checked}
             style={{ backgroundColor: checked ? `${checkboxColor}` : 'white', marginTop: '1px' }}
           />
           <span className="form-check-label" style={{ color: textColor }}>

frontend/src/Editor/WidgetManager/widgetConfig.js

@@ -552,6 +552,7 @@ export const widgets = [
     },
     properties: {
       label: { type: 'code', displayName: 'Label' },
+      defaultValue: { type: 'toggle', displayName: 'Default Status' },
     },
     events: {
       onCheck: { displayName: 'On check' },
@@ -563,14 +564,17 @@ export const widgets = [
       visibility: { type: 'toggle', displayName: 'Visibility' },
       disabledState: { type: 'toggle', displayName: 'Disable' },
     },
-    exposedVariables: {},
+    exposedVariables: {
+      value: false,
+    },
     definition: {
       others: {
         showOnDesktop: { value: '{{true}}' },
         showOnMobile: { value: '{{false}}' },
       },
       properties: {
         label: { value: 'Checkbox label' },
+        defaultValue: { value: '{{false}}' },
       },
       events: [],
       styles: {