@autosmart/email-lib v1.0.17

@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';

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 suggestions = [
    { label: 'First Name', value: 'firstName' },
    { label: 'Last Name', value: 'lastName' },
    { label: 'Email', value: 'email' },
    { label: 'Company Name', value: 'companyName' },
    { label: 'Order Number', value: 'orderNumber' },
    { label: 'Order Total', value: 'orderTotal' }
  ]

   const handleSave = (template: Template) => {
    console.log('Template saved:', template);
  };

  const handleDelete = (templateId: string) => {
    console.log('Template deleted:', templateId);
  };

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

Props

EmailTemplateVerticalTabs

Template Interface

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

Styling

The library comes with all required styles bundled into a single CSS file. Simply import:

import '@autosmart/email-lib/dist/styles.css';

This includes:

• Library styles
• PrimeReact theme
• PrimeIcons
• Quill editor styles

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
• @emotion/react 11.11.3 or higher
• @emotion/styled 11.11.0 or higher

Development

1. Clone the repository
2. Install dependencies:

   npm install

3. Start Storybook:

   npm run storybook

4. Build the library:

   npm run build

License

MIT

Author

autosmart

Repository

GitHub Repository