feat: initial FormControl, FormGroup, Form.astro

index.ts

@@ -3,3 +3,6 @@
 // What you should do here is re-exports all the things you want your user to access, ex:
 // export { HelloWorld } from "./src/main.ts"
 // export type { HelloWorldResult } from "./src/types.ts"
+import Form from './src/Form.astro';
+export default Form;
+export {FormGroup, FormControl} from './src/index';

package.json

@@ -1,16 +1,25 @@
 {
-  "name": "astro-component-name",
-  "version": "0.1.0",
+  "name": "astro-reactive-form",
+  "version": "0.0.0",
+  "repository": "https://github.com/ayoayco/astro-reactive-form",
+  "homepage": "https://github.com/ayoayco/astro-reactive-form",
   "type": "module",
   "exports": {
     ".": "./index.ts"
   },
+  "author": {
+    "name": "Ayo Ayco",
+    "email": "ramon.aycojr@gmail.com",
+    "url": "https://ayco.io"
+  },
   "files": [
     "src",
     "index.ts"
   ],
   "keywords": [
-    "astro-component"
+    "astro-component",
+    "css",
+    "ui"
   ],
   "scripts": {
     "test": "mocha --parallel --timeout 15000",

src/Component.astro

@@ -1,3 +0,0 @@
----
-// Write your component code in this file!
----

src/Form.astro

@@ -0,0 +1,8 @@
+---
+import {FormGroup} from './form-group';
+const form: FormGroup = Astro.props.formGroup;
+---
+<form>
+  <label>{form.controls[0].label}</label>
+	<input type={form.controls[0].type} value={form.controls[0].value} />
+</form>

src/form-control.ts

@@ -0,0 +1,6 @@
+export class FormControl {
+	name: string;
+  type?: 'text' | 'checkbox' | 'radio' = 'text'; // add more
+  value?: string | number | null | string[];
+	label?: string;
+}

src/form-group.ts

@@ -0,0 +1,9 @@
+import { FormControl } from "./form-control";
+
+export class FormGroup {
+  controls: FormControl[];
+
+  constructor(controls: FormControl[]) {
+    this.controls = controls;
+  }
+}

src/index.ts

@@ -0,0 +1,3 @@
+export * from './Form.astro';
+export * from './form-group';
+export * from './form-control';

src/main.ts

@@ -1 +0,0 @@
-// Write your component's code here!