+): ComponentBuilder
+ return ComponentBuilder.new(function(props: P & NP)
+ local rbxProps, rbxChildren = self.transformer(props)
+ local rbxProps2, rbxChildren2 = transformer(props)
+
+ return Utils.Assign(rbxProps, rbxProps2), Utils.Assign(rbxChildren, rbxChildren2)
+ end)
+end
+
+function ComponentBuilder.build(
+ self: ComponentBuilder,
+ robloxComponent: string
+): (P, React.Ref) -> React.ReactNode
+ return React.forwardRef(
+ function(props: React.ElementProps & P, ref: React.Ref)
+ local outputProps, outputChildren = self.transformer(props)
+
+ outputProps.ref = ref
+
+ for k, v in pairs(props) do
+ -- 99.98% sure, that this is some special ahh key
+ if typeof(k) == "table" then
+ outputProps[k] = v
+ end
+ end
+
+ return React.createElement(
+ robloxComponent,
+ outputProps,
+ outputChildren,
+ props.children
+ )
+ end
+ ) :: any
+end
+return ComponentBuilder
diff --git a/src/Builders/GuiObjectBuilder.luau b/src/Builders/GuiObjectBuilder.luau
new file mode 100644
index 0000000..65bcd79
--- /dev/null
+++ b/src/Builders/GuiObjectBuilder.luau
@@ -0,0 +1,65 @@
+local React = require("@pkg/react")
+local Builder = require("@root/Builder")
+
+local Utils = require("@root/Utils")
+local Typings = require("@root/Typings")
+
+local ListLayout = require("@root/Helpers/ListLayout")
+
+return Builder.new(function(props: Typings.GuiObjectProps)
+ return {
+ Active = props.Active,
+
+ AnchorPoint = props.AnchorPoint and Utils.ConvertAnchorPoint(props.AnchorPoint),
+ AutomaticSize = props.AutomaticSize,
+
+ BackgroundColor3 = props.BackgroundColor and Utils.ConvertColor(props.BackgroundColor),
+ BackgroundTransparency = props.NoBackground and 1 or props.BackgroundTransparency,
+
+ BorderSizePixel = 0, -- we are using `UIStroke` instead.
+
+ ClipsDescendants = props.ClipsDescendants,
+ Interactable = props.Interactable,
+
+ LayoutOrder = props.LayoutOrder,
+
+ Position = props.Position,
+ Rotation = props.Rotation,
+
+ Selectable = props.Selectable,
+
+ Size = props.Size,
+ SizeConstraint = props.SizeConstraint,
+
+ Transparency = props.Transparency,
+ Visible = props.Visible,
+
+ ZIndex = props.ZIndex,
+ }, {
+ BRCBorder = props.Border and React.createElement("UIStroke", {
+ Color = props.Border.Color and Utils.ConvertColor(props.Border.Color),
+ Thickness = props.Border.Thickness,
+ LineJoinMode = props.Border.LineJoinMode,
+ Transparency = props.Border.Transparency,
+ }),
+ BRCCorner = props.CornerRadius and React.createElement("UICorner", {
+ CornerRadius = Utils.ConvertUDim(props.CornerRadius),
+ }),
+ BRCAspectRatio = props.Aspect and React.createElement("UIAspectRatioConstraint", {
+ AspectRatio = props.Aspect.Ratio,
+ AspectType = props.Aspect.Type,
+ DominantAxis = props.Aspect.DominantAxis,
+ }),
+ BRCPadding = props.Padding
+ and React.createElement("UIPadding", Utils.ConvertPadding(props.Padding):getValue()),
+
+ BRCSizeConstraint = (props.MinSize ~= nil or props.MaxSize ~= nil)
+ and React.createElement("UISizeConstraint", {
+ MinSize = props.MinSize,
+ MaxSize = props.MaxSize,
+ }),
+ BRCListLayout = props.ListLayout and React.createElement(ListLayout, props.ListLayout),
+ BRCFlexItem = props.FlexMode
+ and React.createElement("UIFlexItem", { FlexMode = props.FlexMode }),
+ }
+end)
diff --git a/src/Builders/TextBoxBuilder.luau b/src/Builders/TextBoxBuilder.luau
new file mode 100644
index 0000000..49289d3
--- /dev/null
+++ b/src/Builders/TextBoxBuilder.luau
@@ -0,0 +1,17 @@
+local Typings = require("@root/Typings")
+local Utils = require("@root/Utils")
+
+local TextBuilder = require("./TextBuilder")
+
+return TextBuilder:expand(function(props: Typings.TextBoxProps)
+ return {
+ ClearTextOnFocus = props.ClearTextOnFocus,
+ CursorPosition = props.CursorPosition,
+ MultiLine = props.MultiLine,
+ PlaceholderColor3 = props.PlaceholderColor and Utils.ConvertColor(props.PlaceholderColor),
+ PlaceholderText = props.PlaceholderText,
+ SelectionStart = props.SelectionStart,
+ ShowNativeInput = props.ShowNativeInput,
+ TextEditable = props.TextEditable,
+ }, {}
+end)
diff --git a/src/Builders/TextBuilder.luau b/src/Builders/TextBuilder.luau
new file mode 100644
index 0000000..db4f2bb
--- /dev/null
+++ b/src/Builders/TextBuilder.luau
@@ -0,0 +1,38 @@
+local React = require("@pkg/react")
+
+local Utils = require("@root/Utils")
+local Typings = require("@root/Typings")
+
+local GuiObjectBuilder = require("./GuiObjectBuilder")
+
+--- Builder for text-based objects (`TextLabel`, `TextButton`, etc.)
+return GuiObjectBuilder:expand(function(props: Typings.TextProps)
+ return {
+ FontFace = props.Font and Utils.ConvertFont(props.Font),
+ LineHeight = props.LineHeight,
+
+ MaxVisibleGraphemes = props.MaxVisibleGraphemes,
+
+ RichText = props.RichText,
+ Text = props.Text,
+
+ TextColor3 = props.TextColor and Utils.ConvertColor(props.TextColor),
+ TextDirection = props.TextDirection,
+ TextFits = props.TextFits,
+ TextTransparency = props.TextTransparency,
+ TextTruncate = props.TextTruncate,
+ TextWrapped = props.TextWrapped,
+
+ TextXAlignment = props.TextXAlignment,
+ TextYAlignment = props.TextYAlignment,
+
+ TextSize = props.TextSize == "auto" and 1 or props.TextSize,
+ TextScaled = props.TextSize == "auto",
+ }, {
+ BRCTextSizeConstraint = (props.MinTextSize ~= nil or props.MaxTextSize ~= nil)
+ and React.createElement("UITextSizeConstraint", {
+ MinTextSize = props.MinTextSize,
+ MaxTextSize = props.MaxTextSize,
+ }),
+ }
+end)
diff --git a/src/Builders/TextButtonBuilder.luau b/src/Builders/TextButtonBuilder.luau
new file mode 100644
index 0000000..321b4bc
--- /dev/null
+++ b/src/Builders/TextButtonBuilder.luau
@@ -0,0 +1,14 @@
+local Typings = require("@root/Typings")
+
+local TextLabelBuilder = require("./TextBuilder")
+
+return TextLabelBuilder:expand(function(props: Typings.TextButtonProps)
+ return {
+ AutoButtonColor = props.AutoButtonColor,
+ HoverHapticEffect = props.HoverHapticEffect,
+ PressHapticEffect = props.PressHapticEffect,
+ Modal = props.Modal,
+ Selected = props.Selected,
+ Style = props.Style,
+ }, {}
+end)
diff --git a/src/Builders/init.luau b/src/Builders/init.luau
new file mode 100644
index 0000000..f5cda9e
--- /dev/null
+++ b/src/Builders/init.luau
@@ -0,0 +1,6 @@
+return {
+ GuiObjectBuilder = require(script.GuiObjectBuilder),
+ TextBuilder = require(script.TextBuilder),
+ TextBoxBuilder = require(script.TextBoxBuilder),
+ TextButtonBuilder = require(script.TextButtonBuilder),
+}
diff --git a/src/Components/Frame.luau b/src/Components/Frame.luau
new file mode 100644
index 0000000..f209985
--- /dev/null
+++ b/src/Components/Frame.luau
@@ -0,0 +1,3 @@
+local GuiObjectBuilder = require("@root/Builders/GuiObjectBuilder")
+
+return GuiObjectBuilder:build("Frame")
diff --git a/src/Components/ScreenGui.luau b/src/Components/ScreenGui.luau
new file mode 100644
index 0000000..479da28
--- /dev/null
+++ b/src/Components/ScreenGui.luau
@@ -0,0 +1,13 @@
+local Builder = require("@root/Builder")
+local Typings = require("@root/Typings")
+
+return Builder.new(function(props: Typings.ScreenGuiProps)
+ return {
+ Enabled = props.Enabled,
+ ResetOnSpawn = props.ResetOnSpawn,
+ ZIndexBehavior = props.ZIndexBehavior,
+
+ ScreenInsets = props.ScreenInsets,
+ DisplayOrder = props.DisplayOrder,
+ }, {}
+end):build("ScreenGui")
diff --git a/src/Components/ScrollingFrame.luau b/src/Components/ScrollingFrame.luau
new file mode 100644
index 0000000..8751656
--- /dev/null
+++ b/src/Components/ScrollingFrame.luau
@@ -0,0 +1,28 @@
+local GuiObjectBuilder = require("@root/Builders/GuiObjectBuilder")
+
+local Utils = require("@root/Utils")
+local Typings = require("@root/Typings")
+
+return GuiObjectBuilder:expand(function(props: Typings.ScrollingFrameProps)
+ return {
+ AutomaticCanvasSize = props.AutomaticCanvasSize,
+ CanvasPosition = props.CanvasPosition,
+ CanvasSize = props.CanvasSize,
+
+ ScrollingDirection = props.ScrollingDirection,
+ ScrollingEnabled = props.ScrollingEnabled,
+
+ TopImage = props.ScrollBar and props.ScrollBar.TopImage,
+ MidImage = props.ScrollBar and props.ScrollBar.MidImage,
+ BottomImage = props.ScrollBar and props.ScrollBar.BottomImage,
+
+ ScrollBarImageColor3 = (props.ScrollBar and props.ScrollBar.Color)
+ and Utils.ConvertColor(props.ScrollBar.Color),
+ ScrollBarImageTransparency = props.ScrollBar and props.ScrollBar.Transparency,
+ ScrollBarThickness = props.ScrollBar and props.ScrollBar.Thickness,
+
+ HorizontalScrollBarInset = props.ScrollBar and props.ScrollBar.HorizontalInset,
+ VerticalScrollBarInset = props.ScrollBar and props.ScrollBar.VerticalInset,
+ VerticalScrollBarPosition = props.ScrollBar and props.ScrollBar.VerticalPosition,
+ }, {}
+end):build("ScrollingFrame")
diff --git a/src/Components/TextBox.luau b/src/Components/TextBox.luau
new file mode 100644
index 0000000..6531c20
--- /dev/null
+++ b/src/Components/TextBox.luau
@@ -0,0 +1,3 @@
+local TextBuilder = require("@root/Builders/TextBuilder")
+
+return TextBuilder:build("TextBox")
diff --git a/src/Components/TextButton.luau b/src/Components/TextButton.luau
new file mode 100644
index 0000000..a479a02
--- /dev/null
+++ b/src/Components/TextButton.luau
@@ -0,0 +1,3 @@
+local TextButtonBuilder = require("@root/Builders/TextButtonBuilder")
+
+return TextButtonBuilder:build("TextButton")
diff --git a/src/Components/TextLabel.luau b/src/Components/TextLabel.luau
new file mode 100644
index 0000000..c313b13
--- /dev/null
+++ b/src/Components/TextLabel.luau
@@ -0,0 +1,3 @@
+local TextBuilder = require("@root/Builders/TextBuilder")
+
+return TextBuilder:build("TextLabel")
diff --git a/src/Components/init.luau b/src/Components/init.luau
new file mode 100644
index 0000000..9aaa35f
--- /dev/null
+++ b/src/Components/init.luau
@@ -0,0 +1,8 @@
+return {
+ ScreenGui = require(script.ScreenGui),
+ Frame = require(script.Frame),
+ ScrollingFrame = require(script.ScrollingFrame),
+ TextButton = require(script.TextButton),
+ TextLabel = require(script.TextLabel),
+ TextBox = require(script.TextBox),
+}
diff --git a/src/Helpers/ListLayout.luau b/src/Helpers/ListLayout.luau
new file mode 100644
index 0000000..55c01ec
--- /dev/null
+++ b/src/Helpers/ListLayout.luau
@@ -0,0 +1,32 @@
+local React = require("@pkg/react")
+
+local Utils = require("@root/Utils")
+local Typings = require("@root/Typings")
+
+return function(props: Typings.ListLayoutSettings)
+ local rbxProps = React.useMemo(function()
+ local MainAxis = props.Direction or Enum.FillDirection.Vertical
+ local CrossAxis = if MainAxis == Enum.FillDirection.Horizontal
+ then Enum.FillDirection.Vertical
+ else Enum.FillDirection.Horizontal
+
+ local MainAxisResult = if props.JustifyContent ~= nil
+ then Utils.ConvertFlexValue(MainAxis, props.JustifyContent)
+ else {}
+ local CrossAxisResult = if props.AlignItems ~= nil
+ then Utils.ConvertFlexValue(CrossAxis, props.AlignItems)
+ else {}
+
+ local result = {
+ Padding = props.Gap and Utils.ConvertUDim(props.Gap),
+
+ FillDirection = MainAxis,
+ SortOrder = props.Order,
+ Wraps = props.Wraps,
+ }
+
+ return Utils.MergeMulti(result, MainAxisResult, CrossAxisResult)
+ end, { props })
+
+ return React.createElement("UIListLayout", rbxProps)
+end
diff --git a/src/Stories/Components/Frame.story.luau b/src/Stories/Components/Frame.story.luau
new file mode 100644
index 0000000..6c4787c
--- /dev/null
+++ b/src/Stories/Components/Frame.story.luau
@@ -0,0 +1,34 @@
+local React = require("@pkg/react")
+local ReactRoblox = require("@pkg/react-roblox")
+local UILabs = require("@dev-pkg/ui-labs")
+
+local BRC = require("@root/init")
+
+local story = {
+ react = React,
+ reactRoblox = ReactRoblox,
+ controls = {
+ AnchorPoint = UILabs.EnumList({
+ TopLeft = "tl",
+ TopCenter = "t",
+ TopRight = "tr",
+ MiddleLeft = "ml",
+ MiddleCenter = "m",
+ MiddleRight = "mr",
+ BottomLeft = "bl",
+ BottomCenter = "b",
+ BottomRight = "br",
+ }, "MiddleCenter"),
+ BackgroundColor = Color3.fromHex("#FF0000"),
+ },
+ story = function(props)
+ return React.createElement(BRC.Frame, {
+ AnchorPoint = props.controls.AnchorPoint,
+ Position = UDim2.new(0.5, 0, 0.5, 0),
+ Size = UDim2.new(0.5, 0, 0.5, 0),
+ BackgroundColor = props.controls.BackgroundColor,
+ })
+ end,
+}
+
+return story
diff --git a/src/Stories/Components/ScrollingFrame.story.luau b/src/Stories/Components/ScrollingFrame.story.luau
new file mode 100644
index 0000000..42b800c
--- /dev/null
+++ b/src/Stories/Components/ScrollingFrame.story.luau
@@ -0,0 +1,24 @@
+local React = require("@pkg/react")
+local ReactRoblox = require("@pkg/react-roblox")
+local UILabs = require("@dev-pkg/ui-labs")
+
+local BRC = require("@root/init")
+
+return {
+ react = React,
+ reactRoblox = ReactRoblox,
+ controls = {},
+ story = function(props)
+ -- TODO: complete this story
+ return React.createElement(BRC.ScrollingFrame, {
+ AnchorPoint = "m",
+ Position = UDim2.new(0.5, 0, 0.5, 0),
+ Size = UDim2.new(0.5, 0, 0.5, 0),
+
+ BackgroundColor = "#C00000",
+ CanvasSize = UDim2.new(1, 0, 2, 0),
+ }, {
+ React.createElement("Frame", { Size = UDim2.new(0, 100, 0, 100) }),
+ })
+ end,
+}
diff --git a/src/Stories/Components/TextButton.story.luau b/src/Stories/Components/TextButton.story.luau
new file mode 100644
index 0000000..6ad4a13
--- /dev/null
+++ b/src/Stories/Components/TextButton.story.luau
@@ -0,0 +1,36 @@
+local React = require("@pkg/react")
+local ReactRoblox = require("@pkg/react-roblox")
+local UILabs = require("@dev-pkg/ui-labs")
+
+local BRC = require("@root/init")
+
+local function TextButtonStory(props)
+ local count, setCount = React.useState(0)
+
+ return React.createElement(BRC.TextButton, {
+ AnchorPoint = "m",
+ Position = UDim2.new(0.5, 0, 0.5, 0),
+ Size = UDim2.new(0.5, 0, 0.5, 0),
+ BackgroundColor = "#080808",
+
+ TextColor = "#FFF",
+ TextSize = 18,
+ Text = ("This button was clicked %d times. How cool is that???"):format(count),
+ TextWrapped = true,
+
+ [React.Event.Activated] = function()
+ setCount(function(oldCount)
+ return oldCount + 1
+ end)
+ end,
+ })
+end
+
+return {
+ react = React,
+ reactRoblox = ReactRoblox,
+ controls = {},
+ story = function(props)
+ return React.createElement(TextButtonStory, props)
+ end,
+}
diff --git a/src/Stories/Components/TextLabel.story.luau b/src/Stories/Components/TextLabel.story.luau
new file mode 100644
index 0000000..37cadfe
--- /dev/null
+++ b/src/Stories/Components/TextLabel.story.luau
@@ -0,0 +1,37 @@
+local React = require("@pkg/react")
+local ReactRoblox = require("@pkg/react-roblox")
+local UILabs = require("@dev-pkg/ui-labs")
+
+local BRC = require("@root/init")
+
+local Fonts = {}
+for _, font in pairs(Enum.Font:GetEnumItems()) do
+ Fonts[tostring(font):gsub("Enum.Font.", "")] = font
+end
+
+print(Fonts)
+
+return {
+ react = React,
+ reactRoblox = ReactRoblox,
+ controls = {
+ Text = "Hello, world!",
+ Font = UILabs.EnumList(Fonts, "Arimo"),
+ TextColor = Color3.fromHex("#FFFFFF"),
+ BackgroundColor = Color3.fromHex("#CC0000"),
+ CornerRadius = 0,
+ },
+ story = function(props)
+ return React.createElement(BRC.TextLabel, {
+ AnchorPoint = "m",
+ Position = UDim2.new(0.5, 0, 0.5, 0),
+ Size = UDim2.new(0.5, 0, 0.5, 0),
+ BackgroundColor = props.controls.BackgroundColor,
+
+ Font = Font.fromEnum(props.controls.Font),
+ TextColor = props.controls.TextColor,
+ TextSize = 24,
+ Text = props.controls.Text,
+ })
+ end,
+}
diff --git a/src/Stories/Examples/Todos.story.luau b/src/Stories/Examples/Todos.story.luau
new file mode 100644
index 0000000..eb5c55b
--- /dev/null
+++ b/src/Stories/Examples/Todos.story.luau
@@ -0,0 +1,163 @@
+local React = require("@pkg/react")
+local ReactRoblox = require("@pkg/react-roblox")
+local Collections = require("@pkg/collections")
+
+local UILabs = require("@dev-pkg/ui-labs")
+
+local BRC = require("@root/")
+
+type Todo = { text: string, completed: boolean }
+
+local function MenuStory(props)
+ local todos, setTodos = React.useState({} :: { Todo })
+ local input, setInput = React.useBinding("")
+
+ return React.createElement(BRC.Frame, {
+ -- PRO TIP: use this utillity to calcalate aspect ratio for component:
+ -- > ref = BRC.Utils.CalculateAspectRatio,
+ AnchorPoint = "m",
+ Size = UDim2.new(0.5, 0, 0.8, 0),
+ Position = UDim2.new(0.5, 0, 0.5, 0),
+ Aspect = { Ratio = 1.6 },
+
+ BackgroundColor = "#FFF",
+ BackgroundTransparency = 0.3,
+
+ CornerRadius = 8 + 8, -- inner corner + padding
+ Padding = 8,
+
+ ListLayout = {
+ Gap = 8,
+ Order = Enum.SortOrder.LayoutOrder,
+ },
+ }, {
+ Header = React.createElement(BRC.Frame, {
+ LayoutOrder = 1,
+
+ Size = UDim2.new(1, 0, 0, 48),
+ NoBackground = true,
+
+ ListLayout = {
+ Gap = 8,
+ Direction = Enum.FillDirection.Horizontal,
+ Order = Enum.SortOrder.LayoutOrder,
+ },
+ }, {
+ TodoText = React.createElement(BRC.TextBox, {
+ LayoutOrder = 1,
+
+ Size = UDim2.new(0, 0, 1, 0),
+ FlexMode = Enum.UIFlexMode.Fill,
+
+ CornerRadius = 8,
+
+ Text = input,
+ [React.Change.Text] = function(inst)
+ setInput(inst.Text)
+ end,
+ }),
+ CreateTodo = React.createElement(BRC.TextButton, {
+ LayoutOrder = 2,
+ Size = UDim2.new(0.2, 0, 1, 0),
+
+ CornerRadius = 8,
+
+ BackgroundColor = "#00a63e",
+ TextColor = "#FFFFFF",
+
+ Text = "Add",
+
+ [React.Event.Activated] = function()
+ setTodos(function(todos)
+ local text = input:getValue()
+ setInput("")
+
+ return BRC.Utils.MergeMulti(
+ todos,
+ { [#todos + 1] = { text = text, completed = false } }
+ )
+ end)
+ end,
+ }),
+ }),
+
+ Content = React.createElement(
+ BRC.ScrollingFrame,
+ {
+ LayoutOrder = 2,
+
+ NoBackground = true,
+
+ Padding = { 6, 18, 6, 0 },
+ Size = UDim2.new(1, 0, 1, 0),
+ FlexMode = Enum.UIFlexMode.Fill,
+
+ ListLayout = {
+ Gap = 8,
+ Direction = Enum.FillDirection.Vertical,
+ Order = Enum.SortOrder.LayoutOrder,
+ },
+ },
+
+ Collections.Array.map(todos, function(todo: Todo, index: number)
+ return React.createElement(BRC.Frame, {
+ LayoutOrder = 10 + index,
+ Size = UDim2.new(1, 0, 0, 42),
+
+ CornerRadius = 8,
+ Padding = 4,
+
+ ListLayout = {
+ Gap = 8,
+ Direction = Enum.FillDirection.Horizontal,
+ Order = Enum.SortOrder.LayoutOrder,
+ AlignItems = "center",
+ },
+ }, {
+ React.createElement(BRC.TextLabel, {
+ LayoutOrder = 1,
+
+ Size = UDim2.new(1, 0, 1, 0),
+ FlexMode = Enum.UIFlexMode.Fill,
+ NoBackground = true,
+
+ Padding = { 0, 8 },
+
+ TextXAlignment = Enum.TextXAlignment.Left,
+ Text = todo.text,
+ }),
+ React.createElement(BRC.TextButton, {
+ LayoutOrder = 2,
+
+ AnchorPoint = "mr",
+ Size = UDim2.new(0.1, 0, 1, 0),
+ Aspect = { Ratio = 1 },
+
+ CornerRadius = 4,
+
+ BackgroundColor = todo.completed and "#DC2626" or "#00A63E",
+ TextColor = "#FFF",
+ Text = todo.completed and "X" or "√",
+
+ [React.Event.Activated] = function()
+ setTodos(function(todos)
+ return BRC.Utils.MergeMulti(todos, {
+ [index] = { completed = not todos[index].completed },
+ })
+ end)
+ end,
+ }),
+ })
+ end)
+ ),
+ })
+end
+
+return {
+ react = React,
+ reactRoblox = ReactRoblox,
+ controls = {},
+ story = function(props)
+ return React.createElement(MenuStory, props)
+ end,
+}
diff --git a/src/Stories/Layouts/FlexItem.story.luau b/src/Stories/Layouts/FlexItem.story.luau
new file mode 100644
index 0000000..0cc6947
--- /dev/null
+++ b/src/Stories/Layouts/FlexItem.story.luau
@@ -0,0 +1,57 @@
+local React = require("@pkg/react")
+local ReactRoblox = require("@pkg/react-roblox")
+local UILabs = require("@dev-pkg/ui-labs")
+
+local BRC = require("@root/init")
+
+local FlexAlignmentValues = {
+ Start = "start",
+ End = "end",
+ Center = "center",
+ SpaceBetween = "space-between",
+ SpaceAround = "space-around",
+ SpaceEvenly = "space-evenly",
+ Stretch = "stretch",
+}
+
+return {
+ react = React,
+ reactRoblox = ReactRoblox,
+ controls = {
+ ParentSizePercent = UILabs.Slider(70, 0, 100, 1),
+ },
+ story = function(props)
+ return React.createElement(BRC.Frame, {
+ AnchorPoint = "m",
+ Position = UDim2.new(0.5, 0, 0.5, 0),
+ Size = UDim2.new(props.controls.ParentSizePercent / 100, 0, 0.25, 0),
+ BackgroundColor = "#FFF",
+
+ Padding = props.controls.Gap,
+ ListLayout = {
+ Gap = props.controls.Gap,
+ Direction = Enum.FillDirection.Horizontal,
+ },
+ }, {
+ React.createElement(BRC.TextLabel, {
+ Size = UDim2.new(0.5, 0, 1, 0),
+ BackgroundColor = "#E80000",
+ Text = "This component has SizeX = {0.5, 0} (NOTE: Scale units), FlexMode = Fill",
+ TextWrapped = true,
+
+ TextSize = 10,
+
+ FlexMode = Enum.UIFlexMode.Fill,
+ }),
+ React.createElement(BRC.TextLabel, {
+ Size = UDim2.new(0, 300, 1, 0),
+ BackgroundColor = "#080808",
+ TextColor = "#FFFFFF",
+
+ Text = "But this component has SizeX = {0, 300} (NOTE: Offset units). Without FlexMode, this would be painful to recreate",
+ TextWrapped = true,
+ TextSize = 10,
+ }),
+ })
+ end,
+}
diff --git a/src/Stories/Layouts/List.story.luau b/src/Stories/Layouts/List.story.luau
new file mode 100644
index 0000000..20dee48
--- /dev/null
+++ b/src/Stories/Layouts/List.story.luau
@@ -0,0 +1,56 @@
+local React = require("@pkg/react")
+local ReactRoblox = require("@pkg/react-roblox")
+local UILabs = require("@dev-pkg/ui-labs")
+
+local BRC = require("@root/init")
+
+local FlexAlignmentValues = {
+ Start = "start",
+ End = "end",
+ Center = "center",
+ SpaceBetween = "space-between",
+ SpaceAround = "space-around",
+ SpaceEvenly = "space-evenly",
+ Stretch = "stretch",
+}
+
+return {
+ react = React,
+ reactRoblox = ReactRoblox,
+ controls = {
+ Gap = UILabs.Slider(0, 0, 24, 1),
+ JustifyContent = UILabs.EnumList(FlexAlignmentValues, "Center"),
+ AlignItems = UILabs.EnumList(FlexAlignmentValues, "Center"),
+ },
+ story = function(props)
+ return React.createElement(BRC.Frame, {
+ AnchorPoint = "m",
+ Position = UDim2.new(0.5, 0, 0.5, 0),
+ Size = UDim2.new(0.5, 0, 0.75, 0),
+ BackgroundColor = "#FFF",
+
+ Padding = props.controls.Gap,
+ ListLayout = {
+ -- JustifyContent is alignment at main axis
+ -- AlignItems is alignment at cross axis
+
+ Gap = props.controls.Gap,
+ JustifyContent = props.controls.JustifyContent, -- CSS like values: start, end, center, space-between, space-around, space-evenly and stretch
+ AlignItems = props.controls.AlignItems, -- same as above
+ },
+ }, {
+ React.createElement(
+ BRC.Frame,
+ { Size = UDim2.new(0.5, 0, 0.25, 0), BackgroundColor = "#E80000" }
+ ),
+ React.createElement(
+ BRC.Frame,
+ { Size = UDim2.new(0.5, 0, 0.25, 0), BackgroundColor = "#00E800" }
+ ),
+ React.createElement(
+ BRC.Frame,
+ { Size = UDim2.new(0.5, 0, 0.25, 0), BackgroundColor = "#0000E8" }
+ ),
+ })
+ end,
+}
diff --git a/src/Stories/Modifiers/AspectRatio.story.luau b/src/Stories/Modifiers/AspectRatio.story.luau
new file mode 100644
index 0000000..e42328d
--- /dev/null
+++ b/src/Stories/Modifiers/AspectRatio.story.luau
@@ -0,0 +1,29 @@
+local React = require("@pkg/react")
+local ReactRoblox = require("@pkg/react-roblox")
+local UILabs = require("@dev-pkg/ui-labs")
+
+local BRC = require("@root/init")
+
+local story = {
+ react = React,
+ reactRoblox = ReactRoblox,
+ controls = {
+ AspectRatio = UILabs.Slider(1, 0.5, 5, 0.1),
+ },
+ story = function(props)
+ return React.createElement(BRC.Frame, {
+ AnchorPoint = "m",
+ Position = UDim2.new(0.5, 0, 0.5, 0),
+ Size = UDim2.new(0.5, 0, 0.5, 0),
+ BackgroundColor = "#FFF",
+
+ Aspect = {
+ Ratio = props.controls.AspectRatio, -- number
+ Type = Enum.AspectType.FitWithinMaxSize,
+ DominantAxis = Enum.DominantAxis.Width,
+ },
+ })
+ end,
+}
+
+return story
diff --git a/src/Stories/Modifiers/Padding.story.luau b/src/Stories/Modifiers/Padding.story.luau
new file mode 100644
index 0000000..ed050cf
--- /dev/null
+++ b/src/Stories/Modifiers/Padding.story.luau
@@ -0,0 +1,47 @@
+local React = require("@pkg/react")
+local ReactRoblox = require("@pkg/react-roblox")
+local UILabs = require("@dev-pkg/ui-labs")
+
+local BRC = require("@root/init")
+
+local function PaddingStory(props)
+ local Padding = React.useMemo(function()
+ local Padding = {}
+ for v in string.gmatch(props.controls.Padding, "%d+") do
+ Padding[#Padding + 1] = tonumber(v)
+ end
+ return Padding
+ end, { props.controls.Padding })
+
+ return React.createElement(
+ BRC.Frame,
+ {
+ AnchorPoint = "m",
+ Position = UDim2.new(0.5, 0, 0.5, 0),
+ Size = UDim2.new(0.5, 0, 0.5, 0),
+ BackgroundColor = "#F00",
+
+ Padding = Padding,
+ },
+ React.createElement(BRC.TextLabel, {
+ Size = UDim2.new(1, 0, 1, 0),
+ BackgroundColor = "#FFF",
+ Text = ("Padding = {%s}"):format(table.concat(Padding, ", ")),
+ Font = Enum.Font.Roboto,
+ TextSize = 30,
+ })
+ )
+end
+
+local story = {
+ react = React,
+ reactRoblox = ReactRoblox,
+ controls = {
+ Padding = "15",
+ },
+ story = function(props)
+ return React.createElement(PaddingStory, props)
+ end,
+}
+
+return story
diff --git a/src/Stories/Modifiers/SizeConstraint.story.luau b/src/Stories/Modifiers/SizeConstraint.story.luau
new file mode 100644
index 0000000..197c617
--- /dev/null
+++ b/src/Stories/Modifiers/SizeConstraint.story.luau
@@ -0,0 +1,25 @@
+local React = require("@pkg/react")
+local ReactRoblox = require("@pkg/react-roblox")
+local UILabs = require("@dev-pkg/ui-labs")
+
+local BRC = require("@root/init")
+
+return {
+ react = React,
+ reactRoblox = ReactRoblox,
+ controls = {
+ MinSizeX = UILabs.Slider(100, 0, 255, 1),
+ MaxSizeX = UILabs.Slider(200, 0, 500, 1),
+ },
+ story = function(props)
+ return React.createElement(BRC.Frame, {
+ AnchorPoint = "m",
+ Position = UDim2.new(0.5, 0, 0.5, 0),
+ Size = UDim2.new(0.5, 0, 0.5, 0),
+ BackgroundColor = "#FFF",
+
+ MinSize = Vector2.new(props.controls.MinSizeX, 0),
+ MaxSize = Vector2.new(props.controls.MaxSizeX, math.huge),
+ })
+ end,
+}
diff --git a/src/Stories/Modifiers/TextSizeConstraint.story.luau b/src/Stories/Modifiers/TextSizeConstraint.story.luau
new file mode 100644
index 0000000..1d85b5d
--- /dev/null
+++ b/src/Stories/Modifiers/TextSizeConstraint.story.luau
@@ -0,0 +1,29 @@
+local React = require("@pkg/react")
+local ReactRoblox = require("@pkg/react-roblox")
+local UILabs = require("@dev-pkg/ui-labs")
+
+local BRC = require("@root/init")
+
+return {
+ react = React,
+ reactRoblox = ReactRoblox,
+ controls = {
+ SizeY = UILabs.Slider(100, 0, 500),
+ MaxTextSize = UILabs.Slider(20, 1, 100),
+ },
+ story = function(props)
+ return React.createElement(BRC.TextLabel, {
+ AnchorPoint = "m",
+ Position = UDim2.new(0.5, 0, 0.5, 0),
+ Size = UDim2.new(0.5, 0, 0, props.controls.SizeY),
+ BackgroundColor = "#FFF",
+ TextColor = "#F00",
+
+ Text = "creepy ahh text",
+ TextSize = "auto",
+ Font = Enum.Font.Creepster,
+
+ MaxTextSize = props.controls.MaxTextSize,
+ })
+ end,
+}
diff --git a/src/Stories/Modifiers/UICorner.story.luau b/src/Stories/Modifiers/UICorner.story.luau
new file mode 100644
index 0000000..4bf16b1
--- /dev/null
+++ b/src/Stories/Modifiers/UICorner.story.luau
@@ -0,0 +1,24 @@
+local React = require("@pkg/react")
+local ReactRoblox = require("@pkg/react-roblox")
+local UILabs = require("@dev-pkg/ui-labs")
+
+local BRC = require("@root/init")
+
+local story = {
+ react = React,
+ reactRoblox = ReactRoblox,
+ controls = {
+ CornerRadius = UILabs.Slider(10, 0, 150, 1),
+ },
+ story = function(props)
+ return React.createElement(BRC.Frame, {
+ AnchorPoint = "m",
+ Position = UDim2.new(0.5, 0, 0.5, 0),
+ Size = UDim2.new(0.5, 0, 0.5, 0),
+ BackgroundColor = "#FFF",
+ CornerRadius = props.controls.CornerRadius, -- UDim | number
+ })
+ end,
+}
+
+return story
diff --git a/src/Stories/Modifiers/UIStroke.story.luau b/src/Stories/Modifiers/UIStroke.story.luau
new file mode 100644
index 0000000..24bc959
--- /dev/null
+++ b/src/Stories/Modifiers/UIStroke.story.luau
@@ -0,0 +1,30 @@
+local React = require("@pkg/react")
+local ReactRoblox = require("@pkg/react-roblox")
+local UILabs = require("@dev-pkg/ui-labs")
+
+local BRC = require("@root/init")
+
+local story = {
+ react = React,
+ reactRoblox = ReactRoblox,
+ controls = {
+ Color = Color3.fromHex("#FF0000"),
+ Thickness = UILabs.Slider(5, 0, 50),
+ },
+ story = function(props)
+ return React.createElement(BRC.Frame, {
+ AnchorPoint = "m",
+ Position = UDim2.new(0.5, 0, 0.5, 0),
+ Size = UDim2.new(0.5, 0, 0.5, 0),
+ BackgroundColor = "#FFF",
+ CornerRadius = 15,
+
+ Border = {
+ Color = props.controls.Color, -- Color3 | number
+ Thickness = props.controls.Thickness, -- number
+ },
+ })
+ end,
+}
+
+return story
diff --git a/src/Typings.luau b/src/Typings.luau
new file mode 100644
index 0000000..fc4c222
--- /dev/null
+++ b/src/Typings.luau
@@ -0,0 +1,218 @@
+local React = require("@pkg/react")
+
+--- User-friendly anchor points
+---
+--- center
+--- left | right
+--- | | |
+--- `tl`, `t`, `tr` – top
+--- `ml`, `m`, `mr` – middle
+--- `bl`, `b`, `br` – bottom
+export type AnchorPoint = "tl" | "t" | "tr" | "ml" | "m" | "mr" | "bl" | "b" | "br" | Vector2
+
+--- Color
+---
+--- It's either `Color3` or hexcode of color (e.g. `#FF0000`)
+export type Color = Color3 | string
+
+--- Text Size
+---
+--- `"auto"` enables `TextScaled` property. Otherwise sets TextSize
+export type TextSize = number | "auto"
+
+--- Font
+export type FontValue = Font | EnumItem
+
+--- UDim
+---
+--- Takes `UDim` or `number` as offset
+export type UDimValue = UDim | number
+
+--- Padding (like in CSS)
+---
+--- There's 4 scenarios
+--- 1. Value is `UDimValue` or `{UDimValue}`: padding `UDimValue` is applied to all sides
+--- 2. Value is `{UDimValue, UDimValue}`: first value is vertical padding, second - horizontal padding
+--- 3. Value is `{UDimValue, UDimValue, UDimValue}`: where each value is {Top, Horizontal, Bottom}
+--- 4. Value is `{UDimValue, UDimValue, UDimValue, UDimValue}`: where each value is {Top, Right, Bottom, Left}
+export type PaddingValue = UDimValue | { UDimValue }
+
+--- Flex alignments (like in CSS)
+export type FlexAlignment =
+ "start"
+ | "end"
+ | "center"
+ | "space-between"
+ | "space-around"
+ | "space-evenly"
+ | "stretch"
+
+--- Type alias for either Binding or Value
+export type BindingOrValue = React.Binding | T
+
+--- Border settings
+---
+--- NOTE: when building, it uses `UIStroke`, instead of `GuiObject`'s border properties
+export type BorderSettings = {
+ Color: Color?,
+ Thickness: number?,
+ LineJoinMode: Enum.LineJoinMode,
+ Transparency: number?,
+}
+
+--- Aspect ratio settings
+-- TODO: support number-only
+export type AspectSettings = {
+ Ratio: number,
+ Type: Enum.AspectType?,
+ DominantAxis: Enum.DominantAxis?,
+}
+
+--- List layout settings
+export type ListLayoutSettings = {
+ Gap: UDimValue,
+
+ Direction: Enum.FillDirection?,
+ Order: Enum.SortOrder?,
+ Wraps: boolean?,
+
+ JustifyContent: FlexAlignment?,
+ AlignItems: FlexAlignment?,
+ -- TODO: ItemLineAlignment
+}
+
+--- Gui Object modifers
+export type GuiObjectModifiers = {
+ Border: BorderSettings?,
+
+ CornerRadius: UDimValue?,
+
+ Aspect: AspectSettings?,
+
+ Padding: PaddingValue?,
+
+ MinSize: Vector2?,
+ MaxSize: Vector2?,
+
+ ListLayout: ListLayoutSettings?,
+ FlexMode: Enum.UIFlexMode?,
+}
+
+export type GuiObjectProps = {
+ Active: boolean,
+
+ AnchorPoint: AnchorPoint?,
+ AutomaticSize: Enum.AutomaticSize?,
+
+ BackgroundColor: Color?,
+ BackgroundTransparency: number?,
+ --- Alias for `BackgroundTransparency = 1`
+ NoBackground: boolean?,
+
+ ClipsDescendants: boolean?,
+ -- TODO: GuiState:Enum.GuiState,
+ Interactable: boolean,
+
+ LayoutOrder: number?,
+
+ -- TODO: NextSelectionDown:GuiObject
+ -- TODO: NextSelectionLeft:GuiObject
+ -- TODO: NextSelectionRight:GuiObject
+ -- TODO: NextSelectionUp:GuiObject
+
+ Position: UDim2?,
+ Rotation: number?,
+
+ Selectable: boolean?,
+ -- TODO: SelectionImageObject:GuiObject,
+ -- TODO: SelectionOrder:number
+
+ Size: UDim2?,
+ SizeConstraint: Enum.SizeConstraint?,
+
+ Transparency: number,
+ Visible: boolean?,
+
+ ZIndex: number?,
+} & GuiObjectModifiers
+
+export type ScreenGuiProps = {
+ Enabled: boolean?,
+ ResetOnSpawn: boolean?,
+ ZIndexBehavior: Enum.ZIndexBehavior?,
+
+ ScreenInsets: Enum.ScreenInsets?,
+ DisplayOrder: number?,
+}
+
+export type TextProps = {
+ Font: FontValue?,
+ LineHeight: number?,
+
+ MaxVisibleGraphemes: number,
+
+ RichText: boolean?,
+ Text: string?,
+
+ TextColor: Color?,
+ TextDirection: Enum.TextDirection?,
+ TextFits: boolean?,
+ TextSize: TextSize?,
+ TextTransparency: number?,
+ TextTruncate: Enum.TextTruncate?,
+ TextWrapped: boolean?,
+
+ TextXAlignment: Enum.TextXAlignment?,
+ TextYAlignment: Enum.TextYAlignment?,
+
+ MinTextSize: number?,
+ MaxTextSize: number?,
+}
+
+export type TextBoxProps = {
+ ClearTextOnFocus: boolean?,
+ CursorPosition: number?,
+ MultiLine: boolean?,
+ PlaceholderColor: Color?,
+ PlaceholderText: string?,
+ SelectionStart: number?,
+ ShowNativeInput: boolean?,
+ TextEditable: boolean?,
+}
+
+export type TextButtonProps = {
+ AutoButtonColor: boolean?,
+ HoverHapticEffect: HapticEffect?,
+ PressHapticEffect: HapticEffect?,
+ Modal: boolean?,
+ Selected: boolean?,
+ Style: Enum.ButtonStyle?,
+}
+
+export type ScrollingFrameScrollBar = {
+ TopImage: string?,
+ MidImage: string?,
+ BottomImage: string?,
+
+ Color: Color,
+ Transparency: number?,
+
+ Thickness: number?,
+ HorizontalInset: Enum.ScrollBarInset?,
+ VerticalInset: Enum.ScrollBarInset?,
+ VerticalPosition: Enum.VerticalScrollBarPosition?,
+}
+
+export type ScrollingFrameProps = {
+ AutomaticCanvasSize: Enum.AutomaticSize?,
+
+ CanvasPosition: Vector2?,
+ CanvasSize: UDim2?,
+
+ ScrollingDirection: Enum.ScrollingDirection?,
+ ScrollingEnabled: boolean?,
+
+ ScrollBar: ScrollingFrameScrollBar?,
+}
+
+return {}
diff --git a/src/Utils.luau b/src/Utils.luau
new file mode 100644
index 0000000..5c21d2f
--- /dev/null
+++ b/src/Utils.luau
@@ -0,0 +1,336 @@
+local React = require("@pkg/react")
+
+local Typings = require("@root/Typings")
+
+local Utils = {}
+
+local AnchorPointMapping = setmetatable({
+ tl = Vector2.new(0, 0),
+ t = Vector2.new(0.5, 0),
+ tr = Vector2.new(1, 0),
+
+ ml = Vector2.new(0, 0.5),
+ m = Vector2.new(0.5, 0.5),
+ mr = Vector2.new(1, 0.5),
+
+ bl = Vector2.new(0, 1),
+ b = Vector2.new(0.5, 1),
+ br = Vector2.new(1, 1),
+}, {
+ __index = function()
+ error("Invalid anchor point.")
+ end,
+})
+
+local function isBinding(value: any): boolean
+ return typeof(value) == "table" and value["getValue"] ~= nil and value["map"] ~= nil
+end
+
+-- TODO: create separate package "better-react-hooks"
+function Utils.mapBinding(
+ bindingOrValue: Typings.BindingOrValue,
+ map: (value: T) -> R
+): React.Binding
+ local binding = if isBinding(bindingOrValue)
+ then bindingOrValue :: React.Binding
+ else React.createBinding(bindingOrValue :: T)
+
+ return binding:map(map)
+end
+
+function Utils.Assign(table1: T1, table2: T2): T1 & T2
+ local result = table1 :: any
+
+ for k, v in pairs(table2 :: any) do
+ result[k] = v
+ end
+
+ return result :: T1 & T2
+end
+
+-- thanks to https://gist.github.com/qizhihere/cb2a14432d9bf65693ad?permalink_comment_id=3389084#gistcomment-3389084
+function Utils.MergeMulti(...): any
+ local tables_to_merge = { ... }
+ assert(#tables_to_merge > 1, "There should be at least two tables to merge them")
+
+ for k, t in ipairs(tables_to_merge) do
+ assert(typeof(t) == "table", string.format("Expected a table as function parameter %d", k))
+ end
+
+ local result = table.clone(tables_to_merge[1])
+
+ for i = 2, #tables_to_merge do
+ local from = tables_to_merge[i]
+ for k, v in pairs(from) do
+ if type(v) == "table" then
+ result[k] = result[k] or {}
+ assert(type(result[k]) == "table", string.format("Expected a table: '%s'", k))
+ result[k] = Utils.MergeMulti(result[k], v)
+ else
+ result[k] = v
+ end
+ end
+ end
+
+ return result
+end
+
+function Utils.CalculateAspectRatio(instance: GuiObject)
+ local AbsoluteSize = instance.AbsoluteSize
+
+ print("===============================")
+ print(("Calculated Aspect Ratio: %.3f"):format(AbsoluteSize.X / AbsoluteSize.Y))
+ print("===============================")
+end
+
+function Utils.ConvertColor(value: Typings.BindingOrValue): React.Binding
+ return Utils.mapBinding(value, function(value)
+ if typeof(value) == "Color3" then
+ return value
+ elseif typeof(value) == "string" then
+ return Color3.fromHex(value)
+ else
+ error(
+ string.format(
+ 'Invalid value in ConvertColor. Expected Color3 or string, found "%s"',
+ typeof(value)
+ )
+ )
+ end
+ end)
+end
+
+function Utils.ConvertAnchorPoint(
+ value: Typings.BindingOrValue
+): React.Binding
+ return Utils.mapBinding(value, function(value)
+ if typeof(value) == "Vector2" then
+ return value
+ elseif typeof(value) == "string" then
+ return AnchorPointMapping[value]
+ else
+ error(
+ string.format(
+ 'Invalid value in ConvertAnchorPoint. Expected Vector2 or string, found "%s"',
+ typeof(value)
+ )
+ )
+ end
+ end)
+end
+
+function Utils.ConvertFont(value: Typings.BindingOrValue): React.Binding
+ return Utils.mapBinding(value, function(value)
+ if typeof(value) == "EnumItem" then
+ return Font.fromEnum(value :: Enum.Font)
+ elseif typeof(value) == "Font" then
+ return value
+ else
+ error(
+ string.format(
+ 'Invalid value in ConvertFont. Expected Font or Enum.Font, found "%s"',
+ typeof(value)
+ )
+ )
+ end
+ end)
+end
+
+local function ConvertUDimInternal(value: Typings.UDimValue): UDim
+ if typeof(value) == "UDim" then
+ return value
+ elseif typeof(value) == "number" then
+ return UDim.new(0, value)
+ else
+ error(
+ string.format(
+ 'Invalid value in ConvertUDim. Expected UDim or number, found "%s"',
+ typeof(value)
+ )
+ )
+ end
+end
+
+function Utils.ConvertUDim(value: Typings.BindingOrValue): React.Binding
+ return Utils.mapBinding(value, ConvertUDimInternal)
+end
+
+export type ConvertPaddingResult = {
+ PaddingBottom: UDim,
+ PaddingLeft: UDim,
+ PaddingRight: UDim,
+ PaddingTop: UDim,
+}
+
+local function ConvertPaddingInternal(value: { UDim }): ConvertPaddingResult
+ if #value == 0 then
+ return { PaddingTop = 0, PaddingRight = 0, PaddingBottom = 0, PaddingLeft = 0 }
+ elseif #value == 1 then
+ return {
+ PaddingTop = value[1],
+ PaddingRight = value[1],
+ PaddingBottom = value[1],
+ PaddingLeft = value[1],
+ }
+ elseif #value == 2 then
+ return {
+ PaddingTop = value[1],
+ PaddingRight = value[2],
+ PaddingBottom = value[1],
+ PaddingLeft = value[2],
+ }
+ elseif #value == 3 then
+ return {
+ PaddingTop = value[1],
+ PaddingRight = value[2],
+ PaddingBottom = value[3],
+ PaddingLeft = value[2],
+ }
+ elseif #value == 4 then
+ return {
+ PaddingTop = value[1],
+ PaddingRight = value[2],
+ PaddingBottom = value[3],
+ PaddingLeft = value[4],
+ }
+ else
+ error(
+ string.format(
+ "Invalid value in ConvertUDim. Expected up to 4 padding values, found %d.",
+ #value
+ )
+ )
+ end
+end
+
+function Utils.ConvertPadding(
+ value: Typings.BindingOrValue
+): React.Binding
+ return Utils.mapBinding(value, function(value)
+ if typeof(value) == "table" then
+ local result: { UDim } = {}
+ for _, v in value do
+ result[#result + 1] = ConvertUDimInternal(v)
+ end
+
+ return ConvertPaddingInternal(result)
+ elseif typeof(value) == "UDim" or typeof(value) == "number" then
+ return ConvertPaddingInternal({ ConvertUDimInternal(value) })
+ else
+ error(
+ string.format(
+ 'Invalid value in ConvertPadding. Expected UDimValue or {UDimValue}, found "%s"',
+ typeof(value)
+ )
+ )
+ end
+ end)
+end
+
+export type ConvertFlexValueResult = {
+ HorizontalAlignment: Enum.HorizontalAlignment?,
+ HorizontalFlex: Enum.UIFlexAlignment?,
+ VerticalAlignment: Enum.VerticalAlignment?,
+ VerticalFlex: Enum.UIFlexAlignment?,
+}
+
+--- Converts CSS like JustifyContent and AlignItems values to Roblox's ListLayout props
+function Utils.ConvertFlexValue(
+ direction: Enum.FillDirection,
+ value: Typings.FlexAlignment
+): ConvertFlexValueResult
+ if value == "start" then
+ if direction == Enum.FillDirection.Horizontal then
+ return {
+ HorizontalAlignment = Enum.HorizontalAlignment.Left,
+ HorizontalFlex = Enum.UIFlexAlignment.None,
+ }
+ else
+ return {
+ VerticalAlignment = Enum.VerticalAlignment.Top,
+ VerticalFlex = Enum.UIFlexAlignment.None,
+ }
+ end
+ elseif value == "end" then
+ if direction == Enum.FillDirection.Horizontal then
+ return {
+ HorizontalAlignment = Enum.HorizontalAlignment.Right,
+ HorizontalFlex = Enum.UIFlexAlignment.None,
+ }
+ else
+ return {
+ VerticalAlignment = Enum.VerticalAlignment.Bottom,
+ VerticalFlex = Enum.UIFlexAlignment.None,
+ }
+ end
+ elseif value == "center" then
+ if direction == Enum.FillDirection.Horizontal then
+ return {
+ HorizontalAlignment = Enum.HorizontalAlignment.Center,
+ HorizontalFlex = Enum.UIFlexAlignment.None,
+ }
+ else
+ return {
+ VerticalAlignment = Enum.VerticalAlignment.Center,
+ VerticalFlex = Enum.UIFlexAlignment.None,
+ }
+ end
+ elseif value == "space-between" then
+ if direction == Enum.FillDirection.Horizontal then
+ return {
+ HorizontalAlignment = Enum.HorizontalAlignment.Center,
+ HorizontalFlex = Enum.UIFlexAlignment.SpaceBetween,
+ }
+ else
+ return {
+ VerticalAlignment = Enum.VerticalAlignment.Center,
+ VerticalFlex = Enum.UIFlexAlignment.SpaceBetween,
+ }
+ end
+ elseif value == "space-around" then
+ if direction == Enum.FillDirection.Horizontal then
+ return {
+ HorizontalAlignment = Enum.HorizontalAlignment.Center,
+ HorizontalFlex = Enum.UIFlexAlignment.SpaceAround,
+ }
+ else
+ return {
+ VerticalAlignment = Enum.VerticalAlignment.Center,
+ VerticalFlex = Enum.UIFlexAlignment.SpaceAround,
+ }
+ end
+ elseif value == "space-evenly" then
+ if direction == Enum.FillDirection.Horizontal then
+ return {
+ HorizontalAlignment = Enum.HorizontalAlignment.Center,
+ HorizontalFlex = Enum.UIFlexAlignment.SpaceEvenly,
+ }
+ else
+ return {
+ VerticalAlignment = Enum.VerticalAlignment.Center,
+ VerticalFlex = Enum.UIFlexAlignment.SpaceEvenly,
+ }
+ end
+ elseif value == "stretch" then
+ if direction == Enum.FillDirection.Horizontal then
+ return {
+ HorizontalAlignment = Enum.HorizontalAlignment.Center,
+ HorizontalFlex = Enum.UIFlexAlignment.Fill,
+ }
+ else
+ return {
+ VerticalAlignment = Enum.VerticalAlignment.Center,
+ VerticalFlex = Enum.UIFlexAlignment.Fill,
+ }
+ end
+ else
+ error(
+ string.format(
+ 'Invalid value in ConvertFlexValue. Expected "start", "end", "center", "space-between", "space-around", "space-evenly" or "stretch", found "%s"',
+ value
+ )
+ )
+ end
+end
+
+return Utils
diff --git a/src/components/Button.ts b/src/components/Button.ts
deleted file mode 100644
index 0d7ca33..0000000
--- a/src/components/Button.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import TextComponent, { TextComponentProps } from "../helpers/TextComponent";
-
-type ButtonProps = TextComponentProps & {
- autoButtonColor: boolean
-}
-
-export const ButtonComponent = TextComponent
- .expand(
- (props) => ({
- AutoButtonColor: props.autoButtonColor,
- }),
- );
-
-export const Button = ButtonComponent.build("textbutton");
diff --git a/src/components/CanvasGroup.ts b/src/components/CanvasGroup.ts
deleted file mode 100644
index 56146cc..0000000
--- a/src/components/CanvasGroup.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import BaseComponent from "../helpers/BaseComponent";
-import { ColorOrHex, resolveColor3 } from "../utils";
-
-export interface CanvasGroupProps {
- /**
- * Color tint that applies to all descendants.
- *
- * `GroupColor3` property in Roblox
- */
- tintColor?: ColorOrHex,
-
- /**
- * Transparency that applies to all descendants.
- *
- * `GroupTransparency` property in Roblox
- */
- opacity?: number
-}
-
-/**
- * @see https://create.roblox.com/docs/reference/engine/classes/CanvasGroup
- */
-export const CanvasGroup = BaseComponent
- .expand(
- (props) => ({
- GroupColor3: resolveColor3(props.tintColor),
- GroupTransparency: props.opacity
- }),
- )
- .build("canvasgroup");
diff --git a/src/components/Frame.ts b/src/components/Frame.ts
deleted file mode 100644
index 9b8f740..0000000
--- a/src/components/Frame.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import BaseComponent from "../helpers/BaseComponent";
-
-export const Frame = BaseComponent.build("frame");
diff --git a/src/components/GridLayout.tsx b/src/components/GridLayout.tsx
deleted file mode 100644
index ee3eda6..0000000
--- a/src/components/GridLayout.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from "@rbxts/react";
-
-import type { BindingVariants } from "../utils";
-
-export type GridLayoutProps = BindingVariants<{
- cellPadding?: UDim2
- cellSize?: UDim2
- cellAspectRatio?: number
- cellAspectType?: Enum.AspectType
- cellAspectAxis?: Enum.DominantAxis
- startCorner?: Enum.StartCorner
- direction?: Enum.FillDirection
- horizontalAlign?: Enum.HorizontalAlignment
- verticalAlign?: Enum.VerticalAlignment,
- sortOrder?: Enum.SortOrder;
-}>
-
-export function GridLayout(props: GridLayoutProps) {
- return (
-
- {props.cellAspectRatio !== undefined
- ?
- : undefined}
-
- );
-}
diff --git a/src/components/Image.ts b/src/components/Image.ts
deleted file mode 100644
index 82e20e0..0000000
--- a/src/components/Image.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { BaseComponent } from "../helpers";
-
-import { ColorOrHex, resolveColor3 } from "../utils";
-import { mapBinding } from "@rbxts/pretty-react-hooks";
-
-export interface ImageRect {
- offset: Vector2;
- size: Vector2;
-}
-
-export interface ImageProps {
- image?: string,
- imageColor?: ColorOrHex,
- imageTransparency?: number,
- imageRect?: ImageRect
-}
-
-export const ImageComponent = BaseComponent
- .expand((props) => ({
- Image: props.image,
- ImageColor3: resolveColor3(props.imageColor),
- ImageTransparency: props.imageTransparency,
-
- ImageRectOffset: mapBinding(props.imageRect, (rect) => rect?.offset ?? new Vector2()),
- ImageRectSize: mapBinding(props.imageRect, (rect) => rect?.size ?? new Vector2()),
- }));
-
-export const Image = ImageComponent.build("imagelabel");
diff --git a/src/components/ListLayout.tsx b/src/components/ListLayout.tsx
deleted file mode 100644
index 77eeb82..0000000
--- a/src/components/ListLayout.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "@rbxts/react";
-
-import { BindingVariants, resolveUDim } from "../utils";
-
-export type ListLayoutProps = BindingVariants<{
- padding?: number | UDim
- direction?: Enum.FillDirection
- order?: Enum.SortOrder
- horizontalAlign?: Enum.HorizontalAlignment
- verticalAlign?: Enum.VerticalAlignment
-
-
- flexWrap?: boolean
- flexAlignX?: Enum.UIFlexAlignment
- flexAlignY?: Enum.UIFlexAlignment
- flexAlignItems?: Enum.ItemLineAlignment
-}>
-
-export function ListLayout(props: ListLayoutProps) {
- return (
-
- );
-}
diff --git a/src/components/ScrollingFrame.ts b/src/components/ScrollingFrame.ts
deleted file mode 100644
index e84d9b0..0000000
--- a/src/components/ScrollingFrame.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import Object from "@rbxts/object-utils";
-import BaseComponent from "../helpers/BaseComponent";
-
-import { resolveColor3 } from "../utils";
-import { getBindingValue, mapBinding } from "@rbxts/pretty-react-hooks";
-
-import type { InstanceAttributes } from "@rbxts/react";
-
-export type ScrollingFrameProps = {
- automaticCanvasSize?: Enum.AutomaticSize
-
- canvasPosition?: Vector2
- canvasSize?: UDim2
-
- direction?: Enum.ScrollingDirection
-
- /* Horizontal Scrollbar inset */
- scrollbarInsetH?: Enum.ScrollBarInset | boolean
-
- /* Vertical Scrollbar inset */
- scrollbarInsetV?: Enum.ScrollBarInset | boolean
-
- scrollbar?: Scrollbar | false
-}
-
-export type Scrollbar = {
- topImage?: string
- midImage?: string
- bottomImage?: string
-
- imageColor?: Color3 | string
- imageTransparency?: number
-}
-
-export const ScrollingFrameComponent = BaseComponent
- .expand(
- (props) => Object.assign(
- {
- AutomaticCanvasSize: props.automaticCanvasSize,
-
- CanvasPosition: props.canvasPosition,
- CanvasSize: props.canvasSize,
-
- HorizontalScrollBarInset: mapBinding(
- props.scrollbarInsetH,
- (scrollbarInsetH) =>
- typeIs(scrollbarInsetH, "boolean") && scrollbarInsetH
- ? Enum.ScrollBarInset.Always
- : (scrollbarInsetH as Enum.ScrollBarInset) || Enum.ScrollBarInset.None,
- ),
- VerticalScrollBarInset: mapBinding(
- props.scrollbarInsetV,
- (scrollbarInsetV) =>
- typeIs(scrollbarInsetV, "boolean") && scrollbarInsetV
- ? Enum.ScrollBarInset.Always
- : (scrollbarInsetV as Enum.ScrollBarInset) || Enum.ScrollBarInset.None,
- ),
-
- ScrollingDirection: props.direction,
- ScrollingEnabled: mapBinding(props.scrollbar, (scrollbar) => !typeIs(scrollbar, "boolean")),
- } as InstanceAttributes,
-
- // scrollbar settings
- {
- TopImage: mapBinding(props.scrollbar, (scrollbar) => scrollbar && scrollbar.topImage),
- MidImage: mapBinding(props.scrollbar, (scrollbar) => scrollbar && scrollbar.midImage),
- BottomImage: mapBinding(props.scrollbar, (scrollbar) => scrollbar && scrollbar.bottomImage),
-
- ScrollBarImageColor3: mapBinding(props.scrollbar, (scrollbar) => scrollbar && getBindingValue(resolveColor3(scrollbar.imageColor))),
- ScrollBarImageTransparency: mapBinding(props.scrollbar, (scrollbar) => scrollbar && scrollbar.imageTransparency),
-
- } as InstanceAttributes,
- ),
- );
-
-export const ScrollingFrame = ScrollingFrameComponent.build("scrollingframe");
diff --git a/src/components/Text.ts b/src/components/Text.ts
deleted file mode 100644
index 77a345d..0000000
--- a/src/components/Text.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import TextComponent, { TextComponentProps } from "../helpers/TextComponent";
-
-export const Text = TextComponent
- .expand>()
- .build("textlabel");
diff --git a/src/components/TextBox.ts b/src/components/TextBox.ts
deleted file mode 100644
index d54784c..0000000
--- a/src/components/TextBox.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import TextComponent, { TextComponentProps } from "../helpers/TextComponent";
-
-import { resolveColor3 } from "../utils";
-
-type TextBoxProps = {
- placeholder?: string
- placeholderColor?: Color3 | string,
-
- textEditable?: boolean,
- clearTextOnFocus?: boolean
-}
-
-export const TextBoxComponent = TextComponent
- .expand & TextBoxProps>(
- (props) => ({
- PlaceholderText: props.placeholder,
- PlaceholderColor3: resolveColor3(props.placeholderColor),
-
- TextEditable: props.textEditable,
- ClearTextOnFocus: props.clearTextOnFocus,
- }),
- );
-
-export const TextBox = TextBoxComponent.build("textbox");
\ No newline at end of file
diff --git a/src/helpers/BaseComponent.tsx b/src/helpers/BaseComponent.tsx
deleted file mode 100644
index 818fb50..0000000
--- a/src/helpers/BaseComponent.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import React from "@rbxts/react";
-import ExpandableComponent from "./ExpandableComponent";
-
-import { ColorOrHex, ResolvableAnchorPoint, resolveAnchorPoint, resolveUDim } from "../utils";
-import { getBaseColor, Gradient, GradientElement } from "./Gradient";
-
-import type { InstanceProps } from "@rbxts/react";
-
-export type BaseProps = {
- visible?: boolean,
-
- noBackground?: boolean
- background?: Gradient | ColorOrHex
- backgroundTransparency?: number
- gradientRotation: number
-
- border?: ColorOrHex | Gradient
- borderGradientRotation?: number
- borderMode?: Enum.ApplyStrokeMode
- borderSize?: number
- borderLineJoinMode?: Enum.LineJoinMode
- stroke?: InstanceProps
-
- position?: UDim2
- size?: UDim2,
- anchorPoint?: ResolvableAnchorPoint
- automaticSize?: Enum.AutomaticSize
-
- cornerRadius?: number | UDim
-
- aspectRatio?: number
- aspectType?: Enum.AspectType
- aspectAxis?: Enum.DominantAxis
-
- padding?: number | UDim
- paddingLeft?: number | UDim
- paddingRight?: number | UDim
- paddingTop?: number | UDim
- paddingBottom?: number | UDim
-
- minSize?: Vector2
- maxSize?: Vector2
-
- minTextSize?: number
- maxTextSize?: number
-
- scale?: number,
-
- layoutOrder?: number
- zIndex?: number
- sizeConstraint?: Enum.SizeConstraint
-
- // Flex
- flex?: InstanceProps
- flexMode?: Enum.UIFlexMode
-}
-
-export default new ExpandableComponent()
- .expand(
- // most basic props:
- (userProps) => ({
- Visible: userProps.visible,
-
- BackgroundColor3: getBaseColor(userProps.background),
- BackgroundTransparency: userProps.noBackground ? 1 : (userProps.backgroundTransparency ?? 0),
-
- AutomaticSize: userProps.automaticSize,
-
- Position: userProps.position,
- Size: userProps.size,
- AnchorPoint: resolveAnchorPoint(userProps.anchorPoint ?? new Vector2(0, 0)),
-
- BorderSizePixel: 0, // we use UIStroke instead
-
- LayoutOrder: userProps.layoutOrder,
- ZIndex: userProps.zIndex,
- SizeConstraint: userProps.sizeConstraint,
- }),
-
- // most basic modifiers:
- (userProps) => [
- userProps.cornerRadius !== undefined
- ?
- : undefined,
-
- // Aspect Ratio
- userProps.aspectRatio !== undefined
- ?
- : undefined,
-
- // Stroke (border)
- userProps.stroke !== undefined
- || userProps.border !== undefined || userProps.borderSize !== undefined || userProps.borderLineJoinMode !== undefined
- ? (
-
-
-
- )
- : undefined,
-
- // Padding
- userProps.padding !== undefined
- || userProps.paddingLeft !== undefined || userProps.paddingRight !== undefined
- || userProps.paddingTop !== undefined || userProps.paddingBottom !== undefined
- ?
- : undefined,
-
- // Size constraint
- userProps.minSize !== undefined || userProps.maxSize !== undefined
- ?
- : undefined,
-
- // Text Size constraint
- userProps.minTextSize !== undefined || userProps.maxTextSize !== undefined
- ?
- : undefined,
-
- // Scale
- userProps.scale !== undefined
- ?
- : undefined,
-
- // Flex item
- userProps.flex !== undefined || userProps.flexMode !== undefined
- ?
- : undefined,
-
- ,
- ],
- );
diff --git a/src/helpers/CalculateAspectRatio.ts b/src/helpers/CalculateAspectRatio.ts
deleted file mode 100644
index 59f05d0..0000000
--- a/src/helpers/CalculateAspectRatio.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Pass this function to GuiObject as ref to calculate aspect ratio
- *
- * @example
- * ```tsx
- *
- * ...
- *
- *
- * // In Output (some fraction):
- * // [CALC_ASPECT_RATIO](1): .875
- * ```
- */
-export function calculateAspectRatio(element: unknown) {
- if (typeIs(element, "Instance") && element.IsA("GuiObject")) {
- const sizes = (element as GuiObject).AbsoluteSize;
- const name = (element as GuiObject).Name;
-
- print(`[CALC_ASPECT_RATIO](${name}): ${sizes.X / sizes.Y}`);
- } else {
- error(`[CALC_ASPECT_RATIO]: Passed invalid argument. GuiObject expected, got ${typeOf(element)}`)
- }
-}
diff --git a/src/helpers/ExpandableComponent.ts b/src/helpers/ExpandableComponent.ts
deleted file mode 100644
index 0700bac..0000000
--- a/src/helpers/ExpandableComponent.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import React, { ForwardedRef, InstanceProps, ReactChild, ReactNode } from "@rbxts/react";
-import Object from "@rbxts/object-utils";
-
-import { BindingVariants as BindingVariantsUtils, flat, ReactProps } from "../utils";
-
-/** @deprecated import from `../utils`, not from here */
-export type BindingVariants = BindingVariantsUtils
-
-type PropBuilder = (userProps: BindingVariantsUtils
, context: C) => InstanceProps
-type ChildrenBuilder
= (userProps: BindingVariantsUtils
, context: C) => ReactNode[]
-type ContextBuilder
= (userProps: BindingVariantsUtils
) => C
-
-/**
- * Expandable component
- *
- * Generics:
- * - I: instance
- * - P: user props
- * - C: context (passed in builders)
- */
-export default class ExpandableComponent {
- private propsBuilders: PropBuilder[];
- private childrenBuilders: ChildrenBuilder[];
- private contextBuilders: ContextBuilder[];
-
- constructor(
- propsBuilders: PropBuilder[] = [],
- childrenBuilders: ChildrenBuilder[] = [],
- contextBuilders: ContextBuilder[] = [],
- ) {
- this.propsBuilders = propsBuilders;
- this.childrenBuilders = childrenBuilders;
- this.contextBuilders = contextBuilders;
- }
-
- expandContext(
- builder: ContextBuilder,
- ): ExpandableComponent {
- return new ExpandableComponent(
- this.propsBuilders,
- this.childrenBuilders,
- [...this.contextBuilders, builder] as ContextBuilder[],
- );
- }
-
- expand(
- propBuilder?: PropBuilder,
- childrenBuilder?: ChildrenBuilder
,
- ): ExpandableComponent {
- return new ExpandableComponent(
- [...this.propsBuilders, propBuilder] as PropBuilder[],
- [...this.childrenBuilders, childrenBuilder] as ChildrenBuilder
[],
- this.contextBuilders,
- );
- }
-
- build(elementType: string) {
- return React.forwardRef((userProps: BindingVariantsUtils
>, ref) => {
- const context = this.buildContext(userProps);
- const props = this.buildProps(userProps, context, ref);
- const children = this.buildChildren(userProps, context);
-
- return React.createElement(elementType, props, ...children);
- });
- }
-
- private buildContext(userProps: BindingVariantsUtils
>): C {
- return Object.assign(
- {},
- ...this.contextBuilders
- .map((build) => build(userProps)),
- );
- }
-
- private buildProps(userProps: BindingVariantsUtils
>, context: C, ref: ForwardedRef): InstanceProps {
- const builtProps: InstanceProps[] = [];
-
- for (const build of this.propsBuilders) {
- const props = build(userProps, context);
- if (props !== undefined) {
- builtProps.push(props);
- }
- }
-
- return Object.assign(
- Object.assign(
- {},
- ...builtProps,
- ),
- {
- Event: userProps.event,
- Change: userProps.change,
- Tag: userProps.tag,
- ref: ref,
- },
- userProps.overrideRoblox as object,
- );
- }
-
- private buildChildren(userProps: BindingVariantsUtils>, context: C): React.ReactNode[] {
- const children = flat(
- this.childrenBuilders
- .map((build) => build(userProps, context).filterUndefined()),
- );
- if (userProps.children !== undefined) children.push(userProps.children as ReactChild);
-
- return children;
- }
-}
diff --git a/src/helpers/Gradient.tsx b/src/helpers/Gradient.tsx
deleted file mode 100644
index 6dd1d7a..0000000
--- a/src/helpers/Gradient.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React, { Binding } from "@rbxts/react";
-
-import { ColorOrHex, resolveColor3 } from "../utils";
-
-import { BindingOrValue, getBindingValue, mapBinding } from "@rbxts/pretty-react-hooks";
-
-export type Gradient = Array | Array | ColorSequence
-
-export function createColorSequence(value: Gradient): ColorSequence {
- if (typeIs(value, "ColorSequence")) {
- return value as ColorSequence;
- } else if (typeIs(value[0], "ColorSequenceKeypoint")) {
- return new ColorSequence(value as Array);
- } else {
- if (value.size() === 1) value = [value[0], value[0]];
-
- const keypointsCount = value.size();
- const step = 1 / (keypointsCount - 1);
-
- const seq: Array = [];
- let j = 0;
- for (let i = 0; i <= 1; i += step) {
- seq.push(new ColorSequenceKeypoint(
- i,
- getBindingValue(resolveColor3(value[j] as ColorOrHex)) ?? new Color3(),
- ));
- j++;
- }
-
- return new ColorSequence(seq);
- }
-}
-
-export type GradientElementProps = {
- color?: BindingOrValue
- rotation?: BindingOrValue
-}
-
-export function getBaseColor(color: BindingOrValue): Binding | undefined {
- if (typeIs(color, "nil")) return;
-
- return mapBinding(
- color,
- (value) =>
- typeIs(value, "string") || typeIs(value, "Color3") || typeIs(value, "nil")
- ? getBindingValue(resolveColor3(value))! // regular color
- : Color3.fromHex("#FFFFFF"), // gradient
- );
-}
-
-export function GradientElement(props: GradientElementProps) {
- const color = getBindingValue(props.color);
-
- return (
- !typeIs(color, "string") && !typeIs(color, "Color3") && !typeIs(color, "nil")
- // if not single color, make gradient
- ? , createColorSequence)}
- Rotation={props.rotation}
- />
- : <>
- );
-}
diff --git a/src/helpers/TextComponent.ts b/src/helpers/TextComponent.ts
deleted file mode 100644
index 9dfefb0..0000000
--- a/src/helpers/TextComponent.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import BaseComponent from "./BaseComponent";
-
-import { ColorOrHex, resolveColor3 } from "../utils";
-import { mapBinding } from "@rbxts/pretty-react-hooks";
-
-import type { InferEnumNames, InstanceEvent } from "@rbxts/react";
-
-export type TextComponentInstance = TextLabel | TextButton | TextBox
-export type TextComponentProps = {
- text?: string,
- textColor?: ColorOrHex
-
- textSize?: number | "AUTO"
-
- font?: Enum.Font | Font
- richText?: boolean
-
- textAlign?: Enum.TextXAlignment
- verticalTextAlign?: Enum.TextYAlignment
-
- /** @deprecated use `textAlign` (WILL BE REMOVED IN NEXT MAJOR VERSION!) */
- align?: Enum.TextXAlignment
- /** @deprecated use `verticalTextAlign` (WILL BE REMOVED IN NEXT MAJOR VERSION!) */
- verticalAlign?: Enum.TextYAlignment
-
- event?: InstanceEvent
-}
-
-export default BaseComponent
- .expand(
- (props) => ({
- Text: props.text,
- TextSize: mapBinding(
- props.textSize,
- (size) =>
- typeIs(size, "number")
- ? size
- : 0,
- ),
- TextScaled: mapBinding(
- props.textSize,
- (size) => size === "AUTO",
- ),
- TextColor3: resolveColor3(props.textColor),
-
- FontFace: mapBinding(
- props.font,
- (font) =>
- typeIs(font, "nil")
- ? Font.fromEnum(Enum.Font.Legacy)
- : typeIs(font, "Font")
- ? font // font
- : typeIs(font, "string")
- ? Font.fromEnum(Enum.Font[font as InferEnumNames]) // font enum key
- : Font.fromEnum(font), // font enum
- ),
- RichText: props.richText,
-
- TextXAlignment: props.textAlign ?? props.align,
- TextYAlignment: props.verticalTextAlign ?? props.verticalAlign,
- }),
- );
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
deleted file mode 100644
index 2ef6369..0000000
--- a/src/helpers/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { calculateAspectRatio } from "./CalculateAspectRatio";
-
-import ExpandableComponent from "./ExpandableComponent";
-
-import BaseComponent from "./BaseComponent";
-import TextComponent from "./TextComponent";
-
-export { calculateAspectRatio }
-export { ExpandableComponent, BaseComponent, TextComponent };
-export * as Gradient from "./Gradient";
diff --git a/src/index.ts b/src/index.ts
deleted file mode 100644
index 5aa37d8..0000000
--- a/src/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export { Button, ButtonComponent } from "./components/Button";
-export { CanvasGroup } from "./components/CanvasGroup";
-export { Frame } from "./components/Frame";
-export { ScrollingFrame } from "./components/ScrollingFrame";
-export { Image, ImageRect, ImageProps, ImageComponent } from "./components/Image";
-export { Text } from "./components/Text";
-export { TextBox, TextBoxComponent } from "./components/TextBox";
-
-export { GridLayout } from "./components/GridLayout";
-export { ListLayout } from "./components/ListLayout";
-
-export * from "./utils";
-export * as Helpers from "./helpers";
diff --git a/src/init.luau b/src/init.luau
new file mode 100644
index 0000000..107387e
--- /dev/null
+++ b/src/init.luau
@@ -0,0 +1,37 @@
+local Typings = require("@root/Typings")
+
+-- reexports of typings:
+export type AnchorPoint = Typings.AnchorPoint
+export type Color = Typings.Color
+export type TextSize = Typings.TextSize
+export type FontValue = Typings.FontValue
+export type UDimValue = Typings.UDimValue
+export type PaddingValue = Typings.PaddingValue
+export type FlexAlignment = Typings.FlexAlignment
+export type BindingOrValue = Typings.BindingOrValue
+
+export type BorderSettings = Typings.BorderSettings
+export type AspectSettings = Typings.AspectSettings
+export type ListLayoutSettings = Typings.ListLayoutSettings
+export type GuiObjectModifiers = Typings.GuiObjectModifiers
+
+export type GuiObjectProps = Typings.GuiObjectProps
+export type ScreenGuiProps = Typings.ScreenGuiProps
+export type TextProps = Typings.TextProps
+export type TextBoxProps = Typings.TextBoxProps
+export type TextButtonProps = Typings.TextButtonProps
+export type ScrollingFrameScrollBar = Typings.ScrollingFrameScrollBar
+export type ScrollingFrameProps = Typings.ScrollingFrameProps
+
+local BetterReactComponents = {
+ Utils = require("@root/Utils"),
+ Builder = require("@root/Builder"),
+}
+
+local Components = require("@root/Components")
+local Builders = require("@root/Builders")
+
+return BetterReactComponents.Utils.Assign(
+ BetterReactComponents.Utils.Assign(BetterReactComponents, Components),
+ { Builders = require("@root/Builders") }
+)
diff --git a/src/stories/App.ts b/src/stories/App.ts
deleted file mode 100644
index 5cdd42c..0000000
--- a/src/stories/App.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "@rbxts/react";
-
-import { Frame } from ".."; // @rbxts/better-react-components
-
-declare const _G: Record;
-_G.__DEV__ = true;
-
-export function App(props: { children: React.ReactNode }) {
- return React.createElement(
- Frame,
- { size: UDim2.fromScale(1, 1), noBackground: true },
- props.children,
- );
-}
diff --git a/src/stories/basics/1_helloworld.story.tsx b/src/stories/basics/1_helloworld.story.tsx
deleted file mode 100644
index 0da1176..0000000
--- a/src/stories/basics/1_helloworld.story.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "@rbxts/react";
-
-import { Text } from "../.."; // @rbxts/better-react-components
-import { App } from "../App";
-
-import { hoarcekat } from "@rbxts/pretty-react-hooks";
-import { CatppuccinLatte } from "../utils";
-
-export = hoarcekat(() => {
- return (
-
-
-
- );
-});
diff --git a/src/stories/basics/2_padding.story.tsx b/src/stories/basics/2_padding.story.tsx
deleted file mode 100644
index 7e209ae..0000000
--- a/src/stories/basics/2_padding.story.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from "@rbxts/react";
-
-import { AnchorPoints, Frame, Text } from "../.."; // @rbxts/better-react-components
-
-import { hoarcekat } from "@rbxts/pretty-react-hooks";
-import { App } from "../App";
-
-export = hoarcekat(() => {
- return (
-
-
-
-
-
-
-
- );
-});
diff --git a/src/stories/basics/3_cornerRadius.story.tsx b/src/stories/basics/3_cornerRadius.story.tsx
deleted file mode 100644
index 25ff5f1..0000000
--- a/src/stories/basics/3_cornerRadius.story.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "@rbxts/react";
-
-import { AnchorPoints, Frame } from "../.."; // @rbxts/better-react-components
-import { hoarcekat } from "@rbxts/pretty-react-hooks";
-import { App } from "../App";
-
-export = hoarcekat(() => {
- return (
-
-
-
- );
-});
diff --git a/src/stories/basics/5_flexItem.story.tsx b/src/stories/basics/5_flexItem.story.tsx
deleted file mode 100644
index b371551..0000000
--- a/src/stories/basics/5_flexItem.story.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { useBinding } from "@rbxts/react";
-
-import { Frame, Helpers, ListLayout } from "../../index"; // @rbxts/better-react-components
-import { hoarcekat } from "@rbxts/pretty-react-hooks";
-import { App } from "../App";
-
-// const { calculateAspectRatio } = Helpers;
-
-export = hoarcekat(() => {
- return (
-
-
-
-
-
-
-
-
- );
-})
diff --git a/src/stories/examples/sidebar.story.tsx b/src/stories/examples/sidebar.story.tsx
deleted file mode 100644
index d749c09..0000000
--- a/src/stories/examples/sidebar.story.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from "@rbxts/react";
-
-import { AnchorPoints, Button, Frame, ListLayout } from "../.."; // @rbxts/better-react-components
-import { App } from "../App";
-
-import { hoarcekat } from "@rbxts/pretty-react-hooks";
-import { CatppuccinLatte } from "../utils";
-
-function CoolButton(props: { text: string, onClick: () => void }) {
- return (
-
- );
-}
-
-export = hoarcekat(() => {
- return (
-
-
-
-
- print("Clicked on button #1")}
- />
-
- print("Clicked on button #2")}
- />
-
- print("Clicked on button #3")}
- />
-
-
- );
-});
diff --git a/src/stories/examples/textBox.story.tsx b/src/stories/examples/textBox.story.tsx
deleted file mode 100644
index d1ba617..0000000
--- a/src/stories/examples/textBox.story.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "@rbxts/react";
-
-import { hoarcekat } from "@rbxts/pretty-react-hooks";
-
-import { App } from "../App";
-import { AnchorPoints, TextBox } from "../.."; // @rbxts/better-react-components
-import { CatppuccinLatte } from "../utils";
-
-
-export = hoarcekat(() => {
- return (
-
-
-
- );
-});
diff --git a/src/stories/tests/bindings.story.tsx b/src/stories/tests/bindings.story.tsx
deleted file mode 100644
index ec5ce2f..0000000
--- a/src/stories/tests/bindings.story.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { useBinding } from "@rbxts/react";
-
-import { Button, Frame, GridLayout, Text } from "../.."; // @rbxts/better-react-components
-
-import { hoarcekat } from "@rbxts/pretty-react-hooks";
-import { CatppuccinLatte } from "../utils";
-
-export = hoarcekat(() => {
- const [count, setCount] = useBinding(0);
-
- return (
-
-
-
-