From f79ce72a1c3ab3ea09c78dbccdbf40d944c2d8cc Mon Sep 17 00:00:00 2001
From: Lalit <lalitkumarsingh3716@gmail.com>
Date: Sat, 14 Jan 2023 15:10:40 +0530
Subject: [PATCH] chore(apps): Setup prettier + eslint for all our apps (#254)

* chore(apps): setup prettier + eslint for all our apps

* fix(docs): Fixed the use of implicit any type

* chore(apps): Added .eslintignore files
---
 apps/demo/.eslintignore                       |   2 +
 apps/demo/.eslintrc.cjs                       |   5 +
 apps/demo/.prettierrc.cjs                     |  24 ++
 apps/demo/README.md                           |   1 -
 apps/demo/astro.config.mjs                    |   2 +-
 apps/demo/package.json                        |  12 +-
 apps/demo/src/components/Layout.astro         |  44 +--
 apps/demo/src/components/Nav.astro            |  30 +-
 .../src/pages/examples/form-component.astro   | 126 ++++----
 apps/demo/src/pages/examples/index.astro      |   8 +-
 .../src/pages/experimental/hyperdrive.astro   |  24 +-
 apps/demo/src/pages/experimental/index.astro  |   8 +-
 apps/demo/src/pages/index.astro               | 176 ++++++------
 apps/demo/src/pages/job-application.astro     | 188 ++++++------
 apps/demo/src/pages/pizza-delivery.astro      | 162 +++++------
 apps/demo/tsconfig.json                       |   2 +-
 apps/docs/.eslintignore                       |   2 +
 apps/docs/.eslintrc.cjs                       |   5 +
 apps/docs/.prettierrc.cjs                     |  24 ++
 apps/docs/README.md                           |   1 -
 apps/docs/package.json                        |  12 +-
 .../public/make-scrollable-code-focusable.js  |   1 +
 .../src/components/Footer/AvatarList.astro    | 245 ++++++++--------
 apps/docs/src/components/HeadCommon.astro     |   4 +-
 apps/docs/src/components/Header/Header.astro  | 238 ++++++++-------
 apps/docs/src/components/Header/Search.tsx    |   2 +-
 .../components/LeftSidebar/LeftSidebar.astro  | 183 ++++++------
 .../components/PageContent/PageContent.astro  |  72 ++---
 .../components/RightSidebar/MoreMenu.astro    | 120 ++++----
 apps/docs/src/config.ts                       |  81 +++---
 apps/docs/src/languages.ts                    |   2 +-
 apps/docs/src/layouts/MainLayout.astro        | 270 +++++++++---------
 .../src/pages/en/api/form/form-component.md   | 104 +++----
 .../src/pages/en/api/form/form-control.md     |   4 +-
 apps/docs/src/pages/en/api/form/form-group.md |  12 +-
 apps/docs/src/pages/en/api/form/index.astro   |   6 +-
 apps/docs/src/pages/en/api/index.astro        |   6 +-
 .../src/pages/en/api/validator/index.astro    |   2 +-
 .../src/pages/en/api/validator/validators.md  |  92 +++---
 apps/docs/src/pages/en/index.astro            |   6 +-
 apps/docs/src/pages/en/introduction.md        |  11 +-
 apps/docs/src/pages/en/philosophy.md          |   2 +-
 .../src/pages/en/tutorial/getting-started.md  |  12 +-
 apps/docs/src/pages/en/tutorial/page-2.md     |  30 +-
 apps/docs/src/pages/index.astro               |   6 +-
 apps/docs/tsconfig.json                       |   7 +-
 apps/landing-page/.eslintignore               |   2 +
 apps/landing-page/.eslintrc.cjs               |   5 +
 apps/landing-page/.prettierrc.cjs             |  24 ++
 apps/landing-page/.prettierrc.json            |   1 -
 apps/landing-page/astro.config.mjs            |  18 +-
 apps/landing-page/package.json                |  13 +-
 apps/landing-page/src/styles/global.css       |  10 +-
 apps/landing-page/src/styles/index.css        |   4 +-
 apps/landing-page/src/styles/theme.css        |  32 +--
 apps/landing-page/tailwind.config.cjs         |  70 ++---
 package-lock.json                             |  59 +++-
 57 files changed, 1349 insertions(+), 1265 deletions(-)
 create mode 100644 apps/demo/.eslintignore
 create mode 100644 apps/demo/.eslintrc.cjs
 create mode 100644 apps/demo/.prettierrc.cjs
 create mode 100644 apps/docs/.eslintignore
 create mode 100644 apps/docs/.eslintrc.cjs
 create mode 100644 apps/docs/.prettierrc.cjs
 create mode 100644 apps/landing-page/.eslintignore
 create mode 100644 apps/landing-page/.eslintrc.cjs
 create mode 100644 apps/landing-page/.prettierrc.cjs
 delete mode 100644 apps/landing-page/.prettierrc.json

diff --git a/apps/demo/.eslintignore b/apps/demo/.eslintignore
new file mode 100644
index 0000000..db4c6d9
--- /dev/null
+++ b/apps/demo/.eslintignore
@@ -0,0 +1,2 @@
+dist
+node_modules
\ No newline at end of file
diff --git a/apps/demo/.eslintrc.cjs b/apps/demo/.eslintrc.cjs
new file mode 100644
index 0000000..2ce75c4
--- /dev/null
+++ b/apps/demo/.eslintrc.cjs
@@ -0,0 +1,5 @@
+/** @type {import("@types/eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ['@astro-reactive/eslint-config-custom'],
+};
diff --git a/apps/demo/.prettierrc.cjs b/apps/demo/.prettierrc.cjs
new file mode 100644
index 0000000..0e9c748
--- /dev/null
+++ b/apps/demo/.prettierrc.cjs
@@ -0,0 +1,24 @@
+/** @type {import("@types/prettier").Options} */
+module.exports = {
+  printWidth: 100,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+  useTabs: true,
+  plugins: ['../../node_modules/prettier-plugin-astro'],
+  overrides: [
+    {
+      files: '*.astro',
+      options: {
+        parser: 'astro',
+      },
+    },
+    {
+      files: ['.*', '*.json', '*.md', '*.toml', '*.yml'],
+      options: {
+        useTabs: false,
+      },
+    },
+  ],
+};
diff --git a/apps/demo/README.md b/apps/demo/README.md
index 0e23d61..42c2d31 100644
--- a/apps/demo/README.md
+++ b/apps/demo/README.md
@@ -5,4 +5,3 @@
 Start the dev server by running: `npm start`
 
 👉 _[Join our contributors!](https://github.com/astro-reactive/astro-reactive/blob/main/CONTRIBUTING.md)_
-
diff --git a/apps/demo/astro.config.mjs b/apps/demo/astro.config.mjs
index 4840250..882e651 100644
--- a/apps/demo/astro.config.mjs
+++ b/apps/demo/astro.config.mjs
@@ -1,4 +1,4 @@
-import { defineConfig } from "astro/config";
+import { defineConfig } from 'astro/config';
 
 // https://astro.build/config
 export default defineConfig({});
diff --git a/apps/demo/package.json b/apps/demo/package.json
index 9f061b8..c65fc38 100644
--- a/apps/demo/package.json
+++ b/apps/demo/package.json
@@ -12,10 +12,12 @@
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
+    "format": "prettier -w .",
+    "lint": "eslint . --ext .ts,.js",
+    "lint:fix": "eslint --fix . --ext .ts,.js",
     "clean": "rimraf node_modules .turbo dist"
   },
   "dependencies": {
-    "@astro-reactive/tsconfig": "*",
     "@astro-reactive/form": "*",
     "@astro-reactive/validator": "*",
     "astro": "^1.6.5"
@@ -31,7 +33,13 @@
   },
   "homepage": "https://github.com/astro-reactive/astro-reactive#readme",
   "devDependencies": {
+    "@astro-reactive/eslint-config-custom": "*",
+    "@astro-reactive/tsconfig": "*",
+    "@types/eslint": "^8.4.10",
+    "@types/prettier": "^2.7.2",
+    "eslint": "^8.31.0",
+    "prettier": "^2.8.3",
+    "prettier-plugin-astro": "^0.7.2",
     "rimraf": "^3.0.2"
   }
 }
-
diff --git a/apps/demo/src/components/Layout.astro b/apps/demo/src/components/Layout.astro
index ffeda21..70892e5 100644
--- a/apps/demo/src/components/Layout.astro
+++ b/apps/demo/src/components/Layout.astro
@@ -1,30 +1,30 @@
 ---
-import Nav from "./Nav.astro";
+import Nav from './Nav.astro';
 
 export interface Props {
-  title: string;
-  theme?: "dark" | "light";
+	title: string;
+	theme?: 'dark' | 'light';
 }
-const { theme = "light", title } = Astro.props;
+const { theme = 'light', title } = Astro.props;
 ---
 
 <html lang="en" class={theme}>
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <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>
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
+		<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>
diff --git a/apps/demo/src/components/Nav.astro b/apps/demo/src/components/Nav.astro
index e9574f6..c58ac53 100644
--- a/apps/demo/src/components/Nav.astro
+++ b/apps/demo/src/components/Nav.astro
@@ -1,25 +1,25 @@
 ---
 const links = [
-  { label: "Home", url: "/" },
-  { label: "Pizza Delivery", url: "/pizza-delivery" },
-  { label: "Job Application", url: "/job-application" },
-  { label: "Docs Examples", url: "/examples" },
-  { label: "Experimental", url: "/experimental" },
+	{ label: 'Home', url: '/' },
+	{ label: 'Pizza Delivery', url: '/pizza-delivery' },
+	{ label: 'Job Application', url: '/job-application' },
+	{ label: 'Docs Examples', url: '/examples' },
+	{ label: 'Experimental', url: '/experimental' },
 ];
 ---
 
 <nav>
-  {links.map((link) => <a href={link.url}>{link.label}</a>)}
+	{links.map((link) => <a href={link.url}>{link.label}</a>)}
 </nav>
 
 <style>
-  nav a::after {
-    content: " | ";
-  }
-  nav a {
-    text-decoration: none;
-  }
-  nav a:hover {
-    text-decoration: underline;
-  }
+	nav a::after {
+		content: ' | ';
+	}
+	nav a {
+		text-decoration: none;
+	}
+	nav a:hover {
+		text-decoration: underline;
+	}
 </style>
diff --git a/apps/demo/src/pages/examples/form-component.astro b/apps/demo/src/pages/examples/form-component.astro
index 30428b1..7ddd67a 100644
--- a/apps/demo/src/pages/examples/form-component.astro
+++ b/apps/demo/src/pages/examples/form-component.astro
@@ -1,69 +1,69 @@
 ---
-import type { Submit } from "@astro-reactive/common";
-import Form, { FormGroup } from "@astro-reactive/form";
-import Layout from "../../components/Layout.astro";
+import type { Submit } from '@astro-reactive/common';
+import Form, { FormGroup } from '@astro-reactive/form';
+import Layout from '../../components/Layout.astro';
 
 const simpleForm = new FormGroup([
-  {
-    name: "username",
-    label: "Username",
-    value: "awesome_dev",
-  },
-  {
-    name: "comment",
-    label: "Feedback",
-    type: "textarea",
-    value: "Nice!",
-  },
-  {
-    name: "size",
-    label: "Size",
-    type: "dropdown",
-    options: ["S", "M", "L", "XL", "XXL"],
-    placeholder: "-- Please choose an option --",
-  },
+	{
+		name: 'username',
+		label: 'Username',
+		value: 'awesome_dev',
+	},
+	{
+		name: 'comment',
+		label: 'Feedback',
+		type: 'textarea',
+		value: 'Nice!',
+	},
+	{
+		name: 'size',
+		label: 'Size',
+		type: 'dropdown',
+		options: ['S', 'M', 'L', 'XL', 'XXL'],
+		placeholder: '-- Please choose an option --',
+	},
 ]);
 
 const nameForm = new FormGroup(
-  [
-    {
-      name: "firstName",
-      label: "First Name",
-      value: "John",
-    },
-    {
-      name: "lastName",
-      label: "Last Name",
-      value: "Doe",
-    },
-  ],
-  "Name"
+	[
+		{
+			name: 'firstName',
+			label: 'First Name',
+			value: 'John',
+		},
+		{
+			name: 'lastName',
+			label: 'Last Name',
+			value: 'Doe',
+		},
+	],
+	'Name'
 );
 
 const skills = new FormGroup(
-  [
-    {
-      name: "JavaScript",
-      type: "checkbox",
-      label: "JavaScript",
-    },
-    {
-      name: "TypeScript",
-      type: "checkbox",
-      label: "TypeScript",
-    },
-    {
-      name: "React",
-      type: "checkbox",
-      label: "React",
-    },
-    {
-      name: "Vue",
-      type: "checkbox",
-      label: "Vue",
-    },
-  ],
-  "Skills"
+	[
+		{
+			name: 'JavaScript',
+			type: 'checkbox',
+			label: 'JavaScript',
+		},
+		{
+			name: 'TypeScript',
+			type: 'checkbox',
+			label: 'TypeScript',
+		},
+		{
+			name: 'React',
+			type: 'checkbox',
+			label: 'React',
+		},
+		{
+			name: 'Vue',
+			type: 'checkbox',
+			label: 'Vue',
+		},
+	],
+	'Skills'
 );
 
 /**
@@ -71,15 +71,15 @@ const skills = new FormGroup(
  */
 
 const submitControl: Submit = {
-  name: "submit",
-  type: "submit",
+	name: 'submit',
+	type: 'submit',
 };
 ---
 
 <Layout title="Form API examples">
-  <h2>Simple Form</h2>
-  <Form formGroups={simpleForm} submitControl={submitControl} />
+	<h2>Simple Form</h2>
+	<Form formGroups={simpleForm} submitControl={submitControl} />
 
-  <h2>Form with nested form groups</h2>
-  <Form formGroups={[nameForm, skills]} />
+	<h2>Form with nested form groups</h2>
+	<Form formGroups={[nameForm, skills]} />
 </Layout>
diff --git a/apps/demo/src/pages/examples/index.astro b/apps/demo/src/pages/examples/index.astro
index db32788..0514e1c 100644
--- a/apps/demo/src/pages/examples/index.astro
+++ b/apps/demo/src/pages/examples/index.astro
@@ -1,9 +1,9 @@
 ---
