npm package: @fulers/react-email
Description: Fulers React Email package with EmailProvider, theme support, and re-exported React Email components
Author: Fulers
Latest version: 1.0.0

# @fulers/react-email

Production-ready React Email package with EmailProvider, theme support, and all React Email components bundled.

## Features

- 🎨 **Theme Support**: Light and dark themes from Laravel config
- 🌍 **RTL/LTR Support**: Automatic text direction based on locale
- 🎯 **Type-Safe**: Full TypeScript support
- 💨 **Tailwind CSS**: Built-in Tailwind support
- 📦 **All-in-One**: Includes all React Email components
- 🚀 **Production Ready**: EmailProvider handles all configuration

## Installation

```bash
npm install @fulers/react-email
```

That's it! No need to install `@react-email/components`, `@react-email/tailwind`, or `react` separately.

## Usage

### Basic Email Template

```tsx
import * as React from "react";
import {
  EmailProvider,
  Button,
  Heading,
  Text,
  Section,
} from "@fulers/react-email";
import type { BaseEmailProps } from "@fulers/react-email";

interface WelcomeEmailProps extends BaseEmailProps {
  userName: string;
}

export const WelcomeEmail = (props: WelcomeEmailProps) => {
  return (
    <EmailProvider {...props} preview="Welcome!">
      <Section className="mb-8 text-center">
        <Heading className="text-2xl font-bold text-text">
          Welcome, {props.userName}!
        </Heading>
      </Section>

      <Section className="mb-6">
        <Text className="text-base text-text">
          We're excited to have you on board.
        </Text>
      </Section>

      <Section className="text-center">
        <Button
          href={props.appUrl}
          className="rounded-md bg-primary px-6 py-3 text-white"
        >
          Get Started
        </Button>
      </Section>
    </EmailProvider>
  );
};
```

### PHP Email Class

```php
<?php

namespace Modules\Users\Notifications\Mail;

use Fulers\Foundation\Abstracts\Email;
use Illuminate\Contracts\Queue\ShouldQueue;

class WelcomeEmail extends Email implements ShouldQueue
{
    public function __construct(
        public User $user
    ) {
        parent::__construct();
    }

    protected function buildViewData(): array
    {
        return array_merge(parent::buildViewData(), [
            'userName' => $this->user->name,
        ]);
    }

    public function build(): self
    {
        return $this
            ->view('users::emails.welcome-email')
            ->subject('Welcome!');
    }
}
```

## EmailProvider

The `EmailProvider` component wraps your email content and handles:

- HTML structure with locale and direction
- Tailwind configuration from Laravel theme
- Responsive container
- Preview text

```tsx
<EmailProvider
  {...props} // Spread all BaseEmailProps
  preview="Preview text" // Optional preview text
>
  {/* Your email content */}
</EmailProvider>
```

## Available Components

All React Email components are re-exported:

- `EmailProvider` - Our custom provider (wraps everything)
- `Button` - Email-safe buttons
- `Container` - Centered container
- `Heading` - Headings (h1-h6)
- `Text` - Paragraphs
- `Hr` - Horizontal rules
- `Link` - Links
- `Section` - Layout sections
- `Img` - Images
- `Row` / `Column` - Grid layout
- `CodeBlock` / `CodeInline` - Code formatting
- `Markdown` - Markdown support
- `Font` - Custom fonts
- And more...

See [React Email docs](https://react.email/docs/components/button) for component details.

## Tailwind Classes

All classes use theme colors from Laravel `config/theme.php`:

### Colors

- `bg-primary`, `text-primary` - Primary brand color
- `bg-secondary`, `text-secondary` - Secondary color
- `bg-background` - Page background
- `bg-surface` - Card/container background
- `text-text` - Primary text color
- `text-text-secondary` - Secondary text color
- `border-border` - Border color
- `bg-success`, `bg-warning`, `bg-error`, `bg-info` - Semantic colors

### Spacing

- `p-xs`, `m-xs` through `p-3xl`, `m-3xl`

### Border Radius

- `rounded-sm` through `rounded-full`

### Fonts

- `font-body`, `font-heading`, `font-mono`

## TypeScript

```typescript
import type { BaseEmailProps, EmailTheme } from "@fulers/react-email";

interface MyEmailProps extends BaseEmailProps {
  customField: string;
}
```

## Theme Configuration

Theme comes from Laravel's `config/theme.php`:

```php
// config/theme.php
return [
    'themes' => [
        'light' => [
            'colors' => [
                'primary' => '#5469d4',
                // ...
            ],
        ],
    ],
];
```

The `themeConfig` is automatically passed to all emails via the Email abstract class.

## RTL Support

Automatic RTL for Arabic, Hebrew, Persian, and Urdu:

```tsx
// Automatically handled by EmailProvider
<EmailProvider {...props}>
  {/* Content flows RTL for ar, he, fa, ur locales */}
</EmailProvider>
```

## Development

```bash
# Install dependencies
npm install

# Build package
npm run build

# Watch mode
npm run dev
```

## License

MIT