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

feat(demo): Layout component (#214)

Browse source
This commit is contained in:
Ayo Ayco 2022-11-28 16:46:10 +01:00 committed by GitHub
parent 965a16aaec
commit 033d0322bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 65 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
apps/demo/src/components/Layout.astro Normal file
View file

@ -0,0 +1,30 @@
---
import Nav from "./Nav.astro";
export interface Props {
title: string;
theme?: "dark" | "light";
}
const { theme = "light", title } = Astro.props;
---
<html lang="en" class={theme}>
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{title} | Astro Reactive Demo</title>
</head>
<body class={theme}>
<Nav />
<h1>{title}</h1>
<slot />
</body>
<style>
html.dark,
body.dark {
color-scheme: dark;
}
</style>
</html>

11
apps/demo/src/pages/examples/form-component.astro
View file

@ -1,6 +1,7 @@
--- ---
import type { Submit } from "@astro-reactive/common"; import type { Submit } from "@astro-reactive/common";
import Form, { FormGroup } from "@astro-reactive/form"; import Form, { FormGroup } from "@astro-reactive/form";
import Layout from "../../components/Layout.astro";
const simpleForm = new FormGroup([ const simpleForm = new FormGroup([
{ {
@ -75,8 +76,10 @@ const submitControl: Submit = {
}; };
--- ---
<h2>Simple Form</h2> <Layout title="Form API examples">
<Form formGroups={simpleForm} submitControl={submitControl} /> <h2>Simple Form</h2>
<Form formGroups={simpleForm} submitControl={submitControl} />
<h2>Form with nested form groups</h2> <h2>Form with nested form groups</h2>
<Form formGroups={[nameForm, skills]} /> <Form formGroups={[nameForm, skills]} />
</Layout>

10
apps/demo/src/pages/examples/index.astro
View file

@ -1,7 +1,9 @@
--- ---
import Layout from "../../components/Layout.astro";
--- ---
<h1>Docs Examples</h1> <Layout title="Docs Examples">
<ul> <ul>
<li><a href="./examples/form-component">Form Component</a></li> <li><a href="./examples/form-component">Form Component</a></li>
</ul> </ul>
</Layout>

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

@ -1,11 +1,11 @@
--- ---
import Nav from "../components/Nav.astro";
import Form, { import Form, {
ControlConfig, ControlConfig,
FormGroup, FormGroup,
FormControl, FormControl,
} from "@astro-reactive/form"; } from "@astro-reactive/form";
import { Validators } from "@astro-reactive/validator"; import { Validators } from "@astro-reactive/validator";
import Layout from "../components/Layout.astro";
const form = new FormGroup([ const form = new FormGroup([
{ {
@ -86,26 +86,10 @@ form.get("is-awesome")?.setValue("checked");
form.get("email")?.setValue("invalid-email"); form.get("email")?.setValue("invalid-email");
// switch between light and dark mode // switch between light and dark mode
const title = "Form Demo";
const theme = "dark"; const theme = "dark";
--- ---
<html lang="en" class={theme}> <Layout title={title} theme={theme}>
<head> <Form showValidationHints={true} formGroups={form} theme={theme} />
<meta charset="utf-8" /> </Layout>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body class={theme}>
<Nav />
<h1>Astro Reactive Form</h1>
<Form showValidationHints={true} formGroups={form} theme={theme} />
<style>
html.dark,
body.dark {
color-scheme: dark;
}
</style>
</body>
</html>

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

@ -1,5 +1,4 @@
--- ---
import Nav from "../components/Nav.astro";
import Form, { import Form, {
ControlConfig, ControlConfig,
FormControl, FormControl,
@ -7,6 +6,7 @@ import Form, {
} 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"; import type { Submit } from "@astro-reactive/common";
import Layout from "../components/Layout.astro";
const infoForm = new FormGroup([ const infoForm = new FormGroup([
{ {
@ -106,8 +106,8 @@ const values = {
lastName: "Bond", lastName: "Bond",
email: "james.bond@gmail.com", email: "james.bond@gmail.com",
country: "U.S.A", country: "U.S.A",
eligible: "yes" eligible: "yes",
} };
infoForm.setValue(values); infoForm.setValue(values);
@ -117,50 +117,10 @@ skillsForm.name = "Skills";
skillsForm.controls.push(new FormControl(resume)); skillsForm.controls.push(new FormControl(resume));
--- ---
<html lang="en"> <Layout title="Programmer Job Application">
<head> <Form
<meta charset="utf-8" /> showValidationHints={true}
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> formGroups={[infoForm, skillsForm]}
<meta name="viewport" content="width=device-width" /> submitControl={submit}
<meta name="generator" content={Astro.generator} /> />
<title>Astro</title> </Layout>
</head>
<body class="bg-gray-100 text-gray-900 tracking-wider leading-normal">
<Nav />
<!-- Title -->
<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>
</div>
<!--Container-->
<div
class="container w-full flex flex-wrap mx-auto px-2 pt-8 lg:pt-10 mt-4"
>
<!-- Section -->
<section class="w-full">
<!-- Header -->
<h2
id="section1"
class="font-sans font-bold break-normal text-gray-700 px-2 pb-4 text-xl"
>
Enter your information
</h2>
<!-- Form -->
<div
class="p-8 mt-6 lg:mt-0 leading-normal rounded shadow bg-slate-200"
>
<Form
showValidationHints={true}
formGroups={[infoForm, skillsForm]}
submitControl={submit}
/>
</div>
</section>
</div>
</body>
</html>

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

@ -1,7 +1,7 @@
--- ---
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";
import Layout from "../components/Layout.astro";
const baseForm = new FormGroup([ const baseForm = new FormGroup([
{ {
@ -91,20 +91,9 @@ infoForm.name = "Customer Info";
infoForm.get("contact")?.setValidators([Validators.minLength(9)]); infoForm.get("contact")?.setValidators([Validators.minLength(9)]);
--- ---
<html lang="en"> <Layout title="Pizza Form Demo">
<head> <Form
<meta charset="utf-8" /> showValidationHints={true}
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> formGroups={[baseForm, toppingsForm, infoForm]}
<meta name="viewport" content="width=device-width" /> />
<meta name="generator" content={Astro.generator} /> </Layout>
<title>Astro</title>
</head>
<body>
<Nav />
<h1>Pizza Form Demo</h1>
<Form
showValidationHints={true}
formGroups={[baseForm, toppingsForm, infoForm]}
/>
</body>
</html>