Adopt Component Story Format (CSF)

example/ArrayControls.story.luau

@@ -1,6 +1,7 @@
 local React = require("@pkg/React")
 local ReactRoblox = require("@pkg/ReactRoblox")
 local Sift = require("@pkg/Sift")
+local constants = require("@root/constants")
 
 local fonts = Sift.Array.sort(Enum.Font:GetEnumItems(), function(a: Enum.Font, z: Enum.Font)
 	return a.Name < z.Name
@@ -17,19 +18,24 @@ type Props = {
 	},
 }
 
+local stories = {}
+
+stories.Primary = function(props: Props)
+	return React.createElement("TextLabel", {
+		Text = props.controls.font.Name,
+		Font = props.controls.font,
+		TextScaled = true,
+		TextColor3 = Color3.fromRGB(0, 0, 0),
+		BackgroundColor3 = Color3.fromRGB(255, 255, 255),
+		Size = UDim2.fromOffset(300, 100),
+	})
+end
+
 return {
 	summary = "Example of using array controls to set the font for a TextLabel",
 	controls = controls,
 	react = React,
 	reactRoblox = ReactRoblox,
-	story = function(props: Props)
-		return React.createElement("TextLabel", {
-			Text = props.controls.font.Name,
-			Font = props.controls.font,
-			TextScaled = true,
-			TextColor3 = Color3.fromRGB(0, 0, 0),
-			BackgroundColor3 = Color3.fromRGB(255, 255, 255),
-			Size = UDim2.fromOffset(300, 100),
-		})
-	end,
+	story = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT then nil else stories.Primary,
+	stories = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT then stories else nil,
 }

example/Button.story.luau

@@ -1,13 +1,21 @@
-local Button = require("./Button")
-local Roact = require("@pkg/Roact")
+local Example = script:FindFirstAncestor("Example")
+
+local Roact = require(Example.Parent.Packages.Roact)
+local constants = require(Example.Parent.constants)
+local Button = require(script.Parent.Button)
+
+local stories = {}
+
+stories.Primary = Roact.createElement(Button, {
+	text = "Click me",
+	onActivated = function()
+		print("click")
+	end,
+})
 
 return {
 	summary = "A generic button component that can be used anywhere",
 	roact = Roact,
-	story = Roact.createElement(Button, {
-		text = "Click me",
-		onActivated = function()
-			print("click")
-		end,
-	}),
+	story = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT then nil else stories.Primary,
+	stories = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT then stories else nil,
 }

example/ButtonWithControls.story.luau

