refactor!: refactoring graphical components

BREAKING CHANGE: components don't have their own containers anymore, all layout must be done in the web app
Cosmo-Tech · Oct 30, 2023 · 366f497 · 366f497
1 parent 57a2107
commit 366f497
Show file tree

Hide file tree

Showing 8 changed files with 233 additions and 227 deletions.
diff --git a/src/inputs/BasicInputs/BasicDateInput/BasicDateInput.js b/src/inputs/BasicInputs/BasicDateInput/BasicDateInput.js
@@ -3,7 +3,7 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Grid, Stack, TextField } from '@mui/material';
+import { Stack, TextField } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
@@ -37,6 +37,7 @@ export const BasicDateInput = (props) => {
     isDirty,
     error,
     reverseTimezoneOffset,
+    size,
     ...otherProps
   } = props;
   const classes = useStyles();
@@ -79,39 +80,37 @@ export const BasicDateInput = (props) => {
     );
 
   return (
-    <Grid item id={dateProps.id} xs={3}>
-      <Stack
-        data-cy={`date-input-${id}`}
-        direction="row"
-        spacing={1}
-        alignItems="center"
-        className={isDirty ? classes.dirtyInput : classes.notDirtyInput}
-      >
-        <LocalizationProvider dateAdapter={AdapterDateFns}>
-          <DesktopDatePicker
-            label={label}
-            inputFormat={format}
-            minDate={minDate}
-            maxDate={maxDate}
-            renderInput={({ error: _, ...params }) => (
-              <TextField
-                id={`date-text-field-${id}`}
-                variant="outlined"
-                sx={{ flexGrow: 1 }}
-                size="small"
-                error={error?.message?.length > 0}
-                helperText={error?.message ?? ''}
-                {...params}
-              />
-            )}
-            id={`date-input-${id}`}
-            onChange={onChange}
-            value={internalDate ?? new Date(undefined)}
-          />
-        </LocalizationProvider>
-        <TooltipInfo title={tooltipText} variant="small" />
-      </Stack>
-    </Grid>
+    <Stack
+      data-cy={`date-input-${id}`}
+      direction="row"
+      spacing={1}
+      alignItems="center"
+      className={isDirty ? classes.dirtyInput : isDirty === false ? classes.notDirtyInput : ''}
+    >
+      <LocalizationProvider dateAdapter={AdapterDateFns}>
+        <DesktopDatePicker
+          label={label}
+          inputFormat={format}
+          minDate={minDate}
+          maxDate={maxDate}
+          renderInput={({ error: _, ...params }) => (
+            <TextField
+              id={`date-text-field-${id}`}
+              variant="outlined"
+              sx={{ flexGrow: 1 }}
+              size={size}
+              error={error?.message?.length > 0}
+              helperText={error?.message ?? ''}
+              {...params}
+            />
+          )}
+          id={`date-input-${id}`}
+          onChange={onChange}
+          value={internalDate ?? new Date(undefined)}
+        />
+      </LocalizationProvider>
+      <TooltipInfo title={tooltipText} variant="small" />
+    </Stack>
   );
 };
 
@@ -152,17 +151,21 @@ BasicDateInput.propTypes = {
    * Error object that contains the type of error and its message
    */
   error: PropTypes.object,
+  /**
+   * Size of the TextField: small (default value), medium or large
+   */
+  size: PropTypes.string,
   /**
    * Boolean value that defines whether the component should prevent the date picker component to convert dates in local
    * time by adding a "reverse offset" to the input value and store it in an internal state. If the input of value prop
-   * is an UTC date and you want to work only with UTC dates, then you should set reverseTimezoneOffset to true to have
+   * is a UTC date, and you want to work only with UTC dates, then you should set reverseTimezoneOffset to true to have
    * a consistent behavior in all timezones.
    */
   reverseTimezoneOffset: PropTypes.bool,
 };
 
 BasicDateInput.defaultProps = {
   format: 'MM/dd/yyyy',
-  isDirty: false,
   reverseTimezoneOffset: false,
+  size: 'small',
 };
