Merge pull request #118 from christopher-buss/feature/react-components

refactor(ui): update component templates

Author: christopher-buss

src/client/ui/components/error-boundary.ts src/client/ui/components/error-handler/error-boundary.ts

@@ -3,7 +3,7 @@ import type { ErrorInfo } from "@rbxts/react";
 import React, { ReactComponent } from "@rbxts/react";
 
 interface ErrorBoundaryProps extends React.PropsWithChildren {
-	readonly fallback: (error: unknown) => React.Element;
+	readonly Fallback: (error: unknown) => React.Element;
 }
 
 interface ErrorBoundaryState {
@@ -42,10 +42,10 @@ export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, E
 
 	public render(): React.ReactNode {
 		const { hasError, message } = this.state;
-		const { fallback, children } = this.props;
+		const { Fallback, children } = this.props;
 
 		if (hasError) {
-			return fallback(message);
+			return Fallback(message);
 		}
 
 		return children;

src/client/ui/components/error-handler/error-handler.tsx

@@ -0,0 +1,18 @@
+import React from "@rbxts/react";
+
+import ErrorBoundary from "./error-boundary";
+import ErrorPage from "./error-page";
+
+type ErrorHandlerProps = Readonly<React.PropsWithChildren>;
+
+export default function ErrorHandler({ children }: ErrorHandlerProps): React.Element {
+	return (
+		<ErrorBoundary
+			Fallback={err => {
+				return <ErrorPage Message={tostring(err)} />;
+			}}
+		>
+			{children}
+		</ErrorBoundary>
+	);
+}

src/client/ui/components/error-handler/error-page.tsx

@@ -0,0 +1,12 @@
+import React from "@rbxts/react";
+
+interface ErrorPageProps {
+	readonly Message: string;
+}
+
+export default function ErrorPage({ Message }: ErrorPageProps): React.Element {
+	warn(Message);
+
+	// eslint-disable-next-line react/no-useless-fragment -- This is a placeholder for future functions.
+	return <></>;
+}

src/client/ui/components/primitive/button.tsx

@@ -76,9 +76,15 @@ export default function Button({
 	};
 
 	return (
-		<textbutton {...Native} Event={event}>
-			{children}
+		<textbutton
+			{...Native}
+			AnchorPoint={Native?.AnchorPoint ?? new Vector2(0.5, 0.5)}
+			Event={event}
+			Position={Native?.Position ?? new UDim2(0.5, 0, 0.5, 0)}
+			Text={Native?.Text ?? ""}
+		>
 			{CornerRadius ? <uicorner CornerRadius={CornerRadius} /> : undefined}
+			{children}
 		</textbutton>
 	);
 }

src/client/ui/components/primitive/canvas-group.tsx

@@ -20,12 +20,19 @@ export type CanvasGroupProps = FrameProps<CanvasGroup>;
  * @see https://developer.roblox.com/en-us/api-reference/class/CanvasGroup
  */
 const CanvasGroup = forwardRef((props: CanvasGroupProps, ref: React.Ref<CanvasGroup>) => {
+	const { CornerRadius, Native, children } = props;
+
 	return (
-		<canvasgroup ref={ref} {...props.Native} BorderSizePixel={0}>
-			{props.children}
-			{props.CornerRadius ? (
-				<uicorner key="corner" CornerRadius={props.CornerRadius} />
-			) : undefined}
+		<canvasgroup
+			ref={ref}
+			{...Native}
+			AnchorPoint={Native?.AnchorPoint ?? new Vector2(0.5, 0.5)}
+			BackgroundTransparency={Native?.BackgroundTransparency ?? 1}
+			BorderSizePixel={0}
+			Position={Native?.Position ?? new UDim2(0.5, 0, 0.5, 0)}
+		>
+			{CornerRadius ? <uicorner key="corner" CornerRadius={CornerRadius} /> : undefined}
+			{children}
 		</canvasgroup>
 	);
 });

src/client/ui/components/primitive/group.tsx

@@ -1,14 +1,6 @@
 import React, { forwardRef } from "@rbxts/react";
 
 interface GroupProps extends React.PropsWithChildren {
-	/**
-	 * The background transparency property exists purely for debugging
-	 * purposes. If you need a visible background, use a `Frame` instead.
-	 *
-	 * @ignore
-	 * @deprecated
-	 */
-	readonly BackgroundTransparency?: number;
 	/** All the default properties of a `Frame` component. */
 	readonly Native?: Partial<Omit<React.InstanceProps<Frame>, "BackgroundTransparency">>;
 }
@@ -30,23 +22,20 @@ interface GroupProps extends React.PropsWithChildren {
  *
  * @component
  */
-const Group = forwardRef(
-	({ BackgroundTransparency, Native, children }: GroupProps, ref: React.Ref<Frame>) => {
-		const { AnchorPoint, Position, Size } = Native ?? {};
+const Group = forwardRef(({ Native, children }: GroupProps, ref: React.Ref<Frame>) => {
+	const { AnchorPoint, Position, Size } = Native ?? {};
 
-		return (
-			<frame
-				ref={ref}
-				{...Native}
-				AnchorPoint={AnchorPoint ?? new Vector2(0.5, 0.5)}
-				BackgroundTransparency={BackgroundTransparency ?? 1}
-				Position={Position ?? new UDim2(0.5, 0, 0.5, 0)}
-				Size={Size ?? new UDim2(1, 0, 1, 0)}
-			>
-				{children}
-			</frame>
-		);
-	},
-);
+	return (
+		<frame
+			ref={ref}
+			{...Native}
+			AnchorPoint={AnchorPoint ?? new Vector2(0.5, 0.5)}
+			Position={Position ?? new UDim2(0.5, 0, 0.5, 0)}
+			Size={Size ?? new UDim2(1, 0, 1, 0)}
+		>
+			{children}
+		</frame>
+	);
+});
 
 export default Group;

src/client/ui/components/primitive/image.tsx

@@ -16,7 +16,7 @@ export interface ImageProps extends FrameProps<ImageLabel> {
  * @example
  *
  * ```tsx
- * <Image
+ * <ImageLabel
  * 	Image="rbxassetid://1234567890"
  * 	Native={{
  * 		Size={new UDim2(0, 100, 0, 100)}
@@ -28,14 +28,22 @@ export interface ImageProps extends FrameProps<ImageLabel> {
  *
  * @see https://developer.roblox.com/en-us/api-reference/class/ImageLabel
  */
-const Image = forwardRef((props: ImageProps, ref: React.Ref<ImageLabel>) => {
-	const { CornerRadius, Native } = props;
+const ImageLabel = forwardRef((props: ImageProps, ref: React.Ref<ImageLabel>) => {
+	const { CornerRadius, Image, Native, children } = props;
 
 	return (
-		<imagelabel ref={ref} {...Native} BackgroundTransparency={1} Image={props.Image}>
+		<imagelabel
+			ref={ref}
+			{...Native}
+			AnchorPoint={Native?.AnchorPoint ?? new Vector2(0.5, 0.5)}
+			BackgroundTransparency={Native?.BackgroundTransparency ?? 1}
+			Image={Image}
+			Position={Native?.Position ?? new UDim2(0.5, 0, 0.5, 0)}
+		>
 			{CornerRadius ? <uicorner CornerRadius={CornerRadius} /> : undefined}
+			{children}
 		</imagelabel>
 	);
 });
 
-export default Image;
+export default ImageLabel;

src/client/ui/components/primitive/layer.tsx

@@ -1,5 +1,6 @@
 import React from "@rbxts/react";
 
+import { $NODE_ENV } from "rbxts-transform-env";
 import { IS_EDIT } from "shared/constants";
 
 import UltraWideContainer from "../ultra-wide-container";
@@ -47,7 +48,7 @@ export default function Layer({
 	DisplayOrder,
 	children,
 }: LayerProps): React.Element {
-	return IS_EDIT ? (
+	return $NODE_ENV === "development" && IS_EDIT ? (
 		<Group
 			Native={{
 				AnchorPoint: new Vector2(0, 0),

src/client/ui/components/primitive/scrolling-frame.tsx

@@ -50,12 +50,14 @@ export default function ScrollingFrame({
 	return (
 		<scrollingframe
 			{...Native}
+			AnchorPoint={Native?.AnchorPoint ?? new Vector2(0.5, 0.5)}
 			BackgroundTransparency={0}
 			BorderSizePixel={0}
 			CanvasSize={UDim2.fromOffset(
 				CanvasSize.X !== 0 ? CanvasSize.X + 5 : 0,
 				CanvasSize.Y !== 0 ? CanvasSize.Y + 5 : 0,
 			)}
+			Position={Native?.Position ?? new UDim2(0.5, 0, 0.5, 0)}
 			ScrollBarImageColor3={theme.colors.secondary}
 			ScrollBarThickness={rem(0.5)}
 		>

src/types/util/react.d.ts

@@ -1 +1 @@
-export type BindingValue<T> = React.Binding<T> | T;
+export type BindingValue<T = unknown> = NonNullable<T> | React.Binding<T>;

src/types/util/roblox.d.ts

@@ -1 +1 @@
-export type AssetId = `rbxassetid://${number}`;
+export type AssetId = `rbxassetid://${number}` | `rbxgameasset://${string}`;