feat: first version

.eslintrc

@@ -0,0 +1,22 @@
+{
+	"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"
+	}
+}

.github/workflows/build.yml

@@ -0,0 +1,28 @@
+name: Build package
+on:
+  - push
+  - pull_request
+
+jobs:
+  build:
+    runs-on: ubuntu-20.04
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Use Node.js 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build package
+        run: pnpm build

.github/workflows/release.yml

@@ -0,0 +1,36 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Use Node.js 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build package
+        run: pnpm build
+
+      - name: Semantic Release
+        run: pnpm semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1,9 @@
+/node_modules
+/out
+/include
+
+.DS_Store
+*.tsbuildinfo
+*.log
+
+rbxts-better-react-components-*.tgz

.npmrc

@@ -0,0 +1 @@
+node-linker=hoisted

.releaserc

@@ -0,0 +1,16 @@
+{
+  "branches": [
+    "main"
+  ],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/npm",
+    [
+      "@semantic-release/git",
+      {
+        "assets": ["package.json"],
+        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+      }
+    ]
+  ]
+}

README.md

@@ -0,0 +1,37 @@
+# Better React Components
+
+Roblox's elements, with builtin modifiers
+
+Also see **[introduction](docs/1_Introduction.md)**
+
+## Example
+
+```tsx
+<Frame
+	position={new UDim2(.5, 0, .5, 0)}
+	size={new UDim2(.5, 0, .5, 0)}
+
+	anchorPoint={"m"}
+	cornerRadius={8}
+	padding={4}
+>
+	<GridLayout
+		cellSize={new UDim2(.25, 0, .25, 0)}
+		cellPadding={new UDim2(0, 4, 0, 4)}
+		cellAspectRatio={1}
+	/>
+
+	<DummyElement />
+	<Button
+		position={new UDim2(0, 0, 0, 0)} size={new UDim2(0, 0, 0, 0)}
+		textColor={Color3.fromHex("#64FEE7")}
+		text="Hello world!"
+	/>
+	<Text
+		position={new UDim2(0, 0, 0, 0)} size={new UDim2(0, 0, 0, 0)}
+		background={Color3.fromHex("#64FEE7")
+		text="Hello world!"
+	/>
+</Frame>;
+```
+

docs/1_Introduction.md

