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

Compare commits

base: ayo:main
Branches Tags
ayo:main
ayo:packages/common
ayo:v0.1.1
ayo:v0.1.0
ayo:v0.0.10
ayo:v0.0.9
ayo:v0.0.8
ayo:v0.0.7
ayo:v0.0.6
ayo:v0.0.5
ayo:v0.0.4
ayo:v0.0.3
ayo:v0.0.2
ayo:v0.0.1
..
compare: ayo:packages/common
Branches Tags
ayo:main
ayo:packages/common
ayo:v0.1.1
ayo:v0.1.0
ayo:v0.0.10
ayo:v0.0.9
ayo:v0.0.8
ayo:v0.0.7
ayo:v0.0.6
ayo:v0.0.5
ayo:v0.0.4
ayo:v0.0.3
ayo:v0.0.2
ayo:v0.0.1

No commits in common. "main" and "packages/common" have entirely different histories.
main ... packages/c

56 changed files with 10883 additions and 17712 deletions
Show stats Expand all files Collapse all files

11
.build.yml
View file

@ -1,11 +0,0 @@
image: alpine/edge
secrets:
- bbfcb6dc-7c4a-42ee-a11a-022f0339a133
environment:
REPO: astro-reactive
GH_USER: ayoayco
tasks:
- push-mirror: |
cd ~/"${REPO}"
git config --global credential.helper store
git push --mirror "https://github.com/${GH_USER}/${REPO}"

1
.github/pull_request_template.md vendored
View file

@ -23,7 +23,6 @@ Tag a reviewer: @
Tasks: Tasks:
- [ ] I have ran the build command to make sure apps are working: `npm run build` - [ ] I have ran the build command to make sure apps are working: `npm run build`
- [ ] I have ran the tests to make sure nothing is broken: `npm run test` - [ ] I have ran the tests to make sure nothing is broken: `npm run test`
- [ ] I have ran the Astro checker: `npm run check`
- [ ] I have ran the linter to make sure code is clean: `npm run lint` - [ ] I have ran the linter to make sure code is clean: `npm run lint`
- [ ] I have reviewed my own code to remove changes that are not needed - [ ] I have reviewed my own code to remove changes that are not needed

6
.github/workflows/build-and-test.yml vendored
View file

@ -15,7 +15,7 @@ jobs:
strategy: strategy:
matrix: matrix:
node-version: [18.x] node-version: [16.x, 18.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/ # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps: steps:
@ -25,8 +25,8 @@ jobs:
with: with:
node-version: ${{ matrix.node-version }} node-version: ${{ matrix.node-version }}
cache: "npm" cache: "npm"
- run: npm ci - run: npm ci
- run: npm run clean
- run: npm run check - run: npm run check
- run: npm run build
- run: npm run test - run: npm run test
- run: npm run lint - run: npm run lint

1
.npmrc
View file

@ -1 +0,0 @@
legacy-peer-deps=true

5
.vscode/settings.json vendored
View file

@ -4,8 +4,5 @@
"source.fixAll": true "source.fixAll": true
}, },
"cSpell.words": ["Astro", "maxlength"], "cSpell.words": ["Astro", "maxlength"],
"prettier.documentSelectors": ["**/*.astro"], "prettier.documentSelectors": ["**/*.astro"]
"[astro]": {
"editor.defaultFormatter": "astro-build.astro-vscode"
}
} }

16
CONTRIBUTING.md
View file

