coder · aslilac · Mar 11, 2024 · Mar 7, 2024 · Mar 7, 2024 · Mar 7, 2024
diff --git a/site/src/components/Filter/filter.tsx b/site/src/components/Filter/filter.tsx
@@ -34,7 +34,7 @@ import {
   SearchEmpty,
   SearchInput,
   searchStyles,
-} from "components/Menu/Search";
+} from "components/Search/Search";
 import { useDebouncedFunction } from "hooks/debounce";
 import type { useFilterMenu } from "./menu";
 import type { BaseOption } from "./options";
@@ -612,7 +612,7 @@ function SearchMenu<TOption extends BaseOption>({
         <SearchInput
           autoFocus
           value={query}
-          ref={searchInputRef}
+          $$ref={searchInputRef}
           onChange={(e) => {
             onQueryChange(e.target.value);
           }}

diff --git a/site/src/components/Menu/Search.tsx b/site/src/components/Menu/Search.tsx
diff --git a/site/src/components/Search/Search.stories.tsx b/site/src/components/Search/Search.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Search, 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 WithPlaceholder: Story = {
+  args: {
+    label: "uwu",
+    placeholder: "uwu",
+  },
+};
diff --git a/site/src/components/Search/Search.tsx b/site/src/components/Search/Search.tsx
@@ -0,0 +1,117 @@
+import type { Interpolation, Theme } from "@emotion/react";
+import SearchOutlined from "@mui/icons-material/SearchOutlined";
+// eslint-disable-next-line no-restricted-imports -- use it to have the component prop
+import Box, { type BoxProps } from "@mui/material/Box";
+import visuallyHidden from "@mui/utils/visuallyHidden";
+import type { FC, HTMLAttributes, InputHTMLAttributes, Ref } from "react";
+
+interface SearchProps extends Omit<BoxProps, "ref"> {
+  $$ref?: Ref<unknown>;
+}
+
+/**
+ * A container component meant for `SearchInput`
+ *
+ * ```
+ * <Search>
+ *   <SearchInput />
+ * </Search>
+ * ```
+ */
+export const Search: FC<SearchProps> = ({ children, $$ref, ...boxProps }) => {
+  return (
+    <Box ref={$$ref} {...boxProps} css={SearchStyles.container}>
+      <SearchOutlined css={SearchStyles.icon} />
+      {children}
+    </Box>
+  );
+};
+
+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>;
+};
+
+export const SearchInput: FC<SearchInputProps> = ({
+  label,
+  $$ref,
+  ...inputProps
+}) => {
+  return (
+    <>
+      <label css={{ ...visuallyHidden }} htmlFor={inputProps.id}>
+        {label}
+      </label>
+      <input
+        ref={$$ref}
+        tabIndex={-1}
+        type="text"
+        placeholder="Search..."
+        css={SearchInputStyles.input}
+        {...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}>
+      {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>>;
diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
@@ -11,13 +11,13 @@ import {
 import type { Template } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { Loader } from "components/Loader/Loader";
-import { SearchEmpty, searchStyles } from "components/Menu/Search";
 import { OverflowY } from "components/OverflowY/OverflowY";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "components/Popover/Popover";
+import { SearchEmpty, searchStyles } from "components/Search/Search";
 import { SearchBox } from "./WorkspacesSearchBox";
 
 const ICON_SIZE = 18;

diff --git a/site/src/pages/WorkspacesPage/WorkspacesSearchBox.tsx b/site/src/pages/WorkspacesPage/WorkspacesSearchBox.tsx
@@ -5,41 +5,38 @@
  * reusable this is outside of workspace dropdowns.
  */
 import {
-  type ForwardedRef,
+  type FC,
   type KeyboardEvent,
   type InputHTMLAttributes,
-  forwardRef,
+  type Ref,
   useId,
 } from "react";
-import { Search, SearchInput } from "components/Menu/Search";
+import { Search, SearchInput } from "components/Search/Search";
 
 interface SearchBoxProps extends InputHTMLAttributes<HTMLInputElement> {
   label?: string;
   value: string;
   onKeyDown?: (event: KeyboardEvent) => void;
   onValueChange: (newValue: string) => void;
+  $$ref?: Ref<HTMLInputElement>;
 }
 
-export const SearchBox = forwardRef(function SearchBox(
-  props: SearchBoxProps,
-  ref?: ForwardedRef<HTMLInputElement>,
-) {
-  const {
-    onValueChange,
-    onKeyDown,
-    label = "Search",
-    placeholder = "Search...",
-    ...attrs
-  } = props;
-
+export const SearchBox: FC<SearchBoxProps> = ({
+  onValueChange,
+  onKeyDown,
+  label = "Search",
+  placeholder = "Search...",
+  $$ref,
+  ...attrs
+}) => {
   const hookId = useId();
   const inputId = `${hookId}-${SearchBox.name}-input`;
 
   return (
     <Search>
       <SearchInput
         label={label}
-        ref={ref}
+        $$ref={$$ref}
         id={inputId}
         autoFocus
         tabIndex={0}
@@ -50,4 +47,4 @@ export const SearchBox = forwardRef(function SearchBox(
       />
     </Search>
   );
-});
+};