@rbxts/uiblox 0.1.3 → 0.1.5

package/README.md

@@ -128,8 +128,8 @@ then you can omit props without a type warning (i.e. `makeStyles(theme => {})`
 instead of `makeStyles<MyComponentProps>((theme, props) => {})`).
 
 ```javascript
-import Roact, { FunctionComponent } from "@rbxts/roact";
-import { useState } from "@rbxts/roact-hooked";
+import Roact from "@rbxts/roact";
+import { useState, markPureComponent } from "@rbxts/roact-hooked";
 import useMyComponentStyles from "./MyComponent.styles";
 import { Button } from "@rbxts/uiblox";
 
@@ -140,26 +140,25 @@ export interface MyComponentProps {
 }
 
 // Hooked components are very handy
-const MyComponent: FunctionComponent<MyComponentProps> =
-  (props) => {
-    const { title, bolded = false } = props;
-    const { root, button } = useMyComponentStyles(props);
-
-    return (
-      <frame Key="MyComponent" {...root}>
-        <Button
-          variant="outlined"
-          text={title}
-          size="small"
-          color="secondary"
-          family={bolded ? "bold" : "default"}
-          className={button}
-        ></Button>
-      </frame>
-    );
-  };
-
-export default MyComponent;
+function MyComponent(props: MyComponentProps) {
+  const { title, bolded = false } = props;
+  const { root, button } = useMyComponentStyles(props);
+
+  return (
+    <frame Key="MyComponent" {...root}>
+      <Button
+        variant="outlined"
+        text={title}
+        size="small"
+        color="secondary"
+        family={bolded ? "bold" : "default"}
+        className={button}
+      ></Button>
+    </frame>
+  );
+};
+
+export default markPureComponent(MyComponent);
 ```
 
 #### src/shared/ui/myComponent/MyComponent.styles.ts

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

@@ -4,5 +4,6 @@ import { Theme } from "../interfaces/theme";
 export interface ThemeProviderProps {
     theme?: Theme;
 }
-declare const _default: Roact.FunctionComponent<ThemeProviderProps>;
+declare function ThemeProvider(props: Roact.PropsWithChildren<ThemeProviderProps>): Roact.Element;
+declare const _default: typeof ThemeProvider;
 export default _default;

package/out/theme/components/ThemeProvider.lua

