initial commit

src/Components/Inputs/TextInput/Adornments/index.jsx

@@ -0,0 +1,68 @@
+import { Stack, Typography, InputAdornment, IconButton } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import PropTypes from "prop-types";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
+import Visibility from "@mui/icons-material/Visibility";
+import ReorderRoundedIcon from "@mui/icons-material/ReorderRounded";
+import DeleteIcon from "../../../../assets/icons/trash-bin.svg?react";
+
+export const HttpAdornment = ({ https }) => {
+	const theme = useTheme();
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			height="100%"
+			sx={{
+				borderRight: `solid 1px ${theme.palette.primary.lowContrast}`,
+				backgroundColor: theme.palette.tertiary.main,
+				pl: theme.spacing(6),
+			}}
+		>
+			<Typography
+				component="h5"
+				paddingRight={"var(--env-var-spacing-1-minus)"}
+				color={theme.palette.primary.contrastTextSecondary}
+				sx={{ lineHeight: 1, opacity: 0.8 }}
+			>
+				{https ? "https" : "http"}
+			</Typography>
+		</Stack>
+	);
+};
+
+HttpAdornment.propTypes = {
+	https: PropTypes.bool.isRequired,
+	prefix: PropTypes.string,
+};
+
+export const PasswordEndAdornment = ({ fieldType, setFieldType }) => {
+	const theme = useTheme();
+	return (
+		<InputAdornment position="end">
+			<IconButton
+				aria-label="toggle password visibility"
+				onClick={() => setFieldType(fieldType === "password" ? "text" : "password")}
+				sx={{
+					color: theme.palette.primary.lowContrast,
+					padding: theme.spacing(1),
+					"&:focus-visible": {
+						outline: `2px solid ${theme.palette.primary.main}`,
+						outlineOffset: `2px`,
+					},
+					"& .MuiTouchRipple-root": {
+						pointerEvents: "none",
+						display: "none",
+					},
+				}}
+			>
+				{fieldType === "password" ? <VisibilityOff /> : <Visibility />}
+			</IconButton>
+		</InputAdornment>
+	);
+};
+
+PasswordEndAdornment.propTypes = {
+	fieldType: PropTypes.string,
+	setFieldType: PropTypes.func,
+};

src/Components/Inputs/TextInput/index.jsx

@@ -0,0 +1,179 @@
+import { Stack, TextField, Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import { forwardRef, useState, cloneElement } from "react";
+import PropTypes from "prop-types";
+
+const getSx = (theme, type, maxWidth) => {
+	const sx = {
+		maxWidth: maxWidth,
+		"&  .MuiOutlinedInput-root ": {
+			"&:hover .MuiOutlinedInput-notchedOutline": {
+				borderColor: theme.palette.primary.contrastText, // Adjust hover border color
+			},
+			"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+				borderColor: theme.palette.accent.main, // Adjust focus border color
+			},
+			"&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
+				borderColor: theme.palette.primary.contrastText, // CAIO_REVIEW
+				opacity: 0.5,
+			},
+		},
+
+		"& .MuiFormHelperText-root": {
+			position: "absolute",
+			bottom: `-${theme.spacing(24)}`,
+			minHeight: theme.spacing(24),
+		},
+	};
+
+	if (type === "url") {
+		return {
+			...sx,
+			"& .MuiInputBase-root": { padding: 0 },
+			"& .MuiStack-root": {
+				borderTopLeftRadius: theme.shape.borderRadius,
+				borderBottomLeftRadius: theme.shape.borderRadius,
+			},
+		};
+	}
+	return sx;
+};
+
+const Required = () => {
+	const theme = useTheme();
+	return (
+		<Typography
+			component="span"
+			ml={theme.spacing(1)}
+			color={theme.palette.error.main}
+		>
+			*
+		</Typography>
+	);
+};
+
+const Optional = ({ optionalLabel }) => {
+	const theme = useTheme();
+	return (
+		<Typography
+			component="span"
+			fontSize="inherit"
+			fontWeight={400}
+			ml={theme.spacing(2)}
+			sx={{ opacity: 0.6 }}
+		>
+			{optionalLabel || "(optional)"}
+		</Typography>
+	);
+};
+
+Optional.propTypes = {
+	optionalLabel: PropTypes.string,
+};
+
+const TextInput = forwardRef(
+	(
+		{
+			id,
+			name,
+			type,
+			value,
+			placeholder,
+			isRequired,
+			isOptional,
+			optionalLabel,
+			onChange,
+			onBlur,
+			error = false,
+			helperText = null,
+			startAdornment = null,
+			endAdornment = null,
+			label = null,
+			maxWidth = "100%",
+			flex,
+			marginTop,
+			marginRight,
+			marginBottom,
+			marginLeft,
+			disabled = false,
+			hidden = false,
+		},
+		ref
+	) => {
+		const [fieldType, setFieldType] = useState(type);
+		const theme = useTheme();
+		return (
+			<Stack
+				flex={flex}
+				display={hidden ? "none" : ""}
+				marginTop={marginTop}
+				marginRight={marginRight}
+				marginBottom={marginBottom}
+				marginLeft={marginLeft}
+			>
+				<Typography
+					component="h3"
+					fontSize={"var(--env-var-font-size-medium)"}
+					color={theme.palette.primary.contrastTextSecondary}
+					fontWeight={500}
+				>
+					{label}
+					{isRequired && <Required />}
+					{isOptional && <Optional optionalLabel={optionalLabel} />}
+				</Typography>
+				<TextField
+					id={id}
+					name={name}
+					type={fieldType}
+					value={value}
+					placeholder={placeholder}
+					onChange={onChange}
+					onBlur={onBlur}
+					error={error}
+					helperText={helperText}
+					inputRef={ref}
+					sx={getSx(theme, type, maxWidth)}
+					slotProps={{
+						input: {
+							startAdornment: startAdornment,
+							endAdornment: endAdornment
+								? cloneElement(endAdornment, { fieldType, setFieldType })
+								: null,
+						},
+					}}
+					disabled={disabled}
+				/>
+			</Stack>
+		);
+	}
+);
+
+TextInput.displayName = "TextInput";
+
+TextInput.propTypes = {
+	type: PropTypes.string,
+	id: PropTypes.string.isRequired,
+	name: PropTypes.string,
+	value: PropTypes.string,
+	placeholder: PropTypes.string,
+	isRequired: PropTypes.bool,
+	isOptional: PropTypes.bool,
+	optionalLabel: PropTypes.string,
+	onChange: PropTypes.func,
+	onBlur: PropTypes.func,
+	error: PropTypes.bool,
+	helperText: PropTypes.string,
+	startAdornment: PropTypes.node,
+	endAdornment: PropTypes.node,
+	label: PropTypes.string,
+	maxWidth: PropTypes.string,
+	flex: PropTypes.number,
+	marginTop: PropTypes.string,
+	marginRight: PropTypes.string,
+	marginBottom: PropTypes.string,
+	marginLeft: PropTypes.string,
+	disabled: PropTypes.bool,
+	hidden: PropTypes.bool,
+};
+
+export default TextInput;