-import Layout from "../../components/Layout.astro";
+import Layout from '../../components/Layout.astro';
 ---
 
 <Layout title="Docs Examples">
-  <ul>
-    <li><a href="./examples/form-component">Form Component</a></li>
-  </ul>
+	<ul>
+		<li><a href="./examples/form-component">Form Component</a></li>
+	</ul>
 </Layout>
diff --git a/apps/demo/src/pages/experimental/hyperdrive.astro b/apps/demo/src/pages/experimental/hyperdrive.astro
index 43c5b1b..3868505 100644
--- a/apps/demo/src/pages/experimental/hyperdrive.astro
+++ b/apps/demo/src/pages/experimental/hyperdrive.astro
@@ -1,23 +1,23 @@
 ---
-import Layout from "../../components/Layout.astro";
+import Layout from '../../components/Layout.astro';
 const Counter = {
-  count: 0,
-  increment() {
-    this.count++;
-  },
-  decrement() {
-    this.count--;
-  },
+	count: 0,
+	increment() {
+		this.count++;
+	},
+	decrement() {
+		this.count--;
+	},
 };
 ---
 
 <Layout title="Hyperdrive Experiment">
-  <!-- PROBLEM STATEMENT
+	<!-- PROBLEM STATEMENT
     This is the problem that `hyperdrive` is trying to solve.
     After this is rendered in the server, the Counter object is not serialized.
     When the HTML reaches the browser, it has no idea what Counter is.
    -->
-  <button onclick="Counter.increment()">
-    {Counter.count}
-  </button>
+	<button onclick="Counter.increment()">
+		{Counter.count}
+	</button>
 </Layout>
diff --git a/apps/demo/src/pages/experimental/index.astro b/apps/demo/src/pages/experimental/index.astro
index 0b684f2..1180954 100644
--- a/apps/demo/src/pages/experimental/index.astro
+++ b/apps/demo/src/pages/experimental/index.astro
@@ -1,9 +1,9 @@
 ---
-import Layout from "../../components/Layout.astro";
+import Layout from '../../components/Layout.astro';
 ---
 
 <Layout title="Experimental Demos">
-  <ul>
-    <li><a href="./experimental/hyperdrive">Hyperdrive</a></li>
-  </ul>
+	<ul>
+		<li><a href="./experimental/hyperdrive">Hyperdrive</a></li>
+	</ul>
 </Layout>
diff --git a/apps/demo/src/pages/index.astro b/apps/demo/src/pages/index.astro
index 7ac9b15..6a25438 100644
--- a/apps/demo/src/pages/index.astro
+++ b/apps/demo/src/pages/index.astro
@@ -1,116 +1,112 @@
 ---
-import Form, {
-  ControlConfig,
-  FormGroup,
-  FormControl,
-} from "@astro-reactive/form";
-import type { Submit } from "@astro-reactive/common/types";
-import { Validators } from "@astro-reactive/validator";
-import Layout from "../components/Layout.astro";
+import Form, { ControlConfig, FormGroup, FormControl } from '@astro-reactive/form';
+import type { Submit } from '@astro-reactive/common/types';
+import { Validators } from '@astro-reactive/validator';
+import Layout from '../components/Layout.astro';
 
 const form = new FormGroup([
-  {
-    name: "username",
-    label: "Username",
-    validators: [
-      {
-        validator: Validators.required,
-        category: "info",
-      },
-    ],
-  },
-  {
-    name: "email",
-    label: "Email",
-    validators: [
-      { validator: Validators.required },
-      { validator: Validators.email, category: "warn" },
-    ],
-  },
-  {
-    name: "password",
-    label: "Password",
-    type: "password",
-    validators: [Validators.required, Validators.minLength(8)],
-  },
-  {
-    name: "rating",
-    label: "Rating",
-    type: "radio",
-    value: "5",
-    options: ["1", "2", "3", "4", "5"],
-  },
-  {
-    name: "agreement",
-    label: "Agreement",
-    type: "radio",
-    value: "yes",
-    options: [
-      { label: "Agree", value: "yes" },
-      { label: "Disagree", value: "no" },
-    ],
-  },
-  {
-    name: "size",
-    label: "Size",
-    type: "dropdown",
-    options: ["S", "M", "L", "XL", "XXL"],
-    placeholder: "-- Please choose an option --",
-  },
-  {
-    name: "comment",
-    label: "Feedback",
-    type: "textarea",
-    value: "Nice!",
-  },
-  {
-    name: "terms",
-    label: "Terms and Conditions",
-    type: "checkbox",
-    validators: [Validators.requiredChecked],
-  },
+	{
+		name: 'username',
+		label: 'Username',
+		validators: [
+			{
+				validator: Validators.required,
+				category: 'info',
+			},
+		],
+	},
+	{
+		name: 'email',
+		label: 'Email',
+		validators: [
+			{ validator: Validators.required },
+			{ validator: Validators.email, category: 'warn' },
+		],
+	},
+	{
+		name: 'password',
+		label: 'Password',
+		type: 'password',
+		validators: [Validators.required, Validators.minLength(8)],
+	},
+	{
+		name: 'rating',
+		label: 'Rating',
+		type: 'radio',
+		value: '5',
+		options: ['1', '2', '3', '4', '5'],
+	},
+	{
+		name: 'agreement',
+		label: 'Agreement',
+		type: 'radio',
+		value: 'yes',
+		options: [
+			{ label: 'Agree', value: 'yes' },
+			{ label: 'Disagree', value: 'no' },
+		],
+	},
+	{
+		name: 'size',
+		label: 'Size',
+		type: 'dropdown',
+		options: ['S', 'M', 'L', 'XL', 'XXL'],
+		placeholder: '-- Please choose an option --',
+	},
+	{
+		name: 'comment',
+		label: 'Feedback',
+		type: 'textarea',
+		value: 'Nice!',
+	},
+	{
+		name: 'terms',
+		label: 'Terms and Conditions',
+		type: 'checkbox',
+		validators: [Validators.requiredChecked],
+	},
 ]);
 
-form.name = "Simple Form";
+form.name = 'Simple Form';
 
 const config: ControlConfig = {
-  type: "checkbox",
-  name: "is-awesome",
-  label: "is Awesome?",
+	type: 'checkbox',
+	name: 'is-awesome',
+	label: 'is Awesome?',
 };
 
 // insert a control
 form.controls.push(new FormControl(config));
 
 // get the FormControl object
-const userNameControl = form.get("username");
+const userNameControl = form.get('username');
 
 // set values dynamically
-userNameControl?.setValue("RAMOOOON");
-form.get("is-awesome")?.setValue("checked");
+userNameControl?.setValue('RAMOOOON');
+form.get('is-awesome')?.setValue('checked');
 
 // setting an invalid value will cause errors as server-rendered
-form.get("email")?.setValue("invalid-email");
+form.get('email')?.setValue('invalid-email');
 
 // switch between light and dark mode
-const title = "Form Demo";
-const theme = "dark";
+const title = 'Form Demo';
+const theme = 'dark';
 
 const submit: Submit = {
-  name: "submit",
-  type: "submit",
-  value: "Let's go!",
+	name: 'submit',
+	type: 'submit',
+	value: "Let's go!",
 };
 ---
 
 <Layout title={title} theme={theme}>
-  <Form
-    validateOnLoad
-    showValidationHints
-    formGroups={form}
-    theme={theme}
-    submitControl={submit}
-    action="https://localhost"
-    method="post"
-  />
+	<Form
+		validateOnLoad
+		showValidationHints
+		formGroups={form}
+		theme={theme}
+		submitControl={submit}
+		action="https://localhost"
+		method="post"
+	/>
 </Layout>
diff --git a/apps/demo/src/pages/job-application.astro b/apps/demo/src/pages/job-application.astro
index a6d3b46..c2ec2cc 100644
--- a/apps/demo/src/pages/job-application.astro
+++ b/apps/demo/src/pages/job-application.astro
@@ -1,127 +1,111 @@
 ---
-import Form, {
-  ControlConfig,
-  FormControl,
-  FormGroup,
-} from "@astro-reactive/form";
-import { Validators } from "@astro-reactive/validator";
-import type { Submit } from "@astro-reactive/common";
-import Layout from "../components/Layout.astro";
+import Form, { ControlConfig, FormControl, FormGroup } from '@astro-reactive/form';
+import { Validators } from '@astro-reactive/validator';
+import type { Submit } from '@astro-reactive/common';
+import Layout from '../components/Layout.astro';
 
 const infoForm = new FormGroup([
-  {
-    name: "firstName",
-    label: "First Name",
-    placeholder: "ex. John",
-    validators: [Validators.required],
-  },
-  {
-    name: "lastName",
-    label: "Last Name",
-    placeholder: "ex. Doe",
-    validators: [Validators.required],
-  },
-  {
-    name: "email",
-    label: "Email",
-    placeholder: "ex. john.doe@email.com",
-    validators: [Validators.email, Validators.required],
-  },
-  {
-    name: "whyHire",
-    label: "Why should we hire you?",
-  },
-  {
-    name: "country",
-    label: "Country of Residence",
-    type: "dropdown",
-    options: [
-      "U.S.A",
-      "Canada",
-      "Mexico",
-      "Cuba",
-      "Guatamala",
-      "Greenland",
-      "Haiti",
-    ],
-    placeholder: "Choose Your Country",
-  },
-  {
-    name: "eligible",
-    label: "Are you eligible to work?",
-    type: "radio",
-    options: [
-      { label: "Yes", value: "yes" },
-      { label: "No", value: "no" },
-    ],
-  },
+	{
+		name: 'firstName',
+		label: 'First Name',
+		placeholder: 'ex. John',
+		validators: [Validators.required],
+	},
+	{
+		name: 'lastName',
+		label: 'Last Name',
+		placeholder: 'ex. Doe',
+		validators: [Validators.required],
+	},
+	{
+		name: 'email',
+		label: 'Email',
+		placeholder: 'ex. john.doe@email.com',
+		validators: [Validators.email, Validators.required],
+	},
+	{
+		name: 'whyHire',
+		label: 'Why should we hire you?',
+	},
+	{
+		name: 'country',
+		label: 'Country of Residence',
+		type: 'dropdown',
+		options: ['U.S.A', 'Canada', 'Mexico', 'Cuba', 'Guatamala', 'Greenland', 'Haiti'],
+		placeholder: 'Choose Your Country',
+	},
+	{
+		name: 'eligible',
+		label: 'Are you eligible to work?',
+		type: 'radio',
+		options: [
+			{ label: 'Yes', value: 'yes' },
+			{ label: 'No', value: 'no' },
+		],
+	},
 ]);
 
 const skillsForm = new FormGroup([
-  {
-    name: "js",
-    label: "Javascript",
-    type: "checkbox",
-  },
-  {
-    name: "java",
-    label: "Java",
-    type: "checkbox",
-  },
-  {
-    name: "astro",
-    label: "Astro",
-    type: "checkbox",
-  },
-  {
-    name: "cpp",
-    label: "C/C++",
-    type: "checkbox",
-  },
-  {
-    name: "sql",
-    label: "SQL",
-    type: "checkbox",
-  },
-  {
-    name: "devops",
-    label: "DevOps",
-    type: "checkbox",
-  },
+	{
+		name: 'js',
+		label: 'Javascript',
+		type: 'checkbox',
+	},
+	{
+		name: 'java',
+		label: 'Java',
+		type: 'checkbox',
+	},
+	{
+		name: 'astro',
+		label: 'Astro',
+		type: 'checkbox',
+	},
+	{
+		name: 'cpp',
+		label: 'C/C++',
+		type: 'checkbox',
+	},
+	{
+		name: 'sql',
+		label: 'SQL',
+		type: 'checkbox',
+	},
+	{
+		name: 'devops',
+		label: 'DevOps',
+		type: 'checkbox',
+	},
 ]);
 
 const resume: ControlConfig = {
-  name: "resume",
-  label: "Upload Resume",
-  type: "file",
+	name: 'resume',
+	label: 'Upload Resume',
+	type: 'file',
 };
 
 const submit: Submit = {
-  name: "submit",
-  type: "submit",
-  value: "Let's go!",
+	name: 'submit',
+	type: 'submit',
+	value: "Let's go!",
 };
 
 const values = {
-  firstName: "James",
-  lastName: "Bond",
-  email: "james.bond@gmail.com",
-  country: "U.S.A",
-  eligible: "yes",
+	firstName: 'James',
+	lastName: 'Bond',
+	email: 'james.bond@gmail.com',
+	country: 'U.S.A',
+	eligible: 'yes',
 };
 
 infoForm.setValue(values);
 
-infoForm.name = "Application Form";
-skillsForm.name = "Skills";
+infoForm.name = 'Application Form';
+skillsForm.name = 'Skills';
 
 skillsForm.controls.push(new FormControl(resume));
 ---
 
 <Layout title="Programmer Job Application">
-  <Form
-    showValidationHints
-    formGroups={[infoForm, skillsForm]}
-    submitControl={submit}
-  />
+	<Form showValidationHints formGroups={[infoForm, skillsForm]} submitControl={submit} />
 </Layout>
diff --git a/apps/demo/src/pages/pizza-delivery.astro b/apps/demo/src/pages/pizza-delivery.astro
index f5b8c94..80d2ba2 100644
--- a/apps/demo/src/pages/pizza-delivery.astro
+++ b/apps/demo/src/pages/pizza-delivery.astro
@@ -1,96 +1,96 @@
 ---
