feat/SOF-6914 (#33)

* feat: custom select and text field
* feat: add required prop to BasicTextField
* chore: cleanup

src/mui/components/select/BasicSelect.tsx

@@ -0,0 +1,60 @@
+import MenuItem from "@mui/material/MenuItem";
+import TextField from "@mui/material/TextField";
+import React from "react";
+import s from "underscore.string";
+
+export type AvailableValue = {
+    id: string | undefined;
+    name: string;
+};
+
+type BasicSelectProps = {
+    disabled?: boolean;
+    selectedValue: string;
+    options: AvailableValue[];
+    onChange: (newValue: string) => void;
+    label: string;
+    labelAsPlaceholder?: boolean;
+    renderMenuItemContent?: (value: AvailableValue) => JSX.Element;
+};
+
+export default function BasicSelect({
+    disabled = false,
+    selectedValue,
+    options,
+    onChange = () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
+    label,
+    labelAsPlaceholder = true,
+    renderMenuItemContent,
+}: BasicSelectProps) {
+    const inputLabelProps = labelAsPlaceholder ? {} : { shrink: true };
+
+    const optionsList = options
+        ? options.map((availableValue) => {
+              const menuItemContent = renderMenuItemContent
+                  ? renderMenuItemContent(availableValue)
+                  : availableValue.name;
+
+              return (
+                  <MenuItem key={availableValue.id} value={availableValue.id}>
+                      {menuItemContent}
+                  </MenuItem>
+              );
+          })
+        : [];
+
+    return (
+        <TextField
+            disabled={disabled}
+            label={s.capitalize(label)}
+            value={selectedValue}
+            onChange={(e) => onChange(e.target.value)}
+            variant="outlined"
+            fullWidth
+            select
+            size="small"
+            InputLabelProps={inputLabelProps}>
+            {optionsList}
+        </TextField>
+    );
+}

src/mui/components/select/index.ts

@@ -1,2 +1,5 @@
+import BasicSelect from "./BasicSelect";
+
 export { default } from "./Select";
 export * from "./Select";
+export { BasicSelect };

src/mui/components/textField/BasicTextField.tsx

@@ -0,0 +1,54 @@
+import { SxProps } from "@mui/material";
+import TextField, { TextFieldProps } from "@mui/material/TextField";
+import React, { HTMLInputTypeAttribute } from "react";
+
+type BasicTextFieldProps = {
+    label: string;
+    value?: string | number;
+    defaultValue?: string | number;
+    onChange?: (newValue: string | number) => void;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    size?: "small" | "medium";
+    labelAsPlaceholder?: boolean;
+    sx?: SxProps;
+    type?: HTMLInputTypeAttribute;
+    variant?: "standard" | "filled" | "outlined";
+    required?: boolean;
+};
+
+function BasicTextField({
+    label,
+    value,
+    defaultValue,
+    onChange = () => {}, // eslint-disable-line @typescript-eslint/no-empty-function
+    disabled = false,
+    fullWidth = true,
+    size = "medium",
+    labelAsPlaceholder = true,
+    sx = {},
+    type = "text",
+    variant = "outlined",
+    required = false,
+}: BasicTextFieldProps) {
+    const inputLabelProps = labelAsPlaceholder ? {} : { shrink: true };
+
+    return (
+        <TextField
+            type={type}
+            sx={sx}
+            label={label}
+            value={value}
+            defaultValue={defaultValue}
+            fullWidth={fullWidth}
+            disabled={disabled}
+            variant={variant}
+            size={size}
+            required={required}
+            InputLabelProps={inputLabelProps}
+            onChange={(e) => onChange(e.target.value)}
+        />
+    );
+}
+
+export default BasicTextField;

src/mui/components/textField/index.ts

@@ -0,0 +1,3 @@
+import BasicTextField from "./BasicTextField";
+
+export { BasicTextField };