@rbxts/uiblox 0.1.9 → 0.1.11

package/README.md

@@ -32,16 +32,16 @@ that aids UI/UX consistentency.
 
 How does it do this? Well, there are two main exports from this package:
 
-- @rbxts/uiblox -> theme
-  - An extensible Theme type + default Dark (default) and Light themes
-    - ... Light theme palette is a WIP
-  - makeStyles/createStyles utilities to serve up Instance-extended property
-    tables that can be applied to your Roact Components
-  - ThemeProvider which can wrap your application and uses Rodux to tell
-    sub-components which theme to style off of (via makeStyles)
-    - Uses Rodux
-- @rbxts/uiblox -> ui
-  - Packaged and reusable typed Roact components
+-   @rbxts/uiblox -> theme
+    -   An extensible Theme type + default Dark (default) and Light themes
+        -   ... Light theme palette is a WIP
+    -   makeStyles/createStyles utilities to serve up Instance-extended property
+        tables that can be applied to your Roact Components
+    -   ThemeProvider which can wrap your application and uses Rodux to tell
+        sub-components which theme to style off of (via makeStyles)
+        -   Uses Rodux
+-   @rbxts/uiblox -> ui
+    -   Packaged and reusable typed Roact components
 
 # How to use
 
@@ -71,13 +71,13 @@ is what we later pass to `Roact.mount()`.
 import Roact, { Component } from "@rbxts/roact";
 
 class App extends Component {
-  render() {
-    return (
-      <screengui IgnoreGuiInset ZIndexBehavior={Enum.ZIndexBehavior.Global}>
-        <AppLayout />
-      </screengui>
-    );
-  }
+	render() {
+		return (
+			<screengui IgnoreGuiInset ZIndexBehavior={Enum.ZIndexBehavior.Global}>
+				<AppLayout />
+			</screengui>
+		);
+	}
 }
 
 export default App;
@@ -100,19 +100,15 @@ import { DarkTheme, ThemeProvider } from "@rbxts/uiblox";
 import usePageLayoutStyles from "./PageLayout.styles";
 
 class AppLayout extends Component {
-  render() {
-    return (
-      <ThemeProvider theme={DarkTheme}>
-        <frame
-          Key={"AppLayout"}
-          Size={new UDim2(1, 0, 1, 0)}
-          BackgroundTransparency={1}
-        >
-          <MyComponent />
-        </frame>
-      </ThemeProvider>
-    );
-  }
+	render() {
+		return (
+			<ThemeProvider theme={DarkTheme}>
+				<frame Size={new UDim2(1, 0, 1, 0)} BackgroundTransparency={1}>
+					<MyComponent />
+				</frame>
+			</ThemeProvider>
+		);
+	}
 }
 
 export default AppLayout;
