New UI (#367)

* Add Flipper

* Remove old UI

* Add boilerplate UI

* Change plugin version

* Merge upstream

* Bunch of new UI changes

Too lazy to list them all in individual commits

* Touch ripple for buttons and a few other things

* Make the close button on the PluginGui work

* Set button state to guiEnabled

* Implement Connecting, NotConnected; add Header; don't update plugin button on render

* Replace mapLerpColor with mapLerp

* Update blendAlpha to be 0 without any values

* Add ActionFillTransparency to Theme.Button

* Suffix all Theme entries

* Update Flipper

* Add disconnect button

* Remove cancel button

* Add settings page

* Add scrollbar and dark theme support to settings

* Include settings in startSession

* Set context default value to nil

I always thought this was the name, lol...

* Add Error page

* Fix preloadAssets

* Fix preloadAssets import

* Update checkbox colors a little

* Add setting descriptions

* Fix scrolling frame in settings panel

* Remove .vscode

* Rename Throbber to Spinner

* Update merge

* Move Spinner images to assets

* Change casing of directories

* Remove old directories

* Add comments to getDerivedStateFromProps

* Account for offset in host TextBox size

* Turn width variables into constants

* Attempt to fix the comments

* Add a missing comma in Settings

* Remove a double space

* Remove Dummy object

* Move most of the Studio logic out of render

* Don't truncate port input

* Replace merge with Dictionary.merge

* Replace "Got it!" with "Okay"

* Add projectName to setStatus call

* Add Flipper to build.rs

plugin/src/App/Components/Studio/StudioPluginContext.lua

@@ -0,0 +1,7 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+
+local Roact = require(Rojo.Roact)
+
+local StudioPluginContext = Roact.createContext(nil)
+
+return StudioPluginContext

plugin/src/App/Components/Studio/StudioPluginGui.lua

@@ -0,0 +1,84 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+local Dictionary = require(Plugin.Dictionary)
+
+local StudioPluginContext = require(script.Parent.StudioPluginContext)
+
+local e = Roact.createElement
+
+local StudioPluginGui = Roact.PureComponent:extend("StudioPluginGui")
+
+StudioPluginGui.defaultProps = {
+	initDockState = Enum.InitialDockState.Right,
+	active = false,
+	overridePreviousState = false,
+	floatingSize = Vector2.new(0, 0),
+	minimumSize = Vector2.new(0, 0),
+	zIndexBehavior = Enum.ZIndexBehavior.Sibling,
+}
+
+function StudioPluginGui:init()
+	local floatingSize = self.props.floatingSize
+	local minimumSize = self.props.minimumSize
+
+	local dockWidgetPluginGuiInfo = DockWidgetPluginGuiInfo.new(
+		self.props.initDockState,
+		self.props.active,
+		self.props.overridePreviousState,
+		floatingSize.X, floatingSize.Y,
+		minimumSize.X, minimumSize.Y
+	)
+
+	local pluginGui = self.props.plugin:CreateDockWidgetPluginGui(self.props.id, dockWidgetPluginGuiInfo)
+
+	pluginGui.Name = self.props.id
+	pluginGui.Title = self.props.title
+	pluginGui.ZIndexBehavior = self.props.zIndexBehavior
+
+	if self.props.onInitialState then
+		self.props.onInitialState(pluginGui.Enabled)
+	end
+
+	pluginGui:BindToClose(function()
+		if self.props.onClose then
+			self.props.onClose()
+		else
+			pluginGui.Enabled = false
+		end
+	end)
+
+	self.pluginGui = pluginGui
+end
+
+function StudioPluginGui:render()
+	return e(Roact.Portal, {
+		target = self.pluginGui,
+	}, self.props[Roact.Children])
+end
+
+function StudioPluginGui:didUpdate(lastProps)
+	if self.props.active ~= lastProps.active then
+		-- This is intentionally in didUpdate to make sure the initial active state
+		-- (if the PluginGui is open initially) is preserved.
+		self.pluginGui.Enabled = self.props.active
+	end
+end
+
+function StudioPluginGui:willUnmount()
+	self.pluginGui:Destroy()
+end
+
+local function StudioPluginGuiWrapper(props)
+	return e(StudioPluginContext.Consumer, {
+		render = function(plugin)
+			return e(StudioPluginGui, Dictionary.merge(props, {
+				plugin = plugin,
+			}))
+		end,
+	})
+end
+
+return StudioPluginGuiWrapper

plugin/src/App/Components/Studio/StudioToggleButton.lua

@@ -0,0 +1,66 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+local Dictionary = require(Plugin.Dictionary)
+
+local StudioToolbarContext = require(script.Parent.StudioToolbarContext)
+
+local e = Roact.createElement
+
+local StudioToggleButton = Roact.Component:extend("StudioToggleButton")
+
+StudioToggleButton.defaultProps = {
+	enabled = true,
+	active = false,
+}
+
+function StudioToggleButton:init()
+	local button = self.props.toolbar:CreateButton(
+		self.props.name,
+		self.props.tooltip,
+		self.props.icon,
+		self.props.text
+	)
+
+	button.Click:Connect(function()
+		if self.props.onClick then
+			self.props.onClick()
+		end
+	end)
+
+	button.ClickableWhenViewportHidden = true
+
+	self.button = button
+end
+
+function StudioToggleButton:render()
+	return nil
+end
+
+function StudioToggleButton:didUpdate(lastProps)
+	if self.props.enabled ~= lastProps.enabled then
+		self.button.Enabled = self.props.enabled
+	end
+
+	if self.props.active ~= lastProps.active then
+		self.button:SetActive(self.props.active)
+	end
+end
+
+function StudioToggleButton:willUnmount()
+	self.button:Destroy()
+end
+
+local function StudioToggleButtonWrapper(props)
+	return e(StudioToolbarContext.Consumer, {
+		render = function(toolbar)
+			return e(StudioToggleButton, Dictionary.merge(props, {
+				toolbar = toolbar,
+			}))
+		end,
+	})
+end
+
+return StudioToggleButtonWrapper

plugin/src/App/Components/Studio/StudioToolbar.lua

@@ -0,0 +1,45 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+
+local Dictionary = require(Plugin.Dictionary)
+
+local StudioToolbarContext = require(script.Parent.StudioToolbarContext)
+local StudioPluginContext = require(script.Parent.StudioPluginContext)
+
+local e = Roact.createElement
+
+local StudioToolbar = Roact.Component:extend("StudioToolbar")
+
+function StudioToolbar:init()
+	self.toolbar = self.props.plugin:CreateToolbar(self.props.name)
+end
+
+function StudioToolbar:render()
+	return e(StudioToolbarContext.Provider, {
+		value = self.toolbar,
+	}, self.props[Roact.Children])
+end
+
+function StudioToolbar:didUpdate(lastProps)
+	if self.props.name ~= lastProps.name then
+		self.toolbar.Name = self.props.name
+	end
+end
+
+function StudioToolbar:willUnmount()
+	self.toolbar:Destroy()
+end
+
+local function StudioToolbarWrapper(props)
+	return e(StudioPluginContext.Consumer, {
+		render = function(plugin)
+			return e(StudioToolbar, Dictionary.merge(props, {
+				plugin = plugin,
+			}))
+		end,
+	})
+end
+
+return StudioToolbarWrapper

plugin/src/App/Components/Studio/StudioToolbarContext.lua

@@ -0,0 +1,7 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+
+local Roact = require(Rojo.Roact)
+
+local StudioToolbarContext = Roact.createContext(nil)
+
+return StudioToolbarContext