email-builder-online 1.0.0 → 1.0.2

package/README.md

@@ -1,10 +1,40 @@
-# @usewaypoint/editor-sample
+# Email Builder - Editor Sample
 
-Use this as a sample to self-host EmailBuilder.js.
+This project provides a sample implementation of an email builder, demonstrating how to integrate and use the various building blocks and features. It allows users to design and customize email templates with a drag-and-drop interface.
 
-To run this locally, fork the repository and then in this directory run:
+## Usage
 
-- `npm install`
-- `npx vite`
+To use the email builder, simply include the web component in your HTML. The component exposes several properties that can be used to customize its behavior and appearance.
 
-Once the server is running, open http://localhost:5173/email-builder-js/ in your browser.
+```html
+<div id="email-builder-container"></div>
+<script type="module">
+  import EmailBuilder from './dist/email-builder.js';
+
+  const container = document.getElementById('email-builder-container');
+
+  EmailBuilder({
+    primaryColor: '#FF5733',
+    secondaryColor: '#33FF57',
+    galleryImages: true,
+    freeMode: false,
+    darkMode: true,
+    heightContent: '800px',
+    stickyHeader: true,
+    disableSticky: false,
+  });
+</script>
+```
+
+## Available Props
+
+The `EmailBuilder` component accepts the following props:
+
+- `primaryColor`: (string, default: `#058705`) Sets the primary color theme of the builder.
+- `secondaryColor`: (string, default: `#079707`) Sets the secondary color theme of the builder.
+- `galleryImages`: (boolean, default: `false`) Enables or disables the image gallery feature.
+- `freeMode`: (boolean, default: `true`) If `true`, allows free-form editing; if `false`, imposes stricter design constraints.
+- `darkMode`: (boolean, default: `false`) Enables or disables dark mode.
+- `heightContent`: (string, default: `calc(80dvh - 80px)`) Sets the height of the content area.
+- `stickyHeader`: (boolean, default: `true`) Enables or disables the sticky header.
+- `disableSticky`: (boolean, default: `false`) Disables all sticky elements within the builder.

package/dist/index.cjs

@@ -4,10 +4,6 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -28,11 +24,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 
 // src/index.tsx
 var index_exports = {};
-__export(index_exports, {
-  default: () => index_default
-});
 module.exports = __toCommonJS(index_exports);
-var import_react58 = require("react");
+var import_react58 = __toESM(require("react"), 1);
+var import_react_dom = __toESM(require("react-dom"), 1);
 var import_react_dnd4 = require("react-dnd");
 var import_react_dnd_html5_backend = require("react-dnd-html5-backend");
 var import_material46 = require("@mui/material");
@@ -19099,6 +19093,7 @@ var getTheme = (mainColor = BRAND_BLUE, secondaryColor = BRAND_BLUE, darkMode =
 var theme_default = getTheme;
 
 // src/index.tsx
+var import_react_to_webcomponent = __toESM(require("react-to-webcomponent"), 1);
 var import_jsx_runtime96 = require("react/jsx-runtime");
 var EmailBuilder = ({
   primaryColor,
@@ -19124,7 +19119,7 @@ var EmailBuilder = ({
     setDarkMode(finalDarkMode);
   }, [finalDarkMode]);
   const theme = theme_default(finalPrimaryColor, finalSecondaryColor, isDark);
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_react_dnd4.DndProvider, { backend: import_react_dnd_html5_backend.HTML5Backend, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_material46.ThemeProvider, { theme, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { style: { position: "relative", border: "1px solid gray" }, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_react_dnd4.DndProvider, { backend: import_react_dnd_html5_backend.HTML5Backend, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_material46.ThemeProvider, { theme, children: [
     /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_material46.CssBaseline, {}),
     /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       App,
@@ -19138,6 +19133,7 @@ var EmailBuilder = ({
         stickyHeader: finalStickyHeader
       }
     )
-  ] }) });
+  ] }) }) });
 };
-var index_default = EmailBuilder;
+var EmailBuilderElement = (0, import_react_to_webcomponent.default)(EmailBuilder, import_react58.default, import_react_dom.default);
+customElements.define("email-builder", EmailBuilderElement);

package/dist/index.d.cts