-import Form, { FormGroup } from "@astro-reactive/form";
-import { Validators } from "@astro-reactive/validator";
-import Layout from "../components/Layout.astro";
+import Form, { FormGroup } from '@astro-reactive/form';
+import { Validators } from '@astro-reactive/validator';
+import Layout from '../components/Layout.astro';
 
 const baseForm = new FormGroup([
-  {
-    name: "crust",
-    label: "Crust",
-    type: "radio",
-    options: [{ label: "Garlic", value: "garlic" }],
-  },
-  {
-    name: "size",
-    label: "Size",
-    type: "radio",
-    options: ["Small", "Medium", "Large"],
-  },
-  {
-    name: "sauce",
-    label: "Sauce",
-    type: "radio",
-    options: ["Tomato", "Barbeque"],
-  },
+	{
+		name: 'crust',
+		label: 'Crust',
+		type: 'radio',
+		options: [{ label: 'Garlic', value: 'garlic' }],
+	},
+	{
+		name: 'size',
+		label: 'Size',
+		type: 'radio',
+		options: ['Small', 'Medium', 'Large'],
+	},
+	{
+		name: 'sauce',
+		label: 'Sauce',
+		type: 'radio',
+		options: ['Tomato', 'Barbeque'],
+	},
 ]);
 
 const toppingsForm = new FormGroup([
-  {
-    name: "mushrooms",
-    label: "Mushrooms",
-    type: "checkbox",
-  },
-  {
-    name: "extraCheese",
-    label: "Extra Cheese",
-    type: "checkbox",
-  },
-  {
-    name: "onions",
-    label: "Onions",
-    type: "checkbox",
-  },
-  {
-    name: "peppers",
-    label: "Peppers",
-    type: "checkbox",
-  },
-  {
-    name: "pepperoni",
-    label: "Pepperoni",
-    type: "checkbox",
-  },
-  {
-    name: "sausage",
-    label: "Sausage",
-    type: "checkbox",
-  },
-  {
-    name: "chicken",
-    label: "Chicken",
-    type: "checkbox",
-  },
-  {
-    name: "pineapple",
-    label: "Pineapple",
-    type: "checkbox",
-  },
+	{
+		name: 'mushrooms',
+		label: 'Mushrooms',
+		type: 'checkbox',
+	},
+	{
+		name: 'extraCheese',
+		label: 'Extra Cheese',
+		type: 'checkbox',
+	},
+	{
+		name: 'onions',
+		label: 'Onions',
+		type: 'checkbox',
+	},
+	{
+		name: 'peppers',
+		label: 'Peppers',
+		type: 'checkbox',
+	},
+	{
+		name: 'pepperoni',
+		label: 'Pepperoni',
+		type: 'checkbox',
+	},
+	{
+		name: 'sausage',
+		label: 'Sausage',
+		type: 'checkbox',
+	},
+	{
+		name: 'chicken',
+		label: 'Chicken',
+		type: 'checkbox',
+	},
+	{
+		name: 'pineapple',
+		label: 'Pineapple',
+		type: 'checkbox',
+	},
 ]);
 
 const infoForm = new FormGroup([
-  {
-    name: "name",
-    label: "Name",
-    validators: [Validators.required],
-  },
-  {
-    name: "address",
-    label: "Delivery Address",
-    validators: [Validators.required],
-  },
-  {
-    name: "contact",
-    label: "Contact Number",
-    validators: [Validators.required],
-  },
+	{
+		name: 'name',
+		label: 'Name',
+		validators: [Validators.required],
+	},
+	{
+		name: 'address',
+		label: 'Delivery Address',
+		validators: [Validators.required],
+	},
+	{
+		name: 'contact',
+		label: 'Contact Number',
+		validators: [Validators.required],
+	},
 ]);
 
-baseForm.name = "Base";
-toppingsForm.name = "Toppings";
-infoForm.name = "Customer Info";
-infoForm.get("contact")?.setValidators([Validators.minLength(9)]);
+baseForm.name = 'Base';
+toppingsForm.name = 'Toppings';
+infoForm.name = 'Customer Info';
+infoForm.get('contact')?.setValidators([Validators.minLength(9)]);
 ---
 
 <Layout title="Pizza Form Demo">
-  <Form showValidationHints formGroups={[baseForm, toppingsForm, infoForm]} />
+	<Form showValidationHints formGroups={[baseForm, toppingsForm, infoForm]} />
 </Layout>
diff --git a/apps/demo/tsconfig.json b/apps/demo/tsconfig.json
index c3b1e3d..142b083 100644
--- a/apps/demo/tsconfig.json
+++ b/apps/demo/tsconfig.json
@@ -1,3 +1,3 @@
 {
   "extends": "@astro-reactive/tsconfig/base.json"
-}
\ No newline at end of file
+}
diff --git a/apps/docs/.eslintignore b/apps/docs/.eslintignore
new file mode 100644
index 0000000..db4c6d9
--- /dev/null
+++ b/apps/docs/.eslintignore
@@ -0,0 +1,2 @@
+dist
+node_modules
\ No newline at end of file
diff --git a/apps/docs/.eslintrc.cjs b/apps/docs/.eslintrc.cjs
new file mode 100644
index 0000000..2ce75c4
--- /dev/null
+++ b/apps/docs/.eslintrc.cjs
@@ -0,0 +1,5 @@
+/** @type {import("@types/eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ['@astro-reactive/eslint-config-custom'],
+};
diff --git a/apps/docs/.prettierrc.cjs b/apps/docs/.prettierrc.cjs
new file mode 100644
index 0000000..2532f35
--- /dev/null
+++ b/apps/docs/.prettierrc.cjs
@@ -0,0 +1,24 @@
+/** @type {import("@types/prettier").Options} */
+module.exports = {
+  printWidth: 100,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: "es5",
+  useTabs: true,
+  plugins: ["../../node_modules/prettier-plugin-astro"],
+  overrides: [
+    {
+      files: "*.astro",
+      options: {
+        parser: "astro",
+      },
+    },
+    {
+      files: [".*", "*.json", "*.md", "*.toml", "*.yml"],
+      options: {
+        useTabs: false,
+      },
+    },
+  ],
+};
diff --git a/apps/docs/README.md b/apps/docs/README.md
index ebfb651..efb9958 100644
--- a/apps/docs/README.md
+++ b/apps/docs/README.md
@@ -5,4 +5,3 @@
 Start the dev server by running: `npm run docs`
 
 👉 _[Join our contributors!](https://github.com/astro-reactive/astro-reactive/blob/main/CONTRIBUTING.md)_
-
diff --git a/apps/docs/package.json b/apps/docs/package.json
index fb43db1..44789f9 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -11,6 +11,9 @@
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
+    "format": "prettier -w .",
+    "lint": "eslint . --ext .ts,.js",
+    "lint:fix": "eslint --fix . --ext .ts,.js",
     "clean": "rimraf node_modules .turbo dist"
   },
   "dependencies": {
@@ -24,7 +27,6 @@
     "@types/react-dom": "^18.0.0",
     "astro": "^1.4.4",
     "preact": "^10.7.3",
-    "prettier-plugin-astro": "^0.7.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
   },
@@ -41,7 +43,13 @@
   },
   "homepage": "https://github.com/astro-reactive/astro-reactive#readme",
   "devDependencies": {
+    "@astro-reactive/eslint-config-custom": "*",
+    "@astro-reactive/tsconfig": "*",
+    "@types/eslint": "^8.4.10",
+    "@types/prettier": "^2.7.2",
+    "eslint": "^8.31.0",
+    "prettier": "^2.8.3",
+    "prettier-plugin-astro": "^0.7.2",
     "rimraf": "^3.0.2"
   }
 }
-
diff --git a/apps/docs/public/make-scrollable-code-focusable.js b/apps/docs/public/make-scrollable-code-focusable.js
index f2b7030..358f425 100644
--- a/apps/docs/public/make-scrollable-code-focusable.js
+++ b/apps/docs/public/make-scrollable-code-focusable.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-undef
 Array.from(document.getElementsByTagName('pre')).forEach((element) => {
 	element.setAttribute('tabindex', '0');
 });
diff --git a/apps/docs/src/components/Footer/AvatarList.astro b/apps/docs/src/components/Footer/AvatarList.astro
index c6334ed..5381e42 100644
--- a/apps/docs/src/components/Footer/AvatarList.astro
+++ b/apps/docs/src/components/Footer/AvatarList.astro
@@ -1,7 +1,7 @@
 ---
 // fetch all commits for just this page's path
 type Props = {
-  path: string;
+	path: string;
 };
 const { path } = Astro.props as Props;
 const resolvedPath = `apps/docs/${path}`;
@@ -9,58 +9,58 @@ const url = `https://api.github.com/repos/astro-reactive/astro-reactive/commits?
 const commitsURL = `https://github.com/astro-reactive/astro-reactive/commits/main/${resolvedPath}`;
 
 type Commit = {
-  author: {
-    id: string;
-    login: string;
-  };
+	author: {
+		id: string;
+		login: string;
+	};
 };
 
 async function getCommits(url: string) {
-  try {
-    const token = import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN ?? "hello";
-    if (!token) {
-      throw new Error(
-        'Cannot find "SNOWPACK_PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.'
-      );
-    }
+	try {
+		const token = import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN ?? 'hello';
+		if (!token) {
+			throw new Error(
+				'Cannot find "SNOWPACK_PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.'
+			);
+		}
 
-    const auth = `Basic ${Buffer.from(token, "binary").toString("base64")}`;
+		const auth = `Basic ${Buffer.from(token, 'binary').toString('base64')}`;
 
-    const res = await fetch(url, {
-      method: "GET",
-      headers: {
-        Authorization: auth,
-        "User-Agent": "astro-docs/1.0",
-      },
-    });
+		const res = await fetch(url, {
+			method: 'GET',
+			headers: {
+				Authorization: auth,
+				'User-Agent': 'astro-docs/1.0',
+			},
+		});
 
-    const data = await res.json();
+		const data = await res.json();
 
-    if (!res.ok) {
-      throw new Error(
-        `Request to fetch commits failed. Reason: ${res.statusText}
+		if (!res.ok) {
+			throw new Error(
+				`Request to fetch commits failed. Reason: ${res.statusText}
        Message: ${data.message}`
-      );
-    }
+			);
+		}
 
-    return data as Commit[];
-  } catch (e) {
-    console.warn(`[error]  /src/components/AvatarList.astro 
+		return data as Commit[];
+	} catch (e) {
+		console.warn(`[error]  /src/components/AvatarList.astro 
     ${(e as any)?.message ?? e}`);
-    return [] as Commit[];
-  }
+		return [] as Commit[];
+	}
 }
 
 function removeDups(arr: Commit[]) {
-  const map = new Map<string, Commit["author"]>();
+	const map = new Map<string, Commit['author']>();
 
-  for (let item of arr) {
-    const author = item.author;
-    // Deduplicate based on author.id
-    map.set(author.id, { login: author.login, id: author.id });
-  }
+	for (let item of arr) {
+		const author = item.author;
+		// Deduplicate based on author.id
+		map.set(author.id, { login: author.login, id: author.id });
+	}
 
-  return [...map.values()];
+	return [...map.values()];
 }
 
 const data = await getCommits(url);
@@ -71,112 +71,101 @@ const additionalContributors = unique.length - recentContributors.length; // lis
 
 <!-- Thanks to @5t3ph for https://smolcss.dev/#smol-avatar-list! -->
 <div class="contributors">
-  <ul
-    class="avatar-list"
-    style={`--avatar-count: ${recentContributors.length}`}
-  >
-    {
-      recentContributors.map((item) => (
-        <li>
-          <a href={`https://github.com/${item.login}`}>
-            <img
-              alt={`Contributor ${item.login}`}
-              title={`Contributor ${item.login}`}
-              width="64"
-              height="64"
-              src={`https://avatars.githubusercontent.com/u/${item.id}`}
-            />
-          </a>
-        </li>
-      ))
-    }
-  </ul>
-  {
-    additionalContributors > 0 && (
-      <span>
-        <a
-          href={commitsURL}
-        >{`and ${additionalContributors} additional contributor${
-          additionalContributors > 1 ? "s" : ""
-        }.`}</a>
-      </span>
-    )
-  }
-  {unique.length === 0 && <a href={commitsURL}>Contributors</a>}
+	<ul class="avatar-list" style={`--avatar-count: ${recentContributors.length}`}>
+		{
+			recentContributors.map((item) => (
+				<li>
+					<a href={`https://github.com/${item.login}`}>
+						<img
+							alt={`Contributor ${item.login}`}
+							title={`Contributor ${item.login}`}
+							width="64"
+							height="64"
+							src={`https://avatars.githubusercontent.com/u/${item.id}`}
+						/>
+					</a>
+				</li>
+			))
+		}
+	</ul>
+	{
+		additionalContributors > 0 && (
+			<span>
+				<a href={commitsURL}>{`and ${additionalContributors} additional contributor${
+					additionalContributors > 1 ? 's' : ''
+				}.`}</a>
+			</span>
+		)
+	}
+	{unique.length === 0 && <a href={commitsURL}>Contributors</a>}
 </div>
 
 <style>
-  .avatar-list {
-    --avatar-size: 2.5rem;
-    --avatar-count: 3;
+	.avatar-list {
+		--avatar-size: 2.5rem;
+		--avatar-count: 3;
 
-    display: grid;
-    list-style: none;
-    /* Default to displaying most of the avatar to
+		display: grid;
+		list-style: none;
+		/* Default to displaying most of the avatar to
   enable easier access on touch devices, ensuring
   the WCAG touch target size is met or exceeded */
-    grid-template-columns: repeat(
-      var(--avatar-count),
-      max(44px, calc(var(--avatar-size) / 1.15))
-    );
-    /* `padding` matches added visual dimensions of
+		grid-template-columns: repeat(var(--avatar-count), max(44px, calc(var(--avatar-size) / 1.15)));
+		/* `padding` matches added visual dimensions of
   the `box-shadow` to help create a more accurate
   computed component size */
-    padding: 0.08em;
-    font-size: var(--avatar-size);
-  }
+		padding: 0.08em;
+		font-size: var(--avatar-size);
+	}
 
-  @media (any-hover: hover) and (any-pointer: fine) {
-    .avatar-list {
-      /* We create 1 extra cell to enable the computed 
+	@media (any-hover: hover) and (any-pointer: fine) {
+		.avatar-list {
+			/* We create 1 extra cell to enable the computed 
     width to match the final visual width */
-      grid-template-columns: repeat(
-        calc(var(--avatar-count) + 1),
-        calc(var(--avatar-size) / 1.75)
-      );
-    }
-  }
+			grid-template-columns: repeat(calc(var(--avatar-count) + 1), calc(var(--avatar-size) / 1.75));
+		}
+	}
 
-  .avatar-list li {
-    width: var(--avatar-size);
-    height: var(--avatar-size);
-  }
+	.avatar-list li {
+		width: var(--avatar-size);
+		height: var(--avatar-size);
+	}
 
-  .avatar-list li:hover ~ li a,
-  .avatar-list li:focus-within ~ li a {
-    transform: translateX(33%);
-  }
+	.avatar-list li:hover ~ li a,
+	.avatar-list li:focus-within ~ li a {
+		transform: translateX(33%);
+	}
 
-  .avatar-list img,
-  .avatar-list a {
-    display: block;
-    border-radius: 50%;
-  }
+	.avatar-list img,
+	.avatar-list a {
+		display: block;
+		border-radius: 50%;
+	}
 
