import { Field, FormContainer, Form, Submit } from '@jlbelanger/formosa';
import React, { useState } from 'react';

export default function App() {
	const [row, setRow] = useState({});

	return (
		<main>
			<header>
				Formosa Example
			</header>

			<FormContainer>
				<Form row={row} setRow={setRow}>
					<Field label="Username" name="email" type="email" />
					<Field label="Password" name="password" type="password" />
					<Submit />
				</Form>
			</FormContainer>
		</main>
	);
}

import { Form } from '@jlbelanger/formosa';

// ----------------------------------------

// Minimal example:

<Form row={row} setRow={setRow} />

// Renders:

<form></form>

// ----------------------------------------

// Optional fields:

<Form
	/* Required */
	row={row}
	setRow={setRow}

	/* Optional (TODO: add other fields) */
	htmlId="foo"

	/* All other props are added to the form element */
	className="my-class-name"
	data-foo="example"
>
	Hello.
</Form>

// Renders:

<form class="my-class-name" data-foo="example" id="foo">
	Hello.
</form>

import { Field } from '@jlbelanger/formosa';

// ----------------------------------------

// Minimal example:

<Field label="Foo" name="bar" />

// Renders:

<div class="formosa-field formosa-field--bar">
	<div class="formosa-label-wrapper">
		<label class="formosa-label" for="bar">Foo</label>
	</div>
	<div class="formosa-input-wrapper formosa-input-wrapper--text">
		<input class="formosa-field__input" id="bar" name="bar" type="text" />
	</div>
</div>

// ----------------------------------------

// Optional fields:

<Field
	/* Required */
	label="Foo"
	name="bar"

	/* Optional (TODO: add other fields) */

	/* All other props are added to the input, select, or textarea element */
	className="my-class-name"
	data-foo="example"
/>

// Renders:

<div class="formosa-field formosa-field--bar">
	<div class="formosa-label-wrapper">
		<label class="formosa-label" for="bar">Foo</label>
	</div>
	<div class="formosa-input-wrapper formosa-input-wrapper--text">
		<input class="formosa-field__input my-class-name" data-foo="example" id="bar" name="bar" type="text" />
	</div>
</div>

import { Submit } from '@jlbelanger/formosa';

// ----------------------------------------

// Minimal fields:

<Submit label="Login" />

// Renders:

<div class="formosa-field formosa-field--submit">
	<div class="formosa-label-wrapper formosa-label-wrapper--submit"></div>
	<div class="formosa-input-wrapper formosa-input-wrapper--submit">
		<button class="formosa-button formosa-button--submit" type="submit">Login</button>
	</div>
</div>

// ----------------------------------------

// Optional fields:

<Submit
	/* Required */
	label="Login"

	/* Optional */
	prefix="Click here to"
	postfix={<a href="/forgot-password">Forgot your password?</a>}

	/* All other props are added to the button element */
	className="my-class-name"
	data-foo="example"
/>

// Renders:

<div class="formosa-field formosa-field--submit">
	<div class="formosa-label-wrapper formosa-label-wrapper--submit"></div>
	<div class="formosa-input-wrapper formosa-input-wrapper--submit my-class-name">
		Click here to
		<button class="formosa-button formosa-button--submit my-class-name" type="submit" data-foo="example">Login</button>
		<a href="/forgot-password">Forgot your password?</a>
	</div>
</div>

import { Label } from '@jlbelanger/formosa';

// ----------------------------------------

// Minimal fields:

<Label label="Foo" />

// Renders:

<div class="formosa-label-wrapper">
	<label class="formosa-label">Foo</label>
</div>

// ----------------------------------------

// Optional fields:

<Label
	/* Required */
	label="Foo"

	/* Optional */
	note="Lorem ipsum."

	/* All other props are added to the label element */
	className="my-class-name"
	data-foo="example"
/>

// Renders:

<div class="formosa-label-wrapper">
	<label class="formosa-label my-class-name" data-foo="example">Foo</label>
	<span class="formosa-label__note">Lorem ipsum.</span>
</div>

import { Message } from '@jlbelanger/formosa';

// ----------------------------------------

// Example:

<Message />

// When there are errors, renders:

<p className="formosa-message formosa-message--error">Foo.</p>

// Where there is a success message, renders:

<p className="formosa-message formosa-message--success">Foo.</p>

// ----------------------------------------

// To customize the position of the messages:

import { Field, Form, Message, Submit } from '@jlbelanger/formosa';

<Form showMessage={false}>
	<h1>Add user</h1>
	<Message />
	<Field label="Username" name="username" />
	<Submit />
</Form>