ESlint fixes and i18n

packages/volto-form-block/src/components/Field.css

@@ -1,25 +1,25 @@
 .block.form .field-file-name .ui.basic.icon.button.delete-button {
-    position: static;
+  position: static;
 }
 
 .block.form .volto-subblocks-wrapper .single-block .dragsubblock {
-    top: calc(50% - 10px);
-    left: -10px;
+  top: calc(50% - 10px);
+  left: -10px;
 }
 
 .block.form
-    .volto-subblocks-wrapper
-    .single-block.subblock-draggable
-    .ui.basic.button.delete-button {
-    top: 1.5rem;
-    right: 25px;
-    left: auto;
+  .volto-subblocks-wrapper
+  .single-block.subblock-draggable
+  .ui.basic.button.delete-button {
+  top: 1.5rem;
+  right: 25px;
+  left: auto;
 }
 
 .block.form .ui.form .field .wrapper > label {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .block.form .ui.form .field .static-text {
-    margin: 2rem 0;
+  margin: 2rem 0;
 }

packages/volto-form-block/src/components/FormView.css

@@ -1,13 +1,13 @@
 .block.form .ui.form .ui.message {
-    display: flex;
-    width: 80%;
-    margin: 3rem auto 0;
+  display: flex;
+  width: 80%;
+  margin: 3rem auto 0;
 }
 
 .block.form .ui.form .row.row-padded-top {
-    padding-top: 3rem;
+  padding-top: 3rem;
 }
 
 .block.form .ui.button.add-element:hover {
-    color: white;
+  color: white;
 }

packages/volto-form-block/src/components/Sidebar.css

@@ -1,17 +1,17 @@
 [id^='blockform-fieldset'] .required.field .ui.checkbox {
-    display: flex;
+  display: flex;
 }
 [id^='blockform-fieldset'] .required.field .ui.checkbox label {
-    display: inline-block;
-    padding-right: 20px;
+  display: inline-block;
+  padding-right: 20px;
 }
 [id^='blockform-fieldset'] .required.field .ui.checkbox::after {
-    display: block;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    margin-left: -15px;
-    margin-top: 2.5px;
-    background-color: #e40166;
-    content: '';
+  display: block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-top: 2.5px;
+  margin-left: -15px;
+  background-color: #e40166;
+  content: '';
 }

packages/volto-form-block/src/components/ValidateConfigForm.jsx

@@ -61,6 +61,7 @@ const ValidateConfigForm = ({ data = {}, children, onEdit, onChangeBlock }) => {
         onChangeBlock({ ...data, configValidation: validation });
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data]);
 
   const valid = data.configValidation?.valid || !data.configValidation; //!data.configValidation is for old configured form that doesn't have configValidation field

packages/volto-form-block/src/components/Widget/CheckboxListWidget.css

@@ -1,12 +1,12 @@
 .checkbox-list-widget .checkbox-item {
-    margin: 0.5rem 0;
+  margin: 0.5rem 0;
 }
 
 .checkbox-list-widget fieldset.checkbox-group {
-    border: none;
+  border: none;
 }
 
 .checkbox-list-widget fieldset.checkbox-group legend {
-    display: none;
-    line-height: 0;
+  display: none;
+  line-height: 0;
 }

packages/volto-form-block/src/components/Widget/HoneypotCaptchaWidget.css

@@ -1,3 +1,3 @@
 .honey-wrapper {
-    display: none;
+  display: none;
 }

packages/volto-form-block/src/components/Widget/OTPWidget.css

@@ -1,49 +1,49 @@
 .otp-widget .otp-widget-field-wrapper {
-    display: flex;
-    gap: 1rem;
-    align-items: flex-start;
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
 }
 .otp-widget .otp-widget-field-wrapper .field {
-    flex-grow: 1;
+  flex-grow: 1;
 }
 
 .otp-widget .otp-alert {
-    position: relative;
-    padding: 0.5rem 1rem;
-    margin-bottom: 1rem;
-    border: 1px solid #5d7083;
-    border-left: 8px solid #5d7083;
-    background-color: #fff;
-    border-radius: 0;
-    margin-top: -3rem;
-    margin-bottom: 3rem;
+  position: relative;
+  padding: 0.5rem 1rem;
+  border: 1px solid #5d7083;
+  border-radius: 0;
+  border-left: 8px solid #5d7083;
+  margin-top: -3rem;
+  margin-bottom: 1rem;
+  margin-bottom: 3rem;
+  background-color: #fff;
 }
 
 .otp-widget .otp-alert.otp-error {
-    border-left: 8px solid #cc334d;
+  border-left: 8px solid #cc334d;
 }
 
 .otp-widget .otp-alert.otp-success {
-    border-left: 8px solid #008055;
+  border-left: 8px solid #008055;
 }
 
 .otp-widget .otp-widget-field-wrapper .button-wrapper {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .otp-widget .otp-widget-field-wrapper .button-wrapper .otp-button-message {
-    font-size: 0.8rem;
-    color: #555555;
-    text-align: center;
+  color: #555555;
+  font-size: 0.8rem;
+  text-align: center;
 }
 @media (max-width: 1024px) {
-    .otp-widget .otp-widget-field-wrapper {
-        flex-direction: column;
-    }
-    .otp-widget .otp-widget-field-wrapper .field,
-    .otp-widget .otp-widget-field-wrapper .button-wrapper,
-    .otp-widget .otp-widget-field-wrapper .button-wrapper button {
-        width: 100%;
-    }
+  .otp-widget .otp-widget-field-wrapper {
+    flex-direction: column;
+  }
+  .otp-widget .otp-widget-field-wrapper .field,
+  .otp-widget .otp-widget-field-wrapper .button-wrapper,
+  .otp-widget .otp-widget-field-wrapper .button-wrapper button {
+    width: 100%;
+  }
 }

packages/volto-form-block/src/components/Widget/RadioWidget.css

@@ -1,16 +1,16 @@
 .radio-widget .radio-button {
-    margin: 0.5rem 0;
+  margin: 0.5rem 0;
 }
 
 .radio-widget .radio-button label {
-    padding: 0.25rem;
+  padding: 0.25rem;
 }
 
 .radio-widget fieldset.radio-group {
-    border: none;
+  border: none;
 }
 
 .radio-widget fieldset.radio-group legend {
-    display: none;
-    line-height: 0;
+  display: none;
+  line-height: 0;
 }

packages/volto-form-block/src/components/Widget/SelectWidget.jsx

@@ -169,16 +169,8 @@ class SelectWidget extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const {
-      id,
-      choices,
-      value,
-      intl,
-      onChange,
-      required,
-      invalid,
-      title,
-    } = this.props;
+    const { id, choices, value, intl, onChange, required, invalid, title } =
+      this.props;
     const normalizedValue = normalizeValue(choices, value, intl);
     // Make sure that both disabled and isDisabled (from the DX layout feat work)
     const disabled = this.props.disabled || this.props.isDisabled;

packages/volto-form-block/src/components/Widget/TextareaWidget.jsx

@@ -25,15 +25,8 @@ import { FormFieldWrapper } from '@plone/volto/components';
  * ```
  */
 const TextareaWidget = (props) => {
-  const {
-    id,
-    maxLength,
-    value,
-    onChange,
-    placeholder,
-    required,
-    invalid,
-  } = props;
+  const { id, maxLength, value, onChange, placeholder, required, invalid } =
+    props;
   const [lengthError, setlengthError] = useState('');
 
   const onhandleChange = (id, value) => {

packages/volto-form-block/src/components/index.js

@@ -3,42 +3,49 @@ import loadable from '@loadable/component';
 /*--------------------------------
 --- BOUNDLE VoltoFormBlockView ---
 ---------------------------------*/
-export const View = loadable(() =>
-  import(
-    /* webpackChunkName: "VoltoFormBlockView" */ 'volto-form-block/components/View'
-  ),
+export const View = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "VoltoFormBlockView" */ 'volto-form-block/components/View'
+    ),
 );
-export const FormView = loadable(() =>
-  import(
-    /* webpackChunkName: "VoltoFormBlockView" */ 'volto-form-block/components/FormView'
-  ),
+export const FormView = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "VoltoFormBlockView" */ 'volto-form-block/components/FormView'
+    ),
 );
-export const FormResult = loadable(() =>
-  import(
-    /* webpackChunkName: "VoltoFormBlockView" */ 'volto-form-block/components/FormResult'
-  ),
+export const FormResult = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "VoltoFormBlockView" */ 'volto-form-block/components/FormResult'
+    ),
 );
-export const Field = loadable(() =>
-  import(
-    /* webpackChunkName: "VoltoFormBlockView" */ 'volto-form-block/components/Field'
-  ),
+export const Field = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "VoltoFormBlockView" */ 'volto-form-block/components/Field'
+    ),
 );
 
 /*--------------------------------
 --- BOUNDLE VoltoFormBlockEdit ---
 ---------------------------------*/
-export const Edit = loadable(() =>
-  import(
-    /* webpackChunkName: "VoltoFormBlockEdit" */ 'volto-form-block/components/Edit'
-  ),
+export const Edit = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "VoltoFormBlockEdit" */ 'volto-form-block/components/Edit'
+    ),
 );
-export const Sidebar = loadable(() =>
-  import(
-    /* webpackChunkName: "VoltoFormBlockEdit" */ 'volto-form-block/components/Sidebar'
-  ),
+export const Sidebar = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "VoltoFormBlockEdit" */ 'volto-form-block/components/Sidebar'
+    ),
 );
-export const EditBlock = loadable(() =>
-  import(
-    /* webpackChunkName: "VoltoFormBlockEdit" */ 'volto-form-block/components/EditBlock'
-  ),
+export const EditBlock = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "VoltoFormBlockEdit" */ 'volto-form-block/components/EditBlock'
+    ),
 );

packages/volto-form-block/src/fieldSchema.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-anonymous-default-export */
 import config from '@plone/volto/registry';
 import { defineMessages } from 'react-intl';
 import { useIntl } from 'react-intl';
@@ -69,8 +70,9 @@ const messages = defineMessages({
   },
 });
 
+// eslint-disable-next-line prettier/prettier
 export default (props) => {
-  var intl = useIntl();
+  var intl = useIntl(); // This is wrong and has to be fixed
   const baseFieldTypeChoices = [
     ['text', intl.formatMessage(messages.field_type_text)],
     ['textarea', intl.formatMessage(messages.field_type_textarea)],

packages/volto-form-block/src/formSchema.js

@@ -29,6 +29,7 @@ const messages = defineMessages({
   default_subject_description: {
     id: 'form_default_subject_description',
     defaultMessage:
+      // eslint-disable-next-line no-template-curly-in-string
       'Use the ${field_id} syntax to add a form value to the email subject',
   },
   submit_label: {
@@ -74,6 +75,7 @@ const messages = defineMessages({
   send_message_helptext: {
     id: 'form_send_message_helptext',
     defaultMessage:
+      // eslint-disable-next-line no-template-curly-in-string
       'You can add the value of a filled field in the form by inserting its ID between curly brackets preceded by $, example: ${field_id}; you can add also html elements such as links <a>, new line <br />, bold <b> and italic <i> formatting.',
   },
   manage_data: {