Merge remote-tracking branch 'origin/replace-moonwave-with-docusaurus…

…' into replace-moonwave-with-docusaurus

.gitattributes

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

.github/workflows/ci.yml

@@ -24,6 +24,9 @@ jobs:
       - name: Format
         run: stylua --check src/
 
+      - name: Lint file extensions
+        run: ./bin/lint.sh
+
       - name: Install dependencies
         run: wally install
 

.github/workflows/release.yml

@@ -16,7 +16,7 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Remove spec files
-        run: rm -rf **/*.spec.lua
+        run: rm -rf **/*.spec.luau
 
       - name: Install packages
         run: wally install

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/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/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/docs/writing-stories.md

@@ -8,7 +8,7 @@ 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 title="src/ProjectName.storybook.lua"
 -- Make sure to adjust the path to Roact if needed
@@ -28,7 +28,7 @@ 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 title="src/Components/Button.lua"
 local Roact = require(path.to.Roact)

example/Button.story.lua → example/Button.story.luau

@@ -1,7 +1,7 @@
 local Example = script:FindFirstAncestor("Example")
 
-local Roact = require(Example.Parent.Packages.Roact)
 local Button = require(script.Parent.Button)
+local Roact = require(Example.Parent.Packages.Roact)
 
 return {
 	summary = "A generic button component that can be used anywhere",

example/ButtonWithControls.story.lua → example/ButtonWithControls.story.luau

@@ -1,7 +1,7 @@
 local Example = script:FindFirstAncestor("Example")
 
-local Roact = require(Example.Parent.Packages.Roact)
 local ButtonWithControls = require(script.Parent.ButtonWithControls)
+local Roact = require(Example.Parent.Packages.Roact)
 
 local controls = {
 	isDisabled = false,

example/Counter.story.lua → example/Counter.story.luau

@@ -1,7 +1,7 @@
 local Example = script:FindFirstAncestor("Example")
 
-local Roact = require(Example.Parent.Packages.Roact)
 local Counter = require(script.Parent.Counter)
+local Roact = require(Example.Parent.Packages.Roact)
 
 local controls = {
 	increment = 1,

example/ReactCounter.story.lua → example/ReactCounter.story.luau

@@ -1,8 +1,8 @@
 local Example = script:FindFirstAncestor("Example")
 
 local React = require(Example.Parent.Packages.React)
-local ReactRoblox = require(Example.Parent.Packages.ReactRoblox)
 local ReactCounter = require(script.Parent.ReactCounter)
+local ReactRoblox = require(Example.Parent.Packages.ReactRoblox)
 
 local controls = {
 	increment = 1,

src/Common/Branding.lua → src/Common/Branding.luau

@@ -1,9 +1,9 @@
 local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
+local Sprite = require(flipbook.Common.Sprite)
 local assets = require(flipbook.assets)
 local useTheme = require(flipbook.Common.useTheme)
-local Sprite = require(flipbook.Common.Sprite)
 
 local e = React.createElement
 

src/Common/Branding.story.lua → src/Common/Branding.story.luau

@@ -1,7 +1,7 @@
 local flipbook = script:FindFirstAncestor("flipbook")
 
-local React = require(flipbook.Packages.React)
 local Branding = require(script.Parent.Branding)
+local React = require(flipbook.Packages.React)
 
 return {
 	summary = "Icon and Typography for flipbook",

src/Common/ScrollingFrame.lua → src/Common/ScrollingFrame.luau

@@ -1,7 +1,7 @@
 local flipbook = script:FindFirstAncestor("flipbook")
 
-local Sift = require(flipbook.Packages.Sift)
 local React = require(flipbook.Packages.React)
+local Sift = require(flipbook.Packages.Sift)
 local useTheme = require(flipbook.Common.useTheme)
 
 export type Props = {

src/Common/Sprite.story.lua → src/Common/Sprite.story.luau

@@ -1,8 +1,8 @@
 local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
-local assets = require(flipbook.assets)
 local Sprite = require(script.Parent.Sprite)
+local assets = require(flipbook.assets)
 
 return {
 	story = React.createElement("Folder", {}, {

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

@@ -2,11 +2,11 @@ local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
 local ReactSpring = require(flipbook.Packages.ReactSpring)
+local Sprite = require(flipbook.Common.Sprite)
 local assets = require(flipbook.assets)
 local constants = require(flipbook.constants)
-local useTheme = require(flipbook.Common.useTheme)
-local Sprite = require(flipbook.Common.Sprite)
 local types = require(flipbook.Explorer.types)
+local useTheme = require(flipbook.Common.useTheme)
 
 local e = React.createElement
 

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

@@ -2,11 +2,11 @@ local flipbook = script:FindFirstAncestor("flipbook")
 
 local React = require(flipbook.Packages.React)
 local ReactSpring = require(flipbook.Packages.ReactSpring)
+local Sprite = require(flipbook.Common.Sprite)
 local assets = require(flipbook.assets)
 local constants = require(flipbook.constants)
-local useTheme = require(flipbook.Common.useTheme)
-local Sprite = require(flipbook.Common.Sprite)
 local types = require(flipbook.Explorer.types)
+local useTheme = require(flipbook.Common.useTheme)
 
 local e = React.createElement
 

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

@@ -1,11 +1,11 @@
 local flipbook = script:FindFirstAncestor("flipbook")
 
+local Directory = require(script.Directory)
 local React = require(flipbook.Packages.React)
 local Sift = require(flipbook.Packages.Sift)
-local Directory = require(script.Directory)
 local Story = require(script.Story)
+local filterComponentTreeNode = require(flipbook.Explorer.filterComponentTreeNode)
 local types = require(flipbook.Explorer.types)
-local getTreeDescendants = require(flipbook.Explorer.getTreeDescendants)
 
 local e = React.createElement
 
@@ -60,22 +60,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/init.lua → src/Explorer/init.luau

@@ -1,7 +1,7 @@
 local flipbook = script:FindFirstAncestor("flipbook")
 
-local React = require(flipbook.Packages.React)
 local Component = require(script.Component)
+local React = require(flipbook.Packages.React)
 local types = require(script.types)
 
 local e = React.createElement