From 943f07817a02007470c72f88e03e9ed365383c15 Mon Sep 17 00:00:00 2001 From: Marin Minnerly Date: Fri, 15 Nov 2024 10:15:34 -0800 Subject: [PATCH] Update code samples and analysis --- .lune/analyze.luau | 60 ++++++++----------- .lune/lib/constants.luau | 1 - .lune/wally-install.luau | 28 +++++---- analysis.project.json | 6 +- code-samples/README.md | 19 ++++++ code-samples/default.project.json | 4 +- code-samples/src/Default/Button.story.luau | 11 +++- ...rybook.luau => ProjectName.storybook.luau} | 0 code-samples/src/Fusion/Fusion.storybook.luau | 3 +- .../FusionStoryteller/Fusion.storybook.luau | 3 +- code-samples/src/React/React.storybook.luau | 3 +- code-samples/src/React/ReactButton.luau | 7 ++- .../src/React/ReactButtonControls.luau | 31 ++++++++++ .../src/React/ReactButtonControls.story.luau | 4 +- .../src/ReactStoryteller/React.storybook.luau | 3 +- code-samples/src/Roact/Roact.storybook.luau | 3 +- .../src/RoactStoryteller/Roact.storybook.luau | 3 +- 17 files changed, 125 insertions(+), 64 deletions(-) create mode 100644 code-samples/README.md rename code-samples/src/Default/{Project.storybook.luau => ProjectName.storybook.luau} (100%) create mode 100644 code-samples/src/React/ReactButtonControls.luau diff --git a/.lune/analyze.luau b/.lune/analyze.luau index 4336004a..b8ce0dda 100644 --- a/.lune/analyze.luau +++ b/.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", +}) diff --git a/.lune/lib/constants.luau b/.lune/lib/constants.luau index ca11ad28..0d7caa67 100644 --- a/.lune/lib/constants.luau +++ b/.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", diff --git a/.lune/wally-install.luau b/.lune/wally-install.luau index 796e7393..2472434c 100644 --- a/.lune/wally-install.luau +++ b/.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 diff --git a/analysis.project.json b/analysis.project.json index a20592b6..b860569b 100644 --- a/analysis.project.json +++ b/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" diff --git a/code-samples/README.md b/code-samples/README.md new file mode 100644 index 00000000..3d8d4a91 --- /dev/null +++ b/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. diff --git a/code-samples/default.project.json b/code-samples/default.project.json index cc012971..2f94aa5e 100644 --- a/code-samples/default.project.json +++ b/code-samples/default.project.json @@ -1,12 +1,12 @@ { - "name": "Examples", + "name": "CodeSamples", "tree": { "$className": "DataModel", "ReplicatedStorage": { "Packages": { "$path": "Packages" }, - "Examples": { + "CodeSamples": { "$path": "src" } } diff --git a/code-samples/src/Default/Button.story.luau b/code-samples/src/Default/Button.story.luau index 8465bb53..def342ec 100644 --- a/code-samples/src/Default/Button.story.luau +++ b/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, } diff --git a/code-samples/src/Default/Project.storybook.luau b/code-samples/src/Default/ProjectName.storybook.luau similarity index 100% rename from code-samples/src/Default/Project.storybook.luau rename to code-samples/src/Default/ProjectName.storybook.luau diff --git a/code-samples/src/Fusion/Fusion.storybook.luau b/code-samples/src/Fusion/Fusion.storybook.luau index eba67a55..766f49a0 100644 --- a/code-samples/src/Fusion/Fusion.storybook.luau +++ b/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, diff --git a/code-samples/src/FusionStoryteller/Fusion.storybook.luau b/code-samples/src/FusionStoryteller/Fusion.storybook.luau index 062a125a..cc964ff0 100644 --- a/code-samples/src/FusionStoryteller/Fusion.storybook.luau +++ b/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, diff --git a/code-samples/src/React/React.storybook.luau b/code-samples/src/React/React.storybook.luau index 17abbc6e..8b291526 100644 --- a/code-samples/src/React/React.storybook.luau +++ b/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, diff --git a/code-samples/src/React/ReactButton.luau b/code-samples/src/React/ReactButton.luau index 5a62c2e6..75b7ed2a 100644 --- a/code-samples/src/React/ReactButton.luau +++ b/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 diff --git a/code-samples/src/React/ReactButtonControls.luau b/code-samples/src/React/ReactButtonControls.luau new file mode 100644 index 00000000..9ddf7f57 --- /dev/null +++ b/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 diff --git a/code-samples/src/React/ReactButtonControls.story.luau b/code-samples/src/React/ReactButtonControls.story.luau index 5854f82a..47891c71 100644 --- a/code-samples/src/React/ReactButtonControls.story.luau +++ b/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() diff --git a/code-samples/src/ReactStoryteller/React.storybook.luau b/code-samples/src/ReactStoryteller/React.storybook.luau index dbbd97b1..ed2815b0 100644 --- a/code-samples/src/ReactStoryteller/React.storybook.luau +++ b/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, diff --git a/code-samples/src/Roact/Roact.storybook.luau b/code-samples/src/Roact/Roact.storybook.luau index 032f78d0..4a5209b9 100644 --- a/code-samples/src/Roact/Roact.storybook.luau +++ b/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, diff --git a/code-samples/src/RoactStoryteller/Roact.storybook.luau b/code-samples/src/RoactStoryteller/Roact.storybook.luau index 98713e5d..e96de009 100644 --- a/code-samples/src/RoactStoryteller/Roact.storybook.luau +++ b/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,