ReactFormField is then used to identify the form inputs to be captured by the form. These can be placed at any child level allowing for custom form layouts. The field comes with a predefined component template layout that will handle the input states, label and errors. The module also includes SCSS for the default field component template.

ReactFormField fields can also be dynamically added or removed from the form which will update it's validation state on each props.children change.

Below is a basic example of use inside a react Component -

#### Javascript

`js
import React, { Component } from "react";
import { ReactForm, ReactFormField } from "@adrenalin/react-form";

class FormApp extends Component {
handleFormValidated(formData) {
console.log("Success:", formData);
}

handleFormError(formData) {
console.log("Error:", formData);
}

render() {
return (
onSuccess={this.handleFormValidated.bind(this)}
onError={this.handleFormError.bind(this)}
>
type="text"
name="firstName"
id="firstname"
label="First Name"
placeholder="First Name"
required={true}
validators={["name"]}
errorMessages={{
required: "Please enter your first name."
}}
/>

type="select"
name="selector"
label="Select a value"
required={true}
errorMessages={{
required: "Please select an option."
}}
>
Select an option
First option
Second option
Third option


type="checkbox"
name="terms"
label="Please agree to the terms."
required={true}
errorMessages={{
required: "Please make sure you agree to the terms."
}}
/>

Submit

);
}
}
`

#### SCSS

The module comes with SCSS to handle the structual styles of the returned ReactFormField template component.

This can be imported as per below -

`css
// Import base scss from @adrenalin/react-form npm module
@import "~@adrenalin/react-form/scss/index";
`

SCSS Variables

To assist with modifying the default template styles there are number of SCSS variables that can be predefiend before importing the module scss.

`sass
// ReactForm override variables
$reactform_color_success: lighten(blue, 20%); // success state color
$reactform_color_error: lighten(red, 20%); // error state color
$reactform_field_padding: 1em; // left/right padding for input, select, textarea elements
$reactform_field_bg: #efefef; // background color for field inputs
$reactform_field_margin: 20px; // top/bottom margin between each field
$reactform_input_size: 1.25em; // height of the text input and select elements/labels
$reactform_textarea_size: 10em; // height of the textarea element/label
$reactform_radio_size: 2em; // height of the radio element/label
$reactform_checkbox_size: 2em; // height of the checkbox element/label

// Import base scss from @adrenalin/react-form npm module
@import "~@adrenalin/react-form/scss/index";
`

$3

ReactForm

Most props provided to ReactForm will automatically be passed down to the element. Below are the custom ReactForm specific props.

| Prop | Type | Description |
| ------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onSuccess | function | A callback function which returns an array of all the form fields as objects with their name and value. Fired on the form submit action when all required fields and validations are met. |
| onError | function | A callback function which returns an array of all the form fields as objects with their name and value. Fired on the form submit action when any required fields or validations fail to validate. |
| disableErrorScroll | boolean | If true the form will not attempt to scroll to the first invalid input in the form on form submit. |
| disableSubmitUntilValid | boolean | If true any child type="submit" buttons will have a disabled prop and class added to them until the form reaches a valid state. |
| validators | array | An array of validator patterns to extend the default validators. Custom validators are detailed further here. |
| fieldComponent | component | A react template component that will override the default Field component. More info on custom field template components here. |
| pageSubmit | boolean | If true, preventDefault will only be called if the form is invalid. Useful if you would like the handle the form with a regular POST request instead of AJAX. |

ReactFormField

Most props provided to ReactFormField fields will automatically be passed down and extended to the native input element and also the template component. Below explains custom and modified ReactForm properties and their behaviour.

