Add a button to create the first storybook, story, and component

src/Panels/Sidebar.luau

@@ -2,9 +2,12 @@ local React = require("@pkg/React")
 local Storyteller = require("@pkg/Storyteller")
 
 local Branding = require("@root/Common/Branding")
+local Button = require("@root/Forms/Button")
 local ScrollingFrame = require("@root/Common/ScrollingFrame")
 local Searchbar = require("@root/Forms/Searchbar")
 local StorybookTreeView = require("@root/Storybook/StorybookTreeView")
+local createOnboardingStorybook = require("@root/Storybook/createOnboardingStorybook")
+local nextLayoutOrder = require("@root/Common/nextLayoutOrder")
 local useTheme = require("@root/Common/useTheme")
 
 type LoadedStorybook = Storyteller.LoadedStorybook
@@ -58,7 +61,7 @@ local function Sidebar(props: Props)
 		Header = e("Frame", {
 			AutomaticSize = Enum.AutomaticSize.Y,
 			BackgroundTransparency = 1,
-			LayoutOrder = 0,
+			LayoutOrder = nextLayoutOrder(),
 			Size = UDim2.fromScale(1, 0),
 			[React.Change.AbsoluteSize] = onHeaderSizeChanged,
 		}, {
@@ -77,8 +80,18 @@ local function Sidebar(props: Props)
 			}),
 		}),
 
+		CreateStorybook = if #props.storybooks.available == 0
+			then React.createElement(Button, {
+				layoutOrder = nextLayoutOrder(),
+				text = "Create Storybook",
+				onClick = function()
+					createOnboardingStorybook(game.ReplicatedStorage)
+				end,
+			})
+			else nil,
+
 		ScrollingFrame = e(ScrollingFrame, {
-			LayoutOrder = 1,
+			LayoutOrder = nextLayoutOrder(),
 			Size = UDim2.fromScale(1, 1) - UDim2.fromOffset(0, headerHeight),
 		}, {
 			StorybookTreeView = e(StorybookTreeView, {

src/Storybook/OnboardingTemplate/ComponentTemplate.luau

@@ -0,0 +1,17 @@
+export type Props = {
+	nameToGreet: string,
+}
+
+local function HelloWorld(props: Props)
+	local label = Instance.new("TextLabel")
+	label.Text = `Hello, {props.nameToGreet}!`
+	label.AutomaticSize = Enum.AutomaticSize.XY
+	label.BackgroundTransparency = 1
+	label.TextColor3 = Color3.fromRGB(255, 255, 255)
+	label.TextSize = 24
+	label.Font = Enum.Font.BuilderSansMedium
+
+	return label
+end
+
+return HelloWorld

src/Storybook/OnboardingTemplate/StoryTemplate.luau

@@ -0,0 +1,18 @@
+local HelloWorld = require(script.Parent.HelloWorld)
+
+local controls = {
+	nameToGreet = "World",
+}
+
+type Props = {
+	controls: typeof(controls),
+}
+
+return {
+	controls = controls,
+	story = function(props: Props)
+		return HelloWorld({
+			nameToGreet = props.controls.nameToGreet,
+		})
+	end,
+}

src/Storybook/OnboardingTemplate/StorybookTemplate.luau

@@ -0,0 +1,5 @@
+return {
+	storyRoots = {
+		script.Parent.Components,
+	},
+}

src/Storybook/createOnboardingStorybook.luau

@@ -0,0 +1,24 @@
+local STORYBOOK_TEMPLATE = script.Parent.OnboardingTemplate["StorybookTemplate"]
+local STORY_TEMPLATE = script.Parent.OnboardingTemplate["StoryTemplate"]
+local COMPONENT_TEMPLATE = script.Parent.OnboardingTemplate["ComponentTemplate"]
+
+local function createOnboardingStorybook(parent: Instance)
+	local components = Instance.new("Folder")
+	components.Name = "Components"
+
+	local component = COMPONENT_TEMPLATE:Clone()
+	component.Name = "HelloWorld"
+	component.Parent = components
+
+	local story = STORY_TEMPLATE:Clone()
+	story.Name = "HelloWorld.story"
+	story.Parent = components
+
+	local storybookModule = STORYBOOK_TEMPLATE:Clone()
+	storybookModule.Name = `{string.gsub(game.Name, "%.", "_")}.storybook`
+
+	components.Parent = parent
+	storybookModule.Parent = parent
+end
+
+return createOnboardingStorybook