@ -8,7 +8,7 @@ This is a library of components and utilities for building reactive user interfa
There's a lot of opportunity to contribute. A good start will be to understand what Astro is, and how to set up a basic Astro project. For this, the [Astro website](https://astro.build) and [documentation](https://docs.astro.build/en/getting-started/) are good places to start. There's a lot of opportunity to contribute. A good start will be to understand what Astro is, and how to set up a basic Astro project. For this, the [Astro website](https://astro.build) and [documentation](https://docs.astro.build/en/getting-started/) are good places to start.
## Contributing # Contributing
Any contribution is welcome. Feel free to look around to find something that interests you. :) Any contribution is welcome. Feel free to look around to find something that interests you. :)
@ -18,7 +18,7 @@ If you don't find anything there, we are happy to help you get your contribution
You can always [create a new issue](https://github.com/astro-reactive/astro-reactive/issues/new/choose) for your own idea, [post on our discussions](https://github.com/astro-reactive/astro-reactive/discussions) or join our [Discord](https://discord.gg/kkvW7GYNAp). You can always [create a new issue](https://github.com/astro-reactive/astro-reactive/issues/new/choose) for your own idea, [post on our discussions](https://github.com/astro-reactive/astro-reactive/discussions) or join our [Discord](https://discord.gg/kkvW7GYNAp).
## The Astro Reactive Library # The Astro Reactive Library
This project aims to be a library that developers will use to create reactive UIs with Astro. This project aims to be a library that developers will use to create reactive UIs with Astro.
@ -26,7 +26,7 @@ The project is made up of [NPM workspaces](https://docs.npmjs.com/cli/v7/using-n
We are using [Turborepo](https://turbo.build/repo) as our monorepo build system. We are using [Turborepo](https://turbo.build/repo) as our monorepo build system.
### Packages: Packages:
1. [demo](https://github.com/astro-reactive/astro-reactive/tree/main/apps/demo) in the directory `apps/demo` 1. [demo](https://github.com/astro-reactive/astro-reactive/tree/main/apps/demo) in the directory `apps/demo`
- Astro web application that we use to test and demonstrate the library components - Astro web application that we use to test and demonstrate the library components
@ -34,8 +34,6 @@ We are using [Turborepo](https://turbo.build/repo) as our monorepo build system.
- component that allows developers to programmatically build a form - component that allows developers to programmatically build a form
1. [validator](https://github.com/astro-reactive/astro-reactive/tree/main/packages/validator) in the directory `packages/astro-reactive-validator` 1. [validator](https://github.com/astro-reactive/astro-reactive/tree/main/packages/validator) in the directory `packages/astro-reactive-validator`
- component that allows developers to set up validators for their forms easily - component that allows developers to set up validators for their forms easily
### Apps
1. [docs](https://github.com/astro-reactive/astro-reactive/tree/main/apps/docs) - in the directory `apps/docs` 1. [docs](https://github.com/astro-reactive/astro-reactive/tree/main/apps/docs) - in the directory `apps/docs`
- Astro website for the library's extensive documentation - Astro website for the library's extensive documentation
1. [landing-page](https://github.com/astro-reactive/astro-reactive/tree/main/apps/landing-page) - in the directory `apps/landing-page` 1. [landing-page](https://github.com/astro-reactive/astro-reactive/tree/main/apps/landing-page) - in the directory `apps/landing-page`
@ -44,7 +42,7 @@ We are using [Turborepo](https://turbo.build/repo) as our monorepo build system.
[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/astro-reactive/astro-reactive.git) [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/astro-reactive/astro-reactive.git)
## Running locally # Running locally
We mainly use the `demo` app to see changes we make on the packages. Do the following to start hacking: We mainly use the `demo` app to see changes we make on the packages. Do the following to start hacking:
@ -92,7 +90,7 @@ npm run docs
npm run landing-page npm run landing-page
``` ```
## Running the linter and tests # Running the linter and tests
Please run the linter and tests before creating a PR to avoid delays in PR reviews. Fix all linting errors or failing tests whey you run the following commands. Please run the linter and tests before creating a PR to avoid delays in PR reviews. Fix all linting errors or failing tests whey you run the following commands.
@ -110,7 +108,7 @@ npm test
npm run lint:fix npm run lint:fix
``` ```
## Hacking with the packages # Hacking with the packages
As mentioned above, this project involves packages that are intended to be used in Astro applications. The demo app is our way to test and play with the packages. As mentioned above, this project involves packages that are intended to be used in Astro applications. The demo app is our way to test and play with the packages.
@ -118,7 +116,7 @@ If you plan to add features or fix bugs that are found in the packages, such as
Thank you again for your interest in contributing! Thank you again for your interest in contributing!
## Next Actions # Next Actions
✍️ Read on [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/); you'll see this used around issues, PRs, and commit messages ✍️ Read on [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/); you'll see this used around issues, PRs, and commit messages

2
LICENSE
View file

@ -1,6 +1,6 @@
MIT License MIT License
Copyright (c) 2022 Astro Reactive Copyright (c) 2022 Ayo Ayco
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

16
README.md
View file

@ -1,17 +1,9 @@
> [!WARNING]
>
> Please read: [an important announcement about the project](https://github.com/astro-reactive/astro-reactive/discussions/304)
>
> *As of now we still are in an exploratory phase and the library is not ready for production. We appreciate the interest. We look forward to your feedback and welcome all kinds of contribution. :)*
<p align="center"> <p align="center">
<img src="https://raw.githubusercontent.com/astro-reactive/astro-reactive/main/.github/assets/logo/min-banner.png" alt="Astro Reactive Library Logo"> <img src="https://raw.githubusercontent.com/astro-reactive/astro-reactive/main/.github/assets/logo/min-banner.png" alt="Astro Reactive Library Logo">
<br /> <br />
<strong>Astro Reactive Library</strong> <strong>Astro Reactive Library</strong>
<br /> <br />
Server-Side Rendered, Dynamic Components Let your data build your UI with native <a href="https://astro.build">Astro</a> components and architecture.
<br />
Let your data build your UI with <a href="https://astro.build">Astro</a>
<br /> <br />
<br /> <br />
<a href="https://github.com/astro-reactive/astro-reactive/actions/workflows/build-and-test.yml"> <a href="https://github.com/astro-reactive/astro-reactive/actions/workflows/build-and-test.yml">
@ -33,8 +25,8 @@
| Package | Release notes | Description | | Package | Release notes | Description |
| ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
| [form](https://github.com/astro-reactive/astro-reactive/blob/main/packages/form/README.md) | [![npm](https://img.shields.io/npm/v/@astro-reactive/form)](./packages/form/CHANGELOG.md) | a dynamic form which can be modified programmatically | | [form](https://github.com/astro-reactive/astro-reactive/blob/main/packages/form/README.md) | [![npm](https://img.shields.io/npm/v/@astro-reactive/form)](./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)](./packages/validator/CHANGELOG.md) | validators for editable fields | | [validator](https://github.com/astro-reactive/astro-reactive/blob/main/packages/validator/README.md) | [![npm](https://img.shields.io/npm/v/@astro-reactive/validator)](./packages/validator/RELEASE.md) | validators for editable fields |
| data-grid | 🛠 | a dynamic data grid of values | | data-grid | 🛠 | a dynamic data grid of values |
| themes | 🛠 | easy-to-use, accessible, consistent cross-browser styles | | themes | 🛠 | easy-to-use, accessible, consistent cross-browser styles |
| viz | 🛠 | data visualization that emits and responds to events | | viz | 🛠 | data visualization that emits and responds to events |
@ -118,4 +110,4 @@ This project is only possible because of the support and contribution of our com
/> />
</a> </a>
--> -->

3
apps/demo/.prettierrc.cjs
View file

@ -6,13 +6,12 @@ module.exports = {
tabWidth: 2, tabWidth: 2,
trailingComma: 'es5', trailingComma: 'es5',
useTabs: true, useTabs: true,
plugins: ['prettier-plugin-astro'], plugins: ['../../node_modules/prettier-plugin-astro'],
overrides: [ overrides: [
{ {
files: '*.astro', files: '*.astro',
options: { options: {
parser: 'astro', parser: 'astro',
astroAllowShorthand: false,
}, },
}, },
{ {

36
apps/demo/CHANGELOG.md
View file

@ -1,36 +0,0 @@
# @astro-reactive/demo
## 0.1.1
### Patch Changes
- a1cc4b0: Update homepage to https://astro-reactive.js.org
- Updated dependencies [a1cc4b0]
- @astro-reactive/validator@0.4.1
- @astro-reactive/form@0.9.1
## 0.1.0
### Minor Changes
- 4d2a577: Support Astro 3
### Patch Changes
- Updated dependencies [4d2a577]
- @astro-reactive/validator@0.4.0
- @astro-reactive/form@0.9.0
## 0.0.2
### Patch Changes
- fb11b73: Initial `create-astro-reactive` package
Update packages' meta information (author, homepage)
Upadte LICENSE owner info to `astro-reactive` organization
- 30de516: Change the default of `validateOnLoad` property to true, making server-side rendering validation the default behavior for the `Form` component.
Update the demo `index.astro` page by removing the `validateOnLoad` property/directive on the example which should still result to server-side rendered validation results.
- Updated dependencies [fb11b73]
- Updated dependencies [30de516]
- @astro-reactive/validator@0.3.3
- @astro-reactive/form@0.8.0

25
apps/demo/package.json
View file

@ -1,13 +1,14 @@
{ {
"name": "@astro-reactive/demo", "name": "@astro-reactive/demo",
"description": "Demo App for Astro Reactive Library", "description": "Demo App for Astro Reactive Library",
"version": "0.1.1", "type": "module",
"author": "astro-reactive", "version": "0.0.1",
"author": "Ayo Ayco <ayo@ayco.io> (https://ayco.io)",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",
"start": "astro dev", "start": "astro dev",
"check": "astro check", "check": "astro check && tsc --noEmit && astro build",
"build": "astro build", "build": "astro build",
"preview": "astro preview", "preview": "astro preview",
"astro": "astro", "astro": "astro",
@ -19,9 +20,7 @@
"dependencies": { "dependencies": {
"@astro-reactive/form": "*", "@astro-reactive/form": "*",
"@astro-reactive/validator": "*", "@astro-reactive/validator": "*",
"@astrojs/check": "^0.2.0", "astro": "^2.1.3"
"astro": "^4.0.3",
"typescript": "^5.2.2"
}, },
"main": "index.js", "main": "index.js",
"repository": { "repository": {
@ -32,15 +31,15 @@
"bugs": { "bugs": {
"url": "https://github.com/astro-reactive/astro-reactive/issues" "url": "https://github.com/astro-reactive/astro-reactive/issues"
}, },
"homepage": "https://astro-reactive.js.org", "homepage": "https://github.com/astro-reactive/astro-reactive#readme",
"devDependencies": { "devDependencies": {
"@astro-reactive/eslint-config-custom": "*", "@astro-reactive/eslint-config-custom": "*",
"@astro-reactive/tsconfig": "*", "@astro-reactive/tsconfig": "*",
"@types/eslint": "^8.44.3", "@types/eslint": "^8.4.10",
"@types/prettier": "^3.0.0", "@types/prettier": "^2.7.2",
"eslint": "^8.50.0", "eslint": "^8.31.0",
"prettier": "^3.0.3", "prettier": "^2.8.3",
"prettier-plugin-astro": "^0.12.0", "prettier-plugin-astro": "^0.7.2",
"rimraf": "^5.0.1" "rimraf": "^3.0.2"
} }
} }

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

@ -1,7 +1,6 @@
--- ---
import Form, { FormGroup, FormControl } from '@astro-reactive/form'; import Form, { ControlConfig, FormGroup, FormControl } from '@astro-reactive/form';
import type { ControlConfig } from '@astro-reactive/form'; import type { Submit } from '@astro-reactive/common/types';
import type { Submit } from '@astro-reactive/common';
import { Validators } from '@astro-reactive/validator'; import { Validators } from '@astro-reactive/validator';
import Layout from '../components/Layout.astro'; import Layout from '../components/Layout.astro';
@ -104,6 +103,7 @@ const submit: Submit = {
<Layout title={title} theme={theme}> <Layout title={title} theme={theme}>
<Form <Form
validateOnLoad
showValidationHints showValidationHints
formGroups={form} formGroups={form}
theme={theme} theme={theme}

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

@ -1,6 +1,5 @@
--- ---
import Form, { FormControl, FormGroup } from '@astro-reactive/form'; import Form, { ControlConfig, FormControl, FormGroup } from '@astro-reactive/form';
import type { ControlConfig } from '@astro-reactive/form';
import { Validators } from '@astro-reactive/validator'; import { Validators } from '@astro-reactive/validator';
import type { Submit } from '@astro-reactive/common'; import type { Submit } from '@astro-reactive/common';
import Layout from '../components/Layout.astro'; import Layout from '../components/Layout.astro';

5
apps/demo/tsconfig.json
View file

@ -1,6 +1,3 @@
{ {
"extends": "@astro-reactive/tsconfig/base.json", "extends": "@astro-reactive/tsconfig/base.json"
"compilerOptions": {
"skipLibCheck": true
}
} }

2
apps/docs/.prettierrc.cjs
View file

@ -6,7 +6,7 @@ module.exports = {
tabWidth: 2, tabWidth: 2,
trailingComma: "es5", trailingComma: "es5",
useTabs: true, useTabs: true,
plugins: ['prettier-plugin-astro'], plugins: ["../../node_modules/prettier-plugin-astro"],
overrides: [ overrides: [
{ {
files: "*.astro", files: "*.astro",

27
apps/docs/CHANGELOG.md
View file

@ -1,27 +0,0 @@
# @astro-reactive/docs
## 0.1.1
### Patch Changes
- a1cc4b0: Update homepage to https://astro-reactive.js.org
## 0.1.0
### Minor Changes
- 4d2a577: Support Astro 3
## 0.0.3
### Patch Changes
- 334a4c5: - Update documentation links to release notes
## 0.0.2
### Patch Changes
- fb11b73: Initial `create-astro-reactive` package
Update packages' meta information (author, homepage)
Upadte LICENSE owner info to `astro-reactive` organization

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

@ -10,5 +10,5 @@ export default defineConfig({
// Enable React for the Algolia search component. // Enable React for the Algolia search component.
react(), react(),
], ],
site: `https://docs.astro-reactive.js.org`, site: `https://docs.astro-reactive.dev`,
}); });

42
apps/docs/package.json
View file

@ -1,13 +1,13 @@
{ {
"name": "@astro-reactive/docs", "name": "@astro-reactive/docs",
"type": "module", "type": "module",
"version": "0.1.1", "version": "0.0.1",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",
"start": "astro dev", "start": "astro dev",
"docs": "astro dev", "docs": "astro dev",
"check": "astro check", "check": "astro check && tsc --noEmit && astro build",
"build": "astro build", "build": "astro build",
"preview": "astro preview", "preview": "astro preview",
"astro": "astro", "astro": "astro",
@ -17,18 +17,18 @@
"clean": "rimraf node_modules .turbo dist" "clean": "rimraf node_modules .turbo dist"
}, },
"dependencies": { "dependencies": {
"@algolia/client-search": "^4.20.0", "@algolia/client-search": "^4.13.1",
"@astrojs/preact": "^3.0.0", "@astrojs/preact": "^1.1.1",
"@astrojs/react": "^3.0.2", "@astrojs/react": "^1.1.4",
"@docsearch/css": "^3.5.2", "@docsearch/css": "^3.1.0",
"@docsearch/react": "^3.5.2", "@docsearch/react": "^3.1.0",
"@types/node": "^20.6.5", "@types/node": "^18.0.0",
"@types/react": "^18.2.22", "@types/react": "^18.0.24",
"@types/react-dom": "^18.2.7", "@types/react-dom": "^18.0.0",
"astro": "^4.0.3", "astro": "^2.1.3",
"preact": "^10.17.1", "preact": "^10.7.3",
"react": "^18.2.0", "react": "^18.1.0",
"react-dom": "^18.2.0" "react-dom": "^18.1.0"
}, },
"description": "```bash npm create astro@latest -- --template docs ```", "description": "```bash npm create astro@latest -- --template docs ```",
"main": "index.js", "main": "index.js",
@ -36,20 +36,20 @@
"type": "git", "type": "git",
"url": "git+https://github.com/astro-reactive/astro-reactive.git" "url": "git+https://github.com/astro-reactive/astro-reactive.git"
}, },
"author": "astro-reactive", "author": "",
"license": "ISC", "license": "ISC",
"bugs": { "bugs": {
"url": "https://github.com/astro-reactive/astro-reactive/issues" "url": "https://github.com/astro-reactive/astro-reactive/issues"
}, },
"homepage": "https://astro-reactive.js.org", "homepage": "https://github.com/astro-reactive/astro-reactive#readme",
"devDependencies": { "devDependencies": {
"@astro-reactive/eslint-config-custom": "*", "@astro-reactive/eslint-config-custom": "*",
"@astro-reactive/tsconfig": "*", "@astro-reactive/tsconfig": "*",
"@types/eslint": "^8.44.3", "@types/eslint": "^8.4.10",
"@types/prettier": "^2.7.3", "@types/prettier": "^2.7.2",
"eslint": "^8.50.0", "eslint": "^8.31.0",
"prettier": "^3.0.3", "prettier": "^2.8.3",
"prettier-plugin-astro": "^0.12.0", "prettier-plugin-astro": "^0.7.2",
"rimraf": "^3.0.2" "rimraf": "^3.0.2"
} }
} }

3
apps/docs/src/components/HeadSEO.astro
View file

@ -1,6 +1,5 @@
--- ---
import { SITE, OPEN_GRAPH } from '../config'; import { SITE, OPEN_GRAPH, Frontmatter } from '../config';
import type { Frontmatter } from '../config';
export interface Props { export interface Props {
frontmatter: Frontmatter; frontmatter: Frontmatter;

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

@ -50,8 +50,8 @@ We will also make this clear in our library documentation as we see them.
| 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/CHANGELOG.md) | a dynamic form which can be modified programmatically | | [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/CHANGELOG.md) | validators for editable fields | | [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 | | data-grid | 🛠 | a dynamic data grid of values |
| themes | 🛠 | easy-to-use, accessible, consistent cross-browser styles | | themes | 🛠 | easy-to-use, accessible, consistent cross-browser styles |
| viz | 🛠 | data visualization that emits and responds to events | | viz | 🛠 | data visualization that emits and responds to events |

2
apps/landing-page/.prettierrc.cjs
View file

@ -6,7 +6,7 @@ module.exports = {
tabWidth: 2, tabWidth: 2,
trailingComma: 'es5', trailingComma: 'es5',
useTabs: true, useTabs: true,
plugins: ['prettier-plugin-astro'], plugins: ['../../node_modules/prettier-plugin-astro'],
overrides: [ overrides: [
{ {
files: '*.astro', files: '*.astro',

25
apps/landing-page/CHANGELOG.md
View file

@ -1,25 +0,0 @@
# @astro-reactive/landing-page
## 1.0.1
### Patch Changes
- a1cc4b0: Update homepage to https://astro-reactive.js.org
## 1.0.0
### Major Changes
- 6e27739: Make the npm install script shorter
### Minor Changes
- 4d2a577: Support Astro 3
## 0.0.2
### Patch Changes
- fb11b73: Initial `create-astro-reactive` package
Update packages' meta information (author, homepage)
Upadte LICENSE owner info to `astro-reactive` organization

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

@ -1,7 +1,12 @@
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind'; import tailwind from '@astrojs/tailwind';
import { defineConfig } from 'astro/config';
export default defineConfig({ export default defineConfig({
site: 'https://astro-reactive.dev',
integrations: [tailwind()], integrations: [tailwind()],
site: 'https://astro-reactive.js.org', vite: {
ssr: {
external: ['svgo'],
},
},
}); });

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

@ -1,12 +1,12 @@
{ {
"name": "@astro-reactive/landing-page", "name": "@astro-reactive/landing-page",
"version": "1.0.1", "version": "0.0.1",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",
"start": "astro dev", "start": "astro dev",
"landing-page": "astro dev", "landing-page": "astro dev",
"check": "astro check", "check": "astro check && tsc --noEmit && astro build",
"build": "astro build", "build": "astro build",
"preview": "astro preview", "preview": "astro preview",
"astro": "astro", "astro": "astro",
@ -17,22 +17,22 @@
}, },
"devDependencies": { "devDependencies": {
"@astro-reactive/eslint-config-custom": "*", "@astro-reactive/eslint-config-custom": "*",
"@types/eslint": "^8.44.3", "@astrojs/tailwind": "^3.1.1",
"@types/eslint": "^8.4.10",
"@types/micromodal": "^0.3.3", "@types/micromodal": "^0.3.3",
"@types/prettier": "^3.0.0", "@types/prettier": "^2.7.2",
"astro": "^4.0.3", "astro": "^2.1.3",
"eslint": "^8.50.0", "astro-icon": "^0.8.0",
"prettier": "^3.0.3", "eslint": "^8.31.0",
"prettier-plugin-astro": "^0.12.0", "prettier": "^2.7.1",
"rimraf": "^5.0.1", "prettier-plugin-astro": "^0.7.2",
"rimraf": "^3.0.2",
"tailwindcss-fluid-type": "^2.0.3" "tailwindcss-fluid-type": "^2.0.3"
}, },
"dependencies": { "dependencies": {
"@astro-reactive/tsconfig": "*", "@astro-reactive/tsconfig": "*",
"@astrojs/tailwind": "^5.0.3",
"astro-iconify": "^1.2.0",
"micromodal": "^0.4.10", "micromodal": "^0.4.10",
"tailwindcss": "^3.3.6" "tailwindcss": "^3.1.8"
}, },
"description": "[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)", "description": "[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)",
"main": "index.js", "main": "index.js",
@ -40,10 +40,10 @@
"type": "git", "type": "git",
"url": "git+https://github.com/astro-reactive/astro-reactive.git" "url": "git+https://github.com/astro-reactive/astro-reactive.git"
}, },
"author": "astro-reactive", "author": "Ayo Ayco",
"license": "MIT", "license": "MIT",
"bugs": { "bugs": {
"url": "https://github.com/astro-reactive/astro-reactive/issues" "url": "https://github.com/astro-reactive/astro-reactive/issues"
}, },
"homepage": "https://astro-reactive.js.org" "homepage": "https://github.com/astro-reactive/astro-reactive#readme"
} }

65
apps/landing-page/src/components/astro-section.astro
View file

@ -1,39 +1,46 @@
--- ---
import { Icon } from 'astro-iconify'; import { Icon } from "astro-icon";
// import Starfield from "~/components/starfield.astro"; // import Starfield from "~/components/starfield.astro";
--- ---
<section class="h-screen flex flex-col px-10 astro relative"> <section class="h-screen flex flex-col px-10 astro relative">
<!--Starfield /--> <!--Starfield /-->
<div class="flex"> <div class="flex">
<div class="flex-1"> <div class="flex-1">
<h1 class="text-6xl font-extrabold gradient-text">Native Astro Components</h1> <h1 class="text-6xl font-extrabold gradient-text">
<p> Native Astro Components
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi facere, culpa corporis </h1>
aspernatur obcaecati autem fugiat excepturi, possimus mollitia est veritatis eaque officiis <p>
quia porro nesciunt esse unde consequuntur in nobis at earum dolore quod magni ipsam. Quo Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi facere,
necessitatibus modi sequi quas perspiciatis laborum enim culpa corporis aspernatur obcaecati autem fugiat excepturi, possimus
</p> mollitia est veritatis eaque officiis quia porro nesciunt esse unde
</div> consequuntur in nobis at earum dolore quod magni ipsam. Quo
<div class="flex-1 items-center justify-center md:flex hidden"> necessitatibus modi sequi quas perspiciatis laborum enim
<h1 class="sr-only">Astro Reactive</h1> </p>
</div> </div>
</div> <div class="flex-1 items-center justify-center md:flex hidden">
<div class="benefits flex flex-col md:flex-row justify-between space-y-4 md:space-y-0 my-10"> <h1 class="sr-only">Astro</h1>
<img src="https://via.placeholder.com/200" alt="benefit 1" /> <Icon name="logomark" class="astro-logo" />
<img src="https://via.placeholder.com/200" alt="benefit 2" /> <Icon name="wordmark" class="h-10" />
<img src="https://via.placeholder.com/200" alt="benefit 3" /> </div>
<img src="https://via.placeholder.com/200" alt="benefit 4" /> </div>
</div> <div
class="benefits flex flex-col md:flex-row justify-between space-y-4 md:space-y-0 my-10"
>
<img src="https://via.placeholder.com/200" alt="benefit 1" />
<img src="https://via.placeholder.com/200" alt="benefit 2" />
<img src="https://via.placeholder.com/200" alt="benefit 3" />
<img src="https://via.placeholder.com/200" alt="benefit 4" />
</div>
</section> </section>
<style> <style>
.astro { .astro {
padding-top: 7rem; padding-top: 7rem;
} }
.astro-logo { .astro-logo {
width: 10rem; width: 10rem;
height: 10rem; height: 10rem;
} }
</style> </style>

175
apps/landing-page/src/components/copynpm.astro
View file

@ -1,110 +1,107 @@
--- ---
import { Icon } from 'astro-iconify'; import { Icon } from "astro-icon";
--- ---
<div <div
id="toast-success" id="toast-success"
class="items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 flex transition" class="items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 flex transition"
role="alert" role="alert"
> >
<div <div
class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200" class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200"
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
class="w-5 h-5" class="w-5 h-5"
fill="currentColor" fill="currentColor"
viewBox="0 0 20 20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
><path ><path
fill-rule="evenodd" fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"></path> clip-rule="evenodd"></path>
</svg> </svg>
<span class="sr-only">Check icon</span> <span class="sr-only">Check icon</span>
</div> </div>
<div class="ml-3 text-sm font-normal">Copied to clipboard!</div> <div class="ml-3 text-sm font-normal">Copied to clipboard!</div>
<button <button
type="button" type="button"
class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
id="toast-close-btn" id="toast-close-btn"
aria-label="Close" aria-label="Close"
> >
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<svg <svg
aria-hidden="true" aria-hidden="true"
class="w-5 h-5" class="w-5 h-5"
fill="currentColor" fill="currentColor"
viewBox="0 0 20 20" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
><path ><path
fill-rule="evenodd" fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"></path> clip-rule="evenodd"></path>
</svg> </svg>
</button> </button>
</div> </div>
<button <button
class="copy-btn flex items-center w-4/5 mt-3 justify-center max-w-xs astro-md:w-1/2 astro-lg:w-sm astro-lg:mt-0 astro-lg:ml-3" class="copy-btn flex items-center w-4/5 mt-3 justify-center astro-md:w-1/2 astro-lg:w-[28%] astro-lg:mt-0 astro-lg:ml-3 max-w-md"
id="copy-command-button" id="copy-command-button"
> >
<span id="command">&gt; npm install @astro-reactive/form</span> <span id="command"
<Icon name="mdi:content-copy" width="30px" height="30px" /> >npm install @astro-reactive/form @astro-reactive/validator</span
>
<Icon name="mdi:content-copy" width="40px" height="40px" />
</button> </button>
<style> <style>
.copy-btn { .copy-btn {
/* max-width: 50%; */ /* max-width: 50%; */
color: #fff; color: #fff;
background-color: #2f2f2f; background-color: #2f2f2f;
border-radius: 4px; border-radius: 4px;
padding: 6px 16px; padding: 6px 16px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out;
} }
span#command { .copy-btn > span {
margin-right: 1rem; white-space: nowrap;
padding: 0.5rem 0; overflow-x: hidden;
} text-overflow: ellipsis;
}
.copy-btn > span { .copy-btn:hover {
white-space: nowrap; background-color: #3f3f3f;
overflow-x: hidden; }
text-overflow: ellipsis;
}
.copy-btn:hover { #toast-success {
background-color: #3f3f3f; position: fixed;
} bottom: 0;
left: 50%;
#toast-success { transform: translateX(-50%) translateY(100%);
position: fixed; opacity: 0;
bottom: 0; z-index: 999;
left: 50%; }
transform: translateX(-50%) translateY(100%);
opacity: 0;
z-index: 999;
}
</style> </style>
<script> <script>
const copyCommandButton = document.getElementById('copy-command-button'); const copyCommandButton = document.getElementById("copy-command-button");
const commandText = document.getElementById('command').innerText; const commandText = document.getElementById("command").innerText;
const toastSuccess = document.getElementById('toast-success'); const toastSuccess = document.getElementById("toast-success");
const toastClose = document.getElementById('toast-close-btn'); const toastClose = document.getElementById("toast-close-btn");
copyCommandButton?.addEventListener('click', () => { copyCommandButton?.addEventListener("click", () => {
toastSuccess.style.transform = 'translateX(-50%) translateY(0)'; toastSuccess.style.transform = "translateX(-50%) translateY(0)";
toastSuccess.style.opacity = '1'; toastSuccess.style.opacity = "1";
navigator.clipboard.writeText(commandText); navigator.clipboard.writeText(commandText);
}); });
toastClose?.addEventListener('click', () => { toastClose?.addEventListener("click", () => {
toastSuccess.style.transform = 'translateX(-50%) translateY(100%)'; toastSuccess.style.transform = "translateX(-50%) translateY(100%)";
toastSuccess.style.opacity = '0'; toastSuccess.style.opacity = "0";
}); });
</script> </script>

5
apps/landing-page/src/components/header.astro
View file

@ -1,5 +1,5 @@
--- ---
import { Icon } from 'astro-iconify'; import { Icon } from 'astro-icon';
// import ThemeSwitcher from "~/components/theme-switcher.astro"; // import ThemeSwitcher from "~/components/theme-switcher.astro";
const socials = [ const socials = [
@ -57,6 +57,9 @@ const socials = [
<Icon pack="mdi" name="close" class="h-8" /> <Icon pack="mdi" name="close" class="h-8" />
</button> </button>
</header> </header>
<div class="flex justify-center">
<Icon name="logomark" class="h-16" />
</div>
</div> </div>
</div> </div>
</div> </div>

4
apps/landing-page/src/components/splash.astro
View file

@ -1,5 +1,5 @@
--- ---
import { Icon } from 'astro-iconify'; import { Icon } from 'astro-icon';
import Copynpm from '~/components/copynpm.astro'; import Copynpm from '~/components/copynpm.astro';
--- ---
@ -15,7 +15,7 @@ import Copynpm from '~/components/copynpm.astro';
class="mt-8 flex justify-center flex-col items-center astro-lg:flex-row astro-lg:justify-center" class="mt-8 flex justify-center flex-col items-center astro-lg:flex-row astro-lg:justify-center"
> >
<a <a
href="https://docs.astro-reactive.js.org/en/api/form/form-component/" href="https://docs.astro-reactive.dev/en/api/form/form-component/"
class="flex items-center w-4/5 astro-md:w-1/2 justify-center bg-blue-500 hover:bg-blue-400 hover:text-white text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded transition-colors astro-lg:w-auto" class="flex items-center w-4/5 astro-md:w-1/2 justify-center bg-blue-500 hover:bg-blue-400 hover:text-white text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded transition-colors astro-lg:w-auto"
> >
<span class="pr-2">Get Started</span> <span class="pr-2">Get Started</span>

156
apps/landing-page/src/components/starfield.astro
View file

@ -1,97 +1,97 @@
<div id="starfield" class="absolute -z-10 inset-0"> <div id="starfield" class="absolute -z-10 inset-0">
<canvas id="starfield-canvas"></canvas> <canvas id="starfield-canvas"></canvas>
</div> </div>
<script> <script>
const COUNT = 100; const COUNT = 800;
const SPEED = 0.07; const SPEED = 0.3;
class Star { class Star {
x: number; x: number;
y: number; y: number;
z: number; z: number;
xPrev: number; xPrev: number;
yPrev: number; yPrev: number;
constructor(x = 0, y = 0, z = 0) { constructor(x = 0, y = 0, z = 0) {
this.x = x; this.x = x;
this.y = y; this.y = y;
this.z = z; this.z = z;
this.xPrev = x; this.xPrev = x;
this.yPrev = y; this.yPrev = y;
} }
update(width: number, height: number, speed: number) { update(width: number, height: number, speed: number) {
this.xPrev = this.x; this.xPrev = this.x;
this.yPrev = this.y; this.yPrev = this.y;
this.z += speed * 0.0675; this.z += speed * 0.0675;
this.x += this.x * (speed * 0.0225) * this.z; this.x += this.x * (speed * 0.0225) * this.z;
this.y += this.y * (speed * 0.0225) * this.z; this.y += this.y * (speed * 0.0225) * this.z;
if ( if (
this.x > width / 2 || this.x > width / 2 ||
this.x < -width / 2 || this.x < -width / 2 ||
this.y > height / 2 || this.y > height / 2 ||
this.y < -height / 2 this.y < -height / 2
) { ) {
this.x = Math.random() * width - width / 2; this.x = Math.random() * width - width / 2;
this.y = Math.random() * height - height / 2; this.y = Math.random() * height - height / 2;
this.xPrev = this.x; this.xPrev = this.x;
this.yPrev = this.y; this.yPrev = this.y;
this.z = 0; this.z = 0;
} }
} }
draw(ctx: CanvasRenderingContext2D) { draw(ctx: CanvasRenderingContext2D) {
ctx.lineWidth = this.z; ctx.lineWidth = this.z;
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(this.x, this.y); ctx.moveTo(this.x, this.y);
ctx.lineTo(this.xPrev, this.yPrev); ctx.lineTo(this.xPrev, this.yPrev);
ctx.stroke(); ctx.stroke();
} }
} }
const stars = Array.from({ length: COUNT }, () => new Star(0, 0, 0)); const stars = Array.from({ length: COUNT }, () => new Star(0, 0, 0));
let rafId = 0; let rafId = 0;
const canvas: HTMLCanvasElement = document.querySelector('#starfield-canvas'); const canvas: HTMLCanvasElement = document.querySelector("#starfield-canvas");
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext("2d");
const container = document.querySelector('#starfield'); const container = document.querySelector("#starfield");
const resizeObserver = new ResizeObserver(setup); const resizeObserver = new ResizeObserver(setup);
resizeObserver.observe(container); resizeObserver.observe(container);
function setup() { function setup() {
rafId > 0 && cancelAnimationFrame(rafId); rafId > 0 && cancelAnimationFrame(rafId);
const { clientWidth: width, clientHeight: height } = container; const { clientWidth: width, clientHeight: height } = container;
const dpr = window.devicePixelRatio || 1; const dpr = window.devicePixelRatio || 1;
canvas.width = width * dpr; canvas.width = width * dpr;
canvas.height = height * dpr; canvas.height = height * dpr;
canvas.style.width = `${width}px`; canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`; canvas.style.height = `${height}px`;
ctx.scale(dpr, dpr); ctx.scale(dpr, dpr);
for (const star of stars) { for (const star of stars) {
star.x = Math.random() * width - width / 2; star.x = Math.random() * width - width / 2;
star.y = Math.random() * height - height / 2; star.y = Math.random() * height - height / 2;
star.z = 0; star.z = 0;
} }
ctx.translate(width / 2, height / 2); ctx.translate(width / 2, height / 2);
ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'; ctx.fillStyle = "rgba(0, 0, 0, 0.4)";
ctx.strokeStyle = 'white'; ctx.strokeStyle = "white";
rafId = requestAnimationFrame(frame); rafId = requestAnimationFrame(frame);
} }
function frame() { function frame() {
const { clientWidth: width, clientHeight: height } = container; const { clientWidth: width, clientHeight: height } = container;
for (const star of stars) { for (const star of stars) {
star.update(width, height, SPEED); star.update(width, height, SPEED);
star.draw(ctx); star.draw(ctx);
} }
ctx.fillRect(-width / 2, -height / 2, width, height); ctx.fillRect(-width / 2, -height / 2, width, height);
rafId = requestAnimationFrame(frame); rafId = requestAnimationFrame(frame);
} }
</script> </script>

2
apps/landing-page/src/components/theme-switcher.astro
View file

@ -1,5 +1,5 @@
--- ---
import { Icon } from "astro-iconify"; import { Icon } from "astro-icon";
--- ---
<!-- <!--

149
apps/landing-page/src/pages/index.astro
View file

@ -1,87 +1,92 @@
--- ---
import '~/styles/index.css'; import "~/styles/index.css";
import Header from '~/components/header.astro'; import Header from "~/components/header.astro";
// import Icon from "astro-iconify"; // import Icon from "astro-icon";
import Splash from '~/components/splash.astro'; import Splash from "~/components/splash.astro";
// import AstroSection from "~/sections/astro-section.astro"; // import AstroSection from "~/sections/astro-section.astro";
import Starfield from '~/components/starfield.astro'; import Starfield from "~/components/starfield.astro";
const { site } = Astro; const { site } = Astro;
const image = new URL('social.jpg', site); const image = new URL("social.jpg", site);
const description = const description =
'Library of components and utilities for building reactive user interfaces with Astro'; "Library of components and utilities for building reactive user interfaces with Astro";
--- ---
<html lang="en" class="h-full motion-safe:scroll-smooth" data-theme="dark"> <html lang="en" class="h-full motion-safe:scroll-smooth" data-theme="dark">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" href="/favicon.ico" sizes="any" /> <link rel="icon" href="/favicon.ico" sizes="any" />
<title>Astro Reactive | {description} 🚀</title> <title>Astro Reactive | {description} 🚀</title>
<meta name="description" content={description} /> <meta name="description" content={description} />
<!-- fonts --> <!-- fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <link
rel="preload" rel="preload"
as="style" as="style"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
/> />
<link <link
rel="stylesheet" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
media="print" media="print"
onload="th onload="this.media='all'"
is.media=' a ll'" />
/> <noscript>
<noscript> <link
<link rel="stylesheet"
rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap" />
/> </noscript>
</noscript>
<!-- social media --> <!-- social media -->
<meta property="og:title" content="Astro" /> <meta property="og:title" content="Astro" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:description" content={description} /> <meta property="og:description" content={description} />
<meta property="og:image" content={image} /> <meta property="og:image" content={image} />
<meta property="og:url" content={site} /> <meta property="og:url" content={site} />
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<!-- initialize theme --> <!-- initialize theme -->
<script is:inline> <script is:inline>
document.documentElement.dataset.theme = 'dark'; document.documentElement.dataset.theme = "dark";
// const themeSaved = localStorage.getItem("theme"); // const themeSaved = localStorage.getItem("theme");
// const forceTheme = "dark"; // const forceTheme = "dark";
// if (themeSaved) { // if (themeSaved) {
// document.documentElement.dataset.theme = themeSaved; // document.documentElement.dataset.theme = themeSaved;
// } else { // } else {
// // const prefersDark = window.matchMedia( // // const prefersDark = window.matchMedia(
// // "(prefers-color-scheme: dark)" // // "(prefers-color-scheme: dark)"
// // ).matches; // // ).matches;
// document.documentElement.dataset.theme = forceTheme; // prefersDark ? "dark" : "light"; // document.documentElement.dataset.theme = forceTheme; // prefersDark ? "dark" : "light";
// } // }
// window // window
// .matchMedia("(prefers-color-scheme: dark)") // .matchMedia("(prefers-color-scheme: dark)")
// ?.addEventListener("change", (event) => { // ?.addEventListener("change", (event) => {
// if (!localStorage.getItem("theme")) { // if (!localStorage.getItem("theme")) {
// document.documentElement.dataset.theme = event.matches // document.documentElement.dataset.theme = event.matches
// ? "dark" // ? "dark"
// : "light"; // : "light";
// } // }
// }); // });
</script> </script>
</head> </head>
<body <body
class="h-full overflow-x-hidden text-base bg-default text-default selection:bg-secondary selection:text-white" class="h-full overflow-x-hidden text-base bg-default text-default selection:bg-secondary selection:text-white"
> >
<Starfield /> <Starfield />
<Header /> <Header />
<Splash /> <Splash />
<!--AstroSection /--> <!--AstroSection /-->
</body>
<!-- for Mastodon verification -->
<a rel="me" href="https://fosstodon.org/@ayo" style="display:none">Mastodon</a>
<a rel="me" href="https://social.ayco.io/@ayo" style="display:none">Mastodon</a>
</body>
</html> </html>

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

@ -1,4 +1,5 @@
import * as defaultTheme from 'tailwindcss/defaultTheme'; // eslint-disable-next-line @typescript-eslint/no-var-requires
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = { module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}'], content: ['./src/**/*.{astro,html,js,jsx,svelte,ts,tsx,vue}'],

2
configs/eslint-config/index.cjs
View file

@ -4,7 +4,7 @@ module.exports = {
node: true, node: true,
}, },
parser: "@typescript-eslint/parser", parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint", "prettier",], plugins: ["@typescript-eslint", "prettier"],
extends: [ extends: [
"eslint:recommended", "eslint:recommended",
"plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/recommended",

15
configs/eslint-config/package.json
View file

@ -2,13 +2,12 @@
"name": "@astro-reactive/eslint-config-custom", "name": "@astro-reactive/eslint-config-custom",
"main": "./index.cjs", "main": "./index.cjs",
"dependencies": { "dependencies": {
"@types/eslint": "^8.44.3", "@types/eslint": "^8.4.10",
"@typescript-eslint/eslint-plugin": "^6.7.2", "@typescript-eslint/eslint-plugin": "^5.48.1",
"@typescript-eslint/parser": "^6.7.2", "@typescript-eslint/parser": "^5.48.1",
"eslint": "^8.50.0", "eslint": "^8.31.0",
"eslint-config-prettier": "^9.0.0", "eslint-config-prettier": "^8.6.0",
"eslint-plugin-prettier": "^5.0.0", "eslint-plugin-prettier": "^4.2.1",
"prettier": "^3.0.3", "prettier-plugin-astro": "^0.7.2"
"prettier-plugin-astro": "^0.12.0"
} }
} }

5
configs/tsconfig/package.json
View file

@ -1,6 +1,3 @@
{ {
"name": "@astro-reactive/tsconfig", "name": "@astro-reactive/tsconfig"
"dependencies": {
"astro": "^3.1.3"
}
} }

27010
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

27
package.json
View file

@ -3,8 +3,12 @@
"description": "Astro components for building reactive user interfaces 🚀", "description": "Astro components for building reactive user interfaces 🚀",
"version": "0.0.0", "version": "0.0.0",
"repository": "https://github.com/astro-reactive/astro-reactive", "repository": "https://github.com/astro-reactive/astro-reactive",
"homepage": "https://astro-reactive.js.org", "homepage": "https://github.com/astro-reactive/astro-reactive#readme",
"author": "astro-reactive", "author": {
"name": "Ayo Ayco",
"email": "ayo@ayco.io",
"url": "https://ayco.io"
},
"type": "module", "type": "module",
"exports": { "exports": {
".": "./index.ts" ".": "./index.ts"
@ -20,9 +24,11 @@
"build": "turbo run build", "build": "turbo run build",
"check": "turbo run check", "check": "turbo run check",
"clean": "turbo clean", "clean": "turbo clean",
"simulate:ci": "npm run check && npm run build && npm run test && npm run lint",
"test:watch": "turbo run test:watch", "test:watch": "turbo run test:watch",
"test:coverage": "turbo run test:coverage", "test:coverage": "turbo run test:coverage",
"patch": "npm version patch -w",
"minor": "npm version minor -w",
"major": "npm version major -w",
"publish": "turbo run lint build check test && npm publish --access public -w", "publish": "turbo run lint build check test && npm publish --access public -w",
"release": "node ./packages/pr-updater.js" "release": "node ./packages/pr-updater.js"
}, },
@ -33,14 +39,15 @@
"configs/*" "configs/*"
], ],
"dependencies": { "dependencies": {
"@changesets/cli": "^2.26.2", "@changesets/cli": "^2.26.0",
"prettier": "^3.0.3", "prettier-plugin-astro": "^0.7.0",
"prettier-plugin-astro": "^0.12.0", "prompt-sync": "^4.2.0",
"prompt-sync": "^4.2.0" "short-unique-id": "^4.4.4"
}, },
"devDependencies": { "devDependencies": {
"eslint-config-turbo": "^1.10.14", "@vitest/coverage-istanbul": "^0.28.3",
"rimraf": "^5.0.1", "eslint-config-turbo": "^0.0.4",
"turbo": "^1.10.14" "rimraf": "^3.0.2",
"turbo": "^1.7.1"
} }
} }

65
packages/common/CHANGELOG.md
View file

@ -1,65 +0,0 @@
# @astro-reactive/common
## 0.2.1
### Patch Changes
- a1cc4b0: Update homepage to https://astro-reactive.js.org
## 0.2.0
### Minor Changes
- 4d2a577: Support Astro 3
## 0.1.9
### Patch Changes
- fb11b73: Initial `create-astro-reactive` package
Update packages' meta information (author, homepage)
Upadte LICENSE owner info to `astro-reactive` organization
## 0.1.8
### Patch Changes
- 414a0bd: Fix dependencies for Astro v2+ support
## v0.1.6
- updates on how packages share files
## v0.1.5
- fix form method type to accept: 'get', 'post', 'dialog'
## v0.1.4
- form validation hook property `triggerValidationOn`
- form properties `action` and `method`
## v0.1.2
- make `Checkbox.checked` optional
## v0.1.1
- fix broken `ControlConfig`
## 0.1.0
- deprecate `labelPosition` prop
- TextArea and Dropdown types
## 0.0.3
- update package exports and files
## 0.0.2
- expose types on top-level index
## 0.0.1
- initialize @astro-reactive/common package

25
packages/common/RELEASE.md Normal file
View file

@ -0,0 +1,25 @@
### v0.1.5
- fix form method type to accept: 'get', 'post', 'dialog'
### v0.1.4
- form validation hook property `triggerValidationOn`
- form properties `action` and `method`
### v0.1.2
- make `Checkbox.checked` optional
### v0.1.1
- fix broken `ControlConfig`
## 0.1.0
- deprecate `labelPosition` prop
- TextArea and Dropdown types
### 0.0.3
- update package exports and files
### 0.0.2
- expose types on top-level index
### 0.0.1
- initialize @astro-reactive/common package

14
packages/common/package.json
View file

@ -1,14 +1,15 @@
{ {
"name": "@astro-reactive/common", "name": "@astro-reactive/common",
"version": "0.3.0", "version": "0.1.5",
"description": "Common code for Astro Reactive Packages", "description": "Common code for Astro Reactive Packages",
"main": "index.ts", "main": "index.ts",
"types": "./types/index.ts", "types": "./types/index.ts",
"type": "module",
"devDependencies": { "devDependencies": {
"@astro-reactive/tsconfig": "*",
"rimraf": "^3.0.2" "rimraf": "^3.0.2"
}, },
"dependencies": {
"@astro-reactive/tsconfig": "*"
},
"exports": { "exports": {
".": "./index.ts" ".": "./index.ts"
}, },
@ -24,16 +25,13 @@
"type": "git", "type": "git",
"url": "git+https://github.com/astro-reactive/astro-reactive.git" "url": "git+https://github.com/astro-reactive/astro-reactive.git"
}, },
"author": "astro-reactive", "author": "Ayo Ayco",
"license": "MIT", "license": "MIT",
"bugs": { "bugs": {
"url": "https://github.com/astro-reactive/astro-reactive/issues" "url": "https://github.com/astro-reactive/astro-reactive/issues"
}, },
"homepage": "https://astro-reactive.js.org", "homepage": "https://github.com/astro-reactive/astro-reactive#readme",
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
},
"dependencies": {
"astro": "^4.0.3"
} }
} }

21
packages/create-astro-reactive/CHANGELOG.md
View file

@ -1,21 +0,0 @@
# create-astro-reactive
## 0.0.4
### Patch Changes
- a1cc4b0: Update homepage to https://astro-reactive.js.org
## 0.0.3
### Patch Changes
- 334a4c5: - Update documentation links to release notes
## 0.0.2
### Patch Changes
- fb11b73: Initial `create-astro-reactive` package
Update packages' meta information (author, homepage)
Upadte LICENSE owner info to `astro-reactive` organization

36
packages/create-astro-reactive/README.md
View file

@ -1,36 +0,0 @@
<p align="center">
<img src="https://raw.githubusercontent.com/astro-reactive/astro-reactive/main/.github/assets/logo/min-banner.png" alt="Astro Reactive Library Logo">
<br />
<strong>Create Astro Reactive</strong>
<em>⚠️ WORK IN PROGRESS. This does not do anything yet.</em>
<br />
Create a new astro-reactive app
<br />
<br />
<a href="https://www.npmjs.com/package/@astro-reactive/create-astro-reactive">
<img src="https://img.shields.io/npm/v/@astro-reactive/create-astro-reactive" alt="Package information: NPM version" />
</a>
<a href="https://www.npmjs.com/package/@astro-reactive/create-astro-reactive">
<img src="https://img.shields.io/npm/l/@astro-reactive/create-astro-reactive" alt="Package information: NPM license" />
</a>
<a href="https://www.npmjs.com/package/@astro-reactive/create-astro-reactive">
<img src="https://img.shields.io/npm/dt/@astro-reactive/create-astro-reactive" alt="Package information: NPM downloads" />
</a>
<a href="https://www.npmjs.com/package/@astro-reactive/create-astro-reactive">
<img src="https://img.shields.io/librariesio/release/npm/@astro-reactive/create-astro-reactive" alt="Package information: NPM dependencies status" />
</a>
<br />
<br />
</p>
# Create a new Astro Reactive project
```
npm create astro-reactive@latest
```
# We are opensource!
_All [contributions](https://github.com/astro-reactive/astro-reactive/blob/main/CONTRIBUTING.md) are welcome. Let's make the fastest web forms powered by Astro._
👉 _This package is a work in progress. See the [change log](https://github.com/astro-reactive/astro-reactive/blob/main/packages/create-astro-reactive/CHANGELOG.md)._

1
packages/create-astro-reactive/index.js
View file

@ -1 +0,0 @@
console.log("Create a new astro-reactive project");

20
packages/create-astro-reactive/package.json
View file

@ -1,20 +0,0 @@
{
"name": "create-astro-reactive",
"version": "0.0.4",
"description": "Create a new astro-reactive app",
"main": "index.js",
"scripts": {},
"repository": {
"type": "git",
"url": "git+https://github.com/astro-reactive/astro-reactive.git"
},
"author": "astro-reactive",
"license": "MIT",
"bugs": {
"url": "https://github.com/astro-reactive/astro-reactive/issues"
},
"homepage": "https://astro-reactive.js.org",
"dependencies": {
"astro": "^4.0.3"
}
}

2
packages/form/.prettierrc.cjs
View file

@ -6,7 +6,7 @@ module.exports = {
tabWidth: 2, tabWidth: 2,
trailingComma: 'es5', trailingComma: 'es5',
useTabs: true, useTabs: true,
plugins: ['prettier-plugin-astro'], plugins: ['../../node_modules/prettier-plugin-astro'],
overrides: [ overrides: [
{ {
files: '*.astro', files: '*.astro',

4
packages/form/README.md
View file

@ -85,7 +85,7 @@ userNameControl?.setValue("RAMOOOON");
/> />
``` ```
👉 For more examples and explanations of the component properties, see the [Form API Docs](https://docs.astro-reactive.js.org/en/api/form/form-component/). 👉 For more examples and explanations of the component properties, see the [Form API Docs](https://docs.astro-reactive.dev/en/api/form/form-component/).
# Screenshots # Screenshots
Result of example above: Result of example above:
@ -105,5 +105,5 @@ This Form component is designed to work with [Astro Reactive Validator](https://
👉 _All [contributions](https://github.com/astro-reactive/astro-reactive/blob/main/CONTRIBUTING.md) are welcome. Let's make the fastest web forms powered by Astro._ 👉 _All [contributions](https://github.com/astro-reactive/astro-reactive/blob/main/CONTRIBUTING.md) are welcome. Let's make the fastest web forms powered by Astro._
👉 _This package is a work in progress. See the [change log](https://github.com/astro-reactive/astro-reactive/blob/main/packages/form/CHANGELOG.md)._ 👉 _This package is a work in progress. See the [change log](https://github.com/astro-reactive/astro-reactive/blob/main/packages/form/RELEASE.md)._

116
packages/form/CHANGELOG.md → packages/form/RELEASE.md
View file

@ -1,142 +1,63 @@
# @astro-reactive/form ### v0.6.7
## 0.9.1
### Patch Changes
- a1cc4b0: Update homepage to https://astro-reactive.js.org
- Updated dependencies [a1cc4b0]
- @astro-reactive/validator@0.4.1
- @astro-reactive/common@0.2.1
## 0.9.0
### Minor Changes
- 4d2a577: Support Astro 3
### Patch Changes
- Updated dependencies [4d2a577]
- @astro-reactive/validator@0.4.0
- @astro-reactive/common@0.2.0
## 0.8.1
### Patch Changes
- 334a4c5: - Update documentation links to release notes
- Updated dependencies [334a4c5]
- @astro-reactive/validator@0.3.4
## 0.8.0
### Minor Changes
- 30de516: Change the default of `validateOnLoad` property to true, making server-side rendering validation the default behavior for the `Form` component.
Update the demo `index.astro` page by removing the `validateOnLoad` property/directive on the example which should still result to server-side rendered validation results.
### Patch Changes
- fb11b73: Initial `create-astro-reactive` package
Update packages' meta information (author, homepage)
Upadte LICENSE owner info to `astro-reactive` organization
- Updated dependencies [fb11b73]
- @astro-reactive/validator@0.3.3
- @astro-reactive/common@0.1.9
## 0.7.2
### Patch Changes
- 414a0bd: Fix dependencies for Astro v2+ support
- Updated dependencies [414a0bd]
- @astro-reactive/validator@0.3.2
- @astro-reactive/common@0.1.8
## v0.7.0
- project chores: updates on how the packages share common files, initial codecov set up
- documentation updates: Readme examples and API docs update
- support for Astro v2
## v0.6.7
- fix form method type to accept: 'get', 'post', 'dialog' - fix form method type to accept: 'get', 'post', 'dialog'
## v0.6.6 ### v0.6.6
- implement validation hooks with form's `triggerValidationOn` prop - implement validation hooks with form's `triggerValidationOn` prop
- types and intellisense improvements - types and intellisense improvements
- validation support for RadioGroup - validation support for RadioGroup
- form's `action` and `method` props - form's `action` and `method` props
## v0.6.5 ### v0.6.5
- fix deps - fix deps
## v0.6.4 ### v0.6.4
- Form component's new `validateOnLoad` property - Form component's new `validateOnLoad` property
- FormGroup.setValue() method to set values for the whole form - FormGroup.setValue() method to set values for the whole form
- fix for Radio Group's inputs not having unique IDs - fix for Radio Group's inputs not having unique IDs
## v0.6.3 ### v0.6.3
- make `Checkbox.checked` optional - make `Checkbox.checked` optional
## v0.6.2 ### v0.6.2
- fix broken `ControlConfig` - fix broken `ControlConfig`
## v0.6.1 ### v0.6.1
- fix wrong dependency version - fix wrong dependency version
## v0.6.0 ## v0.6.0
- deprecate `labelPosition` prop - deprecate `labelPosition` prop
- implement TextArea control - implement TextArea control
- add method `setValidators` to FormControl - add method `setValidators` to FormControl
- implement `readOnly` flag - implement `readOnly` flag
- implement Dropdown control - implement Dropdown control
## v0.5.1 - v0.5.2 ### v0.5.1 - v0.5.2
- use @astro-reactive/common - use @astro-reactive/common
## v0.5.1 ### v0.5.1
- fix for dynamic import of validator causing errors (breaks independence) - fix for dynamic import of validator causing errors (breaks independence)
## v0.5.0 ## v0.5.0
- server-rendered validation errors (when control was set with invalid value) - server-rendered validation errors (when control was set with invalid value)
- radio control accepts array of value or RadioOption - radio control accepts array of value or RadioOption
- added tests for form components - added tests for form components
## v0.4.5 ### v0.4.5
- update project documentations - update project documentations
## v0.4.4 ### v0.4.4
- `validators` property in ControlConfig to set validators for a control - `validators` property in ControlConfig to set validators for a control
## v0.4.1 ### v0.4.1
- set `showValidationHints` to true to show validation hints - set `showValidationHints` to true to show validation hints
## v0.3.0 ## v0.3.0
- new control configuration type `ControlConfig` - new control configuration type `ControlConfig`
## v0.2.7 ### v0.2.7
- updated project logo - updated project logo
## v0.2.6 ### v0.2.6
- support single `FormGroup` as input to the `Form` component - support single `FormGroup` as input to the `Form` component
- implement `Form` component input prop `theme` - implement `Form` component input prop `theme`
- add initial implementation of `FormControl` `isPristine` and `isValid` states - add initial implementation of `FormControl` `isPristine` and `isValid` states
@ -144,17 +65,14 @@
- implement the submitControl Form input prop - implement the submitControl Form input prop
- implement the FormControl placeholder attribute - implement the FormControl placeholder attribute
## v0.2.4 to v0.2.5 ### v0.2.4 to v0.2.5
- update package README - update package README
- update dependencies - update dependencies
## v0.2.2 ### v0.2.2
- initial light and dark mode scaffold - initial light and dark mode scaffold
- update package README - update package README
## v0.2.1 ### v0.2.1
- FormGroup.get(name) - returns the FormControl with matching name - FormGroup.get(name) - returns the FormControl with matching name
- FormControl.setValue(value) - sets the FormControl value - FormControl.setValue(value) - sets the FormControl value

14
packages/form/components/Form.astro
View file

@ -56,7 +56,7 @@ const {
formGroups = [], formGroups = [],
theme, theme,
showValidationHints = false, showValidationHints = false,
validateOnLoad = true, validateOnLoad = false,
readOnly = false, readOnly = false,
action = '', action = '',
method = 'get', method = 'get',
@ -72,18 +72,10 @@ const formId = Array.isArray(formGroups) ? uid() : formGroups?.id || null;
if (validateOnLoad) { if (validateOnLoad) {
if (Array.isArray(formGroups)) { if (Array.isArray(formGroups)) {
formGroups.forEach((group) => formGroups.forEach((group) =>
group.controls.forEach((control) => { group.controls.forEach((control) => control.setValidateOnLoad(validateOnLoad))
if ('setValidateOnLoad' in control) {
control.setValidateOnLoad(validateOnLoad);
}
})
); );
} else { } else {
formGroups.controls.forEach((control) => { formGroups.controls.forEach((control) => control.setValidateOnLoad(validateOnLoad));
if ('setValidateOnLoad' in control) {
control.setValidateOnLoad(validateOnLoad);
}
});
} }
} }
--- ---

9
packages/form/core/form-control.ts
View file

@ -50,8 +50,9 @@ export class FormControl {
/** /**
* Tracks the value and validation status of an individual form control. * Tracks the value and validation status of an individual form control.
* @param config - interface of a `FormControl`'s configuration. * @param config - interface of a `FormControl`'s configuration.
* @param validateOnLoad - determines if a control will be validated before rendering on the server. Defaults to `false`
*/ */
constructor(private config: ControlConfig) { constructor(private config: ControlConfig, validateOnLoad = false) {
const { const {
name, name,
type = 'text', type = 'text',
@ -82,6 +83,11 @@ export class FormControl {
this._rows = rows; this._rows = rows;
this._cols = cols; this._cols = cols;
} }
// TODO: implement independence
// form should try to import validator,
// but handle error when it's not installed
this.setValidateOnLoad(validateOnLoad);
} }
get id() { get id() {
@ -172,7 +178,6 @@ export class FormControl {
const valueStr: string = this._value?.toString() || ''; const valueStr: string = this._value?.toString() || '';
this._errors = this.validate(valueStr, this._validators); this._errors = this.validate(valueStr, this._validators);
} else { } else {
// give a console warning that the validator package needs to be installed
// if user did not install the validator, then errors should be empty // if user did not install the validator, then errors should be empty
this._errors = []; this._errors = [];
} }

27
packages/form/package.json
View file

@ -1,10 +1,14 @@
{ {
"name": "@astro-reactive/form", "name": "@astro-reactive/form",
"description": "The Reactive Form component for Astro 🔥", "description": "The Reactive Form component for Astro 🔥",
"version": "0.10.1", "version": "0.6.7",
"repository": "https://github.com/astro-reactive/astro-reactive", "repository": "https://github.com/astro-reactive/astro-reactive",
"homepage": "https://astro-reactive.js.org", "homepage": "https://docs.astro-reactive.dev/en/api/form/form-component/",
"author": "astro-reactive", "author": {
"name": "Ayo Ayco",
"email": "ayo@ayco.io",
"url": "https://ayco.io"
},
"type": "module", "type": "module",
"exports": { "exports": {
".": "./index.ts" ".": "./index.ts"
@ -26,31 +30,30 @@
"format": "prettier -w .", "format": "prettier -w .",
"lint": "eslint . --ext .ts,.js", "lint": "eslint . --ext .ts,.js",
"lint:fix": "eslint --fix . --ext .ts,.js", "lint:fix": "eslint --fix . --ext .ts,.js",
"check": "astro check", "check": "astro check && tsc --noEmit",
"clean": "rimraf node_modules .turbo dist" "clean": "rimraf node_modules .turbo dist"
}, },
"devDependencies": { "devDependencies": {
"@astro-reactive/eslint-config-custom": "*",
"@astro-reactive/tsconfig": "*",
"@types/eslint": "^8.4.6", "@types/eslint": "^8.4.6",
"@types/node": "^18.7.18", "@types/node": "^18.7.18",
"@types/prettier": "^2.7.0", "@types/prettier": "^2.7.0",
"@vitest/coverage-istanbul": "^0.34.5", "astro": "^2.1.3",
"astro": "^4.0.3",
"astro-component-tester": "^0.6.0", "astro-component-tester": "^0.6.0",
"eslint": "^8.23.1", "eslint": "^8.23.1",
"prettier": "^3.0.3", "prettier": "^2.7.1",
"prettier-plugin-astro": "^0.12.0", "prettier-plugin-astro": "^0.7.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"typescript": "^4.8.3", "typescript": "^4.8.3",
"vitest": "^0.34.5" "vitest": "^0.25.2"
}, },
"peerDependencies": { "peerDependencies": {
"astro": ">=4.0.3" "astro": "^2.1.3"
}, },
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@astro-reactive/common": "*", "@astro-reactive/common": "*",
"@astro-reactive/eslint-config-custom": "*",
"@astro-reactive/tsconfig": "*",
"@astro-reactive/validator": "*", "@astro-reactive/validator": "*",
"short-unique-id": "^4.4.4" "short-unique-id": "^4.4.4"
}, },

165
packages/pr-updater.js
View file

@ -1,114 +1,107 @@
import fs from "fs"; import fs from 'fs';
import { fileURLToPath } from "url"; import { fileURLToPath } from 'url';
import * as path from "path"; import * as path from 'path';
import promptSync from "prompt-sync"; import promptSync from 'prompt-sync';
const prompt = promptSync({ sigint: true }); const prompt = promptSync({sigint: true});
const __filename = fileURLToPath(import.meta.url); const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename); const __dirname = path.dirname(__filename);
function writeReleaseMD(releaseFile, featuresArr, fixesArr) { function writeReleaseMD(releaseFile, featuresArr, fixesArr) {
var formattedMessage = ""; var formattedMessage = "";
if (featuresArr.length != 0) { if (featuresArr.length != 0) {
formattedMessage += "Features"; formattedMessage += "Features";
for (var line of featuresArr) { for (var line of featuresArr) {
formattedMessage += "\n\t- " + line; formattedMessage += "\n\t- " + line;
}
formattedMessage += "\n\n";
} }
formattedMessage += "\n\n";
}
if (fixesArr.length != 0) { if (fixesArr.length != 0)
formattedMessage += "Fixes"; {
for (var line of fixesArr) { formattedMessage += "Fixes";
formattedMessage += "\n\t- " + line; for (var line of fixesArr) {
formattedMessage += "\n\t- " + line;
}
formattedMessage += "\n\n";
} }
formattedMessage += "\n\n";
}
//write file //write file
var oldRelease = fs.readFileSync(releaseFile); var oldRelease = fs.readFileSync(releaseFile);
var fd = fs.openSync(releaseFile, "w+"); var fd = fs.openSync(releaseFile, 'w+');
fs.writeSync(fd, formattedMessage, 0, formattedMessage.length, 0); fs.writeSync(fd, formattedMessage, 0, formattedMessage.length, 0);
fs.writeSync(fd, oldRelease, 0, oldRelease.length, formattedMessage.length); fs.writeSync(fd, oldRelease, 0, oldRelease.length, formattedMessage.length);
fs.close(fd); fs.close(fd);
} }
function main() { function main() {
console.log("Astro Reactive PR Release Updater (ctrl-c to exit)"); console.log("Astro Reactive PR Release Updater (ctrl-c to exit)");
var noChanged, feature, fix, breakExisting; var noChanged, feature, fix, breakExisting;
var featuresArr = []; var featuresArr = [];
var fixesArr = []; var fixesArr = [];
do { do {
console.log(`What package is changed? console.log(`What package is changed?
1. Common 1. Common
2. Form 2. Form
3. Validator`); 3. Validator`);
noChanged = prompt(": "); noChanged = prompt(": ");
} while ( } while (isNaN(noChanged) || parseInt(noChanged) < 1 || parseInt(noChanged) > 3);
isNaN(noChanged) ||
parseInt(noChanged) < 1 ||
parseInt(noChanged) > 3
);
do { do {
console.log("Description of feature (q to finish): "); console.log("Description of feature (q to finish): ");
feature = prompt(": "); feature = prompt(": ");
if (feature != "q") {
console.log("Will this code change break existing examples and/or demo applications? Y/N");
breakExisting = prompt(": ");
if (breakExisting == "Y" || breakExisting == "y") {
feature += " (BREAKING CHANGE)";
}
featuresArr.push(feature);
}
} while (feature != "q");
if (feature != "q") { do {
console.log( console.log("Description of fix (q to finish): ");
"Will this code change break existing examples and/or demo applications? Y/N" fix = prompt(": ");
);
breakExisting = prompt(": "); if (fix != "q") {
if (breakExisting == "Y" || breakExisting == "y") { console.log("Will this code change break existing examples and/or demo applications? Y/N");
feature += " (BREAKING CHANGE)"; breakExisting = prompt(": ");
} if (breakExisting == "Y" || breakExisting == "y") {
featuresArr.push(feature); fix += " (BREAKING CHANGE)";
}
fixesArr.push(fix);
}
} while (fix != "q");
switch (noChanged) {
case '1':
var releaseFile = path.resolve(__dirname, './common/RELEASE.md');
writeReleaseMD(releaseFile, featuresArr, fixesArr);
break;
case '2':
var releaseFile = path.resolve(__dirname, './form/RELEASE.md');
writeReleaseMD(releaseFile, featuresArr, fixesArr);
break;
case '3':
var releaseFile = path.resolve(__dirname, './validator/RELEASE.md');
writeReleaseMD(releaseFile, featuresArr, fixesArr);
break;
default:
console.log("Invalid package specified.");
} }
} while (feature != "q");
do {
console.log("Description of fix (q to finish): ");
fix = prompt(": ");
if (fix != "q") {
console.log(
"Will this code change break existing examples and/or demo applications? Y/N"
);
breakExisting = prompt(": ");
if (breakExisting == "Y" || breakExisting == "y") {
fix += " (BREAKING CHANGE)";
}
fixesArr.push(fix);
}
} while (fix != "q");
switch (noChanged) {
case "1":
var releaseFile = path.resolve(__dirname, "./common/CHANGELOG.md");
writeReleaseMD(releaseFile, featuresArr, fixesArr);
break;
case "2":
var releaseFile = path.resolve(__dirname, "./form/CHANGELOG.md");
writeReleaseMD(releaseFile, featuresArr, fixesArr);
break;
case "3":
var releaseFile = path.resolve(__dirname, "./validator/CHANGELOG.md");
writeReleaseMD(releaseFile, featuresArr, fixesArr);
break;
default:
console.log("Invalid package specified.");
}
} }
var continueScript; var continueScript;
do { do {
main(); main();
console.log("Do you want to update another package release? (Y to continue)"); console.log("Do you want to update another package release? (Y to continue)");
continueScript = prompt(": "); continueScript = prompt(": ");
} while (continueScript == "Y" || continueScript == "y"); } while (continueScript == 'Y' || continueScript == 'y');

2
packages/validator/.prettierrc.cjs
View file

@ -6,7 +6,7 @@ module.exports = {
tabWidth: 2, tabWidth: 2,
trailingComma: 'es5', trailingComma: 'es5',
useTabs: true, useTabs: true,
plugins: ['prettier-plugin-astro'], plugins: ['../../node_modules/prettier-plugin-astro'],
overrides: [ overrides: [
{ {
files: '*.astro', files: '*.astro',

104
packages/validator/CHANGELOG.md
View file

@ -1,104 +0,0 @@
# @astro-reactive/validator
## 0.4.1
### Patch Changes
- a1cc4b0: Update homepage to https://astro-reactive.js.org
- Updated dependencies [a1cc4b0]
- @astro-reactive/common@0.2.1
## 0.4.0
### Minor Changes
- 4d2a577: Support Astro 3
### Patch Changes
- Updated dependencies [4d2a577]
- @astro-reactive/common@0.2.0
## 0.3.4
### Patch Changes
- 334a4c5: - Update documentation links to release notes
## 0.3.3
### Patch Changes
- fb11b73: Initial `create-astro-reactive` package
Update packages' meta information (author, homepage)
Upadte LICENSE owner info to `astro-reactive` organization
- Updated dependencies [fb11b73]
- @astro-reactive/common@0.1.9
## 0.3.2
### Patch Changes
- 414a0bd: Fix dependencies for Astro v2+ support
- Updated dependencies [414a0bd]
- @astro-reactive/common@0.1.8
## v0.3.0
- project chores: updates on how the packages share common files, initial codecov set up
- documentation updates: Readme examples and API docs update
- support for Astro v2
## v0.2.7
- support form method type to accept: 'get', 'post', 'dialog'
## v0.2.6
- implement validation hooks with form's `triggerValidationOn` prop
- types and intellisense improvements
## v0.2.5
- fix deps
## v0.2.4
- Validation categories: Error, Warning, Info
## v0.2.3
- make `Checkbox.checked` optional
## v0.2.2
- fix broken `ControlConfig`
## v0.2.1
- fix wrong dependency version
## v0.2.0
- deprecate `labelPosition` prop
## v0.1.1
- use @astro-reactive/common
## v0.1.0
- support server-rendered validation for forms
## v0.0.4
- update project documentation
## v0.0.3
- update examples on the README
## v0.0.1
- Validators
- validator functions

4
packages/validator/README.md
View file

@ -80,7 +80,7 @@ form.controls.push(
--> -->
``` ```
👉 For more examples and explanations of the component properties, see the [Validators API Docs](https://docs.astro-reactive.js.org/en/api/validator/validators/). 👉 For more examples and explanations of the component properties, see the [Validators API Docs](https://docs.astro-reactive.dev/en/api/validator/validators/).
# Screenshots # Screenshots
@ -103,5 +103,5 @@ This validation library is designed to work with [Astro Reactive Form](https://w
👉 _All [contributions](https://github.com/astro-reactive/astro-reactive/blob/main/CONTRIBUTING.md) are welcome. Let's make the validation library for Astro._ 👉 _All [contributions](https://github.com/astro-reactive/astro-reactive/blob/main/CONTRIBUTING.md) are welcome. Let's make the validation library for Astro._
👉 _This package is a work in progress. See the [change log](https://github.com/astro-reactive/astro-reactive/blob/main/packages/validator/CHANGELOG.md)_. 👉 _This package is a work in progress. See the [change log](https://github.com/astro-reactive/astro-reactive/blob/main/packages/validator/RELEASE.md)_.

39
packages/validator/RELEASE.md Normal file
View file

@ -0,0 +1,39 @@
### v0.2.7
- support form method type to accept: 'get', 'post', 'dialog'
### v0.2.6
- implement validation hooks with form's `triggerValidationOn` prop
- types and intellisense improvements
### v0.2.5
- fix deps
### v0.2.4
- Validation categories: Error, Warning, Info
### v0.2.3
- make `Checkbox.checked` optional
### v0.2.2
- fix broken `ControlConfig`
### v0.2.1
- fix wrong dependency version
## v0.2.0
- deprecate `labelPosition` prop
### v0.1.1
- use @astro-reactive/common
## v0.1.0
- support server-rendered validation for forms
### v0.0.4
- update project documentation
### v0.0.3
- update examples on the README
### v0.0.1
- Validators
- validator functions

29
packages/validator/package.json
View file

@ -1,10 +1,14 @@
{ {
"name": "@astro-reactive/validator", "name": "@astro-reactive/validator",
"description": "Form validation library for Astro 🔥", "description": "Form validation library for Astro 🔥",
"version": "0.5.1", "version": "0.2.7",
"repository": "https://github.com/astro-reactive/astro-reactive", "repository": "https://github.com/astro-reactive/astro-reactive",
"homepage": "https://astro-reactive.js.org", "homepage": "https://github.com/astro-reactive/astro-reactive/blob/main/packages/validator/README.md",
"author": "astro-reactive", "author": {
"name": "Ayo Ayco",
"email": "ayo@ayco.io",
"url": "https://ayco.io"
},
"type": "module", "type": "module",
"exports": { "exports": {
".": "./index.ts" ".": "./index.ts"
@ -24,30 +28,29 @@
"format": "prettier -w .", "format": "prettier -w .",
"lint": "eslint . --ext .ts,.js", "lint": "eslint . --ext .ts,.js",
"lint:fix": "eslint --fix . --ext .ts,.js", "lint:fix": "eslint --fix . --ext .ts,.js",
"check": "astro check", "check": "astro check && tsc --noEmit",
"clean": "rimraf node_modules .turbo dist" "clean": "rimraf node_modules .turbo dist"
}, },
"devDependencies": { "devDependencies": {
"@astro-reactive/eslint-config-custom": "*",
"@astro-reactive/tsconfig": "*",
"@types/eslint": "^8.4.6", "@types/eslint": "^8.4.6",
"@types/node": "^18.7.18", "@types/node": "^18.7.18",
"@types/prettier": "^2.7.0", "@types/prettier": "^2.7.0",
"@vitest/coverage-istanbul": "^0.34.5", "astro": "^2.1.3",
"astro": "^4.0.3",
"astro-component-tester": "^0.6.0", "astro-component-tester": "^0.6.0",
"eslint": "^8.23.1", "eslint": "^8.23.1",
"prettier": "^3.0.3", "prettier": "^2.7.1",
"prettier-plugin-astro": "^0.12.0", "prettier-plugin-astro": "^0.7.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"typescript": "^4.8.3", "typescript": "^4.8.3",
"vitest": "^0.34.5" "vitest": "^0.25.2"
}, },
"peerDependencies": { "peerDependencies": {
"astro": ">=4.0.3" "astro": "^2.1.3"
}, },
"dependencies": { "dependencies": {
"@astro-reactive/common": "*" "@astro-reactive/common": "*",
"@astro-reactive/eslint-config-custom": "*",
"@astro-reactive/tsconfig": "*"
}, },
"main": "index.js", "main": "index.js",
"directories": { "directories": {