Port more stories

src/Common/Branding.stories.lua

@@ -3,8 +3,11 @@ local flipbook = script:FindFirstAncestor("flipbook")
 local React = require(flipbook.Packages.React)
 local Branding = require(script.Parent.Branding)
 
+local stories = {}
+
+stories.Primary = React.createElement(Branding)
+
 return {
 	summary = "Icon and Typography for flipbook",
-	controls = {},
-	story = React.createElement(Branding),
+	stories = stories,
 }

src/Common/ScrollingFrame.stories.lua

@@ -12,31 +12,35 @@ type Props = {
 	controls: typeof(controls),
 }
 
-return {
-	controls = controls,
-	story = function(props: Props)
-		local children = {}
+local stories = {}
 
-		children.Layout = React.createElement("UIListLayout", {
-			SortOrder = Enum.SortOrder.LayoutOrder,
-			Padding = UDim.new(0, 16),
-		})
+stories.Primary = function(props: Props)
+	local children = {}
+
+	children.Layout = React.createElement("UIListLayout", {
+		SortOrder = Enum.SortOrder.LayoutOrder,
+		Padding = UDim.new(0, 16),
+	})
 
-		for i = 1, props.controls.numItems do
-			children["Box" .. i] = React.createElement("Frame", {
-				LayoutOrder = i,
-				Size = UDim2.fromOffset(100, 100),
-				BackgroundColor3 = if props.controls.useGradient
-					then Color3.fromRGB(0, 255 / i, 0)
-					else Color3.fromRGB(0, 255, 0),
-			})
-		end
-
-		return React.createElement("Frame", {
-			Size = UDim2.new(1, 0, 0, 200),
-			BackgroundTransparency = 1,
-		}, {
-			ScrollingFrame = React.createElement(ScrollingFrame, {}, children),
+	for i = 1, props.controls.numItems do
+		children["Box" .. i] = React.createElement("Frame", {
+			LayoutOrder = i,
+			Size = UDim2.fromOffset(100, 100),
+			BackgroundColor3 = if props.controls.useGradient
+				then Color3.fromRGB(0, 255 / i, 0)
+				else Color3.fromRGB(0, 255, 0),
 		})
-	end,
+	end
+
+	return React.createElement("Frame", {
+		Size = UDim2.new(1, 0, 0, 200),
+		BackgroundTransparency = 1,
+	}, {
+		ScrollingFrame = React.createElement(ScrollingFrame, {}, children),
+	})
+end
+
+return {
+	controls = controls,
+	stories = stories,
 }

src/Common/Sprite.stories.lua

@@ -4,30 +4,34 @@ local React = require(flipbook.Packages.React)
 local assets = require(flipbook.assets)
 local Sprite = require(script.Parent.Sprite)
 
-return {
-	story = React.createElement("Folder", {}, {
-		Layout = React.createElement("UIListLayout", {
-			SortOrder = Enum.SortOrder.LayoutOrder,
-		}),
-
-		flipbook = React.createElement(Sprite, {
-			layoutOrder = 1,
-			image = assets.flipbook,
-		}),
-
-		Storybook = React.createElement(Sprite, {
-			layoutOrder = 2,
-			image = assets.Storybook,
-		}),
-
-		Folder = React.createElement(Sprite, {
-			layoutOrder = 3,
-			image = assets.Folder,
-		}),
-
-		Component = React.createElement(Sprite, {
-			layoutOrder = 4,
-			image = assets.Component,
-		}),
+local stories = {}
+
+stories.Primary = React.createElement("Folder", {}, {
+	Layout = React.createElement("UIListLayout", {
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	}),
+
+	flipbook = React.createElement(Sprite, {
+		layoutOrder = 1,
+		image = assets.flipbook,
+	}),
+
+	Storybook = React.createElement(Sprite, {
+		layoutOrder = 2,
+		image = assets.Storybook,
 	}),
+
+	Folder = React.createElement(Sprite, {
+		layoutOrder = 3,
+		image = assets.Folder,
+	}),
+
+	Component = React.createElement(Sprite, {
+		layoutOrder = 4,
+		image = assets.Component,
+	}),
+})
+
+return {
+	stories = stories,
 }

src/Forms/Button.stories.lua

@@ -11,15 +11,19 @@ type Props = {
 	controls: typeof(controls),
 }
 
+local stories = {}
+
+stories.Primary = function(props: Props)
+	return React.createElement(Button, {
+		text = props.controls.text,
+		onClick = function()
+			print("click")
+		end,
+	})
+end
+
 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,
-		})
-	end,
+	stories = stories,
 }

src/Forms/Checkbox.stories.lua

@@ -3,12 +3,16 @@ local flipbook = script:FindFirstAncestor("flipbook")
 local React = require(flipbook.Packages.React)
 local Checkbox = require(script.Parent.Checkbox)
 
+local stories = {}
+
+stories.Primary = React.createElement(Checkbox, {
+	initialState = true,
+	onStateChange = function(newState)
+		print("Checkbox state changed to", newState)
+	end,
+})
+
 return {
 	summary = "Generic checkbox used for story controls",
-	story = React.createElement(Checkbox, {
-		initialState = true,
-		onStateChange = function(newState)
-			print("Checkbox state changed to", newState)
-		end,
-	}),
+	stories = stories,
 }

src/Forms/Dropdown.stories.lua

@@ -12,21 +12,25 @@ type Props = {
 	controls: typeof(controls),
 }
 
+local stories = {}
+
+stories.Primary = function(props: Props)
+	local options = {}
+	for i = 1, props.controls.numOptions do
+		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,
+	})
+end
+
 return {
 	controls = controls,
-	story = function(props: Props)
-		local options = {}
-		for i = 1, props.controls.numOptions do
-			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,
-		})
-	end,
+	stories = stories,
 }