@@ -1,5 +1,8 @@
-local ButtonWithControls = require("./ButtonWithControls")
-local Roact = require("@pkg/Roact")
+local Example = script:FindFirstAncestor("Example")
+
+local Roact = require(Example.Parent.Packages.Roact)
+local constants = require(Example.Parent.constants)
+local ButtonWithControls = require(script.Parent.ButtonWithControls)
 
 local controls = {
 	isDisabled = false,
@@ -9,17 +12,22 @@ type Props = {
 	controls: typeof(controls),
 }
 
+local stories = {}
+
+stories.Primary = function(props: Props)
+	return Roact.createElement(ButtonWithControls, {
+		text = "Click me",
+		isDisabled = props.controls.isDisabled,
+		onActivated = function()
+			print("click")
+		end,
+	})
+end
+
 return {
 	summary = "A generic button component that can be used anywhere",
 	controls = controls,
 	roact = Roact,
-	story = function(props: Props)
-		return Roact.createElement(ButtonWithControls, {
-			text = "Click me",
-			isDisabled = props.controls.isDisabled,
-			onActivated = function()
-				print("click")
-			end,
-		})
-	end,
+	story = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT then nil else stories.Primary,
+	stories = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT then stories else nil,
 }

example/CanvasTests/AutomaticSize.story.luau

@@ -1,18 +1,26 @@
-local React = require("@pkg/React")
-local ReactRoblox = require("@pkg/ReactRoblox")
+local Example = script:FindFirstAncestor("Example")
+
+local React = require(Example.Parent.Packages.React)
+local ReactRoblox = require(Example.Parent.Packages.ReactRoblox)
+local constants = require(Example.Parent.constants)
+
+local stories = {}
+
+stories.Primary = function()
+	return React.createElement("TextLabel", {
+		Size = UDim2.new(0, 0, 0, 0),
+		AutomaticSize = Enum.AutomaticSize.XY,
+
+		TextSize = 24,
+		Text = script.Name,
+		Font = Enum.Font.GothamBold,
+	})
+end
 
 return {
 	summary = "AutoamticSize test for the story preview",
 	react = React,
 	reactRoblox = ReactRoblox,
-	story = function()
-		return React.createElement("TextLabel", {
-			Size = UDim2.new(0, 0, 0, 0),
-			AutomaticSize = Enum.AutomaticSize.XY,
-
-			TextSize = 24,
-			Text = script.Name,
-			Font = Enum.Font.GothamBold,
-		})
-	end,
+	story = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT then nil else stories.Primary,
+	stories = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT then stories else nil,
 }

example/CanvasTests/AutomaticSizeExceedsBounds.story.luau

@@ -1,18 +1,26 @@
-local React = require("@pkg/React")
-local ReactRoblox = require("@pkg/ReactRoblox")
+local Example = script:FindFirstAncestor("Example")
+
+local React = require(Example.Parent.Packages.React)
+local ReactRoblox = require(Example.Parent.Packages.ReactRoblox)
+local constants = require(Example.Parent.constants)
+
+local stories = {}
+
+stories.Primary = function()
+	return React.createElement("TextLabel", {
+		Size = UDim2.fromScale(1, 0),
+		AutomaticSize = Enum.AutomaticSize.Y,
+
+		TextSize = 24,
+		Text = script.Name .. string.rep("\nLine", 100),
+		Font = Enum.Font.GothamBold,
+	})
+end
 
 return {
 	summary = "AutoamticSize test using a height that exceeds the story preview",
 	react = React,
 	reactRoblox = ReactRoblox,
-	story = function()
-		return React.createElement("TextLabel", {
-			Size = UDim2.fromScale(1, 0),
-			AutomaticSize = Enum.AutomaticSize.Y,
-
-			TextSize = 24,
-			Text = script.Name .. string.rep("\nLine", 100),
-			Font = Enum.Font.GothamBold,
-		})
-	end,
+	story = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT then nil else stories.Primary,
+	stories = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT then stories else nil,
 }

example/CanvasTests/Offset.story.luau

@@ -1,18 +1,26 @@
-local React = require("@pkg/React")
-local ReactRoblox = require("@pkg/ReactRoblox")
+local Example = script:FindFirstAncestor("Example")
+
+local React = require(Example.Parent.Packages.React)
+local ReactRoblox = require(Example.Parent.Packages.ReactRoblox)
+local constants = require(Example.Parent.constants)
+
+local stories = {}
+
+stories.Primary = function()
+	return React.createElement("TextLabel", {
+		Size = UDim2.fromOffset(2000, 2000),
+		AutomaticSize = Enum.AutomaticSize.None,
+
+		TextSize = 24,
+		Text = script.Name,
+		Font = Enum.Font.GothamBold,
+	})
+end
 
 return {
 	summary = "Offset test for the story preview",
 	react = React,
 	reactRoblox = ReactRoblox,
-	story = function()
-		return React.createElement("TextLabel", {
-			Size = UDim2.fromOffset(2000, 2000),
-			AutomaticSize = Enum.AutomaticSize.None,
-
-			TextSize = 24,
-			Text = script.Name,
-			Font = Enum.Font.GothamBold,
-		})
-	end,
+	story = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT then nil else stories.Primary,
+	stories = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT then stories else nil,
 }

example/CanvasTests/Resizing.story.luau

@@ -2,6 +2,7 @@ local RunService = game:GetService("RunService")
 
 local React = require("@pkg/React")
 local ReactRoblox = require("@pkg/ReactRoblox")
+local constants = require("@root/constants")
 
 local RESIZE_DURATIOn = 3 -- seconds
 local MAX_SIZE = 2000 -- px
@@ -32,11 +33,18 @@ local function Story()
 	})
 end
 
