Update code samples and analysis

.lune/analyze.luau

@@ -11,41 +11,29 @@ run("curl", {
 	"https://raw.githubusercontent.com/JohnnyMorganz/luau-lsp/master/scripts/globalTypes.d.lua",
 })
 
-do
-	run("rojo", {
-		"sourcemap",
-		constants.ROJO_ANALYSIS_PROJECT,
-		"-o",
-		constants.SOURCEMAP_PATH,
-	})
-
-	run("luau-lsp", {
-		"analyze",
-		`--sourcemap={constants.SOURCEMAP_PATH}`,
-		`--defs={globalDefsPath}`,
-		"--settings=./.vscode/settings.json",
-		"--ignore=**/_Index/**",
-		constants.SOURCE_PATH,
-		constants.LUNE_SCRIPTS_PATH,
-		constants.EXAMPLE_PATH,
-	})
-end
+run("rojo", {
+	"sourcemap",
+	constants.ROJO_ANALYSIS_PROJECT,
+	"-o",
+	constants.SOURCEMAP_PATH,
+})
 
-do
-	run("cd", { "code-samples" })
-	run("rojo", {
-		"sourcemap",
-		"default.project.json",
-		"-o",
-		constants.SOURCEMAP_PATH,
-	})
+run("luau-lsp", {
+	"analyze",
+	`--sourcemap={constants.SOURCEMAP_PATH}`,
+	`--defs={globalDefsPath}`,
+	"--settings=./.vscode/settings.json",
+	"--ignore=**/_Index/**",
+	constants.SOURCE_PATH,
+	constants.LUNE_SCRIPTS_PATH,
+	constants.EXAMPLE_PATH,
+})
 
-	run("luau-lsp", {
-		"analyze",
-		`--sourcemap={constants.SOURCEMAP_PATH}`,
-		`--defs={globalDefsPath}`,
-		"--settings=./.vscode/settings.json",
-		"--ignore=**/_Index/**",
-		".",
-	})
-end
+run("luau-lsp", {
+	"analyze",
+	`--sourcemap={constants.SOURCEMAP_PATH}`,
+	`--defs={globalDefsPath}`,
+	"--settings=./.vscode/settings.json",
+	"--ignore=**/_Index/**",
+	"code-samples/src",
+})

.lune/lib/constants.luau

