Port from Typescript to Luau

.darklua-dev.json

@@ -0,0 +1,20 @@
+{
+    "rules": [
+        {
+            "rule": "convert_require",
+            "current": {
+                "name": "path",
+                "sources": {
+                    "@pkg": "Packages",
+                    "@dev-pkg": "DevPackages",
+                    "@root": "src"
+                }
+            },
+            "target": {
+                "name": "roblox",
+                "rojo_sourcemap": "./sourcemap.json",
+                "indexing_style": "wait_for_child"
+            }
+        }
+    ]
+}

.darklua-roblox.json

@@ -0,0 +1,19 @@
+{
+    "rules": [
+        {
+            "rule": "convert_require",
+            "current": {
+                "name": "path",
+                "sources": {
+                    "@pkg": "Packages",
+                    "@root": "src"
+                }
+            },
+            "target": {
+                "name": "roblox",
+                "rojo_sourcemap": "./sourcemap.json",
+                "indexing_style": "wait_for_child"
+            }
+        }
+    ]
+}

.darklua-wally.json

@@ -0,0 +1,19 @@
+{
+    "rules": [
+        {
+            "rule": "convert_require",
+            "current": {
+                "name": "path",
+                "sources": {
+                    "@pkg": "Packages",
+                    "@root": "src"
+                }
+            },
+            "target": {
+                "name": "roblox",
+                "rojo_sourcemap": "./sourcemap.json",
+                "indexing_style": "wait_for_child"
+            }
+        }
+    ]
+}

.gitignore

@@ -1,11 +1,9 @@
-/node_modules
-/out
-/include
+Packages/
+DevPackages/
+out/
+
+sourcemap.json
 
 .DS_Store
-*.tsbuildinfo
 *.log
-
-# development tarballs
-rbxts-better-react-components-*.tgz
-package.tgz
+*.old

.luaurc

@@ -0,0 +1,7 @@
+{
+    "aliases": {
+        "pkg": "./Packages",
+        "dev-pkg": "./DevPackages",
+        "root": "./src"
+    }
+}

Makefile

