@rbxts/uiblox 0.1.29 → 0.1.31

package/out/theme/types/types.d.ts

@@ -3,6 +3,7 @@ import { WriteableStyle } from "../interfaces/index";
 export interface CommonProps<T extends Instance> extends PropsWithChildren {
     className?: WriteableStyle<T>;
     component?: T;
+    key?: string;
 }
 export type BaseDefaultProps<T extends Instance, P> = CommonProps<T> & P;
 export type BaseCustomizedProps<T extends Instance, P> = BaseDefaultProps<T, P>;

package/out/ui/index.d.ts

@@ -2,6 +2,9 @@ export * from "./constants/index";
 export * from "./enums/index";
 export { Divider } from "./packages/index";
 export { DividerProps } from "./packages/index";
+export { ErrorBoundary } from "./packages/index";
+export { ErrorBoundaryProps } from "./packages/index";
+export { ErrorBoundaryState } from "./packages/index";
 export { Icon } from "./packages/index";
 export { IconProps } from "./packages/index";
 export { IconButton } from "./packages/index";
@@ -11,6 +14,10 @@ export { InputProps } from "./packages/index";
 export { InputColor } from "./packages/index";
 export { InputMargin } from "./packages/index";
 export { InputVariant } from "./packages/index";
+export { Grid } from "./packages/index";
+export { GridProps } from "./packages/index";
+export { List } from "./packages/index";
+export { ListProps } from "./packages/index";
 export { Preloader } from "./packages/index";
 export { PreloaderProps } from "./packages/index";
 export { PreloaderAssets as Assets } from "./packages/index";

package/out/ui/init.luau

@@ -8,9 +8,12 @@ for _k, _v in TS.import(script, script, "enums") or {} do
 	exports[_k] = _v
 end
 exports.Divider = TS.import(script, script, "packages").Divider
+exports.ErrorBoundary = TS.import(script, script, "packages").ErrorBoundary
 exports.Icon = TS.import(script, script, "packages").Icon
 exports.IconButton = TS.import(script, script, "packages").IconButton
 exports.Input = TS.import(script, script, "packages").Input
+exports.Grid = TS.import(script, script, "packages").Grid
+exports.List = TS.import(script, script, "packages").List
 exports.Preloader = TS.import(script, script, "packages").Preloader
 exports.ProgressBar = TS.import(script, script, "packages").ProgressBar
 exports.Shadow = TS.import(script, script, "packages").Shadow

package/out/ui/packages/errorBoundary/components/ErrorBoundary.d.ts

@@ -0,0 +1,17 @@
+import React, { Component, ErrorInfo } from "@rbxts/react";
+export interface ErrorBoundaryProps {
+    fallback?: (error: unknown) => React.Element;
+}
+export interface ErrorBoundaryState {
+    hasError: boolean;
+    message?: unknown;
+}
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    componentDidCatch(message: unknown, info: ErrorInfo): void;
+    render(): boolean | ReadonlyMap<React.Key, React.ReactNode> | {
+        readonly [key: string]: React.ReactNode;
+        readonly [key: number]: React.ReactNode;
+    } | readonly React.ReactNode[] | JSX.Element | undefined;
+}
+export default ErrorBoundary;

package/out/ui/packages/errorBoundary/components/ErrorBoundary.luau

@@ -0,0 +1,46 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local Component = _react.Component
+local ReactComponent = _react.ReactComponent
+local ErrorBoundary
+do
+	local super = Component
+	ErrorBoundary = setmetatable({}, {
+		__tostring = function()
+			return "ErrorBoundary"
+		end,
+		__index = super,
+	})
+	ErrorBoundary.__index = ErrorBoundary
+	function ErrorBoundary.new(...)
+		local self = setmetatable({}, ErrorBoundary)
+		return self:constructor(...) or self
+	end
+	function ErrorBoundary:constructor(...)
+		super.constructor(self, ...)
+		self.state = {
+			hasError = false,
+		}
+	end
+	function ErrorBoundary:componentDidCatch(message, info)
+		warn(message, info.componentStack)
+		self:setState({
+			hasError = true,
+			message = `{message} {info.componentStack}`,
+		})
+	end
+	function ErrorBoundary:render()
+		if self.state.hasError then
+			return if self.props.fallback ~= nil then self.props.fallback(self.state.message) else React.createElement(React.Fragment)
+		end
+		return self.props.children
+	end
+	ErrorBoundary = ReactComponent(ErrorBoundary) or ErrorBoundary
+end
+local default = ErrorBoundary
+return {
+	ErrorBoundary = ErrorBoundary,
+	default = default,
+}

