Start on Toast

default.project.json

@@ -1,23 +1,6 @@
 {
   "name": "podkit",
   "tree": {
-    "$className": "DataModel",
-
-    "ReplicatedStorage": {
-      "Packages": {
-        "$path": "Packages",
-        "PodKit": {
-          "$path": "modules"
-        }
-      }
-    },
-
-    "StarterPlayer": {
-      "StarterPlayerScripts": {
-        "PodKitTest": {
-          "$path": "test"
-        }
-      }
-    }
+    "$path": "modules"
   }
 }

modules/Components/Button.lua

@@ -52,6 +52,8 @@ function Button(props: Types.ButtonProps): Child
 		TextSize = props.TextSize,
 		TextWrapped = props.TextWrapped or true,
 		Text = props.Text,
+		TextXAlignment = props.TextXAlignment or Enum.TextXAlignment.Center,
+		TextYAlignment = props.TextYAlignment or Enum.TextYAlignment.Center,
 
 		BackgroundColor3 = Spring(
 			Computed(function()

modules/Components/Icon.lua

@@ -0,0 +1,59 @@
+local Packages = script.Parent.Parent.Parent
+local Fusion = require(Packages.Fusion)
+
+local New = Fusion.New
+local Children = Fusion.Children
+local Value = Fusion.Value
+local OnEvent = Fusion.OnEvent
+local Computed = Fusion.Computed
+local Spring = Fusion.Spring
+
+local Utils = require(script.Parent.Parent.Utils)
+
+local checkTheme = require(script.Parent.Parent.Core.themeManager).checkTheme
+
+local Basics = Utils.Basics
+local Constants = Utils.Constants
+
+local Types = script.Parent.Parent.Types
+
+function Icon(props: Types.IconProps): Child
+	local anchorPoint = props.AnchorPoint
+
+	local position = Basics.Positions[props.PrePosition] or {
+		x = 0,
+		y = 0,
+	}
+	local size = Basics.Icon.Sizes[props.PreSize] or UDim2.fromScale(0.2, 0.15)
+
+	local paddingTop = props.PaddingTop or props.PaddingY or props.Padding or UDim.new(0.5, 0)
+	local paddingBottom = props.PaddingBottom or props.PaddingY or props.Padding or UDim.new(0.5, 0)
+	local paddingLeft = props.PaddingLeft or props.PaddingX or props.Padding or UDim.new(0.5, 0)
+	local paddingRight = props.PaddingRight or props.PaddingX or props.Padding or UDim.new(0.5, 0)
+
+	if props.PrePosition ~= nil and props.AnchorPoint == nil then
+		anchorPoint = Vector2.new(position.x, position.y)
+	end
+
+	return New("ImageLabel")({
+		Name = props.Name or "Icon",
+		Position = props.Position or UDim2.fromScale(position.x, position.y),
+		Size = props.Size or size,
+		AnchorPoint = anchorPoint,
+		BackgroundTransparency = 1,
+		Image = props.Icon or Constants.NO_ICON_URL,
+		ImageColor3 = checkTheme(props.Color) or checkTheme(props.Colour) or Basics.Icon.IconColor,
+		ImageTransparency = props.Transparency,
+		[Children] = {
+			New("UIPadding")({
+				PaddingTop = paddingTop,
+				PaddingBottom = paddingBottom,
+				PaddingLeft = paddingLeft,
+				PaddingRight = paddingRight,
+			}),
+			props[Children],
+		},
+	})
+end
+
+return Icon

modules/Components/Text.lua

@@ -40,13 +40,15 @@ function Text(props: Types.TextProps): Child
 		ZIndex = props.ZIndex,
 		Parent = props.Parent,
 
-		FontFace = checkTheme(props.FontFace) or Basics.Text.Font,
+		FontFace = checkTheme(props.Font) or Basics.Text.Font,
 		TextColor3 = checkTheme(props.TextColor) or Basics.Text.TextColor,
 		TextScaled = props.TextScaled or true,
 		TextSize = props.TextSize,
 		RichText = props.RichText or true,
 		TextWrapped = props.TextWrapped or true,
 		Text = props.Text,
+		TextXAlignment = props.TextXAlignment or Enum.TextXAlignment.Left,
+		TextYAlignment = props.TextYAlignment or Enum.TextYAlignment.Center,
 
 		BackgroundColor3 = checkTheme(props.BackgroundColor) or checkTheme(props.Bg) or Basics.Text.Bg,
 		BackgroundTransparency = props.BackgroundTransparency or 1,

modules/Components/Toast.lua

@@ -1 +1,66 @@
 -- TODO: Toast component
+
+local Packages = script.Parent.Parent.Parent
+local Fusion = require(Packages.Fusion)
+
+local New = Fusion.New
+local Children = Fusion.Children
+local Spring = Fusion.Spring
+
+local Box = require(script.Parent.Box)
+local HStack = require(script.Parent.Stack).Stack
+local Text = require(script.Parent.Text)
+local Icon = require(script.Parent.Icon)
+local IconButton = require(script.Parent.IconButton)
+
+local Types = script.Parent.Parent.Types
+
+local Basics = require(script.Parent.Parent.Utils.Basics)
+local checkTheme = require(script.Parent.Parent.Core.themeManager).checkTheme
+
+function Toast(props: Types.ToastProps): Child
+	return Box({
+		Name = props.Id or "Toast",
+		Position = UDim2.fromScale(0.5, 0.95),
+		AnchorPoint = Vector2.new(0.5, 1),
+		-- Bg = Color3.fromHex("#90cdf4"),
+		Bg = "Destino",
+		Size = UDim2.fromScale(0.16, 0.05),
+		[Children] = {
+			New("UICorner")({
+				CornerRadius = UDim.new(0.2, 0),
+			}),
+			HStack({
+				PreSize = "full",
+				BackgroundTransparency = 1,
+				[Children] = {
+					Icon({
+						Icon = "rbxassetid://12970546311",
+						IconColor = Color3.fromHex("#000000"),
+						Size = UDim2.fromScale(0.15, 0.8),
+					}),
+					Text({
+						Size = UDim2.fromScale(0.8, 0.8),
+						Text = "Card Added to Dock",
+						Font = Font.fromName("SourceSansBold"),
+						TextColor = Color3.fromHex("#000000"),
+						PrePosition = "center",
+					}),
+				},
+			}),
+			IconButton({
+				Icon = "rbxassetid://12324498733",
+				IconColor = Color3.fromHex("#000000"),
+				Size = UDim2.fromScale(0.7, 0.5),
+				Position = UDim2.fromScale(1.03, -0.13),
+				AnchorPoint = Vector2.new(1, 0),
+				Bg = Color3.fromRGB(255, 0, 0),
+				PaddingLeft = UDim.new(0.8, 0),
+			}),
+		},
+	})
+end
+
+function useToast() end
+
+return Toast

modules/Components/init.lua

@@ -14,6 +14,7 @@ local PodKitComponents = {
 	Stack = require(script.Stack).Stack,
 	HStack = require(script.Stack).Stack,
 	VStack = require(script.Stack).VStack,
+	Toast = require(script.Toast),
 }
 
 return PodKitComponents

modules/Utils/Basics.lua

@@ -43,6 +43,20 @@ return {
 		},
 	},
 
+	Icon = {
+		Bg = Color3.fromHex("#000000"),
+		IconColor = Color3.fromHex("#FFFFFF"),
+		Sizes = {
+			xsm = UDim2.fromScale(0.025, 0.025),
+			sm = UDim2.fromScale(0.05, 0.05),
+			md = UDim2.fromScale(0.1, 0.1),
+			lg = UDim2.fromScale(0.2, 0.2),
+			xl = UDim2.fromScale(0.3, 0.3),
+			xxl = UDim2.fromScale(0.4, 0.4),
+			full = UDim2.fromScale(1, 1),
+		},
+	},
+
 	Box = {
 		Bg = Color3.fromHex("#FFFFFF"),
 		TextColor = Color3.fromHex("#000000"),

test.project.json

@@ -0,0 +1,23 @@
+{
+  "name": "podkit",
+  "tree": {
+    "$className": "DataModel",
+
+    "ReplicatedStorage": {
+      "Packages": {
+        "$path": "Packages",
+        "PodKit": {
+          "$path": "modules"
+        }
+      }
+    },
+
+    "StarterPlayer": {
+      "StarterPlayerScripts": {
+        "PodKitTest": {
+          "$path": "test"
+        }
+      }
+    }
+  }
+}

test/init.client.lua

@@ -14,6 +14,7 @@ local HStack = Components.HStack
 local VStack = Components.VStack
 local Box = Components.Box
 local Text = Components.Text
+local Toast = Components.Toast
 local Heading = Components.Heading
 local Button = Components.Button
 local IconButton = Components.IconButton
@@ -30,6 +31,13 @@ extendTheme({
 })
 
 local function App()
+	New("ScreenGui")({
+		Name = "PodKitToast",
+		Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui"),
+		[Children] = {
+			Toast({}),
+		},
+	})
 	return Provider({
 		Id = "App",
 		[Children] = {