@dearj/types - TypeScript Definitions for DearJ

🌟 Overview

The @dearj/types package provides comprehensive TypeScript type definitions for the DearJ Drag & Drop Email Editor Suite. These types ensure type safety and enhance developer experience when working with DearJ components in TypeScript projects.

📦 Installation

Install as a development dependency using npm or yarn:

npm install --save-dev @dearj/types

or

yarn add -D @dearj/types

🛠️ Key Type Definitions

Core Template Structure

type Template = {
  counters: Record<string, number>;
  body: Body;
  schemaVersion?: number;
};

type Body = {
  id: string;
  rows: Row[];
  headers?: [];
  footers?: [];
  values?: Values;
};

type Row = {
  id: string;
  cells: number[];
  columns: Column[];
  values: Values;
};

type Column = {
  id: string;
  contents: Content[];
  values: Values;
};

type Content = {
  id: string;
  type: string;
  values: Values;
};

Editor Configuration

type EditorConfig = {
  authorization: string;
  version: string | number;
};

Tool Builder Definitions

type ToolBuilderConfig = {
  id: string;
  name: string;
  icon: ElementType;
  builderOptionsPage: ToolOptionsBuilderConfig;
  toolInsertObject: ReactNode | ((...args) => ReactNode) | Row;
  // ...additional properties
};

type ToolOptionsBuilderConfig = {
  builderGroups: BuilderGroup[];
};

type BuilderGroup = {
  icon: ElementType;
  groupTitle: string;
  builderGroupProperties: BuilderGroupProperties[];
};

Event and Message Types

type IFrameMessage = {
  type: string;
  data: {
    origin: string;
    [key: string]: any;
  };
  timestamp: number;
  securityToken: string;
};

💡 Example

import { EditorConfig, Template, EmailEditor } from "dearj";

const config: EditorConfig = {
  authorization: "your_token_here",
  version: "1.2.0",
};

const initialTemplate: Template = {
  counters: { section: 1 },
  body: {
    id: "main-body",
    rows: [
      // ...row definitions
    ],
  },
};

const editor = new EmailEditor(config, initialTemplate);

📒 Notes

• These types are automatically recognized when using DearJ in TypeScript projects
• Includes definitions for all core entities: templates, rows, columns, content blocks
• Provides strict typing for editor configuration and message passing
• Covers both React-specific types and framework-agnostic structures

📝 License

DearJ is available under the BSD-3-CLAUSE License.