package/out/ui/packages/errorBoundary/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ErrorBoundary } from "./components/ErrorBoundary";
+export { ErrorBoundaryProps } from "./components/ErrorBoundary";
+export { ErrorBoundaryState } from "./components/ErrorBoundary";
+export * from "./components/ErrorBoundary";

package/out/ui/packages/errorBoundary/init.luau

@@ -0,0 +1,8 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.ErrorBoundary = TS.import(script, script, "components", "ErrorBoundary").default
+for _k, _v in TS.import(script, script, "components", "ErrorBoundary") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/ui/packages/index.d.ts

@@ -1,7 +1,9 @@
 export * from "./divider/index";
+export * from "./errorBoundary/index";
 export * from "./icon/index";
 export * from "./iconButton/index";
 export * from "./input/index";
+export * from "./layout/index";
 export * from "./preloader/index";
 export * from "./progressBar/index";
 export * from "./shadow/index";

package/out/ui/packages/init.luau

@@ -4,6 +4,9 @@ local exports = {}
 for _k, _v in TS.import(script, script, "divider") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "errorBoundary") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "icon") or {} do
 	exports[_k] = _v
 end
@@ -13,6 +16,9 @@ end
 for _k, _v in TS.import(script, script, "input") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "layout") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "preloader") or {} do
 	exports[_k] = _v
 end

package/out/ui/packages/layout/components/Grid.d.ts

@@ -0,0 +1,13 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface GridProps {
+    cellPadding?: UDim;
+    cellSize?: UDim2;
+    fillDirection?: Enum.FillDirection;
+    fillDirectionMaxCells?: number;
+    sortOrder?: Enum.SortOrder;
+    startCorner: Enum.StartCorner;
+    horizontalAlignment?: Enum.HorizontalAlignment;
+    veritcalAlignment?: Enum.VerticalAlignment;
+}
+declare function Grid(props: CustomizedProps<Frame, GridProps>): JSX.Element;
+export default Grid;

package/out/ui/packages/layout/components/Grid.luau

@@ -0,0 +1,93 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local makeStyles = _theme.makeStyles
+local createStyles = _theme.createStyles
+local useGridStyles = makeStyles(function(_, props)
+	return createStyles({
+		baseGrid = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 0,
+			BorderSizePixel = 0,
+		},
+		baseLayout = {
+			CellPadding = props.cellPadding,
+			CellSize = props.cellSize,
+			FillDirection = props.fillDirection,
+			FillDirectionMaxCells = props.fillDirectionMaxCells,
+			SortOrder = props.sortOrder,
+			StartCorner = props.startCorner,
+			HorizontalAlignment = props.horizontalAlignment,
+			VerticalAlignment = props.veritcalAlignment,
+		},
+	})
+end)
+local function Grid(props)
+	local _binding = props
+	local cellPadding = _binding.cellPadding
+	if cellPadding == nil then
+		cellPadding = UDim.new(0, 0)
+	end
+	local cellSize = _binding.cellSize
+	if cellSize == nil then
+		cellSize = UDim2.fromOffset(100, 100)
+	end
+	local fillDirection = _binding.fillDirection
+	if fillDirection == nil then
+		fillDirection = Enum.FillDirection.Horizontal
+	end
+	local fillDirectionMaxCells = _binding.fillDirectionMaxCells
+	if fillDirectionMaxCells == nil then
+		fillDirectionMaxCells = 0
+	end
+	local sortOrder = _binding.sortOrder
+	if sortOrder == nil then
+		sortOrder = Enum.SortOrder.LayoutOrder
+	end
+	local startCorner = _binding.startCorner
+	if startCorner == nil then
+		startCorner = Enum.StartCorner.TopLeft
+	end
+	local horizontalAlignment = _binding.horizontalAlignment
+	if horizontalAlignment == nil then
+		horizontalAlignment = Enum.HorizontalAlignment.Left
+	end
+	local veritcalAlignment = _binding.veritcalAlignment
+	if veritcalAlignment == nil then
+		veritcalAlignment = Enum.VerticalAlignment.Top
+	end
+	local className = _binding.className
+	local children = _binding.children
+	local _binding_1 = useGridStyles({
+		cellPadding = cellPadding,
+		cellSize = cellSize,
+		fillDirection = fillDirection,
+		fillDirectionMaxCells = fillDirectionMaxCells,
+		sortOrder = sortOrder,
+		startCorner = startCorner,
+		horizontalAlignment = horizontalAlignment,
+		veritcalAlignment = veritcalAlignment,
+	})
+	local baseGrid = _binding_1.baseGrid
+	local baseLayout = _binding_1.baseLayout
+	local _attributes = {
+		key = "grid",
+	}
+	for _k, _v in baseGrid do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	local _attributes_1 = table.clone(baseLayout)
+	setmetatable(_attributes_1, nil)
+	return React.createElement("frame", _attributes, React.createElement("uigridlayout", _attributes_1), children)
+end
+local default = Grid
+return {
+	default = default,
+}

