BREAKING CHANGE: Change components names

README.md

@@ -54,8 +54,7 @@ import {WebForms} from '@astro-utils/forms/forms.js';
 ### Simple example
 ```astro
 ---
-import { Bind } from "@astro-utils/forms";
-import { BindForm, Button, Input } from "@astro-utils/forms/forms.js";
+import { Bind, BindForm, BButton, BInput } from "@astro-utils/forms/forms.js";
 import Layout from "../layouts/Layout.astro";
 
 const form = Bind();
@@ -68,14 +67,14 @@ function formSubmit(){
 <Layout>
     <BindForm bind={form}>
         {showSubmitText}
-
+        
         <h4>What you name*</h4>
-        <Input type={'text'} name="name" maxlength={20} required/>
+        <BInput type="text" name="name" maxlength={20} required/>
     
         <h4>Enter age*</h4>
-        <Input type={'int'} name="age" required/>
+        <BInput type="int" name="age" required/>
     
-        <Button onClick={formSubmit} whenFormOK>Submit</Button>
+        <BButton onClick={formSubmit} whenFormOK>Submit</BButton>
     </BindForm>
 </Layout>
 ```
@@ -89,7 +88,7 @@ import { defineConfig } from 'astro/config';
 import astroFormsDebug from "@astro-utils/forms/dist/integration.js";
 
 export default defineConfig({
-	output: 'server',
+    output: 'server',
     integrations: [astroFormsDebug]
 });
 ```

examples/simple-form/astro.config.mjs

@@ -1,6 +1,8 @@
-import { defineConfig } from 'astro/config';
+import {defineConfig} from 'astro/config';
+import react from '@astrojs/react';
 
 // https://astro.build/config
 export default defineConfig({
-    output: "server"
+    output: "server",
+    integrations: [react()]
 });

examples/simple-form/package.json

@@ -13,7 +13,12 @@
   "dependencies": {
     "@astro-utils/express-endpoints": "^0.0.1",
     "@astro-utils/forms": "^0.0.1",
+    "@astrojs/react": "^3.0.6",
     "astro": "^3.5.5",
+    "bootstrap": "^5.3.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "reactstrap": "^9.2.1",
     "zod": "^3.22.4"
   }
 }

examples/simple-form/src/pages/index.astro

@@ -1,8 +1,9 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import { Bind } from "@astro-utils/forms";
-import { BindForm, Button, Input } from "@astro-utils/forms/forms.js";
-import Layout from "../layouts/Layout.astro";
+import {BButton, Bind, BindForm, BInput} from '@astro-utils/forms/forms.js';
+import {Button} from 'reactstrap';
+import 'bootstrap/dist/css/bootstrap.css';
+
 
 const form = Bind({age: 0, name: ''});
 let showSubmitText: string;
@@ -11,17 +12,16 @@ function formSubmit(){
     showSubmitText = `You name is ${form.name}, you are ${form.age} years old. `;
 }
 ---
-
 <Layout title="Welcome to Astro Metro.">
     <BindForm bind={form}>
         {showSubmitText}
 
         <h4>What you name*</h4>
-        <Input type="text" name="name" maxlength={20} required/>
+        <BInput type="text" name="name" maxlength={20} required/>
 
         <h4>Enter age*</h4>
-        <Input type="int" name="age" required/>
+        <BInput type="int" name="age" required/>
 
-        <Button onClick={formSubmit} whenFormOK>Submit</Button>
+        <BButton as={Button} props={{color: 'info'}} onClick={formSubmit} whenFormOK>Submit</BButton>
     </BindForm>
 </Layout>

examples/simple-form/tsconfig.json

@@ -1,3 +1,7 @@
 {
-  "extends": "astro/tsconfigs/base"
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
 }