diff --git a/src/inputs/BasicInputs/BasicEnumInput/BasicEnumInput.js b/src/inputs/BasicInputs/BasicEnumInput/BasicEnumInput.js
@@ -1,7 +1,7 @@
 // Copyright (c) Cosmo Tech.
 // Licensed under the MIT license.
 
-import { MenuItem, Grid, Stack, TextField, Tooltip, Fade, Box } from '@mui/material';
+import { MenuItem, Stack, TextField, Tooltip, Fade, Box } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import PropTypes from 'prop-types';
 import React, { useCallback, useMemo } from 'react';
@@ -22,6 +22,7 @@ export const BasicEnumInput = (props) => {
     enumValues: selectEnumValues,
     changeEnumField,
     isDirty,
+    size,
     ...otherProps
   } = props;
 
@@ -43,55 +44,53 @@ export const BasicEnumInput = (props) => {
     );
 
   return (
-    <Grid item xs={3}>
-      <Stack
-        data-cy={`enum-input-${id}`}
-        direction="row"
-        spacing={1}
-        alignItems="center"
-        className={isDirty ? classes.dirtyInput : classes.notDirtyInput}
+    <Stack
+      data-cy={`enum-input-${id}`}
+      direction="row"
+      spacing={1}
+      alignItems="center"
+      className={isDirty ? classes.dirtyInput : isDirty === false ? classes.notDirtyInput : ''}
+    >
+      <TextField
+        variant="outlined"
+        label={label}
+        size={size}
+        sx={{ flexGrow: 1 }}
+        select
+        value={typeof valueKey === 'string' ? valueKey : ''}
+        SelectProps={{
+          renderValue: (key) => <Box>{getLabelFromEnumKey(key)}</Box>, // Prevent extra padding on selected value
+          'data-cy': `enum-input-select-${id}`,
+          MenuProps: { 'data-cy': `enum-input-menu-${id}` },
+        }}
+        onChange={(event) => changeEnumField(event.target.value)}
       >
-        <TextField
-          variant="outlined"
-          label={label}
-          size="small"
-          sx={{ flexGrow: 1 }}
-          select
-          value={typeof valueKey === 'string' ? valueKey : ''}
-          SelectProps={{
-            renderValue: (key) => <Box>{getLabelFromEnumKey(key)}</Box>, // Prevent extra padding on selected value
-            'data-cy': `enum-input-select-${id}`,
-            MenuProps: { 'data-cy': `enum-input-menu-${id}` },
-          }}
-          onChange={(event) => changeEnumField(event.target.value)}
-        >
-          {enumValues.map((option) => (
-            <MenuItem
-              key={option.key}
-              value={option.key}
-              data-cy={option.key}
-              sx={{ p: '0px' }} // Remove default MenuItem padding to increase the hover area for the items tooltips
+        {enumValues.map((option) => (
+          <MenuItem
+            key={option.key}
+            value={option.key}
+            data-cy={option.key}
+            sx={{ p: '0px' }} // Remove default MenuItem padding to increase the hover area for the items tooltips
+          >
+            <Tooltip
+              data-cy={`enum-input-value-tooltip-${option.key}`}
+              title={option.tooltip}
+              placement="right-end"
+              TransitionComponent={Fade}
+              TransitionProps={{ timeout: 600 }}
             >
-              <Tooltip
-                data-cy={`enum-input-value-tooltip-${option.key}`}
-                title={option.tooltip}
-                placement="right-end"
-                TransitionComponent={Fade}
-                TransitionProps={{ timeout: 600 }}
+              <Box
+                // Extra padding on menu items to increase the hover area for the items tooltips
+                sx={{ px: '16px', py: '6px', width: '100%' }}
               >
-                <Box
-                  // Extra padding on menu items to increase the hover area for the items tooltips
-                  sx={{ px: '16px', py: '6px', width: '100%' }}
-                >
-                  {option.value}
-                </Box>
-              </Tooltip>
-            </MenuItem>
-          ))}
-        </TextField>
-        <TooltipInfo title={tooltipText} variant="small" />
-      </Stack>
-    </Grid>
+                {option.value}
+              </Box>
+            </Tooltip>
+          </MenuItem>
+        ))}
+      </TextField>
+      <TooltipInfo title={tooltipText} variant="small" />
+    </Stack>
   );
 };
 