@@ -5,7 +5,6 @@ return {
 	PACKAGES_PATH = "Packages",
 	LUNE_SCRIPTS_PATH = ".lune",
 	EXAMPLE_PATH = "example",
-	CODE_SAMPLES_PATH = "docs/docs/code-samples",
 
 	PLUGIN_FILENAME = "flipbook.rbxm",
 

.lune/wally-install.luau

@@ -1,15 +1,19 @@
 local run = require("./lib/run")
 
-run("wally", { "install" })
-run("rojo", { "sourcemap", "build.project.json", "-o", "sourcemap.json" })
-run("wally-package-types", { "--sourcemap", "sourcemap.json", "Packages" })
+do
+	run("wally", { "install" })
+	run("rojo", { "sourcemap", "build.project.json", "-o", "sourcemap.json" })
+	run("wally-package-types", { "--sourcemap", "sourcemap.json", "Packages" })
+end
 
-run("wally", { "install" }, {
-	cwd = "code-samples",
-})
-run("rojo", { "sourcemap", "default.project.json", "-o", "sourcemap.json" }, {
-	cwd = "code-samples",
-})
-run("wally-package-types", { "--sourcemap", "sourcemap.json", "Packages" }, {
-	cwd = "code-samples",
-})
+do
+	run("wally", { "install" }, {
+		cwd = "code-samples",
+	})
+	run("rojo", { "sourcemap", "default.project.json", "-o", "sourcemap.json" }, {
+		cwd = "code-samples",
+	})
+	run("wally-package-types", { "--sourcemap", "sourcemap.json", "Packages" }, {
+		cwd = "code-samples",
+	})
+end

analysis.project.json

@@ -4,14 +4,16 @@
     "$className": "DataModel",
     "ReplicatedStorage": {
       "Packages": {
-        "$path": "Packages"
+        "$path": "code-samples/Packages"
       },
       "CodeSamples": {
-        "$path": "docs/docs/code-samples"
+        "$path": "code-samples"
       },
+
       "Lune": {
         "$path": ".lune"
       },
+
       "Flipbook": {
         "TestRunner": {
           "$path": "tests"

code-samples/README.md

@@ -0,0 +1,19 @@
+# code-samples
+
+Package of code samples for using flipbook. Includes example Storybooks and Stories for each supported framework.
+
+The code samples are for illustrating usage of flipbook on the docs site. This package can also be synced into Studio and viewed in the flipbook plugin.
+
+All code samples are analyzed to ensure correctness before being deployed.
+
+## Setup
+
+Run the following commands from the root of the repo.
+
+```sh
+lune run wally-install
+lune run build
+rojo serve code-samples/default.project.json
+```
+
+Open Studio and sync with Rojo. Then open flipbook to preview the code samples.

code-samples/default.project.json

@@ -1,12 +1,12 @@
 {
-  "name": "Examples",
+  "name": "CodeSamples",
   "tree": {
     "$className": "DataModel",
     "ReplicatedStorage": {
       "Packages": {
         "$path": "Packages"
       },
-      "Examples": {
+      "CodeSamples": {
         "$path": "src"
       }
     }

code-samples/src/Default/Button.story.luau

@@ -2,10 +2,17 @@ return {
 	story = function()
 		local button = Instance.new("TextButton")
 		button.Text = "Button"
-		button.Font = Enum.Font.BuilderSansBold
-		button.TextColor3 = Color3.fromRGB(255, 255, 255)
+		button.TextSize = 16
+		button.Font = Enum.Font.BuilderSansExtraBold
+		button.TextColor3 = Color3.fromRGB(50, 50, 50)
+		button.BackgroundColor3 = Color3.fromRGB(255, 255, 255)
+		button.BorderSizePixel = 0
 		button.Size = UDim2.fromOffset(200, 40)
 
+		button.Activated:Connect(function()
+			print("clicked")
+		end)
+
 		return button
 	end,
 }

code-samples/src/Fusion/Fusion.storybook.luau

@@ -3,8 +3,9 @@ local ReplicatedStorage = game:GetService("ReplicatedStorage")
 local Fusion = require(ReplicatedStorage.Packages.Fusion)
 
 return {
+	name = "Fusion",
 	storyRoots = {
-		script.Parent.Components,
+		script.Parent,
 	},
 	packages = {
 		Fusion = Fusion,

code-samples/src/FusionStoryteller/Fusion.storybook.luau

@@ -4,8 +4,9 @@ local Fusion = require(ReplicatedStorage.Packages.Fusion)
 local Storyteller = require(ReplicatedStorage.Packages.Storyteller)
 
 local storybook: Storyteller.Storybook = {
+	name = "Fusion (Storyteller)",
 	storyRoots = {
-		script.Parent.Components,
+		script.Parent,
 	},
 	packages = {
 		Fusion = Fusion,

code-samples/src/React/React.storybook.luau

@@ -4,8 +4,9 @@ local React = require(ReplicatedStorage.Packages.React)
 local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox)
 
 return {
+	name = "React",
 	storyRoots = {
-		script.Parent.Components,
+		script.Parent,
 	},
 	packages = {
 		React = React,

code-samples/src/React/ReactButton.luau

@@ -8,7 +8,12 @@ local function ReactButton(props: {
 })
 	return React.createElement("TextButton", {
 		Text = props.text,
-		AutomaticSize = Enum.AutomaticSize.XY,
+		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] = props.onActivated,
 	})
 end

code-samples/src/React/ReactButtonControls.luau

@@ -0,0 +1,31 @@
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+
+local React = require(ReplicatedStorage.Packages.React)
+
+local function ReactButton(props: {
+	text: string,
+	isDisabled: boolean,
+	onActivated: () -> (),
+})
+	return React.createElement("TextButton", {
+		Text = props.text,
+		TextSize = 16,
+		Font = Enum.Font.BuilderSansExtraBold,
+		TextColor3 = Color3.fromRGB(50, 50, 50),
+		BackgroundColor3 = Color3.fromRGB(255, 255, 255),
+		AutoButtonColor = if props.isDisabled then false else true,
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(200, 40),
+		[React.Event.Activated] = if props.isDisabled then nil else props.onActivated,
+	}, {
+		Overlay = if props.isDisabled
+			then React.createElement("Frame", {
+				Size = UDim2.fromScale(1, 1),
+				BackgroundColor3 = Color3.fromRGB(0, 0, 0),
+				BackgroundTransparency = 0.6,
+			})
+			else nil,
+	})
+end
+
+return ReactButton

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

@@ -2,7 +2,7 @@ local ReplicatedStorage = game:GetService("ReplicatedStorage")
 
 local React = require(ReplicatedStorage.Packages.React)
 
-local ReactButton = require(script.Parent.ReactButton)
+local ReactButtonControls = require(script.Parent.ReactButtonControls)
 
 local controls = {
 	text = "Click Me",
@@ -16,7 +16,7 @@ type Props = {
 return {
 	controls = controls,
 	story = function(props: Props)
-		return React.createElement(ReactButton, {
+		return React.createElement(ReactButtonControls, {
 			text = props.controls.text,
 			isDisabled = props.controls.isDisabled,
 			onActivated = function()

code-samples/src/ReactStoryteller/React.storybook.luau

@@ -5,8 +5,9 @@ local ReactRoblox = require(ReplicatedStorage.Packages.ReactRoblox)
 local Storyteller = require(ReplicatedStorage.Packages.Storyteller)
 
 local storybook: Storyteller.Storybook = {
+	name = "React (Storyteller)",
 	storyRoots = {
-		script.Parent.Components,
+		script.Parent,
 	},
 	packages = {
 		React = React,

code-samples/src/Roact/Roact.storybook.luau

@@ -3,8 +3,9 @@ local ReplicatedStorage = game:GetService("ReplicatedStorage")
 local Roact = require(ReplicatedStorage.Packages.Roact)
 
 return {
+	name = "Roact",
 	storyRoots = {
-		script.Parent.Components,
+		script.Parent,
 	},
 	packages = {
 		Roact = Roact,

code-samples/src/RoactStoryteller/Roact.storybook.luau

@@ -4,8 +4,9 @@ local Roact = require(ReplicatedStorage.Packages.Roact)
 local Storyteller = require(ReplicatedStorage.Packages.Storyteller)
 
 local storybook: Storyteller.Storybook = {
+	name = "Roact (Storyteller)",
 	storyRoots = {
-		script.Parent.Components,
+		script.Parent,
 	},
 	packages = {
 		Roact = Roact,