swap to roact-hooked, init roact-reflex

src/ReplicatedStorage/reflex/uiStore/hooks/useRootProducer.ts

@@ -0,0 +1,4 @@
+import { UseProducerHook, useProducer } from "@rbxts/roact-reflex"
+import { rootProducer } from "../producer"
+
+export const useRootProducer: UseProducerHook<rootProducer> = useProducer

src/ReplicatedStorage/reflex/uiStore/producer/index.ts

@@ -0,0 +1,9 @@
+import { InferDispatchers, InferState, combineProducers, loggerMiddleware } from "@rbxts/reflex"
+
+export type rootProducer = typeof producer
+export type rootState = InferState<rootProducer>
+export type rootDispatchers = InferDispatchers<rootProducer>
+
+export const producer = combineProducers({
+    
+}).applyMiddleware(loggerMiddleware)

src/ReplicatedStorage/ui/padding.tsx

@@ -1,32 +1,32 @@
-import Hooks from "@rbxts/roact-hooks"
+import Hooks from "@rbxts/roact-hooked"
 import Roact from "@rbxts/roact"
 
-interface PaddingProps extends Roact.JsxInstanceProperties<UIPadding> {
-	Padding?: UDim | Roact.Binding<UDim>
-	PaddingX?: UDim | Roact.Binding<UDim>
-	PaddingY?: UDim | Roact.Binding<UDim>
+interface paddingProps extends Roact.JsxInstanceProperties<UIPadding> {
+	padding?: UDim | Roact.Binding<UDim>
+	paddingX?: UDim | Roact.Binding<UDim>
+	paddingY?: UDim | Roact.Binding<UDim>
 
 	Event?: Roact.JsxInstanceEvents<UIPadding>
 	Change?: Roact.JsxInstanceChangeEvents<UIPadding>
 }
 
-const padding: Hooks.FC<PaddingProps> = (props, _hooks) => {
-	const { Padding, PaddingX, PaddingY } = props
+function padding(props: paddingProps): Roact.Element {
+	const { padding, paddingX, paddingY } = props
 
-	const spreadableProps = { ...props } as Partial<PaddingProps>
-	delete spreadableProps.Padding
-	delete spreadableProps.PaddingX
-	delete spreadableProps.PaddingY
+	const spreadableProps = { ...props } as Partial<paddingProps>
+	delete spreadableProps.padding
+	delete spreadableProps.paddingX
+	delete spreadableProps.paddingY
 
 	return (
 		<uipadding
 			{...spreadableProps}
-			PaddingBottom={PaddingY ?? Padding}
-			PaddingTop={PaddingY ?? Padding}
-			PaddingLeft={PaddingX || Padding}
-			PaddingRight={PaddingX || Padding}
+			PaddingBottom={paddingY ?? padding}
+			PaddingTop={paddingY ?? padding}
+			PaddingLeft={paddingX || padding}
+			PaddingRight={paddingX || padding}
 		/>
 	)
 }
 
-export default new Hooks(Roact)(padding)
+export default padding

src/ReplicatedStorage/ui/percentageBar.tsx

@@ -1,64 +0,0 @@
-import Hooks from "@rbxts/roact-hooks"
-import Roact from "@rbxts/roact"
-import Padding from "./padding"
-
-function colorBetween(startColor: Color3, endColor: Color3, degree: number): Color3 {
-    return startColor.Lerp(endColor, degree)
-}
-
-interface percentageBarProps extends Roact.JsxInstanceProperties<UIPadding> {
-	current: number
-    max: number
-    highColor: Color3
-    lowColor: Color3
-    bgColor: Color3
-    text?: string
-
-	Event?: Roact.JsxInstanceEvents<Frame>
-	Change?: Roact.JsxInstanceChangeEvents<Frame>
-}
-
-const percentageBar: Hooks.FC<percentageBarProps> = (props, _hooks) => {
-	const { current, max, highColor, lowColor, bgColor, text } = props
-
-	const spreadableProps = { ...props } as Partial<percentageBarProps>
-	delete spreadableProps.current
-	delete spreadableProps.max
-    delete spreadableProps.highColor
-    delete spreadableProps.lowColor
-    delete spreadableProps.bgColor
-    delete spreadableProps.text
-
-	return (
-		<frame BackgroundColor3={bgColor} BorderSizePixel={0} {...spreadableProps}>
-            <frame BackgroundTransparency={1} Size={new UDim2(current / max, 0, 1, 0)} ZIndex={1} BorderSizePixel={0}>
-                <frame BackgroundColor3={colorBetween(lowColor, highColor, current / max)} Size={new UDim2(1, 0, 1, 0)} BorderSizePixel={0}/>
-            </frame>
-            <frame Size={new UDim2(1, 0, 1, 0)} BackgroundTransparency={1}>
-                <Padding PaddingY={new UDim(.1, 0)} PaddingX={new UDim(0, 8)}/>
-                <textlabel
-                    BackgroundTransparency={1}
-					Text={`${math.floor(current)} / ${math.floor(max)}`}
-					ZIndex={2}
-					Size={new UDim2(1, 0, 1, 0)}
-					TextXAlignment={Enum.TextXAlignment.Right}
-					TextColor3={Color3.fromHex("#cdd6f4")}
-					TextScaled
-                />
-                {(text !== undefined) ? (
-					<textlabel
-						BackgroundTransparency={1}
-						Text={text}
-						ZIndex={2}
-						Size={new UDim2(1, 0, 1, 0)}
-						TextXAlignment={Enum.TextXAlignment.Left}
-						TextColor3={Color3.fromHex("#cdd6f4")}
-						TextScaled
-					/>
-				) : undefined}
-            </frame>
-        </frame>
-	)
-}
-
-export default new Hooks(Roact)(percentageBar)

src/ReplicatedStorage/uiStore/hooks/useUiProducer.ts

@@ -0,0 +1,4 @@
+import { UseProducerHook, useProducer } from "@rbxts/roact-reflex"
+import { rootProducer } from "../producer"
+
+export const useUiProducer: UseProducerHook<rootProducer> = useProducer

src/ReplicatedStorage/uiStore/producer/index.ts

@@ -0,0 +1,9 @@
+import { InferDispatchers, InferState, combineProducers, loggerMiddleware } from "@rbxts/reflex"
+
+export type rootProducer = typeof producer
+export type rootState = InferState<rootProducer>
+export type rootDispatchers = InferDispatchers<rootProducer>
+
+export const producer = combineProducers({
+    
+}).applyMiddleware(loggerMiddleware)