Bridge integration

packages/ui/components/Autocomplete.tsx

@@ -0,0 +1,38 @@
+import { FC } from "react";
+import { TextField, Autocomplete as AutocompleteInternal } from "@mui/material";
+import { colors } from "../styles/theme";
+
+type AutocompleteProps = {
+  name: string;
+  label: string;
+  options: any[];
+  formState: Record<string, any>;
+  disabled?: boolean;
+  required?: boolean;
+};
+
+export const Autocomplete: FC<AutocompleteProps> = ({
+  name,
+  label,
+  options,
+  formState,
+  disabled = false,
+  required = false,
+}) => (
+  <AutocompleteInternal
+    disablePortal
+    options={options}
+    defaultValue={formState.values[name]}
+    fullWidth
+    size="small"
+    renderInput={(params) => (
+      <TextField
+        {...params}
+        label={label}
+        disabled={disabled}
+        required={required}
+        sx={{ backgroundColor: colors.white }}
+      />
+    )}
+  />
+);

packages/ui/components/List.tsx

@@ -10,6 +10,7 @@ interface ListProps {
   rows: any;
   columns: GridColDef<any>[];
   onRowClick?: (id: string) => void;
+  getRowID?: (row: any) => any;
   buttons?: React.ReactNode;
   paginate?: boolean;
 }
@@ -19,12 +20,20 @@ export const List: FC<ListProps> = ({
   rows,
   columns,
   onRowClick,
+  getRowID,
   buttons,
   paginate = false,
 }) => {
   const { h3 } = typography;
   const { mediumGray, lightGray, veryLightGray, mediumBlue, white, darkGray } =
     colors;
+  const getRowIDInternal = (row: any) => {
+    if (getRowID) {
+      return getRowID(row);
+    }
+
+    return row.id;
+  };
 
   return (
     <Box sx={{ height: "100vh", backgroundColor: lightGray, p: 3 }}>
@@ -92,7 +101,7 @@ export const List: FC<ListProps> = ({
               scrollbarSize={0}
               disableVirtualization
               disableColumnMenu
-              onRowClick={(row: any) => onRowClick?.(row.id)}
+              onRowClick={({ row }: any) => onRowClick?.(getRowIDInternal(row))}
             />
           </Box>
         </Grid>

packages/ui/components/Sidebar.tsx

@@ -28,7 +28,7 @@ import { fonts } from "../styles/theme";
 // import { useSession, signOut } from "next-auth/react";
 
 const openWidth = 270;
-const closedWidth = 100;
+const closedWidth = 70;
 
 const MenuItem = ({
   name,

packages/ui/components/SidebarItem.tsx

@@ -14,7 +14,7 @@ import Image from "next/image";
 import { fonts } from "../styles/theme";
 
 const openWidth = 270;
-const closedWidth = 100;
+const closedWidth = 70;
 
 export const SidebarItem: FC = ({
   name,

packages/ui/components/TextField.tsx

@@ -5,7 +5,7 @@ import {
   IconButton,
 } from "@mui/material";
 import { Refresh as RefreshIcon } from "@mui/icons-material";
-import { colors } from "../styles/theme";
+import { colors, fonts } from "../styles/theme";
 
 type TextFieldProps = {
   name: string;
@@ -28,7 +28,8 @@ export const TextField: FC<TextFieldProps> = ({
   lines = 1,
   helperText,
 }) => {
-  const { darkMediumGray } = colors;
+  const { darkMediumGray, white } = colors;
+  const { roboto } = fonts;
 
   return (
     <InternalTextField
@@ -58,7 +59,8 @@ export const TextField: FC<TextFieldProps> = ({
         ) : null,
 
         sx: {
-          backgroundColor: "#fff",
+          fontFamily: roboto.style.fontFamily,
+          backgroundColor: white,
         },
       }}
     />