@rbxts/uiblox 0.1.2 → 0.1.3

package/README.md

@@ -128,7 +128,7 @@ then you can omit props without a type warning (i.e. `makeStyles(theme => {})`
 instead of `makeStyles<MyComponentProps>((theme, props) => {})`).
 
 ```javascript
-import Roact from "@rbxts/roact";
+import Roact, { FunctionComponent } from "@rbxts/roact";
 import { useState } from "@rbxts/roact-hooked";
 import useMyComponentStyles from "./MyComponent.styles";
 import { Button } from "@rbxts/uiblox";
@@ -140,10 +140,8 @@ export interface MyComponentProps {
 }
 
 // Hooked components are very handy
-const MyComponent =
-  hooked <
-  MyComponentProps >
-  ((props) => {
+const MyComponent: FunctionComponent<MyComponentProps> =
+  (props) => {
     const { title, bolded = false } = props;
     const { root, button } = useMyComponentStyles(props);
 
@@ -159,7 +157,7 @@ const MyComponent =
         ></Button>
       </frame>
     );
-  });
+  };
 
 export default MyComponent;
 ```

package/out/theme/components/ThemeProvider.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
 import { Theme } from "../interfaces/theme";
 export interface ThemeProviderProps {
     theme?: Theme;
 }
-declare const ThemeProvider: (props: ThemeProviderProps) => Roact.Element;
-export default ThemeProvider;
+declare const _default: Roact.FunctionComponent<ThemeProviderProps>;
+export default _default;

package/out/theme/components/ThemeProvider.lua

@@ -1,11 +1,11 @@
 -- Compiled with roblox-ts v2.2.0
 local TS = _G[script]
-local withHooks = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).withHooks
+local markPureComponent = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).markPureComponent
 local StoreProvider = TS.import(script, TS.getModule(script, "@rbxts", "roact-rodux-hooked").src).StoreProvider
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
 local themeStore = TS.import(script, script.Parent, "ThemeStore").themeStore
 local ThemeWrapper = TS.import(script, script.Parent, "ThemeWrapper").default
