Patch for Search Filtering Feature

src/Explorer/Component/init.lua

@@ -5,7 +5,7 @@ local Sift = require(flipbook.Packages.Sift)
 local Directory = require(script.Directory)
 local Story = require(script.Story)
 local types = require(flipbook.Explorer.types)
-local getTreeDescendants = require(flipbook.Explorer.getTreeDescendants)
+local filterComponentTreeNode = require(flipbook.Explorer.filterComponentTreeNode)
 
 local e = React.createElement
 
@@ -60,22 +60,8 @@ local function Component(providedProps: Props)
 		end
 	end
 
-	if props.filter then
-		if props.node.icon == "story" and not props.node.name:lower():match(props.filter:lower()) then
-			return
-		end
-
-		local isEmpty = true
-		for _, descendant in getTreeDescendants(props.node) do
-			if descendant.name:lower():match(props.filter:lower()) then
-				isEmpty = false
-				break
-			end
-		end
-
-		if isEmpty then
-			return
-		end
+	if props.filter and filterComponentTreeNode(props.node, props.filter) then
+		return
 	end
 
 	return e("Frame", {

src/Explorer/filterComponentTreeNode.lua

@@ -0,0 +1,27 @@
+local flipbook = script:FindFirstAncestor("flipbook")
+
+local types = require(flipbook.Explorer.types)
+
+local getTreeDescendants = require(script.Parent.getTreeDescendants)
+
+local function filterComponentTreeNode(node: types.ComponentTreeNode, filter: string): boolean
+	if node.icon == "story" then
+		if not node.name:lower():match(filter:lower()) then
+			return true
+		end
+
+		return false
+	end
+
+	local isEmpty = true
+	for _, descendant in getTreeDescendants(node) do
+		if descendant.name:lower():match(filter:lower()) then
+			isEmpty = false
+			break
+		end
+	end
+
+	return isEmpty
+end
+
+return filterComponentTreeNode

src/Explorer/filterComponentTreeNode.spec.lua

@@ -0,0 +1,77 @@
+local flipbook = script:FindFirstAncestor("flipbook")
+
+local types = require(flipbook.Explorer.types)
+
+return function()
+	local filterComponentTreeNode = require(script.Parent.filterComponentTreeNode)
+
+	it("should return true when the query does not match the story name", function()
+		local target: types.ComponentTreeNode = {
+			children = {},
+			name = "test",
+			icon = "story",
+		}
+		local query = "other"
+
+		local result = filterComponentTreeNode(target, query)
+		expect(result).to.equal(true)
+	end)
+
+	it("should return false the query matches the story name", function()
+		local target: types.ComponentTreeNode = {
+			children = {},
+			name = "test",
+			icon = "story",
+		}
+		local query = "tes"
+
+		local result = filterComponentTreeNode(target, query)
+		expect(result).to.equal(false)
+	end)
+
+	it("should return true when the filter does not match any of node in tree", function()
+		local target: types.ComponentTreeNode = {
+			children = {
+				{
+					children = {},
+					name = "test",
+					icon = "story",
+				},
+				{
+					children = {},
+					name = "folder",
+					icon = "folder",
+				},
+			},
+			name = "storybook",
+			icon = "storybook",
+		}
+		local query = "other"
+
+		local result = filterComponentTreeNode(target, query)
+		expect(result).to.equal(true)
+	end)
+
+	it("should return false when a filter match at least one of nodes in tree", function()
+		local target: types.ComponentTreeNode = {
+			children = {
+				{
+					children = {},
+					name = "test",
+					icon = "story",
+				},
+				{
+					children = {},
+					name = "folder",
+					icon = "folder",
+				},
+			},
+			name = "storybook",
+			icon = "storybook",
+		}
+		local query = "tes"
+
+		local result = filterComponentTreeNode(target, query)
+		expect(result).to.equal(false)
+	end)
+end

src/Explorer/types.lua

@@ -6,7 +6,7 @@ type Storybook = storybookTypes.Storybook
 export type ComponentTreeNode = {
 	name: string,
 	children: { ComponentTreeNode },
-	icon: string?,
+	icon: ("folder" | "story" | "storybook")?,
 	instance: Instance?,
 	storybook: Storybook?,
 }