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": ...
            }
        }
    }
}