Restructure the project into semantic folders (#229)

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 RoactSpring = require(flipbook.Packages.RoactSpring)
 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 RoactSpring = require(flipbook.Packages.RoactSpring)
 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,8 +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 getTreeDescendants = require(flipbook.Modules.getTreeDescendants)
+local types = require(flipbook.Explorer.types)
+local getTreeDescendants = require(flipbook.Explorer.getTreeDescendants)
 
 local e = React.createElement
 

src/Modules/getTreeDescendants.lua → src/Explorer/getTreeDescendants.lua

@@ -1,6 +1,6 @@
 local flipbook = script:FindFirstAncestor("flipbook")
 
-local types = require(flipbook.types)
+local types = require(flipbook.Explorer.types)
 
 local function getTreeDescendants(root: types.ComponentTreeNode): { types.ComponentTreeNode }
 	local descendants: { types.ComponentTreeNode } = {}

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 RoactSpring = require(flipbook.Packages.RoactSpring)
 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 RoactSpring = require(flipbook.Packages.RoactSpring)
 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

src/Components/App.lua → src/Plugin/PluginApp.lua

@@ -2,12 +2,12 @@ local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
 local constants = require(flipbook.constants)
-local useStorybooks = require(flipbook.Hooks.useStorybooks)
-local useTheme = require(flipbook.Hooks.useTheme)
+local useStorybooks = require(flipbook.Storybook.useStorybooks)
+local useTheme = require(flipbook.Common.useTheme)
 local PluginContext = require(flipbook.Plugin.PluginContext)
-local ResizablePanel = require(flipbook.Components.ResizablePanel)
-local Canvas = require(flipbook.Components.Canvas)
-local Sidebar = require(flipbook.Components.Sidebar)
+local ResizablePanel = require(flipbook.Panels.ResizablePanel)
+local StoryCanvas = require(flipbook.Storybook.StoryCanvas)
+local Sidebar = require(flipbook.Panels.Sidebar)
 
 export type Props = {
 	plugin: Plugin,
@@ -63,7 +63,7 @@ local function App(props: Props)
 				LayoutOrder = 2,
 				Size = UDim2.fromScale(1, 1) - UDim2.fromOffset(sidebarWidth, 0),
 			}, {
-				Canvas = React.createElement(Canvas, {
+				StoryCanvas = React.createElement(StoryCanvas, {
 					loader = props.loader,
 					story = story,
 					storybook = storybook,

src/Components/App.story.lua → src/Plugin/PluginApp.story.lua

@@ -2,12 +2,12 @@ local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
 local ModuleLoader = require(flipbook.Packages.ModuleLoader)
-local App = require(script.Parent.App)
+local PluginApp = require(script.Parent.PluginApp)
 
 return {
 	summary = "The main component that handles the entire plugin",
 	controls = {},
-	story = React.createElement(App, {
+	story = React.createElement(PluginApp, {
 		loader = ModuleLoader.new(),
 	}),
 }

src/Components/NoStorySelected.lua → src/Storybook/NoStorySelected.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/Canvas.lua → src/Storybook/StoryCanvas.lua

@@ -1,10 +1,10 @@
 local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
-local types = require(flipbook.types)
-local NoStorySelected = require(flipbook.Components.NoStorySelected)
-local StoryView = require(flipbook.Components.StoryView)
-local useTheme = require(flipbook.Hooks.useTheme)
+local types = require(flipbook.Storybook.types)
+local NoStorySelected = require(flipbook.Storybook.NoStorySelected)
+local StoryView = require(flipbook.Storybook.StoryView)
+local useTheme = require(flipbook.Common.useTheme)
 
 local e = React.createElement
 

src/Components/StoryControls.lua → src/Storybook/StoryControls.lua

@@ -2,10 +2,10 @@ local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
 
-local useTheme = require(flipbook.Hooks.useTheme)
-local InputField = require(flipbook.Components.InputField)
-local Checkbox = require(flipbook.Components.Fields.Checkbox)
-local Dropdown = require(flipbook.Components.Fields.Dropdown)
+local useTheme = require(flipbook.Common.useTheme)
+local InputField = require(flipbook.Forms.InputField)
+local Checkbox = require(flipbook.Forms.Checkbox)
+local Dropdown = require(flipbook.Forms.Dropdown)
 
 local e = React.createElement