-  .avatar-list a {
-    transition: transform 180ms ease-in-out;
-  }
+	.avatar-list a {
+		transition: transform 180ms ease-in-out;
+	}
 
-  .avatar-list img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    background-color: #fff;
-    box-shadow: 0 0 0 0.05em #fff, 0 0 0 0.08em rgba(0, 0, 0, 0.15);
-  }
+	.avatar-list img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		background-color: #fff;
+		box-shadow: 0 0 0 0.05em #fff, 0 0 0 0.08em rgba(0, 0, 0, 0.15);
+	}
 
-  .avatar-list a:focus {
-    outline: 2px solid transparent;
-    /* Double-layer trick to work for dark and light backgrounds */
-    box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
-  }
+	.avatar-list a:focus {
+		outline: 2px solid transparent;
+		/* Double-layer trick to work for dark and light backgrounds */
+		box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
+	}
 
-  .contributors {
-    display: flex;
-    align-items: center;
-  }
+	.contributors {
+		display: flex;
+		align-items: center;
+	}
 
-  .contributors > * + * {
-    margin-left: 0.75rem;
-  }
+	.contributors > * + * {
+		margin-left: 0.75rem;
+	}
 </style>
diff --git a/apps/docs/src/components/HeadCommon.astro b/apps/docs/src/components/HeadCommon.astro
index 4984309..60d14a3 100644
--- a/apps/docs/src/components/HeadCommon.astro
+++ b/apps/docs/src/components/HeadCommon.astro
@@ -21,9 +21,7 @@ import '../styles/index.css';
 />
 
 <!-- Scrollable a11y code helper -->
-<script src="/make-scrollable-code-focusable.js" is:inline>
-
-</script>
+<script src="/make-scrollable-code-focusable.js" is:inline></script>
 
 <!-- This is intentionally inlined to avoid FOUC -->
 <script is:inline>
diff --git a/apps/docs/src/components/Header/Header.astro b/apps/docs/src/components/Header/Header.astro
index 94f2dae..2859c45 100644
--- a/apps/docs/src/components/Header/Header.astro
+++ b/apps/docs/src/components/Header/Header.astro
@@ -1,15 +1,15 @@
 ---
-import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from "../../languages";
-import ThemeToggleButton from "./ThemeToggleButton";
-import * as CONFIG from "../../config";
+import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages';
+import ThemeToggleButton from './ThemeToggleButton';
+import * as CONFIG from '../../config';
 // import AstroLogo from "./AstroLogo.astro";
-import SkipToContent from "./SkipToContent.astro";
-import SidebarToggle from "./SidebarToggle";
-import LanguageSelect from "./LanguageSelect";
+import SkipToContent from './SkipToContent.astro';
+import SidebarToggle from './SidebarToggle';
+import LanguageSelect from './LanguageSelect';
 // import Search from "./Search";
 
 type Props = {
-  currentPage: string;
+	currentPage: string;
 };
 
 const { currentPage } = Astro.props as Props;
@@ -17,140 +17,136 @@ const lang = getLanguageFromURL(currentPage);
 ---
 
 <header>
-  <SkipToContent />
-  <nav class="nav-wrapper" title="Top Navigation">
-    <div class="menu-toggle">
-      <SidebarToggle client:idle />
-    </div>
-    <div class="logo flex">
-      <a href="/">
-        <h1>{CONFIG.SITE.title ?? "Documentation"}</h1>
-      </a>
-    </div>
-    <div style="flex-grow: 1;"></div>
-    {
-      KNOWN_LANGUAGE_CODES.length > 1 && (
-        <LanguageSelect lang={lang} client:idle />
-      )
-    }
-    <!-- TODO: enable search -->
-    <!-- <div class="search-item">
+	<SkipToContent />
+	<nav class="nav-wrapper" title="Top Navigation">
+		<div class="menu-toggle">
+			<SidebarToggle client:idle />
+		</div>
+		<div class="logo flex">
+			<a href="/">
+				<h1>{CONFIG.SITE.title ?? 'Documentation'}</h1>
+			</a>
+		</div>
+		<div style="flex-grow: 1;"></div>
+		{KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle />}
+		<!-- TODO: enable search -->
+		<!-- <div class="search-item">
       <Search client:idle />
     </div> -->
 
-    <ThemeToggleButton client:visible />
-  </nav>
+		<ThemeToggleButton client:visible />
+	</nav>
 </header>
 
 <style>
-  header {
-    z-index: 11;
-    height: var(--theme-navbar-height);
-    width: 100%;
-    background-color: var(--theme-navbar-bg);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: sticky;
-    top: 0;
-  }
+	header {
+		z-index: 11;
+		height: var(--theme-navbar-height);
+		width: 100%;
+		background-color: var(--theme-navbar-bg);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+		position: sticky;
+		top: 0;
+	}
 
-  .logo {
-    flex: 1;
-    display: flex;
-    overflow: hidden;
-    width: 30px;
-    font-size: 2rem;
-    flex-shrink: 0;
-    font-weight: 600;
-    line-height: 1;
-    color: hsla(var(--color-base-white), 100%, 1);
-    gap: 0.25em;
-    z-index: -1;
-  }
+	.logo {
+		flex: 1;
+		display: flex;
+		overflow: hidden;
+		width: 30px;
+		font-size: 2rem;
+		flex-shrink: 0;
+		font-weight: 600;
+		line-height: 1;
+		color: hsla(var(--color-base-white), 100%, 1);
+		gap: 0.25em;
+		z-index: -1;
+	}
 
-  .logo a {
-    display: flex;
-    padding: 0.5em 0.25em;
-    margin: -0.5em -0.25em;
-    text-decoration: none;
-    font-weight: bold;
-  }
+	.logo a {
+		display: flex;
+		padding: 0.5em 0.25em;
+		margin: -0.5em -0.25em;
+		text-decoration: none;
+		font-weight: bold;
+	}
 
-  .logo a {
-    transition: color 100ms ease-out;
-    color: var(--theme-text);
-  }
+	.logo a {
+		transition: color 100ms ease-out;
+		color: var(--theme-text);
+	}
 
-  .logo a:hover,
-  .logo a:focus {
-    color: var(--theme-text-accent);
-  }
+	.logo a:hover,
+	.logo a:focus {
+		color: var(--theme-text-accent);
+	}
 
-  .logo h1 {
-    display: none;
-    font: inherit;
-    color: inherit;
-    margin: 0;
-  }
+	.logo h1 {
+		display: none;
+		font: inherit;
+		color: inherit;
+		margin: 0;
+	}
 
-  .nav-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 1em;
-    width: 100%;
-    max-width: 82em;
-    padding: 0 2rem;
-  }
+	.nav-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 1em;
+		width: 100%;
+		max-width: 82em;
+		padding: 0 2rem;
+	}
 
-  @media (min-width: 50em) {
-    header {
-      position: static;
-      padding: 2rem 0rem;
-    }
+	@media (min-width: 50em) {
+		header {
+			position: static;
+			padding: 2rem 0rem;
+		}
 
-    .logo {
-      width: auto;
-      margin: 0;
-      z-index: 0;
-    }
+		.logo {
+			width: auto;
+			margin: 0;
+			z-index: 0;
+		}
 
-    .logo h1 {
-      display: initial;
-    }
+		.logo h1 {
+			display: initial;
+		}
 
-    .menu-toggle {
-      display: none;
-    }
-  }
+		.menu-toggle {
+			display: none;
+		}
+	}
 
-  /** Style Algolia */
-  :root {
-    --docsearch-primary-color: var(--theme-accent);
-    --docsearch-logo-color: var(--theme-text);
-  }
+	/** Style Algolia */
+	:root {
+		--docsearch-primary-color: var(--theme-accent);
+		--docsearch-logo-color: var(--theme-text);
+	}
 
-  .search-item {
-    display: none;
-    position: relative;
-    z-index: 10;
-    flex-grow: 1;
-    padding-right: 0.7rem;
-    display: flex;
-    max-width: 200px;
-  }
+	.search-item {
+		display: none;
+		position: relative;
+		z-index: 10;
+		flex-grow: 1;
+		padding-right: 0.7rem;
+		display: flex;
+		max-width: 200px;
+	}
 
-  @media (min-width: 50em) {
-    .search-item {
-      max-width: 400px;
-    }
-  }
+	@media (min-width: 50em) {
+		.search-item {
+			max-width: 400px;
+		}
+	}
 </style>
 
 <style is:global>
-  .search-item > * {
-    flex-grow: 1;
-  }
+	.search-item > * {
+		flex-grow: 1;
+	}
 </style>
