@bolttech/template-editor 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 BoltTech
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,321 @@
+# @bolttech/template-editor
+
+A powerful, drag-and-drop visual template editor built with React, TypeScript, and Craft.js. Create dynamic templates with variables, rich content, and professional layouts - perfect for email templates, landing pages, and dynamic content generation.
+
+## ✨ Features
+
+- **🎨 Visual Drag & Drop Editor**: Intuitive interface for building templates without code
+- **📱 Responsive Design**: Built-in responsive controls and preview modes
+- **🔧 Variable System**: Dynamic content with Handlebars-style variables (`{{variable}}`)
+- **🧱 Rich Component Library**: Text, images, buttons, containers, and dividers
+- **⚡ Real-time Editing**: See changes instantly as you build
+- **📤 HTML Export**: Generate clean, production-ready HTML
+- **🎯 TypeScript Support**: Full type safety and excellent developer experience
+- **🔒 Shadow DOM Isolation**: Styles and components are fully encapsulated
+
+## 📦 Installation
+
+### NPM
+
+```bash
+npm install @bolttech/template-editor
+```
+
+### Yarn
+
+```bash
+yarn add @bolttech/template-editor
+```
+
+### Peer Dependencies
+
+The library requires these peer dependencies to be installed in your project:
+
+```bash
+# For React 16.8+, 17, 18 or 19
+npm install react react-dom
+```
+
+> **Note**: All other dependencies (monaco-editor, handlebars, react-icons, htmlparser2, sanitize-html) are now included automatically with the library installation.
+
+## 🚀 Quick Start
+
+### Basic Usage
+
+```tsx
+import React from 'react';
+
+import { TemplateEditor } from '@bolttech/template-editor';
+import '@bolttech/template-editor/style.css';
+
+function App() {
+  return (
+    <div style={{ height: '100vh' }}>
+      <TemplateEditor />
+    </div>
+  );
+}
+
+export default App;
+```
+
+### With Variables and Schema
+
+```tsx
+import React from 'react';
+
+import {
+  PlaceholderData,
+  PlaceholderSchema,
+  TemplateEditor,
+} from '@bolttech/template-editor';
+import '@bolttech/template-editor/style.css';
+
+const placeholderData: PlaceholderData = {
+  user: {
+    name: 'John Doe',
+    email: 'john@example.com',
+    profile: {
+      age: 28,
+      verified: true,
+    },
+  },
+  company: {
+    name: 'BoltTech',
+    address: {
+      city: 'São Paulo',
+      country: 'Brazil',
+    },
+  },
+  product: {
+    name: 'Template Editor',
+    price: 99.99,
+  },
+  campaign: {
+    active: true,
+  },
+};
+
+const placeholderSchema: PlaceholderSchema[] = [
+  {
+    key: 'user.name',
+    label: 'User Name',
+    value: 'John Doe',
+    type: 'text',
+  },
+  {
+    key: 'user.email',
+    label: 'User Email',
+    value: 'user@example.com',
+    type: 'text',
+  },
+  {
+    key: 'product.price',
+    label: 'Product Price',
+    value: 0,
+    type: 'number',
+  },
+  {
+    key: 'campaign.type',
+    label: 'Campaign Type',
+    value: 'email',
+    type: 'enum',
+    options: [
+      { label: 'Email Campaign', value: 'email' },
+      { label: 'SMS Campaign', value: 'sms' },
+      { label: 'Push Notification', value: 'push' },
+    ],
+  },
+];
+
+function App() {
+  return (
+    <div style={{ height: '100vh' }}>
+      <TemplateEditor
+        placeholders={placeholderData}
+        placeholderSchema={placeholderSchema}
+      />
+    </div>
+  );
+}
+```
+
+## 📚 API Reference
+
+### Props
+
+The `TemplateEditor` component accepts two optional props:
+
+| Prop                | Type                  | Description                                           |
+| ------------------- | --------------------- | ----------------------------------------------------- |
+| `placeholders`      | `PlaceholderData`     | Data for template variables (supports nested objects) |
+| `placeholderSchema` | `PlaceholderSchema[]` | Schema definitions for variable types and options     |
+
+### Basic Example
+
+```tsx
+const placeholders = {
+  user: { name: 'John Doe', email: 'john@example.com' },
+  company: { name: 'ACME Corp' },
+};
+
+const schema = [
+  { key: 'user.name', label: 'User Name', value: 'Default', type: 'text' },
+  {
+    key: 'user.role',
+    label: 'Role',
+    value: 'user',
+    type: 'enum',
+    options: ['admin', 'user'],
+  },
+];
+
+<TemplateEditor placeholders={placeholders} placeholderSchema={schema} />;
+```
+
+📋 **Need more details?** See [complete API reference](docs/api/types.md) for full TypeScript definitions.
+
+## 🧱 Built-in Blocks
+
+The editor includes drag & drop components:
+
+- **📝 Text** - Rich text with formatting and variables
+- **🔘 Button** - Interactive buttons with styling
+- **🖼️ Image** - Responsive images with alt text
+- **📦 Box** - Layout containers with spacing controls
+- **〰️ Divider** - Visual separators
+- **🔗 Variable** - Dynamic content with Handlebars syntax (`{{variable.name}}`)
+
+## 🎯 Use Cases
+
+Perfect for creating:
+
+- **📧 Email templates** - Marketing emails, newsletters, notifications
+- **📄 Landing pages** - Product launches, campaigns, lead generation
+- **📋 Documents** - Reports, invoices, certificates
+- **🎨 Dynamic content** - Personalized content with variables
+
+💡 **Want examples?** Check [docs/](docs/) for sample implementations.
+
+## 🎨 Styling
+
+The editor uses **Shadow DOM** for complete style isolation - no CSS conflicts with your app!
+
+## 🔧 TypeScript Support
+
+Full TypeScript support included:
+
+```tsx
+import type {
+  PlaceholderData,
+  PlaceholderSchema,
+  TemplateEditorProps,
+} from '@bolttech/template-editor';
+```
+
+## 🐛 Troubleshooting
+
+**Styles not loading?**
+
+```tsx
+import '@bolttech/template-editor/style.css';
+```
+
+**Peer dependency warnings?**
+
+```bash
+npm install react react-dom
+```
+
+## 📋 Requirements
+
+- **Node.js**: ≥16.0
+- **React**: ≥16.8.0 (supports React 16.8, 17, 18, 19)
+- **TypeScript**: ≥4.0 (recommended)
+
+## 📄 License
+
+MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🧪 Testing
+
+The library includes comprehensive tests to ensure reliability:
+
+```bash
+# Run tests once
+npm run test:run
+
+# Run tests in watch mode
+npm run test:watch
+
+# Run tests with coverage
+npm run test:coverage
+
+# Run full CI pipeline (lint + test + build)
+npm run ci
+```
+
+## 🔧 Development & Deployment
+
+### Pre-commit and Pre-push Hooks
+
+This project uses Husky to ensure code quality:
+
+**Pre-commit hooks:**
+
+- ✅ Code formatting and linting (via lint-staged)
+- ✅ Test execution
+
+**Pre-push hooks:**
+
+- ✅ Test execution with coverage
+- ✅ Build verification
+
+### Available Scripts
+
+```bash
+# Development
+npm run dev          # Start development server
+npm run preview      # Preview production build
+
+# Code Quality
+npm run lint         # Run ESLint
+npm run format       # Fix formatting and linting
+npm run format:check # Check formatting only
+
+# Testing
+npm run test         # Run tests in watch mode
+npm run test:run     # Run tests once
+npm run test:coverage # Run tests with coverage report
+npm run test:watch   # Run tests in watch mode
+
+# Building
+npm run build        # Build for production
+npm run build:lib    # Build library only
+
+# CI/CD
+npm run ci           # Run complete CI pipeline
+```
+
+### Docker Support
+
+Build and test in Docker:
+
+```bash
+# Build with tests included
+docker build -f Dockerfile.jenkins -t template-editor .
+```
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [development guide](docs/DEVELOPMENT.md) for details.
+
+## 🆘 Support
+
+For support, questions, or assistance with the Template Editor, please contact our Shared Services team:
+
+📧 **Email**: shared-services@bolttech.io
+
+---
+
+Built with ❤️ by BoltTech for creating beautiful, dynamic templates with ease.