Taking a pass over UI components (#20)

- Factored out networking to "wrapper" components
- Added stories for each component
- Stories are removed from prod builds

.justfile

@@ -44,7 +44,8 @@ _get-plugin-name:
 	jq -r .name {{ plugin_root / "default.project.json" }}
 
 _prune:
-	rm -rf {{ plugin_build / "**/*.spec.lua" }}
+	rm -rf {{ plugin_build / "**/*.spec.luau" }}
+	rm -rf {{ plugin_build / "**/*.story.luau" }}
 
 _build target output:
 	-rm -rf {{ plugin_build }}

.vscode/settings.json

@@ -4,6 +4,10 @@
     "testez.d.lua"
   ],
   "luau-lsp.require.mode": "relativeToFile",
+  "luau-lsp.ignoreGlobs": [
+    "**/_Index/**",
+    "**/build/**"
+  ],
   "luau-lsp.require.directoryAliases": {
     "@lune/": "~/.lune/.typedefs/0.7.11/",
     "@root/": "plugin/src",

plugin/src/components/App.luau

@@ -1,6 +1,6 @@
 local React = require("@pkg/React")
 local types = require("@root/types")
-local Home = require("./Home")
+local HomeWrapper = require("./HomeWrapper")
 local ThemeDetailsWrapper = require("./ThemeDetailsWrapper")
 
 local useCallback = React.useCallback
@@ -31,7 +31,7 @@ local function App(_props: Props)
 
 	return React.createElement("Folder", nil, {
 		Home = if view == "Home"
-			then React.createElement(Home, {
+			then React.createElement(HomeWrapper, {
 				onViewExtension = onViewExtension,
 			})
 			else nil,

plugin/src/components/App.story.luau

@@ -0,0 +1,8 @@
+local React = require("@pkg/React")
+local App = require("./App")
+
+return {
+	story = function()
+		return React.createElement(App)
+	end,
+}

plugin/src/components/ExtensionsList.story.luau

@@ -0,0 +1,74 @@
+local React = require("@pkg/React")
+local types = require("@root/types")
+local ExtensionsList = require("./ExtensionsList")
+
+-- TODO: Just use a real web response
+local function createMockExtension(name: string): types.PublishedExtension
+	return {
+		categories = {},
+		deploymentType = 0,
+		displayName = name,
+		extensionId = "1",
+		extensionName = name,
+		flags = "",
+		installationTargets = {},
+		lastUpdated = tostring(DateTime.now()),
+		longDescription = "",
+		presentInConflictList = "",
+		publishedDate = tostring(DateTime.now()),
+		publisher = {
+			displayName = "OnlyTwentyCharacters",
+			domain = "",
+			flags = "",
+			isDomainVerified = false,
+			publisherId = "",
+			publisherName = "",
+		},
+		releaseDate = tostring(DateTime.now()),
+		sharedWith = {},
+		shortDescription = "",
+		statistics = {},
+		tags = {},
+		versions = {
+			{
+				version = "1.2.3",
+				versionDescription = "",
+				assetUri = "",
+				fallbackAssetUri = "",
+				files = {},
+				flags = 0,
+				badges = {},
+				targetPlatform = "",
+				lastUpdated = "",
+				properties = {},
+				validationResultMessage = "",
+			},
+		},
+	}
+end
+
+local controls = {
+	numExtensions = 10,
+}
+
+type Props = {
+	controls: {
+		numExtensions: number,
+	},
+}
+
+return {
+	controls = controls,
+	story = function(props: Props)
+		local extensions = {}
+		print(props.controls.numExtensions)
+		for i = 1, props.controls.numExtensions do
+			table.insert(extensions, createMockExtension(`Extension {i}`))
+		end
+
+		return React.createElement(ExtensionsList, {
+			extensions = extensions,
+			onView = print,
+		})
+	end,
+}

plugin/src/components/Home.luau

@@ -1,5 +1,4 @@
 local React = require("@pkg/React")
-local fetchVisualStudioExtensions = require("@root/requests/fetchVisualStudioExtensions")
 local types = require("@root/types")
 local LoadingSpinner = require("./LoadingSpinner")
 local ExtensionsList = require("./ExtensionsList")
@@ -9,50 +8,34 @@ type PublishedExtension = types.PublishedExtension
 type ExtensionTheme = types.ExtensionTheme
 
 local useCallback = React.useCallback
-local useEffect = React.useEffect
-local useState = React.useState
+local useMemo = React.useMemo
 
 local PADDING = UDim.new(0, 8)
 
 export type Props = {
+	extensions: { PublishedExtension },
+	onSearch: (searchTerm: string) -> (),
 	onViewExtension: (extension: PublishedExtension) -> (),
+	searchTerm: string?,
+	err: string?,
 }
 
 local function Home(props: Props)
-	local isLoading, setIsLoading = useState(true)
-	local extensions, setExtensions = useState({} :: { PublishedExtension })
-	local searchTerm, setSearchTerm = useState("")
-	local err, setErr = useState(nil :: string?)
+	local isLoading = useMemo(function()
+		return #props.extensions == 0 and not props.err
+	end, { props.extensions, props.err })
 
 	local onSearch = useCallback(function(rbx: TextBox, enterPressed: boolean)
 		if enterPressed then
-			setSearchTerm(rbx.Text)
+			props.onSearch(rbx.Text)
 		end
 	end, {})
 
-	useEffect(function()
-		setErr(nil)
-		setIsLoading(true)
-		fetchVisualStudioExtensions({
-				-- page = page, -- TODO: Increment the page when scrolling to the bottom of the list
-				pageSize = 20,
-				searchTerm = if searchTerm ~= "" then searchTerm else "theme",
-			})
-			:andThen(function(newExtensions)
-				setExtensions(newExtensions)
-			end)
-			:catch(function()
-				setErr(`No extensions found. Please try again later`)
-			end)
-			:finally(function()
-				setIsLoading(false)
-			end)
-	end, { searchTerm })
-
 	return React.createElement("ScrollingFrame", {
-		Size = UDim2.fromScale(1, 1),
+		Size = UDim2.fromScale(1, 0),
+		AutomaticSize = Enum.AutomaticSize.Y,
 		BackgroundTransparency = 1,
-		CanvasSize = UDim2.fromScale(0, 0),
+		CanvasSize = UDim2.fromScale(1, 0),
 		AutomaticCanvasSize = Enum.AutomaticSize.Y,
 	}, {
 		Layout = React.createElement("UIListLayout", {
@@ -74,7 +57,7 @@ local function Home(props: Props)
 			BackgroundTransparency = 1,
 		}, {
 			Input = React.createElement("TextBox", {
-				Text = searchTerm,
+				Text = if props.searchTerm then props.searchTerm else "",
 				PlaceholderText = "Search themes...",
 				Size = UDim2.fromScale(1, 0),
 				TextColor3 = Color3.fromRGB(255, 255, 255),
@@ -95,12 +78,12 @@ local function Home(props: Props)
 			}),
 		}),
 
-		ErrorMessage = if err
+		ErrorMessage = if props.err
 			then React.createElement("TextLabel", {
 				LayoutOrder = getLayoutOrder(),
 				AutomaticSize = Enum.AutomaticSize.XY,
 				BackgroundTransparency = 1,
-				Text = err,
+				Text = props.err,
 				TextSize = 16,
 				Font = Enum.Font.GothamMedium,
 				TextXAlignment = Enum.TextXAlignment.Left,
@@ -130,7 +113,7 @@ local function Home(props: Props)
 				else {
 					ExtensionList = if not isLoading
 						then React.createElement(ExtensionsList, {
-							extensions = extensions,
+							extensions = props.extensions,
 							onView = props.onViewExtension,
 						})
 						else nil,

plugin/src/components/Home.story.luau

@@ -0,0 +1,51 @@
+local React = require("@pkg/React")
+local stories = require("./stories")
+local Home = require("./Home")
+
+return {
+	story = stories({
+		{
+			name = "Primary",
+			story = function()
+				return React.createElement(Home, {
+					extensions = {
+						{
+							extensionName = "theme",
+							displayName = "Theme",
+							publisher = {
+								publisherName = "OnlyTwentyCharacters",
+							},
+							versions = {
+								{
+									version = "1.2.3",
+								},
+							},
+						},
+					},
+					onViewExtension = print,
+				})
+			end,
+		},
+
+		{
+			name = "Loading",
+			story = function()
+				return React.createElement(Home, {
+					extensions = {},
+					onViewExtension = print,
+				})
+			end,
+		},
+
+		{
+			name = "Network error",
+			story = function()
+				return React.createElement(Home, {
+					extensions = {},
+					err = "Network error occurred",
+					onViewExtension = print,
+				})
+			end,
+		},
+	}),
+}

plugin/src/components/HomeWrapper.luau

@@ -0,0 +1,44 @@
+local React = require("@pkg/React")
+local fetchVisualStudioExtensions = require("@root/requests/fetchVisualStudioExtensions")
+local types = require("@root/types")
+local Home = require("./Home")
+
+type PublishedExtension = types.PublishedExtension
+
+local useEffect = React.useEffect
+local useState = React.useState
+
+export type Props = {
+	onViewExtension: (extension: PublishedExtension) -> (),
+}
+
+local function HomeWrapper(props: Props)
+	local extensions, setExtensions = useState({} :: { PublishedExtension })
+	local searchTerm, setSearchTerm = useState(nil :: string?)
+	local err, setErr = useState(nil :: string?)
+
+	useEffect(function()
+		setErr(nil)
+		fetchVisualStudioExtensions({
+				-- page = page, -- TODO: Increment the page when scrolling to the bottom of the list
+				pageSize = 20,
+				searchTerm = if searchTerm then searchTerm else "theme",
+			})
+			:andThen(function(newExtensions)
+				setExtensions(newExtensions)
+			end)
+			:catch(function()
+				setErr(`No extensions found. Please try again later`)
+			end)
+	end, { searchTerm })
+
+	return React.createElement(Home, {
+		extensions = extensions,
+		err = err,
+		searchTerm = searchTerm,
+		onSearch = setSearchTerm,
+		onViewExtension = props.onViewExtension,
+	})
+end
+
+return HomeWrapper

plugin/src/components/HomeWrapper.story.luau

@@ -0,0 +1,10 @@
+local React = require("@pkg/React")
+local HomeWrapper = require("./HomeWrapper")
+
+return {
+	story = function()
+		return React.createElement(HomeWrapper, {
+			onViewExtension = print,
+		})
+	end,
+}

plugin/src/components/LoadingSpinner.story.luau

@@ -0,0 +1,8 @@
+local React = require("@pkg/React")
+local LoadingSpinner = require("./LoadingSpinner")
+
+return {
+	story = function()
+		return React.createElement(LoadingSpinner)
+	end,
+}

plugin/src/components/ThemeDetails.story.luau

@@ -0,0 +1,27 @@
+local React = require("@pkg/React")
+local ThemeDetails = require("./ThemeDetails")
+local themesSnapshot = require("@root/requests/snapshots/get-v1-themes")
+
+return {
+	story = function()
+		return React.createElement(ThemeDetails, {
+			extension = {
+				extensionName = "theme-monokai-pro-vscode",
+				displayName = "Monokai Pro",
+				publisher = {
+					publisherName = "monokai",
+				},
+				versions = {
+					{
+						version = "1.2.2",
+					},
+				},
+			},
+			themes = themesSnapshot,
+			onBack = function()
+				print("go back")
+			end,
+			studio = {},
+		})
+	end,
+}

plugin/src/components/ThemeDetailsWrapper.story.luau

@@ -0,0 +1,24 @@
+local React = require("@pkg/React")
+local ThemeDetailsWrapper = require("./ThemeDetailsWrapper")
+
+return {
+	story = function()
+		return React.createElement(ThemeDetailsWrapper, {
+			extension = {
+				extensionName = "theme-monokai-pro-vscode",
+				displayName = "Monokai Pro",
+				publisher = {
+					publisherName = "monokai",
+				},
+				versions = {
+					{
+						version = "1.2.2",
+					},
+				},
+			},
+			onBack = function()
+				print("go back")
+			end,
+		})
+	end,
+}