uptime

client/src/Components/v2/inputs/AutoComplete.tsx

@@ -0,0 +1,88 @@
+import Autocomplete from "@mui/material/Autocomplete";
+import type { AutocompleteProps } from "@mui/material/Autocomplete";
+import { TextField, Checkbox } from "@/Components/v2/inputs";
+import ListItem from "@mui/material/ListItem";
+import Stack from "@mui/material/Stack";
+import { useTheme } from "@mui/material/styles";
+import { FieldLabel } from "./FieldLabel";
+import { ChevronDown } from "lucide-react";
+
+type AutoCompleteInputProps = Omit<
+	AutocompleteProps<any, boolean, boolean, boolean>,
+	"renderInput"
+> & {
+	renderInput?: AutocompleteProps<any, boolean, boolean, boolean>["renderInput"];
+	fieldLabel?: string;
+	required?: boolean;
+};
+
+export const AutoCompleteInput = ({
+	fieldLabel,
+	required,
+	renderInput,
+	...props
+}: AutoCompleteInputProps) => {
+	const theme = useTheme();
+	const multiple = props.multiple;
+
+	const defaultRenderInput = (params: any) => (
+		<TextField
+			{...params}
+			placeholder="Type to search"
+		/>
+	);
+
+	const autocomplete = (
+		<Autocomplete
+			{...props}
+			disableCloseOnSelect={!!multiple}
+			popupIcon={
+				<ChevronDown
+					size={18}
+					strokeWidth={1.5}
+					style={{ marginRight: theme.spacing(3) }}
+				/>
+			}
+			renderInput={renderInput || defaultRenderInput}
+			getOptionKey={(option) => option.id}
+			renderTags={() => null}
+			renderOption={(props, option, { selected }) => {
+				const { key, ...optionProps } = props;
+				return (
+					<ListItem
+						key={key}
+						{...optionProps}
+					>
+						<Stack
+							direction={"row"}
+							alignItems={"center"}
+							gap={theme.spacing(2)}
+						>
+							{multiple && <Checkbox checked={selected} />}
+							{option.name}
+						</Stack>
+					</ListItem>
+				);
+			}}
+			sx={{
+				"&.MuiAutocomplete-root .MuiAutocomplete-input": {
+					padding: `0 ${theme.spacing(5)}`,
+				},
+				"& .MuiInputBase-root .MuiAutocomplete-endAdornment": {
+					right: theme.spacing(3),
+				},
+			}}
+		/>
+	);
+
+	if (fieldLabel) {
+		return (
+			<Stack spacing={theme.spacing(2)}>
+				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
+				{autocomplete}
+			</Stack>
+		);
+	}
+
+	return autocomplete;
+};

client/src/Components/v2/inputs/TextInput.tsx

@@ -0,0 +1,56 @@
+import { forwardRef } from "react";
+import TextField from "@mui/material/TextField";
+import type { TextFieldProps } from "@mui/material";
+import { typographyLevels } from "@/Utils/Theme/v2Palette";
+import { useTheme } from "@mui/material/styles";
+import Stack from "@mui/material/Stack";
+import { FieldLabel } from "./FieldLabel";
+
+interface TextInputProps extends Omit<TextFieldProps, "label"> {
+	fieldLabel?: string;
+	required?: boolean;
+}
+
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput(
+	{ fieldLabel, required, ...props },
+	ref
+) {
+	const theme = useTheme();
+
+	const input = (
+		<TextField
+			{...props}
+			inputRef={ref}
+			sx={{
+				"& .MuiOutlinedInput-root": {
+					borderRadius: theme.shape.borderRadius,
+					height: 34,
+					fontSize: typographyLevels.base,
+				},
+				"& .MuiOutlinedInput-notchedOutline": {
+					borderColor: theme.palette.divider,
+				},
+				"&:hover .MuiOutlinedInput-notchedOutline": {
+					borderColor: theme.palette.divider,
+				},
+				"& .MuiFormHelperText-root": {
+					marginLeft: 0,
+					marginRight: 0,
+					marginTop: theme.spacing(1),
+				},
+			}}
+		/>
+	);
+
+	if (fieldLabel) {
+		return (
+			<Stack spacing={theme.spacing(2)}>
+				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
+				{input}
+			</Stack>
+		);
+	}
+
+	return input;
+});
+TextInput.displayName = "TextInput";

client/src/Components/v2/inputs/index.tsx

@@ -2,3 +2,5 @@ export { ButtonInput as Button } from "./Button";
 export * from "./FieldLabel";
 export { SelectInput as Select } from "./Select";
 export { CheckboxInput as Checkbox } from "./Checkbox";
+export { AutoCompleteInput as Autocomplete } from "./AutoComplete";
+export { TextInput as TextField } from "./TextInput";