sweetest-alert

⚠️ Not Production Ready This package is currently under development and not yet ready for production use. APIs may change without notice.

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

Installation

yarn add @planningcenter/sweetest-alert

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

@import "@planningcenter/tapestry/dist/index.css";
``

### Peer Dependencies

This package requires the following peer dependencies:

- `react` ^18.3.1
- `react-dom` ^18.3.1
- `@planningcenter/tapestry` ^2.3.0
- `@planningcenter/icons` ^15.25.0

## 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

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

Alert Types

The component supports five visual types:

// 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:

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 | | confirm | () => void | No | - | Callback executed when confirm button is clicked | | cancel | () => 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:

# Install dependencies
yarn install

# Start the development server
yarn dev

Then open your browser to the URL shown in the terminal (typically http://localhost:5173). The demo showcases all alert types and features with interactive buttons.

Running Tests

The project uses Vitest for testing:

# Run tests once
yarn test

# Run tests in watch mode
yarn test --watch

Linting

# Lint JavaScript/TypeScript files
yarn lint:js

# Lint CSS files
yarn lint:css

License

MIT