feat: image component, richtext support for textcomponents, quality u…

…pdates

.eslintrc

@@ -1,22 +1,29 @@
 {
-	"parser": "@typescript-eslint/parser",
-	"parserOptions": {
-		"jsx": true,
-		"useJSXTextNode": true,
-		"ecmaVersion": 2018,
-		"sourceType": "module",
-		"project": "./tsconfig.json"
-	},
-	"ignorePatterns": ["/out"],
-	"plugins": ["@typescript-eslint", "roblox-ts", "unused-imports", "simple-import-sort"],
-	"extends": [
-		"eslint:recommended",
-		"plugin:@typescript-eslint/recommended",
-		"plugin:roblox-ts/recommended"
-	],
-	"rules": {
-		"unused-imports/no-unused-imports": "warn",
-		"simple-import-sort/imports": "warn",
-		"simple-import-sort/exports": "warn"
-	}
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "jsx": true,
+    "useJSXTextNode": true,
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
+  "ignorePatterns": [
+    "/out"
+  ],
+  "plugins": [
+    "@typescript-eslint",
+    "roblox-ts",
+    "unused-imports",
+    "simple-import-sort"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:roblox-ts/recommended"
+  ],
+  "rules": {
+    "unused-imports/no-unused-imports": "warn",
+    "simple-import-sort/imports": "warn",
+    "simple-import-sort/exports": "warn"
+  }
 }

README.md

@@ -37,6 +37,7 @@ Also see **[introduction](docs/1_Introduction.md)**
 ## Support
 
 ### TODO
+
 - [X] Stories
 - [X] Support for Bindings in props
 - [ ] Better documentation
@@ -48,7 +49,7 @@ Also see **[introduction](docs/1_Introduction.md)**
 - [X] Button
 - [ ] ImageButton
 - [X] Text
-- [ ] Image
+- [X] Image
 - [X] TextBox
 
 ### Modifiers
@@ -58,7 +59,7 @@ Also see **[introduction](docs/1_Introduction.md)**
 - [X] UIGradient
 - [X] UIGridLayout [(see GridLayout)](src/components/GridLayout.tsx)
 - [X] UIListLayout [(see ListLayout)](src/components/ListLayout.tsx)
-- [ ] ~~UIFlexLayout~~ (in Roblox Studio Beta Features)
+- [ ] ~~UIFlexLayout~~ (in Roblox Studio Beta Features, waiting for production release)
 - [X] UIPadding
 - [ ] UIPageLayout
 - [X] UIScale

docs/1_Introduction.md

@@ -11,7 +11,7 @@
 > - [Text](../src/components/Text.ts)
 > - [Button](../src/components/Button.ts)
 > - _And other components at [/src/components/](../src/components)_
-> 
+>
 > Also see Hoarcekat stories at [/stories](../stories)
 >
 

docs/2_Modifiers.md

@@ -1,7 +1,6 @@
 # Modifiers && Utils
 
-[Introduction](1_Introduction.md) • <u>
-Modifiers</u> • [Components](3_Components.md) • [Custom Components](4_Custom_Components.md)
+[Introduction](1_Introduction.md) • <u>Modifiers</u> • [Components](3_Components.md) • [Custom Components](4_Custom_Components.md)
 
 Roblox UI Modifiers, but in simpler way
 
@@ -14,7 +13,7 @@ Roblox UI Modifiers, but in simpler way
 These modifiers are available on all components
 
 > [!INFORMATION]
-> 
+>
 > [see **/src/helpers/BaseComponent.tsx**](../src/helpers/BaseComponent.tsx) for source code
 
 ### Standard properties

docs/3_Components.md

@@ -1,4 +1,5 @@
 # Components
+
 [Introduction](1_Introduction.md) • [Modifiers](2_Modifiers.md) • <u>Components</u> • [Custom Components](4_Custom_Components.md)
 
 List of components and its props

docs/4_Custom_Components.md

