Merge remote-tracking branch 'origin/main' into react-spring-rename

src/Components/Branding.lua → src/Common/Branding.lua

@@ -2,8 +2,8 @@ local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
 local assets = require(flipbook.assets)
-local useTheme = require(flipbook.Hooks.useTheme)
-local Sprite = require(flipbook.Components.Sprite)
+local useTheme = require(flipbook.Common.useTheme)
+local Sprite = require(flipbook.Common.Sprite)
 
 local e = React.createElement
 

src/Components/ScrollingFrame.lua → src/Common/ScrollingFrame.lua

@@ -2,7 +2,7 @@ local flipbook = script:FindFirstAncestor("flipbook")
 
 local Sift = require(flipbook.Packages.Sift)
 local React = require(flipbook.Packages.React)
-local useTheme = require(flipbook.Hooks.useTheme)
+local useTheme = require(flipbook.Common.useTheme)
 
 export type Props = {
 	[string]: any,

src/Hooks/useDescendants.spec.lua → src/Common/useDescendants.spec.lua

@@ -3,7 +3,7 @@ local flipbook = script:FindFirstAncestor("flipbook")
 return function()
 	local React = require(flipbook.Packages.React)
 	local ReactRoblox = require(flipbook.Packages.ReactRoblox)
-	local newFolder = require(flipbook.TestHelpers.newFolder)
+	local newFolder = require(flipbook.Testing.newFolder)
 	local useDescendants = require(script.Parent.useDescendants)
 
 	local container = Instance.new("ScreenGui")

src/Hooks/useEvent.spec.lua → src/Common/useEvent.spec.lua

@@ -3,7 +3,7 @@ local flipbook = script:FindFirstAncestor("flipbook")
 return function()
 	local React = require(flipbook.Packages.React)
 	local ReactRoblox = require(flipbook.Packages.ReactRoblox)
-	local useEvent = require(flipbook.Hooks.useEvent)
+	local useEvent = require(script.Parent.useEvent)
 
 	local container = Instance.new("ScreenGui")
 	local root = ReactRoblox.createRoot(container)

src/Hooks/usePrevious.spec.lua → src/Common/usePrevious.spec.lua

@@ -3,7 +3,7 @@ local flipbook = script:FindFirstAncestor("flipbook")
 return function()
 	local React = require(flipbook.Packages.React)
 	local ReactRoblox = require(flipbook.Packages.ReactRoblox)
-	local useEvent = require(flipbook.Hooks.useEvent)
+	local useEvent = require(flipbook.Common.useEvent)
 	local usePrevious = require(script.Parent.usePrevious)
 
 	local container = Instance.new("ScreenGui")

src/Hooks/useTheme.lua → src/Common/useTheme.lua

@@ -2,7 +2,6 @@ local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
 local themes = require(flipbook.themes)
-local types = require(flipbook.types)
 
 local MOCK_STUDIO = {
 	ThemeChanged = Instance.new("BindableEvent").Event,
@@ -20,7 +19,7 @@ local function useTheme()
 		return if success then result else MOCK_STUDIO
 	end, {})
 
-	local theme: types.Theme, set = React.useState(themes[studio.Theme.Name])
+	local theme: themes.Theme, set = React.useState(themes[studio.Theme.Name])
 
 	React.useEffect(function()
 		local conn = studio.ThemeChanged:Connect(function()

src/Hooks/useZoom.spec.lua → src/Common/useZoom.spec.lua

@@ -3,7 +3,7 @@ local flipbook = script:FindFirstAncestor("flipbook")
 return function()
 	local React = require(flipbook.Packages.React)
 	local ReactRoblox = require(flipbook.Packages.ReactRoblox)
-	local useEvent = require(flipbook.Hooks.useEvent)
+	local useEvent = require(flipbook.Common.useEvent)
 	local useZoom = require(script.Parent.useZoom)
 
 	local container = Instance.new("ScreenGui")

src/Components/ComponentTree/Component/Directory.lua → src/Explorer/Component/Directory.lua

@@ -4,9 +4,9 @@ local React = require(flipbook.Packages.React)
 local ReactSpring = require(flipbook.Packages.ReactSpring)
 local assets = require(flipbook.assets)
 local constants = require(flipbook.constants)
-local useTheme = require(flipbook.Hooks.useTheme)
-local Sprite = require(flipbook.Components.Sprite)
-local types = require(flipbook.types)
+local useTheme = require(flipbook.Common.useTheme)
+local Sprite = require(flipbook.Common.Sprite)
+local types = require(flipbook.Explorer.types)
 
 local e = React.createElement
 

src/Components/ComponentTree/Component/Story.lua → src/Explorer/Component/Story.lua

@@ -4,9 +4,9 @@ local React = require(flipbook.Packages.React)
 local ReactSpring = require(flipbook.Packages.ReactSpring)
 local assets = require(flipbook.assets)
 local constants = require(flipbook.constants)
-local useTheme = require(flipbook.Hooks.useTheme)
-local Sprite = require(flipbook.Components.Sprite)
-local types = require(flipbook.types)
+local useTheme = require(flipbook.Common.useTheme)
+local Sprite = require(flipbook.Common.Sprite)
+local types = require(flipbook.Explorer.types)
 
 local e = React.createElement
 

src/Components/ComponentTree/Component/init.lua → src/Explorer/Component/init.lua

@@ -4,7 +4,8 @@ local React = require(flipbook.Packages.React)
 local Sift = require(flipbook.Packages.Sift)
 local Directory = require(script.Directory)
 local Story = require(script.Story)
-local types = require(flipbook.types)
+local types = require(flipbook.Explorer.types)
+local getTreeDescendants = require(flipbook.Explorer.getTreeDescendants)
 
 local e = React.createElement
 
@@ -57,10 +58,20 @@ local function Component(props: Props)
 		end
 	end
 
-	if props.filter and props.node.icon ~= "storybook" then
-		local match = props.node.name:lower():match(props.filter:lower())
+	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 not match then
+		if isEmpty then
 			return
 		end
 	end

src/Explorer/getTreeDescendants.lua

@@ -0,0 +1,23 @@
+local flipbook = script:FindFirstAncestor("flipbook")
+
+local types = require(flipbook.Explorer.types)
+
+local function getTreeDescendants(root: types.ComponentTreeNode): { types.ComponentTreeNode }
+	local descendants: { types.ComponentTreeNode } = {}
+
+	local function traverse(node: types.ComponentTreeNode, isRoot: boolean)
+		if not isRoot then
+			table.insert(descendants, node)
+		end
+
+		for _, child in node.children do
+			traverse(child, false)
+		end
+	end
+
+	traverse(root, true)
+
+	return descendants
+end
+
+return getTreeDescendants

src/Explorer/getTreeDescendants.spec.lua

@@ -0,0 +1,31 @@
+return function()
+	local getTreeDescendants = require(script.Parent.getTreeDescendants)
+
+	it("should return an empty table when the root has no children", function()
+		local root = { name = "root", children = {} }
+
+		local result = getTreeDescendants(root)
+		expect(result).to.be.a("table")
+		expect(#result).to.equal(0)
+	end)
+
+	it("should return a table with all descendants when the root has children", function()
+		local child1 = { name = "child1", children = {} }
+		local child2 = { name = "child2", children = {} }
+		local root = { name = "root", children = { child1, child2 } }
+
+		local result = getTreeDescendants(root)
+		expect(result).to.be.a("table")
+		expect(#result).to.equal(2)
+	end)
+
+	it("should return a table with all descendants when the tree has multiple levels", function()
+		local grandchild = { name = "grandchild", children = {} }
+		local child = { name = "child", children = { grandchild } }
+		local root = { name = "root", children = { child } }
+
+		local result = getTreeDescendants(root)
+		expect(result).to.be.a("table")
+		expect(#result).to.equal(2)
+	end)
+end

src/Components/ComponentTree/init.lua → src/Explorer/init.lua

@@ -2,7 +2,7 @@ local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
 local Component = require(script.Component)
-local types = require(flipbook.types)
+local types = require(script.types)
 
 local e = React.createElement
 

src/Explorer/types.lua

@@ -0,0 +1,14 @@
+local flipbook = script:FindFirstAncestor("flipbook")
+
+local storybookTypes = require(flipbook.Storybook.types)
+type Storybook = storybookTypes.Storybook
+
+export type ComponentTreeNode = {
+	name: string,
+	children: { ComponentTreeNode },
+	icon: string?,
+	instance: Instance?,
+	storybook: Storybook?,
+}
+
+return nil

src/Components/Button.lua → src/Forms/Button.lua

@@ -2,7 +2,7 @@ local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
 local Sift = require(flipbook.Packages.Sift)
-local useTheme = require(flipbook.Hooks.useTheme)
+local useTheme = require(flipbook.Common.useTheme)
 
 local e = React.createElement
 

src/Components/Fields/Checkbox.lua → src/Forms/Checkbox.lua

@@ -1,7 +1,7 @@
 local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
-local useTheme = require(flipbook.Hooks.useTheme)
+local useTheme = require(flipbook.Common.useTheme)
 
 export type Props = {
 	initialState: boolean,

src/Components/Fields/Dropdown.lua → src/Forms/Dropdown.lua

@@ -1,7 +1,7 @@
 local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
-local useTheme = require(flipbook.Hooks.useTheme)
+local useTheme = require(flipbook.Common.useTheme)
 
 export type Props = {
 	placeholder: string?,

src/Components/Fields/Dropdown.story.lua → src/Forms/Dropdown.story.lua

@@ -1,7 +1,7 @@
 local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
-local Dropdown = require(flipbook.Components.Fields.Dropdown)
+local Dropdown = require(flipbook.Forms.Dropdown)
 
 local controls = {
 	useDefault = true,

src/Components/InputField.lua → src/Forms/InputField.lua

@@ -2,7 +2,7 @@ local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
 local Sift = require(flipbook.Packages.Sift)
-local useTheme = require(flipbook.Hooks.useTheme)
+local useTheme = require(flipbook.Common.useTheme)
 
 local e = React.createElement
 
@@ -14,7 +14,7 @@ local defaultProps = {
 
 export type Props = typeof(defaultProps) & {
 	layoutOrder: number?,
-	onSubmit: ((text: string) -> ()),
+	onSubmit: (text: string) -> (),
 	onFocus: (() -> ())?,
 	onFocusLost: (() -> ())?,
 	onTextChange: ((new: string, old: string) -> ())?,

src/Components/Searchbar.lua → src/Forms/Searchbar.lua

@@ -5,10 +5,10 @@ local ReactSpring = require(flipbook.Packages.ReactSpring)
 local Sift = require(flipbook.Packages.Sift)
 local assets = require(flipbook.assets)
 local constants = require(flipbook.constants)
-local useTheme = require(flipbook.Hooks.useTheme)
-local mapRanges = require(flipbook.Modules.mapRanges)
-local InputField = require(flipbook.Components.InputField)
-local Sprite = require(flipbook.Components.Sprite)
+local useTheme = require(flipbook.Common.useTheme)
+local mapRanges = require(flipbook.Common.mapRanges)
+local InputField = require(flipbook.Forms.InputField)
+local Sprite = require(flipbook.Common.Sprite)
 
 local e = React.createElement
 

src/Components/SelectableTextLabel.lua → src/Forms/SelectableTextLabel.lua

@@ -2,7 +2,7 @@ local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
 local Sift = require(flipbook.Packages.Sift)
-local useTheme = require(flipbook.Hooks.useTheme)
+local useTheme = require(flipbook.Common.useTheme)
 
 local defaultProps = {
 	AutomaticSize = Enum.AutomaticSize.XY,

src/Components/Navbar/Divider.lua → src/Navigation/Divider.lua

@@ -1,7 +1,7 @@
 local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
-local useTheme = require(flipbook.Hooks.useTheme)
+local useTheme = require(flipbook.Common.useTheme)
 
 local e = React.createElement
 

src/Components/Navbar/Element.lua → src/Navigation/Element.lua

@@ -1,7 +1,7 @@
 local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
-local useTheme = require(flipbook.Hooks.useTheme)
+local useTheme = require(flipbook.Common.useTheme)
 
 local e = React.createElement
 

src/Components/Navbar/Item.lua → src/Navigation/Item.lua

@@ -3,7 +3,7 @@ local flipbook = script:FindFirstAncestor("flipbook")
 local React = require(flipbook.Packages.React)
 local ReactSpring = require(flipbook.Packages.ReactSpring)
 local constants = require(flipbook.constants)
-local useTheme = require(flipbook.Hooks.useTheme)
+local useTheme = require(flipbook.Common.useTheme)
 
 local e = React.createElement
 

src/Components/DragHandle.lua → src/Panels/DragHandle.lua

@@ -5,7 +5,7 @@ local RunService = game:GetService("RunService")
 local Sift = require(flipbook.Packages.Sift)
 local React = require(flipbook.Packages.React)
 local PluginContext = require(flipbook.Plugin.PluginContext)
-local types = require(flipbook.types)
+local types = require(flipbook.Panels.types)
 
 local defaultProps = {
 	size = 8, -- px

src/Components/ResizablePanel.lua → src/Panels/ResizablePanel.lua

@@ -2,8 +2,8 @@ local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
 local Sift = require(flipbook.Packages.Sift)
-local DragHandle = require(flipbook.Components.DragHandle)
-local types = require(flipbook.types)
+local DragHandle = require(flipbook.Panels.DragHandle)
+local types = require(flipbook.Panels.types)
 
 local defaultProps = {
 	dragHandleSize = 8, -- px

src/Components/Sidebar.lua → src/Panels/Sidebar.lua

@@ -2,28 +2,32 @@ local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
 local constants = require(flipbook.constants)
-local createStoryNodes = require(flipbook.Story.createStoryNodes)
-local Branding = require(flipbook.Components.Branding)
-local ComponentTree = require(flipbook.Components.ComponentTree)
-local Searchbar = require(flipbook.Components.Searchbar)
-local ScrollingFrame = require(flipbook.Components.ScrollingFrame)
-local useTheme = require(flipbook.Hooks.useTheme)
-local types = require(flipbook.types)
+local createStoryNodes = require(flipbook.Storybook.createStoryNodes)
+local Branding = require(flipbook.Common.Branding)
+local ComponentTree = require(flipbook.Explorer)
+local Searchbar = require(flipbook.Forms.Searchbar)
+local ScrollingFrame = require(flipbook.Common.ScrollingFrame)
+local useTheme = require(flipbook.Common.useTheme)
+local storybookTypes = require(flipbook.Storybook.types)
+local explorerTypes = require(flipbook.Explorer.types)
+
+type Storybook = storybookTypes.Storybook
+type ComponentTreeNode = explorerTypes.ComponentTreeNode
 
 local e = React.createElement
 
 type Props = {
 	layoutOrder: number?,
 	selectStory: (ModuleScript) -> (),
-	selectStorybook: (types.Storybook) -> (),
-	storybooks: { types.Storybook },
+	selectStorybook: (Storybook) -> (),
+	storybooks: { Storybook },
 }
 
 local function Sidebar(props: Props)
 	local theme = useTheme()
 
 	local activeNode, setActiveNode = React.useState(nil)
-	local onClick = React.useCallback(function(node: types.ComponentTreeNode)
+	local onClick = React.useCallback(function(node: ComponentTreeNode)
 		if node.instance and node.instance:IsA("ModuleScript") and node.name:match(constants.STORY_NAME_PATTERN) then
 			if node.storybook then
 				props.selectStorybook(node.storybook)

src/Panels/types.lua

@@ -0,0 +1,3 @@
+export type DragHandle = "Top" | "Right" | "Bottom" | "Left"
+
+return nil