npm package: @planningcenter/sweetest-alert
Description: The sweetest alert ever
Author: Daniel Marino
Latest version: 1.1.0

# Sweetest Alert

A lightweight, React alert/modal dialog component that replaces SweetAlert2 with a custom implementation using native HTML dialog elements.

## Installation

```bash
yarn add @planningcenter/sweetest-alert
```

In your product’s main CSS file (ex. `app/assets/stylesheets/application.css`) add the required CSS imports:

```css
@import "@planningcenter/tapestry/dist/index.css";
@import "@planningcenter/sweetest-alert/style.css";
```

### Peer Dependencies

This package requires the following peer dependencies:

- `react` ^18.3.1
- `react-dom` ^18.3.1
- `@planningcenter/tapestry` ^2.10.1
- `@planningcenter/icons` ^15.29.1

## Usage

### Basic Example

```jsx
import { SweetestAlert } from '@planningcenter/sweetest-alert'

// Simple notification
SweetestAlert({
  title: "Warning!",
  content: "Watch out, he’s coming to get you!",
})
```

### Confirmation Dialog

```jsx
SweetestAlert({
  type: "danger",
  title: "Delete Item",
  content: "Are you sure you want to delete this item?",
  onConfirm: () => console.log("Confirmed"),
  onCancel: () => console.log("Cancelled")
})
```

### Alert Types

The component supports five visual types:

```jsx
// Info alert
SweetestAlert({
  type: "info",
  title: "Information",
  content: "This is an informational message."
})

// Success alert
SweetestAlert({
  type: "success",
  title: "Success!",
  content: "Operation completed successfully."
})

// Warning alert (default)
SweetestAlert({
  type: "warning",
  title: "Warning",
  content: "Please proceed with caution."
})

// Error alert
SweetestAlert({
  type: "error",
  title: "Error",
  content: "Something went wrong."
})

// Danger alert (for destructive actions)
SweetestAlert({
  type: "danger",
  title: "Delete Account",
  content: "This action cannot be undone.",
  confirmButton: "Delete"
})
```

### Custom Content

You can pass React components as content for rich formatting:

```jsx
SweetestAlert({
  title: "Custom Content",
  content: (
    <>
      <p>You can include any React elements:</p>
      <ul>
        <li>Lists</li>
        <li>Links</li>
        <li>Formatted text</li>
      </ul>
    </>
  )
})
```

## API

### Parameters

| Parameter | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| `title` | `string` | Yes | - | The main heading text displayed at the top of the modal |
| `content` | `string \| React.ReactNode` | Yes | - | The body content. Accepts plain text or React components |
| `type` | `"info" \| "success" \| "error" \| "danger" \| "warning"` | No | `"warning"` | The visual type of alert, affects icon and styling |
| `onConfirm` | `() => void` | No | - | Callback executed when confirm button is clicked |
| `onCancel` | `() => void` | No | - | Callback executed when cancel button is clicked |
| `confirmButton` | `string` | No | `"Okay"` | Custom text for the confirm button |
| `hideCancel` | `boolean` | No | `false` | When true, hides the cancel button for simple notifications |

## Development

### Running the Demo

To run the interactive demo locally:

```bash
# Install dependencies
yarn install

# Start the development server
yarn dev
```

Then open your browser to `http://localhost:3000`. The demo showcases all alert types and features with interactive buttons.

### Running Tests

The project uses Vitest for testing:

```bash
# Run tests once
yarn test

# Run tests in watch mode
yarn test --watch
```

### Linting

```bash
# Lint JavaScript/TypeScript files
yarn lint:js

# Lint CSS files
yarn lint:css
```

## License

MIT