+): 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
+): (props: P) -> any
+ return React.forwardRef(function(props: React.ElementProps & P)
+ local outputProps, outputChildren = self.transformer(props)
+
+ return React.createElement(robloxComponent, outputProps, outputChildren, props.children)
+ end)
+end
+return ComponentBuilder
diff --git a/src/Builders/FrameBuilder.luau b/src/Builders/FrameBuilder.luau
new file mode 100644
index 0000000..32a6920
--- /dev/null
+++ b/src/Builders/FrameBuilder.luau
@@ -0,0 +1,10 @@
+local Packages = script.Parent.Parent.Parent
+
+local React = require(Packages.react)
+local ComponentBuilder = require(script.Parent.Parent.Builder)
+local Utils = require(script.Parent.Parent.Utils)
+local GuiObjectBuilder = require(script.Parent.GuiObjectBuilder)
+
+export type FrameProps = {}
+
+return GuiObjectBuilder -- frame doesn't add any new properties, so passthrough
diff --git a/src/Builders/GuiObjectBuilder.luau b/src/Builders/GuiObjectBuilder.luau
new file mode 100644
index 0000000..1919a9c
--- /dev/null
+++ b/src/Builders/GuiObjectBuilder.luau
@@ -0,0 +1,56 @@
+local Packages = script.Parent.Parent.Parent
+
+local React = require(Packages.react)
+local ComponentBuilder = require(script.Parent.Parent.Builder)
+local Utils = require(script.Parent.Parent.Utils)
+
+--- Border settings
+---
+--- NOTE: when building, it uses `UIStroke`, instead of `GuiObject`'s border properties
+export type Border = {
+ BorderColor: Utils.Color?,
+}
+
+export type GuiObjectProps = {
+ AnchorPoint: Utils.AnchorPoint?,
+ AutomaticSize: Enum.AutomaticSize?,
+ BackgroundColor: Utils.Color?,
+ BackgroundTransparency: number?,
+
+ --- Alias for `BackgroundTransparency = 1`
+ NoBackground: boolean?,
+
+ Position: UDim2?,
+ Size: UDim2?,
+
+ SizeConstraint: Enum.SizeConstraint?,
+ Visible: boolean?,
+
+ LayoutOrder: number?,
+ ZIndex: number?,
+
+ Border: Border?,
+}
+
+return ComponentBuilder.new(function(props: GuiObjectProps)
+ return {
+ 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,
+
+ Position = props.Position,
+ Size = props.Size,
+
+ SizeConstraint = props.SizeConstraint,
+ LayoutOrder = props.LayoutOrder,
+ ZIndex = props.ZIndex,
+ }, {
+ Border = props.border
+ and React.createElement("UIBorder", {
+ Color = props.Border.BorderColor and Utils.ConvertColor(props.Border.BorderColor),
+ Thickness = props.Border.Thickness,
+ }),
+ }
+end)
diff --git a/src/Builders/TextBuilder.luau b/src/Builders/TextBuilder.luau
new file mode 100644
index 0000000..46c178d
--- /dev/null
+++ b/src/Builders/TextBuilder.luau
@@ -0,0 +1,39 @@
+local Packages = script.Parent.Parent.Parent
+
+local React = require(Packages.react)
+local ComponentBuilder = require(script.Parent.Parent.Builder)
+local Utils = require(script.Parent.Parent.Utils)
+local GuiObjectBuilder = require(script.Parent.GuiObjectBuilder)
+
+export type TextProps = {
+ Text: string?,
+
+ Font: Enum.Font?,
+ LineHeight: number?,
+ RichText: boolean?,
+ TextColor: Utils.Color?,
+ TextSize: Utils.TextSize?,
+ TextWrapped: boolean?,
+
+ TextXAlignment: Enum.TextXAlignment?,
+ TextYAlignment: Enum.TextYAlignment?,
+}
+
+--- Builder for text-based objects (`TextLabel`, `TextButton`, etc.)
+return GuiObjectBuilder:expand(function(props: TextProps)
+ return {
+ Text = props.Text,
+
+ FontFace = props.Font,
+ LineHeight = props.LineHeight,
+ RichText = props.RichText,
+ TextColor3 = Utils.ConvertColor(props.TextColor),
+ TextWrapped = props.TextWrapped,
+
+ TextSize = props.TextSize == "auto" and 1 or props.TextSize,
+ TextScaled = props.TextSize == "auto",
+
+ TextXAlignment = props.TextXAlignment,
+ TextYAlignment = props.TextYAlignment,
+ }, {}
+end)
diff --git a/src/Components/Frame.luau b/src/Components/Frame.luau
new file mode 100644
index 0000000..91cdbef
--- /dev/null
+++ b/src/Components/Frame.luau
@@ -0,0 +1,3 @@
+local FrameBuilder = require(script.Parent.Parent.Builders.FrameBuilder)
+
+return FrameBuilder:build("Frame")
diff --git a/src/Utils.luau b/src/Utils.luau
new file mode 100644
index 0000000..08ce8b8
--- /dev/null
+++ b/src/Utils.luau
@@ -0,0 +1,65 @@
+local Utils = {}
+
+--- 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"
+
+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,
+})
+
+function Utils.Assign(table1: T1, table2: T2): T1 & T2
+ for k, v in pairs(table2) do
+ table1[k] = v
+ end
+
+ return table1
+end
+
+function Utils.ConvertColor(value: Color3 | string): Color3
+ if typeof(value) == "string" then
+ return Color3.fromHex(value)
+ else
+ return value
+ end
+end
+
+function Utils.ConvertAnchorPoint(value: AnchorPoint): Vector2
+ if typeof(value) == "Vector2" then
+ return value
+ end
+
+ return AnchorPointMapping[value]
+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..6cf4348
--- /dev/null
+++ b/src/init.luau
@@ -0,0 +1,5 @@
+return {
+ hello = function()
+ print("Hello world, from better-react-components!")
+ end,
+}
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/Frame.story.luau b/src/stories/Frame.story.luau
new file mode 100644
index 0000000..d97e228
--- /dev/null
+++ b/src/stories/Frame.story.luau
@@ -0,0 +1,39 @@
+local Packages = game:GetService("ReplicatedStorage").Packages
+local DevPackages = game:GetService("ReplicatedStorage").DevPackages
+
+local React = require(Packages.react)
+local ReactRoblox = require(Packages["react-roblox"])
+local UILabs = require(DevPackages["ui-labs"])
+
+local Frame = require(script.Parent.Parent.Components.Frame)
+
+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"),
+ CornerRadius = 0
+ },
+ story = function(props)
+ return React.createElement(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,
+ -- CornerRadius = props.controls.CornerRadius
+ })
+ end,
+}
+
+return story
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 (
-
-
-
-