+local stories = {}
+
+stories.Primary = React.createElement(Story)
+
 return {
 	summary = "Resizing test for the story preview",
 	react = React,
 	reactRoblox = ReactRoblox,
-	story = function()
-		return React.createElement(Story)
-	end,
+	story = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT
+		then nil
+		else function()
+			return React.createElement(Story)
+		end,
+	stories = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT then stories else nil,
 }

example/CanvasTests/Scale.story.luau

@@ -1,18 +1,26 @@
-local React = require("@pkg/React")
-local ReactRoblox = require("@pkg/ReactRoblox")
+local Example = script:FindFirstAncestor("Example")
+
+local React = require(Example.Parent.Packages.React)
+local ReactRoblox = require(Example.Parent.Packages.ReactRoblox)
+local constants = require(Example.Parent.constants)
+
+local stories = {}
+
+stories.Primary = function()
+	return React.createElement("TextLabel", {
+		Size = UDim2.fromScale(1, 1),
+		AutomaticSize = Enum.AutomaticSize.None,
+
+		TextSize = 24,
+		Text = script.Name,
+		Font = Enum.Font.GothamBold,
+	})
+end
 
 return {
 	summary = "Scale test for the story preview",
 	react = React,
 	reactRoblox = ReactRoblox,
-	story = function()
-		return React.createElement("TextLabel", {
-			Size = UDim2.fromScale(1, 1),
-			AutomaticSize = Enum.AutomaticSize.None,
-
-			TextSize = 24,
-			Text = script.Name,
-			Font = Enum.Font.GothamBold,
-		})
-	end,
+	story = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT then nil else stories.Primary,
+	stories = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT then stories else nil,
 }

example/CanvasTests/ScrollingFrame.story.luau

@@ -1,22 +1,30 @@
-local React = require("@pkg/React")
-local ReactRoblox = require("@pkg/ReactRoblox")
+local Example = script:FindFirstAncestor("Example")
+
+local React = require(Example.Parent.Packages.React)
+local ReactRoblox = require(Example.Parent.Packages.ReactRoblox)
+local constants = require(Example.Parent.constants)
+
+local stories = {}
+
+stories.Primary = function()
+	return React.createElement("ScrollingFrame", {
+		Size = UDim2.fromScale(1, 1),
+	}, {
+		Label = React.createElement("TextLabel", {
+			Size = UDim2.fromScale(1, 1),
+			AutomaticSize = Enum.AutomaticSize.None,
+
+			TextSize = 24,
+			Text = script.Name,
+			Font = Enum.Font.GothamBold,
+		}),
+	})
+end
 
 return {
 	summary = "ScrollingFrame test for the story preview",
 	react = React,
 	reactRoblox = ReactRoblox,
-	story = function()
-		return React.createElement("ScrollingFrame", {
-			Size = UDim2.fromScale(1, 1),
-		}, {
-			Label = React.createElement("TextLabel", {
-				Size = UDim2.fromScale(1, 1),
-				AutomaticSize = Enum.AutomaticSize.None,
-
-				TextSize = 24,
-				Text = script.Name,
-				Font = Enum.Font.GothamBold,
-			}),
-		})
-	end,
+	story = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT then nil else stories.Primary,
+	stories = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT then stories else nil,
 }

example/Counter.story.luau

@@ -1,5 +1,8 @@
-local Counter = require("./Counter")
-local Roact = require("@pkg/Roact")
+local Example = script:FindFirstAncestor("Example")
+
+local Roact = require(Example.Parent.Packages.Roact)
+local constants = require(Example.Parent.constants)
+local Counter = require(script.Parent.Counter)
 
 local controls = {
 	increment = 1,
@@ -10,14 +13,19 @@ type Props = {
 	controls: typeof(controls),
 }
 
+local stories = {}
+
+stories.Primary = function(props: Props)
+	return Roact.createElement(Counter, {
+		increment = props.controls.increment,
+		waitTime = props.controls.waitTime,
+	})
+end
+
 return {
 	summary = "A simple counter that increments every second",
 	controls = controls,
 	roact = Roact,
-	story = function(props: Props)
-		return Roact.createElement(Counter, {
-			increment = props.controls.increment,
-			waitTime = props.controls.waitTime,
-		})
-	end,
+	story = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT then nil else stories.Primary,
+	stories = if constants.FLAG_ENABLE_COMPONENT_STORY_FORMAT then stories else nil,
 }