From 448b2c4a818d48b5026f80633c818290b243d43a Mon Sep 17 00:00:00 2001 From: Avafe <65048459+ImAvafe@users.noreply.github.com> Date: Tue, 3 Sep 2024 18:38:55 -0400 Subject: [PATCH] Adapt Base component for testing new theming capabilitise --- src/Components/Base.lua | 551 ++++++++++++++++++++-------------------- src/Test.story.lua | 24 ++ 2 files changed, 301 insertions(+), 274 deletions(-) create mode 100644 src/Test.story.lua diff --git a/src/Components/Base.lua b/src/Components/Base.lua index e1dda6e..aa76eb1 100644 --- a/src/Components/Base.lua +++ b/src/Components/Base.lua @@ -242,63 +242,66 @@ export type Props = { @field MinTextSize Fusion.UsedAs? ]=] return function(Scope: Fusion.Scope, Props: Props): Fusion.Child + local Theme: Themer.ThemeObject = Themer.Theme:now() + + Props.BackgroundColor3 = Theme.Colors.Base.Main Props.ClassName = Util.Fallback(Props.ClassName, "Frame") Props.Name = Util.Fallback(Props.Name, "Base") Props.CornerRadius = Util.Fallback(Props.CornerRadius, UDim.new(0, 0)) - Props.StrokeThickness = Util.Fallback(Props.StrokeThickness, Themer.Theme.StrokeThickness["1"]) - Props.StrokeColor = Util.Fallback(Props.StrokeColor, Themer.Theme.Colors.Neutral.Main) - Props.StrokeApplyStrokeMode = Util.Fallback(Props.StrokeApplyStrokeMode, Enum.ApplyStrokeMode.Border) - Props.Padding = Util.Fallback( - Props.Padding, - Scope:Computed(function(use) - return UDim.new(0, use(Themer.Theme.Spacing["1"])) - end) - ) - Props.PaddingBottom = Util.Fallback(Props.PaddingBottom, Props.Padding) - Props.PaddingLeft = Util.Fallback(Props.PaddingLeft, Props.Padding) - Props.PaddingRight = Util.Fallback(Props.PaddingRight, Props.Padding) - Props.PaddingTop = Util.Fallback(Props.PaddingTop, Props.Padding) - Props.ListPadding = Util.Fallback( - Props.ListPadding, - Scope:Computed(function() - return UDim.new(0, Themer.Theme.Spacing["1"]:get()) - end) - ) - Props.ListSortOrder = Util.Fallback(Props.ListSortOrder, Enum.SortOrder.LayoutOrder) - Props.GridCellPadding = Util.Fallback( - Props.GridCellPadding, - Scope:Computed(function() - return UDim2.fromOffset(Themer.Theme.Spacing["0.5"]:get(), Themer.Theme.Spacing["0.5"]:get()) - end) - ) - Props.GridSortOrder = Util.Fallback(Props.GridSortOrder, Enum.SortOrder.LayoutOrder) - Props.PagePadding = Util.Fallback( - Props.PagePadding, - Scope:Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) - end) - ) - Props.PageSortOrder = Util.Fallback(Props.PageSortOrder, Enum.SortOrder.LayoutOrder) - Props.TablePadding = Util.Fallback( - Props.TablePadding, - Scope:Computed(function() - return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) - end) - ) - Props.TableSortOrder = Util.Fallback(Props.TableSortOrder, Enum.SortOrder.LayoutOrder) + Props.StrokeThickness = Util.Fallback(Props.StrokeThickness, Theme.StrokeThickness["1"]) + -- Props.StrokeColor = Util.Fallback(Props.StrokeColor, Themer.Theme.Colors.Neutral.Main) + -- Props.StrokeApplyStrokeMode = Util.Fallback(Props.StrokeApplyStrokeMode, Enum.ApplyStrokeMode.Border) + -- Props.Padding = Util.Fallback( + -- Props.Padding, + -- Scope:Computed(function(use) + -- return UDim.new(0, use(Themer.Theme.Spacing["1"])) + -- end) + -- ) + -- Props.PaddingBottom = Util.Fallback(Props.PaddingBottom, Props.Padding) + -- Props.PaddingLeft = Util.Fallback(Props.PaddingLeft, Props.Padding) + -- Props.PaddingRight = Util.Fallback(Props.PaddingRight, Props.Padding) + -- Props.PaddingTop = Util.Fallback(Props.PaddingTop, Props.Padding) + -- Props.ListPadding = Util.Fallback( + -- Props.ListPadding, + -- Scope:Computed(function() + -- return UDim.new(0, Themer.Theme.Spacing["1"]:get()) + -- end) + -- ) + -- Props.ListSortOrder = Util.Fallback(Props.ListSortOrder, Enum.SortOrder.LayoutOrder) + -- Props.GridCellPadding = Util.Fallback( + -- Props.GridCellPadding, + -- Scope:Computed(function() + -- return UDim2.fromOffset(Themer.Theme.Spacing["0.5"]:get(), Themer.Theme.Spacing["0.5"]:get()) + -- end) + -- ) + -- Props.GridSortOrder = Util.Fallback(Props.GridSortOrder, Enum.SortOrder.LayoutOrder) + -- Props.PagePadding = Util.Fallback( + -- Props.PagePadding, + -- Scope:Computed(function() + -- return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) + -- end) + -- ) + -- Props.PageSortOrder = Util.Fallback(Props.PageSortOrder, Enum.SortOrder.LayoutOrder) + -- Props.TablePadding = Util.Fallback( + -- Props.TablePadding, + -- Scope:Computed(function() + -- return UDim.new(0, Themer.Theme.Spacing["0.5"]:get()) + -- end) + -- ) + -- Props.TableSortOrder = Util.Fallback(Props.TableSortOrder, Enum.SortOrder.LayoutOrder) - local PaddingInEffect = Scope:Computed(function() - local Paddings = { Props.Padding, Props.PaddingTop, Props.PaddingLeft, Props.PaddingRight, Props.PaddingBottom } + -- local PaddingInEffect = Scope:Computed(function() + -- local Paddings = { Props.Padding, Props.PaddingTop, Props.PaddingLeft, Props.PaddingRight, Props.PaddingBottom } - for _, PaddingProp in pairs(Paddings) do - local PaddingValue = Util.GetValue(PaddingProp) - if typeof(PaddingValue) == "UDim" then - return true - end - end + -- for _, PaddingProp in pairs(Paddings) do + -- local PaddingValue = Util.GetValue(PaddingProp) + -- if typeof(PaddingValue) == "UDim" then + -- return true + -- end + -- end - return false - end) + -- return false + -- end) return Scope:New(Props.ClassName) { Name = Props.Name, @@ -333,229 +336,229 @@ return function(Scope: Fusion.Scope, Props: Props): Fusion.Child SelectionBehaviorLeft = Props.SelectionBehaviorLeft, SelectionGroup = Props.SelectionGroup, - [Children] = { - Props[Children], + -- [Children] = { + -- Props[Children], - Scope: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), - Scope:Computed(function() - if PaddingInEffect:get() == true then - return Scope:New "UIPadding" { - PaddingTop = Scope: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 Util.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 Util.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 Util.GetValue(PaddingValue) - else - return UDim.new() - end - end), - } - else - return - end - end, Fusion.cleanup), - Computed(function() - local ScaleValue = Util.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 Util.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 Util.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 = Util.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(Util.GetValue(Props.MaxTextSize)) == "number") - or (typeof(Util.GetValue(Props.MinTextSize)) == "number") - then - return New "UITextSizeConstraint" { - MaxTextSize = Props.MaxTextSize, - MinTextSize = Props.MinTextSize, - } - else - return - end - end, Fusion.cleanup), - Computed(function() - if Util.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 Util.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 Util.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 Util.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 = Util.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), - }, + -- Scope: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), + -- Scope:Computed(function() + -- if PaddingInEffect:get() == true then + -- return Scope:New "UIPadding" { + -- PaddingTop = Scope: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 Util.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 Util.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 Util.GetValue(PaddingValue) + -- else + -- return UDim.new() + -- end + -- end), + -- } + -- else + -- return + -- end + -- end, Fusion.cleanup), + -- Computed(function() + -- local ScaleValue = Util.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 Util.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 Util.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 = Util.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(Util.GetValue(Props.MaxTextSize)) == "number") + -- or (typeof(Util.GetValue(Props.MinTextSize)) == "number") + -- then + -- return New "UITextSizeConstraint" { + -- MaxTextSize = Props.MaxTextSize, + -- MinTextSize = Props.MinTextSize, + -- } + -- else + -- return + -- end + -- end, Fusion.cleanup), + -- Computed(function() + -- if Util.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 Util.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 Util.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 Util.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 = Util.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/Test.story.lua b/src/Test.story.lua new file mode 100644 index 0000000..1a068a3 --- /dev/null +++ b/src/Test.story.lua @@ -0,0 +1,24 @@ +local OnyxUI = script.Parent +local Fusion = require(OnyxUI.Packages.Fusion) +local Themer = require(OnyxUI.Themer) + +local Base = require(OnyxUI.Components.Base) + +return function(Parent: GuiObject) + local Scope = Fusion.scoped(Fusion) + + local Object + Themer.Theme + :is(Themer.NewTheme(Scope, { Colors = { Base = { Main = Color3.fromRGB(255, 0, 0) } } })) + :during(function() + Object = Base(Scope, { + Parent = Parent, + Size = UDim2.fromOffset(100, 100), + }) + end) + + return function() + Object:Destroy() + Scope:doCleanup() + end +end