@@ -145,7 +141,7 @@ function MyComponent(props: MyComponentProps) {
   const { root, button } = useMyComponentStyles(props);
 
   return (
-    <frame Key="MyComponent" {...root}>
+    <frame {...root}>
       <Button
         variant="outlined"
         text={title}
@@ -249,12 +245,12 @@ new AppLoader().Mount();
 
 # Future work
 
-- More UI packages
-- Finish palette for LightTheme
+-   More UI packages
+-   Finish palette for LightTheme
 
 # See Also
 
-- [Storyblox](https://github.com/bjlarouche/storyblox) a UI component explorer for roblox-ts developers
-  - <img src=docs/storyblox-preview.png width=40%>
-  - Test it out here [Storyblox Pre-Release Experience](https://www.roblox.com/games/9159382473)
-  - Similar to [hoarcekat](https://github.com/Kampfkarren/hoarcekat) by Kampfkarren
+-   [Storyblox](https://github.com/bjlarouche/storyblox) a UI component explorer for roblox-ts developers
+    -   <img src=docs/storyblox-preview.png width=40%>
+    -   Test it out here [Storyblox Pre-Release Experience](https://www.roblox.com/games/9159382473)
+    -   Similar to [hoarcekat](https://github.com/Kampfkarren/hoarcekat) by Kampfkarren

package/out/theme/components/ThemeWrapper.luau

@@ -25,7 +25,6 @@ local function ThemeWrapper(props)
 		})
 	end, { theme })
 	return Roact.jsx("frame", {
-		Key = `ThemeWrapper-{currentTheme.type}`,
 		BackgroundTransparency = 1,
 		Size = UDim2.new(1, 0, 1, 0),
 		ZIndex = 500000,

package/out/ui/packages/button/components/Button.luau

@@ -47,12 +47,8 @@ local function Button(props)
 	local corner = _binding_1.corner
 	local stroke = _binding_1.stroke
 	local hovering, setHovering = useState(false)
-	local _attributes = {
-		Key = "Button",
-	}
-	for _k, _v in root do
-		_attributes[_k] = _v
-	end
+	local _attributes = table.clone(root)
+	setmetatable(_attributes, nil)
 	for _k, _v in font do
 		_attributes[_k] = _v
 	end

package/out/ui/packages/divider/components/Divider.luau

@@ -7,12 +7,8 @@ local function Divider(props)
 	local className = _binding.className
 	local _binding_1 = useDividerStyles(props)
 	local root = _binding_1.root
-	local _attributes = {
-		Key = "Divider",
-	}
-	for _k, _v in root do
-		_attributes[_k] = _v
-	end
+	local _attributes = table.clone(root)
+	setmetatable(_attributes, nil)
 	_attributes.BorderSizePixel = 0
 	if className ~= 0 and className == className and className ~= "" and className then
 		for _k, _v in className do

package/out/ui/packages/icon/components/Icon.luau

@@ -10,12 +10,8 @@ local function Icon(props)
 	local className = _binding.className
 	local _binding_1 = useIconStyles(props)
 	local container = _binding_1.container
-	local _attributes = {
-		Key = "Icon",
-	}
-	for _k, _v in container do
-		_attributes[_k] = _v
-	end
+	local _attributes = table.clone(container)
+	setmetatable(_attributes, nil)
 	if className then
 		for _k, _v in className do
 			_attributes[_k] = _v

package/out/ui/packages/iconButton/components/IconButton.luau

@@ -15,12 +15,8 @@ local function IconButton(props)
 	local _binding_1 = useIconButtonStyles(props)
 	local container = _binding_1.container
 	local hovering, setHovering = useState(false)
-	local _attributes = {
-		Key = "IconButton",
-	}
-	for _k, _v in container do
-		_attributes[_k] = _v
-	end
+	local _attributes = table.clone(container)
+	setmetatable(_attributes, nil)
 	if className then
 		for _k, _v in className do
 			_attributes[_k] = _v

package/out/ui/packages/input/components/Input.luau

@@ -50,29 +50,17 @@ local function Input(props)
 		_condition = ""
 	end
 	local input, setInput = useState(_condition)
-	local _attributes = {
-		Key = "Input",
-	}
-	for _k, _v in root do
-		_attributes[_k] = _v
-	end
+	local _attributes = table.clone(root)
+	setmetatable(_attributes, nil)
 	if className then
 		for _k, _v in className do
 			_attributes[_k] = _v
 		end
 	end
-	local _attributes_1 = {
-		Key = "Margin",
-	}
-	for _k, _v in margin do
-		_attributes_1[_k] = _v
-	end
-	local _attributes_2 = {
-		Key = "Field",
-	}
-	for _k, _v in font do
-		_attributes_2[_k] = _v
-	end
+	local _attributes_1 = table.clone(margin)
+	setmetatable(_attributes_1, nil)
+	local _attributes_2 = table.clone(font)
+	setmetatable(_attributes_2, nil)
 	for _k, _v in box do
 		_attributes_2[_k] = _v
 	end
@@ -125,12 +113,8 @@ local function Input(props)
 	})
 	local _condition_3 = helperText ~= nil
 	if _condition_3 then
-		local _attributes_3 = {
-			Key = "HelperText",
-		}
-		for _k, _v in font do
-			_attributes_3[_k] = _v
-		end
+		local _attributes_3 = table.clone(font)
+		setmetatable(_attributes_3, nil)
 		for _k, _v in helper do
 			_attributes_3[_k] = _v
 		end

package/out/ui/packages/progressBar/components/ProgressBar.luau

@@ -13,51 +13,31 @@ local function ProgressBar(_param)
 	local inner = _binding.inner
 	local fill = _binding.fill
 	local corner = _binding.corner
-	local _attributes = {
-		Key = "ProgressBar",
-	}
-	for _k, _v in container do
-		_attributes[_k] = _v
-	end
+	local _attributes = table.clone(container)
+	setmetatable(_attributes, nil)
 	if className then
 		for _k, _v in className do
 			_attributes[_k] = _v
 		end
 	end
-	local _attributes_1 = {
-		Key = "Bar",
-	}
-	for _k, _v in outer do
-		_attributes_1[_k] = _v
-	end
-	local _attributes_2 = {
-		Key = "Corner",
-	}
-	for _k, _v in corner do
-		_attributes_2[_k] = _v
-	end
+	local _attributes_1 = table.clone(outer)
+	setmetatable(_attributes_1, nil)
+	local _attributes_2 = table.clone(corner)
+	setmetatable(_attributes_2, nil)
 	local _exp = Roact.jsx("uicorner", _attributes_2)
 	local _attributes_3 = table.clone(stroke)
 	setmetatable(_attributes_3, nil)
 	local _exp_1 = Roact.jsx("uistroke", _attributes_3)
 	local _attributes_4 = table.clone(inner)
 	setmetatable(_attributes_4, nil)
-	local _attributes_5 = {
-		Key = "Corner",
-	}
-	for _k, _v in corner do
-		_attributes_5[_k] = _v
-	end
+	local _attributes_5 = table.clone(corner)
+	setmetatable(_attributes_5, nil)
 	local _exp_2 = Roact.jsx("uicorner", _attributes_5)
 	local _attributes_6 = table.clone(fill)
 	setmetatable(_attributes_6, nil)
 	_attributes_6.Size = UDim2.new(progress / 100, 0, 1, 0)
-	local _attributes_7 = {
-		Key = "Corner",
-	}
-	for _k, _v in corner do
-		_attributes_7[_k] = _v
-	end
+	local _attributes_7 = table.clone(corner)
+	setmetatable(_attributes_7, nil)
 	return Roact.jsx("frame", _attributes, Roact.jsx("frame", _attributes_1, _exp, _exp_1, Roact.jsx("frame", _attributes_4, _exp_2, Roact.jsx("frame", _attributes_6, Roact.jsx("uicorner", _attributes_7)))))
 end
 local default = markPureComponent(ProgressBar)

package/out/ui/packages/shadow/components/Shadow.luau

@@ -42,12 +42,8 @@ local function Shadow()
 		setZIndex(_condition_1 - 1)
 		parent.ClipsDescendants = false
 	end, { parent })
-	local _attributes = {
-		Key = "Shadow",
-	}
-	for _k, _v in container do
-		_attributes[_k] = _v
-	end
+	local _attributes = table.clone(container)
+	setmetatable(_attributes, nil)
 	_attributes.ZIndex = zIndex
 	_attributes.Event = {
 		AncestryChanged = function(rbx, parent)
@@ -57,7 +53,6 @@ local function Shadow()
 		end,
 	}
 	return Roact.jsx("frame", _attributes, cornerRadius ~= nil and Roact.jsx("uicorner", {
-		Key = "Corner",
 		CornerRadius = cornerRadius,
 	}))
 end

package/out/ui/packages/sidebar/components/Sidebar.luau

@@ -9,23 +9,15 @@ local function Sidebar(props)
 	local _binding_1 = useSidebarStyles(props)
 	local root = _binding_1.root
 	local container = _binding_1.container
-	local _attributes = {
-		Key = "Sidebar",
-	}
-	for _k, _v in root do
-		_attributes[_k] = _v
-	end
+	local _attributes = table.clone(root)
+	setmetatable(_attributes, nil)
 	if className ~= 0 and className == className and className ~= "" and className then
 		for _k, _v in className do
 			_attributes[_k] = _v
 		end
 	end
-	local _attributes_1 = {
-		Key = "Container",
-	}
-	for _k, _v in container do
-		_attributes_1[_k] = _v
-	end
+	local _attributes_1 = table.clone(container)
+	setmetatable(_attributes_1, nil)
 	return Roact.jsx("frame", _attributes, Roact.jsx("frame", _attributes_1, children))
 end
 local default = Sidebar

package/out/ui/packages/toast/components/Toast.luau

@@ -55,31 +55,21 @@ local function Toast(props)
 		end
 	end, {})
 	local _attributes = {
-		Key = "Toast",
 		Ref = frameRef,
 	}
 	for _k, _v in container do
 		_attributes[_k] = _v
 	end
 	local _exp = Roact.jsx("uicorner", {
-		Key = "Corner",
 		CornerRadius = UDim.new(0, DefaultTheme.shape.borderRadius),
 	})
 	local _exp_1 = Roact.jsx(Shadow)
-	local _attributes_1 = {
-		Key = "Label",
-	}
-	for _k, _v in label do
-		_attributes_1[_k] = _v
-	end
+	local _attributes_1 = table.clone(label)
+	setmetatable(_attributes_1, nil)
 	_attributes_1.Text = text
 	local _exp_2 = Roact.jsx("textlabel", _attributes_1)
-	local _attributes_2 = {
-		Key = "Close",
-	}
-	for _k, _v in close do
-		_attributes_2[_k] = _v
-	end
+	local _attributes_2 = table.clone(close)
+	setmetatable(_attributes_2, nil)
 	_attributes_2.Event = {
 		MouseButton1Click = function()
 			tween(Directions.Out)

package/out/ui/packages/treeView/components/TreeView.luau

@@ -134,12 +134,8 @@ local function TreeView(props)
 		-- Set expanded to new array
 		setExpanded(newExpanded)
 	end, { tree, filter })
-	local _attributes = {
-		Key = "TreeView",
-	}
-	for _k, _v in root do
-		_attributes[_k] = _v
-	end
+	local _attributes = table.clone(root)
+	setmetatable(_attributes, nil)
 	if className then
 		for _k, _v in className do
 			_attributes[_k] = _v
@@ -157,12 +153,8 @@ local function TreeView(props)
 	_attributes_1.variant = "body"
 	_attributes_1.family = "bold"
 	local _exp = Roact.jsx(Typography, _attributes_1)
-	local _attributes_2 = {
-		Key = "List",
-	}
-	for _k, _v in list do
-		_attributes_2[_k] = _v
-	end
+	local _attributes_2 = table.clone(list)
+	setmetatable(_attributes_2, nil)
 	_attributes_2.CanvasSize = canvasSize
 	_attributes_2.Event = {
 		AncestryChanged = resizeScrollingFrame,
@@ -187,12 +179,8 @@ local function TreeView(props)
 			end
 		end
 		if matchesBranchFilter or hasMatchingLeaf then
-			local _attributes_4 = {
-				Key = `{branch.title}-{branchIndex}`,
-			}
-			for _k, _v in row do
-				_attributes_4[_k] = _v
-			end
+			local _attributes_4 = table.clone(row)
+			setmetatable(_attributes_4, nil)
 			_attributes_4.Event = {
 				MouseButton1Click = function()
 					if branch.onClick then
@@ -264,12 +252,8 @@ local function TreeView(props)
 				local _callback_1 = function(leaf, leafIndex)
 					local matchesLeafFilter = matchesFilter(leaf.title)
 					if matchesBranchFilter or matchesLeafFilter then
-						local _attributes_6 = {
-							Key = `{branch.title}-{branchIndex}-{leaf.title}-{leafIndex}`,
-						}
-						for _k, _v in row do
-							_attributes_6[_k] = _v
-						end
+						local _attributes_6 = table.clone(row)
+						setmetatable(_attributes_6, nil)
 						_attributes_6.Event = {
 							MouseButton1Click = function()
 								setSelectedLeaf(leaf)

package/out/ui/packages/typography/components/Typography.luau

@@ -13,12 +13,8 @@ local function Typography(props)
 	local _binding_1 = useTypographyStyles(props)
 	local root = _binding_1.root
 	local variantToken = _binding_1.variantToken
-	local _attributes = {
-		Key = "Typography",
-	}
-	for _k, _v in root do
-		_attributes[_k] = _v
-	end
+	local _attributes = table.clone(root)
+	setmetatable(_attributes, nil)
 	_attributes.Text = text
 	if className ~= 0 and className == className and className ~= "" and className then
 		for _k, _v in className do

package/package.json

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