@@ -128,12 +127,16 @@ BasicEnumInput.propTypes = {
        }`
    */
   enumValues: PropTypes.array.isRequired,
+  /**
+   * Size of the textInput: small (default value), medium or large
+   */
+  size: PropTypes.string,
   /**
    * Boolean value that defines whether the input has been modified or not; if true, a special css class is applied.
    */
   isDirty: PropTypes.bool,
 };
 
 BasicEnumInput.defaultProps = {
-  isDirty: false,
+  size: 'small',
 };
diff --git a/src/inputs/BasicInputs/BasicNumberInput/BasicNumberInput.js b/src/inputs/BasicInputs/BasicNumberInput/BasicNumberInput.js
@@ -1,7 +1,7 @@
 // Copyright (c) Cosmo Tech.
 // Licensed under the MIT license.
 
-import { Grid, Stack, TextField } from '@mui/material';
+import { Stack, TextField } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useState, useRef } from 'react';
@@ -24,6 +24,7 @@ export const BasicNumberInput = (props) => {
     changeNumberField,
     isDirty,
     error,
+    size,
     ...otherProps
   } = props;
 
@@ -85,34 +86,32 @@ export const BasicNumberInput = (props) => {
   }
 
   return (
-    <Grid item xs={3}>
-      <Stack
-        data-cy={`number-input-${id}`}
-        direction="row"
-        spacing={1}
-        alignItems="center"
-        className={isDirty ? classes.dirtyInput : classes.notDirtyInput}
-      >
-        <TextField
-          id={`number-input-${id}`}
-          sx={{ flexGrow: 1 }}
-          variant="outlined"
-          label={label}
-          size="small"
-          value={textInput}
-          onChange={handleChangeEvent}
-          onBlur={handleBlurEvent}
-          onFocus={handleFocusEvent}
-          inputProps={inputProps}
-          InputProps={{
-            inputComponent: NumberFormat,
-          }}
-          error={!!error}
-          helperText={error?.message ?? ''}
-        />
-        <TooltipInfo title={tooltipText} variant="small" />
-      </Stack>
-    </Grid>
+    <Stack
+      data-cy={`number-input-${id}`}
+      direction="row"
+      spacing={1}
+      alignItems="center"
+      className={isDirty ? classes.dirtyInput : isDirty === false ? classes.notDirtyInput : ''}
+    >
+      <TextField
+        id={`number-input-${id}`}
+        sx={{ flexGrow: 1 }}
+        variant="outlined"
+        label={label}
+        size={size}
+        value={textInput}
+        onChange={handleChangeEvent}
+        onBlur={handleBlurEvent}
+        onFocus={handleFocusEvent}
+        inputProps={inputProps}
+        InputProps={{
+          inputComponent: NumberFormat,
+        }}
+        error={!!error}
+        helperText={error?.message ?? ''}
+      />
+      <TooltipInfo title={tooltipText} variant="small" />
+    </Stack>
   );
 };
 
@@ -153,8 +152,12 @@ BasicNumberInput.propTypes = {
    * Error object that contains the type of error and its message
    */
   error: PropTypes.object,
+  /**
+   * Size of the TextField: small (default value), medium or large
+   */
+  size: PropTypes.string,
 };
 
 BasicNumberInput.defaultProps = {
-  isDirty: false,
+  size: 'small',
 };