| Prop | Type | Description |
| ---------------- | ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| type | text, number, tel, email, password, textarea, radio, checkbox, select | Defines the type of input element to render. Select and textarea types will return native and <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> elements, all other elements will use </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> with the </code>type=""<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> property. |<br />| </code>name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | string | The unique name for the field. This name is used in the return fields array on submit/error and for validation checks. |<br />| </code>id<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | string | Standard unique dom id. Used to map the input field to it's label in the field template. |<br />| </code>label<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | string | Text used for the field label. |<br />| </code>required<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | boolean | If </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> the field will expect a positive value in order to validate. |<br />| </code>validators<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | array | An array of strings representing matching validator names. The field will be validated against each validator rule in the array. Validators are detailed further <a href="#markdown-header-default-validators" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">here.</a> |<br />| </code>match<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | string | The unique name of another field to compare and validate the value against. e.g. </code>match="password"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will look for the field with </code>name="password"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and not validate until the values match. |<br />| </code>info<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | string | A string of informational text that the default field template supports. The info text will be rendered just underneath the input and input errors area of the template.<br />| </code>errorMessages<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | object | An object of keyed custom error messages that will override the default validator errors matching the name. e.g. </code>errorMessages={{required: "Please enter your email address."}}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will use the error string when the </code>required<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> validation fails and </code>errorMessages={{required: "Please select an option.", email: "Use a real email eh!"}}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will use the </code>email<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> error message when the field fails the </code>email<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> validator name. |<br />| </code>hideErrors<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | boolean | A boolean to toggle the showing of error messages for the field. Useful if you are just intending to use an error style over the </code>info<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> text prop instead of showing the error message when invalid.<br />| </code>children<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | array | Child elements are supported only for </code>type="select"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> fields and are intended to be standard select options. e.g. </code><option value="first">First option</option><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| </code>fieldComponent<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | component | A react template component that will override the default Field component. <a href="#markdown-header-custom-field-template-component" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">More info on custom field template components here.</a> |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The </code>ReactFormFields<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> can use the following default validators out of the box. Check the validator files in the </code>/src/validators<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> directory of the main repo for more information on the validation and regex used.</p><p class="my-3">---</p><p class="my-3">#### </code>Email<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Validates the field against a valid email pattern regex.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /><ReactFormField<br /> validators={["email"]}<br />><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">---</p><p class="my-3">#### </code>Password<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Validates the field to make sure it only contains at least 8 characters long, includes 1 uppercase letter, 1 lower case letter, 1 number and 1 special character.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /><ReactFormField<br /> validators={["password"]}<br />><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">---</p><p class="my-3">#### </code>Name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Validates the field to make sure it only contains letters (A-Z) and spaces.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /><ReactFormField<br /> validators={["name"]}<br />><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">---</p><p class="my-3">#### </code>Digits<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Validates the field to make sure it only contains digits (0-9).</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /><ReactFormField<br /> validators={["digits"]}<br />><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">---</p><p class="my-3">#### </code>Mobile<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Validates the field to make sure it follows an Australian mobile phone number regex.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /><ReactFormField<br /> validators={["mobile"]}<br />><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">---</p><p class="my-3">#### </code>Date<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Validates the field to make sure it follows a date regex pattern.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /><ReactFormField<br /> validators={["date"]}<br />><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">---</p><p class="my-3">#### </code>Postcode<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Validates the field to make sure it a standard Australian postcode format and range.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /><ReactFormField<br /> validators={["postcode"]}<br />><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Custom validation rules can be created and passed to the </code><ReactForm><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> component as an array via the </code>validators<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />const customValidators = [<br /> {<br /> ID: "ukpostcode",<br /> validate: input => {<br /> var ukPostalRegex = /^[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}$/i;<br /> return ukPostalRegex.test(input.value);<br /> },<br /> error: "Please make sure this is a valid UK postcode."<br /> }<br />]</p><p class="my-3"><ReactForm<br /> validators={customValidators}<br /> onSuccess={this.handleFormValidated.bind(this)}<br /> onError={this.handleFormError.bind(this)}<br />></p><p class="my-3"> <ReactFormField<br /> type="text"<br /> name="uk_postcode"<br /> id="postuk_postcodeode"<br /> label="Postcode (UK)"<br /> required={true}<br /> validators={["ukpostcode"]}<br /> /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Validator Pattern</p><p class="my-3">Each validator is represented as an object with 3 keys.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />{<br /> ID: "ukpostcode",<br /> validate: input => {<br /> var ukPostalRegex = /^[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}$/i;<br /> return ukPostalRegex.test(input.value);<br /> },<br /> error: "Please make sure this is a valid UK postcode."<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### </code>ID : string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">A string representing the validator name and used to identify which fields to validate against.</p><p class="my-3">#### </code>validate : function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">A function that takes the input element as an argument, processes it and returns </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> if valid.</p><p class="my-3">#### </code>error : string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The default error message that will be shown to the user.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Each instance of </code>ReactFormField<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> should return the processed input and props to a template component that will handle the layout of the field.</p><p class="my-3">Out of the box a default template component will be used for all available field types to handle different structual markup (checkbox, radio, select and textarea fields). For reference the default component can be viewed at </code>/src/components/Field.js<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in the main repo.</p><p class="my-3">The base component template will also require an import of the <a href="#markdown-scss" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">SCSS</a> from the module to mainly handle structual styling of the field template.</p><p class="my-3">Below is an example of the rendered markup from a text type input which is invalid -</p><p class="my-3">#### Initialise the field in react</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br /><ReactFormField<br /> type="text"<br /> name="firstName"<br /> id="firstname"<br /> label="First Name First"<br /> placeholder="First Name"<br /> required={true}<br /> validators={["name"]}<br /> errorMessages={{<br /> required: "Please enter your first name."<br /> }}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Rendered output markup (in an invalid state with an error message)</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><div class="react-form__field react-form__field--text is-incomplete is-invalid"><br /> <label for="firstname"><br /> <div class="react-form__field__label"><br /> <div class="react-form__field__label__inner">First Name First</div><br /> </div><br /> <input<br /> type="text"<br /> name="firstName"<br /> id="firstname"<br /> label="First Name First"<br /> placeholder="First Name"<br /> value=""<br /> errors="Please enter your first name."<br /> /><br /> </label><br /> <div class="react-form__field__errors"><br /> <div class="react-form__field__errors__item"><br /> Please enter your first name.<br /> </div><br /> </div><br /></div><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The </code>ReactForm<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>ReactFormField<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> components both provide support for passing a custom template component via the </code>fieldComponent<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop. Passing the component to at the parent </code>ReactForm<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> level will use this field for all child </code>ReactFormField<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> fields, whereas passing the component at the </code>ReactFormField<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> level will just use the template for that specific field.</p><p class="my-3">#### Example Component:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />const MyCustomFieldTemplate = props => {<br /> return (<br /> <div<br /> className={</code>my-custom-field-template<br /> ${props.classes.inheritedClasses}<br /> ${props.classes.isDisabled}<br /> ${props.classes.isIncomplete}<br /> ${props.classes.isFocused}<br /> ${props.classes.isValid}<br /> ${props.classes.isInvalid}<br /> ${props.classes.hasValue}<br /> <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">}<br /> ><br /> <label htmlFor={props.id}>{props.label}</label></p><p class="my-3"> {/<em> input element (input, select, textarea) </em>/}<br /> {props.inputElement}</p><p class="my-3"> {/<em> errors </em>/}<br /> {props.showErrors && props.errors && props.errors.length ? (<br /> <div className={</code>my-custom-field-template__errors<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">}><br /> <div className={</code>my-custom-field-template__errors__item<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">}><br /> {props.errors[0]}<br /> </div><br /> </div><br /> ) : null}<br /> </div><br /> );<br />};<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Use for all ReactFormField fields</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br /><ReactForm<br /> onSuccess={this.handleFormValidated.bind(this)}<br /> onError={this.handleFormError.bind(this)}<br /> fieldComponent={MyCustomFieldTemplate}<br />><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Use for a specific ReactFormField field</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br /><ReactFormField<br /> type="text"<br /> name="firstName"<br /> id="firstname"<br /> label="First Name First"<br /> placeholder="First Name"<br /> required={true}<br /> validators={["name"]}<br /> errorMessages={{<br /> required: "Please enter your first name."<br /> }}<br /> fieldComponent={MyCustomFieldTemplate}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Available </code>fieldComponent<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> props</p><p class="my-3">All props applied to </code>ReactFormField<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> will be passed down to the template component provided. In addition a number of special props are added to assist with building out the template logic.</p><p class="my-3">---</p><p class="my-3">#### </code>inputElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> : element</p><p class="my-3">The input element itself (input, textarea, select), this will let you decide where to render the element inside your template.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />// template component</p><p class="my-3">return(<br /> <label htmlFor={props.id}>{props.label}</label>;</p><p class="my-3"> {/<em>input element</em>/}<br /> {props.inputElement}<br />)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">---</p><p class="my-3">#### </code>classes<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> : object</p><p class="my-3">An object of conditional state classes detailing the current validation and interaction state of the input -</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />classes: {<br /> hasValue: "";<br /> inheritedClasses: "";<br /> isDisabled: "";<br /> isFocused: "";<br /> isIncomplete: "is-incomplete";<br /> isInvalid: "";<br /> isValid: "";<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">---</p><p class="my-3">#### </code>errors<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> : array</p><p class="my-3">An array error message for the corresponding current validation errors</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />errors: ["This field is required.", "Please enter some digits."];<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">---</p><p class="my-3">#### </code>showErrors<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> : boolean</p><p class="my-3">A boolean detailing where to visually show errors for this field. Returned on bluring of an field input or when the form action is submitted.</p><p class="my-3">---</p><p class="my-3">#### </code>valid<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> : boolean</p><p class="my-3">A boolean representing if the input is completly valid and will submit.</p><p class="my-3">---</p><p class="my-3">#### </code>passwordToggleBtn<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> : element</p><p class="my-3">The prebound password toggle button. Only passed for </code>type="password"<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> inputs.</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Developing</h1></p><p class="my-3">JS files for this module are found in the root </code>src<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> folder. The entry point can be found at </code>src/index.js<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. The module also includes base styles inside the </code>scss/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> folder.</p><p class="my-3">To preview and test the module whilst developing there is also an included test react project under </code>test-app<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. This app is generated from create react app and is not included in the outputted npm package.</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Publishing</h1></p><p class="my-3">After making changes, a commit should be created and, if required, merged back into the </code>develop<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> branch. The version number should then be incremented using one of the </code>npm version<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> commands outlined below. This will ensure that a new commit is created and tagged with the new version number.</p><p class="my-3"></code>npm version patch<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - Minor bug fixes/changes</p><p class="my-3"></code>npm version minor<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - For new backwards compatible features</p><p class="my-3"></code>npm version major<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> - For any backwards incompatible changes</p><p class="my-3">Finally, publish your changes to NPM using </code>npm publish<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. This will also push all changes and tags to the </code>develop<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> branch on </code>origin`.<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"24:[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-users h-4 w-4\",\"children\":[[\"$\",\"path\",\"1yyitq\",{\"d\":\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"}],[\"$\",\"circle\",\"nufk8\",{\"cx\":\"9\",\"cy\":\"7\",\"r\":\"4\"}],[\"$\",\"path\",\"kshegd\",{\"d\":\"M22 21v-2a4 4 0 0 0-3-3.87\"}],[\"$\",\"path\",\"1da9ce\",{\"d\":\"M16 3.13a4 4 0 0 1 0 7.75\"}],\"$undefined\"]}]\n25:[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":1}]\n26:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.0.0\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"27:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":12}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@babel/cli\",{\"href\":\"/package/%40babel%2Fcli\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@babel/cli\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.5.5\"}]]}],[\"$\",\"$L5\",\"@babel/core\",{\"href\":\"/package/%40babel%2Fcore\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@babel/core\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.2.2\"}]]}],[\"$\",\"$L5\",\"@babel/preset-env\",{\"href\":\"/package/%40babel%2Fpreset-env\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L29\",\"$undefined\"]}],\"@babel/preset-env\"]}],\"$L2a\"]}],\"$L2b\",\"$L2c\",\"$L2d\",\"$L2e\",\"$L2f\",\"$L30\",\"$L31\",\"$L32\",\"$L33\"]}]}]]}]\n"])</script><script>self.__next_f.push([1,"29:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2a:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.3.1\"}]\n2b:[\"$\",\"$L5\",\"@babel/preset-react\",{\"href\":\"/package/%40babel%2Fpreset-react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@babel/preset-react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.0.0\"}]]}]\n2c:[\"$\",\"$L5\",\"babel-loader\",{\"href\":\"/package/babel-loader\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-loader\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.0.5\"}]]}]\n2d:[\"$\",\"$L5\",\"babel-plugin-transform-object-rest-spread\",{\"href\":\"/package/babel-plugin-transform-object-rest-spread\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-plugin-transform-object-rest-spread\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.26.0\"}]]}]\n2e:[\"$\",\"$L5\",\"babel-plugin-transform-react-jsx\",{\"href\":\"/package/babel-plugin-transform-react-jsx\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-plugin-transform-react-jsx\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.24.1\"}]]}]\n2f:[\"$\",\"$L5\",\"babel-preset-react-app\",{\"href\":\"/package/babel-preset-react-app\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg"])</script><script>self.__next_f.push([1,"\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-preset-react-app\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.0.1\"}]]}]\n30:[\"$\",\"$L5\",\"npm-run-all\",{\"href\":\"/package/npm-run-all\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"npm-run-all\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.1.5\"}]]}]\n31:[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.0.0\"}]]}]\n32:[\"$\",\"$L5\",\"webpack\",{\"href\":\"/package/webpack\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"webpack\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.29.3\"}]]}]\n33:[\"$\",\"$L5\",\"webpack-cli\",{\"href\":\"/package/webpack-cli\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"webpack-cli\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.2.3\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>