From 851095cd67ab9a282e0325496e5e831a3ef69c99 Mon Sep 17 00:00:00 2001
From: Marin Minnerly <me@vocksel.com>
Date: Wed, 24 Jan 2024 17:16:03 -0800
Subject: [PATCH] Make a component for the searchbar

---
 plugin/src/components/Home.luau            | 36 +++------------
 plugin/src/components/Searchbar.luau       | 52 ++++++++++++++++++++++
 plugin/src/components/Searchbar.story.luau | 15 +++++++
 3 files changed, 73 insertions(+), 30 deletions(-)
 create mode 100644 plugin/src/components/Searchbar.luau
 create mode 100644 plugin/src/components/Searchbar.story.luau

diff --git a/plugin/src/components/Home.luau b/plugin/src/components/Home.luau
index 90ce225..660e3b8 100644
--- a/plugin/src/components/Home.luau
+++ b/plugin/src/components/Home.luau
@@ -2,13 +2,12 @@ local React = require("@pkg/React")
 local types = require("@root/types")
 local LoadingSpinner = require("./LoadingSpinner")
 local ExtensionsList = require("./ExtensionsList")
+local Searchbar = require("./Searchbar")
 local getLayoutOrder = require("./getLayoutOrder")
 local useCombinedSize = require("./useCombinedSize")
 
 type PublishedExtension = types.PublishedExtension
-type ExtensionTheme = types.ExtensionTheme
 
-local useCallback = React.useCallback
 local useMemo = React.useMemo
 
 local PADDING = UDim.new(0, 8)
@@ -27,12 +26,6 @@ local function Home(props: Props)
 		return #props.extensions == 0 and not props.err
 	end, { props.extensions, props.err })
 
-	local onSearch = useCallback(function(rbx: TextBox, enterPressed: boolean)
-		if enterPressed then
-			props.onSearch(rbx.Text)
-		end
-	end, {})
-
 	local combinedSize = useCombinedSize()
 
 	return React.createElement("Frame", {
@@ -52,32 +45,15 @@ local function Home(props: Props)
 			PaddingLeft = PADDING,
 		}),
 
-		SearchForm = React.createElement("Frame", {
+		SearchbarWrapper = React.createElement("Frame", {
 			LayoutOrder = getLayoutOrder(),
-			Size = UDim2.fromScale(1, 0),
-			AutomaticSize = Enum.AutomaticSize.Y,
+			AutomaticSize = Enum.AutomaticSize.XY,
 			BackgroundTransparency = 1,
 			[React.Tag] = combinedSize.tag,
 		}, {
-			Input = React.createElement("TextBox", {
-				Text = if props.searchTerm then props.searchTerm else "",
-				PlaceholderText = "Search themes...",
-				Size = UDim2.fromScale(1, 0),
-				TextColor3 = Color3.fromRGB(255, 255, 255),
-				PlaceholderColor3 = Color3.fromRGB(200, 200, 200),
-				TextSize = 16,
-				Font = Enum.Font.Gotham,
-				AutomaticSize = Enum.AutomaticSize.Y,
-				BorderSizePixel = 0,
-				BackgroundColor3 = Color3.fromRGB(100, 100, 100),
-				[React.Event.FocusLost] = onSearch,
-			}, {
-				Padding = React.createElement("UIPadding", {
-					PaddingTop = PADDING,
-					PaddingRight = PADDING,
-					PaddingBottom = PADDING,
-					PaddingLeft = PADDING,
-				}),
+			Searchbar = React.createElement(Searchbar, {
+				searchTerm = props.searchTerm,
+				onSearch = props.onSearch,
 			}),
 		}),
 
diff --git a/plugin/src/components/Searchbar.luau b/plugin/src/components/Searchbar.luau
new file mode 100644
index 0000000..8d09b6c
--- /dev/null
+++ b/plugin/src/components/Searchbar.luau
@@ -0,0 +1,52 @@
+local React = require("@pkg/React")
+
+local useCallback = React.useCallback
+
+local PADDING = UDim.new(0, 8)
+
+export type Props = {
+	searchTerm: string?,
+	onSearch: (searchTerm: string) -> (),
+}
+
+local function Searchbar(props: Props)
+	local onSearch = useCallback(function(rbx: TextBox, enterPressed: boolean)
+		if enterPressed then
+			props.onSearch(rbx.Text)
+		end
+	end, { props.onSearch })
+
+	return React.createElement("Frame", {
+		LayoutOrder = props.LayoutOrder,
+		Size = UDim2.fromScale(1, 0),
+		AutomaticSize = Enum.AutomaticSize.Y,
+		BackgroundTransparency = 1,
+	}, {
+		Input = React.createElement("TextBox", {
+			Text = if props.searchTerm then props.searchTerm else "",
+			PlaceholderText = "Search themes...",
+			Size = UDim2.fromScale(1, 0),
+			TextColor3 = Color3.fromRGB(255, 255, 255),
+			PlaceholderColor3 = Color3.fromRGB(200, 200, 200),
+			TextSize = 16,
+			Font = Enum.Font.Gotham,
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BorderSizePixel = 0,
+			BackgroundColor3 = Color3.fromRGB(100, 100, 100),
+			[React.Event.FocusLost] = onSearch,
+		}, {
+			BorderRadius = React.createElement("UICorner", {
+				CornerRadius = PADDING,
+			}),
+
+			Padding = React.createElement("UIPadding", {
+				PaddingTop = PADDING,
+				PaddingRight = PADDING,
+				PaddingBottom = PADDING,
+				PaddingLeft = PADDING,
+			}),
+		}),
+	})
+end
+
+return Searchbar
diff --git a/plugin/src/components/Searchbar.story.luau b/plugin/src/components/Searchbar.story.luau
new file mode 100644
index 0000000..7cb8664
--- /dev/null
+++ b/plugin/src/components/Searchbar.story.luau
@@ -0,0 +1,15 @@
+local React = require("@pkg/React")
+local Searchbar = require("./Searchbar")
+
+local useState = React.useState
+
+return {
+	story = function()
+		local searchTerm, setSearchTerm = useState(nil :: string?)
+
+		return React.createElement(Searchbar, {
+			searchTerm = searchTerm,
+			onSearch = setSearchTerm,
+		})
+	end,
+}