Use Storyteller for handling all of our Story/Storybook needs (#267)

# Problem

Our org has a new package for handling all Story and Storybook logic we
previously had baked into flipbook in the form of Storyteller.

https://github.com/flipbook-labs/storyteller

# Solution

This PR adds Storyteller to our dependencies and starts consuming it.
All Story and Storybook related logic has been stripped out and migrated
over

As a bonus, Storyteller gives us Fusion support out of the box.

Closes #225 

# Checklist

- [ ] Ran `lune run test` locally before merging

.vscode/settings.json

@@ -9,8 +9,5 @@
     "@pkg": "./Packages",
     "@root": "./src",
     "@lune/": "~/.lune/.typedefs/0.8.3/"
-  },
-  "files.associations": {
-    "*.luau": "lua"
   }
 }

src/Explorer/types.luau

@@ -1,6 +1,6 @@
-local storybookTypes = require("@root/Storybook/types")
+local Storyteller = require("@pkg/Storyteller")
 
-type Storybook = storybookTypes.Storybook
+type Storybook = Storyteller.Storybook
 
 export type ComponentTreeNode = {
 	name: string,

src/Navigation/Screen.luau

@@ -1,19 +1,19 @@
 local ModuleLoader = require("@pkg/ModuleLoader")
 local React = require("@pkg/React")
+local Storyteller = require("@pkg/Storyteller")
 
 local AboutView = require("@root/About/AboutView")
 local NavigationContext = require("@root/Navigation/NavigationContext")
 local SettingsView = require("@root/UserSettings/SettingsView")
 local StoryCanvas = require("@root/Storybook/StoryCanvas")
-local storybookTypes = require("@root/Storybook/types")
 
 local useMemo = React.useMemo
 
-type Story = storybookTypes.Story
-type Storybook = storybookTypes.Storybook
+type ModuleLoader = ModuleLoader.ModuleLoader
+type Storybook = Storyteller.Storybook
 
 export type Props = {
-	loader: ModuleLoader.ModuleLoader,
+	loader: ModuleLoader,
 	story: ModuleScript?,
 	storybook: Storybook?,
 }

src/Panels/Sidebar.luau

@@ -1,15 +1,16 @@
+local React = require("@pkg/React")
+local Storyteller = require("@pkg/Storyteller")
+
 local Branding = require("@root/Common/Branding")
 local ComponentTree = require("@root/Explorer")
-local React = require("@pkg/React")
 local ScrollingFrame = require("@root/Common/ScrollingFrame")
 local Searchbar = require("@root/Forms/Searchbar")
 local constants = require("@root/constants")
 local createStoryNodes = require("@root/Storybook/createStoryNodes")
 local explorerTypes = require("@root/Explorer/types")
-local storybookTypes = require("@root/Storybook/types")
 local useTheme = require("@root/Common/useTheme")
 
-type Storybook = storybookTypes.Storybook
+type Storybook = Storyteller.Storybook
 type ComponentTreeNode = explorerTypes.ComponentTreeNode
 
 local e = React.createElement

src/Plugin/PluginApp.luau

@@ -1,5 +1,6 @@
 local ModuleLoader = require("@pkg/ModuleLoader")
 local React = require("@pkg/React")
+local Storyteller = require("@pkg/Storyteller")
 
 local NavigationContext = require("@root/Navigation/NavigationContext")
 local ResizablePanel = require("@root/Panels/ResizablePanel")
@@ -9,7 +10,6 @@ local Sidebar = require("@root/Panels/Sidebar")
 local Topbar = require("@root/Panels/Topbar")
 local constants = require("@root/constants")
 local nextLayoutOrder = require("@root/Common/nextLayoutOrder")
-local useStorybooks = require("@root/Storybook/useStorybooks")
 local useTheme = require("@root/Common/useTheme")
 
 local TOPBAR_HEIGHT_PX = 32
@@ -21,7 +21,7 @@ export type Props = {
 local function App(props: Props)
 	local theme = useTheme()
 	local settingsContext = SettingsContext.use()
-	local storybooks = useStorybooks(game, props.loader)
+	local storybooks = Storyteller.useStorybooks(game, props.loader)
 	local story: ModuleScript?, setStory = React.useState(nil :: ModuleScript?)
 	local storybook, selectStorybook = React.useState(nil :: ModuleScript?)
 	local initialSidebarWidth = settingsContext.getSetting("sidebarWidth")
@@ -71,6 +71,7 @@ local function App(props: Props)
 		MainWrapper = React.createElement("Frame", {
 			LayoutOrder = nextLayoutOrder(),
 			Size = UDim2.fromScale(1, 1) - UDim2.fromOffset(sidebarWidth, 0),
+			BackgroundTransparency = 1,
 		}, {
 			Layout = React.createElement("UIListLayout", {
 				SortOrder = Enum.SortOrder.LayoutOrder,

src/Storybook/StoryCanvas.luau

@@ -1,17 +1,20 @@
 local ModuleLoader = require("@pkg/ModuleLoader")
 local React = require("@pkg/React")
+local Storyteller = require("@pkg/Storyteller")
 
 local NoStorySelected = require("@root/Storybook/NoStorySelected")
 local StoryView = require("@root/Storybook/StoryView")
-local types = require("@root/Storybook/types")
 local useTheme = require("@root/Common/useTheme")
 
 local e = React.createElement
 
+type ModuleLoader = ModuleLoader.ModuleLoader
+type Storybook = Storyteller.Storybook
+
 type Props = {
 	story: ModuleScript,
-	loader: ModuleLoader.ModuleLoader,
-	storybook: types.Storybook,
+	loader: ModuleLoader,
+	storybook: Storybook,
 	layoutOrder: number?,
 }
 

src/Storybook/StoryControls.luau

@@ -111,7 +111,7 @@ local function StoryControls(props: Props)
 				TextTruncate = Enum.TextTruncate.AtEnd,
 			}),
 
-			Option = e("Frame", {
+			OptionWrapper = e("Frame", {
 				LayoutOrder = 2,
 				BackgroundTransparency = 1,
 				Size = UDim2.fromScale(1, 0),
@@ -120,7 +120,12 @@ local function StoryControls(props: Props)
 				Flex = e("UIFlexItem", {
 					FlexMode = Enum.UIFlexMode.Shrink,
 				}),
-			}, option),
+			}, {
+				-- Keying by the identity of sortedControls fixes a bug where
+				-- the options visually do not update when two stories have the
+				-- exact same controls
+				[`Option_{sortedControls}`] = option,
+			}),
 		})
 	end
 

src/Storybook/StoryMeta.luau

@@ -1,13 +1,16 @@
 local React = require("@pkg/React")
-local types = require("@root/Storybook/types")
+local Storyteller = require("@pkg/Storyteller")
+
 local useTheme = require("@root/Common/useTheme")
 
 local MAX_SUMMARY_SIZE = 600
 
 local e = React.createElement
 
+type Story = Storyteller.Story<unknown>
+
 export type Props = {
-	story: types.Story,
+	story: Story,
 	layoutOrder: number?,
 }
 
@@ -31,7 +34,7 @@ local function StoryMeta(props: Props)
 			BackgroundTransparency = 1,
 			Font = theme.headerFont,
 			Size = UDim2.fromScale(0, 0),
-			Text = props.story.name:sub(1, #props.story.name - 6),
+			Text = props.story.name,
 			TextColor3 = theme.text,
 			TextSize = theme.headerTextSize,
 		}),

src/Storybook/StoryMeta.story.luau

@@ -12,6 +12,10 @@ return {
 			story = {
 				name = "Story",
 				summary = "Story summary",
+				source = Instance.new("ModuleScript"),
+				storybook = {
+					storyRoots = {},
+				},
 			},
 		}),
 	}),