Merge pull request #56 from indec-it/refactor/renameProp

refactor: rename readOnlyMode prop
indec-it · Jul 11, 2023 · 02f574e · 02f574e
2 parents ad08ea8 + 2874130
commit 02f574e
Show file tree

Hide file tree

Showing 25 changed files with 135 additions and 123 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@indec/form-builder",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "Form builder",
   "main": "index.js",
   "private": false,

diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
@@ -19,11 +19,11 @@ const handleChecked = (e, selectedValue, {name, value}, setFieldValue) => {
 };
 
 function Checkbox({
-  options, label, field, form, readOnlyMode, required, warnings
+  options, label, field, form, disabled, required, warnings
 }) {
   return (
     <Stack direction="column" spacing={2} sx={{width: '100%'}}>
-      <InputLabel warnings={warnings} required={required} form={form} field={field} label={label} readOnly={readOnlyMode} />
+      <InputLabel warnings={warnings} required={required} form={form} field={field} label={label} disabled={disabled} />
       <FormGroup>
         {options.map((option, index) => (
           <FormControlLabel
@@ -37,11 +37,11 @@ function Checkbox({
               />
             )}
             label={option.label}
-            disabled={readOnlyMode}
+            disabled={disabled}
           />
         ))}
       </FormGroup>
-      <FieldMessage warnings={warnings} form={form} field={field} readOnly={readOnlyMode} />
+      <FieldMessage warnings={warnings} form={form} field={field} disabled={disabled} />
     </Stack>
   );
 }
@@ -51,9 +51,14 @@ Checkbox.propTypes = {
   options: PropTypes.arrayOf(optionPropTypes).isRequired,
   field: formikField.isRequired,
   form: formikForm.isRequired,
-  readOnlyMode: PropTypes.bool.isRequired,
-  required: PropTypes.bool.isRequired,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
   warnings: PropTypes.shape({}).isRequired
 };
 
+Checkbox.defaultProps = {
+  required: false,
+  disabled: false
+};
+
 export default Checkbox;