@@ -0,0 +1,29 @@
+.PHONY: install cleanup install-toolchain cleanup-build serve watch build/*
+
+install:
+	aftman install
+
+cleanup:
+	git clean -Xf build # remove ignored files in build/
+
+serve:
+	rojo serve out.project.json
+
+watch: Packages/ DevPackages/ sourcemap.json .darklua-dev.json
+	darklua process -w -c .darklua-dev.json src out 
+
+# files/folders
+
+build/roblox:
+	./scripts/roblox.sh
+
+build/wally:
+	./scripts/wally.sh
+
+Packages DevPackages: wally.toml wally.lock
+	wally install
+	wally-package-types --sourcemap sourcemap.json Packages/
+	wally-package-types --sourcemap sourcemap.json DevPackages/
+
+sourcemap.json: src/* default.project.json
+	rojo sourcemap default.project.json --output sourcemap.json

README.md

@@ -1,83 +1,79 @@
-# Better React Components
+# better-react-components
 
-![NPM Downloads](https://img.shields.io/npm/dm/%40rbxts%2Fbetter-react-components?style=for-the-badge)
-![NPM Version](https://img.shields.io/npm/v/%40rbxts%2Fbetter-react-components?style=for-the-badge)
+Roblox UI elements, but with builtin modifiers
 
-Roblox's ui elements, with builtin modifiers
+> [!NOTE]
+>
+> Currently, I am rewriting this library from Typescript to Lua.
+>
+> I'll still publish this library to NPM.
 
-Also see **[introduction](docs/1_Introduction.md)**
+## Setup guide
 
-## Example
+```
+Dear Future Me.
 
-![Comperance](docs/better-react-components-is-based.png)
+Please, publish and write here, how to install this library from wally or npm
 
-<details>
-    <summary>better-react-components code</summary>
+Respectfully,
+  Past Me
+```
 
-    ```
-    <Frame
-        position={new UDim2(.5, 0, .5, 0)}
-        size={new UDim2(.5, 0, .5, 0)}
+## Development & Build from Scratch
 
-        anchorPoint={AnchorPoints.Middle}
-        cornerRadius={8}
-        padding={4}
-    >
-        <GridLayout
-            cellSize={new UDim2(.25, 0, .25, 0)}
-            cellPadding={new UDim2(0, 4, 0, 4)}
-            cellAspectRatio={1}
-        />
+1. Install Aftman and Make
+2. Run:
+   ```
+   make install         # installs toolchain
+
+   # Development stuff:
+   make watch           # starts darklua's processer
+   make serve           # starts rojo server
 
-        <DummyElement />
-        <Button
-            textColor={"#64FEE7"}
-            text="Hello world!"
-        />
-        <Text
-            background={"#64FEE7"}
-            text="Hello there!"
-            font={Enum.Font.Arial}
-        />
-    </Frame>;
-    ```
-</details>
+   # Buildin' stuff:
+   make wally-package   # builds wally package at `build/wally/`
+   make roblox-package  # builds roblox model file at `build/wally/better-react-components.rbxmx`
+   ```
 
-
-## Support
-
-### TODO
-
-- [ ] Upgrade ESLint to `9.*.*` version
-- [ ] Better documentation
+## Supported Components/Modifiers
 
 ### Components
 
-- [X] Frame
-- [X] ScrollableFrame
-- [X] Button
+- [ ] CanvasGroup
+- [x] Frame
 - [ ] ImageButton
-- [X] Image
-- [X] Text
-- [X] TextBox
-- [X] CanvasGroup
+- [x] TextButton
+- [ ] ImageLabel
+- [x] TextLabel
+- [x] ScrollingFrame
+- [x] TextBox
+- [ ] VideoDisplay
+- [ ] VideoFrame
+- [ ] ViewportFrame
+- [ ] LayerCollector
+  - [ ] BillboardGui
+  - [x] ScreenGui
+  - [ ] SurfaceGui
+- [ ] Path2D
 
 ### Modifiers
 
-- [X] UIAspectRatioConstraint
-- [X] UICorner
-- [X] UIGradient
-- [X] UIGridLayout [(see GridLayout)](src/components/GridLayout.tsx)
-- [X] UIListLayout [(see ListLayout)](src/components/ListLayout.tsx)
-- [X] UIFlexLayout [(see ListLayout)](src/components/ListLayout.tsx)
-- [X] UIPadding
-- [ ] UIPageLayout
-- [X] UIScale
-- [X] UISizeConstraint
-- [X] UIStroke
-- [ ] UITableLayout
-- [X] UITextSizeConstraint
+- [x] UIConstraint
+  - [x] UIAspectRatioConstraint
+  - [x] UISizeConstraint
+  - [x] UITextSizeConstraint
+- [x] UICorner (`CornerRadius` property)
+- [ ] UIDragDetector
+- [ ] UIGradient
+- [x] UIPadding
+- [ ] UIScale
+- [x] UIStroke (`Border` property)
+
 
-### Custom Modifiers
+### Layouts
 
-- ~~[ ] FlowLayout [(view)](https://devforum.roblox.com/t/flow-flexbox-layout-for-lua/2614394)~~ (Removed due release of flex features to ListLayout. [Devforum](https://devforum.roblox.com/t/flex-features-for-uilistlayout-client-release/3096190) )
+- [ ] UIGridLayout
+- [x] UIListLayout
+- [x] UIFlexItem
+- [ ] UITableLayout
+- [ ] UIPageLayout

aftman.toml

@@ -1,7 +1,5 @@
-# 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/rojo@7.4.1"
-# rojo = "rojo-rbx/rojo@6.2.0"
+rojo = "rojo-rbx/rojo@7.4.4"
+wally = "UpliftGames/wally@0.3.2"
+wally-package-types = "JohnnyMorganz/wally-package-types@1.4.2"
+darklua = "seaofvoices/darklua@0.16.0"

build/roblox/.gitignore

@@ -0,0 +1,10 @@
+# This folder used for storing Roblox package files
+#
+# `default.project.json` is used for generating sourcemap.json and building .rbxmx file
+#
+# To build roblox package run:
+#  $ make roblox-package
+
+*
+!.gitignore
+!default.project.json

build/roblox/default.project.json

@@ -0,0 +1,9 @@
+{
+    "name": "better-react-components",
+    "tree": {
+        "_Vendor": {
+            "$path": "Packages"
+        },
+        "$path": "src"
+    }
+}

build/wally/.gitignore

@@ -0,0 +1,11 @@
+# This folder used for storing Wally package files
+#
+# `sourcemap.project.json` is used for generating sourcemap.json
+#
+# To build wally package run:
+#  $ make wally-package
+
+*
+!.gitignore
+!default.project.json
+!sourcemap.project.json