@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface EmailBuilderProps {
     primaryColor?: string;
     secondaryColor?: string;
@@ -10,6 +8,5 @@ interface EmailBuilderProps {
     stickyHeader?: boolean;
     disableSticky?: boolean;
 }
-declare const EmailBuilder: React.FC<EmailBuilderProps>;
 
-export { type EmailBuilderProps, EmailBuilder as default };
+export type { EmailBuilderProps };

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-import React from 'react';
-
 interface EmailBuilderProps {
     primaryColor?: string;
     secondaryColor?: string;
@@ -10,6 +8,5 @@ interface EmailBuilderProps {
     stickyHeader?: boolean;
     disableSticky?: boolean;
 }
-declare const EmailBuilder: React.FC<EmailBuilderProps>;
 
-export { type EmailBuilderProps, EmailBuilder as default };
+export type { EmailBuilderProps };

package/dist/index.js

@@ -1,5 +1,6 @@
 // src/index.tsx
-import { useEffect as useEffect34, useState as useState43 } from "react";
+import React56, { useEffect as useEffect34, useState as useState43 } from "react";
+import ReactDOM from "react-dom";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { CssBaseline, ThemeProvider } from "@mui/material";
@@ -19164,6 +19165,7 @@ var getTheme = (mainColor = BRAND_BLUE, secondaryColor = BRAND_BLUE, darkMode =
 var theme_default = getTheme;
 
 // src/index.tsx
+import reactToWebComponent from "react-to-webcomponent";
 import { jsx as jsx96, jsxs as jsxs59 } from "react/jsx-runtime";
 var EmailBuilder = ({
   primaryColor,
@@ -19189,7 +19191,7 @@ var EmailBuilder = ({
     setDarkMode(finalDarkMode);
   }, [finalDarkMode]);
   const theme = theme_default(finalPrimaryColor, finalSecondaryColor, isDark);
-  return /* @__PURE__ */ jsx96(DndProvider, { backend: HTML5Backend, children: /* @__PURE__ */ jsxs59(ThemeProvider, { theme, children: [
+  return /* @__PURE__ */ jsx96("div", { style: { position: "relative", border: "1px solid gray" }, children: /* @__PURE__ */ jsx96(DndProvider, { backend: HTML5Backend, children: /* @__PURE__ */ jsxs59(ThemeProvider, { theme, children: [
     /* @__PURE__ */ jsx96(CssBaseline, {}),
     /* @__PURE__ */ jsx96(
       App,
@@ -19203,9 +19205,7 @@ var EmailBuilder = ({
         stickyHeader: finalStickyHeader
       }
     )
-  ] }) });
-};
-var index_default = EmailBuilder;
-export {
-  index_default as default
+  ] }) }) });
 };
+var EmailBuilderElement = reactToWebComponent(EmailBuilder, React56, ReactDOM);
+customElements.define("email-builder", EmailBuilderElement);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "email-builder-online",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
@@ -12,11 +12,14 @@
     "email": "jose.vazcortez@gmail.com",
     "url": "https://www.laravel42.com"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
-	"build-library": "vite build --lib --entry=src/index.ts --name=EmailBuilder --fileName=index",
+    "build-library": "vite build --lib --entry=src/index.ts --name=EmailBuilder --fileName=index",
     "dev": "vite",
-    "build": "vite build",
+    "build": "tsup src/index.tsx --format cjs,esm --dts",
+    "build-vite": "vite build",
     "preview": "vite preview",
     "staticBuild": "esbuild build.js --bundle --outfile=build/email-builder.js --loader:.js=tsx --loader:.svg=dataurl --loader:.ttf=dataurl --format=esm",
     "copy-to-maildrill": "cp -f ./build/email-builder.js ../../../maildrill/resources/js/components/email-builder.js && cp -f ./build/email-builder.css ../../../maildrill/resources/css/email-builder.css",
@@ -62,20 +65,19 @@
     "react-quill": "^2.0.0",
     "react-quill-new": "^3.3.3",
     "react-sticky-el": "^2.1.1",
+    "react-to-webcomponent": "^2.0.1",
     "vite-plugin-dts": "^4.5.4",
     "zod": "^3.22.4",
     "zustand": "^4.5.1"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "@mui/material": "^5.15.10",
+    "react": "^18.2.0",
     "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1"
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
@@ -87,6 +89,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "eslint-plugin-simple-import-sort": "^12.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^5.2.2",
     "vite": "^5.1.0"
   },