sazmail-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-PRESENT Mazlum Ozdogan <https://github.com/mergehez>
+
+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,95 @@
+# Sazmail
+
+This is a React component that lets you use the [Sazmail](https://github.com/mergehez/sazmail) right inside your React applications.
+
+It's pretty straightforward to set up and use. The only dependencies are `react` and `react-dom`.
+
+If you're working with Vue, there's a version for that too: [Sazmail](https://github.com/mergehez/sazmail)
+
+## Installation
+
+```bash
+bun install sazmail-react
+```
+
+```bash
+npm install sazmail-react
+```
+
+## Basic Usage
+
+```tsx
+import React, {useState, useCallback} from 'react';
+import MailBuilder from 'sazmail-react';
+// import type {MailBuilderDocument} from 'sazmail-react' // if you need the type for the document
+
+const App: React.FC = () => {
+    const [doc, setDoc] = useState('{}');
+    const [html, setHtml] = useState<string | undefined>(undefined);
+
+    return (
+        <div style = {{width: '100vw', height:'100vh'}}>
+            <MailBuilder
+                id = "mb-de"
+                json = {doc}
+                html = {html}
+                onUpdateJson = {setDoc}
+                onUpdateHtml = {setHtml}
+                style = {{width: '100%', height: '100%'}}
+            />
+        < /div>
+    );
+}
+export default App;
+```
+
+> Make sure the container for <MailBuilder /> has a defined height, as the builder will try to fill it.
+
+## Properties
+
+> `TJson`: `string` or `MailBuilderDocument`
+
+| Prop         | Type                 | Description                                                                                                                                                                 |
+|--------------|----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| id           | string               | An optional unique ID for the builder instance. Useful if you have multiple builders on a page.                                                                             |
+| json         | TJson or undefined   | The core data for the email template. You can pass a JSON string or a JavaScript object directly. Use with `v-model:json`. An empty object or `'{}'` starts a new template. |
+| html         | string or undefined  | Holds the generated HTML of the email template. Use with `v-model:html`.                                                                                                    |
+| onUpdateJson | (nv: TJson) => void  | Callback function that gets called whenever the JSON data changes. Use this to update your state or perform other actions when the JSON is modified.                        |
+| onUpdateHtml | (nv: string) => void | Callback function that gets called whenever the HTML output changes. Use this to update your state or perform other actions when the HTML is modified.                      |
+
+### MailBuilderDocument
+
+The `json` prop (whether as an object or a string) should conform to this structure:
+
+```typescript
+type BlockId = string;
+export type MailBuilderDocument = {
+    version: string;
+    structure: Record<BlockId, {
+        customName?: string;
+        blockId: BlockId;
+        parentId: BlockId;
+        type: string;
+        condition?: string; // A liquid.js expression for conditional rendering
+        childrenIds?: BlockId[];
+    }>;
+    data: Record<BlockId, Record<string, any>>;
+    testJson?: Record<string, any>; // Sample data for template rendering/testing
+};
+```
+
+> Providing an empty object `{}` or an empty JSON string `'{}'` will initialize a new, blank template.
+
+## A Little More Detail
+
+This component is essentially a bridge to the main [Sazmail](https://github.com/mergehez/sazmail). The builder itself is a self-contained HTML file. `sazmail-react` takes that file, puts it into an iframe, and then uses postMessage and React's state/prop system to pass data back and forth. This way, you get the full builder experience without a complicated setup.
+
+## License
+
+This project is shared under the MIT License. You can find the details in the [LICENSE](LICENSE) file.
+
+Feel free to use it in both personal and commercial projects.
+
+## Contributing
+
+Got ideas or improvements? Contributions are definitely welcome! Please read the [CONTRIBUTING.md](CONTRIBUTING.md) file for details on how to contribute.

package/dist/MailBuilder.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+export type MailBuilderDocument = {
+    version: string;
+    structure: Record<string, {
+        customName?: string;
+        blockId: string;
+        parentId: string;
+        type: string;
+        condition?: string;
+    }>;
+    data: Record<string, Record<string, any>>;
+    testJson?: Record<string, any>;
+};
+export interface MailBuilderRef {
+    requestDataFromBuilder: () => void;
+}
+export interface MailBuilderProps<TJson extends string | MailBuilderDocument> {
+    id?: string;
+    json: TJson | undefined;
+    html?: string | undefined;
+    displayMode?: 'preview' | 'edit';
+    autoSave?: boolean;
+    onUpdateJson: (json: TJson) => void;
+    onUpdateHtml: (html: string | undefined) => void;
+    style?: React.CSSProperties;
+}
+declare const MailBuilder: <TJson extends string | MailBuilderDocument>(props: MailBuilderProps<TJson> & {
+    ref?: React.Ref<MailBuilderRef>;
+}) => React.ReactElement;
+export default MailBuilder;