@@ -5,7 +5,7 @@ local StoreProvider = TS.import(script, TS.getModule(script, "@rbxts", "roact-ro
 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 = function(props)
+local function ThemeProvider(props)
 	local _binding = props
 	local theme = _binding.theme
 	local children = _binding[Roact.Children]

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

@@ -4,5 +4,6 @@ import { Theme } from "../interfaces/theme";
 export interface ThemeWrapperProps {
     theme?: Theme;
 }
-declare const _default: Roact.FunctionComponent<ThemeWrapperProps>;
+declare function ThemeWrapper(props: Roact.PropsWithChildren<ThemeWrapperProps>): Roact.Element;
+declare const _default: typeof ThemeWrapper;
 export default _default;

package/out/theme/components/ThemeWrapper.lua

@@ -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 = function(props)
+local function ThemeWrapper(props)
 	local _binding = props
 	local theme = _binding.theme
 	local children = _binding[Roact.Children]

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

@@ -23,5 +23,6 @@ export interface ButtonProps {
     mouseEnter?: () => void;
     mouseLeave?: () => void;
 }
-declare const _default: Roact.FunctionComponent<CustomizedProps<TextButton, ButtonProps>>;
+declare function Button(props: Roact.PropsWithChildren<CustomizedProps<DefaultButtonComponent, ButtonProps>>): Roact.Element;
+declare const _default: typeof Button;
 export default _default;

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

@@ -5,7 +5,7 @@ local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-ho
 local markPureComponent = _roact_hooked.markPureComponent
 local useState = _roact_hooked.useState
 local useButtonStyles = TS.import(script, script.Parent, "Button.styles").default
-local Button = function(props)
+local function Button(props)
 	local _binding = props
 	local text = _binding.text
 	if text == nil then

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

@@ -9,5 +9,7 @@ export interface IconProps {
     size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
     tint?: Color3;
 }
-declare const _default: Roact.FunctionComponent<CustomizedProps<ImageLabel, IconProps>>;
+type DefaultIconComponent = ImageLabel;
+declare function Icon(props: CustomizedProps<DefaultIconComponent, IconProps>): Roact.Element;
+declare const _default: typeof Icon;
 export default _default;

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

@@ -3,7 +3,7 @@ local TS = _G[script]
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
 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 = function(props)
+local function Icon(props)
 	local _binding = props
 	local icon = _binding.icon
 	local tint = _binding.tint

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

@@ -11,5 +11,7 @@ export interface IconButtonProps {
     selected?: boolean;
     onClick?: () => void;
 }
-declare const _default: Roact.FunctionComponent<CustomizedProps<ImageButton, IconButtonProps>>;
+type DefaultIconButtonComponent = ImageButton;
+declare function IconButton(props: CustomizedProps<DefaultIconButtonComponent, IconButtonProps>): Roact.Element;
+declare const _default: typeof IconButton;
 export default _default;

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

@@ -5,7 +5,7 @@ local _roact_hooked = TS.import(script, TS.getModule(script, "@rbxts", "roact-ho
 local markPureComponent = _roact_hooked.markPureComponent
 local useState = _roact_hooked.useState
 local useIconButtonStyles = TS.import(script, script.Parent, "IconButton.styles").default
-local IconButton = function(props)
+local function IconButton(props)
 	local _binding = props
 	local icon = _binding.icon
 	local selected = _binding.selected

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

@@ -23,5 +23,6 @@ export interface InputProps {
     onBlur?: () => void;
     onEnterPressed?: (text: string) => void;
 }
-declare const _default: Roact.FunctionComponent<CustomizedProps<Frame, InputProps>>;
+declare function Input(props: CustomizedProps<DefaultInputComponent, InputProps>): Roact.Element;
+declare const _default: typeof Input;
 export default _default;

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

@@ -8,7 +8,7 @@ local classNames = TS.import(script, script.Parent.Parent.Parent.Parent.Parent,
 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 = function(props)
+local function Input(props)
 	local _binding = props
 	local text = _binding.text
 	local placeholder = _binding.placeholder

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

@@ -6,5 +6,6 @@ export interface ProgressBarProps {
     progress: number;
     className?: WriteableStyle<Frame>;
 }
-declare const _default: Roact.FunctionComponent<ProgressBarProps>;
+declare function ProgressBar({ progress, className }: ProgressBarProps): Roact.Element;
+declare const _default: typeof ProgressBar;
 export default _default;

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

@@ -3,7 +3,7 @@ local TS = _G[script]
 local Roact = TS.import(script, TS.getModule(script, "@rbxts", "roact").src)
 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 = function(_param)
+local function ProgressBar(_param)
 	local progress = _param.progress
 	local className = _param.className
 	local _binding = useProgressBarStyles()

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

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

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

@@ -6,7 +6,7 @@ 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 = function()
+local function Shadow()
 	local _binding = useShadowStyles()
 	local container = _binding.container
 	local parent, setParent = useState(nil)

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

@@ -8,5 +8,6 @@ export interface ToastProps {
     variant?: ToastVariants;
     toggledAt?: number;
 }
-declare const _default: Roact.FunctionComponent<ToastProps>;
+declare function Toast(props: ToastProps): Roact.Element;
+declare const _default: typeof Toast;
 export default _default;

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

@@ -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 = function(props)
+local function Toast(props)
 	local _binding = props
 	local text = _binding.text
 	local onDismiss = _binding.onDismiss

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

@@ -4,10 +4,12 @@ import Roact from "@rbxts/roact";
 import { CustomizedProps } from "../../../../theme";
 import { Icons } from "../../../enums";
 import Tree from "../interfaces/Tree";
+type DefaultTreeViewComponent = Frame;
 export interface TreeViewProps {
     tree: Tree;
     icon?: Icons;
     filter?: string;
 }
-declare const _default: Roact.FunctionComponent<CustomizedProps<Frame, TreeViewProps>>;
+declare function TreeView(props: CustomizedProps<DefaultTreeViewComponent, TreeViewProps>): Roact.Element;
+declare const _default: typeof TreeView;
 export default _default;

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

@@ -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 = function(props)
+local function TreeView(props)
 	local _binding = props
 	local tree = _binding.tree
 	local icon = _binding.icon

package/package.json

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