WIP changes for controls, need to cleanup prints later

example/ArrayControls.story.luau

@@ -23,6 +23,7 @@ return {
 	react = React,
 	reactRoblox = ReactRoblox,
 	story = function(props: Props)
+		print(props.controls)
 		return React.createElement("TextLabel", {
 			Text = props.controls.font.Name,
 			Font = props.controls.font,

src/Storybook/StoryPreview.luau

@@ -42,11 +42,13 @@ local StoryPreview = React.forwardRef(function(providedProps: Props, ref: any)
 	end, { props.story, ref })
 
 	React.useEffect(function()
-		if props.story == prevStory then
+		if props.story == prevStory and props.controls ~= prevControls then
+			print("story or controls changed")
 			local areControlsDifferent = prevControls and not Sift.Dictionary.equals(props.controls, prevControls)
 
 			if lifecycle.current and areControlsDifferent then
 				local success, result = xpcall(function()
+					print("update", props.controls)
 					lifecycle.current.update(props.controls)
 				end, debug.traceback)
 
@@ -61,6 +63,7 @@ local StoryPreview = React.forwardRef(function(providedProps: Props, ref: any)
 		if props.story and ref.current then
 			-- TODO: Rendering before controls are applied
 			local success, result = xpcall(function()
+				print("render")
 				lifecycle.current = Storyteller.render(ref.current, props.story)
 			end, debug.traceback)
 
@@ -71,7 +74,9 @@ local StoryPreview = React.forwardRef(function(providedProps: Props, ref: any)
 
 		return function()
 			if lifecycle.current then
+				print("unmount")
 				lifecycle.current.unmount()
+				lifecycle.current = nil
 			end
 		end
 	end, { props.story, props.isMountedInViewport } :: { unknown })

src/Storybook/StoryView.luau

@@ -15,6 +15,7 @@ local StoryMeta = require("@root/Storybook/StoryMeta")
 local StoryPreview = require("@root/Storybook/StoryPreview")
 local StoryViewNavbar = require("@root/Storybook/StoryViewNavbar")
 local constants = require("@root/constants")
+local usePrevious = require("@root/Common/usePrevious")
 local useTheme = require("@root/Common/useTheme")
 local useZoom = require("@root/Common/useZoom")
 
@@ -33,19 +34,25 @@ local function StoryView(props: Props)
 	local theme = useTheme()
 	local settingsContext = SettingsContext.use()
 	local story, storyErr = Storyteller.useStory(props.story, props.storybook, props.loader)
+	local prevStory = usePrevious(story)
 	local zoom = useZoom(props.story)
 	local plugin = React.useContext(PluginContext.Context)
-	local extraControls, setExtraControls = React.useState({})
+	local changedControls, setChangedControls = React.useState({})
 	local initialControlsHeight = settingsContext.getSetting("controlsHeight")
 	local controlsHeight, setControlsHeight = React.useState(initialControlsHeight)
 	local topbarHeight, setTopbarHeight = React.useState(0)
 	local storyParentRef = React.useRef(nil :: GuiObject?)
 
+	React.useEffect(function()
+		print("setChangedControls({})")
+		setChangedControls({})
+	end, { story })
+
 	local controlsWithUserOverrides = React.useMemo(function()
 		local controls = {}
 		if story and story.controls then
 			for key, value in story.controls do
-				local override = extraControls[key]
+				local override = changedControls[key]
 
 				if override ~= nil and typeof(value) ~= "table" then
 					controls[key] = override
@@ -55,12 +62,16 @@ local function StoryView(props: Props)
 			end
 		end
 		return controls
-	end, { story, extraControls } :: { unknown })
+	end, { story, changedControls } :: { unknown })
+
+	print("changedControls", changedControls)
+	print("controlsWithUserOverrides", controlsWithUserOverrides)
 
 	local showControls = controlsWithUserOverrides and not Sift.isEmpty(controlsWithUserOverrides)
 
 	local setControl = React.useCallback(function(control: string, newValue: any)
-		setExtraControls(function(prev)
+		print("setControl", control, newValue)
+		setChangedControls(function(prev)
 			return Sift.Dictionary.merge(prev, {
 				[control] = newValue,
 			})
@@ -96,10 +107,6 @@ local function StoryView(props: Props)
 		setTopbarHeight(rbx.AbsoluteSize.Y)
 	end, {})
 
-	React.useEffect(function()
-		setExtraControls({})
-	end, { story })
-
 	return e("Frame", {
 		Size = UDim2.fromScale(1, 1),
 		BackgroundTransparency = 1,
@@ -172,7 +179,7 @@ local function StoryView(props: Props)
 				StoryPreview = e(StoryPreview, {
 					zoom = zoom.value,
 					story = story,
-					controls = Sift.Dictionary.merge(controlsWithUserOverrides, extraControls),
+					controls = Sift.Dictionary.merge(controlsWithUserOverrides, changedControls),
 					storyModule = props.story,
 					isMountedInViewport = isMountedInViewport,
 					ref = storyParentRef,