Refactor internal utility usage

docs/intro.md

@@ -24,17 +24,17 @@ OnyxUI is structured as a collection of modules, separated by folders. This is u
 ```lua
 local OnyxUI = require(path.to.OnyxUI)
 
--- Utils
+-- Util
 local Themer = require(OnyxUI.Themer)
-local Colors = require(OnyxUI.Utils.Color)
+local Util = require(OnyxUI.Util)
 
 -- Components
 local Card = require(OnyxUI.Components.Card)
 
 -- Component construction
 return function()
   return Card {
-    BackgroundColor3 = Colors.Gray["200"],
+    BackgroundColor3 = Util.Colors.Gray["200"],
     Padding = Computed(function()
       return UDim.new(0, Themer.Theme.Spacing["2"]:get())
     end),

docs/themer.md

@@ -8,13 +8,13 @@ Themer allows you to customize components throughout OnyxUI, with support for th
 
 ## Sample themes
 
-- [OnyxNight](https://github.com/ImAvafe/OnyxUI/blob/main/src/Utils/Themer/OnyxNight.lua)
-- [BitCave](https://github.com/ImAvafe/OnyxUI/blob/main/src/Utils/Themer/BitCave.lua)
+- [OnyxNight](https://github.com/ImAvafe/OnyxUI/blob/main/src/Util/Themer/OnyxNight.lua)
+- [BitCave](https://github.com/ImAvafe/OnyxUI/blob/main/src/Util/Themer/BitCave.lua)
 
 ## Making your own theme
 
 :::tip
-Check out the [`ThemeTemplate`](https://github.com/ImAvafe/OnyxUI/blob/main/src/Utils/Themer/ThemeTemplate.lua) file for a reference of properties you can specify in your theme. Make sure to not include Fusion `Value`s in yours.
+Check out the [`ThemeTemplate`](https://github.com/ImAvafe/OnyxUI/blob/main/src/Util/Themer/ThemeTemplate.lua) file for a reference of properties you can specify in your theme. Make sure to not include Fusion `Value`s in yours.
 :::
 
 Once you've created your own theme, you can load it into OnyxUI with `Themer:Set()`.

docs/utils.md

@@ -2,26 +2,26 @@
 sidebar_position: 4
 ---
 
-# Utils
+# Util
 
 Important utilities for UI development. These are also used by OnyxUI itself!
 
-## EnsureValue
+## [EnsureValue](/api/Util#EnsureValue)
 
 Want to ensure your component props are Fusion `Value`s? This makes it a one-line operation.
 
 ```lua
 return function(Props)
-  local MyProp = EnsureValue(Props.MyProp, "string", "Default")
+  local MyProp = Util.EnsureValue(Props.MyProp, "string", "Default")
 ```
 
-## CombineProps
+## [CombineProps](/api/Util#CombineProps)
 
 Let's say you have a "CustomButton" component, and you want it to support `Size`, `Position`, and other arbitrary properties. Manually implementing all that boilerplate in the component itself is tedious. So let's have `CombineProps` do the passthrough for us:
 
 ```lua
 return function(Props)