diff --git a/src/components/Checkbox/Checkbox.stories.js b/src/components/Checkbox/Checkbox.stories.js
@@ -114,7 +114,7 @@ function Template(args) {
 
 export const Basic = Template.bind({});
 Basic.args = {
-  readOnlyMode: false,
+  disabled: false,
   label: 'Select an option',
   required: false,
   name: 'S1.0.S1P1.answer.value',
@@ -124,7 +124,7 @@ Basic.args = {
 
 export const WithReadOnlyMode = Template.bind({});
 WithReadOnlyMode.args = {
-  readOnlyMode: true,
+  disabled: true,
   label: 'Select an option',
   required: false,
   name: 'S1.0.S1P1.answer.value',
@@ -135,7 +135,7 @@ WithReadOnlyMode.args = {
 
 export const WithErrors = Template.bind({});
 WithErrors.args = {
-  readOnlyMode: false,
+  disabled: false,
   label: 'Select an option',
   required: true,
   name: 'S1.0.S1P1.answer.value',

diff --git a/src/components/Checkbox/Checkbox.test.js b/src/components/Checkbox/Checkbox.test.js
@@ -58,9 +58,9 @@ describe('<Checkbox>', () => {
     expect(getByTestId(container, 'input-label')).toBeInTheDocument();
   });
 
-  describe('when `props.readOnlyMode` is `false`', () => {
+  describe('when `props.disabled` is `false`', () => {
     beforeEach(() => {
-      props.readOnlyMode = false;
+      props.disabled = false;
     });
 
     it('should display `props.options.label`', () => {
@@ -112,9 +112,9 @@ describe('<Checkbox>', () => {
     });
   });
 
-  describe('when `props.readOnlyMode` is `true`', () => {
+  describe('when `props.disabled` is `true`', () => {
     beforeEach(() => {
-      props.readOnlyMode = true;
+      props.disabled = true;
     });
 
     describe('and there are selected options', () => {

diff --git a/src/components/FieldMessage/FieldMessage.js b/src/components/FieldMessage/FieldMessage.js
@@ -6,18 +6,16 @@ import hasFormikErrorsAndWarnings from '@/utils/hasFormikErrorsAndWarnings';
 
 const alertStyles = {justifyContent: 'center', mt: 2};
 
-function FieldMessage({
-  form, field, readOnly, warnings
-}) {
+function FieldMessage({form, field, disabled, warnings}) {
   const {
     hasWarning, warning, hasError, error
   } = hasFormikErrorsAndWarnings({form, field, warnings});
-  if (hasError && !readOnly) {
+  if (hasError && !disabled) {
     return (
       <Alert severity="error" sx={alertStyles}>{error}</Alert>
     );
   }
-  if (hasWarning && !readOnly) {
+  if (hasWarning && !disabled) {
     return (
       <Alert severity="warning" sx={alertStyles}>{warning}</Alert>
     );
@@ -28,7 +26,7 @@ function FieldMessage({
 FieldMessage.propTypes = {
   field: formikField.isRequired,
   form: formikForm.isRequired,
-  readOnly: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool.isRequired,
   warnings: PropTypes.shape({}).isRequired
 };
 

diff --git a/src/components/FieldMessage/FieldMessage.stories.js b/src/components/FieldMessage/FieldMessage.stories.js
@@ -105,7 +105,7 @@ function Template(args) {
             component={FieldMessage}
             {...props}
             warnings={warnings}
-            readOnly={false}
+            disabled={false}
           />
         );
       }}

diff --git a/src/components/FieldMessage/FieldMessage.test.js b/src/components/FieldMessage/FieldMessage.test.js
@@ -6,17 +6,17 @@ describe('<FieldMessage>', () => {
   const getComponent = () => render(FieldMessage, props);
   beforeEach(() => {
     props = {
-      readOnly: false,
+      disabled: false,
       label: 'test',
       field: {name: 'test'},
       form: {submitCount: 0, errors: {}, touched: {test: false}},
       warnings: {}
     };
   });
 
-  describe('when `props.readOnly` is `false` and there is an error', () => {
+  describe('when `props.disabled` is `false` and there is an error', () => {
     beforeEach(() => {
-      props.readOnly = false;
+      props.disabled = false;
       props.form.errors = {test: 'there is an error'};
       props.form.touched = {test: true};
     });
@@ -27,9 +27,9 @@ describe('<FieldMessage>', () => {
     });
   });
 
-  describe('when `props.readOnly` is `false`, there is not an error and there is a warning', () => {
+  describe('when `props.disabled` is `false`, there is not an error and there is a warning', () => {
     beforeEach(() => {
-      props.readOnly = false;
+      props.disabled = false;
       props.form.errors = {};
       props.form.touched = {test: true};
       props.warnings = {test: 'there is a warning'};

diff --git a/src/components/FormBuilder/FormBuilder.js b/src/components/FormBuilder/FormBuilder.js
@@ -108,7 +108,7 @@ function FormBuilder({
                           values={currentSection}
                           index={index}
                           section={section}
-                          readOnlyMode={readOnlyMode}
+                          disabled={readOnlyMode}
                           warnings={warnings}
                         />
                       </Box>
@@ -137,12 +137,22 @@ function FormBuilder({
             />
             {
               components.NavigationButtons
-                ? <components.NavigationButtons schema={validateSchema} values={values ? values[section.name] : {}} />
+                ? (
+                  <components.NavigationButtons
+                    schema={validateSchema}
+                    values={values ? values[section.name] : {}}
+                    onAddNew={section.multiple ? () => addNewSection(setValues, values) : undefined}
+                    onInterrupt={
+                      section.interruption.interruptible
+                        ? () => handleOpenModal(modals.INTERRUPTION_MODAL, section.id)
+                        : undefined
+                    }
+                  />
+                )
                 : (
                   <NavigationButtons
                     onPrevious={onPrevious}
                     disablePreviousButton={page === 0}
-                    nextButtonLabel={isLastSection ? 'Finalizar' : 'Siguiente'}
                     isLastSection={isLastSection}
                     onAddNew={section.multiple ? () => addNewSection(setValues, values) : undefined}
                     onInterrupt={

diff --git a/src/components/InputLabel/InputLabel.js b/src/components/InputLabel/InputLabel.js
@@ -10,17 +10,17 @@ import formikFormPropTypes from '@/utils/propTypes/formikForm';
 import formikFieldPropTypes from '@/utils/propTypes/formikField';
 
 function InputLabel({
-  required, label, form, field, readOnly, warnings
+  required, label, form, field, disabled, warnings
 }) {
   const {hasWarning, hasError} = hasFormikErrorsAndWarnings({form, field, warnings});
   return (
     <Stack direction="row" spacing={2} data-testid="input-label">
-      {hasError && !readOnly && (
+      {hasError && !disabled && (
         <Box>
           <ErrorIcon color="error" data-testid="error-icon" />
         </Box>
       )}
-      {hasWarning && !readOnly && !hasError && (
+      {hasWarning && !disabled && !hasError && (
         <Box>
           <WarningIcon color="warning" data-testid="warning-icon" />
         </Box>
@@ -37,7 +37,7 @@ InputLabel.propTypes = {
   required: PropTypes.bool.isRequired,
   form: formikFormPropTypes.isRequired,
   field: formikFieldPropTypes.isRequired,
-  readOnly: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool.isRequired,
   warnings: PropTypes.shape({})
 };
 

diff --git a/src/components/InputLabel/InputLabel.stories.js b/src/components/InputLabel/InputLabel.stories.js
@@ -85,7 +85,7 @@ function Template(args) {
             component={InputLabel}
             {...props}
             warnings={warnings}
-            readOnly={false}
+            disabled={false}
           />
         );
       }}
@@ -95,7 +95,6 @@ function Template(args) {
 
 export const Basic = Template.bind({});
 Basic.args = {
-  readOnlyMode: false,
   label: 'Write your name',
   required: false,
   name: 'S1.0.S1P1.answer.value',
@@ -104,7 +103,6 @@ Basic.args = {
 
 export const WithRequired = Template.bind({});
 WithRequired.args = {
-  readOnlyMode: false,
   label: 'Write your name',
   required: true,
   name: 'S1.0.S1P1.answer.value',
@@ -113,7 +111,6 @@ WithRequired.args = {
 
 export const WithErrors = Template.bind({});
 WithErrors.args = {
-  readOnlyMode: false,
   label: 'Write your name',
   required: true,
   name: 'S1.0.S1P1.answer.value',
@@ -123,7 +120,6 @@ WithErrors.args = {
 
 export const WithWarnings = Template.bind({});
 WithWarnings.args = {
-  readOnlyMode: false,
   label: 'Write your name',
   required: false,
   name: 'S1.0.S1P1.answer.value',

diff --git a/src/components/InputLabel/InputLabel.test.js b/src/components/InputLabel/InputLabel.test.js
@@ -6,7 +6,7 @@ describe('<InputLabel>', () => {
   const getComponent = () => render(InputLabel, props);
   beforeEach(() => {
     props = {
-      readOnly: false,
+      disabled: false,
       label: 'test',
       field: {name: 'test'},
       form: {submitCount: 0, errors: {}, touched: {test: false}},
@@ -19,7 +19,7 @@ describe('<InputLabel>', () => {
     expect(getByText(container, props.label)).toBeInTheDocument();
   });
 
-  describe('when there is an error and `props.readOnly` is `false`', () => {
+  describe('when there is an error and `props.disabled` is `false`', () => {
     beforeEach(() => {
       props.form.errors = {test: 'there is an error'};
       props.form.touched = {test: true};
@@ -31,7 +31,7 @@ describe('<InputLabel>', () => {
     });
   });
 
-  describe('when there is not an error, `props.readOnly` is `false` and there`s a warning', () => {
+  describe('when there is not an error, `props.disabled` is `false` and there`s a warning', () => {
     beforeEach(() => {
       props.form.errors = {};
       props.form.touched = {test: true};

diff --git a/src/components/NavigationButtons/NavigationButtons.js b/src/components/NavigationButtons/NavigationButtons.js
@@ -10,9 +10,7 @@ import DoneIcon from '@mui/icons-material/Done';
 function NavigationButtons({
   onPrevious,
   disablePreviousButton,
-  nextButtonLabel,
   onAddNew,
-  addButtonLabel,
   isLastSection,
   onInterrupt,
   readOnlyMode
@@ -37,7 +35,7 @@ function NavigationButtons({
               onClick={onAddNew}
               variant="outlined"
             >
-              {addButtonLabel}
+              Agregar nuevo
             </Button>
           )}
           {onInterrupt && (
@@ -60,7 +58,7 @@ function NavigationButtons({
         variant="contained"
         color={isLastSection ? 'success' : 'primary'}
       >
-        {nextButtonLabel}
+        {isLastSection ? 'Finalizar' : 'Siguiente'}
       </Button>
     </Stack>
   );
@@ -72,17 +70,13 @@ NavigationButtons.propTypes = {
   onAddNew: PropTypes.func,
   readOnlyMode: PropTypes.bool,
   disablePreviousButton: PropTypes.bool,
-  isLastSection: PropTypes.bool,
-  nextButtonLabel: PropTypes.string,
-  addButtonLabel: PropTypes.string
+  isLastSection: PropTypes.bool
 };
 
 NavigationButtons.defaultProps = {
   disablePreviousButton: false,
   isLastSection: false,
   readOnlyMode: false,
-  nextButtonLabel: 'Siguiente',
-  addButtonLabel: 'Agregar nuevo',
   onAddNew: null,
   onInterrupt: null
 };