src/Forms/InputField.stories.lua

@@ -3,18 +3,22 @@ local flipbook = script:FindFirstAncestor("flipbook")
 local React = require(flipbook.Packages.React)
 local InputField = require(script.Parent.InputField)
 
+local stories = {}
+
+stories.Primary = 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,
+})
+
 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,
-	}),
+	stories = stories,
 }

src/Forms/Searchbar.stories.lua

@@ -3,8 +3,12 @@ local flipbook = script:FindFirstAncestor("flipbook")
 local React = require(flipbook.Packages.React)
 local Searchbar = require(script.Parent.Searchbar)
 
+local stories = {}
+
+stories.Primary = React.createElement(Searchbar)
+
 return {
 	summary = "Searchbar used to search for components",
 	controls = {},
-	story = React.createElement(Searchbar),
+	stories = stories,
 }

src/Forms/SelectableTextLabel.stories.lua

@@ -11,12 +11,16 @@ type Props = {
 	controls: typeof(controls),
 }
 
+local stories = {}
+
+stories.Primary = function(props: Props)
+	return React.createElement(SelectableTextLabel, {
+		Text = props.controls.text,
+	})
+end
+
 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,
-		})
-	end,
+	stories = stories,
 }

src/Panels/ResizablePanel.stories.lua

@@ -14,18 +14,22 @@ type Props = {
 	controls: typeof(controls),
 }
 
+local stories = {}
+
+stories.Primary = function(props)
+	return React.createElement(ResizablePanel, {
+		initialSize = UDim2.fromOffset(props.controls.maxWidth - props.controls.minWidth, 300),
+		maxSize = Vector2.new(props.controls.maxWidth, props.controls.maxHeight),
+		minSize = Vector2.new(props.controls.minWidth, props.controls.minHeight),
+		dragHandles = { "Right", "Bottom" },
+	}, {
+		Content = React.createElement("Frame", {
+			Size = UDim2.fromScale(1, 1),
+		}),
+	})
+end
+
 return {
 	controls = controls,
-	story = function(props)
-		return React.createElement(ResizablePanel, {
-			initialSize = UDim2.fromOffset(props.controls.maxWidth - props.controls.minWidth, 300),
-			maxSize = Vector2.new(props.controls.maxWidth, props.controls.maxHeight),
-			minSize = Vector2.new(props.controls.minWidth, props.controls.minHeight),
-			dragHandles = { "Right", "Bottom" },
-		}, {
-			Content = React.createElement("Frame", {
-				Size = UDim2.fromScale(1, 1),
-			}),
-		})
-	end,
+	stories = stories,
 }

src/Panels/Sidebar.stories.lua

@@ -4,18 +4,22 @@ local React = require(flipbook.Packages.React)
 local internalStorybook = require(flipbook["init.storybook"])
 local Sidebar = require(script.Parent.Sidebar)
 
+local stories = {}
+
+stories.Primary = React.createElement(Sidebar, {
+	storybooks = {
+		internalStorybook,
+	},
+	selectStory = function(storyModule)
+		print(storyModule)
+	end,
+	selectStorybook = function(storybook)
+		print(storybook)
+	end,
+})
+
 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,
-	}),
+	stories = stories,
 }

src/Plugin/PluginApp.stories.lua

@@ -4,11 +4,15 @@ local React = require(flipbook.Packages.React)
 local ModuleLoader = require(flipbook.Packages.ModuleLoader)
 local PluginApp = require(script.Parent.PluginApp)
 
+local stories = {}
+
+stories.Primary = React.createElement(PluginApp, {
+	loader = ModuleLoader.new(),
+	plugin = plugin,
+})
+
 return {
 	summary = "The main component that handles the entire plugin",
 	controls = {},
-	story = React.createElement(PluginApp, {
-		loader = ModuleLoader.new(),
-		plugin = plugin,
-	}),
+	stories = stories,
 }

src/Storybook/NoStorySelected.stories.lua

@@ -3,6 +3,10 @@ local flipbook = script:FindFirstAncestor("flipbook")
 local React = require(flipbook.Packages.React)
 local NoStorySelected = require(script.Parent.NoStorySelected)
 
+local stories = {}
+
+stories.Primary = React.createElement(NoStorySelected)
+
 return {
-	story = React.createElement(NoStorySelected),
+	stories = stories,
 }