chore(site): convert more components from Emotion to TailwindCSS (coder#19719)

## Changes made
- Patched React `CSSProperties` type to add support for custom CSS
properties
- Updated several of the components in the `components` directory to
Tailwind
- Updated most of the `WorkspacePageBuildView` component to Tailwind to
account for CSS specificity changes
- Updated `Search` to address accessibility violation and removed all
MUI logic
- Updated `Search` stories (added new story, decoupled all stories from
single decorator)
- Updated `autoFocus` behavior in `SearchField`
- Updated the styling for `WorkspacePageBuildView` to make sure the tabs
had enough padding
- Fixed layout effect in `WorkspacePageBuildView` to fire correctly

Author: buenos-nachos

site/src/@types/react.d.ts

@@ -0,0 +1,7 @@
+declare module "react" {
+	interface CSSProperties {
+		[key: `--${string}`]: string | number | undefined;
+	}
+}
+
+export {};

site/src/components/Filter/SelectFilter.tsx

@@ -52,8 +52,8 @@ export const SelectFilter: FC<SelectFilterProps> = ({
 			<SelectMenuTrigger>
 				<SelectMenuButton
 					startIcon={selectedOption?.startIcon}
-					css={{ flexBasis: width, flexGrow: 1 }}
-					className="shrink-0"
+					className="shrink-0 grow"
+					style={{ flexBasis: width }}
 					aria-label={label}
 				>
 					{selectedOption?.label ?? placeholder}

site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx

@@ -506,7 +506,7 @@ export const MultiSelectCombobox = forwardRef<
 									<Badge
 										key={option.value}
 										className={cn(
-											"data-[disabled]:bg-content-disabled data-[disabled]:text-surface-tertiarydata-[disabled]:hover:bg-content-disabled",
+											"data-[disabled]:bg-content-disabled data-[disabled]:text-surface-tertiary data-[disabled]:hover:bg-content-disabled",
 											"data-[fixed]:bg-content-disabled data-[fixed]:text-surface-tertiary data-[fixed]:hover:bg-surface-secondary",
 											badgeClassName,
 										)}

site/src/components/Search/Search.stories.tsx

@@ -1,26 +1,46 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Search, SearchInput } from "./Search";
+import { Search, SearchEmpty, SearchInput } from "./Search";
 
 const meta: Meta<typeof SearchInput> = {
 	title: "components/Search",
 	component: SearchInput,
-	decorators: [
-		(Story) => (
-			<Search>
-				<Story />
-			</Search>
-		),
-	],
 };
 
 export default meta;
 type Story = StoryObj<typeof SearchInput>;
 
-export const Example: Story = {};
+export const Example: Story = {
+	render: (props) => (
+		<Search>
+			<SearchInput {...props} />
+		</Search>
+	),
+};
 
-export const WithPlaceholder: Story = {
+export const WithCustomPlaceholder: Story = {
 	args: {
 		label: "uwu",
 		placeholder: "uwu",
 	},
+	render: (props) => (
+		<Search>
+			<SearchInput {...props} />
+		</Search>
+	),
+};
+
+export const WithSearchEmpty: Story = {
+	args: {
+		label: "I crave the certainty of steel",
+		placeholder: "Alas, I am empty",
+	},
+	render: (props) => (
+		<div className="flex flex-col gap-2">
+			<Search>
+				<SearchInput {...props} />
+			</Search>
+
+			<SearchEmpty />
+		</div>
+	),
 };

site/src/components/Search/Search.tsx

@@ -1,12 +1,9 @@
-import type { Interpolation, Theme } from "@emotion/react";
-// biome-ignore lint/style/noRestrictedImports: use it to have the component prop
-import Box, { type BoxProps } from "@mui/material/Box";
-import visuallyHidden from "@mui/utils/visuallyHidden";
 import { SearchIcon } from "lucide-react";
 import type { FC, HTMLAttributes, InputHTMLAttributes, Ref } from "react";
+import { cn } from "utils/cn";
 
-interface SearchProps extends Omit<BoxProps, "ref"> {
-	$$ref?: Ref<unknown>;
+interface SearchProps extends HTMLAttributes<HTMLDivElement> {
+	ref?: Ref<HTMLDivElement>;
 }
 
 /**
@@ -18,100 +15,63 @@ interface SearchProps extends Omit<BoxProps, "ref"> {
  * </Search>
  * ```
  */
-export const Search: FC<SearchProps> = ({ children, $$ref, ...boxProps }) => {
+export const Search: FC<SearchProps> = ({
+	children,
+	ref,
+	className,
+	...props
+}) => {
 	return (
-		<Box ref={$$ref} {...boxProps} css={SearchStyles.container}>
-			<SearchIcon className="size-icon-xs" css={SearchStyles.icon} />
+		<div
+			ref={ref}
+			{...props}
+			className={cn(
+				"flex items-center h-10 pl-4 border-0 border-b border-solid border-border",
+				className,
+			)}
+		>
+			<SearchIcon className="size-icon-xs text-sm text-content-secondary" />
 			{children}
-		</Box>
+		</div>
 	);
 };
 
-const SearchStyles = {
-	container: (theme) => ({
-		display: "flex",
-		alignItems: "center",
-		paddingLeft: 16,
-		height: 40,
-		borderBottom: `1px solid ${theme.palette.divider}`,
-	}),
-
-	icon: (theme) => ({
-		fontSize: 14,
-		color: theme.palette.text.secondary,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
-
 type SearchInputProps = InputHTMLAttributes<HTMLInputElement> & {
 	label?: string;
-	$$ref?: Ref<HTMLInputElement>;
+	ref?: Ref<HTMLInputElement>;
 };
 
 export const SearchInput: FC<SearchInputProps> = ({
 	label,
-	$$ref,
+	ref,
+	id,
 	...inputProps
 }) => {
 	return (
 		<>
-			<label css={{ ...visuallyHidden }} htmlFor={inputProps.id}>
+			<label className="sr-only" htmlFor={id}>
 				{label}
 			</label>
 			<input
-				ref={$$ref}
-				tabIndex={-1}
+				ref={ref}
+				id={id}
+				tabIndex={0}
 				type="text"
 				placeholder="Search..."
-				css={SearchInputStyles.input}
+				className="text-inherit h-full border-0 bg-transparent grow basis-0 outline-none pl-4 placeholder:text-content-secondary"
 				{...inputProps}
 			/>
 		</>
 	);
 };
 
-const SearchInputStyles = {
-	input: (theme) => ({
-		color: "inherit",
-		height: "100%",
-		border: 0,
-		background: "none",
-		flex: 1,
-		marginLeft: 16,
-		outline: 0,
-		"&::placeholder": {
-			color: theme.palette.text.secondary,
-		},
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
-
 export const SearchEmpty: FC<HTMLAttributes<HTMLDivElement>> = ({
 	children = "Not found",
 	...props
 }) => {
 	return (
-		<div css={SearchEmptyStyles.empty} {...props}>
+		<div className="text-sm text-content-secondary text-center py-2" {...props}>
 			{children}
 		</div>
 	);
 };
-
-const SearchEmptyStyles = {
-	empty: (theme) => ({
-		fontSize: 13,
-		color: theme.palette.text.secondary,
-		textAlign: "center",
-		paddingTop: 8,
-		paddingBottom: 8,
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
-
-/**
- * Reusable styles for consumers of the base components
- */
-export const searchStyles = {
-	content: {
-		width: 320,
-		padding: 0,
-		borderRadius: 4,
-	},
-} satisfies Record<string, Interpolation<Theme>>;

site/src/components/SearchField/SearchField.tsx

@@ -1,51 +1,49 @@
-import { useTheme } from "@emotion/react";
 import IconButton from "@mui/material/IconButton";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
-import visuallyHidden from "@mui/utils/visuallyHidden";
+import { useEffectEvent } from "hooks/hookPolyfills";
 import { SearchIcon, XIcon } from "lucide-react";
-import { type FC, useEffect, useRef } from "react";
+import { type FC, useLayoutEffect, useRef } from "react";
 
 export type SearchFieldProps = Omit<TextFieldProps, "onChange"> & {
 	onChange: (query: string) => void;
 	autoFocus?: boolean;
 };
 
 export const SearchField: FC<SearchFieldProps> = ({
-	value = "",
+	InputProps,
 	onChange,
+	value = "",
 	autoFocus = false,
-	InputProps,
 	...textFieldProps
 }) => {
-	const theme = useTheme();
-	const inputRef = useRef<HTMLInputElement>(null);
-
-	useEffect(() => {
+	// MUI's autoFocus behavior is wonky. If you set autoFocus=true, the
+	// component will keep getting focus on every single render, even if there
+	// are other input elements on screen. We want this to be one-time logic
+	const inputRef = useRef<HTMLInputElement | null>(null);
+	const focusOnMount = useEffectEvent((): void => {
 		if (autoFocus) {
 			inputRef.current?.focus();
 		}
 	});
+	useLayoutEffect(() => {
+		focusOnMount();
+	}, [focusOnMount]);
 
 	return (
 		<TextField
-			// Specifying `minWidth` so that the text box can't shrink so much
+			inputRef={inputRef}
+			// Specifying min width so that the text box can't shrink so much
 			// that it becomes un-clickable as we add more filter controls
-			css={{ minWidth: "280px" }}
+			className="min-w-[280px]"
 			size="small"
 			value={value}
 			onChange={(e) => onChange(e.target.value)}
-			inputRef={inputRef}
 			InputProps={{
 				startAdornment: (
 					<InputAdornment position="start">
-						<SearchIcon
-							className="size-icon-xs"
-							css={{
-								color: theme.palette.text.secondary,
-							}}
-						/>
+						<SearchIcon className="size-icon-xs text-content-secondary" />
 					</InputAdornment>
 				),
 				endAdornment: value !== "" && (
@@ -58,7 +56,7 @@ export const SearchField: FC<SearchFieldProps> = ({
 								}}
 							>
 								<XIcon className="size-icon-xs" />
-								<span css={{ ...visuallyHidden }}>Clear search</span>
+								<span className="sr-only">Clear search</span>
 							</IconButton>
 						</Tooltip>
 					</InputAdornment>

site/src/components/SelectMenu/SelectMenu.tsx

@@ -22,8 +22,6 @@ import {
 } from "react";
 import { cn } from "utils/cn";
 
-const SIDE_PADDING = 16;
-
 export const SelectMenu = Popover;
 
 export const SelectMenuTrigger = PopoverTrigger;
@@ -37,13 +35,20 @@ type SelectMenuButtonProps = ButtonProps & {
 export const SelectMenuButton = forwardRef<
 	HTMLButtonElement,
 	SelectMenuButtonProps
->((props, ref) => {
-	const { startIcon, ...restProps } = props;
+>(({ className, startIcon, children, ...props }, ref) => {
 	return (
-		<Button variant="outline" size="lg" ref={ref} {...restProps}>
+		<Button
+			variant="outline"
+			size="lg"
+			ref={ref}
+			// Shrink padding right slightly to account for visual weight of
+			// the chevron
+			className={cn("flex flex-row gap-2 pr-1.5", className)}
+			{...props}
+		>
 			{startIcon}
 			<span className="text-left block overflow-hidden text-ellipsis flex-grow">
-				{props.children}
+				{children}
 			</span>
 			<ChevronDownIcon />
 		</Button>
@@ -55,22 +60,7 @@ export const SelectMenuSearch: FC<SearchFieldProps> = (props) => {
 		<SearchField
 			fullWidth
 			size="medium"
-			css={(theme) => ({
-				borderBottom: `1px solid ${theme.palette.divider}`,
-				"& input": {
-					fontSize: 14,
-				},
-				"& fieldset": {
-					border: 0,
-					borderRadius: 0,
-				},
-				"& .MuiInputBase-root": {
-					padding: `12px ${SIDE_PADDING}px`,
-				},
-				"& .MuiInputAdornment-positionStart": {
-					marginRight: SIDE_PADDING,
-				},
-			})}
+			className="border border-solid border-border [&_input]:text-sm [&_fieldset]:border-0 [&_fieldset]:rounded-none [&_.MuiInputBase-root]:px-4 [&_.MuiInputBase-root]:py-3"
 			{...props}
 			inputProps={{ autoFocus: true, ...props.inputProps }}
 		/>