diff --git a/apps/docs/src/components/Header/Search.tsx b/apps/docs/src/components/Header/Search.tsx
index 19ff9fa..88d0198 100644
--- a/apps/docs/src/components/Header/Search.tsx
+++ b/apps/docs/src/components/Header/Search.tsx
@@ -28,7 +28,7 @@ export default function Search() {
 	}, [setIsOpen]);
 
 	const onInput = useCallback(
-		(e) => {
+		(e: KeyboardEvent) => {
 			setIsOpen(true);
 			setInitialQuery(e.key);
 		},
diff --git a/apps/docs/src/components/LeftSidebar/LeftSidebar.astro b/apps/docs/src/components/LeftSidebar/LeftSidebar.astro
index 7a70be7..7ee3e8e 100644
--- a/apps/docs/src/components/LeftSidebar/LeftSidebar.astro
+++ b/apps/docs/src/components/LeftSidebar/LeftSidebar.astro
@@ -1,124 +1,119 @@
 ---
-import { getLanguageFromURL } from "../../languages";
-import { SIDEBAR } from "../../config";
+import { getLanguageFromURL } from '../../languages';
+import { SIDEBAR } from '../../config';
 
 type Props = {
-  currentPage: string;
+	currentPage: string;
 };
 
 const { currentPage } = Astro.props as Props;
-const currentPageMatch = currentPage.endsWith("/")
-  ? currentPage.slice(1, -1)
-  : currentPage.slice(1);
+const currentPageMatch = currentPage.endsWith('/')
+	? currentPage.slice(1, -1)
+	: currentPage.slice(1);
 const langCode = getLanguageFromURL(currentPage);
 const sidebar = SIDEBAR[langCode];
 ---
 
 <nav aria-labelledby="grid-left">
-  <ul class="nav-groups">
-    {
-      Object.entries(sidebar).map(([header, children]) => (
-        <li>
-          <div class="nav-group">
-            <h2>{header}</h2>
-            <ul>
-              {children.map((child) => {
-                const url = Astro.site?.pathname + child.link;
-                return (
-                  <li class="nav-link">
-                    <a
-                      href={url}
-                      aria-current={
-                        currentPageMatch === child.link ? "page" : false
-                      }
-                    >
-                      {child.text}
-                    </a>
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
-        </li>
-      ))
-    }
-  </ul>
+	<ul class="nav-groups">
+		{
+			Object.entries(sidebar).map(([header, children]) => (
+				<li>
+					<div class="nav-group">
+						<h2>{header}</h2>
+						<ul>
+							{children.map((child) => {
+								const url = Astro.site?.pathname + child.link;
+								return (
+									<li class="nav-link">
+										<a href={url} aria-current={currentPageMatch === child.link ? 'page' : false}>
+											{child.text}
+										</a>
+									</li>
+								);
+							})}
+						</ul>
+					</div>
+				</li>
+			))
+		}
+	</ul>
 </nav>
 
 <script is:inline>
-  window.addEventListener("DOMContentLoaded", () => {
-    var target = document.querySelector('[aria-current="page"]');
-    if (target && target.offsetTop > window.innerHeight - 100) {
-      document.querySelector(".nav-groups").scrollTop = target.offsetTop;
-    }
-  });
+	window.addEventListener('DOMContentLoaded', () => {
+		var target = document.querySelector('[aria-current="page"]');
+		if (target && target.offsetTop > window.innerHeight - 100) {
+			document.querySelector('.nav-groups').scrollTop = target.offsetTop;
+		}
+	});
 </script>
 
 <style>
-  nav {
-    width: 100%;
-    margin-right: 1rem;
-  }
+	nav {
+		width: 100%;
+		margin-right: 1rem;
+	}
 
-  .nav-groups {
-    height: 100%;
-    padding: 2rem;
-    overflow-x: visible;
-    overflow-y: auto;
-    max-height: 100vh;
-  }
+	.nav-groups {
+		height: 100%;
+		padding: 2rem;
+		overflow-x: visible;
+		overflow-y: auto;
+		max-height: 100vh;
+	}
 
-  .nav-groups > li + li {
-    margin-top: 2rem;
-  }
+	.nav-groups > li + li {
+		margin-top: 2rem;
+	}
 
-  .nav-groups > :first-child {
-    padding-top: var(--doc-padding);
-  }
+	.nav-groups > :first-child {
+		padding-top: var(--doc-padding);
+	}
 
-  .nav-groups > :last-child {
-    padding-bottom: 2rem;
-    margin-bottom: var(--theme-navbar-height);
-  }
+	.nav-groups > :last-child {
+		padding-bottom: 2rem;
+		margin-bottom: var(--theme-navbar-height);
+	}
 
-  .nav-group-title {
-    font-size: 1rem;
-    font-weight: 700;
-    padding: 0.1rem 1rem;
-    text-transform: uppercase;
-    margin-bottom: 0.5rem;
-  }
+	.nav-group-title {
+		font-size: 1rem;
+		font-weight: 700;
+		padding: 0.1rem 1rem;
+		text-transform: uppercase;
+		margin-bottom: 0.5rem;
+	}
 
-  .nav-link a {
-    font-size: 1rem;
-    margin: 1px;
-    padding: 0.3rem 1rem;
-    font: inherit;
-    color: inherit;
-    text-decoration: none;
-    display: block;
-  }
+	.nav-link a {
+		font-size: 1rem;
+		margin: 1px;
+		padding: 0.3rem 1rem;
+		font: inherit;
+		color: inherit;
+		text-decoration: none;
+		display: block;
+	}
 
-  .nav-link a:hover,
-  .nav-link a:focus {
-    background-color: var(--theme-bg-hover);
-  }
+	.nav-link a:hover,
+	.nav-link a:focus {
+		background-color: var(--theme-bg-hover);
+	}
 
-  .nav-link a[aria-current="page"] {
-    color: var(--theme-text-accent);
-    background-color: var(--theme-bg-accent);
-    font-weight: 600;
-  }
+	.nav-link a[aria-current='page'] {
+		color: var(--theme-text-accent);
+		background-color: var(--theme-bg-accent);
+		font-weight: 600;
+	}
 
-  @media (min-width: 50em) {
-    .nav-groups {
-      padding: 0;
-    }
-  }
+	@media (min-width: 50em) {
+		.nav-groups {
+			padding: 0;
+		}
+	}
 </style>
 
 <style is:global>
-  :root.theme-dark .nav-link a[aria-current="page"] {
-    color: hsla(var(--color-base-white), 100%, 1);
-  }
+	:root.theme-dark .nav-link a[aria-current='page'] {
+		color: hsla(var(--color-base-white), 100%, 1);
+	}
 </style>
diff --git a/apps/docs/src/components/PageContent/PageContent.astro b/apps/docs/src/components/PageContent/PageContent.astro
index 52c6de2..c7c66c7 100644
--- a/apps/docs/src/components/PageContent/PageContent.astro
+++ b/apps/docs/src/components/PageContent/PageContent.astro
@@ -1,13 +1,13 @@
 ---
-import type { Frontmatter } from "../../config";
-import MoreMenu from "../RightSidebar/MoreMenu.astro";
-import TableOfContents from "../RightSidebar/TableOfContents";
-import type { MarkdownHeading } from "astro";
+import type { Frontmatter } from '../../config';
+import MoreMenu from '../RightSidebar/MoreMenu.astro';
+import TableOfContents from '../RightSidebar/TableOfContents';
+import type { MarkdownHeading } from 'astro';
 
 type Props = {
-  frontmatter: Frontmatter;
-  headings: MarkdownHeading[];
-  githubEditUrl: string;
+	frontmatter: Frontmatter;
+	headings: MarkdownHeading[];
+	githubEditUrl: string;
 };
 
 const { frontmatter, headings, githubEditUrl } = Astro.props as Props;
@@ -15,39 +15,39 @@ const title = frontmatter.title;
 ---
 
 <article id="article" class="content">
-  <section class="main-section">
-    <h1 class="content-title" id="overview">{title}</h1>
-    <nav class="block sm:hidden">
-      <TableOfContents client:media="(max-width: 50em)" headings={headings} />
-    </nav>
-    <slot />
-  </section>
-  <nav class="block sm:hidden">
-    <MoreMenu editHref={githubEditUrl} />
-  </nav>
+	<section class="main-section">
+		<h1 class="content-title" id="overview">{title}</h1>
+		<nav class="block sm:hidden">
+			<TableOfContents client:media="(max-width: 50em)" headings={headings} />
+		</nav>
+		<slot />
+	</section>
+	<nav class="block sm:hidden">
+		<MoreMenu editHref={githubEditUrl} />
+	</nav>
 </article>
 
 <style>
-  .content {
-    padding: 0;
-    max-width: 75ch;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
+	.content {
+		padding: 0;
+		max-width: 75ch;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
 
-  .content > section {
-    margin-bottom: 4rem;
-  }
+	.content > section {
+		margin-bottom: 4rem;
+	}
 
-  .block {
-    display: block;
-  }
+	.block {
+		display: block;
+	}
 
-  @media (min-width: 50em) {
-    .sm\:hidden {
-      display: none;
-    }
-  }
+	@media (min-width: 50em) {
+		.sm\:hidden {
+			display: none;
+		}
+	}
 </style>
diff --git a/apps/docs/src/components/RightSidebar/MoreMenu.astro b/apps/docs/src/components/RightSidebar/MoreMenu.astro
index 57483c5..699e47b 100644
--- a/apps/docs/src/components/RightSidebar/MoreMenu.astro
+++ b/apps/docs/src/components/RightSidebar/MoreMenu.astro
@@ -1,8 +1,8 @@
 ---
-import * as CONFIG from "../../config";
+import * as CONFIG from '../../config';
 
 type Props = {
-  editHref: string;
+	editHref: string;
 };
 
 const { editHref } = Astro.props as Props;
@@ -11,65 +11,65 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL;
 
 {showMoreSection && <h2 class="heading">More</h2>}
 <ul>
-  {
-    editHref && (
-      <li class={`heading-link depth-2`}>
-        <a class="edit-on-github" href={editHref} target="_blank">
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="pen"
-            class="svg-inline--fa fa-pen fa-w-16"
-            role="img"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 512 512"
-            height="1em"
-            width="1em"
-          >
-            <path
-              fill="currentColor"
-              d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"
-            />
-          </svg>
-          <span>Edit this page</span>
-        </a>
-      </li>
-    )
-  }
-  {
-    CONFIG.COMMUNITY_INVITE_URL && (
-      <li class={`heading-link depth-2`}>
-        <a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank">
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="comment-alt"
-            class="svg-inline--fa fa-comment-alt fa-w-16"
-            role="img"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 512 512"
-            height="1em"
-            width="1em"
-          >
-            <path
-              fill="currentColor"
-              d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
-            />
-          </svg>
-          <span>Join our community</span>
-        </a>
-      </li>
-    )
-  }
+	{
+		editHref && (
+			<li class={`heading-link depth-2`}>
+				<a class="edit-on-github" href={editHref} target="_blank">
+					<svg
+						aria-hidden="true"
+						focusable="false"
+						data-prefix="fas"
+						data-icon="pen"
+						class="svg-inline--fa fa-pen fa-w-16"
+						role="img"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 512 512"
+						height="1em"
+						width="1em"
+					>
+						<path
+							fill="currentColor"
+							d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"
+						/>
+					</svg>
+					<span>Edit this page</span>
+				</a>
+			</li>
+		)
+	}
+	{
+		CONFIG.COMMUNITY_INVITE_URL && (
+			<li class={`heading-link depth-2`}>
+				<a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank">
+					<svg
+						aria-hidden="true"
+						focusable="false"
+						data-prefix="fas"
+						data-icon="comment-alt"
+						class="svg-inline--fa fa-comment-alt fa-w-16"
+						role="img"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 512 512"
+						height="1em"
+						width="1em"
+					>
+						<path
+							fill="currentColor"
+							d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
+						/>
+					</svg>
+					<span>Join our community</span>
+				</a>
+			</li>
+		)
+	}
 </ul>
 
 <style>
-  .edit-on-github {
-    text-decoration: none;
-    font: inherit;
-    color: inherit;
-    font-size: 1rem;
-  }
+	.edit-on-github {
+		text-decoration: none;
+		font: inherit;
+		color: inherit;
+		font-size: 1rem;
+	}
 </style>
diff --git a/apps/docs/src/config.ts b/apps/docs/src/config.ts
index e32c5d5..d5c5d8c 100644
--- a/apps/docs/src/config.ts
+++ b/apps/docs/src/config.ts
@@ -1,31 +1,30 @@
 export const SITE = {
-  title: "Astro Reactive Docs",
-  description:
-    "Let your data build your UI with native Astro components and architecture.",
-  defaultLanguage: "en_US",
+	title: 'Astro Reactive Docs',
+	description: 'Let your data build your UI with native Astro components and architecture.',
+	defaultLanguage: 'en_US',
 };
 
 export const OPEN_GRAPH = {
-  image: {
-    src: "https://github.com/astro-reactive/astro-reactive/blob/main/.github/assets/astro-reactive-library-cover.png?raw=true",
-    alt: "astro logo and astro reactive library text on a starry expanse of space",
-  },
-  twitter: "astroreactive",
+	image: {
+		src: 'https://github.com/astro-reactive/astro-reactive/blob/main/.github/assets/astro-reactive-library-cover.png?raw=true',
+		alt: 'astro logo and astro reactive library text on a starry expanse of space',
+	},
+	twitter: 'astroreactive',
 };
 
 // This is the type of the frontmatter you put in the docs markdown files.
 export type Frontmatter = {
-  title: string;
-  description: string;
-  layout: string;
-  image?: { src: string; alt: string };
-  dir?: "ltr" | "rtl";
-  ogLocale?: string;
-  lang?: string;
+	title: string;
+	description: string;
+	layout: string;
+	image?: { src: string; alt: string };
+	dir?: 'ltr' | 'rtl';
+	ogLocale?: string;
+	lang?: string;
 };
 
 export const KNOWN_LANGUAGES = {
-  English: "en",
+	English: 'en',
 } as const;
 export const KNOWN_LANGUAGE_CODES = Object.values(KNOWN_LANGUAGES);
 
@@ -35,35 +34,35 @@ export const COMMUNITY_INVITE_URL = `https://discord.gg/fkpkKdPJ`;
 
 // See "Algolia" section of the README for more information.
 export const ALGOLIA = {
-  indexName: "XXXXXXXXXX",
-  appId: "XXXXXXXXXX",
-  apiKey: "XXXXXXXXXX",
+	indexName: 'XXXXXXXXXX',
+	appId: 'XXXXXXXXXX',
+	apiKey: 'XXXXXXXXXX',
 };
 
 export type Sidebar = Record<
-  typeof KNOWN_LANGUAGE_CODES[number],
-  Record<string, { text: string; link: string }[]>
+	(typeof KNOWN_LANGUAGE_CODES)[number],
+	Record<string, { text: string; link: string }[]>
 >;
 export const SIDEBAR: Sidebar = {
-  en: {
-    // TODO: create tutorial
-    // Tutorial: [
-    //   { text: "Getting Started", link: "en/getting-started" },
-    //   { text: "Page 2", link: "en/page-2" },
-    //   { text: "Page 3", link: "en/page-3" },
-    // ],
+	en: {
+		// TODO: create tutorial
+		// Tutorial: [
+		//   { text: "Getting Started", link: "en/getting-started" },
+		//   { text: "Page 2", link: "en/page-2" },
+		//   { text: "Page 3", link: "en/page-3" },
+		// ],
 
-    // TODO: create overview
-    Introduction: [
-      { text: "Overview", link: "en/introduction" },
-      // { text: "Philosophy", link: "en/philosophy" },
-    ],
+		// TODO: create overview
+		Introduction: [
+			{ text: 'Overview', link: 'en/introduction' },
+			// { text: "Philosophy", link: "en/philosophy" },
+		],
 
-    "API Docs": [
-      { text: "Form", link: "en/api/form/form-component" },
-      { text: "FormGroup", link: "en/api/form/form-group" },
-      { text: "FormControl", link: "en/api/form/form-control" },
-      { text: "Validators", link: "en/api/validator/validators" },
-    ],
-  },
+		'API Docs': [
+			{ text: 'Form', link: 'en/api/form/form-component' },
+			{ text: 'FormGroup', link: 'en/api/form/form-group' },
+			{ text: 'FormControl', link: 'en/api/form/form-control' },
+			{ text: 'Validators', link: 'en/api/validator/validators' },
+		],
+	},
 };
diff --git a/apps/docs/src/languages.ts b/apps/docs/src/languages.ts
index 405b692..b44d2ba 100644
--- a/apps/docs/src/languages.ts
+++ b/apps/docs/src/languages.ts
@@ -6,5 +6,5 @@ export const langPathRegex = /\/([a-z]{2}-?[A-Z]{0,2})\//;
 export function getLanguageFromURL(pathname: string) {
 	const langCodeMatch = pathname.match(langPathRegex);
 	const langCode = langCodeMatch ? langCodeMatch[1] : 'en';
-	return langCode as typeof KNOWN_LANGUAGE_CODES[number];
+	return langCode as (typeof KNOWN_LANGUAGE_CODES)[number];
 }
diff --git a/apps/docs/src/layouts/MainLayout.astro b/apps/docs/src/layouts/MainLayout.astro
index d9bb4bd..551a814 100644
--- a/apps/docs/src/layouts/MainLayout.astro
+++ b/apps/docs/src/layouts/MainLayout.astro
@@ -1,167 +1,153 @@
 ---
-import HeadCommon from "../components/HeadCommon.astro";
-import HeadSEO from "../components/HeadSEO.astro";
-import Header from "../components/Header/Header.astro";
-import PageContent from "../components/PageContent/PageContent.astro";
-import LeftSidebar from "../components/LeftSidebar/LeftSidebar.astro";
-import RightSidebar from "../components/RightSidebar/RightSidebar.astro";
-import * as CONFIG from "../config";
-import type { MarkdownHeading } from "astro";
-import Footer from "../components/Footer/Footer.astro";
+import HeadCommon from '../components/HeadCommon.astro';
+import HeadSEO from '../components/HeadSEO.astro';
+import Header from '../components/Header/Header.astro';
+import PageContent from '../components/PageContent/PageContent.astro';
+import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
+import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
+import * as CONFIG from '../config';
+import type { MarkdownHeading } from 'astro';
+import Footer from '../components/Footer/Footer.astro';
 
 type Props = {
-  frontmatter: CONFIG.Frontmatter;
-  headings: MarkdownHeading[];
+	frontmatter: CONFIG.Frontmatter;
+	headings: MarkdownHeading[];
 };
 
 const { frontmatter, headings } = Astro.props as Props;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 const currentPage = Astro.url.pathname;
-const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`;
+const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
 const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
 ---
 
-<html
-  dir={frontmatter.dir ?? "ltr"}
-  lang={frontmatter.lang ?? "en-us"}
-  class="initial"
->
-  <head>
-    <HeadCommon />
-    <HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} />
-    <title>
-      {
-        frontmatter.title
-          ? `${frontmatter.title} | ${CONFIG.SITE.title}`
-          : CONFIG.SITE.title
-      }
-    </title>
-    <style>
-      body {
-        width: 100%;
-        display: grid;
-        grid-template-rows: var(--theme-navbar-height) 1fr;
-        --gutter: 0.5rem;
-        --doc-padding: 2rem;
-      }
+<html dir={frontmatter.dir ?? 'ltr'} lang={frontmatter.lang ?? 'en-us'} class="initial">
+	<head>
+		<HeadCommon />
+		<HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} />
+		<title>
+			{frontmatter.title ? `${frontmatter.title} | ${CONFIG.SITE.title}` : CONFIG.SITE.title}
+		</title>
+		<style>
+			body {
+				width: 100%;
+				display: grid;
+				grid-template-rows: var(--theme-navbar-height) 1fr;
+				--gutter: 0.5rem;
+				--doc-padding: 2rem;
+			}
 
-      .layout {
-        display: grid;
-        grid-auto-flow: column;
-        grid-template-columns:
-          minmax(var(--gutter), 1fr) minmax(0, var(--max-width))
-          minmax(var(--gutter), 1fr);
-        overflow-x: hidden;
-      }
+			.layout {
+				display: grid;
+				grid-auto-flow: column;
+				grid-template-columns:
+					minmax(var(--gutter), 1fr) minmax(0, var(--max-width))
+					minmax(var(--gutter), 1fr);
+				overflow-x: hidden;
+			}
 
-      .grid-sidebar {
-        height: 100vh;
-        position: sticky;
-        top: 0;
-        padding: 0;
-      }
+			.grid-sidebar {
+				height: 100vh;
+				position: sticky;
+				top: 0;
+				padding: 0;
+			}
 
-      #grid-left {
-        position: fixed;
-        background-color: var(--theme-bg);
-        z-index: 10;
-        display: none;
-      }
+			#grid-left {
+				position: fixed;
+				background-color: var(--theme-bg);
+				z-index: 10;
+				display: none;
+			}
 
-      #grid-main {
-        padding: 0 var(--gutter);
-        grid-column: 2;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
+			#grid-main {
+				padding: 0 var(--gutter);
+				grid-column: 2;
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+			}
 
-      #grid-right {
-        display: none;
-      }
+			#grid-right {
+				display: none;
+			}
 
-      @media (min-width: 50em) {
-        .layout {
-          overflow: initial;
-          grid-template-columns: 20rem minmax(0, var(--max-width));
-          gap: 1em;
-        }
+			@media (min-width: 50em) {
+				.layout {
+					overflow: initial;
+					grid-template-columns: 20rem minmax(0, var(--max-width));
+					gap: 1em;
+				}
 
-        #grid-left {
-          display: flex;
-          padding-left: 2rem;
-          position: sticky;
-          grid-column: 1;
-        }
-      }
+				#grid-left {
+					display: flex;
+					padding-left: 2rem;
+					position: sticky;
+					grid-column: 1;
+				}
+			}
 
-      @media (min-width: 72em) {
-        .layout {
-          grid-template-columns: 20rem minmax(0, var(--max-width)) 18rem;
-          padding-left: 0;
-          padding-right: 0;
-          margin: 0 auto;
-        }
+			@media (min-width: 72em) {
+				.layout {
+					grid-template-columns: 20rem minmax(0, var(--max-width)) 18rem;
+					padding-left: 0;
+					padding-right: 0;
+					margin: 0 auto;
+				}
 
-        #grid-right {
-          grid-column: 3;
-          display: flex;
-        }
-      }
-    </style>
-    <style is:global>
-      .warning {
-        background-color: var(--theme-bg-accent);
-        color: var(--theme-text-accent);
-        margin: 2rem 0;
-        padding: 1.25em 1.5rem;
-        border-radius: 0 0.25rem 0.25rem 0;
-        border-left: 3px solid var(--theme-text-accent);
-      }
+				#grid-right {
+					grid-column: 3;
+					display: flex;
+				}
+			}
+		</style>
+		<style is:global>
+			.warning {
+				background-color: var(--theme-bg-accent);
+				color: var(--theme-text-accent);
+				margin: 2rem 0;
+				padding: 1.25em 1.5rem;
+				border-radius: 0 0.25rem 0.25rem 0;
+				border-left: 3px solid var(--theme-text-accent);
+			}
 
-      .layout > * {
-        width: 100%;
-        height: 100%;
-      }
+			.layout > * {
+				width: 100%;
+				height: 100%;
+			}
 
-      .mobile-sidebar-toggle {
-        overflow: hidden;
-      }
+			.mobile-sidebar-toggle {
+				overflow: hidden;
+			}
 
-      .mobile-sidebar-toggle #grid-left {
-        display: block;
-        top: 2rem;
-      }
-    </style>
-  </head>
+			.mobile-sidebar-toggle #grid-left {
+				display: block;
+				top: 2rem;
+			}
+		</style>
+	</head>
 
-  <body>
-    <Header currentPage={currentPage} />
-    <main class="layout">
-      <aside id="grid-left" class="grid-sidebar" title="Site Navigation">
-        <LeftSidebar currentPage={currentPage} />
-      </aside>
-      <div id="grid-main">
-        <div class="warning">
-          <strong>🛠 Under Construction:</strong> This library and the documentation
-          are undergoing rigorous development. Read and join our <a
-            href="https://github.com/astro-reactive/astro-reactive/discussions"
-            >discussions</a
-          > for questions, suggestions, or feedback.
-        </div>
-        <PageContent
-          frontmatter={frontmatter}
-          headings={headings}
-          githubEditUrl={githubEditUrl}
-        >
-          <slot />
-        </PageContent>
-      </div>
-      <aside id="grid-right" class="grid-sidebar" title="Table of Contents">
-        <RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
-      </aside>
-    </main>
-    <Footer path={currentFile} />
-  </body>
+	<body>
+		<Header currentPage={currentPage} />
+		<main class="layout">
+			<aside id="grid-left" class="grid-sidebar" title="Site Navigation">
+				<LeftSidebar currentPage={currentPage} />
+			</aside>
+			<div id="grid-main">
+				<div class="warning">
+					<strong>🛠 Under Construction:</strong> This library and the documentation are undergoing rigorous
+					development. Read and join our <a
+						href="https://github.com/astro-reactive/astro-reactive/discussions">discussions</a
+					> for questions, suggestions, or feedback.
+				</div>
+				<PageContent frontmatter={frontmatter} headings={headings} githubEditUrl={githubEditUrl}>
+					<slot />
+				</PageContent>
+			</div>
+			<aside id="grid-right" class="grid-sidebar" title="Table of Contents">
+				<RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
+			</aside>
+		</main>
+		<Footer path={currentFile} />
+	</body>
 </html>
-
diff --git a/apps/docs/src/pages/en/api/form/form-component.md b/apps/docs/src/pages/en/api/form/form-component.md
index 4d864ed..03069ae 100644
--- a/apps/docs/src/pages/en/api/form/form-component.md
+++ b/apps/docs/src/pages/en/api/form/form-component.md
@@ -1,7 +1,7 @@
 ---
 title: Form
 type: component
-package: "@astro-reactive/form"
+package: '@astro-reactive/form'
 description: The Reactive Form component for Astro
 layout: ../../../../layouts/MainLayout.astro
 ---
@@ -10,7 +10,7 @@ The `Form` component renders a form element and various control components (e.g.
 
 ```astro
 ---
-import Form, { FormGroup } from "@astro-reactive/form";
+import Form, { FormGroup } from '@astro-reactive/form';
 const form = new FormGroup();
 // your controls configuration data
 ---
@@ -36,26 +36,26 @@ Assigning a `FormGroup` object to the `formGroup` property will set up a form.
 
 ```astro
 ---
-import Form, { FormGroup } from "@astro-reactive/form";
+import Form, { FormGroup } from '@astro-reactive/form';
 
 const form = new FormGroup([
   {
-    name: "username",
-    label: "Username",
-    value: "awesome_dev",
+    name: 'username',
+    label: 'Username',
+    value: 'awesome_dev',
   },
   {
-    name: "comment",
-    label: "Feedback",
-    type: "textarea",
-    value: "Nice!",
+    name: 'comment',
+    label: 'Feedback',
+    type: 'textarea',
+    value: 'Nice!',
   },
   {
-    name: "size",
-    label: "Size",
-    type: "dropdown",
-    options: ["S", "M", "L", "XL", "XXL"],
-    placeholder: "-- Please choose an option --",
+    name: 'size',
+    label: 'Size',
+    type: 'dropdown',
+    options: ['S', 'M', 'L', 'XL', 'XXL'],
+    placeholder: '-- Please choose an option --',
   },
 ]);
 ---
@@ -77,48 +77,48 @@ To render a form with multiple field sets, assign an array `FormGroup[]` to the
 
 ```astro
 ---
-import Form, { FormGroup } from "@astro-reactive/form";
+import Form, { FormGroup } from '@astro-reactive/form';
 
 const nameForm = new FormGroup(
   [
     {
-      name: "firstName",
-      label: "First Name",
-      value: "John",
+      name: 'firstName',
+      label: 'First Name',
+      value: 'John',
     },
     {
-      name: "lastName",
-      label: "Last Name",
-      value: "Doe",
+      name: 'lastName',
+      label: 'Last Name',
+      value: 'Doe',
     },
   ],
-  "Name"
+  'Name'
 );
 
 const skills = new FormGroup(
   [
     {
-      name: "JavaScript",
-      type: "checkbox",
-      label: "JavaScript",
+      name: 'JavaScript',
+      type: 'checkbox',
+      label: 'JavaScript',
     },
     {
-      name: "TypeScript",
-      type: "checkbox",
-      label: "TypeScript",
+      name: 'TypeScript',
+      type: 'checkbox',
+      label: 'TypeScript',
     },
     {
-      name: "React",
-      type: "checkbox",
-      label: "React",
+      name: 'React',
+      type: 'checkbox',
+      label: 'React',
     },
     {
-      name: "Vue",
-      type: "checkbox",
-      label: "Vue",
+      name: 'Vue',
+      type: 'checkbox',
+      label: 'Vue',
     },
   ],
-  "Skills"
+  'Skills'
 );
 ---
 
@@ -139,13 +139,13 @@ This implementation is to distinguish the submit button from other buttons and l
 
 ```astro
 ---
-import Form, { FormGroup } from "@astro-reactive/form";
+import Form, { FormGroup } from '@astro-reactive/form';
 
 const form = new FormGroup([]);
 
 const submitControl: Submit = {
-  name: "submit",
-  type: "submit",
+  name: 'submit',
+  type: 'submit',
 };
 ---
 
@@ -160,16 +160,16 @@ This is a very crude solution to prevent having multiple submit buttons. For sug
 
 The following are input properties a `Form` component can take. Only the `formGroups` property is required.
 
-| Property                                    | Type                       |                          |
-| ------------------------------------------- | -------------------------- | ----------------------------------- |
-| [formGroups](#formgroups)        | `FormGroup \| FormGroup[]` | required |
-| [action](#action)                           | `string`                   | optional                            |
-| [method](#method)                           | `'get' \| 'post' \| 'dialog'`    | optional                            |
-| [readOnly](#readonly)                       | `boolean`                  | optional                            |
-| [showValidationHints](#showvalidationhints) | `boolean`                  | optional                            |
-| [submitControl](#submitcontrol)             | `Submit`                   | optional                            |
-| [theme](#theme)                             | `'light' \| 'dark'`        | optional                            |
-| [validateOnLoad](#validateOnLoad)           | `boolean`                  | optional                            |
+| Property                                    | Type                          |          |
+| ------------------------------------------- | ----------------------------- | -------- |
+| [formGroups](#formgroups)                   | `FormGroup \| FormGroup[]`    | required |
+| [action](#action)                           | `string`                      | optional |
+| [method](#method)                           | `'get' \| 'post' \| 'dialog'` | optional |
+| [readOnly](#readonly)                       | `boolean`                     | optional |
+| [showValidationHints](#showvalidationhints) | `boolean`                     | optional |
+| [submitControl](#submitcontrol)             | `Submit`                      | optional |
+| [theme](#theme)                             | `'light' \| 'dark'`           | optional |
+| [validateOnLoad](#validateOnLoad)           | `boolean`                     | optional |
 
 ### `formGroups`
 
@@ -190,6 +190,7 @@ Type: HTTPSubmitMethod
 Sets the `method` [attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method) for the form. Set this to the HTTP method to submit the form: 'post', 'get', or 'dialog'.
 
 From [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method):
+
 - `post` - The POST method; form data sent as the request body.
 - `get (default)` - The GET method; form data appended to the action URL with a ? separator. Use this method when the form has no side effects.
 - `dialog` - When the form is inside a <dialog>, closes the dialog and throws a submit event on submission without submitting data or clearing the form.
@@ -218,8 +219,8 @@ A special button that triggers the submit event for a form.
 ```ts
 const submit: Submit = {
   type: 'submit',
-  value: 'Let\'s go!'
-}
+  value: "Let's go!",
+};
 ```
 
 ### `theme`
@@ -233,4 +234,3 @@ Sets the form to use light or dark mode.
 Type: `boolean`
 
 When used with our `validator` package, the `Form` component is able to render validation errors on server-side rendering when `validateOnLoad` is set to true. Otherwise, the validation errors will only be rendered on the client-side upon user interaction.
-
diff --git a/apps/docs/src/pages/en/api/form/form-control.md b/apps/docs/src/pages/en/api/form/form-control.md
index 11b5771..28b3da4 100644
--- a/apps/docs/src/pages/en/api/form/form-control.md
+++ b/apps/docs/src/pages/en/api/form/form-control.md
@@ -1,9 +1,9 @@
 ---
 title: FormControl
 type: class
-package: "@astro-reactive/form"
+package: '@astro-reactive/form'
 description: FormControl class
 layout: ../../../../layouts/MainLayout.astro
 ---
 
-> **❗ Note:** This documentation is incomplete.
\ No newline at end of file
+> **❗ Note:** This documentation is incomplete.
diff --git a/apps/docs/src/pages/en/api/form/form-group.md b/apps/docs/src/pages/en/api/form/form-group.md
index ffe8e8e..b7e5b2b 100644
--- a/apps/docs/src/pages/en/api/form/form-group.md
+++ b/apps/docs/src/pages/en/api/form/form-group.md
@@ -1,7 +1,7 @@
 ---
 title: FormGroup
 type: class
-package: "@astro-reactive/form"
+package: '@astro-reactive/form'
 description: The FormGroup class represents a group of controls that will be rendered as a fieldset element in a form.
 layout: ../../../../layouts/MainLayout.astro
 ---
@@ -12,11 +12,11 @@ The `FormGroup` class represents a group of controls that will be rendered as a
 
 ## Properties
 
-| Property | Type | |
-|---|---|---|
-| [controls](#controls) |  `FormControl[]` | required |
-| [name](#name) |  `string` | optional |
+| Property              | Type            |          |
+| --------------------- | --------------- | -------- |
+| [controls](#controls) | `FormControl[]` | required |
+| [name](#name)         | `string`        | optional |
 
 ### controls
 
-### name
\ No newline at end of file
+### name
diff --git a/apps/docs/src/pages/en/api/form/index.astro b/apps/docs/src/pages/en/api/form/index.astro
index 1b0f8b0..b5c0755 100644
--- a/apps/docs/src/pages/en/api/form/index.astro
+++ b/apps/docs/src/pages/en/api/form/index.astro
@@ -1,5 +1,5 @@
 <script is:inline>
-  // Redirect your homepage to the first page of documentation.
-  // If you have a landing page, remove this script and add it here!
-  window.location.pathname = `/en/api/form/form-component`;
+	// Redirect your homepage to the first page of documentation.
+	// If you have a landing page, remove this script and add it here!
+	window.location.pathname = `/en/api/form/form-component`;
 </script>
diff --git a/apps/docs/src/pages/en/api/index.astro b/apps/docs/src/pages/en/api/index.astro
index 1b0f8b0..b5c0755 100644
--- a/apps/docs/src/pages/en/api/index.astro
+++ b/apps/docs/src/pages/en/api/index.astro
@@ -1,5 +1,5 @@
 <script is:inline>
-  // Redirect your homepage to the first page of documentation.
-  // If you have a landing page, remove this script and add it here!
-  window.location.pathname = `/en/api/form/form-component`;
+	// Redirect your homepage to the first page of documentation.
+	// If you have a landing page, remove this script and add it here!
+	window.location.pathname = `/en/api/form/form-component`;
 </script>
diff --git a/apps/docs/src/pages/en/api/validator/index.astro b/apps/docs/src/pages/en/api/validator/index.astro
index 4fdeda6..7153b12 100644
--- a/apps/docs/src/pages/en/api/validator/index.astro
+++ b/apps/docs/src/pages/en/api/validator/index.astro
@@ -1,3 +1,3 @@
 <script is:inline>
-  window.location.pathname = `/en/api/validator/validators`;
+	window.location.pathname = `/en/api/validator/validators`;
 </script>
diff --git a/apps/docs/src/pages/en/api/validator/validators.md b/apps/docs/src/pages/en/api/validator/validators.md
index 9a68c50..2c7118a 100644
--- a/apps/docs/src/pages/en/api/validator/validators.md
+++ b/apps/docs/src/pages/en/api/validator/validators.md
@@ -1,7 +1,7 @@
 ---
 title: Validators
 type: class
-package: "@astro-reactive/validators"
+package: '@astro-reactive/validators'
 description: Validator package for @astro-reactive/forms package for providing validation to forms.
 layout: ../../../../layouts/MainLayout.astro
 ---
@@ -10,21 +10,21 @@ The `Validators` class provides a set of built-in validators that can be used by
 
 ```astro
 ---
-import Form, {FormGroup} from "@astro-reactive/form"
-import {Validators} from "@astro-reactive/validator"
+import Form, { FormGroup } from '@astro-reactive/form';
+import { Validators } from '@astro-reactive/validator';
 
 const form = new FormGroup([
   {
-    name: "username",
-    label: "Username",
+    name: 'username',
+    label: 'Username',
     validators: [Validators.required],
   },
   {
-    name: "password",
-    label: "Password",
+    name: 'password',
+    label: 'Password',
     validators: [Validators.required, Validators.minLength(8)],
   },
-])
+]);
 ---
 
 <Form formGroups={form} />
@@ -48,16 +48,16 @@ The `Validators.required` validator is used to ensure that a form control has a
 
 ```astro
 ---
-import Form, {FormGroup} from "@astro-reactive/form"
-import {Validators} from "@astro-reactive/validator"
+import Form, { FormGroup } from '@astro-reactive/form';
+import { Validators } from '@astro-reactive/validator';
 
 const form = new FormGroup([
   {
-    name: "username",
-    label: "Username",
+    name: 'username',
+    label: 'Username',
     validators: [Validators.required],
   },
-])
+]);
 ---
 
 <Form formGroups={form} />
@@ -69,17 +69,17 @@ The `Validators.requiredChecked` validator is used to ensure that a checkbox is
 
 ```astro
 ---
-import Form, {FormGroup} from "@astro-reactive/form"
-import {Validators} from "@astro-reactive/validator"
+import Form, { FormGroup } from '@astro-reactive/form';
+import { Validators } from '@astro-reactive/validator';
 
 const form = new FormGroup([
   {
-    name: "terms",
-    label: "Terms and Conditions",
-    type: "checkbox",
+    name: 'terms',
+    label: 'Terms and Conditions',
+    type: 'checkbox',
     validators: [Validators.requiredChecked],
   },
-])
+]);
 ---
 
 <Form formGroups={form} />
@@ -91,16 +91,16 @@ The `Validators.email` validator is used to ensure that a form control has a val
 
 ```astro
 ---
-import Form, {FormGroup} from "@astro-reactive/form"
-import {Validators} from "@astro-reactive/validator"
+import Form, { FormGroup } from '@astro-reactive/form';
+import { Validators } from '@astro-reactive/validator';
 
 const form = new FormGroup([
   {
-    name: "email",
-    label: "Email",
+    name: 'email',
+    label: 'Email',
     validators: [Validators.email],
   },
-])
+]);
 ---
 
 <Form formGroups={form} />
@@ -112,17 +112,17 @@ The `Validators.min` validator is used to ensure that the numeric value of form
 
 ```astro
 ---
-import Form, {FormGroup} from "@astro-reactive/form"
-import {Validators} from "@astro-reactive/validator"
+import Form, { FormGroup } from '@astro-reactive/form';
+import { Validators } from '@astro-reactive/validator';
 
 const form = new FormGroup([
   {
-    name: "price",
-    label: "Price",
-    type: "number",
+    name: 'price',
+    label: 'Price',
+    type: 'number',
     validators: [Validators.min(8)],
   },
-])
+]);
 ---
 
 <Form formGroups={forms} />
@@ -134,17 +134,17 @@ The `Validators.max` validator is used to ensure that the numeric value of form
 
 ```astro
 ---
-import Form, {FormGroup} from "@astro-reactive/form"
-import {Validators} from "@astro-reactive/validator"
+import Form, { FormGroup } from '@astro-reactive/form';
+import { Validators } from '@astro-reactive/validator';
 
 const form = new FormGroup([
   {
-    name: "price",
-    label: "Price",
-    type: "number",
+    name: 'price',
+    label: 'Price',
+    type: 'number',
     validators: [Validators.max(8)],
   },
-])
+]);
 ---
 
 <Form formGroups={forms} />
@@ -156,16 +156,16 @@ The `Validators.minLength` validator is used to ensure that the length of the va
 
 ```astro
 ---
-import Form, {FormGroup} from "@astro-reactive/form"
-import {Validators} from "@astro-reactive/validator"
+import Form, { FormGroup } from '@astro-reactive/form';
+import { Validators } from '@astro-reactive/validator';
 
 const form = new FormGroup([
   {
-    name: "password",
-    label: "Password",
+    name: 'password',
+    label: 'Password',
     validators: [Validators.minLength(8)],
   },
-])
+]);
 ---
 
 <Form formGroups={forms} />
