Skip to content

Commit

Permalink
Merge pull request #1 from ImAvafe/dev
Browse files Browse the repository at this point in the history
Merge Dev for 0.2.0
  • Loading branch information
ImAvafe authored Jun 12, 2024
2 parents 53ce9e6 + 5bf8d45 commit d470b9b
Show file tree
Hide file tree
Showing 68 changed files with 2,150 additions and 2,070 deletions.
10 changes: 2 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 ✨

Expand All @@ -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.

##

Expand Down
69 changes: 27 additions & 42 deletions src/Components/AutoScaleFrame.lua
Original file line number Diff line number Diff line change
@@ -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<Vector2>?,
MinScale: PubTypes.CanBeState<number>?,
MaxScale: PubTypes.CanBeState<number>?,
ScaleMultiplier: PubTypes.CanBeState<number>?,
}

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
139 changes: 64 additions & 75 deletions src/Components/Avatar.lua
Original file line number Diff line number Diff line change
@@ -1,103 +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 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<string>?,
RingEnabled: PubTypes.CanBeState<boolean>?,
RingColor: PubTypes.CanBeState<Color3>?,
RingThickness: PubTypes.CanBeState<number>?,
IndicatorEnabled: PubTypes.CanBeState<boolean>?,
IndicatorColor: PubTypes.CanBeState<Color3>?,
IndicatorIcon: PubTypes.CanBeState<string>?,
IndicatorIconColor: PubTypes.CanBeState<Color3>?,
IndicatorCornerRadius: PubTypes.CanBeState<UDim>?,
}

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,
Size = UDim2.fromScale(0.25, 0.25),
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
Expand All @@ -109,10 +98,10 @@ return function(Props: { [any]: any })
},
},
}
else
return
end
end, Fusion.cleanup),

Props[Children],
},
}
}))
end
51 changes: 30 additions & 21 deletions src/Components/Avatar.story.lua
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
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)

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"] }

Expand All @@ -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),
},
Expand Down
Loading

0 comments on commit d470b9b

Please sign in to comment.