Commit recent work

code-samples/src/React/ReactButton.story copy.luau

@@ -0,0 +1,16 @@
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+
+local React = require(ReplicatedStorage.Packages.React)
+
+local ReactButton = require(script.Parent.ReactButton)
+
+return {
+	story = function()
+		return React.createElement(ReactButton, {
+			text = "Click Me",
+			onActivated = function()
+				print("click")
+			end,
+		})
+	end,
+}

code-samples/src/React/ReactButtonExplicitPackages.story.luau

@@ -0,0 +1,25 @@
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+
+local React = require(ReplicatedStorage.Packages.React)
+local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox)
+
+return {
+	story = function()
+		return React.createElement("TextButton", {
+			Text = "Click Me",
+			TextSize = 16,
+			Font = Enum.Font.BuilderSansExtraBold,
+			TextColor3 = Color3.fromRGB(50, 50, 50),
+			BackgroundColor3 = Color3.fromRGB(255, 255, 255),
+			BorderSizePixel = 0,
+			Size = UDim2.fromOffset(200, 40),
+			[React.Event.Activated] = function()
+				print("clicked")
+			end,
+		})
+	end,
+	packages = {
+		React = React,
+		ReactRoblox = ReactRoblox,
+	},
+}

docs/docs/creating-stories/controls.mdx

@@ -0,0 +1,33 @@
+import CodeBlock from "@theme/CodeBlock";
+
+import DefaultStorybook from "!!raw-loader!@site/../code-samples/src/Default/ProjectName.storybook.luau";
+import DefaultStory from "!!raw-loader!@site/../code-samples/src/Default/Button.story.luau";
+import ReactStorybook from "!!raw-loader!@site/../code-samples/src/React/React.storybook.luau";
+import ReactButton from "!!raw-loader!@site/../code-samples/src/React/ReactButton.luau";
+import ReactButtonControls from "!!raw-loader!@site/../code-samples/src/React/ReactButtonControls.luau";
+import ReactButtonControlsStory from "!!raw-loader!@site/../code-samples/src/React/ReactButtonControls.story.luau";
+import ReactButtonExplicitPackagesStory from "!!raw-loader!@site/../code-samples/src/React/ReactButtonExplicitPackages.story.luau";
+
+# Controls
+
+Stories can define controls that make it possible to quickly test out the behavior and variants of the UI you're working on.
+
+Here's an example React component that we will build a Story around. The props it takes in will be configurable by the Story's controls.
+
+<CodeBlock language="lua" title="ReactButtonControls.luau">
+	{ReactButtonControls}
+</CodeBlock>
+
+The Story creates the element and passes in controls through the `props` argument.
+
+<CodeBlock language="lua" title="ReactButtonControls.story.luau">
+	{ReactButtonControlsStory}
+</CodeBlock>
+
+Opening the ReactButtonControls Story in flipbook will include an accompanying panel for configuring the controls.
+
+![Story preview for ReactButtonControls showing the Controls panel](./button-with-controls.png)
+
+As controls are modified the Story will live-reload with the new props.
+
+![Story preview for ReactButtonControls showing modifications made to the controls](./button-with-controls-changed.png)

docs/docs/creating-stories/story-format.md

@@ -4,10 +4,6 @@
 
 Any ModuleScript with a `.storybook` extension will be picked up as a Storybook.
 
-:::warning
-Storybooks that do not have a `storyRoots` array will not be shown in the flipbook UI.
-:::
-
 The properties that can be used in the module are as follows:
 
 | **Property** | **Type**             | **Description**                                                                                                                       |
@@ -44,18 +40,6 @@ The only required member of a Story definition is the `story` property.
 
 The type of the `story` property is dependent on what kind of Story is being rendered. flipbook does not prescribe one particular way of writing Stories, or even a particular UI library that must be used.
 
-Stories can be written for React, Fusion, legacy Roact, plain Roblox Instances, and anything you can think of with [Manual Stories](https://www.notion.so/Story-format-12f95b7912f880068da6d74c472bf186?pvs=21).
-
-Example Story module:
-
-```lua
-return {
-    story = function(props)
-
-    end
-}
-```
-
 ## StoryProps
 
 A Story's `story` function is passed in a `StoryProps` object that contains the following.

docs/docs/creating-stories/typechecking.mdx

@@ -0,0 +1,10 @@
+import CodeBlock from "@theme/CodeBlock";
+
+import DefaultStorybook from "!!raw-loader!@site/../code-samples/src/Default/ProjectName.storybook.luau";
+import DefaultStory from "!!raw-loader!@site/../code-samples/src/Default/Button.story.luau";
+import ReactStorybook from "!!raw-loader!@site/../code-samples/src/React/React.storybook.luau";
+import ReactButton from "!!raw-loader!@site/../code-samples/src/React/ReactButton.luau";
+import ReactButtonStory from "!!raw-loader!@site/../code-samples/src/React/ReactButton.story.luau";
+import ReactButtonExplicitPackagesStory from "!!raw-loader!@site/../code-samples/src/React/ReactButtonExplicitPackages.story.luau";
+
+# Typechecking