@@ -0,0 +1,94 @@
+# Introduction
+<u>Introduction</u> • [Modifiers](2_Modifiers.md) • [Components](3_Components.md)
+
+> **Warning**
+> 
+> Documentation is still in development. Best way to learn it – check out source code
+>
+> - [Base component](../src/expandBase.tsx)
+> - [Frame](../src/components/Frame.tsx)
+> - [Text](../src/components/Text.tsx)
+> - [Button](../src/components/Button.tsx)
+> - _And other components at [/src/components/](../src/components/)_
+> 
+
+## Why?
+This package can help You with Roblox's UI Modifiers
+
+#### Before:
+```tsx
+<frame
+	Position={new UDim2(.5, 0, .5, 0)}
+	Size={new UDim2(.5, 0, .5, 0)}
+	AnchorPoint={new Vector2(.5, .5)}
+>
+	<uigridlayout
+		CellSize={new UDim2(.25, 0, .25, 0)}
+		CellPadding={new UDim2(0, 4, 0, 4)}
+	>
+		<uiaspectratioconstraint AspectRatio={1} />
+	</uigridlayout>
+
+	<frame />
+	<frame />
+	<frame />
+</frame>;
+```
+
+#### After:
+```tsx
+<Frame
+	position={new UDim2(.5, 0, .5, 0)}
+	size={new UDim2(.5, 0, .5, 0)}
+	anchorPoint={"m"} // m - middle
+	// or anchorPoint={AnchorPoints.Middle}
+	// or anchorPoint={new Vector2(.5, .5)}
+>
+	<GridLayout
+		cellSize={new UDim2(.25, 0, .25, 0)}
+		cellPadding={new UDim2(0, 4, 0, 4)}
+		cellAspectRatio={1}
+	/>
+
+	<frame />
+	<frame />
+	<frame />
+</Frame>
+```
+
+
+## Installation
+Pro tip: use [this @rbxts/react template](https://github.com/littensy/rbxts-react-example)
+```bash
+# install with any package manager:
+pnpm add @rbxts/better-react-components
+yarn add @rbxts/better-react-components
+npm install @rbxts/better-react-components
+```
+
+## Usage:
+```tsx
+// import any component
+import { Frame, Text } from "@rbxts/better-react-components";
+
+...
+
+// and use it!
+return (
+	<Frame>
+		<Text text="Hello world!" />
+	</Frame>
+);
+
+...
+```
+
+## Unusual behaviours
+1. By default, `Text`'s background is transparent
+   ```tsx
+   <Text text="Hello world!" />; // background IS transparent
+   <Text
+        text="Hello world!" 
+        backgroundTransparency={0} 
+   />; // background IS NOT transparent
+   ```

docs/2_Modifiers.md

@@ -0,0 +1,93 @@
+# Modifiers && Utils
+
+[Introduction](1_Introduction.md) • <u>Modifiers</u> • [Components](3_Components.md)
+
+Roblox UI Modifiers, but in simpler way
+
+## Modifiers
+
+### Corner Radius
+
+```tsx
+<Frame
+	cornerRadius={8}
+	// or cornerRadius={new UDim(0, 8)} (same)
+>
+	...
+</Frame>;
+```
+
+### Aspect Ratio
+
+```tsx
+<Frame
+	aspectRatio={1}
+	// aspectType={Enum.AspectType}
+	// aspectAxis={Enum.DominantAxis}
+>
+	...
+</Frame>;
+```
+
+### Stroke
+
+```tsx
+<Frame
+	stroke={{ /* roblox props for UIStroke*/ }}
+>
+	...
+</Frame>;
+```
+
+### Padding
+
+```tsx
+<Frame
+	padding={4} // for top, left, bottom, right
+
+	// or individually:
+	// paddingTop={4}
+	// paddingLeft={4}
+	// paddingBottom={4}
+	// paddingRight={4}
+>
+	...
+</Frame>;
+```
+
+## Utils
+
+Some utils, used for building this components
+
+### AnchorPoints
+
+```tsx
+import { AnchorPoints } from "@rbxts/better-react-components";
+
+<Frame anchorPoint={AnchorPoints.TopLeft} />;
+<Frame anchorPoint={AnchorPoints.Middle} />;
+<Frame anchorPoint={AnchorPoints.BottomRight} />;
+```
+
+### resolveAnchorPoint
+
+```tsx
+import { AnchorPoints, resolveAnchorPoint } from "@rbxts/better-react-components";
+
+resolveAnchorPoint("m")                      // Vector2(.5, .5)
+resolveAnchorPoint(AnchorPoints.BottomRight) // Vector2(1, 1)
+
+resolveAnchorPoint(new Vector2(x, y))        // Vector2(x, y)
+```
+
+### resolveUDim
+
+```tsx
+import { resolveUDim } from "@rbxts/better-react-components";
+
+resolveUDim(8)              // UDim(0, 8)
+resolveUDim(n)              // UDim(0, n)
+
+resolveUDim(new UDim(a, b)) // UDim(a, b)  
+
+```

docs/3_Components.md

@@ -0,0 +1,6 @@
+# Components
+[Introduction](1_Introduction.md) • [Modifiers](2_Modifiers.md) • <u>Components</u>
+
+List of components and its props
+
+> **check out [/src/components/](../src/components/)**

example/.gitignore

@@ -0,0 +1,6 @@
+/node_modules
+/out
+/include
+*.tsbuildinfo
+yarn-error.log
+.DS_Store

example/.npmrc

@@ -0,0 +1 @@
+node-linker=hoisted

example/aftman.toml

@@ -0,0 +1,7 @@
+# This file lists tools managed by Aftman, a cross-platform toolchain manager.
+# For more information, see https://github.com/LPGhatguy/aftman
+
+# To add a new tool, add an entry to this table.
+[tools]
+rojo = "rojo-rbx/[email protected]"
+# rojo = "rojo-rbx/[email protected]"