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

chore(apps): Setup prettier + eslint for all our apps (#254)

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

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

* chore(apps): Added .eslintignore files
This commit is contained in:
Lalit 2023-01-14 15:10:40 +05:30 committed by GitHub
parent 0abe83aea9
commit f79ce72a1c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
57 changed files with 1349 additions and 1265 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/demo/.eslintignore Normal file
View file

@ -0,0 +1,2 @@
dist
node_modules

5
apps/demo/.eslintrc.cjs Normal file
View file

@ -0,0 +1,5 @@
/** @type {import("@types/eslint").Linter.Config} */
module.exports = {
root: true,
extends: ['@astro-reactive/eslint-config-custom'],
};

24
apps/demo/.prettierrc.cjs Normal file
View file

@ -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,
},
},
],
};

1
apps/demo/README.md
View file

@ -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)_

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

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

12
apps/demo/package.json
View file

@ -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"
}
}

6
apps/demo/src/components/Layout.astro
View file

@ -1,11 +1,11 @@
---
import Nav from "./Nav.astro";
import Nav from './Nav.astro';
export interface Props {
title: string;
theme?: "dark" | "light";
theme?: 'dark' | 'light';
}
const { theme = "light", title } = Astro.props;
const { theme = 'light', title } = Astro.props;
---
<html lang="en" class={theme}>

12
apps/demo/src/components/Nav.astro
View file

@ -1,10 +1,10 @@
---
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' },
];
---
@ -14,7 +14,7 @@ const links = [
<style>
nav a::after {
content: " | ";
content: ' | ';
}
nav a {
text-decoration: none;

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

@ -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: '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 --',
},
]);
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'
);
/**
@ -71,8 +71,8 @@ const skills = new FormGroup(
*/
const submitControl: Submit = {
name: "submit",
type: "submit",
name: 'submit',
type: 'submit',
};
---

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

@ -1,5 +1,5 @@
---
import Layout from "../../components/Layout.astro";
import Layout from '../../components/Layout.astro';
---
<Layout title="Docs Examples">

2
apps/demo/src/pages/experimental/hyperdrive.astro
View file

