npm package: @mta162/stencil-review-form
Description: A customizable review form component built with Stencil.js.
Latest version: 1.0.2

# Stencil Review Form Component

A customizable review form component built with Stencil.js. The component allows users to add a review with a rating, author name, and comment. It emits events for submission and cancellation of the form.

## Features

- Star rating selection
- Author and comment input fields with validation
- Emits events on form submission and cancellation
- Customizable styles using CSS variables

## Installation

To install the component, run:

```bash
npm install @mta162/stencil-review-form
```

## Usage

### Basic Usage

To use the component in your project, add the following line to your HTML:

```html
<stencil-review-form formTitle="Your Form Title"></stencil-review-form>
```

### Handling Events
Listen to the ```submitReview``` and ```cancelReview``` events to handle form submissions and cancellations:

```html
<stencil-review-form
  onSubmitReview="handleReviewSubmit($event)"
  onCancelReview="handleReviewCancel()"
></stencil-review-form>

<script>
  function handleReviewSubmit(event) {
    console.log('Review submitted:', event.detail);
  }

  function handleReviewCancel() {
    console.log('Review cancelled');
  }
</script>
```

### Customizing Styles
You can customize the appearance of the component using the following CSS variables:
- ```--primary-color```: Primary text color
- ```--secondary-color```: Secondary text color
- ```--success-color```: Success color
- ```--danger-color```: Danger color
- ```--background-color```: Background color
- ```--submit-button-color```: Submit button text color
- ```--submit-button-background-color```: Submit button background color
- ```--submit-button-border-color```: Submit button border color
- ```--cancel-button-color```: Cancel button text color
- ```--cancel-button-background-color```: Cancel button background color
- ```--cancel-button-border-color```: Cancel button border color
- ```--button-border-radius```: Button border radius

### Example:

```css
review-form {
  --primary-color: #FFFFFF;
  --secondary-color: #B2B2B2;
  --success-color: #1ED760;
  --danger-color: #E91429;
  --background-color: #121212;
  --submit-button-color: #121212;
  --submit-button-background-color: #FFFFFF;
  --submit-button-border-color: #FFFFFF;
  --cancel-button-color: #FFFFFF;
  --cancel-button-background-color: #121212;
  --cancel-button-border-color: #FFFFFF;
  --button-border-radius: 9999px;
}
```
## Example

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Review Form Example</title>
  <script type="module" src="./node_modules/@your-username/review-form/dist/review-form/review-form.esm.js"></script>
  <style>
    review-form {
      --button-color: #007bff;
      --button-cancel-color: #dc3545;
      --border-radius: 5px;
      --background-color: #f8f9fa;
      --font-color: #212529;
      --border-color-success: #28a745;
      --border-color-danger: #dc3545;
    }
  </style>
</head>
<body>
  <review-form
    title="Add a Review"
    onSubmitReview="handleReviewSubmit(event)"
    onCancelReview="handleReviewCancel()"
  ></review-form>

  <script>
    function handleReviewSubmit(event) {
      console.log('Review submitted:', event.detail);
    }

    function handleReviewCancel() {
      console.log('Review cancelled');
    }
  </script>
</body>
</html>
```