feat(onboarding): enhance integration setup with Docker discovery and URL templating (#5607)

packages/ui/src/components/index.tsx

@@ -16,3 +16,9 @@ export { MaskedImage } from "./masked-image";
 export { MaskedOrNormalImage } from "./masked-or-normal-image";
 export { LanguageIcon } from "./language-icon";
 export { Link } from "./link";
+export {
+  SelectGridLayout,
+  selectGridCardHeight,
+  selectGridCols,
+  selectGridScrollMaxHeight,
+} from "../select-grid-layout";

packages/ui/src/index.ts

@@ -3,6 +3,7 @@ import type { MantineProviderProps } from "@mantine/core";
 import { theme } from "./theme";
 
 export { theme } from "./theme";
+export { modalSizeForm, modalSizeSelect } from "./theme/modal";
 export * from "./components";
 
 export const uiConfiguration = {

packages/ui/src/select-grid-layout.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import type { KeyboardEvent, ReactNode } from "react";
+import { Input, ScrollArea, SimpleGrid, Stack } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
+
+export const selectGridCols = { base: 2, xs: 3, sm: 4, md: 5 };
+export const selectGridCardHeight = 140;
+export const selectGridScrollMaxHeight = "70vh";
+
+interface SelectGridLayoutProps {
+  search: string;
+  onSearchChange: (value: string) => void;
+  placeholder: string;
+  onSearchKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+  disableScroll?: boolean;
+  disableAutoFocus?: boolean;
+  children: ReactNode;
+}
+
+export const SelectGridLayout = ({
+  search,
+  onSearchChange,
+  placeholder,
+  onSearchKeyDown,
+  disableScroll = false,
+  disableAutoFocus = false,
+  children,
+}: SelectGridLayoutProps) => {
+  const grid = (
+    <SimpleGrid cols={selectGridCols} spacing="sm">
+      {children}
+    </SimpleGrid>
+  );
+
+  return (
+    <Stack>
+      <Input
+        value={search}
+        onChange={(event) => onSearchChange(event.currentTarget.value)}
+        leftSection={<IconSearch />}
+        placeholder={placeholder}
+        data-autofocus={disableAutoFocus ? undefined : true}
+        onKeyDown={onSearchKeyDown}
+      />
+
+      {disableScroll ? grid : <ScrollArea.Autosize mah={selectGridScrollMaxHeight}>{grid}</ScrollArea.Autosize>}
+    </Stack>
+  );
+};

packages/ui/src/theme.ts

@@ -1,5 +1,7 @@
 import { createTheme, rem } from "@mantine/core";
 
+import { modalComponent } from "./theme/modal";
+
 export const theme = createTheme({
   primaryColor: "red",
   autoContrast: true,
@@ -99,5 +101,6 @@ export const theme = createTheme({
         overlayProps: { radius: "sm", blur: 2 },
       },
     },
+    Modal: modalComponent,
   },
 });

packages/ui/src/theme/modal.ts

@@ -0,0 +1,33 @@
+import type { MantineTheme, MantineThemeComponent, ModalProps } from "@mantine/core";
+
+export const modalSizeSelect = "xxl";
+export const modalSizeForm = "lg";
+
+const fixedModalSizes = new Set([modalSizeSelect, modalSizeForm]);
+
+const modalWidth = "min(var(--modal-size), calc(100vw - 2 * var(--mantine-spacing-md)))";
+
+export const modalComponent: MantineThemeComponent = {
+  vars: (_theme: MantineTheme, props: Partial<ModalProps>) => {
+    if (props.size === modalSizeSelect) {
+      return { root: { "--modal-size": "75rem" } };
+    }
+    return { root: {} };
+  },
+  styles: (_theme: MantineTheme, props: Partial<ModalProps>) => {
+    const isFixedSize = typeof props.size === "string" && fixedModalSizes.has(props.size);
+    if (!isFixedSize) {
+      return {};
+    }
+
+    return {
+      content: {
+        width: modalWidth,
+        minWidth: modalWidth,
+      },
+      body: {
+        width: "100%",
+      },
+    };
+  },
+};