Provide context to stories (#257)

# Problem

With the addition of SettingsContext in #249 I inadvertently broke most
of our stories since the context wasn't being provided to them

# Solution
I'm now supplying the ContextProviders component to the stories that
need it. This should future-proof things since any new context providers
will be added to that component.

There are some stories I didn't touch since they weren't erroring, so
those ones may need to be updated in the future if they start depending
on context values. In the meantime this gets us back on track

# Checklist

- [x] Ran `lune run test` locally before merging

Known errors:
```
flipbook/UserSettings/SettingsContext.spec 
  ● hook › local plugin settings override defaults

    attempt to index nil with 'value'

      ReplicatedStorage.flipbook.UserSettings.SettingsContext.spec:58

  ● hook › set setting value via context

    attempt to index nil with 'value'

      ReplicatedStorage.flipbook.UserSettings.SettingsContext.spec:70

 FAIL  flipbook/stories.spec 
  ● mount/unmount Hoarcekat.story

    attempt to index function with 'react'

      ReplicatedStorage.flipbook.stories.spec:21

Test Suites: 2 failed, 12 passed, 14 total
Tests:       3 failed, 67 passed, 70 total
Snapshots:   0 total
Time:        1.179 s
Ran all test suites.
```

src/Common/Branding.story.luau

@@ -1,8 +1,15 @@
-local Branding = require("./Branding")
 local React = require("@pkg/React")
 
+local Branding = require("./Branding")
+local ContextProviders = require("@root/Common/ContextProviders")
+local MockPlugin = require("@root/Testing/MockPlugin")
+
 return {
 	summary = "Icon and Typography for flipbook",
 	controls = {},
-	story = React.createElement(Branding),
+	story = React.createElement(ContextProviders, {
+		plugin = MockPlugin.new(),
+	}, {
+		Branding = React.createElement(Branding),
+	}),
 }

src/Common/ScrollingFrame.story.luau

@@ -1,4 +1,7 @@
 local React = require("@pkg/React")
+
+local ContextProviders = require("@root/Common/ContextProviders")
+local MockPlugin = require("@root/Testing/MockPlugin")
 local ScrollingFrame = require("./ScrollingFrame")
 
 local controls = {
@@ -30,11 +33,15 @@ return {
 			})
 		end
 
-		return React.createElement("Frame", {
-			Size = UDim2.new(1, 0, 0, 200),
-			BackgroundTransparency = 1,
+		return React.createElement(ContextProviders, {
+			plugin = MockPlugin.new(),
 		}, {
-			ScrollingFrame = React.createElement(ScrollingFrame, {}, children),
+			Wrapper = React.createElement("Frame", {
+				Size = UDim2.new(1, 0, 0, 200),
+				BackgroundTransparency = 1,
+			}, {
+				ScrollingFrame = React.createElement(ScrollingFrame, {}, children),
+			}),
 		})
 	end,
 }

src/Explorer/Component.story.luau

@@ -1,6 +1,9 @@
-local Component = require("./Component")
 local React = require("@pkg/React")
 
+local Component = require("./Component")
+local ContextProviders = require("@root/Common/ContextProviders")
+local MockPlugin = require("@root/Testing/MockPlugin")
+
 local childNode1 = {
 	name = "Button",
 	icon = "story",
@@ -37,9 +40,13 @@ local storybookNode = {
 return {
 	summary = "Component as storybook with children",
 	controls = {},
-	story = React.createElement(Component, {
-		activeNode = nil,
-		node = storybookNode,
-		onClick = function() end,
+	story = React.createElement(ContextProviders, {
+		plugin = MockPlugin.new(),
+	}, {
+		Component = React.createElement(Component, {
+			activeNode = nil,
+			node = storybookNode,
+			onClick = function() end,
+		}),
 	}),
 }

src/Forms/Button.story.luau

@@ -1,6 +1,9 @@
-local Button = require("./Button")
 local React = require("@pkg/React")
 
+local Button = require("./Button")
+local ContextProviders = require("@root/Common/ContextProviders")
+local MockPlugin = require("@root/Testing/MockPlugin")
+
 local controls = {
 	text = "Click me",
 }
@@ -13,11 +16,13 @@ return {
 	summary = "A generic button component that can be used anywhere",
 	controls = controls,
 	story = function(props: Props)
-		return React.createElement(Button, {
-			text = props.controls.text,
-			onClick = function()
-				print("click")
-			end,
+		return React.createElement(ContextProviders, { plugin = MockPlugin.new() }, {
+			Button = React.createElement(Button, {
+				text = props.controls.text,
+				onClick = function()
+					print("click")
+				end,
+			}),
 		})
 	end,
 }

src/Forms/Checkbox.story.luau

@@ -1,12 +1,19 @@
-local Checkbox = require("./Checkbox")
 local React = require("@pkg/React")
 
+local Checkbox = require("./Checkbox")
+local ContextProviders = require("@root/Common/ContextProviders")
+local MockPlugin = require("@root/Testing/MockPlugin")
+
 return {
 	summary = "Generic checkbox used for story controls",
-	story = React.createElement(Checkbox, {
-		initialState = true,
-		onStateChange = function(newState)
-			print("Checkbox state changed to", newState)
-		end,
+	story = React.createElement(ContextProviders, {
+		plugin = MockPlugin.new(),
+	}, {
+		Checkbox = React.createElement(Checkbox, {
+			initialState = true,
+			onStateChange = function(newState)
+				print("Checkbox state changed to", newState)
+			end,
+		}),
 	}),
 }

src/Forms/Dropdown.story.luau

@@ -1,6 +1,9 @@
-local Dropdown = require("@root/Forms/Dropdown")
 local React = require("@pkg/React")
 
+local ContextProviders = require("@root/Common/ContextProviders")
+local Dropdown = require("@root/Forms/Dropdown")
+local MockPlugin = require("@root/Testing/MockPlugin")
+
 local controls = {
 	useDefault = true,
 	numOptions = 3,
@@ -18,13 +21,17 @@ return {
 			table.insert(options, "Option " .. i)
 		end
 
-		return React.createElement(Dropdown, {
-			placeholder = "Select an option",
-			default = if props.controls.useDefault then options[1] else nil,
-			options = options,
-			onOptionChange = function(option)
-				print("Selected", option)
-			end,
+		return React.createElement(ContextProviders, {
+			plugin = MockPlugin.new(),
+		}, {
+			Dropdown = React.createElement(Dropdown, {
+				placeholder = "Select an option",
+				default = if props.controls.useDefault then options[1] else nil,
+				options = options,
+				onOptionChange = function(option)
+					print("Selected", option)
+				end,
+			}),
 		})
 	end,
 }

src/Forms/InputField.luau

@@ -63,7 +63,7 @@ local function InputField(providedProps: Props)
 		if props.validate then
 			setIsValid(props.validate(newText))
 		end
-	end, {})
+	end, { text, props.transform, props.validate, props.onTextChange })
 
 	React.useEffect(function()
 		if props.autoFocus then

src/Forms/InputField.story.luau

@@ -1,18 +1,25 @@
-local InputField = require("./InputField")
 local React = require("@pkg/React")
 
+local ContextProviders = require("@root/Common/ContextProviders")
+local InputField = require("./InputField")
+local MockPlugin = require("@root/Testing/MockPlugin")
+
 return {
-	story = React.createElement(InputField, {
-		placeholder = "Enter information...",
-		autoFocus = true,
-		onSubmit = function(text)
-			print(text)
-		end,
-		validate = function(text: string)
-			return #text <= 4
-		end,
-		transform = function(text: string)
-			return text:upper()
-		end,
+	story = React.createElement(ContextProviders, {
+		plugin = MockPlugin.new(),
+	}, {
+		InputField = React.createElement(InputField, {
+			placeholder = "Enter information...",
+			autoFocus = true,
+			onSubmit = function(text)
+				print(text)
+			end,
+			validate = function(text: string)
+				return #text <= 4
+			end,
+			transform = function(text: string)
+				return text:upper()
+			end,
+		}),
 	}),
 }

src/Forms/Searchbar.story.luau

@@ -1,8 +1,15 @@
 local React = require("@pkg/React")
+
+local ContextProviders = require("@root/Common/ContextProviders")
+local MockPlugin = require("@root/Testing/MockPlugin")
 local Searchbar = require("./Searchbar")
 
 return {
 	summary = "Searchbar used to search for components",
 	controls = {},
-	story = React.createElement(Searchbar),
+	story = React.createElement(ContextProviders, {
+		plugin = MockPlugin.new(),
+	}, {
+		Searchbar = React.createElement(Searchbar),
+	}),
 }

src/Forms/SelectableTextLabel.story.luau

@@ -1,4 +1,7 @@
 local React = require("@pkg/React")
+
+local ContextProviders = require("@root/Common/ContextProviders")
+local MockPlugin = require("@root/Testing/MockPlugin")
 local SelectableTextLabel = require("./SelectableTextLabel")
 
 local controls = {
@@ -13,8 +16,12 @@ return {
 	summary = "A styled TextLabel with selectable text. Click and drag with the mouse to select content",
 	controls = controls,
 	story = function(props: Props)
-		return React.createElement(SelectableTextLabel, {
-			Text = props.controls.text,
+		return React.createElement(ContextProviders, {
+			plugin = MockPlugin.new(),
+		}, {
+			SelectableTextLabel = React.createElement(SelectableTextLabel, {
+				Text = props.controls.text,
+			}),
 		})
 	end,
 }

src/Panels/Sidebar.story.luau

@@ -1,19 +1,26 @@
 local React = require("@pkg/React")
+
+local ContextProviders = require("@root/Common/ContextProviders")
+local MockPlugin = require("@root/Testing/MockPlugin")
 local Sidebar = require("./Sidebar")
 local internalStorybook = require("@root/init.storybook.luau")
 
 return {
 	summary = "Sidebar containing brand, searchbar, and component tree",
 	controls = {},
-	story = React.createElement(Sidebar, {
-		storybooks = {
-			internalStorybook,
-		},
-		selectStory = function(storyModule)
-			print(storyModule)
-		end,
-		selectStorybook = function(storybook)
-			print(storybook)
-		end,
+	story = React.createElement(ContextProviders, {
+		plugin = MockPlugin.new(),
+	}, {
+		Sidebar = React.createElement(Sidebar, {
+			storybooks = {
+				internalStorybook,
+			},
+			selectStory = function(storyModule)
+				print(storyModule)
+			end,
+			selectStorybook = function(storybook)
+				print(storybook)
+			end,
+		}),
 	}),
 }

src/Plugin/PluginApp.story.luau

@@ -1,12 +1,19 @@
 local ModuleLoader = require("@pkg/ModuleLoader")
-local PluginApp = require("./PluginApp")
 local React = require("@pkg/React")
 
+local ContextProviders = require("@root/Common/ContextProviders")
+local MockPlugin = require("@root/Testing/MockPlugin")
+local PluginApp = require("./PluginApp")
+
 return {
 	summary = "The main component that handles the entire plugin",
 	controls = {},
-	story = React.createElement(PluginApp, {
-		loader = ModuleLoader.new(),
-		plugin = plugin,
+	story = React.createElement(ContextProviders, {
+		plugin = MockPlugin.new(),
+	}, {
+		PluginApp = React.createElement(PluginApp, {
+			loader = ModuleLoader.new(),
+			plugin = plugin,
+		}),
 	}),
 }

src/Storybook/NoStorySelected.story.luau

@@ -1,6 +1,13 @@
-local NoStorySelected = require("./NoStorySelected")
 local React = require("@pkg/React")
 
+local ContextProviders = require("@root/Common/ContextProviders")
+local MockPlugin = require("@root/Testing/MockPlugin")
+local NoStorySelected = require("./NoStorySelected")
+
 return {
-	story = React.createElement(NoStorySelected),
+	story = React.createElement(ContextProviders, {
+		plugin = MockPlugin.new(),
+	}, {
+		NoStorySelected = React.createElement(NoStorySelected),
+	}),
 }

src/Storybook/StoryControls.story.luau

@@ -1,18 +1,27 @@
 local React = require("@pkg/React")
+
+local ContextProviders = require("@root/Common/ContextProviders")
+local MockPlugin = require("@root/Testing/MockPlugin")
 local StoryControls = require("@root/Storybook/StoryControls")
 
 return {
 	summary = "Panel for configuring the controls of a story",
-	story = React.createElement(StoryControls, {
-		controls = {
-			foo = "bar",
-			checkbox = false,
-			dropdown = {
-				"Option 1",
-				"Option 2",
-				"Option 3",
-			},
-		},
-		setControl = function() end,
-	}),
+	story = function()
+		return React.createElement(ContextProviders, {
+			plugin = MockPlugin.new(),
+		}, {
+			StoryControls = React.createElement(StoryControls, {
+				controls = {
+					foo = "bar",
+					checkbox = false,
+					dropdown = {
+						"Option 1",
+						"Option 2",
+						"Option 3",
+					},
+				},
+				setControl = function() end,
+			}),
+		})
+	end,
 }

src/Storybook/StoryError.story.luau

@@ -1,4 +1,7 @@
 local React = require("@pkg/React")
+
+local ContextProviders = require("@root/Common/ContextProviders")
+local MockPlugin = require("@root/Testing/MockPlugin")
 local StoryError = require("@root/Storybook/StoryError")
 
 return {
@@ -8,8 +11,12 @@ return {
 			error("Oops!")
 		end, debug.traceback)
 
-		return React.createElement(StoryError, {
-			err = result,
+		return React.createElement(ContextProviders, {
+			plugin = MockPlugin.new(),
+		}, {
+			StoryError = React.createElement(StoryError, {
+				err = result,
+			}),
 		})
 	end,
 }