ayo/astro-reactive-form
ayo/astro-reactive-form
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Chore clean up demo app (#165)

Browse source 
* feat(demo): new nav component

* refactor: remove hr
This commit is contained in:
Ayo Ayco 2022-10-29 21:26:11 +02:00 committed by GitHub
parent 6d9907a06c
commit d5c2b7786d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 62 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
apps/demo/astro.config.mjs
View file

@ -1,7 +1,4 @@
import { defineConfig } from 'astro/config'; import { defineConfig } from "astro/config";
import tailwind from '@astrojs/tailwind';
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({});
integrations: [tailwind()]
});

8
apps/demo/src/components/Nav.astro Normal file
View file

@ -0,0 +1,8 @@
---
---
<nav>
<a href="/">Home</a> | <a href="/pizza-delivery">Pizza Delivery</a> | <a
href="/job-application">Job Application</a
>
</nav>

6
apps/demo/src/pages/index.astro
View file

@ -1,4 +1,5 @@
--- ---
import Nav from "../components/Nav.astro";
import Form, { import Form, {
ControlConfig, ControlConfig,
FormGroup, FormGroup,
@ -34,8 +35,9 @@ const form = new FormGroup([
name: "agreement", name: "agreement",
label: "Agreement", label: "Agreement",
type: "radio", type: "radio",
value: "yes",
options: [ options: [
{ label: "Agree", value: "yes", checked: true }, { label: "Agree", value: "yes" },
{ label: "Disagree", value: "no" }, { label: "Disagree", value: "no" },
], ],
}, },
@ -83,7 +85,7 @@ const theme = "dark";
<title>Astro</title> <title>Astro</title>
</head> </head>
<body class={theme}> <body class={theme}>
<nav>Examples: <a href="/pizza-delivery">Pizza Delivery</a> | <a href="/job-application">Job Application</a></nav> <Nav />
<h1>Astro Reactive Form</h1> <h1>Astro Reactive Form</h1>
<Form showValidationHints={true} formGroups={form} theme={theme} /> <Form showValidationHints={true} formGroups={form} theme={theme} />
<style> <style>

57
apps/demo/src/pages/job-application.astro
View file

@ -1,10 +1,12 @@
--- ---
import Nav from "../components/Nav.astro";
import Form, { import Form, {
ControlConfig, ControlConfig,
FormControl, FormControl,
FormGroup, FormGroup,
} from "@astro-reactive/form"; } from "@astro-reactive/form";
import { Validators } from "@astro-reactive/validator"; import { Validators } from "@astro-reactive/validator";
import type { Submit } from "@astro-reactive/common";
const infoForm = new FormGroup([ const infoForm = new FormGroup([
{ {
@ -33,7 +35,15 @@ const infoForm = new FormGroup([
name: "country", name: "country",
label: "Country of Residence", label: "Country of Residence",
type: "dropdown", type: "dropdown",
options: ["U.S.A", "Canada", "Mexico", "Cuba", "Guatamala", "Greenland", "Haiti"], options: [
"U.S.A",
"Canada",
"Mexico",
"Cuba",
"Guatamala",
"Greenland",
"Haiti",
],
placeholder: "Choose Your Country", placeholder: "Choose Your Country",
}, },
{ {
@ -86,17 +96,15 @@ const resume: ControlConfig = {
type: "file", type: "file",
}; };
const submit: ControlConfig = { const submit: Submit = {
name: "submit", name: "submit",
type: "submit", type: "submit",
}; };
infoForm.name = "Application Form"; infoForm.name = "Application Form";
skillsForm.name = "Skills" skillsForm.name = "Skills";
skillsForm.controls.push(new FormControl(resume)); skillsForm.controls.push(new FormControl(resume));
--- ---
<html lang="en"> <html lang="en">
@ -108,34 +116,41 @@ skillsForm.controls.push(new FormControl(resume));
<title>Astro</title> <title>Astro</title>
</head> </head>
<body class="bg-gray-100 text-gray-900 tracking-wider leading-normal"> <body class="bg-gray-100 text-gray-900 tracking-wider leading-normal">
<Nav />
<!-- Navbar -->
<nav class="bg-sky-300 fixed w-full z-10 top-0 shadow text-xl pl-3">Examples: <a href="/">Home</a> | <a href="/pizza-delivery">Pizza Delivery</a></nav>
<!-- Title --> <!-- Title -->
<div class="items-center mt-10"> <div class="items-center mt-10">
<h1 class="items-center text-center font-sans font-bold break-normal text-gray-700 px-2 text-xl mt-12 lg:mt-0 md:text-5xl">Programmer Job Application</h1> <h1
class="items-center text-center font-sans font-bold break-normal text-gray-700 px-2 text-xl mt-12 lg:mt-0 md:text-5xl"
>
Programmer Job Application
</h1>
</div> </div>
<!--Container--> <!--Container-->
<div class="container w-full flex flex-wrap mx-auto px-2 pt-8 lg:pt-10 mt-4"> <div
class="container w-full flex flex-wrap mx-auto px-2 pt-8 lg:pt-10 mt-4"
>
<!-- Section --> <!-- Section -->
<section class="w-full"> <section class="w-full">
<!-- Horizontal Rule -->
<hr class="bg-gray-300 w-full">
<!-- Header --> <!-- Header -->
<h2 id='section1' class="font-sans font-bold break-normal text-gray-700 px-2 pb-4 text-xl">Enter your information</h2> <h2
id="section1"
class="font-sans font-bold break-normal text-gray-700 px-2 pb-4 text-xl"
>
Enter your information
</h2>
<!-- Form --> <!-- Form -->
<div class="p-8 mt-6 lg:mt-0 leading-normal rounded shadow bg-slate-200"> <div
<Form showValidationHints={true} formGroups={[infoForm, skillsForm]} submitControl={submit}></Form> class="p-8 mt-6 lg:mt-0 leading-normal rounded shadow bg-slate-200"
>
<Form
showValidationHints={true}
formGroups={[infoForm, skillsForm]}
submitControl={submit}
/>
</div> </div>
</section> </section>
</div> </div>
</body> </body>
</html> </html>

3
apps/demo/src/pages/pizza-delivery.astro
View file

@ -1,4 +1,5 @@
--- ---
import Nav from "../components/Nav.astro";
import Form, { FormGroup } from "@astro-reactive/form"; import Form, { FormGroup } from "@astro-reactive/form";
import { Validators } from "@astro-reactive/validator"; import { Validators } from "@astro-reactive/validator";
@ -98,7 +99,7 @@ infoForm.name = "Customer Info";
<title>Astro</title> <title>Astro</title>
</head> </head>
<body> <body>
<nav><a href="/">Home</a> | <a href="/job-application">Job Application</a></nav> <Nav />
<h1>Pizza Form Demo</h1> <h1>Pizza Form Demo</h1>
<Form <Form
showValidationHints={true} showValidationHints={true}