package/out/ui/packages/layout/components/List.d.ts

@@ -0,0 +1,13 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface ListProps {
+    padding?: UDim;
+    fillDirection?: Enum.FillDirection;
+    sortOrder?: Enum.SortOrder;
+    wrap?: "wrap" | "no-wrap";
+    horizontalAlignment?: Enum.HorizontalAlignment;
+    horizontalFlex?: Enum.UIFlexAlignment;
+    veritcalAlignment?: Enum.VerticalAlignment;
+    verticalFlex?: Enum.UIFlexAlignment;
+}
+declare function List(props: CustomizedProps<Frame, ListProps>): JSX.Element;
+export default List;

package/out/ui/packages/layout/components/List.luau

@@ -0,0 +1,89 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local makeStyles = _theme.makeStyles
+local createStyles = _theme.createStyles
+local useListStyles = makeStyles(function(_, props)
+	return createStyles({
+		baseList = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 0,
+			BorderSizePixel = 0,
+		},
+		baseLayout = {
+			Padding = props.padding,
+			FillDirection = props.fillDirection,
+			SortOrder = props.sortOrder,
+			Wraps = props.wrap == "wrap",
+			HorizontalAlignment = props.horizontalAlignment,
+			HorizontalFlex = props.horizontalFlex,
+			VerticalAlignment = props.veritcalAlignment,
+			VerticalFlex = props.verticalFlex,
+		},
+	})
+end)
+local function List(props)
+	local _binding = props
+	local padding = _binding.padding
+	if padding == nil then
+		padding = UDim.new(0, 0)
+	end
+	local fillDirection = _binding.fillDirection
+	if fillDirection == nil then
+		fillDirection = Enum.FillDirection.Horizontal
+	end
+	local sortOrder = _binding.sortOrder
+	if sortOrder == nil then
+		sortOrder = Enum.SortOrder.LayoutOrder
+	end
+	local wrap = _binding.wrap
+	if wrap == nil then
+		wrap = "wrap"
+	end
+	local horizontalAlignment = _binding.horizontalAlignment
+	if horizontalAlignment == nil then
+		horizontalAlignment = Enum.HorizontalAlignment.Left
+	end
+	local horizontalFlex = _binding.horizontalFlex
+	if horizontalFlex == nil then
+		horizontalFlex = Enum.UIFlexAlignment.None
+	end
+	local veritcalAlignment = _binding.veritcalAlignment
+	if veritcalAlignment == nil then
+		veritcalAlignment = Enum.VerticalAlignment.Top
+	end
+	local verticalFlex = _binding.verticalFlex
+	if verticalFlex == nil then
+		verticalFlex = Enum.UIFlexAlignment.None
+	end
+	local className = _binding.className
+	local children = _binding.children
+	local _binding_1 = useListStyles({
+		padding = padding,
+		fillDirection = fillDirection,
+		sortOrder = sortOrder,
+		wrap = wrap,
+		horizontalAlignment = horizontalAlignment,
+		horizontalFlex = horizontalFlex,
+		veritcalAlignment = veritcalAlignment,
+		verticalFlex = verticalFlex,
+	})
+	local baseList = _binding_1.baseList
+	local baseLayout = _binding_1.baseLayout
+	local _attributes = table.clone(baseList)
+	setmetatable(_attributes, nil)
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	local _attributes_1 = table.clone(baseLayout)
+	setmetatable(_attributes_1, nil)
+	return React.createElement("frame", _attributes, React.createElement("uilistlayout", _attributes_1), children)
+end
+local default = List
+return {
+	default = default,
+}

package/out/ui/packages/layout/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Grid } from "./components/Grid";
+export { GridProps } from "./components/Grid";
+export * from "./components/Grid";
+export { default as List } from "./components/List";
+export { ListProps } from "./components/List";
+export * from "./components/List";

package/out/ui/packages/layout/init.luau

@@ -0,0 +1,12 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.Grid = TS.import(script, script, "components", "Grid").default
+for _k, _v in TS.import(script, script, "components", "Grid") or {} do
+	exports[_k] = _v
+end
+exports.List = TS.import(script, script, "components", "List").default
+for _k, _v in TS.import(script, script, "components", "List") or {} do
+	exports[_k] = _v
+end
+return exports

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.1.29",
+	"version": "0.1.31",
 	"description": "UI Library and theming for roblox-ts projects",
 	"main": "out/init.lua",
 	"scripts": {