Merge remote-tracking branch 'origin/main' into darklua

.gitattributes

@@ -0,0 +1 @@
+*.luau linguist-language=Lua

.github/workflows/ci.yml

@@ -18,6 +18,9 @@ jobs:
 
       - uses: extractions/setup-just@v1
 
+      - name: Lint file extensions
+        run: ./bin/lint.sh
+
       - name: Get model file name
         run: |
           name=$(jq -r .name default.project.json)

bin/analyze.sh

@@ -4,7 +4,7 @@ curl -s -O https://raw.githubusercontent.com/JohnnyMorganz/luau-lsp/master/scrip
 
 rojo sourcemap tests.project.json -o sourcemap.json
 
-luau-lsp analyze --sourcemap=sourcemap.json --defs=globalTypes.d.lua --defs=testez.d.lua --ignore=**/_Index/** src/
+luau-lsp analyze --sourcemap=sourcemap.json --defs=globalTypes.d.lua --defs=testez.d.luau --ignore=**/_Index/** src/
 exit_code=$?
 
 rm globalTypes.d.lua

bin/lint.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+echo "Lint file extensions"
+files=$(find src example -iname "*.lua")
+if [[ -n "$files" ]]; then
+	echo "Error: one or more files are using the '.lua' extension. Please update these to '.luau' and try again"
+	echo "$files"
+	exit 1
+fi

bin/test.sh

@@ -1,3 +1,3 @@
 rojo build tests.project.json -o tests.rbxl
-run-in-roblox --place tests.rbxl --script tests/init.server.lua
+run-in-roblox --place tests.rbxl --script tests/init.server.luau
 rm tests.rbxl

docs/contributing.md

@@ -73,7 +73,7 @@ Then load a new Baseplate and open the flipbook plugin. Its storybook should now
 
 ## Testing
 
-While developing, you should also be writing unit tests. Unit tests are written in `.spec.lua` files. You can see examples of this throughout the repository's codebase.
+While developing, you should also be writing unit tests. Unit tests are written in `.spec.luau` files. You can see examples of this throughout the repository's codebase.
 
 To run tests, simply start the experience in Studio. You will see in the output if tests are passing or failing.
 

docs/migrating.md

@@ -15,15 +15,15 @@ This guide assumes you are using [Rojo](https://github.com/rojo-rbx/rojo/) to ma
 
 The main difference in how flipbook and Hoarcekat handle stories is that flipbook requires a "storybook" file to know where your stories are. As such, to migrate over from Hoarcekat the first thing you should do is create a storybook for your project.
 
-To do this, create a new `ProjectName.storybook.lua` file at the root of your project with the following contents:
+To do this, create a new `ProjectName.storybook.luau` file at the root of your project with the following contents:
 
 ```lua
--- Make sure to adjust the path to Roact if needed 
+-- Make sure to adjust the path to Roact if needed
 local Roact = require(script.Parent.Parent.Roact)
 
 return {
     roact = Roact,
-    storyRoots = { 
+    storyRoots = {
         script.Parent.Components
     }
 }
@@ -38,13 +38,13 @@ To fully benefit from the features flipbook has to offer, this section will guid
 We will use the following component and story as an example:
 
 ```lua
--- HelloWorld.lua
+-- HelloWorld.luau
 type Props = {
     name: string?
 }
 
 local function HelloWorld(props: Props)
-    local name = props.name or "World" 
+    local name = props.name or "World"
 
     return Roact.createElement("TextLabel", {
         Text = ("Hello %s!"):format(name),
@@ -60,7 +60,7 @@ return HelloWorld
 ```
 
 ```lua
--- HelloWorld.story.lua
+-- HelloWorld.story.luau
 local Roact = require(script.Parent.Parent.Roact)
 local HelloWorld = require(script.Parent.HelloWorld)
 
@@ -82,7 +82,7 @@ end
 Converting a Hoarcekat story like this into one compatible with flipbook is quite easy. In fact, all that's needed from the above story is the call to `Roact.createElement`:
 
 ```lua
--- HelloWorld.story.lua
+-- HelloWorld.story.luau
 local Roact = require(script.Parent.Parent.Roact)
 local HelloWorld = require(script.Parent.HelloWorld)
 
@@ -137,4 +137,4 @@ You are now equipped to migrate your other Hoarcekat stories over to flipbook!
 ## Further Reading
 
 - [Writing Stories](writing-stories.md)
-- [Story Format](story-format.md) 
+- [Story Format](story-format.md)

docs/story-format.md

@@ -23,7 +23,7 @@ The only required prop is the `storyRoots` array, which tells flipbook which Ins
 Example:
 
 ```lua
--- example/Example.storybook.lua
+-- example/Example.storybook.luau
 return {
 	name = "Example Storybook",
 	storyRoots = {
@@ -47,7 +47,7 @@ Support for Roblox's [Roact](https://github.com/Roblox/roact) library is built i
 Example:
 
 ```lua
--- example/Button.story.lua
+-- example/Button.story.luau
 local Example = script:FindFirstAncestor("Example")
 
 local Roact = require(Example.Parent.Packages.Roact)
@@ -68,7 +68,7 @@ return {
 Example with controls:
 
 ```lua
--- example/ButtonWithControls.story.lua
+-- example/ButtonWithControls.story.luau
 local Example = script:FindFirstAncestor("Example")
 
 local Roact = require(Example.Parent.Packages.Roact)
@@ -116,7 +116,7 @@ You can find React and ReactRoblox as part of the [CorePackages](https://github.
 Example:
 
 ```lua
--- example/ReactCounter.story.lua
+-- example/ReactCounter.story.luau
 local Example = script:FindFirstAncestor("Example")
 
 local React = require(Example.Parent.Packages.React)
@@ -160,7 +160,7 @@ A Functional story uses a function to create and mount UI. This is the most flex
 Example:
 
 ```lua
--- example/Functional.story.lua
+-- example/Functional.story.luau
 local controls = {
 	text = "Functional Story",
 }
@@ -206,7 +206,7 @@ See the [migration guide](migrating.md) for more info.
 Example:
 
 ```lua
--- example/Hoarcekat.story.lua
+-- example/Hoarcekat.story.luau
 local Example = script:FindFirstAncestor("Example")
 
 local Roact = require(Example.Parent.Packages.Roact)

docs/writing-stories.md

@@ -8,17 +8,17 @@ flipbook uses the concept of "storybooks" and "stories." A storybook is used to
 
 ## Storybook
 
-Every project needs a storybook, so to get started you will create a new `ProjectName.storybook.lua` file at the root of your project with the following contents:
+Every project needs a storybook, so to get started you will create a new `ProjectName.storybook.luau` file at the root of your project with the following contents:
 
 ```lua
--- src/ProjectName.storybook.lua
+-- src/ProjectName.storybook.luau
 
--- Make sure to adjust the path to Roact if needed 
+-- Make sure to adjust the path to Roact if needed
 local Roact = require(path.to.Roact)
 
 return {
     roact = Roact,
-    storyRoots = { 
+    storyRoots = {
         script.Parent.Components
     }
 }
@@ -30,10 +30,10 @@ Right now you should see a single entry in flipbook's sidebar for this storybook
 
 ## Story
 
-A story and its associated component should be in two separate files. Both files should share the same name, however the story will end with `.story`. To get started, let's create `Button.lua` and `Button.story.lua`:
+A story and its associated component should be in two separate files. Both files should share the same name, however the story will end with `.story`. To get started, let's create `Button.luau` and `Button.story.luau`:
 
 ```lua
--- src/Components/Button.lua
+-- src/Components/Button.luau
 
 local Roact = require(path.to.Roact)
 
@@ -68,7 +68,7 @@ return Button
 And now let's write the story to mount the Button component:
 
 ```lua
--- src/Components/Button.story.lua
+-- src/Components/Button.story.luau
 
 local Roact = require(path.to.Roact)
 local Button = require(script.Parent.Button)
@@ -185,4 +185,4 @@ With this change, a new "Controls" panel will appear where you can toggle the `i
 
 You have just been given an example of how to create a storybook and a story for a Button component that makes use of flipbook's controls feature. This document outlines the biggest features of flipbook, but there are other options you can play around with.
 
-Check out [Story Format](story-format.md) next to learn about all the options you have available.
+Check out [Story Format](story-format.md) next to learn about all the options you have available.

src/Explorer/Component/init.lua → src/Explorer/Component/init.luau

@@ -3,7 +3,7 @@ local Sift = require("@pkg/Sift")
 local Directory = require("./Directory")
 local Story = require("./Story")
 local types = require("@root/Explorer/types")
-local getTreeDescendants = require("@root/Explorer/getTreeDescendants")
+local filterComponentTreeNode = require("@root/Explorer/filterComponentTreeNode")
 
 local e = React.createElement
 
@@ -58,22 +58,8 @@ local function Component(providedProps: Props)
 		end
 	end
 
-	if props.filter then
-		if props.node.icon == "story" and not props.node.name:lower():match(props.filter:lower()) then
-			return
-		end
-
-		local isEmpty = true
-		for _, descendant in getTreeDescendants(props.node) do
-			if descendant.name:lower():match(props.filter:lower()) then
-				isEmpty = false
-				break
-			end
-		end
-
-		if isEmpty then
-			return
-		end
+	if props.filter and filterComponentTreeNode(props.node, props.filter) then
+		return
 	end
 
 	return e("Frame", {

src/Explorer/filterComponentTreeNode.luau

@@ -0,0 +1,27 @@
+local flipbook = script:FindFirstAncestor("flipbook")
+
+local types = require(flipbook.Explorer.types)
+
+local getTreeDescendants = require(script.Parent.getTreeDescendants)
+
+local function filterComponentTreeNode(node: types.ComponentTreeNode, filter: string): boolean
+	if node.icon == "story" then
+		if not node.name:lower():match(filter:lower()) then
+			return true
+		end
+
+		return false
+	end
+
+	local isEmpty = true
+	for _, descendant in getTreeDescendants(node) do
+		if descendant.name:lower():match(filter:lower()) then
+			isEmpty = false
+			break
+		end
+	end
+
+	return isEmpty
+end
+
+return filterComponentTreeNode

src/Explorer/filterComponentTreeNode.spec.luau

@@ -0,0 +1,77 @@
+local flipbook = script:FindFirstAncestor("flipbook")
+
+local types = require(flipbook.Explorer.types)
+
+return function()
+	local filterComponentTreeNode = require(script.Parent.filterComponentTreeNode)
+
+	it("should return true when the query does not match the story name", function()
+		local target: types.ComponentTreeNode = {
+			children = {},
+			name = "test",
+			icon = "story",
+		}
+		local query = "other"
+
+		local result = filterComponentTreeNode(target, query)
+		expect(result).to.equal(true)
+	end)
+
+	it("should return false the query matches the story name", function()
+		local target: types.ComponentTreeNode = {
+			children = {},
+			name = "test",
+			icon = "story",
+		}
+		local query = "tes"
+
+		local result = filterComponentTreeNode(target, query)
+		expect(result).to.equal(false)
+	end)
+
+	it("should return true when the filter does not match any of node in tree", function()
+		local target: types.ComponentTreeNode = {
+			children = {
+				{
+					children = {},
+					name = "test",
+					icon = "story",
+				},
+				{
+					children = {},
+					name = "folder",
+					icon = "folder",
+				},
+			},
+			name = "storybook",
+			icon = "storybook",
+		}
+		local query = "other"
+
+		local result = filterComponentTreeNode(target, query)
+		expect(result).to.equal(true)
+	end)
+
+	it("should return false when a filter match at least one of nodes in tree", function()
+		local target: types.ComponentTreeNode = {
+			children = {
+				{
+					children = {},
+					name = "test",
+					icon = "story",
+				},
+				{
+					children = {},
+					name = "folder",
+					icon = "folder",
+				},
+			},
+			name = "storybook",
+			icon = "storybook",
+		}
+		local query = "tes"
+
+		local result = filterComponentTreeNode(target, query)
+		expect(result).to.equal(false)
+	end)
+end

src/Explorer/types.lua → src/Explorer/types.luau

@@ -5,7 +5,7 @@ type Storybook = storybookTypes.Storybook
 export type ComponentTreeNode = {
 	name: string,
 	children: { ComponentTreeNode },
-	icon: string?,
+	icon: ("folder" | "story" | "storybook")?,
 	instance: Instance?,
 	storybook: Storybook?,
 }

tarmac.toml

@@ -3,6 +3,6 @@ name = "flipbook"
 [[inputs]]
 glob = "img/**/*.png"
 codegen = true
-codegen-path = "src/assets.lua"
+codegen-path = "src/assets.luau"
 codegen-base-path = "img"
 packable = true