docs: initial Form, FormGroup documentation (#176)
* docs: initial structure and form api docs * feat(docs): warning underconstruction * docs: initial FormGroup and FormControl docs * docs: initial example usage * fix: docs build errors
This commit is contained in:
Ayo Ayco
GitHub
parent
ec19766202
commit
cec0a02c46
22 changed files with 556 additions and 324 deletions
10
README.md
10
README.md
|
|
@ -25,11 +25,11 @@
|
|||
|
||||
| Package | Release notes | Description |
|
||||
| --- | --- | --- |
|
||||
| [form](https://github.com/ayoayco/astro-reactive-library/blob/main/packages/form/README.md) | [](./packages/form/RELEASE.md) | a dynamic form which can be modified programmatically |
|
||||
| [validator](https://github.com/ayoayco/astro-reactive-library/blob/main/packages/validator/README.md) | [](./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 |
|
||||
| [form](https://github.com/ayoayco/astro-reactive-library/blob/main/packages/form/README.md) | [](./packages/form/RELEASE.md) | a dynamic form which can be modified programmatically |
|
||||
| [validator](https://github.com/ayoayco/astro-reactive-library/blob/main/packages/validator/README.md) | [](./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 |
|
||||
|
||||
# Running locally
|
||||
|
||||
|
|
|
|||
|
|
@ -4,5 +4,5 @@
|
|||
<nav>
|
||||
<a href="/">Home</a> | <a href="/pizza-delivery">Pizza Delivery</a> | <a
|
||||
href="/job-application">Job Application</a
|
||||
>
|
||||
> | <a href="/examples">Docs Exaples</a>
|
||||
</nav>
|
||||
|
|
|
|||
26
apps/demo/src/pages/examples/form-component.astro
Normal file
26
apps/demo/src/pages/examples/form-component.astro
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
import Form, { FormGroup } from "@astro-reactive/form";
|
||||
|
||||
const simpleForm = new FormGroup([
|
||||
{
|
||||
name: "username",
|
||||
label: "Username",
|
||||
value: "awesome_dev",
|
||||
},
|
||||
{
|
||||
name: "comment",
|
||||
label: "Feedback",
|
||||
type: "textarea",
|
||||
value: "Nice!",
|
||||
},
|
||||
{
|
||||
name: "size",
|
||||
label: "Size",
|
||||
type: "dropdown",
|
||||
options: ["S", "M", "L", "XL", "XXL"],
|
||||
placeholder: "-- Please choose an option --",
|
||||
},
|
||||
]);
|
||||
---
|
||||
|
||||
<Form formGroups={simpleForm} />
|
||||
7
apps/demo/src/pages/examples/index.astro
Normal file
7
apps/demo/src/pages/examples/index.astro
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
---
|
||||
|
||||
<h1>Docs Examples</h1>
|
||||
<ul>
|
||||
<li><a href="./examples/form-component">Form Component</a></li>
|
||||
</ul>
|
||||
|
|
@ -1,40 +1,40 @@
|
|||
---
|
||||
type Props = {
|
||||
size: number;
|
||||
size: number;
|
||||
};
|
||||
const { size } = Astro.props as Props;
|
||||
---
|
||||
|
||||
<svg
|
||||
class="logo"
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 256 256"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<style>
|
||||
#flame {
|
||||
fill: var(--theme-text-accent);
|
||||
}
|
||||
|
||||
#a {
|
||||
fill: var(--theme-text-accent);
|
||||
}
|
||||
</style>
|
||||
<title>Logo</title>
|
||||
<path
|
||||
id="a"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M163.008 18.929c1.944 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53l-28.198-95.29a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.225 180.225 0 00-52.01 17.557l43.52-142.281c1.99-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.086 1.157a16.004 16.004 0 016.487 4.806z"
|
||||
>
|
||||
</path>
|
||||
<path
|
||||
id="flame"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M168.19 180.151c-7.139 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.961 10.367-1.961 13.902 0 0-1.056 17.355 11.015 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.974-19.87 5.976-3.79 12.616-8.001 17.192-16.449a31.024 31.024 0 003.743-14.82c0-3.299-.513-6.479-1.463-9.463z"
|
||||
>
|
||||
</path>
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width={size}
|
||||
viewBox="0 0 375 374.999991"
|
||||
height={size}
|
||||
zoomAndPan="magnify"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
version="1.0"
|
||||
><defs
|
||||
><clipPath id="702d27c854"
|
||||
><path
|
||||
d="M 124.9375 112.5 L 265 112.5 L 265 262.5 L 124.9375 262.5 Z M 124.9375 112.5 "
|
||||
clip-rule="nonzero"></path>
|
||||
</clipPath><clipPath id="db9c64370c"
|
||||
><path
|
||||
d="M 169 153 L 189 153 L 189 262.5 L 169 262.5 Z M 169 153 "
|
||||
clip-rule="nonzero"></path>
|
||||
</clipPath>
|
||||
</defs><g clip-path="url(#702d27c854)"
|
||||
><path
|
||||
fill="#004aad"
|
||||
d="M 124.9375 262.386719 C 150.457031 262.386719 167.863281 230.78125 175.042969 207.984375 C 174.734375 207.984375 174.421875 207.984375 174.117188 207.984375 C 172.316406 207.984375 171.382812 206.539062 170.707031 204.882812 C 168.757812 204.882812 166.808594 204.882812 164.859375 204.882812 C 164.226562 206.949219 162.894531 208.851562 161.359375 209.652344 C 158.1875 211.300781 155.019531 212.949219 151.84375 214.597656 C 149.707031 215.710938 147.953125 214.273438 147.953125 211.40625 C 147.953125 208.566406 147.953125 205.730469 147.953125 202.894531 C 147.953125 200.027344 150.296875 197.605469 151.84375 195.644531 C 154.96875 191.703125 158.089844 187.757812 161.214844 183.808594 C 160.820312 178.402344 160.429688 172.996094 160.035156 167.585938 C 160.035156 150.964844 167.257812 136.027344 178.738281 125.710938 C 190.214844 136.027344 197.433594 150.964844 197.433594 167.585938 C 197.042969 172.992188 196.652344 178.402344 196.261719 183.808594 C 199.386719 187.757812 202.507812 191.699219 205.632812 195.644531 C 207.179688 197.605469 209.523438 200.027344 209.523438 202.894531 C 209.523438 205.730469 209.523438 208.570312 209.523438 211.40625 C 209.523438 214.273438 207.769531 215.714844 205.632812 214.597656 C 202.460938 212.949219 199.289062 211.300781 196.117188 209.652344 C 194.582031 208.851562 193.25 206.949219 192.613281 204.882812 C 190.664062 204.882812 188.714844 204.882812 186.769531 204.882812 C 186.09375 206.539062 185.164062 207.984375 183.359375 207.984375 C 183.050781 207.984375 182.746094 207.984375 182.433594 207.984375 C 189.613281 230.777344 207.019531 262.386719 232.539062 262.386719 C 241.136719 262.386719 256.164062 262.386719 264.761719 262.386719 L 227.265625 210.183594 C 264.992188 194.1875 265.183594 149.125 244.851562 128.890625 C 234.769531 118.621094 218.894531 112.628906 195.941406 112.628906 C 172.269531 112.628906 148.605469 112.628906 124.9375 112.628906 C 124.9375 162.550781 124.9375 212.46875 124.9375 262.386719 Z M 124.9375 262.386719 "
|
||||
fill-opacity="1"
|
||||
fill-rule="nonzero"></path>
|
||||
</g><g clip-path="url(#db9c64370c)"
|
||||
><path
|
||||
fill="#ff1616"
|
||||
d="M 186.925781 231.277344 C 187.671875 231.277344 188.273438 231.886719 188.273438 232.617188 L 188.273438 254.832031 C 188.273438 255.566406 187.664062 256.175781 186.929688 256.175781 L 186.925781 256.175781 C 186.191406 256.175781 185.582031 255.574219 185.582031 254.832031 L 185.582031 232.617188 C 185.578125 231.878906 186.183594 231.277344 186.925781 231.277344 Z M 170.546875 231.277344 C 171.292969 231.277344 171.894531 231.886719 171.894531 232.617188 L 171.894531 254.832031 C 171.894531 255.566406 171.28125 256.175781 170.550781 256.175781 L 170.546875 256.175781 C 169.8125 256.175781 169.203125 255.574219 169.203125 254.832031 L 169.203125 232.617188 C 169.203125 231.878906 169.804688 231.277344 170.546875 231.277344 Z M 178.738281 169.320312 C 183.066406 169.320312 186.578125 165.816406 186.578125 161.5 C 186.578125 157.183594 183.066406 153.683594 178.738281 153.683594 C 174.40625 153.683594 170.898438 157.183594 170.898438 161.5 C 170.894531 165.820312 174.40625 169.320312 178.738281 169.320312 Z M 178.734375 221.804688 C 179.480469 221.804688 180.082031 222.414062 180.082031 223.144531 L 180.082031 261.042969 C 180.082031 261.773438 179.46875 262.382812 178.738281 262.382812 L 178.734375 262.382812 C 178 262.382812 177.390625 261.78125 177.390625 261.042969 L 177.390625 223.148438 C 177.390625 222.410156 177.992188 221.804688 178.734375 221.804688 Z M 178.734375 221.804688 "
|
||||
fill-opacity="1"
|
||||
fill-rule="evenodd"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
---
|
||||
import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages';
|
||||
import * as CONFIG from '../../config';
|
||||
import AstroLogo from './AstroLogo.astro';
|
||||
import SkipToContent from './SkipToContent.astro';
|
||||
import SidebarToggle from './SidebarToggle';
|
||||
import LanguageSelect from './LanguageSelect';
|
||||
import Search from './Search';
|
||||
import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from "../../languages";
|
||||
import * as CONFIG from "../../config";
|
||||
// import AstroLogo from "./AstroLogo.astro";
|
||||
import SkipToContent from "./SkipToContent.astro";
|
||||
import SidebarToggle from "./SidebarToggle";
|
||||
import LanguageSelect from "./LanguageSelect";
|
||||
import Search from "./Search";
|
||||
|
||||
type Props = {
|
||||
currentPage: string;
|
||||
currentPage: string;
|
||||
};
|
||||
|
||||
const { currentPage } = Astro.props as Props;
|
||||
|
|
@ -16,134 +16,139 @@ const lang = getLanguageFromURL(currentPage);
|
|||
---
|
||||
|
||||
<header>
|
||||
<SkipToContent />
|
||||
<nav class="nav-wrapper" title="Top Navigation">
|
||||
<div class="menu-toggle">
|
||||
<SidebarToggle client:idle />
|
||||
</div>
|
||||
<div class="logo flex">
|
||||
<a href="/">
|
||||
<AstroLogo size={40} />
|
||||
<h1>{CONFIG.SITE.title ?? 'Documentation'}</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
{KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle />}
|
||||
<div class="search-item">
|
||||
<Search client:idle />
|
||||
</div>
|
||||
</nav>
|
||||
<SkipToContent />
|
||||
<nav class="nav-wrapper" title="Top Navigation">
|
||||
<div class="menu-toggle">
|
||||
<SidebarToggle client:idle />
|
||||
</div>
|
||||
<div class="logo flex">
|
||||
<a href="/">
|
||||
<!-- <AstroLogo size={200} /> -->
|
||||
<h1>{CONFIG.SITE.title ?? "Documentation"}</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div style="flex-grow: 1;"></div>
|
||||
{
|
||||
KNOWN_LANGUAGE_CODES.length > 1 && (
|
||||
<LanguageSelect lang={lang} client:idle />
|
||||
)
|
||||
}
|
||||
<!-- TODO: enable search -->
|
||||
<div class="search-item">
|
||||
<Search client:idle />
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
z-index: 11;
|
||||
height: var(--theme-navbar-height);
|
||||
width: 100%;
|
||||
background-color: var(--theme-navbar-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
header {
|
||||
z-index: 11;
|
||||
height: var(--theme-navbar-height);
|
||||
width: 100%;
|
||||
background-color: var(--theme-navbar-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
width: 30px;
|
||||
font-size: 2rem;
|
||||
flex-shrink: 0;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: hsla(var(--color-base-white), 100%, 1);
|
||||
gap: 0.25em;
|
||||
z-index: -1;
|
||||
}
|
||||
.logo {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
width: 30px;
|
||||
font-size: 2rem;
|
||||
flex-shrink: 0;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: hsla(var(--color-base-white), 100%, 1);
|
||||
gap: 0.25em;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.logo a {
|
||||
display: flex;
|
||||
padding: 0.5em 0.25em;
|
||||
margin: -0.5em -0.25em;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
.logo a {
|
||||
display: flex;
|
||||
padding: 0.5em 0.25em;
|
||||
margin: -0.5em -0.25em;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.logo a {
|
||||
transition: color 100ms ease-out;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
.logo a {
|
||||
transition: color 100ms ease-out;
|
||||
color: var(--theme-text);
|
||||
}
|
||||
|
||||
.logo a:hover,
|
||||
.logo a:focus {
|
||||
color: var(--theme-text-accent);
|
||||
}
|
||||
.logo a:hover,
|
||||
.logo a:focus {
|
||||
color: var(--theme-text-accent);
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
display: none;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
.logo h1 {
|
||||
display: none;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 1em;
|
||||
width: 100%;
|
||||
max-width: 82em;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.nav-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 1em;
|
||||
width: 100%;
|
||||
max-width: 82em;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 50em) {
|
||||
header {
|
||||
position: static;
|
||||
padding: 2rem 0rem;
|
||||
}
|
||||
@media (min-width: 50em) {
|
||||
header {
|
||||
position: static;
|
||||
padding: 2rem 0rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
.logo {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.logo h1 {
|
||||
display: initial;
|
||||
}
|
||||
.logo h1 {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/** Style Algolia */
|
||||
:root {
|
||||
--docsearch-primary-color: var(--theme-accent);
|
||||
--docsearch-logo-color: var(--theme-text);
|
||||
}
|
||||
/** Style Algolia */
|
||||
:root {
|
||||
--docsearch-primary-color: var(--theme-accent);
|
||||
--docsearch-logo-color: var(--theme-text);
|
||||
}
|
||||
|
||||
.search-item {
|
||||
display: none;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
flex-grow: 1;
|
||||
padding-right: 0.7rem;
|
||||
display: flex;
|
||||
max-width: 200px;
|
||||
}
|
||||
.search-item {
|
||||
display: none;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
flex-grow: 1;
|
||||
padding-right: 0.7rem;
|
||||
display: flex;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
@media (min-width: 50em) {
|
||||
.search-item {
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 50em) {
|
||||
.search-item {
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style is:global>
|
||||
.search-item > * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.search-item > * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -47,11 +47,23 @@ export type Sidebar = Record<
|
|||
>;
|
||||
export const SIDEBAR: Sidebar = {
|
||||
en: {
|
||||
Tutorial: [
|
||||
{ text: "Getting Started", link: "en/getting-started" },
|
||||
{ text: "Page 2", link: "en/page-2" },
|
||||
{ text: "Page 3", link: "en/page-3" },
|
||||
// TODO: create tutorial
|
||||
// Tutorial: [
|
||||
// { text: "Getting Started", link: "en/getting-started" },
|
||||
// { text: "Page 2", link: "en/page-2" },
|
||||
// { text: "Page 3", link: "en/page-3" },
|
||||
// ],
|
||||
|
||||
// TODO: create overview
|
||||
Introduction: [
|
||||
{ text: "Overview", link: "en/introduction" },
|
||||
// { text: "Philosophy", link: "en/philosophy" },
|
||||
],
|
||||
|
||||
"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" },
|
||||
],
|
||||
"API Docs": [{ text: "Form", link: "en/form" }],
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,139 +1,167 @@
|
|||
---
|
||||
import HeadCommon from '../components/HeadCommon.astro';
|
||||
import HeadSEO from '../components/HeadSEO.astro';
|
||||
import Header from '../components/Header/Header.astro';
|
||||
import PageContent from '../components/PageContent/PageContent.astro';
|
||||
import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
|
||||
import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
|
||||
import * as CONFIG from '../config';
|
||||
import type { MarkdownHeading } from 'astro';
|
||||
import Footer from '../components/Footer/Footer.astro';
|
||||
import HeadCommon from "../components/HeadCommon.astro";
|
||||
import HeadSEO from "../components/HeadSEO.astro";
|
||||
import Header from "../components/Header/Header.astro";
|
||||
import PageContent from "../components/PageContent/PageContent.astro";
|
||||
import LeftSidebar from "../components/LeftSidebar/LeftSidebar.astro";
|
||||
import RightSidebar from "../components/RightSidebar/RightSidebar.astro";
|
||||
import * as CONFIG from "../config";
|
||||
import type { MarkdownHeading } from "astro";
|
||||
import Footer from "../components/Footer/Footer.astro";
|
||||
|
||||
type Props = {
|
||||
frontmatter: CONFIG.Frontmatter;
|
||||
headings: MarkdownHeading[];
|
||||
frontmatter: CONFIG.Frontmatter;
|
||||
headings: MarkdownHeading[];
|
||||
};
|
||||
|
||||
const { frontmatter, headings } = Astro.props as Props;
|
||||
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
|
||||
const currentPage = Astro.url.pathname;
|
||||
const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
|
||||
const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`;
|
||||
const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
|
||||
---
|
||||
|
||||
<html dir={frontmatter.dir ?? 'ltr'} lang={frontmatter.lang ?? 'en-us'} class="initial">
|
||||
<head>
|
||||
<HeadCommon />
|
||||
<HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} />
|
||||
<title>
|
||||
{frontmatter.title ? `${frontmatter.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}
|
||||
</title>
|
||||
<style>
|
||||
body {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: var(--theme-navbar-height) 1fr;
|
||||
--gutter: 0.5rem;
|
||||
--doc-padding: 2rem;
|
||||
}
|
||||
<html
|
||||
dir={frontmatter.dir ?? "ltr"}
|
||||
lang={frontmatter.lang ?? "en-us"}
|
||||
class="initial"
|
||||
>
|
||||
<head>
|
||||
<HeadCommon />
|
||||
<HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} />
|
||||
<title>
|
||||
{
|
||||
frontmatter.title
|
||||
? `${frontmatter.title} 🚀 ${CONFIG.SITE.title}`
|
||||
: CONFIG.SITE.title
|
||||
}
|
||||
</title>
|
||||
<style>
|
||||
body {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: var(--theme-navbar-height) 1fr;
|
||||
--gutter: 0.5rem;
|
||||
--doc-padding: 2rem;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--max-width)) minmax(
|
||||
var(--gutter),
|
||||
1fr
|
||||
);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-template-columns:
|
||||
minmax(var(--gutter), 1fr) minmax(0, var(--max-width))
|
||||
minmax(var(--gutter), 1fr);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.grid-sidebar {
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.grid-sidebar {
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#grid-left {
|
||||
position: fixed;
|
||||
background-color: var(--theme-bg);
|
||||
z-index: 10;
|
||||
display: none;
|
||||
}
|
||||
#grid-left {
|
||||
position: fixed;
|
||||
background-color: var(--theme-bg);
|
||||
z-index: 10;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#grid-main {
|
||||
padding: var(--doc-padding) var(--gutter);
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
#grid-main {
|
||||
padding: var(--doc-padding) var(--gutter);
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#grid-right {
|
||||
display: none;
|
||||
}
|
||||
#grid-right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 50em) {
|
||||
.layout {
|
||||
overflow: initial;
|
||||
grid-template-columns: 20rem minmax(0, var(--max-width));
|
||||
gap: 1em;
|
||||
}
|
||||
@media (min-width: 50em) {
|
||||
.layout {
|
||||
overflow: initial;
|
||||
grid-template-columns: 20rem minmax(0, var(--max-width));
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
#grid-left {
|
||||
display: flex;
|
||||
padding-left: 2rem;
|
||||
position: sticky;
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
#grid-left {
|
||||
display: flex;
|
||||
padding-left: 2rem;
|
||||
position: sticky;
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 72em) {
|
||||
.layout {
|
||||
grid-template-columns: 20rem minmax(0, var(--max-width)) 18rem;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media (min-width: 72em) {
|
||||
.layout {
|
||||
grid-template-columns: 20rem minmax(0, var(--max-width)) 18rem;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#grid-right {
|
||||
grid-column: 3;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style is:global>
|
||||
.layout > * {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#grid-right {
|
||||
grid-column: 3;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style is:global>
|
||||
.warning {
|
||||
background-color: var(--theme-bg-accent);
|
||||
color: var(--theme-text-accent);
|
||||
margin: 2rem 0;
|
||||
padding: 1.25em 1.5rem;
|
||||
border-radius: 0 0.25rem 0.25rem 0;
|
||||
border-left: 3px solid var(--theme-text-accent);
|
||||
}
|
||||
|
||||
.mobile-sidebar-toggle {
|
||||
overflow: hidden;
|
||||
}
|
||||
.layout > * {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mobile-sidebar-toggle #grid-left {
|
||||
display: block;
|
||||
top: 2rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
.mobile-sidebar-toggle {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
<body>
|
||||
<Header currentPage={currentPage} />
|
||||
<main class="layout">
|
||||
<aside id="grid-left" class="grid-sidebar" title="Site Navigation">
|
||||
<LeftSidebar currentPage={currentPage} />
|
||||
</aside>
|
||||
<div id="grid-main">
|
||||
<PageContent frontmatter={frontmatter} headings={headings} githubEditUrl={githubEditUrl}>
|
||||
<slot />
|
||||
</PageContent>
|
||||
</div>
|
||||
<aside id="grid-right" class="grid-sidebar" title="Table of Contents">
|
||||
<RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
|
||||
</aside>
|
||||
</main>
|
||||
<Footer path={currentFile} />
|
||||
</body>
|
||||
.mobile-sidebar-toggle #grid-left {
|
||||
display: block;
|
||||
top: 2rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<Header currentPage={currentPage} />
|
||||
<main class="layout">
|
||||
<aside id="grid-left" class="grid-sidebar" title="Site Navigation">
|
||||
<LeftSidebar currentPage={currentPage} />
|
||||
</aside>
|
||||
<div id="grid-main">
|
||||
<div class="warning">
|
||||
<strong>🛠 Under Construction:</strong> This library and the documentation
|
||||
for it are undergoing rigorous development. Read and join our <a
|
||||
href="https://github.com/ayoayco/astro-reactive-library/discussions"
|
||||
>Discussions</a
|
||||
> for questions, suggestions, or feedback.
|
||||
</div>
|
||||
|
||||
<PageContent
|
||||
frontmatter={frontmatter}
|
||||
headings={headings}
|
||||
githubEditUrl={githubEditUrl}
|
||||
>
|
||||
<slot />
|
||||
</PageContent>
|
||||
</div>
|
||||
<aside id="grid-right" class="grid-sidebar" title="Table of Contents">
|
||||
<RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
|
||||
</aside>
|
||||
</main>
|
||||
<Footer path={currentFile} />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
104
apps/docs/src/pages/en/api/form/form-component.md
Normal file
104
apps/docs/src/pages/en/api/form/form-component.md
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
---
|
||||
title: Form
|
||||
type: component
|
||||
package: "@astro-reactive/form"
|
||||
description: The Reactive Form component for Astro
|
||||
layout: ../../../../layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
The `Form` component renders a form element and various control components (e.g., `Input`, `TextArea`, `Select`) depending on the data that you provide through its `formGroups` property.
|
||||
|
||||
```astro
|
||||
---
|
||||
import Form, { FormGroup } from "@astro-reactive/form";
|
||||
const form = new FormGroup(
|
||||
// your controls configuration data
|
||||
);
|
||||
---
|
||||
<Form formGroups={form} />
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Setting up the `Form` component is mainly done by providing it your configuration via the `formGroups` property which takes either a `FormGroup` or an array `FormGroup[]`.
|
||||
|
||||
*See the documentation for the [FormGroup](/en/api/form/form-group) class.*
|
||||
|
||||
### Setting up a form
|
||||
|
||||
Giving the component a `FormGroup` object will set up a form.
|
||||
|
||||
```astro
|
||||
---
|
||||
import Form, { FormGroup } from "@astro-reactive/form";
|
||||
|
||||
const form = new FormGroup([
|
||||
{
|
||||
name: "username",
|
||||
label: "Username",
|
||||
value: "awesome_dev",
|
||||
},
|
||||
{
|
||||
name: "comment",
|
||||
label: "Feedback",
|
||||
type: "textarea",
|
||||
value: "Nice!"
|
||||
},
|
||||
{
|
||||
name: "size",
|
||||
label: "Size",
|
||||
type: "dropdown",
|
||||
options: ["S", "M", "L", "XL", "XXL"],
|
||||
placeholder: "-- Please choose an option --",
|
||||
},
|
||||
]);
|
||||
---
|
||||
|
||||
<Form formGroups={form} />
|
||||
```
|
||||
|
||||
The `FormGroup` constructor takes an array `ControlConfig[]`.
|
||||
|
||||
*See the `ControlConfig` type in the [FormControl](/en/api/form/form-group) class documentation.*
|
||||
|
||||
The example above will result in a form containing three controls: a text field `username`, a textarea `comment`, and a `size` dropdown.
|
||||
|
||||
|
||||
|
||||
### Setting up multiple field sets
|
||||
|
||||
To render a form with multiple field sets, give the component an array `FormGroup[]`
|
||||
|
||||
## Properties
|
||||
|
||||
The following are input properties a `Form` component can take.
|
||||
|
||||
| Property | Type | |
|
||||
|---|---|---|
|
||||
| [formGroups](#formgroups) | `FormGroup \| FormGroup[]` | required |
|
||||
| [readOnly](#readonly) | `boolean` | optional |
|
||||
| [showValidationHints](#showvalidationhints) | `boolean` | optional |
|
||||
| [submitControl](#submitcontrol) | `Submit` | optional |
|
||||
| [theme](#theme) | `'light' \| 'dark'` | optional |
|
||||
|
||||
### `formGroups`
|
||||
Type: `FormGroup | FormGroup[]`
|
||||
|
||||
Determines how the form is are rendered
|
||||
|
||||
|
||||
### `readOnly`
|
||||
|
||||
#### `boolean`
|
||||
|
||||
Sets the whole form as read-only.
|
||||
|
||||
### `showValidationHints`
|
||||
|
||||
When used with our `validator` package, the `Form` component is able to render validation hints when `showValidationHints` is set to true:
|
||||
1. asterisks on required controls' labels
|
||||
2. controls with validation errors are colored red
|
||||
|
||||
### `submitControl`
|
||||
|
||||
### `theme`
|
||||
7
apps/docs/src/pages/en/api/form/form-control.md
Normal file
7
apps/docs/src/pages/en/api/form/form-control.md
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: FormControl
|
||||
type: class
|
||||
package: "@astro-reactive/form"
|
||||
description: The Reactive Form component for Astro
|
||||
layout: ../../../../layouts/MainLayout.astro
|
||||
---
|
||||
20
apps/docs/src/pages/en/api/form/form-group.md
Normal file
20
apps/docs/src/pages/en/api/form/form-group.md
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
title: FormGroup
|
||||
type: class
|
||||
package: "@astro-reactive/form"
|
||||
description: The Reactive Form component for Astro
|
||||
layout: ../../../../layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
The `FormGroup` class represents a group of controls that will be rendered as a fieldset element in a form.
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Type | |
|
||||
|---|---|---|
|
||||
| [controls](#controls) | `FormControl[]` | required |
|
||||
| [name](#name) | `string` | optional |
|
||||
|
||||
### controls
|
||||
|
||||
### name
|
||||
5
apps/docs/src/pages/en/api/form/index.astro
Normal file
5
apps/docs/src/pages/en/api/form/index.astro
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script is:inline>
|
||||
// Redirect your homepage to the first page of documentation.
|
||||
// If you have a landing page, remove this script and add it here!
|
||||
window.location.pathname = `/en/api/form/form-component`;
|
||||
</script>
|
||||
5
apps/docs/src/pages/en/api/index.astro
Normal file
5
apps/docs/src/pages/en/api/index.astro
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script is:inline>
|
||||
// Redirect your homepage to the first page of documentation.
|
||||
// If you have a landing page, remove this script and add it here!
|
||||
window.location.pathname = `/en/api/form/form-component`;
|
||||
</script>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
---
|
||||
title: Form
|
||||
description: Lorem ipsum dolor sit amet - 4
|
||||
layout: ../../layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
This is a fully-featured page, written in Markdown!
|
||||
|
||||
## Section A
|
||||
|
||||
Lorem ipsum dolor sit amet, **consectetur adipiscing elit**. Sed ut tortor _suscipit_, posuere ante id, vulputate urna. Pellentesque molestie aliquam dui sagittis aliquet. Sed sed felis convallis, lacinia lorem sit amet, fermentum ex. Etiam hendrerit mauris at elementum egestas. Vivamus id gravida ante. Praesent consectetur fermentum turpis, quis blandit tortor feugiat in. Aliquam erat volutpat. In elementum purus et tristique ornare. Suspendisse sollicitudin dignissim est a ultrices. Pellentesque sed ipsum finibus, condimentum metus eget, sagittis elit. Sed id lorem justo. Vivamus in sem ac mi molestie ornare.
|
||||
|
||||
## Section B
|
||||
|
||||
Nam quam dolor, pellentesque sed odio euismod, feugiat tempus tellus. Quisque arcu velit, ultricies in faucibus sed, ultrices ac enim. Nunc eget dictum est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ex nisi, egestas mollis ultricies ut, laoreet suscipit libero. Nam condimentum molestie turpis. Sed vestibulum sagittis congue. Maecenas tristique enim et tincidunt tempor. Curabitur ac scelerisque nulla, in malesuada libero. Praesent eu tempus odio. Pellentesque aliquam ullamcorper quam at gravida. Sed non fringilla mauris. Aenean sit amet ultrices erat. Vestibulum congue venenatis tortor, nec suscipit tortor. Aenean pellentesque mauris eget tortor tincidunt pharetra.
|
||||
|
||||
## Section C
|
||||
|
||||
```markdown
|
||||
---
|
||||
title: Markdown Page!
|
||||
lang: en
|
||||
layout: ~/layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
# Markdown example
|
||||
|
||||
This is a fully-featured page, written in Markdown!
|
||||
|
||||
## Section A
|
||||
|
||||
Lorem ipsum dolor sit amet, **consectetur adipiscing elit**. Sed ut tortor _suscipit_, posuere ante id, vulputate urna. Pellentesque molestie aliquam dui sagittis aliquet. Sed sed felis convallis, lacinia lorem sit amet, fermentum ex. Etiam hendrerit mauris at elementum egestas. Vivamus id gravida ante. Praesent consectetur fermentum turpis, quis blandit tortor feugiat in. Aliquam erat volutpat. In elementum purus et tristique ornare. Suspendisse sollicitudin dignissim est a ultrices. Pellentesque sed ipsum finibus, condimentum metus eget, sagittis elit. Sed id lorem justo. Vivamus in sem ac mi molestie ornare.
|
||||
|
||||
## Section B
|
||||
|
||||
Nam quam dolor, pellentesque sed odio euismod, feugiat tempus tellus. Quisque arcu velit, ultricies in faucibus sed, ultrices ac enim. Nunc eget dictum est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ex nisi, egestas mollis ultricies ut, laoreet suscipit libero. Nam condimentum molestie turpis. Sed vestibulum sagittis congue. Maecenas tristique enim et tincidunt tempor. Curabitur ac scelerisque nulla, in malesuada libero. Praesent eu tempus odio. Pellentesque aliquam ullamcorper quam at gravida. Sed non fringilla mauris. Aenean sit amet ultrices erat. Vestibulum congue venenatis tortor, nec suscipit tortor. Aenean pellentesque mauris eget tortor tincidunt pharetra.
|
||||
```
|
||||
5
apps/docs/src/pages/en/index.astro
Normal file
5
apps/docs/src/pages/en/index.astro
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<script is:inline>
|
||||
// Redirect your homepage to the first page of documentation.
|
||||
// If you have a landing page, remove this script and add it here!
|
||||
window.location.pathname = `/en/introduction`;
|
||||
</script>
|
||||
35
apps/docs/src/pages/en/introduction.md
Normal file
35
apps/docs/src/pages/en/introduction.md
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
---
|
||||
title: Hi, explorer! 🚀
|
||||
description: Library homepage
|
||||
layout: ../../layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
|
||||
|
||||
Thanks for checking out the Astro Reactive Library! Welcome to a new adventure.
|
||||
|
||||
This project aims to be a new library of components and utilities for building reactive user interfaces with [Astro](https://astro.build).
|
||||
|
||||
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.
|
||||
|
||||
## Packages
|
||||
|
||||
| Package | Release notes | Description |
|
||||
| --- | --- | --- |
|
||||
| [form](https://github.com/ayoayco/astro-reactive-library/blob/main/packages/form/README.md) | [](./packages/form/RELEASE.md) | a dynamic form which can be modified programmatically |
|
||||
| [validator](https://github.com/ayoayco/astro-reactive-library/blob/main/packages/validator/README.md) | [](./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 |
|
||||
|
||||
## Contributing
|
||||
|
||||
Any contribution is welcome. Feel free to look around our [repository](https://github.com/ayoayco/astro-reactive-library) to find something that interests you. :)
|
||||
|
||||
The [issues page](https://github.com/ayoayco/astro-reactive-library/issues?q=is%3Aopen+is%3Aissue+label%3A%22accepting+PRs%22) contains some ideas, but they should not limit your contribution.
|
||||
|
||||
If you don't find anything there, I'm happy to help you get your contribution in.
|
||||
|
||||
You can always [create a new issue](https://github.com/ayoayco/astro-reactive-library/issues/new/choose) for your own idea, [email me (ayo@ayco.io)](mailto:ayo@ayco.io) or message me on [Twitter (@ayoayco)](https://twitter.com/ayoayco).
|
||||
|
||||
|
||||
5
apps/docs/src/pages/en/philosophy.md
Normal file
5
apps/docs/src/pages/en/philosophy.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Philosophy
|
||||
description: Library homepage
|
||||
layout: ../../layouts/MainLayout.astro
|
||||
---
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Getting Started
|
||||
description: Library homepage
|
||||
layout: ../../layouts/MainLayout.astro
|
||||
layout: ../../../layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
Consider the following code:
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Reactive Form
|
||||
description: Lorem ipsum dolor sit amet - 2
|
||||
layout: ../../layouts/MainLayout.astro
|
||||
layout: ../../../layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Page 3
|
||||
description: Lorem ipsum dolor sit amet - 3
|
||||
layout: ../../layouts/MainLayout.astro
|
||||
layout: ../../../layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
This is a fully-featured page, written in Markdown!
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script is:inline>
|
||||
// Redirect your homepage to the first page of documentation.
|
||||
// If you have a landing page, remove this script and add it here!
|
||||
window.location.pathname = `/en/getting-started`;
|
||||
window.location.pathname = `/en/introduction/`;
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,13 +6,19 @@ import Field from './Field.astro';
|
|||
|
||||
export interface Props {
|
||||
formGroups: FormGroup | FormGroup[];
|
||||
readOnly?: boolean;
|
||||
showValidationHints?: boolean;
|
||||
submitControl?: Submit;
|
||||
theme?: 'light' | 'dark';
|
||||
showValidationHints?: boolean;
|
||||
readOnly?: boolean;
|
||||
}
|
||||
|
||||
const { submitControl, formGroups = [], theme, showValidationHints = false, readOnly = false } = Astro.props;
|
||||
const {
|
||||
submitControl,
|
||||
formGroups = [],
|
||||
theme,
|
||||
showValidationHints = false,
|
||||
readOnly = false,
|
||||
} = Astro.props;
|
||||
|
||||
const formTheme = theme ?? 'light';
|
||||
const formName = Array.isArray(formGroups) ? null : formGroups?.name || null;
|
||||
|
|
@ -27,10 +33,10 @@ const formName = Array.isArray(formGroups) ? null : formGroups?.name || null;
|
|||
{
|
||||
Array.isArray(formGroups)
|
||||
? formGroups?.map((group) => (
|
||||
<FieldSet showValidationHints={showValidationHints} group={group} readOnly={readOnly}/>
|
||||
<FieldSet showValidationHints={showValidationHints} group={group} readOnly={readOnly} />
|
||||
))
|
||||
: formGroups?.controls.map((control) => (
|
||||
<Field showValidationHints={showValidationHints} control={control} readOnly={readOnly}/>
|
||||
<Field showValidationHints={showValidationHints} control={control} readOnly={readOnly} />
|
||||
))
|
||||
}
|
||||
{
|
||||
|
|
@ -57,4 +63,3 @@ const formName = Array.isArray(formGroups) ? null : formGroups?.name || null;
|
|||
border-color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in a new issue