Dealer Form Components

/
├── index.ts
├── src
│   ├── components
│   │   ├── astro 
│   │   │   ├── CheckBox.astro 
│   │   │   ├── Form.astro 
│   │   │   ├── FormSectionTitle.astro 
│   │   │   ├── Input.astro 
│   │   │   ├── Select.astro 
│   │   │   └── SuccessModal.astro
│   │   ├── react 
│   │   │   ├── CarSelects.tsx
│   │   │   ├── FileInput.tsx
│   │   │   ├── ReactInput.tsx
│   │   │   └── ReactSelect.tsx
│   └── utils.ts
├── tsconfig.json
└── package.json

The index.ts file is the "entry point" for your package. Export your components in index.ts to make them importable from your package.

Astro components

CheckBox

With label

---
import { CheckBox } from "dealer-form-components";
---

<CheckBox name="privacy_policy" label="Privacy Policy" />

With slot

---
import { CheckBox } from "dealer-form-components";
---

<CheckBox name="privacy_policy">
    I agree that I have read <a href="/privacy-policy" target="_blank">the privacy policy</a>
</CheckBox>

FormSectionTitle

---
import { FormSectionTitle } from "dealer-form-components";
---

<FormSectionTitle text="Contact Information" />

Select

---
import { Select } from "dealer-form-components";
---

<Select name="brand" label="Brand" required options={["Ford","Jeep","Kia"]} />

Input

---
import { Input } from "dealer-form-components";
---

<Input name="full_name" label="Full Name" type="text" required />

Form

Without reload

---
import { Form } from "dealer-form-components";
import Button from "./Button.astro";
---

<Form className="[...]">
    [...]
    <Button slot="submit-button"className="w-full">Send</Button>
</Form>

With reload

---
import { Form, FormSectionTitle, Input } from "dealer-form-components";
import Button from "./Button.astro";
---

<Form className="[...]" reload="true">
    <FormSectionTitle text="Contact Information" />
    <Input name="full_name" label="Full Name" required />
    <Input name="phone" type="tel" label="Phone" required />
    <Input name="email" type="email" label="Email" required />

    //Must be theme span for buttons
    <Button slot="submit-button">Send</Button>
</Form>

React Components

CarSelects

---
import { CarSelects } from "dealer-form-components";
---

<CarSelects client:visible required />

FileInput

---
import { FileInput } from "dealer-form-components";
---

<FileInput client:visible />

ReactInput

Component for inventory page

---
import { ReactInput } from "dealer-form-components";
---

<ReactInput name="name" onChangeValue={setName} activeInput={activeName} label="Name" required />

ReactSelect

Component for inventory page

---
import { ReactSelect } from "dealer-form-components";
---

<ReactSelect id='type' label="Type" data={data} value={value} handleChange={(n) => setTypeForm(parseInt(n.target.value))} dark={dark} />

Components params

CheckBox

Param	Type	Required
label	string	optional
name	string	optional

Form

Param	Type	Required
className	string	optional
reload	string	optional
slot	HTMLElement	optional
slot - submit-button	HTMLElement	optional

FormSectionTitle

Param	Type	Required
text	string	required

Input

Param	Type	Required	Default
label	string	required
type	"text", "date","time","tel","email"	optional	text
name	string	optional	input
required	boolean	optional	true
value	string	optional

Select

Param	Type	Required	Default
label	string	required
options	Array	optional
name	string	optional	select
required	boolean	optional	true

CarSelects

Param	Type	Required
required	boolean	optional

FileInput

No params

ReactInput

Param	Type	Required	Default
label	string	required
name	string	required	input
required	boolean	required	false
type	string	optional	text
onChangeValue	()=>void	optional
activeInput	boolean	optional	false

ReactSelect

Param	Type	Required
label	string	required
options	Array	required
key	string	optional
onChangeValue	()=>void	optional

Functions

submitForm

In astro components add this script

<script>
    import { actions, isInputError } from 'astro:actions';
    import { submitForm } from 'dealer-form-components';
    const formAction = actions.myAction;
    submitForm(formAction, isInputError);
</script>

Actions required

1. Include files for package to be included in bundler:

export default {
	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',  "./node_modules/dealer-form-components/src/**/*.{astro,js,jsx,ts,tsx}"],
    theme: {
        ...
    }
}

2. Add custom color:

In tailwind.config.mjs add this custom colors:

export default {
	theme: {
        extend: {
            colors: {
                // add error color
                "error-color": ...,
                // add accent color
                "accent-color": ...
            }
        }
    }
}

3. Add section title font size:

In tailwind.config.mjs add this custom color:

export default {
	theme: {
        extend: {
            // add font size
            fontSize: {
                "section-title": ...
            }
        }
    }
}