@@ -177,16 +177,16 @@ The `Validators.maxLength` validator is used to ensure that the length of the va
 
 ```astro
 ---
-import Form, {FormGroup} from "@astro-reactive/form"
-import {Validators} from "@astro-reactive/validator"
+import Form, { FormGroup } from '@astro-reactive/form';
+import { Validators } from '@astro-reactive/validator';
 
 const form = new FormGroup([
   {
-    name: "password",
-    label: "Password",
+    name: 'password',
+    label: 'Password',
     validators: [Validators.maxLength(8)],
   },
-])
+]);
 ---
 
 <Form formGroups={forms} />
diff --git a/apps/docs/src/pages/en/index.astro b/apps/docs/src/pages/en/index.astro
index d5f7485..bce0697 100644
--- a/apps/docs/src/pages/en/index.astro
+++ b/apps/docs/src/pages/en/index.astro
@@ -1,5 +1,5 @@
 <script is:inline>
-  // Redirect your homepage to the first page of documentation.
-  // If you have a landing page, remove this script and add it here!
-  window.location.pathname = `/en/introduction`;
+	// Redirect your homepage to the first page of documentation.
+	// If you have a landing page, remove this script and add it here!
+	window.location.pathname = `/en/introduction`;
 </script>
diff --git a/apps/docs/src/pages/en/introduction.md b/apps/docs/src/pages/en/introduction.md
index 8adfd31..c9530e1 100644
--- a/apps/docs/src/pages/en/introduction.md
+++ b/apps/docs/src/pages/en/introduction.md
@@ -48,11 +48,10 @@ We will also make this clear in our library documentation as we see them.
 
 ## Packages
 
-| Package                                                                                              | Release notes                                                                                     | Description                                              |
-| ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
+| Package                                                                                              | Release notes                                                                                                                                              | Description                                              |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
 | [form](/en/api/form/form-component)                                                                  | [![npm](https://img.shields.io/npm/v/@astro-reactive/form)](https://github.com/astro-reactive/astro-reactive/blob/main/packages/form/RELEASE.md)           | a dynamic form which can be modified programmatically    |
 | [validator](https://github.com/astro-reactive/astro-reactive/blob/main/packages/validator/README.md) | [![npm](https://img.shields.io/npm/v/@astro-reactive/validator)](https://github.com/astro-reactive/astro-reactive/blob/main/packages/validator/RELEASE.md) | validators for editable fields                           |
-| data-grid                                                                                            | 🛠                                                                                                 | a dynamic data grid of values                            |
-| themes                                                                                               | 🛠                                                                                                 | easy-to-use, accessible, consistent cross-browser styles |
-| viz                                                                                                  | 🛠                                                                                                 | data visualization that emits and responds to events     |
-
+| data-grid                                                                                            | 🛠                                                                                                                                                          | a dynamic data grid of values                            |
+| themes                                                                                               | 🛠                                                                                                                                                          | easy-to-use, accessible, consistent cross-browser styles |
+| viz                                                                                                  | 🛠                                                                                                                                                          | data visualization that emits and responds to events     |
diff --git a/apps/docs/src/pages/en/philosophy.md b/apps/docs/src/pages/en/philosophy.md
index 97c7711..5f380ea 100644
--- a/apps/docs/src/pages/en/philosophy.md
+++ b/apps/docs/src/pages/en/philosophy.md
@@ -2,4 +2,4 @@
 title: Philosophy
 description: Library homepage
 layout: ../../layouts/MainLayout.astro
----
\ No newline at end of file
+---
diff --git a/apps/docs/src/pages/en/tutorial/getting-started.md b/apps/docs/src/pages/en/tutorial/getting-started.md
index 0e6d8c0..a5070ef 100644
--- a/apps/docs/src/pages/en/tutorial/getting-started.md
+++ b/apps/docs/src/pages/en/tutorial/getting-started.md
@@ -6,26 +6,24 @@ layout: ../../../layouts/MainLayout.astro
 
 Consider the following code:
 
-
-``` astro
+```astro
 ---
-import Form { FormGroup } from '@astro-reactive/form';
-import { Validators  } from '@astro-reactive/validator';
+import Form, { FormGroup } from '@astro-reactive/form';
+import { Validators } from '@astro-reactive/validator';
 
 const form = new FormGroup([
   {
     name: 'username',
     label: 'Username',
-    validators: [Validators.required]
+    validators: [Validators.required],
   },
   {
     name: 'password',
     label: 'Password',
-    validators: [Validators.required, Validators.minLength(8)]
+    validators: [Validators.required, Validators.minLength(8)],
   },
 ]);
 ---
 
 <Form formGroups={form} />
-
 ```
