Provide context to stories

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,
 }