@ -1,5 +1,5 @@
---
import Layout from "../../components/Layout.astro";
import Layout from '../../components/Layout.astro';
const Counter = {
count: 0,
increment() {

2
apps/demo/src/pages/experimental/index.astro
View file

@ -1,5 +1,5 @@
---
import Layout from "../../components/Layout.astro";
import Layout from '../../components/Layout.astro';
---
<Layout title="Experimental Demos">

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

@ -1,104 +1,100 @@
---
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",
name: 'username',
label: 'Username',
validators: [
{
validator: Validators.required,
category: "info",
category: 'info',
},
],
},
{
name: "email",
label: "Email",
name: 'email',
label: 'Email',
validators: [
{ validator: Validators.required },
{ validator: Validators.email, category: "warn" },
{ validator: Validators.email, category: 'warn' },
],
},
{
name: "password",
label: "Password",
type: "password",
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: 'rating',
label: 'Rating',
type: 'radio',
value: '5',
options: ['1', '2', '3', '4', '5'],
},
{
name: "agreement",
label: "Agreement",
type: "radio",
value: "yes",
name: 'agreement',
label: 'Agreement',
type: 'radio',
value: 'yes',
options: [
{ label: "Agree", value: "yes" },
{ label: "Disagree", value: "no" },
{ 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: '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: 'comment',
label: 'Feedback',
type: 'textarea',
value: 'Nice!',
},
{
name: "terms",
label: "Terms and Conditions",
type: "checkbox",
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",
name: 'submit',
type: 'submit',
value: "Let's go!",
};
---

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

@ -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",
name: 'firstName',
label: 'First Name',
placeholder: 'ex. John',
validators: [Validators.required],
},
{
name: "lastName",
label: "Last Name",
placeholder: "ex. Doe",
name: 'lastName',
label: 'Last Name',
placeholder: 'ex. Doe',
validators: [Validators.required],
},
{
name: "email",
label: "Email",
placeholder: "ex. john.doe@email.com",
name: 'email',
label: 'Email',
placeholder: 'ex. john.doe@email.com',
validators: [Validators.email, Validators.required],
},
{
name: "whyHire",
label: "Why should we hire you?",
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: '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",
name: 'eligible',
label: 'Are you eligible to work?',
type: 'radio',
options: [
{ label: "Yes", value: "yes" },
{ label: "No", value: "no" },
{ label: 'Yes', value: 'yes' },
{ label: 'No', value: 'no' },
],
},
]);
const skillsForm = new FormGroup([
{
name: "js",
label: "Javascript",
type: "checkbox",
name: 'js',
label: 'Javascript',
type: 'checkbox',
},
{
name: "java",
label: "Java",
type: "checkbox",
name: 'java',
label: 'Java',
type: 'checkbox',
},
{
name: "astro",
label: "Astro",
type: "checkbox",
name: 'astro',
label: 'Astro',
type: 'checkbox',
},
{
name: "cpp",
label: "C/C++",
type: "checkbox",
name: 'cpp',
label: 'C/C++',
type: 'checkbox',
},
{
name: "sql",
label: "SQL",
type: "checkbox",
name: 'sql',
label: 'SQL',
type: 'checkbox',
},
{
name: "devops",
label: "DevOps",
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",
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>

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

@ -1,94 +1,94 @@
---
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: 'crust',
label: 'Crust',
type: 'radio',
options: [{ label: 'Garlic', value: 'garlic' }],
},
{
name: "size",
label: "Size",
type: "radio",
options: ["Small", "Medium", "Large"],
name: 'size',
label: 'Size',
type: 'radio',
options: ['Small', 'Medium', 'Large'],
},
{
name: "sauce",
label: "Sauce",
type: "radio",
options: ["Tomato", "Barbeque"],
name: 'sauce',
label: 'Sauce',
type: 'radio',
options: ['Tomato', 'Barbeque'],
},
]);
const toppingsForm = new FormGroup([
{
name: "mushrooms",
label: "Mushrooms",
type: "checkbox",
name: 'mushrooms',
label: 'Mushrooms',
type: 'checkbox',
},
{
name: "extraCheese",
label: "Extra Cheese",
type: "checkbox",
name: 'extraCheese',
label: 'Extra Cheese',
type: 'checkbox',
},
{
name: "onions",
label: "Onions",
type: "checkbox",
name: 'onions',
label: 'Onions',
type: 'checkbox',
},
{
name: "peppers",
label: "Peppers",
type: "checkbox",
name: 'peppers',
label: 'Peppers',
type: 'checkbox',
},
{
name: "pepperoni",
label: "Pepperoni",
type: "checkbox",
name: 'pepperoni',
label: 'Pepperoni',
type: 'checkbox',
},
{
name: "sausage",
label: "Sausage",
type: "checkbox",
name: 'sausage',
label: 'Sausage',
type: 'checkbox',
},
{
name: "chicken",
label: "Chicken",
type: "checkbox",
name: 'chicken',
label: 'Chicken',
type: 'checkbox',
},
{
name: "pineapple",
label: "Pineapple",
type: "checkbox",
name: 'pineapple',
label: 'Pineapple',
type: 'checkbox',
},
]);
const infoForm = new FormGroup([
{
name: "name",
label: "Name",
name: 'name',
label: 'Name',
validators: [Validators.required],
},
{
name: "address",
label: "Delivery Address",
name: 'address',
label: 'Delivery Address',
validators: [Validators.required],
},
{
name: "contact",
label: "Contact Number",
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">

2
apps/docs/.eslintignore Normal file
View file

@ -0,0 +1,2 @@
dist
node_modules

5
apps/docs/.eslintrc.cjs Normal file
View file

@ -0,0 +1,5 @@
/** @type {import("@types/eslint").Linter.Config} */
module.exports = {
root: true,
extends: ['@astro-reactive/eslint-config-custom'],
};

24
apps/docs/.prettierrc.cjs Normal file
View file

@ -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,
},
},
],
};

1
apps/docs/README.md
View file

@ -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)_

12
apps/docs/package.json
View file

@ -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"
}
}

1
apps/docs/public/make-scrollable-code-focusable.js
View file

@ -1,3 +1,4 @@
// eslint-disable-next-line no-undef
Array.from(document.getElementsByTagName('pre')).forEach((element) => {
element.setAttribute('tabindex', '0');
});

31
apps/docs/src/components/Footer/AvatarList.astro
View file

@ -17,20 +17,20 @@ type Commit = {
async function getCommits(url: string) {
try {
const token = import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN ?? "hello";
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",
method: 'GET',
headers: {
Authorization: auth,
"User-Agent": "astro-docs/1.0",
'User-Agent': 'astro-docs/1.0',
},
});
@ -52,7 +52,7 @@ async function getCommits(url: string) {
}
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;
@ -71,10 +71,7 @@ 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}`}
>
<ul class="avatar-list" style={`--avatar-count: ${recentContributors.length}`}>
{
recentContributors.map((item) => (
<li>
@ -94,10 +91,8 @@ const additionalContributors = unique.length - recentContributors.length; // lis
{
additionalContributors > 0 && (
<span>
<a
href={commitsURL}
>{`and ${additionalContributors} additional contributor${
additionalContributors > 1 ? "s" : ""
<a href={commitsURL}>{`and ${additionalContributors} additional contributor${
additionalContributors > 1 ? 's' : ''
}.`}</a>
</span>
)
@ -115,10 +110,7 @@ const additionalContributors = unique.length - recentContributors.length; // lis
/* 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))
);
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 */
@ -130,10 +122,7 @@ const additionalContributors = unique.length - recentContributors.length; // lis
.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));
}
}