@@ -1,7 +1,6 @@
 # Custom Components
 
-[Introduction](1_Introduction.md) • [Modifiers](2_Modifiers.md) • [Components](3_Components.md) • <u>Custom
-Components</u>
+[Introduction](1_Introduction.md) • [Modifiers](2_Modifiers.md) • [Components](3_Components.md) • <u>Custom Components</u>
 
 ## Terms
 

src/components/Image.ts

@@ -0,0 +1,27 @@
+import { BaseComponent } from "../helpers";
+import { ColorOrHex, resolveColor3 } from "../utils";
+import { mapBinding } from "@rbxts/pretty-react-hooks";
+
+export interface ImageRect {
+	offset: Vector2;
+	size: Vector2;
+}
+
+export interface ImageProps {
+	image?: string,
+	imageColor?: ColorOrHex,
+	imageTransparency?: number,
+	imageRect?: ImageRect
+}
+
+export const ImageComponent = BaseComponent
+	.expand<ImageLabel, ImageProps>((props) => ({
+		Image: props.image,
+		ImageColor3: resolveColor3(props.imageColor),
+		ImageTransparency: props.imageTransparency,
+
+		ImageRectOffset: mapBinding(props.imageRect, (rect) => rect?.offset ?? new Vector2()),
+		ImageRectSize: mapBinding(props.imageRect, (rect) => rect?.size ?? new Vector2()),
+	}));
+
+export const Image = ImageComponent.build("imagelabel");

src/helpers/BaseComponent.tsx

@@ -1,12 +1,7 @@
 import React from "@rbxts/react";
 import ExpandableComponent from "./ExpandableComponent";
 
-import {
-	ColorOrHex,
-	ResolvableAnchorPoint,
-	resolveAnchorPoint,
-	resolveUDim,
-} from "../utils";
+import { ColorOrHex, ResolvableAnchorPoint, resolveAnchorPoint, resolveUDim } from "../utils";
 import { getBaseColor, Gradient, GradientElement } from "./Gradient";
 
 import type { InstanceProps } from "@rbxts/react";

src/helpers/ExpandableComponent.ts

@@ -43,7 +43,7 @@ export default class ExpandableComponent<I extends Instance, P extends object, C
 		);
 	}
 
-	expand<NI extends I, NP>(
+	expand<NI extends I = I, NP extends object = {}>(
 		propBuilder?: PropBuilder<P & NP, C, NI>,
 		childrenBuilder?: ChildrenBuilder<P & NP, C>,
 	): ExpandableComponent<NI, P & NP, C> {

src/helpers/TextComponent.ts

@@ -13,6 +13,7 @@ export type TextComponentProps<T extends Instance = TextComponentInstance> = {
 	textSize?: number | "AUTO"
 
 	font?: Enum.Font | Font
+	richText?: boolean
 
 	textAlign?: Enum.TextXAlignment
 	verticalTextAlign?: Enum.TextYAlignment
@@ -53,6 +54,7 @@ export default BaseComponent
 								? Font.fromEnum(Enum.Font[font as InferEnumNames<Enum.Font>]) // font enum key
 								: Font.fromEnum(font), // font enum
 			),
+			RichText: props.richText,
 
 			TextXAlignment: props.textAlign ?? props.align,
 			TextYAlignment: props.verticalTextAlign ?? props.verticalAlign,

src/utils.ts

@@ -2,13 +2,13 @@
 // cl c cr
 // bl b br
 import {
-	Binding, type InferEnumNames,
+	Binding,
+	type InferEnumNames,
 	InstanceChangeEvent,
 	InstanceEvent,
 	InstanceProps,
 	Key,
 	ReactNode,
-	Ref,
 	RefObject,
 } from "@rbxts/react";
 
@@ -90,6 +90,7 @@ export function resolveUDim(value: BindingOrValue<number | UDim>): BindingOrValu
 		return new UDim(0, value);
 	});
 }
