Package Exports

@autosmart/email-lib
@autosmart/email-lib/dist/index.esm.js
@autosmart/email-lib/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@autosmart/email-lib) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@autosmart/email-lib

A React library for managing email templates with edit and update functionality. This library provides a rich text editor with mention functionality and template management features.

Features

Rich text editor with mention functionality
Template management with vertical tabs
Support for attachments
Responsive design
TypeScript support
Built with PrimeReact components

Installation

npm install @autosmart/email-lib

Usage

Basic Usage

import { EmailTemplateVerticalTabs } from '@autosmart/email-lib';
import '@autosmart/email-lib/dist/styles.css';
import 'quill/dist/quill.snow.css'; // Required for the editor

function App() {
  const templates = [
    {
      id: '1',
      name: 'Welcome Email',
      subject: 'Welcome to Our Service',
      description: 'Welcome email template',
      content: 'Hello @firstName, welcome to our service!',
      attachments: []
    }
  ];

  const handleTemplateUpdate = (updatedTemplate) => {
    console.log('Template updated:', updatedTemplate);
  };

  return (
    <EmailTemplateVerticalTabs
      templates={templates}
      onTemplateUpdate={handleTemplateUpdate}
    />
  );
}

Props

EmailTemplateVerticalTabs

Prop	Type	Required	Description
templates	`Template[]`	Yes	Array of template objects
onTemplateUpdate	`(template: Template) => void`	Yes	Callback function when a template is updated

Template Interface

interface Template {
  id: string;
  name: string;
  subject: string;
  description: string;
  content: string;
  attachments?: File[];
}

Styling

The library comes with its own styles. Make sure to import the required CSS files:

import '@autosmart/email-lib/dist/styles.css';
import 'quill/dist/quill.snow.css'; // Required for the editor

You can override the default styles by targeting the following CSS classes:

.email-template-container - Main container
.email-template-tabs - Tabs container
.email-template-content - Content area
.email-template-form - Form container
.email-template-editor - Editor container

Dependencies

React 16.8.0 or higher
React DOM 16.8.0 or higher
PrimeReact 10.9.4 or higher
PrimeIcons 7.0.0 or higher
Quill 1.3.7 or higher

Development

Clone the repository
Install dependencies:
```
npm install
```
Start Storybook:
```
npm run storybook
```
Build the library:
```
npm run build
```

License

MIT

Author

autosmart

Repository

GitHub Repository