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;
---
-
-
-
-
-
- {title} | Astro Reactive Demo
-
-
-
- {title}
-
-
-
+
+
+
+
+
+ {title} | Astro Reactive Demo
+
+
+
+ {title}
+
+
+
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' },
];
---
- {links.map((link) => {link.label} )}
+ {links.map((link) => {link.label} )}
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',
};
---
- Simple Form
-
+ Simple Form
+
- Form with nested form groups
-
+ Form with nested form groups
+
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';
---
-
+
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--;
+ },
};
---
-
-
- {Counter.count}
-
+
+ {Counter.count}
+
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';
---
-
+
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!",
};
---
-
+
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));
---
-
+
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)]);
---
-
+
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();
+ const map = new Map();
- 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
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';
/>
-
+
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;
---
-
-
-
-
+
+
+
+
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 && More }
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
+ (typeof KNOWN_LANGUAGE_CODES)[number],
+ Record
>;
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}`;
---
-
-
-
-
-
- {
- frontmatter.title
- ? `${frontmatter.title} | ${CONFIG.SITE.title}`
- : CONFIG.SITE.title
- }
-
-
-
+
-
+ .mobile-sidebar-toggle #grid-left {
+ display: block;
+ top: 2rem;
+ }
+
+
-
-
-
-
-
-
-
🛠 Under Construction: This library and the documentation
- are undergoing rigorous development. Read and join our
discussions for questions, suggestions, or feedback.
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
🛠 Under Construction: This library and the documentation are undergoing rigorous
+ development. Read and join our
discussions for questions, suggestions, or feedback.
+
+
+
+
+
+
+
+
+