@merchi/product-editor 0.1.9

package/.turbo/turbo-build.log

@@ -0,0 +1 @@
+$ tsc && copyfiles -u 2 src/styles/*.css dist/styles/

package/README.md

@@ -0,0 +1,174 @@
+# Merchi Product Editor
+
+A React-based product editor component that allows users to edit product templates using Fabric.js. This library enables customization of product designs through variations, template switching, and canvas manipulation.
+
+## Features
+
+- **Multiple Template Support**: Select and switch between different draft templates
+- **Variation Management**: Update canvas objects based on product variations
+- **Responsive Design**: Works on both desktop and mobile devices
+- **Canvas Customization**: Grid toggle, image upload
+- **Context-based Architecture**: Uses React Context API for state management
+- **Type-safe**: Written in TypeScript with proper type definitions
+
+## Installation
+
+```bash
+npm install @merchi/product-editor
+```
+
+## Usage
+
+### Basic Example
+
+```jsx
+import { ProductEditor } from '@merchi/product-editor';
+
+function App() {
+  const product = {
+    id: 1,
+    name: "Sample Product",
+    draftTemplates: [
+      {
+        id: 1,
+        name: "Template 1",
+        file: {
+          viewUrl: "https://example.com/template1.jpg"
+        },
+        width: 800,
+        height: 600
+      }
+    ]
+  };
+
+  const variations = [
+    {
+      variationField: {
+        id: 1,
+        fieldType: "TEXT_INPUT"
+      },
+      value: "Sample Text"
+    }
+  ];
+
+  const handleSave = () => {
+    // Handle save action
+    console.log('Saved product design');
+  };
+
+  const handleCancel = () => {
+    // Handle cancel action
+    console.log('Editing cancelled');
+  };
+
+  return (
+    <ProductEditor
+      product={product}
+      job={{id: 1}}
+      width={800}
+      height={600}
+      onSave={handleSave}
+      onCancel={handleCancel}
+      variations={variations}
+      groupVariations={[]}
+    />
+  );
+}
+```
+
+### Using the Context API
+
+You can access the editor's context in child components:
+
+```jsx
+import { useProductEditor } from '@merchi/product-editor';
+
+function CustomButton() {
+  const { handleSave, updateCanvasFromVariations } = useProductEditor();
+  
+  const handleUpdate = () => {
+    const newVariations = [/* updated variations */];
+    updateCanvasFromVariations(newVariations);
+  };
+
+  return (
+    <button onClick={handleUpdate}>Update Design</button>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| product | Product | Yes | - | Merchi Product entity containing draft templates |
+| job | Job | Yes | - | Job information |
+| width | number | No | 800 | Width of the editor canvas |
+| height | number | No | 600 | Height of the editor canvas |
+| onSave | () => void | Yes | - | Callback function when saving the edited image |
+| onCancel | () => void | Yes | - | Callback function when canceling the edit |
+| variations | Variation[] | Yes | [] | Array of variations to apply to the templates |
+| groupVariations | Variation[] | Yes | [] | Array of group variations to apply |
+| fontOptions | FontOption[] | No | Default list | Custom fonts for text toolbar |
+| colorPalette | (string \| null)[][] | No | Default palette | Custom color palette for text toolbar |
+
+## Context API
+
+The `useProductEditor` hook provides access to the following properties and methods:
+
+| Property/Method | Type | Description |
+|----------------|------|-------------|
+| canvas | fabric.Canvas | The Fabric.js canvas instance |
+| draftTemplates | Array | Available draft templates with associated variation objects |
+| selectedTemplate | number | ID of the currently selected template |
+| handleTemplateChange | Function | Method to switch between templates |
+| showGrid | boolean | Whether the grid is currently displayed |
+| setShowGrid | Function | Toggle grid visibility |
+| showPreview | boolean | Whether the preview area is displayed |
+| togglePreview | Function | Toggle preview area visibility |
+| canvasObjects | Map | Map of canvas objects indexed by variation field ID |
+| updateCanvasFromVariations | Function | Update canvas objects based on changed variations |
+
+## ImageGallery Component
+
+The `ImageGallery` component provides a simple way to display images in your product editor when other images fail to load.
+
+```jsx
+import { ImageGallery } from '@merchi/product-editor';
+
+function Example() {
+  return (
+    <ImageGallery 
+      fallbackImageUrl="https://example.com/default-image.jpg"
+    />
+  );
+}
+```
+
+### Props for ImageGallery
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| fallbackImageUrl | string | No | null | URL to an image that will be displayed when the primary image fails to load |
+
+The ImageGallery component is designed to be simple and focused on providing fallback functionality for image loading errors.
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm start
+
+# Build the library
+npm run build
+
+# Run tests
+npm test
+```
+
+## License
+
+MIT 

package/dist/components/AlignMenu.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import '../styles/TextToolbar.css';
+export declare const AlignMenu: React.FC;

package/dist/components/AlignMenu.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlignMenu = void 0;
+var react_1 = __importStar(require("react"));
+var grommet_icons_1 = require("grommet-icons");
+var ProductEditorContext_1 = require("../context/ProductEditorContext");
+require("../styles/TextToolbar.css");
+var AlignMenu = function () {
+    var _a = (0, ProductEditorContext_1.useProductEditor)(), selectedTextObject = _a.selectedTextObject, updateSelectedText = _a.updateSelectedText;
+    var _b = (0, react_1.useState)(false), showMenu = _b[0], setShowMenu = _b[1];
+    var ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (e) {
+            if (ref.current && !ref.current.contains(e.target)) {
+                setShowMenu(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () { return document.removeEventListener('mousedown', handleClickOutside); };
+    }, []);
+    if (!selectedTextObject || !updateSelectedText)
+        return null;
+    var handleAlign = function (align) {
+        updateSelectedText({ textAlign: align });
+        setShowMenu(false);
+    };
+    return (react_1.default.createElement("div", { className: "align-group", ref: ref },
+        react_1.default.createElement("button", { type: "button", className: "toolbar-button align-trigger", onClick: function () { return setShowMenu(function (prev) { return !prev; }); }, title: "Text Align" }, selectedTextObject.textAlign === 'center' ? react_1.default.createElement(grommet_icons_1.TextAlignCenter, null) :
+            selectedTextObject.textAlign === 'right' ? react_1.default.createElement(grommet_icons_1.TextAlignRight, null) : react_1.default.createElement(grommet_icons_1.TextAlignLeft, null)),
+        showMenu && (react_1.default.createElement("div", { className: "align-popover" },
+            react_1.default.createElement("button", { type: "button", className: "toolbar-button ".concat(selectedTextObject.textAlign === 'left' ? 'active' : ''), onClick: function () { return handleAlign('left'); } },
+                react_1.default.createElement(grommet_icons_1.TextAlignLeft, null)),
+            react_1.default.createElement("button", { type: "button", className: "toolbar-button ".concat(selectedTextObject.textAlign === 'center' ? 'active' : ''), onClick: function () { return handleAlign('center'); } },
+                react_1.default.createElement(grommet_icons_1.TextAlignCenter, null)),
+            react_1.default.createElement("button", { type: "button", className: "toolbar-button ".concat(selectedTextObject.textAlign === 'right' ? 'active' : ''), onClick: function () { return handleAlign('right'); } },
+                react_1.default.createElement(grommet_icons_1.TextAlignRight, null))))));
+};
+exports.AlignMenu = AlignMenu;

package/dist/components/FloatingToolbar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import '../styles/FloatingToolbar.css';
+declare const FloatingToolbar: React.FC;
+export default FloatingToolbar;

package/dist/components/FloatingToolbar.js

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var Toolbar_1 = __importDefault(require("./Toolbar"));
+require("../styles/FloatingToolbar.css");
+var FloatingToolbar = function () {
+    var _a = (0, react_1.useState)({ x: 15, y: 15 }), position = _a[0], setPosition = _a[1];
+    var _b = (0, react_1.useState)(false), isDragging = _b[0], setIsDragging = _b[1];
+    var toolbarRef = (0, react_1.useRef)(null);
+    var offset = (0, react_1.useRef)({ x: 0, y: 0 });
+    var handleMouseDown = function (e) {
+        if (!toolbarRef.current)
+            return;
+        // Prevent dragging if clicking on buttons inside the toolbar
+        if (e.target.closest('.toolbar-button')) {
+            return;
+        }
+        setIsDragging(true);
+        var rect = toolbarRef.current.getBoundingClientRect();
+        offset.current = {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top,
+        };
+        if (toolbarRef.current) {
+            toolbarRef.current.style.cursor = 'grabbing';
+        }
+        e.preventDefault();
+    };
+    var handleMouseMove = function (e) {
+        if (!isDragging || !toolbarRef.current)
+            return;
+        var newX = e.clientX - offset.current.x;
+        var newY = e.clientY - offset.current.y;
+        var parent = toolbarRef.current.parentElement;
+        if (parent) {
+            var parentRect = parent.getBoundingClientRect();
+            var toolbarRect = toolbarRef.current.getBoundingClientRect();
+            newX = Math.max(parentRect.left, Math.min(newX, parentRect.right - toolbarRect.width));
+            newY = Math.max(parentRect.top, Math.min(newY, parentRect.bottom - toolbarRect.height));
+            newX -= parentRect.left;
+            newY -= parentRect.top;
+        }
+        setPosition({ x: newX, y: newY });
+    };
+    var handleMouseUp = function () {
+        setIsDragging(false);
+        if (toolbarRef.current) {
+            toolbarRef.current.style.cursor = 'grab';
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        if (isDragging) {
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+        }
+        else {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        }
+        return function () {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDragging]);
+    return (react_1.default.createElement("div", { ref: toolbarRef, className: "floating-toolbar", style: {
+            left: "".concat(position.x, "px"),
+            top: "".concat(position.y, "px"),
+        }, onMouseDown: handleMouseDown },
+        react_1.default.createElement(Toolbar_1.default, null)));
+};
+exports.default = FloatingToolbar;

package/dist/components/FormatButtons.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const FormatButtons: React.FC;

package/dist/components/FormatButtons.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormatButtons = void 0;
+var react_1 = __importDefault(require("react"));
+var ProductEditorContext_1 = require("../context/ProductEditorContext");
+var FormatButtons = function () {
+    var _a = (0, ProductEditorContext_1.useProductEditor)(), selectedTextObject = _a.selectedTextObject, updateSelectedText = _a.updateSelectedText;
+    if (!selectedTextObject || !updateSelectedText)
+        return null;
+    var isBold = selectedTextObject.fontWeight === 'bold';
+    var isUnderlined = selectedTextObject.underline === true;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("button", { type: "button", className: "toolbar-button bold-button ".concat(isBold ? 'active' : ''), onClick: function () { return updateSelectedText({ fontWeight: isBold ? 'normal' : 'bold' }); }, title: "Bold" },
+            react_1.default.createElement("strong", null, "B")),
+        react_1.default.createElement("button", { type: "button", className: "toolbar-button underline-button ".concat(isUnderlined ? 'active' : ''), onClick: function () { return updateSelectedText({ underline: !isUnderlined }); }, title: "Underline" },
+            react_1.default.createElement("strong", null,
+                react_1.default.createElement("u", null, "U")))));
+};
+exports.FormatButtons = FormatButtons;

package/dist/components/ImageNavButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ImageNavButtonProps {
+    direction: 'left' | 'right';
+    onClick: () => void;
+}
+declare const ImageNavButton: ({ direction, onClick }: ImageNavButtonProps) => React.JSX.Element;
+export default ImageNavButton;

package/dist/components/ImageNavButton.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var grommet_icons_1 = require("grommet-icons");
+var ImageNavButton = function (_a) {
+    var direction = _a.direction, onClick = _a.onClick;
+    return (react_1.default.createElement("button", { onClick: onClick, className: "nav-button ".concat(direction), "aria-label": direction === 'left' ? 'Previous image' : 'Next image', type: "button" }, direction === 'left'
+        ? react_1.default.createElement(grommet_icons_1.FormPrevious, { className: "nav-button-icon", color: "#6b7280" })
+        : react_1.default.createElement(grommet_icons_1.FormNext, { className: "nav-button-icon", color: "#6b7280" })));
+};
+exports.default = ImageNavButton;

package/dist/components/ImageZoomModal.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface ImageZoomModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    imageUrl: string;
+    productName: string;
+    totalImages: number;
+    currentIndex: number;
+    allImages: any[];
+}
+declare const ImageZoomModal: ({ isOpen, onClose, imageUrl, productName, totalImages, currentIndex, allImages }: ImageZoomModalProps) => React.ReactPortal | null;
+export default ImageZoomModal;

package/dist/components/ImageZoomModal.js

@@ -0,0 +1,129 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_dom_1 = require("react-dom");
+var grommet_icons_1 = require("grommet-icons");
+var framer_motion_1 = require("framer-motion");
+var useSwipeNavigate_1 = require("../hooks/useSwipeNavigate");
+var MODAL_BODY_CLASS = 'has-preview-modal-open';
+var ImageZoomModal = function (_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, imageUrl = _a.imageUrl, productName = _a.productName, totalImages = _a.totalImages, currentIndex = _a.currentIndex, allImages = _a.allImages;
+    var _b = (0, react_1.useState)(currentIndex), modalImageIndex = _b[0], setModalImageIndex = _b[1];
+    var _c = (0, react_1.useState)(imageUrl), currentImageUrl = _c[0], setCurrentImageUrl = _c[1];
+    var _d = (0, react_1.useState)('right'), slideDirection = _d[0], setSlideDirection = _d[1];
+    (0, react_1.useEffect)(function () {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+            document.body.classList.add(MODAL_BODY_CLASS);
+            document.documentElement.classList.add(MODAL_BODY_CLASS);
+        }
+        else {
+            document.body.style.overflow = '';
+            document.body.classList.remove(MODAL_BODY_CLASS);
+            document.documentElement.classList.remove(MODAL_BODY_CLASS);
+        }
+        return function () {
+            document.body.style.overflow = '';
+            document.body.classList.remove(MODAL_BODY_CLASS);
+            document.documentElement.classList.remove(MODAL_BODY_CLASS);
+        };
+    }, [isOpen]);
+    (0, react_1.useEffect)(function () {
+        setModalImageIndex(currentIndex);
+        setCurrentImageUrl(imageUrl);
+        setSlideDirection('right');
+    }, [currentIndex, imageUrl, isOpen]);
+    var handlePrevious = function () {
+        setSlideDirection('left');
+        setModalImageIndex(function (prev) {
+            var newIndex = (prev - 1 + totalImages) % totalImages;
+            setCurrentImageUrl(allImages[newIndex].viewUrl);
+            return newIndex;
+        });
+    };
+    var handleNext = function () {
+        setSlideDirection('right');
+        setModalImageIndex(function (prev) {
+            var newIndex = (prev + 1) % totalImages;
+            setCurrentImageUrl(allImages[newIndex].viewUrl);
+            return newIndex;
+        });
+    };
+    var swipeHandlers = (0, useSwipeNavigate_1.useSwipeNavigate)({
+        onSwipeLeft: handleNext,
+        onSwipeRight: handlePrevious,
+    });
+    var slideVariants = {
+        enter: function (direction) { return ({
+            x: direction === 'right' ? 1000 : -1000,
+            opacity: 0
+        }); },
+        center: {
+            zIndex: 1,
+            x: 0,
+            opacity: 1,
+            transition: {
+                x: { type: "spring", stiffness: 300, damping: 30 },
+                opacity: { duration: 0.2 }
+            }
+        },
+        exit: function (direction) { return ({
+            zIndex: 0,
+            x: direction === 'left' ? 1000 : -1000,
+            opacity: 0,
+            transition: {
+                x: { type: "spring", stiffness: 300, damping: 30 },
+                opacity: { duration: 0.05 }
+            }
+        }); }
+    };
+    if (!isOpen)
+        return null;
+    // Render the modal directly at the document body level
+    return (0, react_dom_1.createPortal)(react_1.default.createElement("div", { className: "zoom-modal" },
+        react_1.default.createElement("div", { className: "zoom-modal-container" },
+            react_1.default.createElement("button", { onClick: onClose, className: "close-button", type: "button" },
+                react_1.default.createElement(grommet_icons_1.Close, { width: 36, height: 36, color: "white" })),
+            totalImages > 1 && (react_1.default.createElement("button", { onClick: handlePrevious, className: "nav-button-zoom left", type: "button" },
+                react_1.default.createElement(grommet_icons_1.FormPrevious, { width: 42, height: 42, color: "white" }))),
+            react_1.default.createElement("div", __assign({ className: "zoom-image-container" }, swipeHandlers),
+                react_1.default.createElement(framer_motion_1.AnimatePresence, { initial: false, custom: slideDirection },
+                    react_1.default.createElement(framer_motion_1.motion.img, { key: modalImageIndex, src: currentImageUrl, alt: productName, className: "zoom-image", loading: "lazy", custom: slideDirection, variants: slideVariants, initial: "enter", animate: "center", exit: "exit" }))),
+            totalImages > 1 && (react_1.default.createElement("button", { onClick: handleNext, className: "nav-button-zoom right", type: "button" },
+                react_1.default.createElement(grommet_icons_1.FormNext, { width: 42, height: 42, color: "white" }))))), document.body);
+};
+exports.default = ImageZoomModal;

package/dist/components/LayerPanel.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import '../styles/LayerPanel.css';
+declare const LayerPanel: React.FC;
+export default LayerPanel;