4
apps/docs/src/components/HeadCommon.astro
View file

@ -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>

20
apps/docs/src/components/Header/Header.astro
View file

@ -1,11 +1,11 @@
---
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 = {
@ -24,15 +24,11 @@ const lang = getLanguageFromURL(currentPage);
</div>
<div class="logo flex">
<a href="/">
<h1>{CONFIG.SITE.title ?? "Documentation"}</h1>
<h1>{CONFIG.SITE.title ?? 'Documentation'}</h1>
</a>
</div>
<div style="flex-grow: 1;"></div>
{
KNOWN_LANGUAGE_CODES.length > 1 && (
<LanguageSelect lang={lang} client:idle />
)
}
{KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle />}
<!-- TODO: enable search -->
<!-- <div class="search-item">
<Search client:idle />

2
apps/docs/src/components/Header/Search.tsx
View file

@ -28,7 +28,7 @@ export default function Search() {
}, [setIsOpen]);
const onInput = useCallback(
(e) => {
(e: KeyboardEvent) => {
setIsOpen(true);
setInitialQuery(e.key);
},

21
apps/docs/src/components/LeftSidebar/LeftSidebar.astro
View file

@ -1,13 +1,13 @@
---
import { getLanguageFromURL } from "../../languages";
import { SIDEBAR } from "../../config";
import { getLanguageFromURL } from '../../languages';
import { SIDEBAR } from '../../config';
type Props = {
currentPage: string;
};
const { currentPage } = Astro.props as Props;
const currentPageMatch = currentPage.endsWith("/")
const currentPageMatch = currentPage.endsWith('/')
? currentPage.slice(1, -1)
: currentPage.slice(1);
const langCode = getLanguageFromURL(currentPage);
@ -26,12 +26,7 @@ const sidebar = SIDEBAR[langCode];
const url = Astro.site?.pathname + child.link;
return (
<li class="nav-link">
<a
href={url}
aria-current={
currentPageMatch === child.link ? "page" : false
}
>
<a href={url} aria-current={currentPageMatch === child.link ? 'page' : false}>
{child.text}
</a>
</li>
@ -46,10 +41,10 @@ const sidebar = SIDEBAR[langCode];
</nav>
<script is:inline>
window.addEventListener("DOMContentLoaded", () => {
window.addEventListener('DOMContentLoaded', () => {
var target = document.querySelector('[aria-current="page"]');
if (target && target.offsetTop > window.innerHeight - 100) {
document.querySelector(".nav-groups").scrollTop = target.offsetTop;
document.querySelector('.nav-groups').scrollTop = target.offsetTop;
}
});
</script>
@ -104,7 +99,7 @@ const sidebar = SIDEBAR[langCode];
background-color: var(--theme-bg-hover);
}
.nav-link a[aria-current="page"] {
.nav-link a[aria-current='page'] {
color: var(--theme-text-accent);
background-color: var(--theme-bg-accent);
font-weight: 600;
@ -118,7 +113,7 @@ const sidebar = SIDEBAR[langCode];
</style>
<style is:global>
:root.theme-dark .nav-link a[aria-current="page"] {
:root.theme-dark .nav-link a[aria-current='page'] {
color: hsla(var(--color-base-white), 100%, 1);
}
</style>

8
apps/docs/src/components/PageContent/PageContent.astro
View file

@ -1,8 +1,8 @@
---
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;

2
apps/docs/src/components/RightSidebar/MoreMenu.astro
View file

@ -1,5 +1,5 @@
---
import * as CONFIG from "../../config";
import * as CONFIG from '../../config';
type Props = {
editHref: string;

37
apps/docs/src/config.ts
View file

@ -1,16 +1,15 @@
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",
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",
twitter: 'astroreactive',
};
// This is the type of the frontmatter you put in the docs markdown files.
@ -19,13 +18,13 @@ export type Frontmatter = {
description: string;
layout: string;
image?: { src: string; alt: string };
dir?: "ltr" | "rtl";
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,13 +34,13 @@ 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],
(typeof KNOWN_LANGUAGE_CODES)[number],
Record<string, { text: string; link: string }[]>
>;
export const SIDEBAR: Sidebar = {
@ -55,15 +54,15 @@ export const SIDEBAR: Sidebar = {
// TODO: create overview
Introduction: [
{ text: "Overview", link: "en/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' },
],
},
};

2
apps/docs/src/languages.ts
View file

@ -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];
}

46
apps/docs/src/layouts/MainLayout.astro
View file

@ -1,13 +1,13 @@
---
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;
@ -17,24 +17,16 @@ type Props = {
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"
>
<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
}
{frontmatter.title ? `${frontmatter.title} | ${CONFIG.SITE.title}` : CONFIG.SITE.title}
</title>
<style>
body {
@ -143,17 +135,12 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
</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
<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}
>
<PageContent frontmatter={frontmatter} headings={headings} githubEditUrl={githubEditUrl}>
<slot />
</PageContent>
</div>
@ -164,4 +151,3 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
<Footer path={currentFile} />
</body>
</html>

86
apps/docs/src/pages/en/api/form/form-component.md
View file

@ -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',
};
---
@ -161,7 +161,7 @@ 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 |
@ -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.

2
apps/docs/src/pages/en/api/form/form-control.md
View file

@ -1,7 +1,7 @@
---
title: FormControl
type: class
package: "@astro-reactive/form"
package: '@astro-reactive/form'
description: FormControl class
layout: ../../../../layouts/MainLayout.astro
---

4
apps/docs/src/pages/en/api/form/form-group.md
View file

@ -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
---
@ -13,7 +13,7 @@ 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 |

92
apps/docs/src/pages/en/api/validator/validators.md
View file

@ -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} />

3
apps/docs/src/pages/en/introduction.md
View file

@ -49,10 +49,9 @@ We will also make this clear in our library documentation as we see them.
## Packages
| 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 |

8
apps/docs/src/pages/en/tutorial/getting-started.md
View file

@ -6,26 +6,24 @@ layout: ../../../layouts/MainLayout.astro
Consider the following code:
```astro
---
import Form { FormGroup } from '@astro-reactive/form';
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} />
```

30
apps/docs/src/pages/en/tutorial/page-2.md
View file

@ -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_

5
apps/docs/tsconfig.json
View file

@ -1,7 +1,6 @@
{
"extends": "astro/tsconfigs/base",
"extends": "@astro-reactive/tsconfig/astro-library.json",
"compilerOptions": {
"jsx": "preserve",
"skipLibCheck": true
"jsx": "preserve"
}
}

2
apps/landing-page/.eslintignore Normal file
View file

@ -0,0 +1,2 @@
dist
node_modules

5
apps/landing-page/.eslintrc.cjs Normal file
View file

@ -0,0 +1,5 @@
/** @type {import("@types/eslint").Linter.Config} */
module.exports = {
root: true,
extends: ['@astro-reactive/eslint-config-custom'],
};

24
apps/landing-page/.prettierrc.cjs Normal file
View file

@ -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,
},
},
],
};