diff --git a/apps/docs/src/pages/en/tutorial/page-2.md b/apps/docs/src/pages/en/tutorial/page-2.md
index 056561e..89241bb 100644
--- a/apps/docs/src/pages/en/tutorial/page-2.md
+++ b/apps/docs/src/pages/en/tutorial/page-2.md
@@ -33,45 +33,44 @@ Use in an Astro page:
 
 ```astro
 ---
-import { FormControl, FormGroup } from "@astro-reactive/form/core";
-import Form from "@astro-reactive/form";
+import { FormControl, FormGroup } from '@astro-reactive/form/core';
+import Form from '@astro-reactive/form';
 
 // create a form group
 const form = new FormGroup([
   {
-    name: "username",
-    label: "Username",
+    name: 'username',
+    label: 'Username',
   },
   {
-    name: "password",
-    label: "Password",
-    type: "password",
+    name: 'password',
+    label: 'Password',
+    type: 'password',
   },
 ]);
 
 // set the name optionally
-form.name = "Simple Form";
+form.name = 'Simple Form';
 
 // you can insert a control at any point
 form.controls.push(
   new FormControl({
-    type: "checkbox",
-    name: "is-awesome",
-    label: "is Awesome?",
+    type: 'checkbox',
+    name: 'is-awesome',
+    label: 'is Awesome?',
   })
 );
 
 // you can get a FormControl object
-const userNameControl = form.get("username");
+const userNameControl = form.get('username');
 
 // you can set values dynamically
-userNameControl?.setValue("RAMOOOON");
-form.get('is-awesome')?.setValue("checked");
+userNameControl?.setValue('RAMOOOON');
+form.get('is-awesome')?.setValue('checked');
 ---
 
 <!-- the formGroups attribute takes an array of FormGroup-->
 <Form formGroups={[form]} />
-
 ```
 
 # Screenshots
@@ -105,4 +104,3 @@ Currently this only supports very basic form creation, but the goal of the proje
 ... and so much more
 
 _All contributions are welcome. Let's make the fastest web form component powered by Astro_
-
diff --git a/apps/docs/src/pages/index.astro b/apps/docs/src/pages/index.astro
index bbcc443..1adc632 100644
--- a/apps/docs/src/pages/index.astro
+++ b/apps/docs/src/pages/index.astro
@@ -1,5 +1,5 @@
 <script is:inline>
