Merge pull request #89 from bluewave-labs/feature/86-Refactor-TextFie…

…ld-component

Feature/86 refactor text field component

frontend/package.json

@@ -9,6 +9,7 @@
     "@mui/icons-material": "^5.15.19",
     "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.15.18",
+    "@mui/system": "^5.15.20",
     "@mui/x-data-grid": "^7.3.0",
     "@mui/x-date-pickers": "^7.3.1",
     "@mui/x-date-pickers-pro": "^7.3.1",

frontend/src/assets/theme.js

@@ -5,25 +5,24 @@ const theme = createTheme({
     MuiAppBar: {
       styleOverrides: {
         root: {
-          backgroundColor: 'white',
-          color: '#344054',
+          backgroundColor: "white",
+          color: "#344054",
         },
       },
     },
     MuiDrawer: {
       styleOverrides: {
         paper: {
-          width: '250px',
+          width: "250px",
           flexShrink: 0,
           zIndex: 1200,
         },
       },
     },
   },
   typography: {
-    fontFamily: 'Inter',
+    fontFamily: "Inter",
   },
-
 });
 
 export default theme;

frontend/src/components/TextFieldComponents/Chips/ChipAdornment.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Box, Chip } from "@mui/material";
+
+const ChipAdornment = ({ chips }) => (
+  <Box sx={{ display: "flex", gap: 1, mt: -15, mr: 1 }}>
+    {chips.map((chip, index) => (
+      <Chip
+        key={index}
+        label={chip.label}
+        onDelete={chip.onDelete}
+        variant="outlined"
+        sx={{ borderRadius: "5px" }}
+      />
+    ))}
+  </Box>
+);
+
+ChipAdornment.propTypes = {
+  chips: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      onDelete: PropTypes.func,
+    })
+  ).isRequired,
+};
+
+export default ChipAdornment;

frontend/src/components/TextFieldComponents/CustomTextField/CustomTextField.jsx

@@ -0,0 +1,83 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { TextField, Box, InputLabel } from "@mui/material";
+import ChipAdornment from "../Chips/ChipAdornment";
+import "./CustomTextFieldStyles.css";
+
+const CustomTextField = ({
+  labelText = "",
+  value = "",
+  onChange = () => {},
+  helperText = "",
+  error = false,
+  multiline = false,
+  rows = 1,
+  startAdornment = null,
+  endAdornment = null,
+  placeholder = "",
+  chips = null,
+  labelFontWeight = 600,
+  TextFieldWidth = "320px",
+  inputHeight = "34px",
+}) => {
+  return (
+    <Box>
+      <InputLabel sx={{ fontWeight: labelFontWeight }}>{labelText}</InputLabel>
+      <TextField
+        className="textField"
+        sx={{ width: TextFieldWidth }}
+        fullWidth
+        margin="normal"
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        error={error}
+        multiline={multiline}
+        rows={rows}
+        helperText={helperText}
+        InputProps={{
+          startAdornment: startAdornment,
+          endAdornment: endAdornment,
+          ...(chips &&
+            chips.length > 0 && {
+              startAdornment: <ChipAdornment chips={chips} />,
+            }),
+        }}
+        inputProps={{
+          style: {
+            height: inputHeight,
+            paddingTop: 0,
+            paddingBottom: 0,
+          },
+        }}
+        FormHelperTextProps={{
+          sx: { margin: 0, paddingTop: 1 },
+        }}
+      />
+    </Box>
+  );
+};
+
+CustomTextField.propTypes = {
+  labelText: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  helperText: PropTypes.string,
+  error: PropTypes.bool,
+  multiline: PropTypes.bool,
+  rows: PropTypes.number,
+  startAdornment: PropTypes.node,
+  endAdornment: PropTypes.node,
+  placeholder: PropTypes.string,
+  chips: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      onDelete: PropTypes.func,
+    })
+  ),
+  labelFontWeight: PropTypes.number,
+  TextFieldWidth: PropTypes.string,
+  inputHeight: PropTypes.string,
+};
+
+export default CustomTextField;

frontend/src/components/TextFieldComponents/CustomTextField/CustomTextFieldStyles.css

@@ -0,0 +1,35 @@
+.textField .MuiSvgIcon-colorError {
+  color: var(--border-error-solid);
+}
+
+.textField svg {
+  color: var(--light-border-color);
+}
+
+.textField .MuiDivider-root {
+  margin: 0 10px;
+}
+
+.textField .MuiOutlinedInput-root {
+  font-size: 13px;
+  box-shadow: 0px 1px 2px 0px #1018280d;
+}
+
+.textField .MuiOutlinedInput-root {
+  &:hover fieldset {
+    border-color: var(--main-purple);
+  }
+  &.Mui-focused fieldset {
+    border-color: var(--main-purple);
+  }
+}
+
+.textField .MuiButton-root {
+  font-size: 13px;
+  color: var(--second-text-color);
+}
+
+.MuiBox-root .MuiInputLabel-root {
+  font-size: 13px;
+  color: var(--second-text-color);
+}

frontend/src/components/TextFieldComponents/CustomTextField/ReadMe.md

@@ -0,0 +1,20 @@
+# CustomTextField Component
+
+The `CustomTextField` component is a customized version of the Material UI `TextField` with additional functionalities. It includes Material Ui's `InputLabel` for labelling, adornments for adding icons or other elements at the start or end of the input/textarea, and can also display chips inside the textfield.
+
+## Prop Types
+
+- **labelText** (string): A label that describes the content of the text field.
+- **value** (string): The value of the input element.
+- **onChange** (func): Callback function that is called when the value of the input changes.
+- **helperText** (string): The text that will be displayed as the helper text for the text field.
+- **error** (bool): A boolean value that determines whether the text field should display an error state.
+- **multiline** (bool): A boolean value that determines whether the text field should allow multiple lines of text.
+- **rows** (number): The number of rows that the text field should display when in multiline mode.
+- **startAdornment** (node): The node that will be displayed as the start adornment for the text field.
+- **endAdornment** (node): The node that will be displayed as the end adornment for the text field.
+- **placeholder** (string): The short hint displayed in the input before the user enters a value.
+- **chips** (array): An array of objects that represent chips to be displayed in the text field.
+- **labelFontWeight** (number): The font weight of the label text.
+- **TextFieldWidth** (string): The width of the text field.
+- **inputHeight** (string): The height of the input field.

frontend/src/components/TextFieldComponents/TextFieldComponents.css

@@ -0,0 +1,15 @@
+.textField-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3;
+  padding: 50px;
+}
+
+.textField-section-left,
+.textField-section-right {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  gap: 20px;
+}