-  return BaseButton(CombineProps(Props, {
+  return BaseButton(Util.CombineProps(Props, {
     BackgroundTransparency = 0,
     CornerRadius = Computed(function()
       return UDim.new(0, Themer.Theme.CornerRadius["1"]:get())
@@ -32,6 +32,6 @@ return function(Props)
 end
 ```
 
-## Colors
+## [Colors](/api/Util#Colors)
 
 Color shorthands imported from [TailwindCSS's color palette](https://tailwindcss.com/docs/customizing-colors#default-color-palette). So you don't have to worry about color picking anymore.

moonwave.toml

@@ -1,5 +1,5 @@
 [[classOrder]]
-classes = ["Utils"]
+classes = ["Util"]
 
 [[classOrder]]
 section = "Components"
@@ -32,6 +32,6 @@ style = "dark"
 copyright = "Copyright © 2024 Avafe. Built with Moonwave and Docusaurus"
 
 # [[classOrder]]
-# section = "Utils"
+# section = "Util"
 # collapsed = true
 # classes = ["Colors", "EnsureValue"]

src/Components/AutoScaleFrame.lua

@@ -1,9 +1,8 @@
 local Workspace = game:GetService("Workspace")
 local OnyxUI = script.Parent.Parent
 local Fusion = require(OnyxUI.Parent.Fusion)
-local EnsureValue = require(OnyxUI.Utils.EnsureValue)
-local PubTypes = require(OnyxUI.Utils.PubTypes)
-local CombineProps = require(OnyxUI.Utils.CombineProps)
+local Util = require(OnyxUI.Util)
+local PubTypes = require(OnyxUI.Util.PubTypes)
 
 local Value = Fusion.Value
 local Computed = Fusion.Computed
@@ -21,17 +20,17 @@ export type Props = Base.Props & {
 }
 
 return function(Props: Props)
-	local BaseResolution = EnsureValue(Props.BaseResolution, "Vector2", Vector2.new())
-	local MinScale = EnsureValue(Props.MinScale, "number", 0.8)
-	local MaxScale = EnsureValue(Props.MaxScale, "number", math.huge)
-	local ScaleMultiplier = EnsureValue(Props.ScaleMultiplier, "number", 1)
+	local BaseResolution = Util.EnsureValue(Props.BaseResolution, "Vector2", Vector2.new())
+	local MinScale = Util.EnsureValue(Props.MinScale, "number", 0.8)
+	local MaxScale = Util.EnsureValue(Props.MaxScale, "number", math.huge)
+	local ScaleMultiplier = Util.EnsureValue(Props.ScaleMultiplier, "number", 1)
 
 	local ViewportSize = Value(Vector2.new())
 	Hydrate(Workspace.CurrentCamera) {
 		[Out "ViewportSize"] = ViewportSize,
 	}
 
-	return Frame(CombineProps(Props, {
+	return Frame(Util.CombineProps(Props, {
 		Name = "AutoScaleFrame",
 		Scale = Computed(function()
 			local Ratio = ScaleMultiplier:get()

src/Components/Avatar.lua

@@ -1,10 +1,8 @@
 local OnyxUI = script.Parent.Parent
 local Fusion = require(OnyxUI.Parent.Fusion)
-local EnsureValue = require(OnyxUI.Utils.EnsureValue)
+local Util = require(OnyxUI.Util)
 local Themer = require(OnyxUI.Themer)
-local Colors = require(OnyxUI.Utils.Colors)
-local PubTypes = require(OnyxUI.Utils.PubTypes)
-local CombineProps = require(OnyxUI.Utils.CombineProps)
+local PubTypes = require(OnyxUI.Util.PubTypes)
 
 local Children = Fusion.Children
 local Computed = Fusion.Computed
@@ -28,24 +26,24 @@ export type Props = Image.Props & {
 
 return function(Props: Props)
 	local EnsuredProps = {
-		Image = EnsureValue(Props.Image, "string", nil),
-		RingEnabled = EnsureValue(Props.RingEnabled, "boolean", false),
-		RingColor = EnsureValue(Props.RingColor, "Color3", Themer.Theme.Colors.Primary.Main),
-		RingThickness = EnsureValue(Props.RingThickness, "number", Themer.Theme.StrokeThickness["2"]),
-		IndicatorEnabled = EnsureValue(Props.IndicatorEnabled, "boolean", false),
-		IndicatorColor = EnsureValue(Props.IndicatorColor, "Color3", Themer.Theme.Colors.Primary.Main),
-		IndicatorCornerRadius = EnsureValue(
+		Image = Util.EnsureValue(Props.Image, "string", nil),
+		RingEnabled = Util.EnsureValue(Props.RingEnabled, "boolean", false),
+		RingColor = Util.EnsureValue(Props.RingColor, "Color3", Themer.Theme.Colors.Primary.Main),
+		RingThickness = Util.EnsureValue(Props.RingThickness, "number", Themer.Theme.StrokeThickness["2"]),
+		IndicatorEnabled = Util.EnsureValue(Props.IndicatorEnabled, "boolean", false),
+		IndicatorColor = Util.EnsureValue(Props.IndicatorColor, "Color3", Themer.Theme.Colors.Primary.Main),
+		IndicatorCornerRadius = Util.EnsureValue(
 			Props.IndicatorCornerRadius,
 			"UDim",
 			Computed(function()
 				return UDim.new(0, Themer.Theme.CornerRadius.Full:get())
 			end)
 		),
-		IndicatorIcon = EnsureValue(Props.IndicatorIcon, "string", nil),
-		IndicatorIconColor = EnsureValue(Props.IndicatorIconColor, "Color3", Colors.White),
+		IndicatorIcon = Util.EnsureValue(Props.IndicatorIcon, "string", nil),
+		IndicatorIconColor = Util.EnsureValue(Props.IndicatorIconColor, "Color3", Util.Colors.White),
 	}
 
-	return Image(CombineProps(Props, {
+	return Image(Util.CombineProps(Props, {
 		Name = "Avatar",
 		Image = EnsuredProps.Image,
 		Size = Computed(function()

src/Components/Avatar.story.lua

@@ -1,7 +1,7 @@
 local OnyxUI = script.Parent.Parent
 local Fusion = require(OnyxUI.Parent.Fusion)
 local Themer = require(OnyxUI.Themer)
-local Colors = require(OnyxUI.Utils.Colors)
+local Util = require(OnyxUI.Util)
 
 local Children = Fusion.Children
 local Value = Fusion.Value
@@ -10,7 +10,8 @@ local Computed = Fusion.Computed
 local Frame = require(script.Parent.Frame)
 local Avatar = require(script.Parent.Avatar)
 
-local INDICATOR_COLORS = { Colors.Red["500"], Colors.Green["400"], Colors.Orange["500"], Colors.Stone["600"] }
+local INDICATOR_COLORS =
+	{ Util.Colors.Red["500"], Util.Colors.Green["400"], Util.Colors.Orange["500"], Util.Colors.Stone["600"] }
 
 return {
 	story = function(Parent: GuiObject, _Props: { [any]: any })
@@ -72,7 +73,7 @@ return {
 						return UDim.new(0, Themer.Theme.CornerRadius.Full:get())
 					end),
 					RingEnabled = true,
-					RingColor = Colors.Green["400"],
+					RingColor = Util.Colors.Green["400"],
 					RingThickness = RingThickness,
 				},
 				Avatar {
@@ -81,7 +82,7 @@ return {
 						return UDim.new(0, Themer.Theme.CornerRadius.Full:get())
 					end),
 					IndicatorEnabled = true,
-					IndicatorColor = Colors.Sky["500"],
+					IndicatorColor = Util.Colors.Sky["500"],
 					IndicatorIcon = "rbxassetid://13805569043",
 				},
 				Avatar {

src/Components/Badge.lua

@@ -1,10 +1,9 @@
 local OnyxUI = script.Parent.Parent
 local Fusion = require(OnyxUI.Parent.Fusion)
-local EnsureValue = require(OnyxUI.Utils.EnsureValue)
+local Util = require(OnyxUI.Util)
 local Themer = require(OnyxUI.Themer)
-local ColorUtils = require(OnyxUI.Parent.ColorUtils)
-local PubTypes = require(OnyxUI.Utils.PubTypes)
-local CombineProps = require(OnyxUI.Utils.CombineProps)
+local ColorUtil = require(OnyxUI.Parent.ColorUtil)
+local PubTypes = require(OnyxUI.Util.PubTypes)
 
 local Children = Fusion.Children
 local Computed = Fusion.Computed
@@ -23,19 +22,19 @@ export type Props = Frame.Props & {
 }
 
 return function(Props: Props)
-	local Contents = EnsureValue(Props.Contents, "table", {})
-	local ContentWraps = EnsureValue(Props.ContentsWrapped, "boolean", true)
-	local Color = EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.Base.Main)
-	local ContentColor = EnsureValue(
+	local Contents = Util.EnsureValue(Props.Contents, "table", {})
+	local ContentWraps = Util.EnsureValue(Props.ContentsWrapped, "boolean", true)
+	local Color = Util.EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.Base.Main)
+	local ContentColor = Util.EnsureValue(
 		Props.ContentColor,
 		"Color3",
 		Computed(function()
-			return ColorUtils.Emphasize(Color:get(), Themer.Theme.Emphasis.Contrast:get())
+			return ColorUtil.Emphasize(Color:get(), Themer.Theme.Emphasis.Contrast:get())
 		end)
 	)
-	local ContentSize = EnsureValue(Props.ContentSize, "number", Themer.Theme.TextSize["1"])
+	local ContentSize = Util.EnsureValue(Props.ContentSize, "number", Themer.Theme.TextSize["1"])
 
-	return Frame(CombineProps(Props, {
+	return Frame(Util.CombineProps(Props, {
 		Name = "Badge",
 		BackgroundColor3 = Color,
 		BackgroundTransparency = 0,

src/Components/Badge.story.lua

@@ -1,7 +1,7 @@
 local OnyxUI = script.Parent.Parent
 local Fusion = require(OnyxUI.Parent.Fusion)
 local Themer = require(OnyxUI.Themer)
-local Colors = require(OnyxUI.Utils.Colors)
+local Util = require(OnyxUI.Util)
 
 local Children = Fusion.Children
 local Computed = Fusion.Computed
@@ -39,11 +39,11 @@ return {
 				},
 				Badge {
 					Contents = { "rbxassetid://5422855103", "PREMIUM" },
-					Color = Colors.Amber["500"],
+					Color = Util.Colors.Amber["500"],
 				},
 				Badge {
 					Contents = { "🕑 50% OFF" },
-					Color = Colors.Red["500"],
+					Color = Util.Colors.Red["500"],
 				},
 				Badge {
 					Contents = Computed(function()
@@ -65,11 +65,11 @@ return {
 						},
 						Badge {
 							Contents = { "-50%" },
-							Color = Colors.Red["500"],
+							Color = Util.Colors.Red["500"],
 						},
 						Badge {
 							Contents = { "Test" },
-							Color = Colors.Black,
+							Color = Util.Colors.Black,
 							CornerRadius = Computed(function()
 								return UDim.new(0, Themer.Theme.CornerRadius["0"]:get())
 							end),