Merge remote-tracking branch 'origin/main' into readme-badges

.vscode/settings.json

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

LICENSE

@@ -1,4 +1,4 @@
-Copyright 2021 David Minnerly
+Copyright 2021 flipbook-labs
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -18,12 +18,12 @@ You can install flipbook from the [Roblox marketplace](https://www.roblox.com/li
 
 ## Documentation
 
-Learn how to use flipbook on the [documentation site](https://flipbook-labs.github.io/flipbook/).
+Learn how to use flipbook on the [official documentation site](https://flipbook-labs.github.io/flipbook/).
 
 ## Contributing
 
 Before opening a pull request, check out our [contributing guide](https://flipbook-labs.github.io/flipbook/docs/contributing/) to learn how we develop the plugin.
 
 ## License
 
-[MIT License](LICENSE)
+flipbook is licensed under [MIT License](LICENSE).

build.project.json

@@ -7,6 +7,9 @@
     "Example": {
       "$path": "example"
     },
+    "wally.toml": {
+      "$path": "wally.toml"
+    },
     "$path": "src"
   }
-}
+}

default.project.json

@@ -4,6 +4,9 @@
     "Packages": {
       "$path": "Packages"
     },
+    "wally.toml": {
+      "$path": "wally.toml"
+    },
     "$path": "build"
   }
-}
+}

foreman.toml

@@ -7,5 +7,5 @@ selene = { source = "Kampfkarren/selene", version = "0.27.1" }
 stylua = { source = "JohnnyMorganz/StyLua", version = "0.20.0" }
 tarmac = { source = "Roblox/tarmac", version = "0.7.0" }
 wally = { source = "UpliftGames/wally", version = "0.3.2" }
-luau-lsp = { source = "JohnnyMorganz/luau-lsp", version = "1.32.3" }
+luau-lsp = { source = "JohnnyMorganz/luau-lsp", version = "1.34.0" }
 wally-package-types = { source = "JohnnyMorganz/wally-package-types", version = "1.3.2" }

src/About/AboutView.luau

@@ -0,0 +1,147 @@
+local React = require("@pkg/React")
+
+local RobloxProfile = require("@root/About/RobloxProfile")
+local Sprite = require("@root/Common/Sprite")
+local assets = require("@root/assets")
+local nextLayoutOrder = require("@root/Common/nextLayoutOrder")
+local useTheme = require("@root/Common/useTheme")
+local wally = require(script.Parent.Parent["wally.toml"])
+
+local useMemo = React.useMemo
+
+local AUTHOR_USER_IDS = {
+	1343930,
+	731053179,
+}
+
+local function AboutView()
+	local theme = useTheme()
+	local currentYear = useMemo(function()
+		return (DateTime.now():ToUniversalTime() :: any).Year
+	end, {})
+
+	local authors: { [string]: React.Node } = {}
+	for _, userId in AUTHOR_USER_IDS do
+		authors[`Author{userId}`] = React.createElement(RobloxProfile, {
+			userId = userId,
+			LayoutOrder = nextLayoutOrder(),
+		})
+	end
+
+	return React.createElement("Frame", {
+		Size = UDim2.fromScale(1, 1),
+		BackgroundColor3 = theme.background,
+		BorderSizePixel = 0,
+	}, {
+		Layout = React.createElement("UIListLayout", {
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			HorizontalAlignment = Enum.HorizontalAlignment.Center,
+			Padding = theme.paddingLarge,
+		}),
+
+		Padding = React.createElement("UIPadding", {
+			PaddingTop = theme.paddingLarge,
+			PaddingRight = theme.paddingLarge,
+			PaddingBottom = theme.paddingLarge,
+			PaddingLeft = theme.paddingLarge,
+		}),
+
+		Logo = React.createElement(Sprite, {
+			layoutOrder = nextLayoutOrder(),
+			image = assets.IconLight,
+			size = UDim2.fromOffset(42, 42),
+		}),
+
+		Title = React.createElement("TextLabel", {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundTransparency = 1,
+			Font = theme.font,
+			LayoutOrder = nextLayoutOrder(),
+			Size = UDim2.fromScale(0, 0),
+			Text = `flipbook v{wally.package.version}`,
+			TextColor3 = theme.text,
+			TextSize = theme.headerTextSize,
+			TextWrapped = true,
+		}),
+
+		GitHub = React.createElement("Frame", {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundTransparency = 1,
+			LayoutOrder = nextLayoutOrder(),
+		}, {
+			Layout = React.createElement("UIListLayout", {
+				SortOrder = Enum.SortOrder.LayoutOrder,
+				FillDirection = Enum.FillDirection.Horizontal,
+				Padding = theme.paddingSmall,
+			}),
+
+			Icon = React.createElement(Sprite, {
+				layoutOrder = nextLayoutOrder(),
+				color = theme.github,
+				image = assets.GitHubMark,
+				size = UDim2.fromOffset(theme.textSize, theme.textSize),
+			}),
+
+			Label = React.createElement("TextLabel", {
+				AutomaticSize = Enum.AutomaticSize.XY,
+				BackgroundTransparency = 1,
+				Font = theme.font,
+				LayoutOrder = nextLayoutOrder(),
+				Size = UDim2.fromScale(0, 0),
+				Text = "flipbook-labs/flipbook",
+				TextColor3 = theme.text,
+				TextSize = theme.textSize,
+			}),
+		}),
+
+		Authors = React.createElement("Frame", {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundTransparency = 1,
+			LayoutOrder = nextLayoutOrder(),
+		}, {
+			Layout = React.createElement("UIListLayout", {
+				SortOrder = Enum.SortOrder.LayoutOrder,
+				HorizontalAlignment = Enum.HorizontalAlignment.Center,
+				Padding = theme.padding,
+			}),
+
+			Title = React.createElement("TextLabel", {
+				AutomaticSize = Enum.AutomaticSize.XY,
+				BackgroundTransparency = 1,
+				Font = theme.font,
+				LayoutOrder = nextLayoutOrder(),
+				Size = UDim2.fromScale(0, 0),
+				Text = `Created by:`,
+				TextColor3 = theme.text,
+				TextSize = theme.textSize,
+				TextWrapped = true,
+			}),
+
+			AuthorList = React.createElement("Frame", {
+				AutomaticSize = Enum.AutomaticSize.XY,
+				BackgroundTransparency = 1,
+				LayoutOrder = nextLayoutOrder(),
+			}, {
+				Layout = React.createElement("UIListLayout", {
+					SortOrder = Enum.SortOrder.LayoutOrder,
+					FillDirection = Enum.FillDirection.Horizontal,
+					Padding = theme.padding,
+				}),
+			}, authors),
+		}),
+
+		Copy = React.createElement("TextLabel", {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundTransparency = 1,
+			Font = theme.font,
+			LayoutOrder = nextLayoutOrder(),
+			Size = UDim2.fromScale(0, 0),
+			Text = `Copyright © 2021—{currentYear} flipbook-labs`,
+			TextColor3 = theme.text,
+			TextSize = theme.textSize,
+			TextWrapped = true,
+		}),
+	})
+end
+
+return AboutView