1
apps/landing-page/.prettierrc.json
View file

@ -1 +0,0 @@
{}

8
apps/landing-page/astro.config.mjs
View file

@ -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",
site: 'https://astro-reactive.dev',
integrations: [tailwind()],
vite: {
ssr: {
external: ["svgo"],
external: ['svgo'],
},
},
});

13
apps/landing-page/package.json
View file

@ -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"
}

4
apps/landing-page/src/styles/index.css
View file

@ -1,2 +1,2 @@
@import "global.css";
@import "theme.css";
@import 'global.css';
@import 'theme.css';

32
apps/landing-page/src/styles/theme.css
View file

@ -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%);
}

30
apps/landing-page/tailwind.config.cjs
View file

@ -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}"],
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" },
'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],
sans: ['Inter', ...defaultTheme.fontFamily.sans],
},
colors: {
primary: "var(--color-primary)",
secondary: "var(--color-secondary)",
primary: 'var(--color-primary)',
secondary: 'var(--color-secondary)',
},
textColor: {
default: "var(--color-text)",
offset: "var(--color-text-offset)",
default: 'var(--color-text)',
offset: 'var(--color-text-offset)',
},
backgroundColor: {
default: "var(--color-background)",
offset: "var(--color-background-offset)",
default: 'var(--color-background)',
offset: 'var(--color-background-offset)',
},
borderColor: {
default: "var(--color-border)",
default: 'var(--color-border)',
},
},
},
corePlugins: {
fontSize: false,
},
plugins: [require("tailwindcss-fluid-type")],
plugins: [require('tailwindcss-fluid-type')],
};

59
package-lock.json generated
View file

@ -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",