+
 export function resolveColor3Value(value: ColorOrHex): Color3 {
 	if (typeIs(value, "Color3")) return value;
 	return Color3.fromHex(value);

stories/default.project.json

@@ -8,7 +8,6 @@
     "$className": "DataModel",
     "ReplicatedStorage": {
       "$className": "ReplicatedStorage",
-
       "$path": "out",
       "rbxts_include": {
         "$path": "include",

stories/package.json

@@ -1,25 +1,25 @@
 {
-	"name": "rbxts-react-example",
-	"version": "1.0.0",
-	"main": "index.js",
-	"license": "MIT",
-	"scripts": {
-		"build": "rbxtsc",
-		"watch": "rbxtsc -w",
-		"devInstall": "pnpm un @rbxts/better-react-components && pnpm add ../package.tgz"
-	},
-	"devDependencies": {
-		"@rbxts/compiler-types": "2.2.0-types.0",
-		"@rbxts/types": "^1.0.763",
-		"roblox-ts": "2.3.0-dev-a25975b",
-		"typescript": "^5.4.2"
-	},
-	"dependencies": {
-		"@rbxts/better-react-components": "file:../package.tgz",
-		"@rbxts/catppuccin": "^1.0.2",
-		"@rbxts/pretty-react-hooks": "^0.4.2",
-		"@rbxts/react": "^0.1.1",
-		"@rbxts/react-roblox": "^0.3.4",
-		"@rbxts/services": "^1.5.4"
-	}
+  "name": "rbxts-react-example",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "build": "rbxtsc",
+    "watch": "rbxtsc -w",
+    "devInstall": "pnpm un @rbxts/better-react-components && pnpm add ../package.tgz"
+  },
+  "devDependencies": {
+    "@rbxts/compiler-types": "2.2.0-types.0",
+    "@rbxts/types": "^1.0.763",
+    "roblox-ts": "2.3.0-dev-a25975b",
+    "typescript": "^5.4.2"
+  },
+  "dependencies": {
+    "@rbxts/better-react-components": "file:../package.tgz",
+    "@rbxts/catppuccin": "^1.0.2",
+    "@rbxts/pretty-react-hooks": "^0.4.2",
+    "@rbxts/react": "^0.1.1",
+    "@rbxts/react-roblox": "^0.3.4",
+    "@rbxts/services": "^1.5.4"
+  }
 }

stories/src/App.tsx

@@ -1,4 +1,5 @@
 import React from "@rbxts/react";
+
 import { Frame } from "@rbxts/better-react-components";
 
 declare const _G: Record<string, unknown>;

stories/src/basics/1_helloworld.story.tsx

@@ -1,9 +1,9 @@
 import React from "@rbxts/react";
 
-import { Frame, Text } from "@rbxts/better-react-components";
+import { Text } from "@rbxts/better-react-components";
+import { App } from "../App";
 
 import { hoarcekat } from "@rbxts/pretty-react-hooks";
-import { App } from "../App";
 import { Latte } from "@rbxts/catppuccin";
 
 export = hoarcekat(() => {

stories/src/examples/sidebar.story.tsx

@@ -1,9 +1,9 @@
 import React from "@rbxts/react";
 
-import { hoarcekat } from "@rbxts/pretty-react-hooks";
-
-import { App } from "../App";
 import { AnchorPoints, Button, Frame, ListLayout } from "@rbxts/better-react-components";
+import { App } from "../App";
+
+import { hoarcekat } from "@rbxts/pretty-react-hooks";
 import { Latte } from "@rbxts/catppuccin";
 
 function CoolButton(props: { text: string, onClick: () => void }) {
@@ -24,7 +24,7 @@ function CoolButton(props: { text: string, onClick: () => void }) {
 			textColor={Latte.Text}
 
 			event={{
-				Activated: props.onClick
+				Activated: props.onClick,
 			}}
 		/>
 	);

stories/src/tests/bindings.story.tsx

@@ -1,7 +1,6 @@
-import React, { useBinding, useEffect, useRef, useState } from "@rbxts/react";
+import React, { useBinding } from "@rbxts/react";
 
-import { AnchorPoints, Button, Frame, GridLayout, Text } from "@rbxts/better-react-components";
-import { App } from "../App";
+import { Button, Frame, GridLayout, Text } from "@rbxts/better-react-components";
 
 import { hoarcekat } from "@rbxts/pretty-react-hooks";
 import { Latte } from "@rbxts/catppuccin";

stories/src/tests/context.story.tsx

@@ -1,8 +1,9 @@
 import React, { Binding, useMemo } from "@rbxts/react";
+
+import { BaseComponent } from "@rbxts/better-react-components/out/helpers";
 import { App } from "../App";
 
 import { hoarcekat, joinAnyBindings } from "@rbxts/pretty-react-hooks";
-import { BaseComponent } from "@rbxts/better-react-components/out/helpers";
 import { Players } from "@rbxts/services";
 
 type ImageProfileProps = {

stories/src/tests/gradients.story.tsx

@@ -1,18 +1,9 @@
-import React, { useBinding, useEffect, useRef, useState } from "@rbxts/react";
-
-import {
-	AnchorPoints,
-	Button,
-	Frame,
-	GridLayout,
-	ListLayout,
-	resolveColor3, resolveColor3Value,
-	Text,
-} from "@rbxts/better-react-components";
+import React from "@rbxts/react";
+
+import { Button, Frame, ListLayout, resolveColor3Value, Text } from "@rbxts/better-react-components";
 import { App } from "../App";
 
 import { hoarcekat } from "@rbxts/pretty-react-hooks";
-import { Latte } from "@rbxts/catppuccin";
 import { brighten, useMotion } from "../utils";
 
 
@@ -36,7 +27,7 @@ function ButtonWithGradient() {
 				MouseButton1Down: () => colorMotion.spring(brighten(baseColor, -.25)),
 				MouseButton1Up: () => colorMotion.spring(brighten(baseColor, .05)),
 				MouseEnter: () => colorMotion.spring(brighten(baseColor, .05)),
-				MouseLeave: () => colorMotion.spring(baseColor)
+				MouseLeave: () => colorMotion.spring(baseColor),
 			}}
 
 			overrideRoblox={{ AutoButtonColor: false }}
@@ -96,9 +87,9 @@ export = hoarcekat(() => {
 				size={new UDim2(1, -4, 0, 75)}
 				background={[
 					new ColorSequenceKeypoint(0, resolveColor3Value("#000000") as Color3),
-					new ColorSequenceKeypoint(0.5-0.5/3, resolveColor3Value("#FF0000") as Color3),
-					new ColorSequenceKeypoint(0.5+0.5/3, resolveColor3Value("#FF0000") as Color3),
-					new ColorSequenceKeypoint(1, resolveColor3Value("#000000") as Color3)
+					new ColorSequenceKeypoint(0.5 - 0.5 / 3, resolveColor3Value("#FF0000") as Color3),
+					new ColorSequenceKeypoint(0.5 + 0.5 / 3, resolveColor3Value("#FF0000") as Color3),
+					new ColorSequenceKeypoint(1, resolveColor3Value("#000000") as Color3),
 				]}
 				cornerRadius={16}
 			/>
@@ -109,7 +100,7 @@ export = hoarcekat(() => {
 				background={new ColorSequence([
 					new ColorSequenceKeypoint(0, resolveColor3Value("#FF0000") as Color3),
 					new ColorSequenceKeypoint(0.5, resolveColor3Value("#3333CC") as Color3),
-					new ColorSequenceKeypoint(1, resolveColor3Value("#00FF00") as Color3)
+					new ColorSequenceKeypoint(1, resolveColor3Value("#00FF00") as Color3),
 				])}
 				cornerRadius={16}
 			/>