src/About/AboutView.story.luau

@@ -0,0 +1,15 @@
+local React = require("@pkg/React")
+
+local AboutView = require("./AboutView")
+local ContextProviders = require("@root/Common/ContextProviders")
+local MockPlugin = require("@root/Testing/MockPlugin")
+
+return {
+	story = function()
+		return React.createElement(ContextProviders, {
+			plugin = MockPlugin.new(),
+		}, {
+			AboutView = React.createElement(AboutView),
+		})
+	end,
+}

src/About/RobloxProfile.luau

@@ -0,0 +1,79 @@
+local Players = game:GetService("Players")
+
+local React = require("@pkg/React")
+local ReactSpring = require("@pkg/ReactSpring")
+
+local nextLayoutOrder = require("@root/Common/nextLayoutOrder")
+local useTheme = require("@root/Common/useTheme")
+
+local useState = React.useState
+local useEffect = React.useEffect
+
+local AVATAR_SIZE = Enum.ThumbnailSize.Size48x48
+
+export type Props = {
+	userId: number,
+	LayoutOrder: number?,
+}
+
+local function RobloxProfile(props: Props)
+	local theme = useTheme()
+	local avatar, setAvatar = useState(nil :: string?)
+	local username, setUsername = useState(nil :: string?)
+
+	local isLoading = avatar == nil and username == nil
+
+	local styles = ReactSpring.useSpring({
+		alpha = if isLoading then 1 else 0,
+	})
+
+	useEffect(function()
+		task.spawn(function()
+			setAvatar(Players:GetUserThumbnailAsync(props.userId, Enum.ThumbnailType.HeadShot, AVATAR_SIZE))
+		end)
+
+		task.spawn(function()
+			setUsername(Players:GetNameFromUserIdAsync(props.userId))
+		end)
+	end, { props.userId })
+
+	return React.createElement("Frame", {
+		LayoutOrder = props.LayoutOrder,
+		AutomaticSize = Enum.AutomaticSize.XY,
+		BackgroundTransparency = 1,
+	}, {
+		Layout = React.createElement("UIListLayout", {
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			FillDirection = Enum.FillDirection.Horizontal,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			Padding = theme.paddingSmall,
+		}),
+
+		Avatar = React.createElement("ImageLabel", {
+			LayoutOrder = nextLayoutOrder(),
+			Size = UDim2.fromOffset(48, 48),
+			BackgroundColor3 = theme.sidebar,
+			BackgroundTransparency = 0.6,
+			ImageTransparency = styles.alpha,
+			BorderSizePixel = 0,
+			Image = avatar,
+		}, {
+			Corner = React.createElement("UICorner", {
+				CornerRadius = UDim.new(0.5, 0),
+			}),
+		}),
+
+		Username = React.createElement("TextLabel", {
+			LayoutOrder = nextLayoutOrder(),
+			Text = `@{username}`,
+			Font = theme.font,
+			TextColor3 = theme.text,
+			TextSize = theme.textSize,
+			BackgroundTransparency = 1,
+			TextTransparency = styles.alpha,
+			AutomaticSize = Enum.AutomaticSize.XY,
+		}),
+	})
+end
+
+return RobloxProfile

src/About/RobloxProfile.story.luau

@@ -0,0 +1,27 @@
+local React = require("@pkg/React")
+
+local ContextProviders = require("@root/Common/ContextProviders")
+local MockPlugin = require("@root/Testing/MockPlugin")
+local RobloxProfile = require("./RobloxProfile")
+
+local controls = {
+	userId = 1,
+}
+
+type Props = {
+	controls: typeof(controls),
+}
+return {
+	controls = controls,
+	story = function(props: Props)
+		local userId = assert(tonumber(props.controls.userId))
+
+		return React.createElement(ContextProviders, {
+			plugin = MockPlugin.new(),
+		}, {
+			RobloxProfiler = React.createElement(RobloxProfile, {
+				userId = userId,
+			}),
+		})
+	end,
+}