Consolidate plugin creation to a new function (#340)

This is a future-looking change.

For #290 I need a function that can setup the plugin UI for an arbitrary
widget and button. This is something I anticipate exposing off of
FlipbookCore (#338) once I get around to that

Author: vocksel

src/Plugin/PluginApp.story.luau

@@ -10,8 +10,6 @@ return {
 	story = React.createElement(ContextProviders, {
 		plugin = MockPlugin.new() :: any,
 	}, {
-		PluginApp = React.createElement(PluginApp, {
-			plugin = plugin,
-		}),
+		PluginApp = React.createElement(PluginApp),
 	}),
 }

src/Plugin/createFlipbookPlugin.luau

@@ -0,0 +1,76 @@
+local React = require("@pkg/React")
+local ReactRoblox = require("@pkg/ReactRoblox")
+
+local ContextProviders = require("@root/Common/ContextProviders")
+local PluginApp = require("@root/Plugin/PluginApp")
+
+local function createFlipbookPlugin(
+	plugin: Plugin,
+	widget: DockWidgetPluginGui,
+	button: PluginToolbarButton
+): {
+	mount: () -> (),
+	unmount: () -> (),
+}
+	local connections: { RBXScriptConnection } = {}
+	local root = ReactRoblox.createRoot(widget)
+
+	local app = React.createElement(ContextProviders, {
+		plugin = plugin,
+		overlayGui = widget :: GuiBase2d,
+	}, {
+		PluginApp = React.createElement(PluginApp),
+	})
+
+	local function unmount()
+		root:unmount()
+	end
+
+	local function mount()
+		root:render(app)
+	end
+
+	table.insert(
+		connections,
+		button.Click:Connect(function()
+			widget.Enabled = not widget.Enabled
+		end)
+	)
+
+	table.insert(
+		connections,
+		widget:GetPropertyChangedSignal("Enabled"):Connect(function()
+			button:SetActive(widget.Enabled)
+		end)
+	)
+
+	table.insert(
+		connections,
+		widget:GetPropertyChangedSignal("Enabled"):Connect(function()
+			if widget.Enabled then
+				root:render(app)
+			else
+				unmount()
+			end
+		end)
+	)
+
+	if widget.Enabled then
+		mount()
+	end
+
+	local function destroy()
+		unmount()
+		for _, connection in connections do
+			connection:Disconnect()
+		end
+	end
+
+	return {
+		mount = mount,
+		unmount = unmount,
+		destroy = destroy,
+	}
+end
+
+return createFlipbookPlugin

src/Plugin/createToggleButton.luau

@@ -4,42 +4,22 @@ if RunService:IsRunning() or not RunService:IsEdit() then
 	return
 end
 
-local React = require("@pkg/React")
-local ReactRoblox = require("@pkg/ReactRoblox")
-
-local ContextProviders = require("@root/Common/ContextProviders")
-local PluginApp = require("@root/Plugin/PluginApp")
-local createToggleButton = require("@root/Plugin/createToggleButton")
-local createWidget = require("@root/Plugin/createWidget")
+local constants = require("@root/constants")
+local createFlipbookPlugin = require("@root/Plugin/createFlipbookPlugin")
 
 local PLUGIN_NAME = "Flipbook" .. if _G.BUILD_CHANNEL == "development" then ` {_G.BUILD_HASH}` else ""
 
 local toolbar = plugin:CreateToolbar(PLUGIN_NAME)
-local widget = createWidget(plugin, PLUGIN_NAME)
-local root = ReactRoblox.createRoot(widget)
-local disconnectButton = createToggleButton(toolbar, widget)
-
-local app = React.createElement(ContextProviders, {
-	plugin = plugin,
-}, {
-	PluginApp = React.createElement(PluginApp),
-})
-
-local widgetConn = widget:GetPropertyChangedSignal("Enabled"):Connect(function()
-	if widget.Enabled then
-		root:render(app)
-	else
-		root:unmount()
-	end
-end)
-
-if widget.Enabled then
-	root:render(app)
-end
 
-plugin.Unloading:Connect(function()
-	disconnectButton()
-	widgetConn:Disconnect()
+local info = DockWidgetPluginGuiInfo.new(Enum.InitialDockState.Top, true)
+
+local widget = plugin:CreateDockWidgetPluginGui(PLUGIN_NAME, info)
+widget.Name = PLUGIN_NAME
+widget.Title = PLUGIN_NAME
+widget.ZIndexBehavior = Enum.ZIndexBehavior.Sibling
+
+local button = toolbar:CreateButton(PLUGIN_NAME, "Open story view", constants.FLIPBOOK_LOGO)
+
+local flipbookPlugin = createFlipbookPlugin(plugin, widget, button)
 
-	root:unmount()
-end)
+plugin.Unloading:Connect(flipbookPlugin.unmount)