diff --git a/README.md b/README.md index ae3bd8a..31a2d98 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ ## Documentation 📄 -None as of yet. I'll work on Moonwave documentation along with component typings in a future update. Sorry! 😬 +None as of yet. I'll work on Moonwave documentation in a future update. Sorry! Components are fully typed however, so props will autocomplete. ## Features ✨ @@ -50,21 +50,15 @@ OnyxUI should provide a beautiful, simple and flexible components toolset for de It should follow Roblox Fusion's way of doing things, while innovating upon areas as necessary. -### Props - - **Component props should be as consistent as possible**: `Color` for a `Button` should mean the same as `Color` does for a `Badge`. - **Props should be inherited across components**: `Button` should support the props from `BaseButton`, `Frame` and `GuiObject`. - **Engine-provided properties should be supported**: `Size`, `AutomaticSize`, etc are useful nearly everywhere, and should be supported nearly everywhere. -### Theming - - **Theming should be both easy and comprehensive**, letting the developer choose how much, or how little they need to customize. -### Utilities - -- **Utilities should enhance the developer experience, while remaining optional**: use `EnsureValue`, `Colors` and `Modifier`, or don't. It's up to you. +- **OnyxUI should enhance the developer experience, while remaining optional**: use `EnsureValue`, `Colors` and styling props, or don't. It's up to you. ## diff --git a/src/Components/AutoScaleFrame.lua b/src/Components/AutoScaleFrame.lua index 67841cb..03e4af6 100644 --- a/src/Components/AutoScaleFrame.lua +++ b/src/Components/AutoScaleFrame.lua @@ -1,59 +1,44 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local Workspace = game:GetService("Workspace") +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local EnsureValue = require(OnyxUI.Utils.EnsureValue) -local Modifier = require(OnyxUI.Utils.Modifier) +local PubTypes = require(OnyxUI.Utils.PubTypes) local Value = Fusion.Value local Computed = Fusion.Computed local Out = Fusion.Out local Hydrate = Fusion.Hydrate -local Children = Fusion.Children -local Frame = require(OnyxUI.Components.Frame) +local Base = require(script.Parent.Base) +local Frame = require(script.Parent.Frame) -return function(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "AutoScaleFrame") +export type Props = Base.Props & { + BaseResolution: PubTypes.CanBeState?, + MinScale: PubTypes.CanBeState?, + MaxScale: PubTypes.CanBeState?, + ScaleMultiplier: PubTypes.CanBeState?, +} - Props.BaseResolution = EnsureValue(Props.BaseResolution, "Vector2", Vector2.new()) - Props.ScaleClamps = EnsureValue(Props.ScaleClamps, "table", { Min = 0.8, Max = math.huge }) - Props.ScaleMultiplier = EnsureValue(Props.ScaleMultiplier, "number", 1) +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 ViewportSize = Value(Vector2.new()) - Hydrate(game.Workspace.CurrentCamera) { + Hydrate(Workspace.CurrentCamera) { [Out "ViewportSize"] = ViewportSize, } return Frame { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - Interactable = Props.Interactable, - BackgroundColor3 = Props.BackgroundColor3, - BackgroundTransparency = Props.BackgroundTransparency, - - [Children] = { - Modifier.Scale { - Scale = Computed(function() - local Ratio = Props.ScaleMultiplier:get() - / math.max( - (Props.BaseResolution:get().X / ViewportSize:get().X), - (Props.BaseResolution:get().Y / ViewportSize:get().Y) - ) - return math.clamp(Ratio, Props.ScaleClamps:get().Min, Props.ScaleClamps:get().Max) - end), - }, - - Props[Children], - }, + Name = "AutoScaleFrame", + Scale = Computed(function() + local Ratio = ScaleMultiplier:get() + / math.max( + (BaseResolution:get().X / ViewportSize:get().X), + (BaseResolution:get().Y / ViewportSize:get().Y) + ) + return math.clamp(Ratio, MinScale:get(), MaxScale:get()) + end), } end diff --git a/src/Components/Avatar.lua b/src/Components/Avatar.lua index 38fbb58..0a267bb 100644 --- a/src/Components/Avatar.lua +++ b/src/Components/Avatar.lua @@ -1,82 +1,76 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local EnsureValue = require(OnyxUI.Utils.EnsureValue) local Themer = require(OnyxUI.Utils.Themer) -local Modifier = require(OnyxUI.Utils.Modifier) local Colors = require(OnyxUI.Utils.Colors) +local PubTypes = require(OnyxUI.Utils.PubTypes) +local CombineProps = require(OnyxUI.Utils.CombineProps) local Children = Fusion.Children local Computed = Fusion.Computed local Spring = Fusion.Spring -local Image = require(OnyxUI.Components.Image) -local CanvasGroup = require(OnyxUI.Components.CanvasGroup) -local Icon = require(OnyxUI.Components.Icon) +local Image = require(script.Parent.Image) +local CanvasGroup = require(script.Parent.CanvasGroup) +local Icon = require(script.Parent.Icon) -return function(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "Avatar") - Props.Size = EnsureValue( - Props.Size, - "UDim2", - Computed(function() - return UDim2.fromOffset(Themer.Theme.TextSize["4.5"]:get(), Themer.Theme.TextSize["4.5"]:get()) - end) - ) - Props.BackgroundColor3 = EnsureValue(Props.BackgroundColor3, "Color3", Themer.Theme.Colors.Neutral.Dark) - Props.Image = EnsureValue(Props.Image, "string", nil) - Props.CornerRadius = EnsureValue(Props.CornerRadius, "number", Themer.Theme.CornerRadius["1"]) - - Props.RingEnabled = EnsureValue(Props.RingEnabled, "boolean", false) - Props.RingColor = EnsureValue(Props.RingColor, "Color3", Themer.Theme.Colors.Primary.Main) - Props.RingThickness = EnsureValue(Props.RingThickness, "number", Themer.Theme.StrokeThickness["2"]) - - Props.IndicatorEnabled = EnsureValue(Props.IndicatorEnabled, "boolean", false) - Props.IndicatorColor = EnsureValue(Props.IndicatorColor, "Color3", Themer.Theme.Colors.Primary.Main) - Props.IndicatorCornerRadius = EnsureValue(Props.IndicatorCornerRadius, "number", Themer.Theme.CornerRadius.Full) - Props.IndicatorIcon = EnsureValue(Props.IndicatorIcon, "string", nil) - Props.IndicatorIconColor = EnsureValue(Props.IndicatorIconColor, "Color3", Colors.White) - - Props.SpringSpeed = EnsureValue(Props.SpringSpeed, "number", Themer.Theme.SpringSpeed["0.5"]) +export type Props = Image.Props & { + Image: PubTypes.CanBeState?, + RingEnabled: PubTypes.CanBeState?, + RingColor: PubTypes.CanBeState?, + RingThickness: PubTypes.CanBeState?, + IndicatorEnabled: PubTypes.CanBeState?, + IndicatorColor: PubTypes.CanBeState?, + IndicatorIcon: PubTypes.CanBeState?, + IndicatorIconColor: PubTypes.CanBeState?, + IndicatorCornerRadius: PubTypes.CanBeState?, +} - return Image { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - Interactable = Props.Interactable, - BackgroundColor3 = Props.BackgroundColor3, - BackgroundTransparency = Props.BackgroundTransparency, +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( + 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), + } - Image = Props.Image, + return Image(CombineProps(Props, { + Name = "Avatar", + Image = EnsuredProps.Image, + Size = Computed(function() + return UDim2.fromOffset(Themer.Theme.TextSize["4.5"]:get(), Themer.Theme.TextSize["4.5"]:get()) + end), + BackgroundColor3 = Themer.Theme.Colors.Neutral.Dark, + StrokeEnabled = EnsuredProps.RingEnabled, + StrokeColor = Spring(EnsuredProps.RingColor, Themer.Theme.SpringSpeed["0.5"], Themer.Theme.SpringDampening), + StrokeThickness = Spring( + EnsuredProps.RingThickness, + Themer.Theme.SpringSpeed["0.5"], + Themer.Theme.SpringDampening + ), + CornerRadius = Computed(function() + return UDim.new(0, Themer.Theme.CornerRadius["1"]:get()) + end), [Children] = { - Modifier.Corner { - CornerRadius = Computed(function() - return UDim.new(0, Props.CornerRadius:get()) - end), - }, - Modifier.Stroke { - Enabled = Props.RingEnabled, - Color = Spring(Props.RingColor, Props.SpringSpeed, Themer.Theme.SpringDampening), - Thickness = Spring(Props.RingThickness, Props.SpringSpeed, Themer.Theme.SpringDampening), - }, - Computed(function() - if Props.IndicatorEnabled:get() then + if EnsuredProps.IndicatorEnabled:get() then return CanvasGroup { Name = "Indicator", BackgroundColor3 = Spring( - Props.IndicatorColor, - Props.SpringSpeed, + EnsuredProps.IndicatorColor, + Themer.Theme.SpringSpeed["0.5"], Themer.Theme.SpringDampening ), BackgroundTransparency = 0, @@ -84,20 +78,15 @@ return function(Props: { [any]: any }) AutomaticSize = Enum.AutomaticSize.None, AnchorPoint = Vector2.new(1, 1), Position = UDim2.fromScale(1, 1), + AspectRatio = 1, + CornerRadius = EnsuredProps.IndicatorCornerRadius, [Children] = { - Modifier.AspectRatioConstraint {}, - Modifier.Corner { - CornerRadius = Computed(function() - return UDim.new(0, Props.IndicatorCornerRadius:get()) - end), - }, - Icon { - Image = Props.IndicatorIcon, - ImageColor3 = Props.IndicatorIconColor, + Image = EnsuredProps.IndicatorIcon, + ImageColor3 = EnsuredProps.IndicatorIconColor, ImageTransparency = Computed(function() - if Props.IndicatorIcon:get() then + if EnsuredProps.IndicatorIcon:get() then return 0 else return 1 @@ -109,10 +98,10 @@ return function(Props: { [any]: any }) }, }, } + else + return end end, Fusion.cleanup), - - Props[Children], }, - } + })) end diff --git a/src/Components/Avatar.story.lua b/src/Components/Avatar.story.lua index 73c1a54..4ee5381 100644 --- a/src/Components/Avatar.story.lua +++ b/src/Components/Avatar.story.lua @@ -1,6 +1,5 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) -local Modifier = require(OnyxUI.Utils.Modifier) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local Themer = require(OnyxUI.Utils.Themer) local Colors = require(OnyxUI.Utils.Colors) @@ -8,8 +7,8 @@ local Children = Fusion.Children local Value = Fusion.Value local Computed = Fusion.Computed -local Frame = require(OnyxUI.Components.Frame) -local Avatar = require(OnyxUI.Components.Avatar) +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"] } @@ -32,54 +31,64 @@ return { local Instance = Frame { Parent = Parent, + Padding = Computed(function() + return UDim.new(0, Themer.Theme.StrokeThickness["4"]:get()) + end), + ListEnabled = true, + ListFillDirection = Enum.FillDirection.Horizontal, + ListPadding = Computed(function() + return UDim.new(0, Themer.Theme.Spacing["1"]:get()) + end), [Children] = { - Modifier.ListLayout { - Padding = Computed(function() - return UDim.new(0, Themer.Theme.Spacing["1"]:get()) - end), - FillDirection = Enum.FillDirection.Horizontal, - }, - Modifier.Padding { - Padding = UDim.new(0, Themer.Theme.StrokeThickness["4"]:get()), - }, - Avatar { Image = "rbxthumb://type=AvatarHeadShot&id=144146784&w=150&h=150", }, Avatar { Image = "rbxthumb://type=AvatarHeadShot&id=144146784&w=150&h=150", - CornerRadius = Themer.Theme.CornerRadius.Full, + CornerRadius = Computed(function() + return UDim.new(0, Themer.Theme.CornerRadius.Full:get()) + end), }, Avatar { Image = "rbxthumb://type=AvatarHeadShot&id=144146784&w=150&h=150", - CornerRadius = Themer.Theme.CornerRadius.Full, + CornerRadius = Computed(function() + return UDim.new(0, Themer.Theme.CornerRadius.Full:get()) + end), RingEnabled = true, RingColor = IndicatorColor, }, Avatar { Image = "rbxthumb://type=AvatarHeadShot&id=144146784&w=150&h=150", - CornerRadius = Themer.Theme.CornerRadius.Full, + CornerRadius = Computed(function() + return UDim.new(0, Themer.Theme.CornerRadius.Full:get()) + end), IndicatorEnabled = true, IndicatorColor = IndicatorColor, }, Avatar { Image = "rbxthumb://type=AvatarHeadShot&id=144146784&w=150&h=150", - CornerRadius = Themer.Theme.CornerRadius.Full, + CornerRadius = Computed(function() + return UDim.new(0, Themer.Theme.CornerRadius.Full:get()) + end), RingEnabled = true, RingColor = Colors.Green["400"], RingThickness = RingThickness, }, Avatar { Image = "rbxthumb://type=AvatarHeadShot&id=144146784&w=150&h=150", - CornerRadius = Themer.Theme.CornerRadius.Full, + CornerRadius = Computed(function() + return UDim.new(0, Themer.Theme.CornerRadius.Full:get()) + end), IndicatorEnabled = true, IndicatorColor = Colors.Sky["500"], IndicatorIcon = "rbxassetid://13805569043", }, Avatar { Image = "rbxthumb://type=AvatarHeadShot&id=144146784&w=150&h=150", - CornerRadius = Themer.Theme.CornerRadius.Full, + CornerRadius = Computed(function() + return UDim.new(0, Themer.Theme.CornerRadius.Full:get()) + end), IndicatorEnabled = true, Size = UDim2.fromOffset(150, 150), }, diff --git a/src/Components/Badge.lua b/src/Components/Badge.lua index 11fec51..af91524 100644 --- a/src/Components/Badge.lua +++ b/src/Components/Badge.lua @@ -1,101 +1,87 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local EnsureValue = require(OnyxUI.Utils.EnsureValue) local Themer = require(OnyxUI.Utils.Themer) -local ColorUtils = require(OnyxUI.Packages.ColorUtils) -local Modifier = require(OnyxUI.Utils.Modifier) +local ColorUtils = require(OnyxUI.Parent.ColorUtils) +local PubTypes = require(OnyxUI.Utils.PubTypes) +local CombineProps = require(OnyxUI.Utils.CombineProps) local Children = Fusion.Children local Computed = Fusion.Computed local ForValues = Fusion.ForValues -local Frame = require(OnyxUI.Components.Frame) -local Text = require(OnyxUI.Components.Text) -local Icon = require(OnyxUI.Components.Icon) +local Frame = require(script.Parent.Frame) +local Text = require(script.Parent.Text) +local Icon = require(script.Parent.Icon) -return function(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "Badge") - Props.BackgroundTransparency = EnsureValue(Props.BackgroundTransparency, "number", 0) +export type Props = Frame.Props & { + Contents: PubTypes.CanBeState<{ string }>?, + ContentsWrapped: PubTypes.CanBeState?, + Color: PubTypes.CanBeState?, + ContentColor: PubTypes.CanBeState?, + ContentSize: PubTypes.CanBeState?, +} - Props.Contents = EnsureValue(Props.Contents, "table", {}) - Props.ContentsWrapped = EnsureValue(Props.ContentsWrapped, "boolean", true) - Props.Color = EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.Base.Main) - Props.ContentColor = EnsureValue( +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( Props.ContentColor, "Color3", Computed(function() - return ColorUtils.Emphasize(Props.Color:get(), 1) + return ColorUtils.Emphasize(Color:get(), Themer.Theme.Emphasis.Contrast:get()) end) ) - Props.ContentSize = EnsureValue(Props.ContentSize, "number", Themer.Theme.TextSize["1"]) - Props.CornerRadius = EnsureValue(Props.CornerRadius, "number", Themer.Theme.CornerRadius["2"]) + local ContentSize = EnsureValue(Props.ContentSize, "number", Themer.Theme.TextSize["1"]) - return Frame { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - Interactable = Props.Interactable, - BackgroundTransparency = Props.BackgroundTransparency, - - BackgroundColor3 = Props.Color, + return Frame(CombineProps(Props, { + Name = "Badge", + BackgroundColor3 = Color, + BackgroundTransparency = 0, + Padding = Computed(function() + return UDim.new(0, Themer.Theme.Spacing["0"]:get()) + end), + PaddingLeft = Computed(function() + return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) + end), + PaddingRight = Computed(function() + return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) + end), + CornerRadius = Computed(function() + return UDim.new(0, Themer.Theme.CornerRadius["2"]:get()) + end), + ListEnabled = true, + ListPadding = Computed(function() + return UDim.new(0, Themer.Theme.Spacing["0.25"]:get()) + end), + ListFillDirection = Enum.FillDirection.Horizontal, + ListHorizontalAlignment = Enum.HorizontalAlignment.Center, + ListWrapsVerticalAlignment = Enum.VerticalAlignment.Center, + ListWraps = ContentWraps, [Children] = { - Modifier.Padding { - PaddingTop = UDim.new(0, 0), - PaddingBottom = UDim.new(0, 0), - PaddingLeft = Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) - end), - PaddingRight = Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) - end), - }, - Modifier.Corner { - CornerRadius = Computed(function() - return UDim.new(0, Props.CornerRadius:get()) - end), - }, - Modifier.ListLayout { - Padding = Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.25"]:get()) - end), - FillDirection = Enum.FillDirection.Horizontal, - HorizontalAlignment = Enum.HorizontalAlignment.Center, - VerticalAlignment = Enum.VerticalAlignment.Center, - Wraps = Props.ContentsWrapped, - }, - - ForValues(Props.Contents, function(ContentString: string) + ForValues(Contents, function(ContentString: string) if string.find(ContentString, "rbxassetid://", 1, true) then return Icon { Image = ContentString, - ImageColor3 = Props.ContentColor, + ImageColor3 = ContentColor, Size = Computed(function() - return UDim2.fromOffset(Props.ContentSize:get(), Props.ContentSize:get()) + return UDim2.fromOffset(ContentSize:get(), ContentSize:get()) end), } else return Text { Text = ContentString, - TextColor3 = Props.ContentColor, - TextSize = Props.ContentSize, + TextColor3 = ContentColor, + TextSize = ContentSize, FontFace = Computed(function() return Font.new(Themer.Theme.Font.Body:get(), Themer.Theme.FontWeight.Bold:get()) end), - TextWrapped = Props.ContentsWrapped, + TextWrapped = ContentWraps, } end end, Fusion.cleanup), }, - } + })) end diff --git a/src/Components/Badge.story.lua b/src/Components/Badge.story.lua index cfea2f9..0753439 100644 --- a/src/Components/Badge.story.lua +++ b/src/Components/Badge.story.lua @@ -1,10 +1,8 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local Themer = require(OnyxUI.Utils.Themer) local Colors = require(OnyxUI.Utils.Colors) -local Modifier = require(OnyxUI.Utils.Modifier) -local New = Fusion.New local Children = Fusion.Children local Computed = Fusion.Computed local Value = Fusion.Value @@ -30,15 +28,12 @@ return { local Instance = Frame { Parent = Parent, + ListEnabled = true, + ListPadding = Computed(function() + return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) + end), [Children] = { - New "UIListLayout" { - SortOrder = Enum.SortOrder.LayoutOrder, - FillDirection = Enum.FillDirection.Vertical, - Padding = Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.25"]:get()) - end), - }, Badge { Contents = { "BADGE" }, }, @@ -61,11 +56,10 @@ return { Color = Themer.Theme.Colors.Primary.Main, }, Frame { - [Children] = { - Modifier.ListLayout { - FillDirection = Enum.FillDirection.Horizontal, - }, + ListEnabled = true, + ListHorizontalAlignment = Enum.HorizontalAlignment.Center, + [Children] = { Text { Text = "$25", }, @@ -73,6 +67,16 @@ return { Contents = { "-50%" }, Color = Colors.Red["500"], }, + Badge { + Contents = { "Test" }, + Color = Colors.Black, + CornerRadius = Computed(function() + return UDim.new(0, Themer.Theme.CornerRadius["0"]:get()) + end), + BackgroundTransparency = 0.5, + PaddingLeft = UDim.new(0, 0), + PaddingRight = UDim.new(0, 0), + }, }, }, }, diff --git a/src/Components/Base.lua b/src/Components/Base.lua new file mode 100644 index 0000000..5d2ee49 --- /dev/null +++ b/src/Components/Base.lua @@ -0,0 +1,458 @@ +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) +local PubTypes = require(OnyxUI.Utils.PubTypes) +local EnsureValue = require(script.Parent.Parent.Utils.EnsureValue) +local Themer = require(script.Parent.Parent.Utils.Themer) +local GetValue = require(OnyxUI.Utils.GetValue) + +local New = Fusion.New +local Computed = Fusion.Computed +local Children = Fusion.Children + +export type Props = { + ClassName: string?, + + Name: PubTypes.CanBeState?, + Parent: PubTypes.CanBeState?, + Position: PubTypes.CanBeState?, + Rotation: PubTypes.CanBeState?, + AnchorPoint: PubTypes.CanBeState?, + Size: PubTypes.CanBeState?, + AutomaticSize: PubTypes.CanBeState?, + Visible: PubTypes.CanBeState?, + ZIndex: PubTypes.CanBeState?, + LayoutOrder: PubTypes.CanBeState?, + ClipsDescendants: PubTypes.CanBeState?, + Active: PubTypes.CanBeState?, + Selectable: PubTypes.CanBeState?, + Interactable: PubTypes.CanBeState?, + BackgroundColor3: PubTypes.CanBeState?, + BackgroundTransparency: PubTypes.CanBeState?, + NextSelectionDown: PubTypes.CanBeState?, + NextSelectionUp: PubTypes.CanBeState?, + NextSelectionRight: PubTypes.CanBeState?, + NextSelectionLeft: PubTypes.CanBeState?, + SelectionImageObject: PubTypes.CanBeState?, + SelectionOrder: PubTypes.CanBeState?, + SizeConstraint: PubTypes.CanBeState?, + AutoLocalize: PubTypes.CanBeState?, + RootLocalizationTable: PubTypes.CanBeState?, + SelectionBehaviorDown: PubTypes.CanBeState?, + SelectionBehaviorUp: PubTypes.CanBeState?, + SelectionBehaviorRight: PubTypes.CanBeState?, + SelectionBehaviorLeft: PubTypes.CanBeState?, + SelectionGroup: PubTypes.CanBeState?, + + CornerRadius: PubTypes.CanBeState?, + + Padding: PubTypes.CanBeState?, + PaddingTop: PubTypes.CanBeState?, + PaddingLeft: PubTypes.CanBeState?, + PaddingRight: PubTypes.CanBeState?, + PaddingBottom: PubTypes.CanBeState?, + + Scale: PubTypes.CanBeState?, + + StrokeEnabled: PubTypes.CanBeState?, + StrokeThickness: PubTypes.CanBeState?, + StrokeColor: PubTypes.CanBeState?, + StrokeTransparency: PubTypes.CanBeState?, + StrokeLineJoinMode: PubTypes.CanBeState?, + StrokeApplyStrokeMode: PubTypes.CanBeState?, + + GradientEnabled: PubTypes.CanBeState?, + GradientColor: PubTypes.CanBeState?, + GradientOffset: PubTypes.CanBeState?, + GradientRotation: PubTypes.CanBeState?, + GradientTransparency: PubTypes.CanBeState?, + + AspectRatio: PubTypes.CanBeState?, + AspectType: PubTypes.CanBeState?, + DominantAxis: PubTypes.CanBeState?, + + ListEnabled: PubTypes.CanBeState?, + ListPadding: PubTypes.CanBeState?, + ListFillDirection: PubTypes.CanBeState?, + ListSortOrder: PubTypes.CanBeState?, + ListWraps: PubTypes.CanBeState?, + ListHorizontalAlignment: PubTypes.CanBeState?, + ListHorizontalFlex: PubTypes.CanBeState?, + ListVerticalAlignment: PubTypes.CanBeState?, + ListVerticalFlex: PubTypes.CanBeState?, + ListItemLineAlignment: PubTypes.CanBeState?, + + GridEnabled: PubTypes.CanBeState?, + GridCellPadding: PubTypes.CanBeState?, + GridCellSize: PubTypes.CanBeState?, + GridFillDirection: PubTypes.CanBeState?, + GridFillDirectionMaxCells: PubTypes.CanBeState?, + GridSortOrder: PubTypes.CanBeState?, + GridStartCorner: PubTypes.CanBeState?, + GridHorizontalAlignment: PubTypes.CanBeState?, + GridVerticalAlignment: PubTypes.CanBeState?, + + TableEnabled: PubTypes.CanBeState?, + TablePadding: PubTypes.CanBeState?, + TableFillEmptySpaceColumns: PubTypes.CanBeState?, + TableFillEmptySpaceRows: PubTypes.CanBeState?, + TableFillDirection: PubTypes.CanBeState?, + TableSortOrder: PubTypes.CanBeState?, + TableMajorAxis: PubTypes.CanBeState?, + TableHorizontalAlignment: PubTypes.CanBeState?, + TableVerticalAlignment: PubTypes.CanBeState?, + + PageEnabled: PubTypes.CanBeState?, + PageAnimated: PubTypes.CanBeState?, + PageCircular: PubTypes.CanBeState?, + PageEasingDirection: PubTypes.CanBeState?, + PageEasingStyle: PubTypes.CanBeState?, + PagePadding: PubTypes.CanBeState?, + PageTweenTime: PubTypes.CanBeState?, + PageFillDirection: PubTypes.CanBeState?, + PageSortOrder: PubTypes.CanBeState?, + PageHorizontalAlignment: PubTypes.CanBeState?, + PageVerticalAlignment: PubTypes.CanBeState?, + PageGamepadInputEnabled: PubTypes.CanBeState?, + PageScrollWheelInputEnabled: PubTypes.CanBeState?, + PageTouchInputEnabled: PubTypes.CanBeState?, + + FlexMode: PubTypes.CanBeState?, + FlexItemLineAlignment: PubTypes.CanBeState?, + FlexGrowRatio: PubTypes.CanBeState?, + FlexShrinkRatio: PubTypes.CanBeState?, + + MaxSize: PubTypes.CanBeState?, + MinSize: PubTypes.CanBeState?, + + MaxTextSize: PubTypes.CanBeState?, + MinTextSize: PubTypes.CanBeState?, +} + +return function(Props: Props): GuiObject + local Name = EnsureValue(Props.Name, "string", "Base") + local CornerRadius = EnsureValue( + Props.CornerRadius, + "UDim", + Computed(function() + return UDim.new(0, 0) + end) + ) + local StrokeThickness = EnsureValue(Props.StrokeThickness, "number", Themer.Theme.StrokeThickness["1"]) + local StrokeColor = EnsureValue(Props.StrokeColor, "Color3", Themer.Theme.Colors.Neutral.Main) + local StrokeApplyStrokeMode = EnsureValue(Props.StrokeApplyStrokeMode, "EnumItem", Enum.ApplyStrokeMode.Border) + local Padding = EnsureValue( + Props.Padding, + "UDim", + Computed(function() + return UDim.new(0, Themer.Theme.Spacing["1"]:get()) + end) + ) + local PaddingBottom = EnsureValue(Props.PaddingBottom, "UDim", Props.Padding) + local PaddingLeft = EnsureValue(Props.PaddingLeft, "UDim", Props.Padding) + local PaddingRight = EnsureValue(Props.PaddingRight, "UDim", Props.Padding) + local PaddingTop = EnsureValue(Props.PaddingTop, "UDim", Props.Padding) + local ListPadding = EnsureValue( + Props.ListPadding, + "UDim", + Computed(function() + return UDim.new(0, Themer.Theme.Spacing["1"]:get()) + end) + ) + local ListSortOrder = EnsureValue(Props.ListSortOrder, "EnumItem", Enum.SortOrder.LayoutOrder) + local GridCellPadding = EnsureValue( + Props.GridCellPadding, + "UDim2", + Computed(function() + return UDim2.fromOffset(Themer.Theme.Spacing["0.5"]:get(), Themer.Theme.Spacing["0.5"]:get()) + end) + ) + local GridSortOrder = EnsureValue(Props.GridSortOrder, "EnumItem", Enum.SortOrder.LayoutOrder) + local PagePadding = EnsureValue( + Props.PagePadding, + "UDim", + Computed(function() + return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) + end) + ) + local PageSortOrder = EnsureValue(Props.PageSortOrder, "EnumItem", Enum.SortOrder.LayoutOrder) + local TablePadding = EnsureValue( + Props.TablePadding, + "UDim", + Computed(function() + return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) + end) + ) + local TableSortOrder = EnsureValue(Props.TableSortOrder, "EnumItem", Enum.SortOrder.LayoutOrder) + + local PaddingInEffect = Computed(function() + local Paddings = { Props.Padding, Props.PaddingTop, Props.PaddingLeft, Props.PaddingRight, Props.PaddingBottom } + + for _, PaddingProp in pairs(Paddings) do + local PaddingValue = GetValue(PaddingProp) + if typeof(PaddingValue) == "UDim" then + return true + end + end + + return false + end) + + return New(Props.ClassName or "Frame") { + Name = Name, + + Parent = Props.Parent, + Position = Props.Position, + Rotation = Props.Rotation, + AnchorPoint = Props.AnchorPoint, + Size = Props.Size, + AutomaticSize = Props.AutomaticSize, + Visible = Props.Visible, + ZIndex = Props.ZIndex, + LayoutOrder = Props.LayoutOrder, + ClipsDescendants = Props.ClipsDescendants, + Active = Props.Active, + Selectable = Props.Selectable, + Interactable = Props.Interactable, + BackgroundColor3 = Props.BackgroundColor3, + BackgroundTransparency = Props.BackgroundTransparency, + NextSelectionDown = Props.NextSelectionDown, + NextSelectionUp = Props.NextSelectionUp, + NextSelectionRight = Props.NextSelectionRight, + NextSelectionLeft = Props.NextSelectionLeft, + SelectionImageObject = Props.SelectionImageObject, + SelectionOrder = Props.SelectionOrder, + SizeConstraint = Props.SizeConstraint, + AutoLocalize = Props.AutoLocalize, + RootLocalizationTable = Props.RootLocalizationTable, + SelectionBehaviorDown = Props.SelectionBehaviorDown, + SelectionBehaviorUp = Props.SelectionBehaviorUp, + SelectionBehaviorRight = Props.SelectionBehaviorRight, + SelectionBehaviorLeft = Props.SelectionBehaviorLeft, + SelectionGroup = Props.SelectionGroup, + + [Children] = { + Props[Children], + + Computed(function() + local CornerRadiusValue = CornerRadius:get() + if + (typeof(CornerRadiusValue) == "UDim") + and ((CornerRadiusValue.Offset ~= 0) or (CornerRadiusValue.Scale ~= 0)) + then + return New "UICorner" { + CornerRadius = CornerRadius, + } + else + return + end + end, Fusion.cleanup), + Computed(function() + if PaddingInEffect:get() == true then + return New "UIPadding" { + PaddingTop = Computed(function() + local PaddingTopValue = PaddingTop:get() + local PaddingValue = Padding:get() + if typeof(PaddingTopValue) == "UDim" then + return PaddingTopValue + elseif typeof(PaddingValue) == "UDim" then + return PaddingValue + else + return UDim.new() + end + end), + PaddingLeft = Computed(function() + local PaddingLeftValue = PaddingLeft:get() + local PaddingValue = Padding:get() + if typeof(PaddingLeftValue) == "UDim" then + return PaddingLeftValue + elseif typeof(PaddingValue) == "UDim" then + return GetValue(PaddingValue) + else + return UDim.new() + end + end), + PaddingRight = Computed(function() + local PaddingRightValue = PaddingRight:get() + local PaddingValue = Padding:get() + if typeof(PaddingRightValue) == "UDim" then + return PaddingRightValue + elseif typeof(PaddingValue) == "UDim" then + return GetValue(PaddingValue) + else + return UDim.new() + end + end), + PaddingBottom = Computed(function() + local PaddingBottomValue = PaddingBottom:get() + local PaddingValue = Padding:get() + if typeof(PaddingBottomValue) == "UDim" then + return PaddingBottomValue + elseif typeof(PaddingValue) == "UDim" then + return GetValue(PaddingValue) + else + return UDim.new() + end + end), + } + else + return + end + end, Fusion.cleanup), + Computed(function() + local ScaleValue = GetValue(Props.Scale) + if (typeof(ScaleValue) == "number") and (ScaleValue ~= 1) then + return New "UIScale" { + Scale = Props.Scale, + } + else + return + end + end, Fusion.cleanup), + Computed(function() + if GetValue(Props.StrokeEnabled) == true then + return New "UIStroke" { + Enabled = Props.StrokeEnabled, + Thickness = StrokeThickness, + Color = StrokeColor, + Transparency = Props.StrokeTransparency, + ApplyStrokeMode = StrokeApplyStrokeMode, + LineJoinMode = Props.StrokeLineJoinMode, + } + else + return + end + end, Fusion.cleanup), + Computed(function() + if GetValue(Props.GradientEnabled) == true then + return New "UIGradient" { + Enabled = Props.GradientEnabled, + Color = Props.GradientColor, + Offset = Props.GradientOffset, + Rotation = Props.GradientRotation, + Transparency = Props.GradientTransparency, + } + else + return + end + end, Fusion.cleanup), + Computed(function() + local AspectRatioValue = GetValue(Props.AspectRatio) + if typeof(AspectRatioValue) == "number" then + return New "UIAspectRatioConstraint" { + AspectRatio = Props.AspectRatio, + DominantAxis = Props.DominantAxis, + AspectType = Props.AspectType, + } + else + return + end + end, Fusion.cleanup), + Computed(function() + if (Props.MaxSize ~= nil) or (Props.MinSize ~= nil) then + return New "UISizeConstraint" { + MaxSize = Props.MaxSize, + MinSize = Props.MinSize, + } + else + return + end + end, Fusion.cleanup), + Computed(function() + if + (typeof(GetValue(Props.MaxTextSize)) == "number") + or (typeof(GetValue(Props.MinTextSize)) == "number") + then + return New "UITextSizeConstraint" { + MaxTextSize = Props.MaxTextSize, + MinTextSize = Props.MinTextSize, + } + else + return + end + end, Fusion.cleanup), + Computed(function() + if GetValue(Props.ListEnabled) == true then + return New "UIListLayout" { + Padding = ListPadding, + FillDirection = Props.ListFillDirection, + SortOrder = ListSortOrder, + Wraps = Props.ListWraps, + HorizontalAlignment = Props.ListHorizontalAlignment, + HorizontalFlex = Props.ListHorizontalFlex, + ItemLineAlignment = Props.ListItemLineAlignment, + VerticalAlignment = Props.ListVerticalAlignment, + VerticalFlex = Props.ListVerticalFlex, + } + else + return + end + end, Fusion.cleanup), + Computed(function() + if GetValue(Props.GridEnabled) then + return New "UIGridLayout" { + CellPadding = GridCellPadding, + CellSize = Props.GridCellSize, + FillDirection = Props.GridFillDirection, + FillDirectionMaxCells = Props.GridFillDirectionMaxCells, + SortOrder = GridSortOrder, + StartCorner = Props.GridStartCorner, + HorizontalAlignment = Props.GridHorizontalAlignment, + VerticalAlignment = Props.GridVerticalAlignment, + } + else + return + end + end, Fusion.cleanup), + Computed(function() + if GetValue(Props.TableEnabled) then + return New "UITableLayout" { + Padding = TablePadding, + FillEmptySpaceColumns = Props.TableFillEmptySpaceColumns, + FillEmptySpaceRows = Props.TableFillEmptySpaceRows, + FillDirection = Props.TableFillDirection, + SortOrder = TableSortOrder, + MajorAxis = Props.TableMajorAxis, + HorizontalAlignment = Props.TableHorizontalAlignment, + VerticalAlignment = Props.TableVerticalAlignment, + } + else + return + end + end, Fusion.cleanup), + Computed(function() + if GetValue(Props.PageEnabled) then + return New "UIPageLayout" { + Animated = Props.PageAnimated, + Circular = Props.PageCircular, + EasingDirection = Props.PageEasingDirection, + EasingStyle = Props.PageEasingStyle, + Padding = PagePadding, + TweenTime = Props.PageTweenTime, + FillDirection = Props.PageFillDirection, + SortOrder = PageSortOrder, + HorizontalAlignment = Props.PageHorizontalAlignment, + VerticalAlignment = Props.PageVerticalAlignment, + GamepadInputEnabled = Props.PageGamepadInputEnabled, + ScrollWheelInputEnabled = Props.PageScrollWheelInputEnabled, + TouchInputEnabled = Props.PageTouchInputEnabled, + } + else + return + end + end, Fusion.cleanup), + Computed(function() + local FlexMode = GetValue(Props.FlexMode) + if (FlexMode ~= nil) and (FlexMode ~= Enum.UIFlexMode.None) then + return New "UIFlexItem" { + FlexMode = Props.FlexMode, + FlexItemLineAlignment = Props.FlexItemLineAlignment, + FlexGrowRatio = Props.FlexGrowRatio, + FlexShrinkRatio = Props.FlexShrinkRatio, + } + else + return + end + end, Fusion.cleanup), + }, + } +end diff --git a/src/Components/Base.story.lua b/src/Components/Base.story.lua new file mode 100644 index 0000000..ec3aa39 --- /dev/null +++ b/src/Components/Base.story.lua @@ -0,0 +1,125 @@ +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) +local Themer = require(OnyxUI.Utils.Themer) + +local Children = Fusion.Children +local Computed = Fusion.Computed + +local Frame = require(script.Parent.Frame) +local Base = require(script.Parent.Base) + +return { + story = function(Parent: GuiObject, _Props: { [any]: any }) + local Instance = Frame { + Parent = Parent, + ListEnabled = true, + Padding = Computed(function() + return UDim.new(0, Themer.Theme.StrokeThickness["4"]:get()) + end), + + [Children] = { + Base { + ClassName = "Frame", + Size = UDim2.fromOffset(100, 100), + CornerRadius = UDim.new(0, 0), + PaddingLeft = UDim.new(0, 10), + StrokeThickness = 5, + StrokeColor = Color3.fromRGB(255, 0, 0), + }, + Base { + ClassName = "Frame", + ListEnabled = true, + ListPadding = UDim.new(0, 15), + -- Size = UDim2.fromOffset(300, 600), + AutomaticSize = Enum.AutomaticSize.XY, + PaddingLeft = UDim.new(0, 10), + Padding = UDim.new(0, 30), + + [Children] = { + Base { + ClassName = "TextButton", + BackgroundColor3 = Color3.fromRGB(255, 0, 0), + StrokeEnabled = true, + StrokeThickness = 3, + StrokeApplyMode = Enum.ApplyStrokeMode.Border, + StrokeTransparency = 0.5, + StrokeLineJoinMode = Enum.LineJoinMode.Miter, + Size = UDim2.fromOffset(200, 50), + }, + Base { + ClassName = "TextButton", + BackgroundColor3 = Color3.fromRGB(255, 0, 0), + StrokeEnabled = true, + StrokeThickness = 3, + StrokeColor = Color3.fromRGB(0, 0, 0), + StrokeApplyMode = Enum.ApplyStrokeMode.Border, + CornerRadius = UDim.new(0, 15), + Scale = 0.95, + Size = UDim2.fromOffset(200, 50), + GradientEnabled = true, + GradientColor = ColorSequence.new(Color3.fromRGB(255, 255, 255), Color3.fromRGB(0, 0, 0)), + }, + Base { + ClassName = "TextButton", + BackgroundColor3 = Color3.fromRGB(255, 0, 0), + StrokeEnabled = true, + StrokeThickness = 3, + StrokeApplyMode = Enum.ApplyStrokeMode.Border, + Size = UDim2.fromOffset(200, 50), + AspectRatio = 1, + DominantAxis = Enum.DominantAxis.Height, + AspectType = Enum.AspectType.ScaleWithParentSize, + -- MaxSize = Vector2.new(10, 20), + }, + }, + }, + Base { + ClassName = "Frame", + Size = UDim2.fromOffset(200, 200), + GridEnabled = true, + GridCellSize = UDim2.fromOffset(50, 50), + BackgroundColor3 = Color3.fromRGB(255, 0, 0), + Padding = UDim.new(0, 10), + CornerRadius = UDim.new(0, 10), + + [Children] = { + Base { + ClassName = "Frame", + }, + Base { + ClassName = "Frame", + StrokeEnabled = true, + StrokeColor = Color3.fromRGB(0, 0, 255), + StrokeThickness = 2, + }, + Base { + ClassName = "Frame", + }, + Base { + ClassName = "Frame", + }, + Base { + ClassName = "Frame", + }, + }, + }, + }, + } + + local WorkspaceObject = Base { + Size = UDim2.fromOffset(100, 100), + CornerRadius = UDim.new(), + -- Padding = UDim.new(0, 50), + PaddingLeft = UDim.new(0, 10), + -- Scale = 1, + -- StrokeThickness = 5, + StrokeColor = Color3.fromRGB(255, 0, 0), + Parent = workspace, + } + + return function() + Instance:Destroy() + WorkspaceObject:Destroy() + end + end, +} diff --git a/src/Components/BaseButton.lua b/src/Components/BaseButton.lua index f6ee9ef..f3e942c 100644 --- a/src/Components/BaseButton.lua +++ b/src/Components/BaseButton.lua @@ -1,124 +1,110 @@ local SoundService = game:GetService("SoundService") -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) - +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local EnsureValue = require(OnyxUI.Utils.EnsureValue) local Themer = require(OnyxUI.Utils.Themer) +local PubTypes = require(OnyxUI.Utils.PubTypes) +local CombineProps = require(OnyxUI.Utils.CombineProps) -local New = Fusion.New local OnEvent = Fusion.OnEvent -local Children = Fusion.Children local Computed = Fusion.Computed +local Hydrate = Fusion.Hydrate + +local Base = require(script.Parent.Base) + +export type Props = Base.Props & { + Disabled: PubTypes.CanBeState?, + + OnActivated: PubTypes.CanBeState<() -> ()>?, + OnMouseEnter: PubTypes.CanBeState<() -> ()>?, + OnMouseLeave: PubTypes.CanBeState<() -> ()>?, + OnMouseButton1Down: PubTypes.CanBeState<() -> ()>?, + OnMouseButton1Up: PubTypes.CanBeState<() -> ()>?, -local function Button(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "BaseButton") - Props.BackgroundTransparency = EnsureValue(Props.BackgroundTransparency, "number", 1) - Props.AutomaticSize = EnsureValue(Props.AutomaticSize, "EnumItem", Enum.AutomaticSize.XY) - Props.Text = EnsureValue(Props.Text, "string", "") - Props.AutoLocalize = EnsureValue(Props.AutoLocalize, "boolean", false) + IsHovering: PubTypes.CanBeState?, + IsHolding: PubTypes.CanBeState?, - Props.Disabled = EnsureValue(Props.Disabled, "boolean", false) + HoverSound: PubTypes.CanBeState?, + ClickSound: PubTypes.CanBeState?, +} - Props.IsHovering = EnsureValue(Props.IsHovering, "boolean", false) - Props.IsHolding = EnsureValue(Props.IsHolding, "boolean", false) +return function(Props: Props) + local Disabled = EnsureValue(Props.Disabled, "boolean", false) - Props.OnActivated = EnsureValue(Props.OnActivated, "function", function() end) - Props.OnMouseEnter = EnsureValue(Props.OnMouseEnter, "function", function() end) - Props.OnMouseLeave = EnsureValue(Props.OnMouseLeave, "function", function() end) - Props.OnMouseButton1Down = EnsureValue(Props.OnMouseButton1Down, "function", function() end) - Props.OnMouseButton1Up = EnsureValue(Props.OnMouseButton1Up, "function", function() end) + local IsHovering = EnsureValue(Props.IsHovering, "boolean", false) + local IsHolding = EnsureValue(Props.IsHolding, "boolean", false) - Props.HoverSound = EnsureValue(Props.HoverSound, "Sound", Themer.Theme.Sound.Hover) - Props.ClickSound = EnsureValue(Props.ClickSound, "Sound", Themer.Theme.Sound.Click) + local OnActivated = EnsureValue(Props.OnActivated, "function", function() end) + local OnMouseEnter = EnsureValue(Props.OnMouseEnter, "function", function() end) + local OnMouseLeave = EnsureValue(Props.OnMouseLeave, "function", function() end) + local OnMouseButton1Down = EnsureValue(Props.OnMouseButton1Down, "function", function() end) + local OnMouseButton1Up = EnsureValue(Props.OnMouseButton1Up, "function", function() end) - Props.Active = EnsureValue( + local HoverSound = EnsureValue(Props.HoverSound, "Sound", Themer.Theme.Sound.Hover) + local ClickSound = EnsureValue(Props.ClickSound, "Sound", Themer.Theme.Sound.Click) + + local Active = EnsureValue( Props.Active, "boolean", Computed(function() - return not Props.Disabled:get() + return not Disabled:get() end) ) - Props.Selectable = EnsureValue( + local Selectable = EnsureValue( Props.Selectable, "boolean", Computed(function() - return not Props.Disabled:get() + return not Disabled:get() end) ) - return New "TextButton" { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - Interactable = Props.Interactable, - BackgroundColor3 = Props.BackgroundColor3, - BackgroundTransparency = Props.BackgroundTransparency, - - RichText = Props.RichText, - TextSize = Props.TextSize, - TextColor3 = Props.TextColor3, - FontFace = Props.FontFace, - TextScaled = Props.TextScaled, - Text = Props.Text, - TextWrapped = Props.TextWrapped, - TextXAlignment = Props.TextXAlignment, - TextYAlignment = Props.TextYAlignment, - TextTruncate = Props.TextTruncate, - AutoLocalize = Props.AutoLocalize, - LineHeight = Props.LineHeight, - LocalizedText = Props.LocalizedText, - MaxVisibleGraphemes = Props.MaxVisibleGraphemes, - TextTransparency = Props.TextTransparency, + return Hydrate(Base(CombineProps(Props, { + ClassName = "TextButton", + Name = "BaseButton", + AutomaticSize = Enum.AutomaticSize.XY, + Selectable = Selectable, + BackgroundTransparency = 1, + }))) { + Text = "", + RichText = false, + TextSize = 0, + AutoLocalize = false, [OnEvent "Activated"] = function() - if not Props.Disabled:get() then - SoundService:PlayLocalSound(Props.ClickSound:get()) - Props.OnActivated:get()() + if not Disabled:get() then + SoundService:PlayLocalSound(ClickSound:get()) + OnActivated:get()() end end, [OnEvent "MouseEnter"] = function() - if Props.Active:get() then - SoundService:PlayLocalSound(Props.HoverSound:get()) + if Active:get() then + SoundService:PlayLocalSound(HoverSound:get()) end - Props.IsHovering:set(true) - Props.OnMouseEnter:get()() + IsHovering:set(true) + OnMouseEnter:get()() end, [OnEvent "SelectionGained"] = function() - if Props.Active:get() then - SoundService:PlayLocalSound(Props.HoverSound:get()) + if Active:get() then + SoundService:PlayLocalSound(HoverSound:get()) end - Props.IsHovering:set(true) - Props.OnMouseEnter:get()() + IsHovering:set(true) + OnMouseEnter:get()() end, [OnEvent "MouseLeave"] = function() - Props.IsHovering:set(false) - Props.IsHolding:set(false) - Props.OnMouseLeave:get()() + IsHovering:set(false) + IsHolding:set(false) + OnMouseLeave:get()() end, [OnEvent "MouseButton1Down"] = function() - if not Props.Disabled:get() then - Props.IsHolding:set(true) - Props.OnMouseButton1Down:get()() + if not Disabled:get() then + IsHolding:set(true) + OnMouseButton1Down:get()() end end, [OnEvent "MouseButton1Up"] = function() - Props.IsHolding:set(false) - Props.OnMouseButton1Up:get()() + IsHolding:set(false) + OnMouseButton1Up:get()() end, - - [Children] = Props[Children], } end - -return Button diff --git a/src/Components/Button.lua b/src/Components/Button.lua index bb3aef4..5b235c6 100644 --- a/src/Components/Button.lua +++ b/src/Components/Button.lua @@ -1,183 +1,157 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) -local ColorUtils = require(OnyxUI.Packages.ColorUtils) - +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) +local ColorUtils = require(OnyxUI.Parent.ColorUtils) local EnsureValue = require(OnyxUI.Utils.EnsureValue) local Themer = require(OnyxUI.Utils.Themer) -local Modifier = require(OnyxUI.Utils.Modifier) +local PubTypes = require(OnyxUI.Utils.PubTypes) +local CombineProps = require(OnyxUI.Utils.CombineProps) local Children = Fusion.Children local ForValues = Fusion.ForValues local Computed = Fusion.Computed local Spring = Fusion.Spring +local Value = Fusion.Value -local BaseButton = require(OnyxUI.Components.BaseButton) -local Text = require(OnyxUI.Components.Text) -local Icon = require(OnyxUI.Components.Icon) +local BaseButton = require(script.Parent.BaseButton) +local Text = require(script.Parent.Text) +local Icon = require(script.Parent.Icon) local DISABLED_BACKGROUND_TRANSPARENCY = 0.925 local DISABLED_CONTENT_TRANSPARENCY = 0.75 -local HOLDING_BACKGROUND_TRANSPARENCY = 0.95 -local function Button(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "Button") - Props.ClipsDescendants = EnsureValue(Props.ClipsDescendants, "boolean", true) +export type Props = BaseButton.Props & { + Disabled: PubTypes.CanBeState?, + Contents: PubTypes.CanBeState<{ string }>?, + Style: PubTypes.CanBeState?, + Color: PubTypes.CanBeState?, + ContentColor: PubTypes.CanBeState?, + ContentSize: PubTypes.CanBeState?, + IsHolding: PubTypes.CanBeState?, +} - Props.Disabled = EnsureValue(Props.Disabled, "boolean", false) - Props.Contents = EnsureValue(Props.Contents, "table", {}) - Props.Style = EnsureValue(Props.Style, "string", "Filled") - Props.Color = EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.Primary.Main) - Props.ContrastColor = EnsureValue( - Props.ContrastColor, +return function(Props: Props) + local Disabled = EnsureValue(Props.Disabled, "boolean", false) + local Contents = EnsureValue(Props.Contents, "table", {}) + local Style = EnsureValue(Props.Style, "string", "Filled") + local Color = EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.Primary.Main) + local ContentColor = EnsureValue( + Props.ContentColor, "Color3", Computed(function() - return ColorUtils.Emphasize(Props.Color:get(), 1) + return ColorUtils.Emphasize(Color:get(), Themer.Theme.Emphasis.Contrast:get()) end) ) - Props.ContentSize = EnsureValue(Props.ContentSize, "number", Themer.Theme.TextSize["1"]) - Props.Padding = EnsureValue( - Props.Padding, - "UIPadding", - Modifier.Padding { - PaddingBottom = Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.25"]:get()) - end), - PaddingLeft = Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.75"]:get()) - end), - PaddingRight = Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.75"]:get()) - end), - PaddingTop = Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.25"]:get()) - end), - } - ) - - Props.IsHolding = EnsureValue(Props.IsHolding, "boolean", false) + local ContentSize = EnsureValue(Props.ContentSize, "number", Themer.Theme.TextSize["1"]) - local Color = Computed(function() - if Props.Disabled:get() then + local IsHolding = Value(false) + local IsHovering = Value(false) + local EffectiveColor = Computed(function() + if Disabled:get() then return Themer.Theme.Colors.BaseContent.Main:get() else - if Props.IsHolding:get() then - return ColorUtils.Emphasize(Props.Color:get(), Themer.Theme.Emphasis:get()) + if IsHolding:get() then + return ColorUtils.Emphasize(Color:get(), Themer.Theme.Emphasis.Regular:get()) + elseif IsHovering:get() then + return ColorUtils.Emphasize(Color:get(), Themer.Theme.Emphasis.Light:get()) else - return Props.Color:get() + return Color:get() end end end) - local ContentColor = Computed(function() - if Props.Disabled:get() then + local EffectiveContentColor = Computed(function() + if Disabled:get() then return Themer.Theme.Colors.BaseContent.Main:get() else - if Props.Style:get() == "Filled" then - return Props.ContrastColor:get() - elseif Props.Style:get() == "Outlined" then - return Color:get() - elseif Props.Style:get() == "Ghost" then - return Color:get() + if Style:get() == "Filled" then + return ContentColor:get() + elseif Style:get() == "Outlined" then + return EffectiveColor:get() + elseif Style:get() == "Ghost" then + return EffectiveColor:get() + else + return ContentColor:get() end end end) - local ContentTransparency = Computed(function() - if Props.Disabled:get() then + local EffectiveContentTransparency = Computed(function() + if Disabled:get() then return DISABLED_CONTENT_TRANSPARENCY else return 0 end end) - return BaseButton { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - Interactable = Props.Interactable, - + return BaseButton(CombineProps(Props, { + Name = "Button", BackgroundTransparency = Computed(function() - if Props.Style:get() == "Filled" then - if Props.Disabled:get() then + if Style:get() == "Filled" then + if Disabled:get() then return DISABLED_BACKGROUND_TRANSPARENCY else return 0 end else - if Props.IsHolding:get() then - return HOLDING_BACKGROUND_TRANSPARENCY - else - return 1 - end + return 1 end end), - BackgroundColor3 = Spring(Color, Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening), - - IsHovering = Props.IsHovering, - IsHolding = Props.IsHolding, - OnActivated = Props.OnActivated, - Disabled = Props.Disabled, - OnMouseEnter = Props.OnMouseEnter, - OnMouseLeave = Props.OnMouseLeave, - OnMouseButton1Down = Props.OnMouseButton1Down, - OnMouseButton1Up = Props.OnMouseButton1Up, - HoverSound = Props.HoverSound, - ClickSound = Props.ClickSound, + BackgroundColor3 = Spring(EffectiveColor, Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening), + PaddingLeft = Computed(function() + return UDim.new(0, Themer.Theme.Spacing["0.75"]:get()) + end), + PaddingRight = Computed(function() + return UDim.new(0, Themer.Theme.Spacing["0.75"]:get()) + end), + PaddingTop = Computed(function() + return UDim.new(0, Themer.Theme.Spacing["0.25"]:get()) + end), + PaddingBottom = Computed(function() + return UDim.new(0, Themer.Theme.Spacing["0.25"]:get()) + end), + CornerRadius = Computed(function() + return UDim.new(0, Themer.Theme.CornerRadius["1"]:get()) + end), + ListEnabled = true, + ListPadding = Computed(function() + return UDim.new(0, Themer.Theme.Spacing["0.25"]:get()) + end), + ListFillDirection = Enum.FillDirection.Horizontal, + ListHorizontalAlignment = Enum.HorizontalAlignment.Center, + ListVerticalAlignment = Enum.VerticalAlignment.Center, + StrokeEnabled = true, + StrokeColor = Spring(EffectiveColor, Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening), + StrokeTransparency = Computed(function() + if Style:get() == "Ghost" then + return 1 + elseif Disabled:get() then + return DISABLED_BACKGROUND_TRANSPARENCY + else + return 0 + end + end), + IsHolding = IsHolding, + IsHovering = IsHovering, [Children] = { - Props.Padding, - Modifier.Corner {}, - Modifier.ListLayout { - Padding = Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.25"]:get()) - end), - FillDirection = Enum.FillDirection.Horizontal, - HorizontalAlignment = Enum.HorizontalAlignment.Center, - VerticalAlignment = Enum.VerticalAlignment.Center, - }, - Modifier.Stroke { - Color = Spring(Color, Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening), - Transparency = Computed(function() - if Props.Style:get() == "Ghost" then - return 1 - elseif Props.Disabled:get() then - return DISABLED_BACKGROUND_TRANSPARENCY - else - return 0 - end - end), - }, - - ForValues(Props.Contents, function(ContentString: string) + ForValues(Contents, function(ContentString: string) if string.find(ContentString, "rbxassetid://", 1, true) then return Icon { Image = ContentString, - ImageColor3 = ContentColor, + ImageColor3 = EffectiveContentColor, Size = Computed(function() - return UDim2.fromOffset(Props.ContentSize:get(), Props.ContentSize:get()) + return UDim2.fromOffset(ContentSize:get(), ContentSize:get()) end), - ImageTransparency = ContentTransparency, + ImageTransparency = EffectiveContentTransparency, } else return Text { Text = ContentString, - TextColor3 = ContentColor, - TextSize = Props.ContentSize, - TextTransparency = ContentTransparency, + TextColor3 = EffectiveContentColor, + TextSize = ContentSize, + TextTransparency = EffectiveContentTransparency, TextWrapped = false, } end end, Fusion.cleanup), }, - } + })) end - -return Button diff --git a/src/Components/Button.story.lua b/src/Components/Button.story.lua index e5295c0..762e335 100644 --- a/src/Components/Button.story.lua +++ b/src/Components/Button.story.lua @@ -1,8 +1,7 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local Themer = require(OnyxUI.Utils.Themer) -local New = Fusion.New local Children = Fusion.Children local Computed = Fusion.Computed @@ -12,24 +11,17 @@ local Frame = require(script.Parent.Frame) return { clipsDescendants = false, story = function(Parent: GuiObject, _Props: { [any]: any }) - local PreviewPadding = Computed(function() - return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()) - end) - local Instance = Frame { Parent = Parent, + ListEnabled = true, + ListPadding = Computed(function() + return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) + end), + Padding = Computed(function() + return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()) + end), [Children] = { - New "UIPadding" { - PaddingBottom = PreviewPadding, - PaddingLeft = PreviewPadding, - PaddingRight = PreviewPadding, - PaddingTop = PreviewPadding, - }, - New "UIListLayout" { - Padding = UDim.new(0, Themer.Theme.Spacing["0.75"]:get()), - FillDirection = Enum.FillDirection.Vertical, - }, Button { Contents = { "Button" }, }, diff --git a/src/Components/CanvasGroup.lua b/src/Components/CanvasGroup.lua index 6f53bf4..e0d14e9 100644 --- a/src/Components/CanvasGroup.lua +++ b/src/Components/CanvasGroup.lua @@ -1,39 +1,21 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local CombineProps = require(OnyxUI.Utils.CombineProps) +local PubTypes = require(OnyxUI.Utils.PubTypes) -local EnsureValue = require(OnyxUI.Utils.EnsureValue) +local Base = require(script.Parent.Base) -local New = Fusion.New -local Children = Fusion.Children - -local function Frame(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "Frame") - Props.BackgroundTransparency = EnsureValue(Props.BackgroundTransparency, "number", 1) - Props.AutomaticSize = EnsureValue(Props.AutomaticSize, "EnumItem", Enum.AutomaticSize.XY) - - return New "CanvasGroup" { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - Interactable = Props.Interactable, - BackgroundColor3 = Props.BackgroundColor3, - BackgroundTransparency = Props.BackgroundTransparency, +export type Props = Base.Props & { + GroupTransparency: PubTypes.CanBeState?, + GroupColor3: PubTypes.CanBeState?, +} +return function(Props: Props) + return Base(CombineProps(Props, { + ClassName = "CanvasGroup", + Name = "CanvasGroup", + BackgroundTransparency = 1, + AutomaticSize = Enum.AutomaticSize.XY, GroupTransparency = Props.GroupTransparency, GroupColor3 = Props.GroupColor3, - - [Children] = Props[Children], - } + })) end - -return Frame diff --git a/src/Components/Card.lua b/src/Components/Card.lua index 2770f6e..4652dd3 100644 --- a/src/Components/Card.lua +++ b/src/Components/Card.lua @@ -1,50 +1,24 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local Themer = require(OnyxUI.Utils.Themer) -local EnsureValue = require(OnyxUI.Utils.EnsureValue) -local Modifier = require(OnyxUI.Utils.Modifier) +local CombineProps = require(OnyxUI.Utils.CombineProps) -local Children = Fusion.Children local Computed = Fusion.Computed -local Frame = require(OnyxUI.Components.Frame) - -return function(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "Card") - Props.BackgroundColor3 = EnsureValue(Props.BackgroundColor3, "Color3", Themer.Theme.Colors.Neutral.Dark) - Props.BackgroundTransparency = EnsureValue(Props.BackgroundTransparency, "number", 0) - - Props.CornerRadius = EnsureValue(Props.CornerRadius, "number", Themer.Theme.CornerRadius["1"]) - Props.Padding = EnsureValue(Props.Padding, "UIPadding", Modifier.Padding {}) - - return Frame { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - Interactable = Props.Interactable, - - BackgroundColor3 = Props.BackgroundColor3, - BackgroundTransparency = Props.BackgroundTransparency, - - [Children] = { - Modifier.Corner { - CornerRadius = Computed(function() - return UDim.new(0, Props.CornerRadius:get()) - end), - }, - Props.Padding, - - Props[Children], - }, - } +local Frame = require(script.Parent.Frame) + +export type Props = Frame.Props & {} + +return function(Props: Props) + return Frame(CombineProps(Props, { + Name = "Card", + BackgroundColor3 = Themer.Theme.Colors.Neutral.Dark, + BackgroundTransparency = 0, + CornerRadius = Computed(function() + return UDim.new(0, Themer.Theme.CornerRadius["1"]:get()) + end), + Padding = Computed(function() + return UDim.new(0, Themer.Theme.Spacing["1"]:get()) + end), + })) end diff --git a/src/Components/Card.story.lua b/src/Components/Card.story.lua index 5ed52af..72d547b 100644 --- a/src/Components/Card.story.lua +++ b/src/Components/Card.story.lua @@ -1,5 +1,5 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local Themer = require(OnyxUI.Utils.Themer) local New = Fusion.New @@ -54,6 +54,14 @@ return { }, }, }, + Card { + Size = UDim2.new(UDim.new(1, 0), UDim.new(0, 75)), + AutomaticSize = Enum.AutomaticSize.None, + PaddingLeft = UDim.new(0, 50), + CornerRadius = Computed(function() + return UDim.new(0, Themer.Theme.CornerRadius.Full:get()) + end), + }, }, } diff --git a/src/Components/Checkbox.lua b/src/Components/Checkbox.lua index 02b3564..40e5560 100644 --- a/src/Components/Checkbox.lua +++ b/src/Components/Checkbox.lua @@ -1,64 +1,58 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local EnsureValue = require(OnyxUI.Utils.EnsureValue) local Themer = require(OnyxUI.Utils.Themer) -local ColorUtils = require(OnyxUI.Packages.ColorUtils) -local Modifier = require(OnyxUI.Utils.Modifier) +local ColorUtils = require(OnyxUI.Parent.ColorUtils) +local PubTypes = require(OnyxUI.Utils.PubTypes) local Children = Fusion.Children local Computed = Fusion.Computed local Spring = Fusion.Spring +local Value = Fusion.Value -local BaseButton = require(OnyxUI.Components.BaseButton) -local Icon = require(OnyxUI.Components.Icon) +local BaseButton = require(script.Parent.BaseButton) +local Icon = require(script.Parent.Icon) + +export type Props = BaseButton.Props & { + Checked: PubTypes.CanBeState?, + Icon: PubTypes.CanBeState?, + Color: PubTypes.CanBeState?, +} local DISABLED_BACKGROUND_TRANSPARENCY = 0.925 local DISABLED_CONTENT_TRANSPARENCY = 0.75 -return function(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "Checkbox") - - Props.Checked = EnsureValue(Props.Checked, "boolean", false) - Props.Disabled = EnsureValue(Props.Disabled, "boolean", false) - Props.Color = EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.Primary.Main) - Props.ContrastColor = EnsureValue( - Props.ContrastColor, - "Color3", - Computed(function() - return ColorUtils.Emphasize(Props.Color:get(), 1) - end) - ) - Props.Icon = EnsureValue(Props.Icon, "string", "rbxassetid://16743325652") - - return BaseButton { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - Interactable = Props.Interactable, +return function(Props: Props) + local Checked = EnsureValue(Props.Checked, "boolean", false) + local Disabled = EnsureValue(Props.Disabled, "boolean", false) + local Color = EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.Primary.Main) + local IconId = EnsureValue(Props.Icon, "string", "rbxassetid://13858821963") - BackgroundColor3 = Computed(function() - if Props.Disabled:get() then - return Themer.Theme.Colors.BaseContent.Main:get() + local IsHovering = Value(false) + local IsHolding = Value(false) + local EffectiveColor = Computed(function() + if Disabled:get() then + return Themer.Theme.Colors.BaseContent.Main:get() + else + if IsHolding:get() then + return ColorUtils.Emphasize(Color:get(), Themer.Theme.Emphasis.Regular:get()) + elseif IsHovering:get() then + return ColorUtils.Emphasize(Color:get(), Themer.Theme.Emphasis.Light:get()) else - return Props.Color:get() + return Color:get() end - end), + end + end) + + return BaseButton { + Name = "Checkbox", + BackgroundColor3 = EffectiveColor, BackgroundTransparency = Spring( Computed(function() - if Props.Disabled:get() then + if Disabled:get() then return DISABLED_BACKGROUND_TRANSPARENCY else - if Props.Checked:get() then + if Checked:get() then return 0 else return 1 @@ -68,42 +62,35 @@ return function(Props: { [any]: any }) Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening ), + Disabled = Disabled, + CornerRadius = Computed(function() + return UDim.new(0, Themer.Theme.CornerRadius["0.5"]:get()) + end), + StrokeEnabled = true, + StrokeColor = EffectiveColor, + StrokeTransparency = Computed(function() + if Disabled:get() then + return DISABLED_BACKGROUND_TRANSPARENCY + else + return 0 + end + end), + + IsHovering = IsHovering, + IsHolding = IsHolding, - Disabled = Props.Disabled, OnActivated = function() - Props.Checked:set(not Props.Checked:get()) + Checked:set(not Checked:get()) end, [Children] = { - Modifier.Corner { - CornerRadius = Computed(function() - return UDim.new(0, Themer.Theme.CornerRadius["0.5"]:get()) - end), - }, - Modifier.Stroke { - Color = Computed(function() - if Props.Disabled:get() then - return Themer.Theme.Colors.BaseContent.Main:get() - else - return Props.Color:get() - end - end), - Transparency = Computed(function() - if Props.Disabled:get() then - return DISABLED_BACKGROUND_TRANSPARENCY - else - return 0 - end - end), - }, - Icon { Name = "CheckIcon", - Image = Props.Icon, + Image = IconId, ImageTransparency = Spring( Computed(function() - if Props.Checked:get() then - if Props.Disabled:get() then + if Checked:get() then + if Disabled:get() then return DISABLED_CONTENT_TRANSPARENCY else return 0 @@ -115,10 +102,12 @@ return function(Props: { [any]: any }) Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening ), - ImageColor3 = Props.ContrastColor, + ImageColor3 = Computed(function() + return ColorUtils.Emphasize(Color:get(), Themer.Theme.Emphasis.Contrast:get()) + end), Rotation = Spring( Computed(function() - return (Props.Checked:get() and 0) or -30 + return (Checked:get() and 0) or -30 end), Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening diff --git a/src/Components/Checkbox.story.lua b/src/Components/Checkbox.story.lua index 9ecb001..87567e1 100644 --- a/src/Components/Checkbox.story.lua +++ b/src/Components/Checkbox.story.lua @@ -1,9 +1,8 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local Themer = require(OnyxUI.Utils.Themer) local Colors = require(OnyxUI.Utils.Colors) -local New = Fusion.New local Children = Fusion.Children local Computed = Fusion.Computed @@ -12,27 +11,15 @@ local Checkbox = require(OnyxUI.Components.Checkbox) return { story = function(Parent: GuiObject, _Props: { [any]: any }) - local PreviewPadding = Computed(function() - return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()) - end) - local Instance = Frame { Parent = Parent, + Padding = Computed(function() + return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()) + end), + ListEnabled = true, + ListFillDirection = Enum.FillDirection.Horizontal, [Children] = { - New "UIPadding" { - PaddingBottom = PreviewPadding, - PaddingLeft = PreviewPadding, - PaddingRight = PreviewPadding, - PaddingTop = PreviewPadding, - }, - New "UIListLayout" { - SortOrder = Enum.SortOrder.LayoutOrder, - FillDirection = Enum.FillDirection.Horizontal, - Padding = Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) - end), - }, Checkbox {}, Checkbox { Checked = true, diff --git a/src/Components/Divider.lua b/src/Components/Divider.lua index c9e74af..469bc6c 100644 --- a/src/Components/Divider.lua +++ b/src/Components/Divider.lua @@ -1,90 +1,86 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local EnsureValue = require(OnyxUI.Utils.EnsureValue) local Themer = require(OnyxUI.Utils.Themer) -local Modifier = require(OnyxUI.Utils.Modifier) +local CombineProps = require(OnyxUI.Utils.CombineProps) +local PubTypes = require(OnyxUI.Utils.PubTypes) local Children = Fusion.Children local Computed = Fusion.Computed -local Frame = require(OnyxUI.Components.Frame) +local Frame = require(script.Parent.Frame) -return function(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "Divider") +type Props = Frame.Props & { + Length: PubTypes.CanBeState?, + FillDirection: PubTypes.CanBeState?, + Color: PubTypes.CanBeState?, + Transparency: PubTypes.CanBeState?, + Spacing: PubTypes.CanBeState?, +} - Props.Length = EnsureValue(Props.Length, "UDim", UDim.new(1, 0)) - Props.FillDirection = EnsureValue(Props.FillDirection, "EnumItem", Enum.FillDirection.Horizontal) - Props.Color = EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.BaseContent.Main) - Props.Transparency = EnsureValue(Props.Transparency, "number", 0.9) - Props.Spacing = EnsureValue(Props.Spacing, "number", Themer.Theme.Spacing["0.5"]) +return function(Props: Props) + local Length = EnsureValue(Props.Length, "UDim", UDim.new(1, 0)) + local FillDirection = EnsureValue(Props.FillDirection, "EnumItem", Enum.FillDirection.Horizontal) + local Color = EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.BaseContent.Main) + local Transparency = EnsureValue(Props.Transparency, "number", 0.9) + local Spacing = EnsureValue( + Props.Spacing, + "number", + Computed(function() + return UDim.new(0, Themer.Theme.Spacing["1"]:get()) + end) + ) local VerticalPadding = Computed(function() - if Props.FillDirection:get() == Enum.FillDirection.Horizontal then - return UDim.new(0, Props.Spacing:get()) + if FillDirection:get() == Enum.FillDirection.Horizontal then + return Spacing:get() else return UDim.new() end end) local HorizontalPadding = Computed(function() - if Props.FillDirection:get() == Enum.FillDirection.Vertical then - return UDim.new(0, Props.Spacing:get()) + if FillDirection:get() == Enum.FillDirection.Vertical then + return Spacing:get() else return UDim.new() end end) - return Frame { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - Interactable = Props.Interactable, - BackgroundColor3 = Props.BackgroundColor3, - BackgroundTransparency = Props.BackgroundTransparency, - + return Frame(CombineProps(Props, { + Name = "Divider", Size = Computed(function() - if Props.FillDirection:get() == Enum.FillDirection.Horizontal then - return UDim2.new(Props.Length:get(), UDim.new(0, 0)) + if FillDirection:get() == Enum.FillDirection.Horizontal then + return UDim2.new(Length:get(), UDim.new(0, 0)) else - return UDim2.new(UDim.new(0, 0), Props.Length:get()) + return UDim2.new(UDim.new(0, 0), Length:get()) end end), AutomaticSize = Computed(function() - if Props.FillDirection:get() == Enum.FillDirection.Horizontal then + if FillDirection:get() == Enum.FillDirection.Horizontal then return Enum.AutomaticSize.Y else return Enum.AutomaticSize.X end end), + PaddingTop = VerticalPadding, + PaddingBottom = VerticalPadding, + PaddingLeft = HorizontalPadding, + PaddingRight = HorizontalPadding, [Children] = { - Modifier.Padding { - PaddingTop = VerticalPadding, - PaddingBottom = VerticalPadding, - PaddingLeft = HorizontalPadding, - PaddingRight = HorizontalPadding, - }, - Frame { Name = "DividingLine", Size = Computed(function() - if Props.FillDirection:get() == Enum.FillDirection.Horizontal then + if FillDirection:get() == Enum.FillDirection.Horizontal then return UDim2.new(UDim.new(1, 0), UDim.new(0, Themer.Theme.StrokeThickness["1"]:get())) else return UDim2.new(UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()), UDim.new(1, 0)) end end), AutomaticSize = Enum.AutomaticSize.None, - BackgroundColor3 = Props.Color, - BackgroundTransparency = Props.Transparency, + BackgroundColor3 = Color, + BackgroundTransparency = Transparency, }, }, - } + })) end diff --git a/src/Components/Divider.story.lua b/src/Components/Divider.story.lua index cb41ff9..247f327 100644 --- a/src/Components/Divider.story.lua +++ b/src/Components/Divider.story.lua @@ -1,5 +1,5 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local New = Fusion.New local Children = Fusion.Children diff --git a/src/Components/Frame.lua b/src/Components/Frame.lua index 0b29c61..bd068a9 100644 --- a/src/Components/Frame.lua +++ b/src/Components/Frame.lua @@ -1,36 +1,15 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local CombineProps = require(OnyxUI.Utils.CombineProps) -local EnsureValue = require(OnyxUI.Utils.EnsureValue) +local Base = require(script.Parent.Base) -local New = Fusion.New -local Children = Fusion.Children +export type Props = Base.Props & {} -local function Frame(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "Frame") - Props.BackgroundTransparency = EnsureValue(Props.BackgroundTransparency, "number", 1) - Props.AutomaticSize = EnsureValue(Props.AutomaticSize, "EnumItem", Enum.AutomaticSize.XY) - - return New "Frame" { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - Interactable = Props.Interactable, - BackgroundColor3 = Props.BackgroundColor3, - BackgroundTransparency = Props.BackgroundTransparency, - - [Children] = Props[Children], - } +return function(Props: Props) + return Base(CombineProps(Props, { + ClassName = "Frame", + Name = "Frame", + BackgroundTransparency = 1, + AutomaticSize = Enum.AutomaticSize.XY, + })) end - -return Frame diff --git a/src/Components/Icon.lua b/src/Components/Icon.lua index 0ddad9e..02c65aa 100644 --- a/src/Components/Icon.lua +++ b/src/Components/Icon.lua @@ -1,47 +1,20 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) -local EnsureValue = require(OnyxUI.Utils.EnsureValue) -local Colors = require(OnyxUI.Utils.Colors) +local OnyxUI = script.Parent.Parent +local CombineProps = require(script.Parent.Parent.Utils.CombineProps) +local Fusion = require(OnyxUI.Parent.Fusion) -local Children = Fusion.Children +local Computed = Fusion.Computed -local Image = require(OnyxUI.Components.Image) +local Image = require(script.Parent.Image) +local Themer = require(script.Parent.Parent.Utils.Themer) -local function Text(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "Icon") - Props.Size = EnsureValue(Props.Size, "number", UDim2.fromOffset(20, 20)) - Props.ImageColor3 = EnsureValue(Props.ImageColor3, "Color3", Colors.White) - Props.BackgroundTransparency = EnsureValue(Props.BackgroundTransparency, "number", 1) +export type Props = Image.Props & {} - return Image { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - BackgroundColor3 = Props.BackgroundColor3, - BackgroundTransparency = Props.BackgroundTransparency, - - Image = Props.Image, - ImageColor3 = Props.ImageColor3, - ImageTransparency = Props.ImageTransparency, - ImageRectSize = Props.ImageRectSize, - ResampleMode = Props.ResampleMode, - ScaleType = Props.ScaleType, - SliceCenter = Props.SliceCenter, - SliceScale = Props.SliceScale, - TileSize = Props.TileSize, - - [Children] = Props[Children], - } +return function(Props: Props) + return Image(CombineProps(Props, { + Name = "Icon", + Size = Computed(function() + return UDim2.fromOffset(Themer.Theme.TextSize["1"]:get(), Themer.Theme.TextSize["1"]:get()) + end), + BackgroundTransparency = 1, + })) end - -return Text diff --git a/src/Components/IconButton.lua b/src/Components/IconButton.lua index 8505b2c..b036f9e 100644 --- a/src/Components/IconButton.lua +++ b/src/Components/IconButton.lua @@ -1,67 +1,38 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) - +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local EnsureValue = require(OnyxUI.Utils.EnsureValue) local Themer = require(OnyxUI.Utils.Themer) -local Modifier = require(OnyxUI.Utils.Modifier) +local CombineProps = require(OnyxUI.Utils.CombineProps) +local PubTypes = require(OnyxUI.Utils.PubTypes) -local Children = Fusion.Children local Computed = Fusion.Computed -local Button = require(OnyxUI.Components.Button) - -local function IconButton(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "IconButton") - - Props.Image = EnsureValue(Props.Image, "string", "") - Props.Padding = EnsureValue( - Props.Padding, - "UIPadding", - Modifier.Padding { - Padding = Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.25"]:get()) - end), - } - ) - - return Button { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - Interactable = Props.Interactable, - +local Button = require(script.Parent.Button) + +export type Props = Button.Props & { + Image: PubTypes.CanBeState?, + Disabled: PubTypes.CanBeState?, + Style: PubTypes.CanBeState?, + Color: PubTypes.CanBeState?, + ContentColor: PubTypes.CanBeState?, + ContentSize: PubTypes.CanBeState?, + IsHolding: PubTypes.CanBeState?, +} + +return function(Props: Props) + local Image = EnsureValue(Props.Image, "string", "") + local Padding = Computed(function() + return UDim.new(0, Themer.Theme.Spacing["0.25"]:get()) + end) + + return Button(CombineProps(Props, { + Name = "IconButton", + PaddingLeft = Padding, + PaddingRight = Padding, + PaddingTop = Padding, + PaddingBottom = Padding, Contents = Computed(function() - return { Props.Image:get() } + return { Image:get() } end), - Padding = Props.Padding, - - Disabled = Props.Disabled, - Style = Props.Style, - Color = Props.Color, - ContrastColor = Props.ContrastColor, - ContentSize = Props.ContentSize, - IsHovering = Props.IsHovering, - IsHolding = Props.IsHolding, - OnActivated = Props.OnActivated, - OnMouseEnter = Props.OnMouseEnter, - OnMouseLeave = Props.OnMouseLeave, - OnMouseButton1Down = Props.OnMouseButton1Down, - OnMouseButton1Up = Props.OnMouseButton1Up, - HoverSound = Props.HoverSound, - ClickSound = Props.ClickSound, - - [Children] = Props[Children], - } + })) end - -return IconButton diff --git a/src/Components/IconButton.story.lua b/src/Components/IconButton.story.lua index 4adceb2..4a4d720 100644 --- a/src/Components/IconButton.story.lua +++ b/src/Components/IconButton.story.lua @@ -1,9 +1,8 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local Themer = require(OnyxUI.Utils.Themer) local Colors = require(OnyxUI.Utils.Colors) -local New = Fusion.New local Children = Fusion.Children local Computed = Fusion.Computed @@ -12,25 +11,18 @@ local Frame = require(script.Parent.Frame) return { story = function(Parent: GuiObject, _Props: { [any]: any }) - local PreviewPadding = Computed(function() - return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()) - end) - local Instance = Frame { Parent = Parent, + Padding = Computed(function() + return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()) + end), + ListEnabled = true, + ListFillDirection = Enum.FillDirection.Horizontal, + ListPadding = Computed(function() + return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) + end), [Children] = { - New "UIPadding" { - PaddingBottom = PreviewPadding, - PaddingLeft = PreviewPadding, - PaddingRight = PreviewPadding, - PaddingTop = PreviewPadding, - }, - New "UIListLayout" { - Padding = UDim.new(0, Themer.Theme.Spacing["0.5"]:get()), - FillDirection = Enum.FillDirection.Horizontal, - SortOrder = Enum.SortOrder.LayoutOrder, - }, IconButton { Image = "rbxassetid://10814531047", }, @@ -57,6 +49,11 @@ return { Style = "Ghost", Disabled = true, }, + IconButton { + Image = "rbxassetid://10814531047", + PaddingLeft = UDim.new(0, 30), + CornerRadius = UDim.new(0, 0), + }, }, } diff --git a/src/Components/Image.lua b/src/Components/Image.lua index 603dc29..495cefc 100644 --- a/src/Components/Image.lua +++ b/src/Components/Image.lua @@ -1,54 +1,53 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +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(script.Parent.Parent.Utils.CombineProps) -local New = Fusion.New -local Children = Fusion.Children local Computed = Fusion.Computed +local Hydrate = Fusion.Hydrate -return function(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "Image") - Props.Size = EnsureValue(Props.Size, "UDim2", UDim2.fromOffset(100, 100)) - Props.AutomaticSize = EnsureValue(Props.AutomaticSize, "EnumItem", Enum.AutomaticSize.None) - Props.FallbackImage = EnsureValue(Props.FallbackImage, "string", "rbxasset://textures/ui/GuiImagePlaceholder.png") - Props.Image = EnsureValue(Props.Image, "string", nil) +local Base = require(script.Parent.Base) - local Image = Computed(function() - if Props.Image:get() then - return Props.Image:get() +export type Props = Base.Props & { + Image: PubTypes.CanBeState?, + FallbackImage: PubTypes.CanBeState?, + ImageColor3: PubTypes.CanBeState?, + ImageTransparency: PubTypes.CanBeState?, + ImageRectSize: PubTypes.CanBeState?, + ResampleMode: PubTypes.CanBeState?, + ScaleType: PubTypes.CanBeState?, + SliceCenter: PubTypes.CanBeState?, + SliceScale: PubTypes.CanBeState?, + TileSize: PubTypes.CanBeState?, +} + +return function(Props: Props) + local FallbackImage = EnsureValue(Props.FallbackImage, "string", "rbxasset://textures/ui/GuiImagePlaceholder.png") + local Image = EnsureValue(Props.Image, "string", nil) + + local ImageInUse = Computed(function() + if Image:get() then + return Image:get() else - return Props.FallbackImage:get() + return FallbackImage:get() end end) - return New "ImageLabel" { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - BackgroundColor3 = Props.BackgroundColor3, - BackgroundTransparency = Props.BackgroundTransparency, - + return Hydrate(Base(CombineProps(Props, { + ClassName = "ImageLabel", + Name = "Image", + Size = UDim2.fromOffset(100, 100), + AutomaticSize = Enum.AutomaticSize.None, + }))) { + Image = ImageInUse, ImageColor3 = Props.ImageColor3, ImageTransparency = Props.ImageTransparency, ImageRectSize = Props.ImageRectSize, ResampleMode = Props.ResampleMode, - ScaleType = Props.ScaleType, + ScaleType = Props.Scale, SliceCenter = Props.SliceCenter, SliceScale = Props.SliceScale, TileSize = Props.TileSize, - - Image = Image, - - [Children] = Props[Children], } end diff --git a/src/Components/Image.story.lua b/src/Components/Image.story.lua index 2436d5d..fea769c 100644 --- a/src/Components/Image.story.lua +++ b/src/Components/Image.story.lua @@ -1,5 +1,5 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local Themer = require(OnyxUI.Utils.Themer) local New = Fusion.New diff --git a/src/Components/MenuFrame.lua b/src/Components/MenuFrame.lua index 4364358..401c31f 100644 --- a/src/Components/MenuFrame.lua +++ b/src/Components/MenuFrame.lua @@ -1,82 +1,33 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local Themer = require(OnyxUI.Utils.Themer) -local EnsureValue = require(OnyxUI.Utils.EnsureValue) -local Modifier = require(OnyxUI.Utils.Modifier) +local CombineProps = require(OnyxUI.Utils.CombineProps) -local New = Fusion.New -local Children = Fusion.Children local Computed = Fusion.Computed +local Value = Fusion.Value +local Out = Fusion.Out -local Frame = require(OnyxUI.Components.Frame) +local CanvasGroup = require(script.Parent.CanvasGroup) -local function MenuFrame(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "MenuFrame") - Props.AutomaticSize = EnsureValue(Props.AutomaticSize, "EnumItem", Enum.AutomaticSize.Y) - Props.BackgroundTransparency = EnsureValue(Props.BackgroundTransparency, "number", 0.015) - Props.BackgroundColor3 = EnsureValue(Props.BackgroundColor3, "Color3", Themer.Theme.Colors.Base.Main) +type Props = CanvasGroup.Props & {} - Props.StrokeColor = EnsureValue(Props.StrokeColor, "Color3", Themer.Theme.Colors.Neutral.Main) - Props.Padding = EnsureValue( - Props.Padding, - "UIPadding", - Computed(function() - return Modifier.Padding { - Padding = UDim.new(0, Themer.Theme.Spacing["1"]:get()), - } - end, Fusion.cleanup) - ) - - return New "CanvasGroup" { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - Interactable = Props.Interactable, +return function(Props: Props) + local AutomaticSize = Value(Enum.AutomaticSize.None) + return CanvasGroup(CombineProps(Props, { + Name = "MenuFrame", GroupTransparency = Props.GroupTransparency, - BackgroundColor3 = Props.BackgroundColor3, - BackgroundTransparency = Props.BackgroundTransparency, - - [Children] = { - Props.Padding, - Modifier.Corner { - CornerRadius = Computed(function() - return UDim.new(0, Themer.Theme.CornerRadius["3"]:get()) - end), - }, - Modifier.Stroke { - Color = Props.StrokeColor, - }, - - Frame { - Name = "Contents", - AutomaticSize = Props.AutomaticSize, - Size = Computed(function() - local AutomaticSizeScales = { - [Enum.AutomaticSize.None] = UDim2.fromScale(1, 1), - [Enum.AutomaticSize.XY] = UDim2.fromScale(0, 0), - [Enum.AutomaticSize.X] = UDim2.fromScale(0, 1), - [Enum.AutomaticSize.Y] = UDim2.fromScale(1, 0), - } - return AutomaticSizeScales[Props.AutomaticSize:get()] - end), - - [Children] = Props[Children], - }, - - Props.TopChildren, - }, - } + BackgroundColor3 = Themer.Theme.Colors.Base.Main, + BackgroundTransparency = 0, + Padding = Computed(function() + return UDim.new(0, Themer.Theme.Spacing["1"]:get()) + end), + CornerRadius = Computed(function() + return UDim.new(0, Themer.Theme.CornerRadius["3"]:get()) + end), + StrokeEnabled = true, + StrokeColor = Themer.Theme.Colors.Neutral.Main, + + [Out "AutomaticSize"] = AutomaticSize, + })) end - -return MenuFrame diff --git a/src/Components/MenuFrame.story.lua b/src/Components/MenuFrame.story.lua index 05d70fa..827b748 100644 --- a/src/Components/MenuFrame.story.lua +++ b/src/Components/MenuFrame.story.lua @@ -1,35 +1,35 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local Themer = require(OnyxUI.Utils.Themer) -local New = Fusion.New local Children = Fusion.Children local Computed = Fusion.Computed -local MenuFrame = require(OnyxUI.Components.MenuFrame) -local Frame = require(OnyxUI.Components.Frame) +local MenuFrame = require(script.Parent.MenuFrame) +local Frame = require(script.Parent.Frame) +local Text = require(script.Parent.Text) return { - story = function(Parent: GuiObject, _Props: { [any]: any }) - local PreviewPadding = Computed(function() - return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()) - end) - + story = function(Parent: GuiObject, _Props) local Instance = Frame { Parent = Parent, + Padding = Computed(function() + return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()) + end), + ListEnabled = true, + ListFillDirection = Enum.FillDirection.Horizontal, [Children] = { - New "UIPadding" { - PaddingBottom = PreviewPadding, - PaddingLeft = PreviewPadding, - PaddingRight = PreviewPadding, - PaddingTop = PreviewPadding, - }, MenuFrame { Parent = Parent, Size = UDim2.fromOffset(300, 400), AutomaticSize = Enum.AutomaticSize.None, }, + MenuFrame { + Parent = Parent, + + [Children] = { Text { Text = "Hiiii" } }, + }, }, } diff --git a/src/Components/NumberSpinner.story.lua b/src/Components/NumberSpinner.story.lua index 6ca32a6..e6bd211 100644 --- a/src/Components/NumberSpinner.story.lua +++ b/src/Components/NumberSpinner.story.lua @@ -1,5 +1,5 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local New = Fusion.New local Children = Fusion.Children @@ -52,6 +52,7 @@ return { Decimals = 2, Commas = true, Prefix = "$", + Font = Enum.Font.FredokaOne, }, }, } diff --git a/src/Components/NumberSpinner/init.lua b/src/Components/NumberSpinner/init.lua index c85676e..e811696 100644 --- a/src/Components/NumberSpinner/init.lua +++ b/src/Components/NumberSpinner/init.lua @@ -1,83 +1,59 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local NumberSpinner = require(script.NumberSpinner) local EnsureValue = require(OnyxUI.Utils.EnsureValue) local Themer = require(OnyxUI.Utils.Themer) +local PubTypes = require(OnyxUI.Utils.PubTypes) +local CombineProps = require(OnyxUI.Utils.CombineProps) local Cleanup = Fusion.Cleanup local Observer = Fusion.Observer local Computed = Fusion.Computed -local Text = require(OnyxUI.Components.Text) +local Text = require(script.Parent.Text) + +export type Props = Text.Props & { + Value: PubTypes.CanBeState?, + Prefix: PubTypes.CanBeState?, + Suffix: PubTypes.CanBeState?, + Decimals: PubTypes.CanBeState?, + Duration: PubTypes.CanBeState?, + Commas: PubTypes.CanBeState?, +} + +return function(Props: Props) + local TextSize = EnsureValue(Props.TextSize, "number", Themer.Theme.TextSize["1"]) + + local Value = EnsureValue(Props.Value, "number", 0) + local Prefix = EnsureValue(Props.Prefix, "string", "") + local Suffix = EnsureValue(Props.Suffix, "string", "") + local Decimals = EnsureValue(Props.Decimals, "number", 0) + local Duration = EnsureValue(Props.Duration, "number", 0.3) + local Commas = EnsureValue(Props.Commas, "boolean", false) + + local Observers = {} + + local Spinner = NumberSpinner.fromGuiObject(Text(CombineProps(Props, { + Name = "NumberSpinner", + AutomaticSize = Enum.AutomaticSize.None, + TextSize = TextSize, + Font = Enum.Font.GothamBold, + Size = Computed(function() + return UDim2.new(UDim.new(1, 0), UDim.new(0, TextSize:get())) + end), + + [Cleanup] = Observers, + }))) + + local SpinnerProps = + { Value = Value, Prefix = Prefix, Suffix = Suffix, Decimals = Decimals, Duration = Duration, Comas = Commas } + for PropName, Prop in pairs(SpinnerProps) do + Spinner[PropName] = Prop:get() -local SPINNER_PROPS = { "Value", "Prefix", "Suffix", "Decimals", "Duration", "Commas" } - -return function(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "NumberSpinner") - Props.AutomaticSize = EnsureValue(Props.AutomaticSize, "EnumItem", Enum.AutomaticSize.None) - Props.TextSize = EnsureValue(Props.TextSize, "number", Themer.Theme.TextSize["1"]) - Props.Size = EnsureValue( - Props.Size, - "UDim2", - Computed(function() - return UDim2.new(UDim.new(1, 0), UDim.new(0, Props.TextSize:get())) - end) - ) - Props.Font = EnsureValue(Props.Font, "EnumItem", Enum.Font.GothamBold) - - Props.Value = EnsureValue(Props.Value, "number", 0) - Props.Prefix = EnsureValue(Props.Prefix, "string", "") - Props.Suffix = EnsureValue(Props.Suffix, "string", "") - Props.Decimals = EnsureValue(Props.Decimals, "number", 0) - Props.Duration = EnsureValue(Props.Duration, "number", 0.3) - Props.Commas = EnsureValue(Props.Commas, "boolean", false) - - local PropObservers = {} - - local Spinner = NumberSpinner.fromGuiObject(Text { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - Interactable = Props.Interactable, - BackgroundColor3 = Props.BackgroundColor3, - BackgroundTransparency = Props.BackgroundTransparency, - - RichText = Props.RichText, - TextSize = Props.TextSize, - TextColor3 = Props.TextColor3, - FontFace = Props.FontFace, - Font = Props.Font, - TextScaled = Props.TextScaled, - Text = Props.Text, - TextWrapped = Props.TextWrapped, - TextXAlignment = Props.TextXAlignment, - TextYAlignment = Props.TextYAlignment, - TextTruncate = Props.TextTruncate, - AutoLocalize = Props.AutoLocalize, - LineHeight = Props.LineHeight, - LocalizedText = Props.LocalizedText, - MaxVisibleGraphemes = Props.MaxVisibleGraphemes, - TextTransparency = Props.TextTransparency, - - [Cleanup] = PropObservers, - }) - - for _, PROP_NAME in ipairs(SPINNER_PROPS) do - Spinner[PROP_NAME] = Props[PROP_NAME]:get() table.insert( - PropObservers, - Observer(Props[PROP_NAME]):onChange(function() - Spinner[PROP_NAME] = Props[PROP_NAME]:get() + Observers, + Observer(Prop):onChange(function() + Spinner[PropName] = Prop:get() end) ) end diff --git a/src/Components/ProgressBar.lua b/src/Components/ProgressBar.lua index bed76a1..b1a2e38 100644 --- a/src/Components/ProgressBar.lua +++ b/src/Components/ProgressBar.lua @@ -1,72 +1,92 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local EnsureValue = require(OnyxUI.Utils.EnsureValue) local Themer = require(OnyxUI.Utils.Themer) -local Modifier = require(OnyxUI.Utils.Modifier) +local PubTypes = require(OnyxUI.Utils.PubTypes) +local CombineProps = require(OnyxUI.Utils.CombineProps) local Children = Fusion.Children local Computed = Fusion.Computed local Spring = Fusion.Spring -local Frame = require(OnyxUI.Components.Frame) -local CanvasGroup = require(OnyxUI.Components.CanvasGroup) +local Frame = require(script.Parent.Frame) -return function(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "ProgressBar") - Props.Size = EnsureValue( - Props.Size, - "UDim2", +export type Props = Frame.Props & { + Progress: PubTypes.CanBeState?, + Color: PubTypes.CanBeState?, + Direction: PubTypes.CanBeState?, + Inverted: PubTypes.CanBeState?, +} + +return function(Props: Props) + local Progress = EnsureValue(Props.Progress, "number", 0) + local Color = EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.Primary.Main) + local Direction = EnsureValue(Props.Direction, "EnumItem", Enum.FillDirection.Horizontal) + local Inverted = EnsureValue(Props.Inverted, "boolean", false) + + local EffectiveCornerRadius = EnsureValue( + Props.CornerRadius, + "UDim", Computed(function() - return UDim2.fromOffset(250, Themer.Theme.TextSize["1"]:get()) + return UDim.new(0, Themer.Theme.CornerRadius["Full"]:get()) end) ) - Props.AutomaticSize = EnsureValue(Props.AutomaticSize, "EnumItem", Enum.AutomaticSize.None) - Props.BackgroundTransparency = EnsureValue(Props.BackgroundTransparency, "number", 0) - Props.BackgroundColor3 = EnsureValue(Props.BackgroundColor3, "Color3", Themer.Theme.Colors.Neutral.Dark) - Props.Progress = EnsureValue(Props.Progress, "number", 0) - Props.Color = EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.Primary.Main) - Props.SpringSpeed = EnsureValue(Props.SpringSpeed, "number", Themer.Theme.SpringSpeed["0.5"]) - Props.SpringDampening = EnsureValue(Props.SpringDampening, "number", Themer.Theme.SpringDampening) - - return CanvasGroup { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - Interactable = Props.Interactable, - BackgroundColor3 = Props.BackgroundColor3, - BackgroundTransparency = Props.BackgroundTransparency, + return Frame(CombineProps(Props, { + Name = "ProgressBar", + Size = Computed(function() + if Direction:get() == Enum.FillDirection.Horizontal then + return UDim2.fromOffset(250, Themer.Theme.TextSize["0.75"]:get()) + else + return UDim2.fromOffset(Themer.Theme.TextSize["0.75"]:get(), 250) + end + end), + AutomaticSize = Enum.AutomaticSize.None, + BackgroundTransparency = 0, + BackgroundColor3 = Themer.Theme.Colors.Neutral.Dark, + CornerRadius = EffectiveCornerRadius, [Children] = { - Modifier.Corner { - CornerRadius = Computed(function() - return UDim.new(0, Themer.Theme.CornerRadius["2"]:get()) - end), - }, - Frame { Name = "ProgressFill", Size = Spring( Computed(function() - return UDim2.fromScale(Props.Progress:get(), 1) + if Direction:get() == Enum.FillDirection.Horizontal then + return UDim2.fromScale(Progress:get(), 1) + else + return UDim2.fromScale(1, Progress:get()) + end end), - Props.SpringSpeed, - Props.SpringDampening + Themer.Theme.SpringSpeed["0.5"], + Themer.Theme.SpringDampening ), + AnchorPoint = Computed(function() + if Inverted:get() then + if Direction:get() == Enum.FillDirection.Horizontal then + return Vector2.new(1, 0) + else + return Vector2.new(0, 1) + end + else + return Vector2.new(0, 0) + end + end), + Position = Computed(function() + if Inverted:get() then + if Direction:get() == Enum.FillDirection.Horizontal then + return UDim2.fromScale(1, 0) + else + return UDim2.fromScale(0, 1) + end + else + return UDim2.fromScale(0, 0) + end + end), AutomaticSize = Enum.AutomaticSize.None, BackgroundTransparency = 0, - BackgroundColor3 = Props.Color, + BackgroundColor3 = Color, + CornerRadius = EffectiveCornerRadius, }, }, - } + })) end diff --git a/src/Components/ProgressBar.story.lua b/src/Components/ProgressBar.story.lua index e3795c4..fa3572a 100644 --- a/src/Components/ProgressBar.story.lua +++ b/src/Components/ProgressBar.story.lua @@ -1,15 +1,17 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) -local ColorUtils = require(OnyxUI.Packages.ColorUtils) +local ReplicatedStorage = game:GetService("ReplicatedStorage") +local OnyxUI = script.Parent.Parent +local Colors = require(ReplicatedStorage.OnyxUI.Packages.OnyxUI.Utils.Colors) +local Fusion = require(OnyxUI.Parent.Fusion) +local ColorUtils = require(OnyxUI.Parent.ColorUtils) local Themer = require(OnyxUI.Utils.Themer) -local New = Fusion.New local Children = Fusion.Children local Value = Fusion.Value local Computed = Fusion.Computed -local Frame = require(OnyxUI.Components.Frame) -local ProgressBar = require(OnyxUI.Components.ProgressBar) +local Frame = require(script.Parent.Frame) +local ProgressBar = require(script.Parent.ProgressBar) +local Text = require(script.Parent.Text) return { story = function(Parent: GuiObject, _Props: { [any]: any }) @@ -18,28 +20,51 @@ return { local Instance = Frame { Parent = Parent, + ListEnabled = true, [Children] = { - New "UIListLayout" { - Padding = Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.75"]:get()) - end), - }, ProgressBar { - Parent = Parent, Progress = 0.75, }, ProgressBar { - Parent = Parent, Progress = Progress, Color = Color, }, ProgressBar { - Parent = Parent, Progress = Progress, Color = Color, - SpringDampening = 0.5, - SpringSpeed = 30, + }, + Frame { + ListEnabled = true, + ListFillDirection = Enum.FillDirection.Horizontal, + ListVerticalAlignment = Enum.VerticalAlignment.Center, + + [Children] = { + Text { + Text = "Label", + }, + ProgressBar { + Progress = Progress, + Color = Colors.Emerald["500"], + Size = Computed(function() + return UDim2.fromOffset(150, Themer.Theme.TextSize["0.75"]:get()) + end), + }, + }, + }, + ProgressBar { + Progress = Progress, + Inverted = true, + }, + ProgressBar { + Direction = Enum.FillDirection.Vertical, + Progress = Progress, + Inverted = true, + }, + ProgressBar { + Progress = Progress, + Color = Color, + CornerRadius = UDim.new(0, 0), }, }, } diff --git a/src/Components/ScrollingFrame.lua b/src/Components/ScrollingFrame.lua index 8c009b2..99a7468 100644 --- a/src/Components/ScrollingFrame.lua +++ b/src/Components/ScrollingFrame.lua @@ -1,50 +1,37 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) - -local EnsureValue = require(OnyxUI.Utils.EnsureValue) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local Themer = require(OnyxUI.Utils.Themer) +local PubTypes = require(OnyxUI.Utils.PubTypes) +local CombineProps = require(OnyxUI.Utils.CombineProps) -local New = Fusion.New -local Children = Fusion.Children +local Hydrate = Fusion.Hydrate local Computed = Fusion.Computed -local function ScrollingFrame(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "ScrollingFrame") - Props.AutomaticSize = EnsureValue(Props.AutomaticSize, "Enum", Enum.AutomaticSize.None) - Props.ScrollingDirection = EnsureValue(Props.ScrollingDirection, "Enum", Enum.ScrollingDirection.Y) - Props.AutomaticCanvasSize = EnsureValue(Props.AutomaticCanvasSize, "Enum", Enum.AutomaticSize.Y) - Props.BackgroundTransparency = EnsureValue(Props.BackgroundTransparency, "number", 1) - Props.ScrollBarThickness = EnsureValue(Props.ScrollBarThickness, "number", 8) - Props.ScrollBarImageTransparency = EnsureValue(Props.ScrollBarImageTransparency, "number", 0) - Props.ScrollBarImageColor3 = - EnsureValue(Props.ScrollBarImageColor3, "Color3", Themer.Theme.Colors.NeutralContent.Dark) - Props.Selectable = EnsureValue(Props.Selectable, "boolean", false) - Props.MidImage = EnsureValue(Props.MidImage, "string", "rbxassetid://16547330984") +local Base = require(script.Parent.Base) - return New "ScrollingFrame" { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - BackgroundColor3 = Props.BackgroundColor3, - BackgroundTransparency = Props.BackgroundTransparency, +export type Props = Base.Props & { + AutomaticCanvasSize: PubTypes.CanBeState?, + BottomImage: PubTypes.CanBeState?, + CanvasPosition: PubTypes.CanBeState?, + CanvasSize: PubTypes.CanBeState?, + ElasticBehavior: PubTypes.CanBeState?, + HorizontalScrollBarInset: PubTypes.CanBeState?, + MidImage: PubTypes.CanBeState?, + ScrollBarImageColor3: PubTypes.CanBeState?, + ScrollBarImageTransparency: PubTypes.CanBeState?, + ScrollBarThickness: PubTypes.CanBeState?, + ScrollingDirection: PubTypes.CanBeState?, + ScrollingEnabled: PubTypes.CanBeState?, + TopImage: PubTypes.CanBeState?, + VerticalScrollBarInset: PubTypes.CanBeState?, + VerticalScrollBarPosition: PubTypes.CanBeState?, +} - ScrollingDirection = Props.ScrollingDirection, - AutomaticCanvasSize = Props.AutomaticCanvasSize, - CanvasSize = Props.CanvasSize, - ScrollBarThickness = Props.ScrollBarThickness, - ScrollBarImageTransparency = Props.ScrollBarImageTransparency, - ScrollBarImageColor3 = Props.ScrollBarImageColor3, - MidImage = Props.MidImage, +return function(Props: Props) + return Hydrate(Base(CombineProps(Props, { + ClassName = "ScrollingFrame", + Name = "ScrollingFrame", + }))) { BottomImage = Computed(function() if Themer.Theme.CornerRadius["1"]:get() >= 3 then return "rbxassetid://16547643439" @@ -59,9 +46,22 @@ local function ScrollingFrame(Props: { [any]: any }) return "rbxassetid://16547330984" end end), + MidImage = "rbxassetid://16547330984", + Selectable = false, + ScrollBarImageColor3 = Themer.Theme.Colors.NeutralContent.Dark, + ScrollBarImageTransparency = 0, + ScrollBarThickness = 8, + BackgroundTransparency = 1, + AutomaticCanvasSize = Enum.AutomaticSize.Y, + ScrollingDirection = Enum.ScrollingDirection.Y, + AutomaticSize = Enum.AutomaticSize.None, - [Children] = Props[Children], + CanvasPosition = Props.CanvasPosition, + CanvasSize = Props.CanvasSize, + ElasticBehavior = Props.ElasticBehavior, + HorizontalScrollBarInset = Props.HorizontalScrollBarInset, + ScrollingEnabled = Props.ScrollingEnabled, + VerticalScrollBarInset = Props.VerticalScrollBarInset, + VerticalScrollBarPosition = Props.VerticalScrollBarPosition, } end - -return ScrollingFrame diff --git a/src/Components/SettingToggle.lua b/src/Components/SettingToggle.lua index 3162144..2000816 100644 --- a/src/Components/SettingToggle.lua +++ b/src/Components/SettingToggle.lua @@ -1,7 +1,8 @@ -local OnyxUI = require(script.Parent.Parent) +local OnyxUI = script.Parent.Parent local Themer = require(script.Parent.Parent.Utils.Themer) -local Fusion = require(OnyxUI.Packages.Fusion) +local Fusion = require(OnyxUI.Parent.Fusion) local EnsureValue = require(OnyxUI.Utils.EnsureValue) +local PubTypes = require(OnyxUI.Utils.PubTypes) local Children = Fusion.Children local Computed = Fusion.Computed @@ -12,15 +13,19 @@ local Text = require(OnyxUI.Components.Text) local DISABLED_TRANSPARENCY = 0.5 -local function SettingToggle(Props: { [any]: any }) - Props.SwitchedOn = EnsureValue(Props.SwitchedOn, "boolean", false) - Props.Disabled = EnsureValue(Props.Disabled, "boolean", false) +export type Props = SwitchGroup.Props & { + Label: PubTypes.CanBeState, +} + +local function SettingToggle(Props: Props) + local Switched = EnsureValue(Props.Switched, "boolean", false) + local Disabled = EnsureValue(Props.Disabled, "boolean", false) return SwitchGroup { Size = UDim2.fromScale(1, 0), AutomaticSize = Enum.AutomaticSize.Y, - SwitchedOn = Props.SwitchedOn, - Disabled = Props.Disabled, + SwitchedOn = Switched, + Disabled = Disabled, [Children] = { Text { @@ -29,7 +34,7 @@ local function SettingToggle(Props: { [any]: any }) Text = Props.Label, TextColor3 = Themer.Theme.Colors.BaseContent.Main, TextTransparency = Computed(function() - if Props.Disabled:get() then + if Disabled:get() then return DISABLED_TRANSPARENCY else return 0 @@ -40,7 +45,7 @@ local function SettingToggle(Props: { [any]: any }) SwitchInput { AnchorPoint = Vector2.new(1, 0), Position = UDim2.fromScale(1, 0), - SwitchedOn = Props.SwitchedOn, + SwitchedOn = Switched, Disabled = Props.Disabled, Selectable = false, }, diff --git a/src/Components/SwitchGroup.lua b/src/Components/SwitchGroup.lua index 7a43d6d..b299198 100644 --- a/src/Components/SwitchGroup.lua +++ b/src/Components/SwitchGroup.lua @@ -1,45 +1,23 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) - +local OnyxUI = script.Parent.Parent local EnsureValue = require(OnyxUI.Utils.EnsureValue) local Themer = require(OnyxUI.Utils.Themer) +local CombineProps = require(OnyxUI.Utils.CombineProps) -local Children = Fusion.Children - -local BaseButton = require(OnyxUI.Components.BaseButton) +local BaseButton = require(script.Parent.BaseButton) +local SwitchInput = require(script.Parent.SwitchInput) -local function SwitchGroup(Props: { [any]: any }) - Props.SwitchedOn = EnsureValue(Props.SwitchedOn, "boolean", false) - Props.Disabled = EnsureValue(Props.Disabled, "boolean", false) +export type Props = SwitchInput.Props & {} - return BaseButton { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - Interactable = Props.Interactable, - BackgroundColor3 = Props.BackgroundColor3, - BackgroundTransparency = Props.BackgroundTransparency, +return function(Props: Props) + local Switched = EnsureValue(Props.Switched, "boolean", false) + return BaseButton(CombineProps(Props, { + Name = "SwitchGroup", ClickSound = Themer.Theme.Sound.Switch, - Disabled = Props.Disabled, OnActivated = function() - Props.SwitchedOn:set(not Props.SwitchedOn:get()) + Switched:set(not Switched:get()) end, - - [Children] = Props[Children], - } + })) end - -return SwitchGroup diff --git a/src/Components/SwitchInput.lua b/src/Components/SwitchInput.lua index 9a801fa..840df7d 100644 --- a/src/Components/SwitchInput.lua +++ b/src/Components/SwitchInput.lua @@ -1,119 +1,164 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local EnsureValue = require(OnyxUI.Utils.EnsureValue) local Themer = require(OnyxUI.Utils.Themer) -local Modifier = require(OnyxUI.Utils.Modifier) +local PubTypes = require(OnyxUI.Utils.PubTypes) +local CombineProps = require(OnyxUI.Utils.CombineProps) +local ColorUtils = require(OnyxUI.Parent.ColorUtils) local Children = Fusion.Children local Computed = Fusion.Computed local Spring = Fusion.Spring - -local Frame = require(OnyxUI.Components.Frame) -local BaseButton = require(OnyxUI.Components.BaseButton) - -local function SwitchInput(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "SwitchInput") - Props.Size = EnsureValue( +local Value = Fusion.Value + +local Frame = require(script.Parent.Frame) +local BaseButton = require(script.Parent.BaseButton) + +export type Props = Frame.Props & { + Switched: PubTypes.CanBeState?, + Disabled: PubTypes.CanBeState?, + Color: PubTypes.CanBeState?, +} + +return function(Props: Props) + local Switched = EnsureValue(Props.Switched, "boolean", false) + local Disabled = EnsureValue(Props.Disabled, "boolean", false) + local Color = EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.Primary.Main) + local Size = EnsureValue( Props.Size, "UDim2", Computed(function() return UDim2.fromOffset(Themer.Theme.TextSize["1"]:get() * 2, Themer.Theme.TextSize["1"]:get()) end) ) + local AutomaticSize = EnsureValue(Props.AutomaticSize, "EnumItem", Enum.AutomaticSize.None) + + local IsHolding = Value(false) + local IsHovering = Value(false) + local EffectiveColor = Computed(function() + local ActiveColor + if Switched:get() then + ActiveColor = Color:get() + else + ActiveColor = Themer.Theme.Colors.NeutralContent.Dark:get() + end + + if not Disabled:get() then + if IsHolding:get() then + return ColorUtils.Emphasize(ActiveColor, Themer.Theme.Emphasis.Regular:get()) + elseif IsHovering:get() then + return ColorUtils.Emphasize(ActiveColor, Themer.Theme.Emphasis.Light:get()) + end + end - Props.SwitchedOn = EnsureValue(Props.SwitchedOn, "boolean", false) - Props.Disabled = EnsureValue(Props.Disabled, "boolean", false) + return ActiveColor + end) + local EffectiveBallColor = Computed(function(): any + local ActiveColor + if Switched:get() then + ActiveColor = Themer.Theme.Colors.Base.Main:get() + else + ActiveColor = Themer.Theme.Colors.NeutralContent.Dark:get() + end + + if not Disabled:get() then + if IsHolding:get() then + if not Switched:get() then + return ColorUtils.Emphasize(ActiveColor, Themer.Theme.Emphasis.Regular:get()) + else + return ActiveColor + end + elseif IsHovering:get() then + if not Switched:get() then + return ColorUtils.Emphasize(ActiveColor, Themer.Theme.Emphasis.Light:get()) + else + return ActiveColor + end + end + end - Props.Padding = EnsureValue( - Props.Padding, + return ActiveColor + end) + local EffectiveCornerRadius = EnsureValue( + Props.CornerRadius, "UDim", Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.25"]:get()) + return UDim.new(0, Themer.Theme.CornerRadius.Full:get()) end) ) - local ContentColor = Computed(function() - if Props.SwitchedOn:get() then - return Themer.Theme.Colors.Primary.Main:get() - else - return Themer.Theme.Colors.NeutralContent.Dark:get() - end - end) - - return BaseButton { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - Interactable = Props.Interactable, - BackgroundColor3 = Props.BackgroundColor3, - BackgroundTransparency = Props.BackgroundTransparency, - + return BaseButton(CombineProps(Props, { + Name = "SwitchInput", + Size = Size, + AutomaticSize = AutomaticSize, + Disabled = Disabled, + StrokeEnabled = true, + StrokeTransparency = Spring( + Computed(function() + if Disabled:get() then + return 0.9 + end + if Switched:get() then + return 0 + else + return 0.5 + end + end), + Themer.Theme.SpringSpeed["1"], + Themer.Theme.SpringDampening + ), + StrokeColor = Spring(EffectiveColor, Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening), + CornerRadius = EffectiveCornerRadius, ClickSound = Themer.Theme.Sound.Switch, - Disabled = Props.Disabled, - + IsHovering = IsHovering, + IsHolding = IsHolding, OnActivated = function() - Props.SwitchedOn:set(not Props.SwitchedOn:get()) + Switched:set(not Switched:get()) end, [Children] = { Frame { Name = "Switch", - Size = Props.Size, - AutomaticSize = Enum.AutomaticSize.None, - BackgroundColor3 = Themer.Theme.Colors.Base.Light, - BackgroundTransparency = 0, + Size = Size, + AutomaticSize = AutomaticSize, + BackgroundColor3 = Spring(EffectiveColor, Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening), + BackgroundTransparency = Spring( + Computed(function() + if Switched:get() then + return 0 + else + return 1 + end + end), + Themer.Theme.SpringSpeed["1"], + Themer.Theme.SpringDampening + ), + Padding = UDim.new(0, 2), + CornerRadius = EffectiveCornerRadius, [Children] = { - Modifier.Stroke { - Transparency = Spring( - Computed(function() - if Props.Disabled:get() then - return 0.7 - end - if Props.SwitchedOn:get() then - return 0 - else - return 0.6 - end - end), - Themer.Theme.SpringSpeed["1"], - Themer.Theme.SpringDampening - ), - Color = Spring(ContentColor, 30, Themer.Theme.SpringDampening), - }, - Modifier.Corner { - CornerRadius = Computed(function() - return UDim.new(0, Themer.Theme.CornerRadius["2"]:get()) - end), - }, - Modifier.Padding { - Padding = UDim.new(0, 3), - }, - Frame { Name = "Ball", AnchorPoint = Spring( Computed(function() - return (Props.SwitchedOn:get() and Vector2.new(1, 0.5)) or Vector2.new(0, 0.5) + if Switched:get() then + return Vector2.new(1, 0.5) + else + return Vector2.new(0, 0.5) + end end), Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening ), Position = Spring( Computed(function() - return (Props.SwitchedOn:get() and UDim2.fromScale(1, 0.5)) or UDim2.fromScale(0, 0.5) + if Switched:get() then + return UDim2.fromScale(1, 0.5) + else + return UDim2.fromScale(0, 0.5) + end end), Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening @@ -122,10 +167,10 @@ local function SwitchInput(Props: { [any]: any }) AutomaticSize = Enum.AutomaticSize.None, BackgroundTransparency = Spring( Computed(function() - if Props.Disabled:get() then + if Disabled:get() then return 0.7 end - if Props.SwitchedOn:get() then + if Switched:get() then return 0 else return 0 @@ -134,25 +179,18 @@ local function SwitchInput(Props: { [any]: any }) Themer.Theme.SpringSpeed["1"], Themer.Theme.SpringDampening ), - BackgroundColor3 = Spring(ContentColor, 40, Themer.Theme.SpringDampening), - - [Children] = { - Modifier.AspectRatioConstraint { - AspectRatio = 1, - AspectType = Enum.AspectType.ScaleWithParentSize, - DominantAxis = Enum.DominantAxis.Height, - }, - Modifier.Corner { - CornerRadius = Computed(function() - return UDim.new(0, Themer.Theme.CornerRadius["2"]:get()) - end), - }, - }, + BackgroundColor3 = Spring( + EffectiveBallColor, + Themer.Theme.SpringSpeed["1"], + Themer.Theme.SpringDampening + ), + AspectRatio = 1, + AspectType = Enum.AspectType.ScaleWithParentSize, + DominantAxis = Enum.DominantAxis.Height, + CornerRadius = EffectiveCornerRadius, }, }, }, }, - } + }, { "Size", "AutomaticSize" })) end - -return SwitchInput diff --git a/src/Components/SwitchInput.story.lua b/src/Components/SwitchInput.story.lua index 8ce729f..d1a67d3 100644 --- a/src/Components/SwitchInput.story.lua +++ b/src/Components/SwitchInput.story.lua @@ -1,40 +1,26 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local Themer = require(OnyxUI.Utils.Themer) -local New = Fusion.New local Children = Fusion.Children local Computed = Fusion.Computed local SwitchInput = require(script.Parent.SwitchInput) -local Text = require(script.Parent.Text) local Frame = require(script.Parent.Frame) return { story = function(Parent: GuiObject, _Props: { [any]: any }) - local PreviewPadding = Computed(function() - return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()) - end) - local Instance = Frame { Parent = Parent, + Padding = Computed(function() + return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()) + end), + ListEnabled = true, [Children] = { - New "UIPadding" { - PaddingBottom = PreviewPadding, - PaddingLeft = PreviewPadding, - PaddingRight = PreviewPadding, - PaddingTop = PreviewPadding, - }, + SwitchInput {}, SwitchInput { - [Children] = { - Text { - AnchorPoint = Vector2.new(0, 0.5), - Position = UDim2.fromScale(0, 0.5), - Text = "uwu", - TextSize = 19, - }, - }, + Disabled = true, }, }, } diff --git a/src/Components/Text.lua b/src/Components/Text.lua index 993f8e7..d83426b 100644 --- a/src/Components/Text.lua +++ b/src/Components/Text.lua @@ -1,74 +1,70 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) - +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local EnsureValue = require(OnyxUI.Utils.EnsureValue) local Themer = require(OnyxUI.Utils.Themer) -local New = Fusion.New -local Children = Fusion.Children -local Out = Fusion.Out local Computed = Fusion.Computed +local Hydrate = Fusion.Hydrate + +local Base = require(script.Parent.Base) +local PubTypes = require(OnyxUI.Utils.PubTypes) +local CombineProps = require(script.Parent.Parent.Utils.CombineProps) + +export type Props = Base.Props & { + Text: PubTypes.CanBeState?, + TextColor3: PubTypes.CanBeState?, + TextSize: PubTypes.CanBeState?, + RichText: PubTypes.CanBeState?, + FontFace: PubTypes.CanBeState?, + TextWrapped: PubTypes.CanBeState?, + TextXAlignment: PubTypes.CanBeState?, + TextYAlignment: PubTypes.CanBeState?, + Font: PubTypes.CanBeState?, + TextScaled: PubTypes.CanBeState?, + TextTruncate: PubTypes.CanBeState?, + LineHeight: PubTypes.CanBeState?, + LocalizedText: PubTypes.CanBeState?, + MaxVisibleGraphemes: PubTypes.CanBeState?, + TextTransparency: PubTypes.CanBeState?, +} -local function Text(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "Text") - Props.AutomaticSize = EnsureValue(Props.AutomaticSize, "EnumItem", Enum.AutomaticSize.XY) - Props.TextColor3 = EnsureValue(Props.TextColor3, "Color3", Themer.Theme.Colors.BaseContent.Main) - Props.TextSize = EnsureValue(Props.TextSize, "number", Themer.Theme.TextSize["1"]) - Props.RichText = EnsureValue(Props.RichText, "boolean", true) - Props.FontFace = EnsureValue( +return function(Props: Props) + local TextColor3 = EnsureValue(Props.TextColor3, "Color3", Themer.Theme.Colors.BaseContent.Main) + local TextSize = EnsureValue(Props.TextSize, "number", Themer.Theme.TextSize["1"]) + local RichText = EnsureValue(Props.RichText, "boolean", true) + local FontFace = EnsureValue( Props.FontFace, "Font", Computed(function() return Font.new(Themer.Theme.Font.Body:get(), Themer.Theme.FontWeight.Body:get()) end) ) - Props.TextWrapped = EnsureValue(Props.TextWrapped, "boolean", true) - Props.ClipsDescendants = EnsureValue(Props.ClipsDescendants, "boolean", true) - Props.TextXAlignment = EnsureValue(Props.TextXAlignment, "EnumItem", Enum.TextXAlignment.Left) - Props.TextYAlignment = EnsureValue(Props.TextYAlignment, "EnumItem", Enum.TextYAlignment.Top) - Props.BackgroundTransparency = EnsureValue(Props.BackgroundTransparency, "number", 1) + local TextWrapped = EnsureValue(Props.TextWrapped, "boolean", true) + local TextXAlignment = EnsureValue(Props.TextXAlignment, "EnumItem", Enum.TextXAlignment.Left) + local TextYAlignment = EnsureValue(Props.TextYAlignment, "EnumItem", Enum.TextYAlignment.Top) - return New "TextLabel" { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - Interactable = Props.Interactable, - BackgroundColor3 = Props.BackgroundColor3, - BackgroundTransparency = Props.BackgroundTransparency, + return Hydrate(Base(CombineProps(Props, { + ClassName = "TextLabel", + Name = "Text", + AutomaticSize = Enum.AutomaticSize.XY, + }))) { + TextColor3 = TextColor3, + TextSize = TextSize, + RichText = RichText, + FontFace = FontFace, + TextWrapped = TextWrapped, + ClipsDescendants = false, + TextXAlignment = TextXAlignment, + TextYAlignment = TextYAlignment, + BackgroundTransparency = 1, - RichText = Props.RichText, - TextSize = Props.TextSize, - TextColor3 = Props.TextColor3, - FontFace = Props.FontFace, - Font = Props.Font, - TextScaled = Props.TextScaled, Text = Props.Text, - TextWrapped = Props.TextWrapped, - TextXAlignment = Props.TextXAlignment, - TextYAlignment = Props.TextYAlignment, - TextTruncate = Props.TextTruncate, - AutoLocalize = Props.AutoLocalize, - LineHeight = Props.LineHeight, - LocalizedText = Props.LocalizedText, - MaxVisibleGraphemes = Props.MaxVisibleGraphemes, TextTransparency = Props.TextTransparency, - - [Out "ContentText"] = Props.ContentText, - [Out "TextBounds"] = Props.TextBounds, - [Out "TextFits"] = Props.TextFits, - - [Children] = Props[Children], + MaxVisibleGraphemes = Props.MaxVisibleGraphemes, + LocalizedText = Props.LocalizedText, + LineHeight = Props.LineHeight, + TextTruncate = Props.TextTruncate, + TextScaled = Props.TextScaled, + Font = Props.Font, } end - -return Text diff --git a/src/Components/Text.story.lua b/src/Components/Text.story.lua index 3204cae..52c653f 100644 --- a/src/Components/Text.story.lua +++ b/src/Components/Text.story.lua @@ -4,7 +4,7 @@ return { story = function(Parent: GuiObject, _Props: { [any]: any }) local Instance = Text { Parent = Parent, - Text = "Hi this is some text uwu", + Text = "This is some sample text\n\navafe.me!", } return function() diff --git a/src/Components/TextArea.lua b/src/Components/TextArea.lua new file mode 100644 index 0000000..fb417da --- /dev/null +++ b/src/Components/TextArea.lua @@ -0,0 +1,14 @@ +local OnyxUI = script.Parent.Parent +local CombineProps = require(OnyxUI.Utils.CombineProps) + +local TextInput = require(OnyxUI.Components.TextInput) + +export type Props = TextInput.Props & {} + +return function(Props: Props) + return TextInput(CombineProps(Props, { + AutomaticSize = Enum.AutomaticSize.None, + TextWrapped = true, + MultiLine = true, + })) +end diff --git a/src/Components/TextArea.story.lua b/src/Components/TextArea.story.lua new file mode 100644 index 0000000..3db8d1c --- /dev/null +++ b/src/Components/TextArea.story.lua @@ -0,0 +1,37 @@ +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) +local Themer = require(OnyxUI.Utils.Themer) + +local Children = Fusion.Children +local Computed = Fusion.Computed + +local TextArea = require(script.Parent.TextArea) +local Frame = require(script.Parent.Frame) + +return { + story = function(Parent: GuiObject, _Props: { [any]: any }) + local Instance = Frame { + Parent = Parent, + Size = UDim2.fromOffset(300, 0), + AutomaticSize = Enum.AutomaticSize.Y, + ListEnabled = true, + Padding = Computed(function() + return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()) + end), + + [Children] = { + TextArea { + Size = UDim2.fromOffset(200, 50), + }, + TextArea { + Size = UDim2.fromOffset(200, 100), + CharacterLimit = 20, + }, + }, + } + + return function() + Instance:Destroy() + end + end, +} diff --git a/src/Components/TextInput.lua b/src/Components/TextInput.lua index 76ee052..ce5c4b5 100644 --- a/src/Components/TextInput.lua +++ b/src/Components/TextInput.lua @@ -1,179 +1,147 @@ local SoundService = game:GetService("SoundService") -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local EnsureValue = require(OnyxUI.Utils.EnsureValue) local Themer = require(OnyxUI.Utils.Themer) -local Modifier = require(OnyxUI.Utils.Modifier) +local PubTypes = require(OnyxUI.Utils.PubTypes) +local CombineProps = require(OnyxUI.Utils.CombineProps) -local New = Fusion.New -local Children = Fusion.Children +local Hydrate = Fusion.Hydrate local Computed = Fusion.Computed local OnEvent = Fusion.OnEvent local Out = Fusion.Out local Observer = Fusion.Observer local Spring = Fusion.Spring +local Cleanup = Fusion.Cleanup +local Value = Fusion.Value + +local Base = require(script.Parent.Base) + +export type Props = Base.Props & { + Disabled: PubTypes.CanBeState?, + Text: PubTypes.CanBeState?, + PlaceholderText: PubTypes.CanBeState?, + Color: PubTypes.CanBeState?, + CharacterLimit: PubTypes.CanBeState?, + ClearTextOnFocus: PubTypes.CanBeState?, + TextWrapped: PubTypes.CanBeState?, + MultiLine: PubTypes.CanBeState?, + IsFocused: PubTypes.CanBeState?, + OnFocused: PubTypes.CanBeState<() -> ()>?, + OnFocusLost: PubTypes.CanBeState<() -> ()>?, +} + +return function(Props: Props) + local Disabled = EnsureValue(Props.Disabled, "boolean", false) + local Text = EnsureValue(Props.Text, "string", "") + local Color = EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.Primary.Main) + local CharacterLimit = EnsureValue(Props.CharacterLimit, "number", -1) + local ClearTextOnFocus = EnsureValue(Props.ClearTextOnFocus, "boolean", false) + local PlaceholderText = EnsureValue(Props.PlaceholderText, "string", "") + + local RemainingCharaters = Value(-1) + local IsFocused = EnsureValue(Props.IsFocused, "boolean", false) + local OnFocused = EnsureValue(Props.OnFocused, "function", function() end) + local OnFocusLost = EnsureValue(Props.OnFocusLost, "function", function() end) + + local Observers = { + Observer(Text):onChange(function() + local TextValue = Text:get() or "" + Text:set(TextValue:sub(1, utf8.offset(TextValue, CharacterLimit:get()))) + RemainingCharaters:set(CharacterLimit:get() - (utf8.len(TextValue or "") or CharacterLimit:get())) + end), + } -local function TextInput(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "TextInput") - Props.Disabled = EnsureValue(Props.Disabled, "boolean", false) - Props.Text = EnsureValue(Props.Text, "string", "") - Props.PlaceholderText = EnsureValue(Props.PlaceholderText, "string", "") - Props.TextSize = EnsureValue(Props.TextSize, "string", Themer.Theme.TextSize["1"]) - Props.FontFace = EnsureValue( - Props.FontFace, - "Font", - Computed(function() - return Font.new(Themer.Theme.Font.Body:get(), Themer.Theme.FontWeight.Body:get()) - end) - ) - Props.AutomaticSize = EnsureValue(Props.AutomaticSize, "EnumItem", Enum.AutomaticSize.XY) - Props.FocusColor = EnsureValue(Props.FocusColor, "Color3", Themer.Theme.Colors.Primary.Main) - Props.TextColor3 = EnsureValue(Props.TextColor3, "Color3", Themer.Theme.Colors.BaseContent.Main) - Props.PlaceholderColor3 = EnsureValue(Props.PlaceholderColor3, "Color3", Themer.Theme.Colors.NeutralContent.Dark) - Props.BackgroundColor3 = EnsureValue(Props.BackgroundColor3, "Color3", Themer.Theme.Colors.Base.Light) - Props.ClipsDescendants = EnsureValue(Props.ClipsDescendants, "boolean", true) - Props.AutoLocalize = EnsureValue(Props.AutoLocalize, "boolean", false) - Props.TextXAlignment = EnsureValue(Props.TextXAlignment, "EnumItem", Enum.TextXAlignment.Left) - Props.TextYAlignment = EnsureValue(Props.TextYAlignment, "EnumItem", Enum.TextYAlignment.Top) - Props.TextWrapped = EnsureValue(Props.TextWrapped, "boolean", false) - Props.Active = EnsureValue( - Props.Active, - "boolean", - Computed(function() - return not Props.Disabled:get() - end) - ) - - Props.CharacterLimit = EnsureValue(Props.CharacterLimit, "number", -1) - Props.RemainingCharaters = EnsureValue(Props.RemainingCharaters, "number", -1) - - Props.IsFocused = EnsureValue(Props.IsFocused, "boolean", false) - Props.OnFocused = EnsureValue(Props.OnFocused, "function", function() end) - Props.OnFocusLost = EnsureValue(Props.OnFocusLost, "function", function() end) - - Props.FocusSound = EnsureValue(Props.FocusSound, "Sound", Themer.Theme.Sound.Focus) - Props.HoverSound = EnsureValue(Props.HoverSound, "Sound", Themer.Theme.Sound.Hover) - - local TextInputInstance = New "TextBox" { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - BackgroundColor3 = Props.BackgroundColor3, - BackgroundTransparency = Props.BackgroundTransparency, - - RichText = Props.RichText, - TextSize = Props.TextSize, - TextColor3 = Props.TextColor3, - FontFace = Props.FontFace, - TextScaled = Props.TextScaled, - Text = Props.Text, - TextWrapped = Props.TextWrapped, - TextXAlignment = Props.TextXAlignment, - TextYAlignment = Props.TextYAlignment, - TextTruncate = Props.TextTruncate, - AutoLocalize = Props.AutoLocalize, - LineHeight = Props.LineHeight, - LocalizedText = Props.LocalizedText, - MaxVisibleGraphemes = Props.MaxVisibleGraphemes, - TextTransparency = Props.TextTransparency, + return Hydrate(Base(CombineProps(Props, { + ClassName = "TextBox", + Name = "TextInput", + CornerRadius = Computed(function() + return UDim.new(0, Themer.Theme.CornerRadius["1"]:get()) + end), + Padding = Computed(function() + return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) + end), + StrokeEnabled = true, + StrokeColor = Spring( + Computed(function() + if IsFocused:get() then + return Color:get() + else + return Themer.Theme.Colors.NeutralContent.Dark:get() + end + end), + Themer.Theme.SpringSpeed["1"], + Themer.Theme.SpringDampening + ), + StrokeTransparency = Spring( + Computed(function() + if Disabled:get() then + return 0.95 + end + if IsFocused:get() then + return 0 + else + return 0.8 + end + end), + Themer.Theme.SpringSpeed["1"], + Themer.Theme.SpringDampening + ), + AutomaticSize = Enum.AutomaticSize.XY, + AutoLocalize = false, + Active = Computed(function() + return not Disabled:get() + end), + BackgroundTransparency = 1, + [Cleanup] = Observers, + }))) { + Text = Text, + TextColor3 = Computed(function() + return Themer.Theme.Colors.BaseContent.Main:get() + end), + TextSize = Themer.Theme.TextSize["1"], + FontFace = Computed(function() + return Font.new(Themer.Theme.Font.Body:get(), Themer.Theme.FontWeight.Body:get()) + end), PlaceholderColor3 = Computed(function() - if Props.Disabled:get() then - return Themer.Theme.Colors.Neutral.Light:get() + if Disabled:get() then + return Themer.Theme.Colors.NeutralContent.Dark:get() else - return Props.PlaceholderColor3:get() + return Themer.Theme.Colors.NeutralContent.Light:get() end end), - PlaceholderText = Props.PlaceholderText, + PlaceholderText = PlaceholderText, + TextXAlignment = Enum.TextXAlignment.Left, + TextYAlignment = Enum.TextYAlignment.Top, MultiLine = Props.MultiLine, - ClearTextOnFocus = Props.ClearTextOnFocus, + ClearTextOnFocus = ClearTextOnFocus, TextEditable = Computed(function() - return not Props.Disabled:get() + return not Disabled:get() end), + TextWrapped = Props.TextWrapped, [OnEvent "Focused"] = function() - Props.IsFocused:set(true) - SoundService:PlayLocalSound(Props.FocusSound:get()) - Props.OnFocused:get()() + if not Disabled:get() then + IsFocused:set(true) + SoundService:PlayLocalSound(Themer.Theme.Sound.Focus:get()) + OnFocused:get()() + end end, [OnEvent "FocusLost"] = function() - Props.IsFocused:set(false) - Props.OnFocusLost:get()() + IsFocused:set(false) + OnFocusLost:get()() end, [OnEvent "MouseEnter"] = function() - SoundService:PlayLocalSound(Props.HoverSound:get()) + SoundService:PlayLocalSound(Themer.Theme.Sound.Hover:get()) end, [OnEvent "SelectionGained"] = function() - if Props.Active:get() then - SoundService:PlayLocalSound(Props.HoverSound:get()) + if not Disabled:get() then + SoundService:PlayLocalSound(Themer.Theme.Sound.Hover:get()) end end, - [Out "Text"] = Props.Text, - - [Children] = { - Modifier.Corner {}, - Modifier.Padding { - PaddingBottom = Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) - end), - PaddingLeft = Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.75"]:get()) - end), - PaddingRight = Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.75"]:get()) - end), - PaddingTop = Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) - end), - }, - Modifier.Stroke { - Color = Spring( - Computed(function() - if Props.Disabled:get() then - return Themer.Theme.Colors.Neutral.Dark:get() - end - if Props.IsFocused:get() then - return Props.FocusColor:get() - else - return Themer.Theme.Colors.Neutral.Light:get() - end - end), - Themer.Theme.SpringSpeed["1"], - Themer.Theme.SpringDampening - ), - }, - - Props[Children], - }, + [Out "Text"] = Text, } - - local DisconnectTextObs = Observer(Props.Text):onChange(function() - local Text = Props.Text:get() or "" - Props.Text:set(Text:sub(1, utf8.offset(Text, Props.CharacterLimit:get()))) - Props.RemainingCharaters:set( - Props.CharacterLimit:get() - (utf8.len(Props.Text:get() or "") or Props.CharacterLimit:get()) - ) - end) - - TextInputInstance:GetPropertyChangedSignal("Parent"):Connect(function() - if TextInputInstance.Parent == nil then - DisconnectTextObs() - end - end) - - return TextInputInstance end - -return TextInput diff --git a/src/Components/TextInput.story.lua b/src/Components/TextInput.story.lua index dec7640..cd562c4 100644 --- a/src/Components/TextInput.story.lua +++ b/src/Components/TextInput.story.lua @@ -1,7 +1,6 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local Themer = require(OnyxUI.Utils.Themer) -local Modifier = require(OnyxUI.Utils.Modifier) local Children = Fusion.Children local Computed = Fusion.Computed @@ -15,20 +14,17 @@ return { Parent = Parent, Size = UDim2.fromOffset(300, 0), AutomaticSize = Enum.AutomaticSize.Y, + ListEnabled = true, + Padding = Computed(function() + return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()) + end), [Children] = { - Modifier.ListLayout {}, - Modifier.Padding { - Padding = Computed(function() - return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()) - end), - }, - TextInput { PlaceholderText = "You can type here!", }, TextInput { - PlaceholderText = "You can't type here!", + PlaceholderText = "You cannot type here!", Disabled = true, }, TextInput { @@ -36,19 +32,8 @@ return { CharacterLimit = 20, }, TextInput { - PlaceholderText = "Description..", - CharacterLimit = 80, - Multiline = true, - TextWrapped = true, - Size = UDim2.new(UDim.new(1, 0), UDim.new(0, 80)), - AutomaticSize = Enum.AutomaticSize.None, - }, - TextInput { - PlaceholderText = "This one wrap-expands!", - Multiline = true, - TextWrapped = true, - Size = UDim2.fromScale(1, 0), - AutomaticSize = Enum.AutomaticSize.Y, + PlaceholderText = "Something dangerous!", + Color = Themer.Theme.Colors.Error.Main, }, }, } diff --git a/src/Components/TitleBar.lua b/src/Components/TitleBar.lua index 1317c76..7b76b29 100644 --- a/src/Components/TitleBar.lua +++ b/src/Components/TitleBar.lua @@ -1,82 +1,101 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) - +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local EnsureValue = require(OnyxUI.Utils.EnsureValue) local Themer = require(OnyxUI.Utils.Themer) +local PubTypes = require(OnyxUI.Utils.PubTypes) +local CombineProps = require(OnyxUI.Utils.CombineProps) local Children = Fusion.Children local Computed = Fusion.Computed +local ForValues = Fusion.ForValues + +local Frame = require(script.Parent.Frame) +local Text = require(script.Parent.Text) +local IconButton = require(script.Parent.IconButton) +local Icon = require(script.Parent.Icon) -local Frame = require(OnyxUI.Components.Frame) -local Text = require(OnyxUI.Components.Text) -local IconButton = require(OnyxUI.Components.IconButton) +export type Props = Frame.Props & { + Content: PubTypes.CanBeState<{ string }>?, + ContentSize: PubTypes.CanBeState?, + ContentColor: PubTypes.CanBeState?, + ContentFontFace: PubTypes.CanBeState?, + CloseButtonIcon: PubTypes.CanBeState?, + CloseButtonDisabled: PubTypes.CanBeState?, + OnClose: PubTypes.CanBeState<() -> ()>?, + AutoLocalize: PubTypes.CanBeState?, +} -local function TitleBar(Props: { [any]: any }) - Props.Name = EnsureValue(Props.Name, "string", "TitleBar") - Props.TextSize = EnsureValue(Props.TextSize, "number", Themer.Theme.TextSize["1.5"]) - Props.FontFace = EnsureValue( - Props.FontFace, +return function(Props: Props) + local Content = EnsureValue(Props.Content, "table", {}) + local ContentSize = EnsureValue(Props.ContentSize, "number", Themer.Theme.TextSize["1.5"]) + local ContentColor = EnsureValue(Props.ContentColor, "Color3", Themer.Theme.Colors.BaseContent.Main) + local ContentFontFace = EnsureValue( + Props.ContentFontFace, "Font", Computed(function() return Font.new(Themer.Theme.Font.Heading:get(), Themer.Theme.FontWeight.Heading:get()) end) ) - Props.Size = EnsureValue(Props.Size, "Udim2", UDim2.fromScale(1, 0)) - Props.AutomaticSize = EnsureValue(Props.AutomaticSize, "EnumItem", Enum.AutomaticSize.Y) - Props.CloseButtonDisabled = EnsureValue(Props.CloseButtonDisabled, "boolean", false) - Props.CloseButtonImage = EnsureValue(Props.CloseButtonImage, "string", "rbxassetid://13405228418") - Props.OnClose = EnsureValue(Props.OnClose, "function", function() end) + local CloseButtonDisabled = EnsureValue(Props.CloseButtonDisabled, "boolean", false) + local CloseButtonIcon = EnsureValue(Props.CloseButtonIcon, "string", "rbxassetid://13405228418") + local OnClose = EnsureValue(Props.OnClose, "function", function() end) - return Frame { - Name = Props.Name, - Parent = Props.Parent, - Position = Props.Position, - Rotation = Props.Rotation, - AnchorPoint = Props.AnchorPoint, - Size = Props.Size, - AutomaticSize = Props.AutomaticSize, - Visible = Props.Visible, - ZIndex = Props.ZIndex, - LayoutOrder = Props.LayoutOrder, - ClipsDescendants = Props.ClipsDescendants, - Active = Props.Active, - Selectable = Props.Selectable, - BackgroundColor3 = Props.BackgroundColor3, - BackgroundTransparency = Props.BackgroundTransparency, + return Frame(CombineProps(Props, { + Name = "TitleBar", + Size = UDim2.fromScale(1, 0), + AutomaticSize = Enum.AutomaticSize.Y, [Children] = { - Text { - Name = "Title", + Frame { + Name = "Content", AnchorPoint = Vector2.new(0.5, 0), Position = UDim2.fromScale(0.5, 0), - Text = Props.Title, - TextWrapped = false, - TextSize = Props.TextSize, - FontFace = Props.FontFace, - AutoLocalize = Props.AutoLocalize, + + [Children] = { + ForValues(Content, function(ContentString: string) + if string.find(ContentString, "rbxassetid://", 1, true) then + return Icon { + Image = ContentString, + ImageColor3 = ContentColor, + Size = Computed(function() + return UDim2.fromOffset(ContentSize:get(), ContentSize:get()) + end), + } + else + return Text { + Text = ContentString, + TextColor3 = ContentColor, + TextSize = ContentSize, + FontFace = ContentFontFace, + TextWrapped = false, + AutoLocalize = Props.AutoLocalize, + } + end + end, Fusion.cleanup), + }, }, Computed(function() - if not Props.CloseButtonDisabled:get() then + if CloseButtonDisabled:get() == false then return IconButton { Name = "CloseButton", - Image = Props.CloseButtonImage, + Image = CloseButtonIcon, + ContentSize = ContentSize, + ContentColor = ContentColor, + Color = ContentColor, Style = "Ghost", - Color = Themer.Theme.Colors.BaseContent.Main, - ContentSize = Computed(function() - return Props.TextSize:get() * 0.9 - end), - AnchorPoint = Vector2.new(1, 0), - Position = UDim2.fromScale(1, 0), + AnchorPoint = Vector2.new(1, 0.5), + Position = UDim2.fromScale(1, 0.5), + OnActivated = function() - if Props.OnClose:get() then - Props.OnClose:get()() + if OnClose:get() then + OnClose:get()() end end, } + else + return end end, Fusion.cleanup), }, - } + })) end - -return TitleBar diff --git a/src/Components/TitleBar.story.lua b/src/Components/TitleBar.story.lua index 9f15f08..68690bf 100644 --- a/src/Components/TitleBar.story.lua +++ b/src/Components/TitleBar.story.lua @@ -1,8 +1,7 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local Themer = require(OnyxUI.Utils.Themer) -local New = Fusion.New local Children = Fusion.Children local Computed = Fusion.Computed @@ -11,20 +10,17 @@ local TitleBar = require(OnyxUI.Components.TitleBar) local Frame = require(OnyxUI.Components.Frame) return { - story = function(Parent: GuiObject, _Props: { [any]: any }) - local PreviewPadding = Computed(function() - return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()) - end) - + story = function(Parent: GuiObject, _Props) local Instance = Frame { Parent = Parent, + Padding = Computed(function() + return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()) + end), + ListEnabled = true, [Children] = { - New "UIPadding" { - PaddingBottom = PreviewPadding, - PaddingLeft = PreviewPadding, - PaddingRight = PreviewPadding, - PaddingTop = PreviewPadding, + TitleBar { + Content = { "Title" }, }, MenuFrame { Size = UDim2.fromOffset(300, 0), @@ -32,7 +28,7 @@ return { [Children] = { TitleBar { - Title = "Shopping", + Content = { "Title" }, }, }, }, diff --git a/src/Examples/SettingsMenu.lua b/src/Examples/SettingsMenu.lua index bc27bee..0899f76 100644 --- a/src/Examples/SettingsMenu.lua +++ b/src/Examples/SettingsMenu.lua @@ -1,7 +1,6 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local Themer = require(OnyxUI.Utils.Themer) -local Modifier = require(OnyxUI.Utils.Modifier) local Children = Fusion.Children local Computed = Fusion.Computed @@ -13,38 +12,32 @@ local ScrollingFrame = require(OnyxUI.Components.ScrollingFrame) local SettingToggle = require(OnyxUI.Components.SettingToggle) local TextInput = require(OnyxUI.Components.TextInput) -local function SettingsMenu(Props: { [any]: any }) +return function(Props) return MenuFrame { Parent = Props.Parent, Size = UDim2.fromOffset(330, 0), + AutomaticSize = Enum.AutomaticSize.Y, + ListEnabled = true, + ListPadding = Computed(function() + return UDim.new(0, Themer.Theme.Spacing["0.75"]:get()) + end), [Children] = { - Modifier.ListLayout { - SortOrder = Enum.SortOrder.LayoutOrder, - Padding = UDim.new(0, Themer.Theme.Spacing["0.75"]:get()), - }, - TitleBar { - Title = "Settings", + Content = { "Settings" }, }, ScrollingFrame { Size = UDim2.new(UDim.new(1, 0), UDim.new(0, 175)), AutomaticSize = Enum.AutomaticSize.None, + ListEnabled = true, + Padding = Computed(function() + return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()) + end), + PaddingRight = Computed(function() + return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get() + Themer.Theme.Spacing["1"]:get()) + end), [Children] = { - Modifier.ListLayout { - SortOrder = Enum.SortOrder.LayoutOrder, - Padding = Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) - end), - }, - Modifier.Padding { - Padding = Computed(function() - return UDim.new(0, Themer.Theme.StrokeThickness["1"]:get()) - end), - PaddingRight = UDim.new(0, 16), - }, - SettingToggle { Label = "Music", SwitchedOn = true, @@ -83,5 +76,3 @@ local function SettingsMenu(Props: { [any]: any }) }, } end - -return SettingsMenu diff --git a/src/Examples/SettingsMenu.story.lua b/src/Examples/SettingsMenu.story.lua index 15f0ec5..f377150 100644 --- a/src/Examples/SettingsMenu.story.lua +++ b/src/Examples/SettingsMenu.story.lua @@ -1,5 +1,5 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) local Themer = require(OnyxUI.Utils.Themer) local New = Fusion.New diff --git a/src/Utils/CombineProps.lua b/src/Utils/CombineProps.lua new file mode 100644 index 0000000..e4c811e --- /dev/null +++ b/src/Utils/CombineProps.lua @@ -0,0 +1,16 @@ +local OnyxUI = script.Parent.Parent +local PubTypes = require(OnyxUI.Utils.PubTypes) + +local function CombineProps(Source: { [any]: PubTypes.CanBeState }, Target: { [any]: PubTypes.CanBeState }, ExcludedKeys: { any }?) + for Key, Value in pairs(Source) do + if (ExcludedKeys ~= nil) and (table.find(ExcludedKeys, Key) ~= nil) then + continue + end + + Target[Key] = Value + end + + return Target +end + +return CombineProps diff --git a/src/Utils/EnsureValue.lua b/src/Utils/EnsureValue.lua index 4bd1d77..c757718 100644 --- a/src/Utils/EnsureValue.lua +++ b/src/Utils/EnsureValue.lua @@ -1,9 +1,10 @@ -local OnyxUI = require(script.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local OnyxUI = script.Parent.Parent +local Fusion = require(OnyxUI.Parent.Fusion) +local PubTypes = require(OnyxUI.Utils.PubTypes) local Value = Fusion.Value -return function(PreferredValue: any, ValueType: string, FallbackValue: any): Fusion.CanBeState +return function(PreferredValue: any, ValueType: string, FallbackValue: any): PubTypes.CanBeState if PreferredValue == nil then if typeof(FallbackValue) == "table" and FallbackValue.get then return FallbackValue diff --git a/src/Utils/GetValue.lua b/src/Utils/GetValue.lua new file mode 100644 index 0000000..f52aebc --- /dev/null +++ b/src/Utils/GetValue.lua @@ -0,0 +1,12 @@ +local OnyxUI = script.Parent.Parent +local PubTypes = require(OnyxUI.Utils.PubTypes) + +local function GetValue(Value: PubTypes.CanBeState): any + if (typeof(Value) == "table") and (typeof(Value.type) == "string") then + return Value:get() + else + return Value + end +end + +return GetValue diff --git a/src/Utils/Modifier/AspectRatioConstraint.lua b/src/Utils/Modifier/AspectRatioConstraint.lua deleted file mode 100644 index fa7ece1..0000000 --- a/src/Utils/Modifier/AspectRatioConstraint.lua +++ /dev/null @@ -1,25 +0,0 @@ -local OnyxUI = require(script.Parent.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) -local EnsureValue = require(OnyxUI.Utils.EnsureValue) - -local New = Fusion.New - -type Props = { - Name: any?, - Parent: any?, - AspectRatio: any?, - AspectType: any?, - DominantAxis: any?, -} - -return function(Props: Props) - Props.AspectType = EnsureValue(Props.AspectType, "EnumItem", Enum.AspectType.ScaleWithParentSize) - - return New "UIAspectRatioConstraint" { - Name = Props.Name, - Parent = Props.Parent, - AspectRatio = Props.AspectRatio, - AspectType = Props.AspectType, - DominantAxis = Props.DominantAxis, - } -end diff --git a/src/Utils/Modifier/Corner.lua b/src/Utils/Modifier/Corner.lua deleted file mode 100644 index 1415ebc..0000000 --- a/src/Utils/Modifier/Corner.lua +++ /dev/null @@ -1,29 +0,0 @@ -local OnyxUI = require(script.Parent.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) -local EnsureValue = require(OnyxUI.Utils.EnsureValue) -local Themer = require(OnyxUI.Utils.Themer) - -local New = Fusion.New -local Computed = Fusion.Computed - -type Props = { - Name: any?, - Parent: any?, - CornerRadius: any?, -} - -return function(Props: Props) - Props.CornerRadius = EnsureValue( - Props.CornerRadius, - "UDim", - Computed(function() - return UDim.new(0, Themer.Theme.CornerRadius["1"]:get()) - end) - ) - - return New "UICorner" { - Name = Props.Name, - Parent = Props.Parent, - CornerRadius = Props.CornerRadius, - } -end diff --git a/src/Utils/Modifier/FlexItem.lua b/src/Utils/Modifier/FlexItem.lua deleted file mode 100644 index 51f111d..0000000 --- a/src/Utils/Modifier/FlexItem.lua +++ /dev/null @@ -1,20 +0,0 @@ -local OnyxUI = require(script.Parent.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) - -local New = Fusion.New - -type Props = { - Name: any?, - Parent: any?, - FlexMode: any?, - ItemLineAlignment: any?, -} - -return function(Props: Props) - return New "UIFlexItem" { - Name = Props.Name, - Parent = Props.Parent, - FlexMode = Props.FlexMode, - ItemLineAlignment = Props.ItemLineAlignment, - } -end diff --git a/src/Utils/Modifier/Gradient.lua b/src/Utils/Modifier/Gradient.lua deleted file mode 100644 index 7cbdfdb..0000000 --- a/src/Utils/Modifier/Gradient.lua +++ /dev/null @@ -1,26 +0,0 @@ -local OnyxUI = require(script.Parent.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) - -local New = Fusion.New - -type Props = { - Name: any?, - Parent: any?, - Enabled: any?, - Color: any?, - Offset: any?, - Rotation: any?, - Transparency: any?, -} - -return function(Props: Props) - return New "UIGradient" { - Name = Props.Name, - Parent = Props.Parent, - Enabled = Props.Enabled, - Color = Props.Color, - Offset = Props.Offset, - Rotation = Props.Rotation, - Transparency = Props.Transparency, - } -end diff --git a/src/Utils/Modifier/GridLayout.lua b/src/Utils/Modifier/GridLayout.lua deleted file mode 100644 index d577595..0000000 --- a/src/Utils/Modifier/GridLayout.lua +++ /dev/null @@ -1,50 +0,0 @@ -local OnyxUI = require(script.Parent.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) -local EnsureValue = require(OnyxUI.Utils.EnsureValue) -local Themer = require(OnyxUI.Utils.Themer) - -local New = Fusion.New -local Computed = Fusion.Computed - -type Props = { - Name: any?, - Parent: any?, - CellPadding: any?, - CellSize: any?, - FillDirection: any?, - FillDirectionMaxCells: any?, - SortOrder: any?, - StartCorner: any?, - HorizontalAlignment: any?, - VerticalAlignment: any?, -} - -return function(Props: Props) - Props.CellPadding = EnsureValue( - Props.CellPadding, - "UDim2", - Computed(function() - return UDim2.fromOffset(Themer.Theme.Spacing["1"]:get(), Themer.Theme.Spacing["1"]:get()) - end) - ) - Props.CellSize = EnsureValue( - Props.CellSize, - "UDim2", - Computed(function() - return UDim2.fromOffset(Themer.Theme.Spacing["6"]:get(), Themer.Theme.Spacing["6"]:get()) - end) - ) - - return New "UIGridLayout" { - Name = Props.Name, - Parent = Props.Parent, - CellPadding = Props.CellPadding, - CellSize = Props.CellSize, - FillDirection = Props.FillDirection, - FillDirectionMaxCells = Props.FillDirectionMaxCells, - SortOrder = Props.SortOrder, - StartCorner = Props.StartCorner, - HorizontalAlignment = Props.HorizontalAlignment, - VerticalAlignment = Props.VerticalAlignment, - } -end diff --git a/src/Utils/Modifier/ListLayout.lua b/src/Utils/Modifier/ListLayout.lua deleted file mode 100644 index f967d63..0000000 --- a/src/Utils/Modifier/ListLayout.lua +++ /dev/null @@ -1,49 +0,0 @@ -local OnyxUI = require(script.Parent.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) -local EnsureValue = require(OnyxUI.Utils.EnsureValue) -local Themer = require(OnyxUI.Utils.Themer) - -local New = Fusion.New -local Computed = Fusion.Computed - -type Props = { - Name: any?, - Parent: any?, - - Padding: any?, - - FillDirection: any?, - SortOrder: any?, - Wraps: any?, - - HorizontalAlignment: any?, - HorizontalFlex: any?, - ItemLineAlignment: any?, - VerticalAlignment: any?, - VerticalFlex: any?, -} - -return function(Props: Props) - Props.Padding = EnsureValue( - Props.Padding, - "UDim", - Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) - end) - ) - Props.SortOrder = EnsureValue(Props.SortOrder, "EnumItem", Enum.SortOrder.LayoutOrder) - - return New "UIListLayout" { - Name = Props.Name, - Parent = Props.Parent, - Padding = Props.Padding, - FillDirection = Props.FillDirection, - SortOrder = Props.SortOrder, - Wraps = Props.Wraps, - HorizontalAlignment = Props.HorizontalAlignment, - HorizontalFlex = Props.HorizontalFlex, - ItemLineAlignment = Props.ItemLineAlignment, - VerticalAlignment = Props.VerticalAlignment, - VerticalFlex = Props.VerticalFlex, - } -end diff --git a/src/Utils/Modifier/Padding.lua b/src/Utils/Modifier/Padding.lua deleted file mode 100644 index 1eb6386..0000000 --- a/src/Utils/Modifier/Padding.lua +++ /dev/null @@ -1,40 +0,0 @@ -local OnyxUI = require(script.Parent.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) -local EnsureValue = require(OnyxUI.Utils.EnsureValue) -local Themer = require(OnyxUI.Utils.Themer) - -local New = Fusion.New -local Computed = Fusion.Computed - -type Props = { - Name: any?, - Parent: any?, - Padding: any?, - PaddingBottom: any?, - PaddingLeft: any?, - PaddingRight: any?, - PaddingTop: any?, -} - -return function(Props: Props) - Props.Padding = EnsureValue( - Props.Padding, - "UDim", - Computed(function() - return UDim.new(0, Themer.Theme.Spacing["1"]:get()) - end) - ) - Props.PaddingBottom = EnsureValue(Props.PaddingBottom, "UDim", Props.Padding) - Props.PaddingLeft = EnsureValue(Props.PaddingLeft, "UDim", Props.Padding) - Props.PaddingRight = EnsureValue(Props.PaddingRight, "UDim", Props.Padding) - Props.PaddingTop = EnsureValue(Props.PaddingTop, "UDim", Props.Padding) - - return New "UIPadding" { - Name = Props.Name, - Parent = Props.Parent, - PaddingBottom = Props.PaddingBottom, - PaddingLeft = Props.PaddingLeft, - PaddingRight = Props.PaddingRight, - PaddingTop = Props.PaddingTop, - } -end diff --git a/src/Utils/Modifier/PageLayout.lua b/src/Utils/Modifier/PageLayout.lua deleted file mode 100644 index 33eee46..0000000 --- a/src/Utils/Modifier/PageLayout.lua +++ /dev/null @@ -1,53 +0,0 @@ -local OnyxUI = require(script.Parent.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) -local EnsureValue = require(OnyxUI.Utils.EnsureValue) -local Themer = require(OnyxUI.Utils.Themer) - -local New = Fusion.New -local Computed = Fusion.Computed - -type Props = { - Name: any?, - Parent: any?, - Animated: any?, - Circular: any?, - EasingDirection: any?, - EasingStyle: any?, - Padding: any?, - TweenTime: any?, - FillDirection: any?, - SortOrder: any?, - HorizontalAlignment: any?, - VerticalAlignment: any?, - GamepadInputEnabled: any?, - ScrollWheelInputEnabled: any?, - TouchInputEnabled: any?, -} - -return function(Props: Props) - Props.Padding = EnsureValue( - Props.Padding, - "UDim", - Computed(function() - return UDim.new(0, Themer.Theme.Spacing["1"]:get()) - end) - ) - - return New "UIPageLayout" { - Name = Props.Name, - Parent = Props.Parent, - Animated = Props.Animated, - Circular = Props.Circular, - EasingDirection = Props.EasingDirection, - EasingStyle = Props.EasingStyle, - Padding = Props.Padding, - TweenTime = Props.TweenTime, - FillDirection = Props.FillDirection, - SortOrder = Props.SortOrder, - HorizontalAlignment = Props.HorizontalAlignment, - VerticalAlignment = Props.VerticalAlignment, - GamepadInputEnabled = Props.GamepadInputEnabled, - ScrollWheelInputEnabled = Props.ScrollWheelInputEnabled, - TouchInputEnabled = Props.TouchInputEnabled, - } -end diff --git a/src/Utils/Modifier/Scale.lua b/src/Utils/Modifier/Scale.lua deleted file mode 100644 index 5c741eb..0000000 --- a/src/Utils/Modifier/Scale.lua +++ /dev/null @@ -1,18 +0,0 @@ -local OnyxUI = require(script.Parent.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) - -local New = Fusion.New - -type Props = { - Name: any?, - Parent: any?, - Scale: any?, -} - -return function(Props: Props) - return New "UIScale" { - Name = Props.Name, - Parent = Props.Parent, - Scale = Props.Scale, - } -end diff --git a/src/Utils/Modifier/SizeConstraint.lua b/src/Utils/Modifier/SizeConstraint.lua deleted file mode 100644 index a8b638b..0000000 --- a/src/Utils/Modifier/SizeConstraint.lua +++ /dev/null @@ -1,20 +0,0 @@ -local OnyxUI = require(script.Parent.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) - -local New = Fusion.New - -type Props = { - Name: any?, - Parent: any?, - MaxSize: any?, - MinSize: any?, -} - -return function(Props: Props) - return New "UISizeConstraint" { - Name = Props.Name, - Parent = Props.Parent, - MaxSize = Props.MaxSize, - MinSize = Props.MinSize, - } -end diff --git a/src/Utils/Modifier/Stroke.lua b/src/Utils/Modifier/Stroke.lua deleted file mode 100644 index 2cfd2ac..0000000 --- a/src/Utils/Modifier/Stroke.lua +++ /dev/null @@ -1,34 +0,0 @@ -local OnyxUI = require(script.Parent.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) -local EnsureValue = require(OnyxUI.Utils.EnsureValue) -local Themer = require(OnyxUI.Utils.Themer) - -local New = Fusion.New - -type Props = { - Name: any?, - Parent: any?, - Enabled: any?, - Color: any?, - Thickness: any?, - Transparency: any?, - LineJoinMode: any?, - ApplyStrokeMode: any?, -} - -return function(Props: Props) - Props.Thickness = EnsureValue(Props.Thickness, "number", Themer.Theme.StrokeThickness["1"]) - Props.Color = EnsureValue(Props.Color, "Color3", Themer.Theme.Colors.Neutral.Main) - Props.ApplyStrokeMode = EnsureValue(Props.ApplyStrokeMode, "Enum.ApplyStrokeMode", Enum.ApplyStrokeMode.Border) - - return New "UIStroke" { - Name = Props.Name, - Parent = Props.Parent, - Enabled = Props.Enabled, - Color = Props.Color, - Thickness = Props.Thickness, - Transparency = Props.Transparency, - LineJoinMode = Props.LineJoinMode, - ApplyStrokeMode = Props.ApplyStrokeMode, - } -end diff --git a/src/Utils/Modifier/TableLayout.lua b/src/Utils/Modifier/TableLayout.lua deleted file mode 100644 index d93ba15..0000000 --- a/src/Utils/Modifier/TableLayout.lua +++ /dev/null @@ -1,43 +0,0 @@ -local OnyxUI = require(script.Parent.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) -local EnsureValue = require(OnyxUI.Utils.EnsureValue) -local Themer = require(OnyxUI.Utils.Themer) - -local New = Fusion.New -local Computed = Fusion.Computed - -type Props = { - Name: any?, - Parent: any?, - Padding: any?, - FillEmptySpaceColumns: any?, - FillEmptySpaceRows: any?, - FillDirection: any?, - SortOrder: any?, - MajorAxis: any?, - HorizontalAlignment: any?, - VerticalAlignment: any?, -} - -return function(Props: Props) - Props.Padding = EnsureValue( - Props.Padding, - "UDim", - Computed(function() - return UDim.new(0, Themer.Theme.Spacing["1"]:get()) - end) - ) - - return New "UITableLayout" { - Name = Props.Name, - Parent = Props.Parent, - Padding = Props.Padding, - FillEmptySpaceColumns = Props.FillEmptySpaceColumns, - FillEmptySpaceRows = Props.FillEmptySpaceRows, - FillDirection = Props.FillDirection, - SortOrder = Props.SortOrder, - MajorAxis = Props.MajorAxis, - HorizontalAlignment = Props.HorizontalAlignment, - VerticalAlignment = Props.VerticalAlignment, - } -end diff --git a/src/Utils/Modifier/TextSizeConstraint.lua b/src/Utils/Modifier/TextSizeConstraint.lua deleted file mode 100644 index 42a8d57..0000000 --- a/src/Utils/Modifier/TextSizeConstraint.lua +++ /dev/null @@ -1,20 +0,0 @@ -local OnyxUI = require(script.Parent.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) - -local New = Fusion.New - -type Props = { - Name: any?, - Parent: any?, - MaxTextSize: any?, - MinTextSize: any?, -} - -return function(Props: Props) - return New "UITextSizeConstraint" { - Name = Props.Name, - Parent = Props.Parent, - MaxTextSize = Props.MaxTextSize, - MinTextSize = Props.MinTextSize, - } -end diff --git a/src/Utils/Modifier/init.lua b/src/Utils/Modifier/init.lua deleted file mode 100644 index 70827f1..0000000 --- a/src/Utils/Modifier/init.lua +++ /dev/null @@ -1,17 +0,0 @@ -local Modifiers = { - Padding = require(script.Padding), - Corner = require(script.Corner), - Stroke = require(script.Stroke), - Scale = require(script.Scale), - AspectRatioConstraint = require(script.AspectRatioConstraint), - Gradient = require(script.Gradient), - SizeConstraint = require(script.SizeConstraint), - TextSizeConstraint = require(script.TextSizeConstraint), - ListLayout = require(script.ListLayout), - GridLayout = require(script.GridLayout), - PageLayout = require(script.PageLayout), - TableLayout = require(script.TableLayout), - FlexItem = require(script.FlexItem), -} - -return Modifiers diff --git a/src/Utils/PubTypes.lua b/src/Utils/PubTypes.lua new file mode 100644 index 0000000..18d419b --- /dev/null +++ b/src/Utils/PubTypes.lua @@ -0,0 +1,143 @@ +--!strict + +--[[ + Stores common public-facing type information for Fusion APIs. +]] + +type Set = { [T]: any } + +--[[ + General use types +]] + +-- A unique symbolic value. +export type Symbol = { + type: string, -- replace with "Symbol" when Luau supports singleton types + name: string, +} + +-- Types that can be expressed as vectors of numbers, and so can be animated. +export type Animatable = + number + | CFrame + | Color3 + | ColorSequenceKeypoint + | DateTime + | NumberRange + | NumberSequenceKeypoint + | PhysicalProperties + | Ray + | Rect + | Region3 + | Region3int16 + | UDim + | UDim2 + | Vector2 + | Vector2int16 + | Vector3 + | Vector3int16 + +-- A task which can be accepted for cleanup. +export type Task = + Instance + | RBXScriptConnection + | () -> () | { destroy: (any) -> () } | { Destroy: (any) -> () } | { Task } + +-- Script-readable version information. +export type Version = { + major: number, + minor: number, + isRelease: boolean, +} +--[[ + Generic reactive graph types +]] + +-- A graph object which can have dependents. +export type Dependency = { + dependentSet: Set, +} + +-- A graph object which can have dependencies. +export type Dependent = { + update: (Dependent) -> boolean, + dependencySet: Set, +} + +-- An object which stores a piece of reactive state. +export type StateObject = Dependency & { + type: string, -- replace with "State" when Luau supports singleton types + kind: string, + get: (StateObject, asDependency: boolean?) -> T, +} + +-- Either a constant value of type T, or a state object containing type T. +export type CanBeState = StateObject | T + +--[[ + Specific reactive graph types +]] + +-- A state object whose value can be set at any time by the user. +export type Value = StateObject & { + -- kind: "State" (add this when Luau supports singleton types) + set: (Value, newValue: any, force: boolean?) -> (), +} + +-- A state object whose value is derived from other objects using a callback. +export type Computed = StateObject & Dependent & { + -- kind: "Computed" (add this when Luau supports singleton types) +} + +-- A state object whose value is derived from other objects using a callback. +export type ForPairs = StateObject<{ [KO]: VO }> & Dependent & { + -- kind: "ForPairs" (add this when Luau supports singleton types) +} +-- A state object whose value is derived from other objects using a callback. +export type ForKeys = StateObject<{ [KO]: V }> & Dependent & { + -- kind: "ForKeys" (add this when Luau supports singleton types) +} +-- A state object whose value is derived from other objects using a callback. +export type ForValues = StateObject<{ [K]: VO }> & Dependent & { + -- kind: "ForKeys" (add this when Luau supports singleton types) +} + +-- A state object which follows another state object using tweens. +export type Tween = StateObject & Dependent & { + -- kind: "Tween" (add this when Luau supports singleton types) +} + +-- A state object which follows another state object using spring simulation. +export type Spring = StateObject & Dependent & { + -- kind: "Spring" (add this when Luau supports singleton types) + -- Uncomment when ENABLE_PARAM_SETTERS is enabled + -- setPosition: (Spring, newValue: Animatable) -> (), + -- setVelocity: (Spring, newValue: Animatable) -> (), + -- addVelocity: (Spring, deltaValue: Animatable) -> () +} + +-- An object which can listen for updates on another state object. +export type Observer = Dependent & { + -- kind: "Observer" (add this when Luau supports singleton types) + onChange: (Observer, callback: () -> ()) -> () -> (), +} + +--[[ + Instance related types +]] + +-- Denotes children instances in an instance or component's property table. +export type SpecialKey = { + type: string, -- replace with "SpecialKey" when Luau supports singleton types + kind: string, + stage: string, -- replace with "self" | "descendants" | "ancestor" | "observer" when Luau supports singleton types + apply: (SpecialKey, value: any, applyTo: Instance, cleanupTasks: { Task }) -> (), +} + +-- A collection of instances that may be parented to another instance. +export type Children = Instance | StateObject | { [any]: Children } + +-- A table that defines an instance's properties, handlers and children. +export type PropertyTable = { [string | SpecialKey]: any } + +return nil diff --git a/src/Utils/Themer/OnyxNight.lua b/src/Utils/Themer/OnyxNight.lua index 9d86800..c79ee8d 100644 --- a/src/Utils/Themer/OnyxNight.lua +++ b/src/Utils/Themer/OnyxNight.lua @@ -67,4 +67,5 @@ return { }, SpringDampening = 1, Sound = {}, + Emphasis = {}, } diff --git a/src/Utils/Themer/ThemeTemplate.lua b/src/Utils/Themer/ThemeTemplate.lua index beae048..4244d89 100644 --- a/src/Utils/Themer/ThemeTemplate.lua +++ b/src/Utils/Themer/ThemeTemplate.lua @@ -1,5 +1,5 @@ local OnyxUI = require(script.Parent.Parent.Parent) -local Fusion = require(OnyxUI.Packages.Fusion) +local Fusion = require(OnyxUI.Parent.Fusion) local Value = Fusion.Value local New = Fusion.New @@ -130,7 +130,7 @@ return { ["3"] = Value(nil), ["4"] = Value(nil), ["6"] = Value(nil), - Full = Value(9999), + Full = Value(nil), }, StrokeThickness = { Base = Value(2), @@ -155,7 +155,6 @@ return { Immediate = Value(1000), }, SpringDampening = Value(1), - Emphasis = Value(0.15), Sound = { Hover = Value(New "Sound" { SoundId = "rbxassetid://10066936758", @@ -174,4 +173,10 @@ return { Volume = 0.5, }), }, + Emphasis = { + Light = Value(0.15), + Regular = Value(0.3), + Strong = Value(0.5), + Contrast = Value(1), + }, } diff --git a/src/Utils/Themer/init.lua b/src/Utils/Themer/init.lua index 07b0f50..0f79677 100644 --- a/src/Utils/Themer/init.lua +++ b/src/Utils/Themer/init.lua @@ -1,9 +1,8 @@ -local OnyxUI = require(script.Parent.Parent) +local OnyxUI = script.Parent.Parent local ReconcileValues = require(script.Parent.Parent.Utils.ReconcileValues) local OnyxNightTheme = require(script.OnyxNight) local ThemeTemplate = require(script.ThemeTemplate) -local Loader = require(OnyxUI.Packages.Loader) -local ColorUtils = require(OnyxUI.Packages.ColorUtils) +local ColorUtils = require(OnyxUI.Parent.ColorUtils) local SPACING_MULTIPLIERS = { 0.25, @@ -66,9 +65,15 @@ local SPRING_SPEED_MULTIPLIERS = { local Themer = { Theme = table.clone(ThemeTemplate), - Themes = Loader.LoadChildren(script), + Themes = {}, } +function Themer:_LoadDefaultThemes() + for _, ThemeModule in ipairs(script:GetChildren()) do + self.Themes[ThemeModule.Name] = require(ThemeModule) + end +end + function Themer:_ProcessColors(Theme: { [any]: any }) if Theme.Colors then for ColorName, _ in pairs(Theme.Colors) do @@ -117,6 +122,10 @@ function Themer:_ProcessCornerRadii(Theme: { [any]: any }) Theme.CornerRadius[tostring(Multiplier)] = Theme.CornerRadius.Base * Multiplier end end + + if Theme.CornerRadius.Full == nil then + Theme.CornerRadius.Full = Theme.CornerRadius["1"] * 9999 + end end end @@ -158,7 +167,7 @@ function Themer:Set(Theme: { [any]: any }) ReconcileValues(self.Theme, Theme) end +Themer:_LoadDefaultThemes() Themer:Set(OnyxNightTheme) --- Themer:Set(Themer.Themes.BitCave) return Themer diff --git a/src/init.lua b/src/init.lua index f5ee28f..07d7c2d 100644 --- a/src/init.lua +++ b/src/init.lua @@ -1,6 +1 @@ -return { - Components = script.Components, - Examples = script.Examples, - Utils = script.Utils, - Packages = script.Parent, -} +return script \ No newline at end of file diff --git a/wally.toml b/wally.toml index 46005e2..7e2d843 100644 --- a/wally.toml +++ b/wally.toml @@ -1,7 +1,7 @@ [package] name = "imavafe/onyx-ui" description = "Quick, quality UI for Fusion" -version = "0.1.2" +version = "0.2.0" license = "MIT" authors = ["Avafe"] @@ -11,4 +11,3 @@ realm = "shared" [dependencies] ColorUtils = "csqrl/colour-utils@1.4.1" Fusion = "elttob/fusion@0.2.0" -Loader = "sleitnick/loader@2.0.0"