-  // Redirect your homepage to the first page of documentation.
-  // If you have a landing page, remove this script and add it here!
-  window.location.pathname = `/en/introduction/`;
+	// Redirect your homepage to the first page of documentation.
+	// If you have a landing page, remove this script and add it here!
+	window.location.pathname = `/en/introduction/`;
 </script>
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
index 59625a7..57c960f 100644
--- a/apps/docs/tsconfig.json
+++ b/apps/docs/tsconfig.json
@@ -1,7 +1,6 @@
 {
-  "extends": "astro/tsconfigs/base",
+  "extends": "@astro-reactive/tsconfig/astro-library.json",
   "compilerOptions": {
-    "jsx": "preserve",
-    "skipLibCheck": true
+    "jsx": "preserve"
   }
-}
\ No newline at end of file
+}
diff --git a/apps/landing-page/.eslintignore b/apps/landing-page/.eslintignore
new file mode 100644
index 0000000..db4c6d9
--- /dev/null
+++ b/apps/landing-page/.eslintignore
@@ -0,0 +1,2 @@
+dist
+node_modules
\ No newline at end of file
diff --git a/apps/landing-page/.eslintrc.cjs b/apps/landing-page/.eslintrc.cjs
new file mode 100644
index 0000000..2ce75c4
--- /dev/null
+++ b/apps/landing-page/.eslintrc.cjs
@@ -0,0 +1,5 @@
+/** @type {import("@types/eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ['@astro-reactive/eslint-config-custom'],
+};
diff --git a/apps/landing-page/.prettierrc.cjs b/apps/landing-page/.prettierrc.cjs
new file mode 100644
index 0000000..0e9c748
--- /dev/null
+++ b/apps/landing-page/.prettierrc.cjs
@@ -0,0 +1,24 @@
+/** @type {import("@types/prettier").Options} */
+module.exports = {
+  printWidth: 100,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+  useTabs: true,
+  plugins: ['../../node_modules/prettier-plugin-astro'],
+  overrides: [
+    {
+      files: '*.astro',
+      options: {
+        parser: 'astro',
+      },
+    },
+    {
+      files: ['.*', '*.json', '*.md', '*.toml', '*.yml'],
+      options: {
+        useTabs: false,
+      },
+    },
+  ],
+};
diff --git a/apps/landing-page/.prettierrc.json b/apps/landing-page/.prettierrc.json
deleted file mode 100644
index 0967ef4..0000000
--- a/apps/landing-page/.prettierrc.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/apps/landing-page/astro.config.mjs b/apps/landing-page/astro.config.mjs
index c781f07..f2f81af 100644
--- a/apps/landing-page/astro.config.mjs
+++ b/apps/landing-page/astro.config.mjs
@@ -1,12 +1,12 @@
-import tailwind from "@astrojs/tailwind";
-import { defineConfig } from "astro/config";
+import tailwind from '@astrojs/tailwind';
+import { defineConfig } from 'astro/config';
 
 export default defineConfig({
-  site: "https://astro-reactive.dev",
-  integrations: [tailwind()],
-  vite: {
-    ssr: {
-      external: ["svgo"],
-    },
-  },
+	site: 'https://astro-reactive.dev',
+	integrations: [tailwind()],
+	vite: {
+		ssr: {
+			external: ['svgo'],
+		},
+	},
 });
diff --git a/apps/landing-page/package.json b/apps/landing-page/package.json
index 648e5bf..1ccc4d1 100644
--- a/apps/landing-page/package.json
+++ b/apps/landing-page/package.json
@@ -10,16 +10,22 @@
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
-    "format": "prettier --write .",
+    "format": "prettier -w .",
+    "lint": "eslint . --ext .ts,.js",
+    "lint:fix": "eslint --fix . --ext .ts,.js",
     "clean": "rimraf dist node_modules dist .turbo"
   },
   "devDependencies": {
+    "@astro-reactive/eslint-config-custom": "*",
     "@astrojs/tailwind": "^2.0.2",
+    "@types/eslint": "^8.4.10",
     "@types/micromodal": "^0.3.3",
+    "@types/prettier": "^2.7.2",
     "astro": "^1.4.7",
     "astro-icon": "^0.8.0",
-    "prettier": "2.7.1",
-    "prettier-plugin-astro": "^0.7.0",
+    "eslint": "^8.31.0",
+    "prettier": "^2.7.1",
+    "prettier-plugin-astro": "^0.7.2",
     "rimraf": "^3.0.2",
     "tailwindcss-fluid-type": "^2.0.3"
   },
@@ -41,4 +47,3 @@
   },
   "homepage": "https://github.com/astro-reactive/astro-reactive#readme"
 }
-
diff --git a/apps/landing-page/src/styles/global.css b/apps/landing-page/src/styles/global.css
index 8d4e597..bb4cad3 100644
--- a/apps/landing-page/src/styles/global.css
+++ b/apps/landing-page/src/styles/global.css
@@ -1,12 +1,12 @@
 /* TODO: consider creating <Button> and <GradientText> components */
 a,
 .btn {
-  @apply transition-colors duration-200;
-  @apply hover:text-secondary;
-  @apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-transparent focus:ring-secondary;
+	@apply transition-colors duration-200;
+	@apply hover:text-secondary;
+	@apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-transparent focus:ring-secondary;
 }
 
 .gradient-text {
-  @apply text-transparent bg-clip-text;
-  @apply bg-gradient-to-br from-indigo-500 via-fuchsia-500 to-pink-500;
+	@apply text-transparent bg-clip-text;
+	@apply bg-gradient-to-br from-indigo-500 via-fuchsia-500 to-pink-500;
 }
diff --git a/apps/landing-page/src/styles/index.css b/apps/landing-page/src/styles/index.css
index dd04240..8661b67 100644
--- a/apps/landing-page/src/styles/index.css
+++ b/apps/landing-page/src/styles/index.css
@@ -1,2 +1,2 @@
-@import "global.css";
-@import "theme.css";
+@import 'global.css';
+@import 'theme.css';
diff --git a/apps/landing-page/src/styles/theme.css b/apps/landing-page/src/styles/theme.css
index f7c1fef..3dd5839 100644
--- a/apps/landing-page/src/styles/theme.css
+++ b/apps/landing-page/src/styles/theme.css
@@ -1,19 +1,19 @@
-[data-theme="light"] {
-  --color-primary: theme("colors.pink.500");
-  --color-secondary: theme("colors.indigo.500");
-  --color-text: theme("colors.gray.900");
-  --color-text-offset: theme("colors.gray.600");
-  --color-background: theme("colors.gray.50");
-  --color-background-offset: theme("colors.gray.100");
-  --color-border: theme("colors.gray.900" / 10%);
+[data-theme='light'] {
+	--color-primary: theme('colors.pink.500');
+	--color-secondary: theme('colors.indigo.500');
+	--color-text: theme('colors.gray.900');
+	--color-text-offset: theme('colors.gray.600');
+	--color-background: theme('colors.gray.50');
+	--color-background-offset: theme('colors.gray.100');
+	--color-border: theme('colors.gray.900' / 10%);
 }
 
-[data-theme="dark"] {
-  --color-primary: theme("colors.pink.400");
-  --color-secondary: theme("colors.indigo.400");
-  --color-text: theme("colors.gray.50");
-  --color-text-offset: theme("colors.gray.400");
-  --color-background: theme("colors.gray.900");
-  --color-background-offset: theme("colors.gray.800");
-  --color-border: theme("colors.gray.50" / 10%);
+[data-theme='dark'] {
+	--color-primary: theme('colors.pink.400');
+	--color-secondary: theme('colors.indigo.400');
+	--color-text: theme('colors.gray.50');
+	--color-text-offset: theme('colors.gray.400');
+	--color-background: theme('colors.gray.900');
+	--color-background-offset: theme('colors.gray.800');
+	--color-border: theme('colors.gray.50' / 10%);
 }
diff --git a/apps/landing-page/tailwind.config.cjs b/apps/landing-page/tailwind.config.cjs
index 0f0108d..421dbd3 100644
--- a/apps/landing-page/tailwind.config.cjs
+++ b/apps/landing-page/tailwind.config.cjs
@@ -1,38 +1,38 @@
-const defaultTheme = require("tailwindcss/defaultTheme");
+const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
-  content: ["./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}"],
-  theme: {
-    screens: {
-      "astro-sm": { max: "1000px" },
-      "astro-md": { min: "640px", max: "1000px" },
-      "astro-img": { min: "600px", max: "1000px" },
-      "astro-lg": { min: "1000px" },
-      ...defaultTheme.screens,
-    },
-    extend: {
-      fontFamily: {
-        sans: ["Inter", ...defaultTheme.fontFamily.sans],
-      },
-      colors: {
-        primary: "var(--color-primary)",
-        secondary: "var(--color-secondary)",
-      },
-      textColor: {
-        default: "var(--color-text)",
-        offset: "var(--color-text-offset)",
-      },
-      backgroundColor: {
-        default: "var(--color-background)",
-        offset: "var(--color-background-offset)",
-      },
-      borderColor: {
-        default: "var(--color-border)",
-      },
-    },
-  },
-  corePlugins: {
-    fontSize: false,
-  },
-  plugins: [require("tailwindcss-fluid-type")],
+	content: ['./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}'],
+	theme: {
+		screens: {
+			'astro-sm': { max: '1000px' },
+			'astro-md': { min: '640px', max: '1000px' },
+			'astro-img': { min: '600px', max: '1000px' },
+			'astro-lg': { min: '1000px' },
+			...defaultTheme.screens,
+		},
+		extend: {
+			fontFamily: {
+				sans: ['Inter', ...defaultTheme.fontFamily.sans],
+			},
+			colors: {
+				primary: 'var(--color-primary)',
+				secondary: 'var(--color-secondary)',
+			},
+			textColor: {
+				default: 'var(--color-text)',
+				offset: 'var(--color-text-offset)',
+			},
+			backgroundColor: {
+				default: 'var(--color-background)',
+				offset: 'var(--color-background-offset)',
+			},
+			borderColor: {
+				default: 'var(--color-border)',
+			},
+		},
+	},
+	corePlugins: {
+		fontSize: false,
+	},
+	plugins: [require('tailwindcss-fluid-type')],
 };
diff --git a/package-lock.json b/package-lock.json
index 10a4f91..32a4200 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,11 +30,17 @@
       "license": "ISC",
       "dependencies": {
         "@astro-reactive/form": "*",
-        "@astro-reactive/tsconfig": "*",
         "@astro-reactive/validator": "*",
         "astro": "^1.6.5"
       },
       "devDependencies": {
+        "@astro-reactive/eslint-config-custom": "*",
+        "@astro-reactive/tsconfig": "*",
+        "@types/eslint": "^8.4.10",
+        "@types/prettier": "^2.7.2",
+        "eslint": "^8.31.0",
+        "prettier": "^2.8.3",
+        "prettier-plugin-astro": "^0.7.2",
         "rimraf": "^3.0.2"
       }
     },
@@ -53,11 +59,17 @@
         "@types/react-dom": "^18.0.0",
         "astro": "^1.4.4",
         "preact": "^10.7.3",
-        "prettier-plugin-astro": "^0.7.0",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
       },
       "devDependencies": {
+        "@astro-reactive/eslint-config-custom": "*",
+        "@astro-reactive/tsconfig": "*",
+        "@types/eslint": "^8.4.10",
+        "@types/prettier": "^2.7.2",
+        "eslint": "^8.31.0",
+        "prettier": "^2.8.3",
+        "prettier-plugin-astro": "^0.7.2",
         "rimraf": "^3.0.2"
       }
     },
@@ -71,20 +83,25 @@
         "tailwindcss": "^3.1.8"
       },
       "devDependencies": {
+        "@astro-reactive/eslint-config-custom": "*",
         "@astrojs/tailwind": "^2.0.2",
+        "@types/eslint": "^8.4.10",
         "@types/micromodal": "^0.3.3",
+        "@types/prettier": "^2.7.2",
         "astro": "^1.4.7",
         "astro-icon": "^0.8.0",
-        "prettier": "2.7.1",
-        "prettier-plugin-astro": "^0.7.0",
+        "eslint": "^8.31.0",
+        "prettier": "^2.7.1",
+        "prettier-plugin-astro": "^0.7.2",
         "rimraf": "^3.0.2",
         "tailwindcss-fluid-type": "^2.0.3"
       }
     },
     "apps/landing-page/node_modules/prettier": {
       "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+      "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
       "dev": true,
-      "license": "MIT",
       "bin": {
         "prettier": "bin-prettier.js"
       },
@@ -6450,9 +6467,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz",
-      "integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==",
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz",
+      "integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==",
       "bin": {
         "prettier": "bin-prettier.js"
       },
@@ -8647,10 +8664,16 @@
     "@astro-reactive/demo": {
       "version": "file:apps/demo",
       "requires": {
+        "@astro-reactive/eslint-config-custom": "*",
         "@astro-reactive/form": "*",
         "@astro-reactive/tsconfig": "*",
         "@astro-reactive/validator": "*",
+        "@types/eslint": "^8.4.10",
+        "@types/prettier": "^2.7.2",
         "astro": "^1.6.5",
+        "eslint": "^8.31.0",
+        "prettier": "^2.8.3",
+        "prettier-plugin-astro": "^0.7.2",
         "rimraf": "^3.0.2"
       }
     },
@@ -8658,16 +8681,22 @@
       "version": "file:apps/docs",
       "requires": {
         "@algolia/client-search": "^4.13.1",
+        "@astro-reactive/eslint-config-custom": "*",
+        "@astro-reactive/tsconfig": "*",
         "@astrojs/preact": "^1.1.1",
         "@astrojs/react": "^1.1.4",
         "@docsearch/css": "^3.1.0",
         "@docsearch/react": "^3.1.0",
+        "@types/eslint": "^8.4.10",
         "@types/node": "^18.0.0",
+        "@types/prettier": "^2.7.2",
         "@types/react": "^18.0.24",
         "@types/react-dom": "^18.0.0",
         "astro": "^1.4.4",
+        "eslint": "^8.31.0",
         "preact": "^10.7.3",
-        "prettier-plugin-astro": "^0.7.0",
+        "prettier": "^2.8.3",
+        "prettier-plugin-astro": "^0.7.2",
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
         "rimraf": "^3.0.2"
@@ -8709,11 +8738,15 @@
     "@astro-reactive/landing-page": {
       "version": "file:apps/landing-page",
       "requires": {
+        "@astro-reactive/eslint-config-custom": "*",
         "@astro-reactive/tsconfig": "*",
         "@astrojs/tailwind": "^2.0.2",
+        "@types/eslint": "*",
         "@types/micromodal": "^0.3.3",
+        "@types/prettier": "*",
         "astro": "^1.4.7",
         "astro-icon": "^0.8.0",
+        "eslint": "*",
         "micromodal": "^0.4.10",
         "prettier": "2.7.1",
         "prettier-plugin-astro": "^0.7.0",
@@ -8724,6 +8757,8 @@
       "dependencies": {
         "prettier": {
           "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
+          "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
           "dev": true
         }
       }
@@ -12904,9 +12939,9 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
     },
     "prettier": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz",
-      "integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg=="
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz",
+      "integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw=="
     },
     "prettier-linter-helpers": {
       "version": "1.0.0",