-local ThemeProvider = withHooks(function(props)
+local ThemeProvider = function(props)
 	local _binding = props
 	local theme = _binding.theme
 	local children = _binding[Roact.Children]
@@ -30,8 +30,8 @@ local ThemeProvider = withHooks(function(props)
 	end
 	_children[_length + 1] = Roact.createElement(ThemeWrapper, _attributes_1, _children_1)
 	return Roact.createElement(StoreProvider, _attributes, _children)
-end)
-local default = ThemeProvider
+end
+local default = markPureComponent(ThemeProvider)
 return {
 	default = default,
 }

package/out/theme/components/ThemeWrapper.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
 import { Theme } from "../interfaces/theme";
 export interface ThemeWrapperProps {
     theme?: Theme;
 }
-declare const ThemeWrapper: (props: ThemeWrapperProps) => Roact.Element;
-export default ThemeWrapper;
+declare const _default: Roact.FunctionComponent<ThemeWrapperProps>;
+export default _default;

package/out/theme/components/ThemeWrapper.lua

@@ -1,7 +1,7 @@
 -- Compiled with roblox-ts v2.2.0
 local TS = _G[script]
 local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local withHooks = _roact_hooked.withHooks
+local markPureComponent = _roact_hooked.markPureComponent
 local useEffect = _roact_hooked.useEffect
 local useRef = _roact_hooked.useRef
 local _roact_rodux_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-rodux-hooked").src)
@@ -10,7 +10,7 @@ local useSelector = _roact_rodux_hooked.useSelector
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
 local selectTheme = TS.import(script, script.Parent, "ThemeStore").selectTheme
 local DefaultTheme = TS.import(script, script.Parent.Parent, "themes").default
-local ThemeWrapper = withHooks(function(props)
+local ThemeWrapper = function(props)
 	local _binding = props
 	local theme = _binding.theme
 	local children = _binding[Roact.Children]
@@ -45,8 +45,8 @@ local ThemeWrapper = withHooks(function(props)
 	return Roact.createFragment({
 		["ThemeWrapper-" .. currentTheme.type] = Roact.createElement("Frame", _attributes, _children),
 	})
-end)
-local default = ThemeWrapper
+end
+local default = markPureComponent(ThemeWrapper)
 return {
 	default = default,
 }

package/out/ui/packages/button/components/Button.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="@rbxts/types" />
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
 import { CustomizedProps } from "../../../../theme";
 import { ButtonSize, ButtonColor, ButtonVariant } from "../types";
@@ -22,5 +23,5 @@ export interface ButtonProps {
     mouseEnter?: () => void;
     mouseLeave?: () => void;
 }
-declare const Button: (props: CustomizedProps<TextButton, ButtonProps>) => Roact.Element;
-export default Button;
+declare const _default: Roact.FunctionComponent<CustomizedProps<TextButton, ButtonProps>>;
+export default _default;

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

@@ -2,10 +2,10 @@
 local TS = _G[script]
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
 local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local withHooks = _roact_hooked.withHooks
+local markPureComponent = _roact_hooked.markPureComponent
 local useState = _roact_hooked.useState
 local useButtonStyles = TS.import(script, script.Parent, "Button.styles").default
-local Button = withHooks(function(props)
+local Button = function(props)
 	local _binding = props
 	local text = _binding.text
 	if text == nil then
@@ -168,8 +168,8 @@ local Button = withHooks(function(props)
 	return Roact.createFragment({
 		Button = Roact.createElement("TextButton", _attributes, _children),
 	})
-end)
-local default = Button
+end
+local default = markPureComponent(Button)
 return {
 	default = default,
 }

package/out/ui/packages/icon/components/Icon.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="@rbxts/types" />
+/// <reference types="@rbxts/types" />
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
 import { Icons } from "../../../enums";
 import { CustomizedProps } from "../../../../theme";
@@ -7,5 +9,5 @@ export interface IconProps {
     size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
     tint?: Color3;
 }
-declare const Icon: (props: CustomizedProps<ImageLabel, IconProps>) => Roact.Element;
-export default Icon;
+declare const _default: Roact.FunctionComponent<CustomizedProps<ImageLabel, IconProps>>;
+export default _default;

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

@@ -1,9 +1,9 @@
 -- Compiled with roblox-ts v2.2.0
 local TS = _G[script]
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
-local withHooks = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).withHooks
+local markPureComponent = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).markPureComponent
 local useIconStyles = TS.import(script, script.Parent, "Icon.styles").default
-local Icon = withHooks(function(props)
+local Icon = function(props)
 	local _binding = props
 	local icon = _binding.icon
 	local tint = _binding.tint
@@ -24,8 +24,8 @@ local Icon = withHooks(function(props)
 	return Roact.createFragment({
 		Icon = Roact.createElement("ImageLabel", _attributes),
 	})
-end)
-local default = Icon
+end
+local default = markPureComponent(Icon)
 return {
 	default = default,
 }

package/out/ui/packages/iconButton/components/IconButton.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="@rbxts/types" />
+/// <reference types="@rbxts/types" />
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
 import { Icons } from "../../../enums";
 import { CustomizedProps } from "../../../../theme";
@@ -9,5 +11,5 @@ export interface IconButtonProps {
     selected?: boolean;
     onClick?: () => void;
 }
-declare const IconButton: (props: CustomizedProps<ImageButton, IconButtonProps>) => Roact.Element;
-export default IconButton;
+declare const _default: Roact.FunctionComponent<CustomizedProps<ImageButton, IconButtonProps>>;
+export default _default;

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

@@ -2,10 +2,10 @@
 local TS = _G[script]
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
 local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local withHooks = _roact_hooked.withHooks
+local markPureComponent = _roact_hooked.markPureComponent
 local useState = _roact_hooked.useState
 local useIconButtonStyles = TS.import(script, script.Parent, "IconButton.styles").default
-local IconButton = withHooks(function(props)
+local IconButton = function(props)
 	local _binding = props
 	local icon = _binding.icon
 	local selected = _binding.selected
@@ -41,8 +41,8 @@ local IconButton = withHooks(function(props)
 	return Roact.createFragment({
 		IconButton = Roact.createElement("ImageButton", _attributes),
 	})
-end)
-local default = IconButton
+end
+local default = markPureComponent(IconButton)
 return {
 	default = default,
 }

package/out/ui/packages/input/components/Input.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="@rbxts/types" />
 /// <reference types="@rbxts/types" />
 /// <reference types="@rbxts/types" />
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
 import { CustomizedProps } from "../../../../theme";
 import { InputColor, InputMargin, InputVariant } from "../types";
@@ -22,5 +23,5 @@ export interface InputProps {
     onBlur?: () => void;
     onEnterPressed?: (text: string) => void;
 }
-declare const Input: (props: CustomizedProps<Frame, InputProps>) => Roact.Element;
-export default Input;
+declare const _default: Roact.FunctionComponent<CustomizedProps<Frame, InputProps>>;
+export default _default;

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

@@ -3,12 +3,12 @@ local TS = _G[script]
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
 local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
 local useState = _roact_hooked.useState
-local withHooks = _roact_hooked.withHooks
+local markPureComponent = _roact_hooked.markPureComponent
 local classNames = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").classNames
 local Divider = TS.import(script, script.Parent.Parent.Parent, "divider").Divider
 local Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
 local useInputStyles = TS.import(script, script.Parent, "Input.styles").default
-local Input = withHooks(function(props)
+local Input = function(props)
 	local _binding = props
 	local text = _binding.text
 	local placeholder = _binding.placeholder
@@ -158,8 +158,8 @@ local Input = withHooks(function(props)
 	return Roact.createFragment({
 		Input = Roact.createElement("Frame", _attributes, _children),
 	})
-end)
-local default = Input
+end
+local default = markPureComponent(Input)
 return {
 	default = default,
 }

package/out/ui/packages/progressBar/components/ProgressBar.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="@rbxts/types" />
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
 import { WriteableStyle } from "../../../../theme";
 export interface ProgressBarProps {
     progress: number;
     className?: WriteableStyle<Frame>;
 }
-declare const ProgressBar: (props: ProgressBarProps) => Roact.Element;
-export default ProgressBar;
+declare const _default: Roact.FunctionComponent<ProgressBarProps>;
+export default _default;

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

@@ -1,9 +1,9 @@
 -- Compiled with roblox-ts v2.2.0
 local TS = _G[script]
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
-local withHooks = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).withHooks
+local markPureComponent = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src).markPureComponent
 local useProgressBarStyles = TS.import(script, script.Parent, "ProgressBar.styles").default
-local ProgressBar = withHooks(function(_param)
+local ProgressBar = function(_param)
 	local progress = _param.progress
 	local className = _param.className
 	local _binding = useProgressBarStyles()
@@ -69,8 +69,8 @@ local ProgressBar = withHooks(function(_param)
 	return Roact.createFragment({
 		ProgressBar = Roact.createElement("Frame", _attributes, _children),
 	})
-end)
-local default = ProgressBar
+end
+local default = markPureComponent(ProgressBar)
 return {
 	default = default,
 }

package/out/ui/packages/shadow/components/Shadow.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
-declare const Shadow: (props: {}) => Roact.Element;
-export default Shadow;
+declare const _default: Roact.FunctionComponent;
+export default _default;

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

@@ -2,11 +2,11 @@
 local TS = _G[script]
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
 local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local withHooks = _roact_hooked.withHooks
+local markPureComponent = _roact_hooked.markPureComponent
 local useEffect = _roact_hooked.useEffect
 local useState = _roact_hooked.useState
 local useShadowStyles = TS.import(script, script.Parent, "Shadow.styles").default
-local Shadow = withHooks(function()
+local Shadow = function()
 	local _binding = useShadowStyles()
 	local container = _binding.container
 	local parent, setParent = useState(nil)
@@ -65,8 +65,8 @@ local Shadow = withHooks(function()
 	return Roact.createFragment({
 		Shadow = Roact.createElement("Frame", _attributes, _children),
 	})
-end)
-local default = Shadow
+end
+local default = markPureComponent(Shadow)
 return {
 	default = default,
 }

package/out/ui/packages/toast/components/Toast.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
 import ToastVariants from "../enums/ToastVariants";
 export interface ToastProps {
@@ -7,5 +8,5 @@ export interface ToastProps {
     variant?: ToastVariants;
     toggledAt?: number;
 }
-declare const Toast: (props: ToastProps) => Roact.Element;
-export default Toast;
+declare const _default: Roact.FunctionComponent<ToastProps>;
+export default _default;

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

@@ -3,7 +3,7 @@ local TS = _G[script]
 local BoatTween = TS.import(script, TS.getModule(script, "@rbxts", "boat-tween").src).BoatTween
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
 local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local withHooks = _roact_hooked.withHooks
+local markPureComponent = _roact_hooked.markPureComponent
 local useEffect = _roact_hooked.useEffect
 local useRef = _roact_hooked.useRef
 local DefaultTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").DefaultTheme
@@ -11,7 +11,7 @@ local Directions = TS.import(script, script.Parent.Parent.Parent.Parent, "enums"
 local Shadow = TS.import(script, script.Parent.Parent.Parent, "shadow").Shadow
 local useToastStyles = TS.import(script, script.Parent, "Toast.styles").default
 local TWEEN_DURATION = 0.5
-local Toast = withHooks(function(props)
+local Toast = function(props)
 	local _binding = props
 	local text = _binding.text
 	local onDismiss = _binding.onDismiss
@@ -87,8 +87,8 @@ local Toast = withHooks(function(props)
 	return Roact.createFragment({
 		Toast = Roact.createElement("Frame", _attributes, _children),
 	})
-end)
-local default = Toast
+end
+local default = markPureComponent(Toast)
 return {
 	default = default,
 }

package/out/ui/packages/treeView/components/TreeView.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="@rbxts/types" />
+/// <reference types="roact" />
 import Roact from "@rbxts/roact";
 import { CustomizedProps } from "../../../../theme";
 import { Icons } from "../../../enums";
@@ -7,5 +9,5 @@ export interface TreeViewProps {
     icon?: Icons;
     filter?: string;
 }
-declare const TreeView: (props: CustomizedProps<Frame, TreeViewProps>) => Roact.Element;
-export default TreeView;
+declare const _default: Roact.FunctionComponent<CustomizedProps<Frame, TreeViewProps>>;
+export default _default;

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

@@ -2,7 +2,7 @@
 local TS = _G[script]
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
 local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-hooked").src)
-local withHooks = _roact_hooked.withHooks
+local markPureComponent = _roact_hooked.markPureComponent
 local useCallback = _roact_hooked.useCallback
 local useEffect = _roact_hooked.useEffect
 local useState = _roact_hooked.useState
@@ -11,7 +11,7 @@ local Icon = TS.import(script, script.Parent.Parent.Parent, "icon").Icon
 local Typography = TS.import(script, script.Parent.Parent.Parent, "typography").Typography
 local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
 local useTreeViewStyles = TS.import(script, script.Parent, "TreeView.styles").default
-local TreeView = withHooks(function(props)
+local TreeView = function(props)
 	local _binding = props
 	local tree = _binding.tree
 	local icon = _binding.icon
@@ -332,8 +332,8 @@ local TreeView = withHooks(function(props)
 	return Roact.createFragment({
 		TreeView = Roact.createElement("Frame", _attributes, _children),
 	})
-end)
-local default = TreeView
+end
+local default = markPureComponent(TreeView)
 return {
 	default = default,
 }

package/package.json

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