labellife-design-tool 2.1.2 → 2.1.4

package/README.md

@@ -391,6 +391,7 @@ import { Workspace } from 'labellife-design-tool/canvas/workspace';
 |---|---|---|---|
 | `store` | Store | *required* | The MobX-State-Tree store instance |
 | `showInputFieldsPopup` | boolean | `true` | Show the input fields popup when a template with input fields is loaded. Set to `false` to disable. |
+| `onInputFieldsComplete` | function | `undefined` | Callback fired after the user has completed (submitted or skipped) all input fields. Only called when the popup is enabled. |
 | `components` | object | `{}` | Override slots (e.g. `{ PageControls: MyComponent }`) |
 
 The workspace provides:
@@ -556,7 +557,7 @@ The input fields system consists of three parts:
 | `text` | Free-form text entry | Text input |
 | `date` | Date value with configurable format | Date picker |
 | `integer` | Whole number value | Number input (integers only) |
-| `image` | Image upload placeholder | **Not yet implemented** — see [Roadmap](#roadmap) |
+| `image` | Image upload placeholder | File picker with preview |
 
 ### Adding Input Fields (Admin Side)
 
@@ -614,6 +615,15 @@ The input fields popup is rendered inside the `<Workspace>` component and is **e
 
 // Popup disabled — input fields retain their template placeholder values
 <Workspace store={store} showInputFieldsPopup={false} />
+
+// With completion callback
+<Workspace
+  store={store}
+  onInputFieldsComplete={() => {
+    console.log('All input fields have been filled!');
+    // e.g. navigate, save, show a toast, etc.
+  }}
+/>
 ```
 
 When `showInputFieldsPopup` is set to `false`, all input fields are treated as if they were skipped — their original template values are preserved regardless of whether they are marked as required.
@@ -640,25 +650,83 @@ setInputFieldsConfig({
 });
 ```
 
-### Providing a Custom Dialog Component
+### Providing Custom Dialog Components
+
+You can replace the built-in popup with your own component — either globally for all types, or per input type.
 
-For complete control over the popup UI, provide a `CustomDialog` component:
+**Per-type custom dialogs** (override specific types only):
 
 ```js
 import { setInputFieldsConfig } from 'labellife-design-tool';
 
 setInputFieldsConfig({
-  CustomDialog: ({ fields, currentIndex, onSubmit, onSkip, onComplete }) => {
-    // fields        — array of input field elements
-    // currentIndex  — index of the current field being displayed
-    // onSubmit(elementId, value) — call to set the value and advance
-    // onSkip(elementId)         — call to skip a field and advance
-    // onComplete()              — call when all fields are processed
-    return <MyCustomDialogUI />;
-  },
+  CustomTextDialog: MyTextPopup,       // Used for text fields
+  CustomDateDialog: MyDatePopup,       // Used for date fields
+  CustomIntegerDialog: MyNumberPopup,  // Used for integer fields
+  CustomImageDialog: MyImagePopup,     // Used for image fields
+});
+```
+
+**Global custom dialog** (catches any type without a per-type override):
+
+```js
+setInputFieldsConfig({
+  CustomDialog: MyGenericPopup,        // Fallback for all types
 });
 ```
 
+**Mix and match** — per-type takes priority over global:
+
+```js
+setInputFieldsConfig({
+  CustomImageDialog: MyImagePopup,     // Only image fields use this
+  CustomDialog: MyGenericPopup,        // Text, date, and integer use this
+});
+```
+
+**Resolution order:** `CustomTextDialog` / `CustomDateDialog` / `CustomIntegerDialog` / `CustomImageDialog` > `CustomDialog` > built-in dialog.
+
+> **Note:** When `showInputFieldsPopup={false}` is set on `<Workspace>`, no popup is shown regardless of any custom dialog configuration.
+
+**Props passed to every custom dialog component:**
+
+| Prop | Type | Description |
+|---|---|---|
+| `field` | object | The current input field element (MST node with `id`, `custom`, etc.) |
+| `fields` | array | All pending input field elements |
+| `currentIndex` | number | Zero-based index of the current field |
+| `totalCount` | number | Total number of fields to process |
+| `onSubmit(elementId, value)` | function | Call to set the value and advance to the next field |
+| `onSkip(elementId)` | function | Call to skip the field and advance |
+| `onComplete()` | function | Call when all fields are processed |
+
+**Example custom dialog:**
+
+```jsx
+const MyImagePopup = ({ field, currentIndex, totalCount, onSubmit, onSkip }) => {
+  const promptText = field.custom?.promptText || 'Upload an image';
+
+  const handleFile = (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (ev) => onSubmit(field.id, ev.target.result);
+    reader.readAsDataURL(file);
+  };
+
+  return (
+    <div className="my-dialog">
+      <h3>{promptText}</h3>
+      <p>Field {currentIndex + 1} of {totalCount}</p>
+      <input type="file" accept="image/*" onChange={handleFile} />
+      {!field.custom?.required && (
+        <button onClick={() => onSkip(field.id)}>Skip</button>
+      )}
+    </div>
+  );
+};
+```
+
 ### Accessing Input Fields Programmatically
 
 ```js
@@ -864,7 +932,11 @@ setInputFieldsConfig({
   skipButtonStyle: {},      // MUI sx overrides for the Skip button
   submitButtonText: '',     // Override Confirm button label
   skipButtonText: '',       // Override Skip button label
-  CustomDialog: null,       // Provide a fully custom dialog component
+  CustomDialog: null,       // Custom dialog for all types (global fallback)
+  CustomTextDialog: null,   // Custom dialog for text fields only
+  CustomDateDialog: null,   // Custom dialog for date fields only
+  CustomIntegerDialog: null,// Custom dialog for integer fields only
+  CustomImageDialog: null,  // Custom dialog for image fields only
 });
 ```
 
@@ -969,11 +1041,42 @@ These are included in the package — no need to install separately:
 
 ---
 
+## WordPress Integration
+
+A ready-to-use WordPress plugin starter is included at [`examples/wordpress/`](examples/wordpress/). It provides:
+
+- A **pre-configured Vite + React app** that imports the library with all peer dependencies
+- A **WordPress plugin PHP file** with shortcode support (`[labellife_design_tool]`)
+- **Predictable build output** (no hashed file names) for easy `wp_enqueue_script`
+- A **step-by-step README** with setup, customization, and troubleshooting instructions
+
+### Quick Setup
+
+```bash
+# 1. Copy examples/wordpress/ into your WP plugins directory
+cp -r examples/wordpress/ /path/to/wp-content/plugins/labellife-design-tool/
+
+# 2. Install dependencies and build
+cd /path/to/wp-content/plugins/labellife-design-tool/
+npm install
+npm run build
+
+# 3. Activate the plugin in WP Admin → Plugins
+# 4. Add [labellife_design_tool] shortcode to any page
+```
+
+Customize the editor by editing `src/App.jsx` — same API as documented above. Rebuild with `npm run build` after changes.
+
+See the full guide: [`examples/wordpress/README.md`](examples/wordpress/README.md)
+
+---
+
 ## Roadmap
 
-The following features are planned but not yet implemented:
+All four input field types (Text, Date, Integer, Image) are fully implemented. Future enhancements under consideration:
 
-- **Image Input Field Popup** — The `image` input type can be added to templates and its metadata is preserved in JSON, but the popup dialog for uploading images at load time is not yet available. Image fields are skipped during the input collection flow.
+- **Drag-and-drop image upload** in the input fields popup dialog
+- **URL-based image input** as an alternative to file upload
 
 ---
 

package/dist/cjs/canvas/workspace.js

@@ -9,6 +9,7 @@ var material = require('@mui/material');
 var CloseIcon = require('@mui/icons-material/Close');
 var jsxRuntime = require('react/jsx-runtime');
 var Konva = require('konva');
+var CloudUploadIcon = require('@mui/icons-material/CloudUpload');
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -1718,6 +1719,11 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
+  var _useState3 = react.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    imagePreview = _useState4[0],
+    setImagePreview = _useState4[1];
+  var fileInputRef = react.useRef(null);
   var config = getInputFieldsConfig();
   var custom = field.custom || {};
   var inputType = custom.inputType || 'text';
@@ -1726,7 +1732,21 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
   var isRequired = custom.required === true;
   react.useEffect(function () {
     setValue('');
+    setImagePreview(null);
   }, [field.id]);
+  var handleImageSelect = function handleImageSelect(e) {
+    var _e$target$files;
+    var file = (_e$target$files = e.target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files[0];
+    if (!file || !file.type.startsWith('image/')) return;
+    var reader = new FileReader();
+    reader.onload = function (ev) {
+      var dataURL = ev.target.result;
+      setValue(dataURL);
+      setImagePreview(dataURL);
+    };
+    reader.readAsDataURL(file);
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  };
   var handleSubmit = function handleSubmit() {
     if (inputType === 'date' && value) {
       var dateObj = parseDateFromFormat(value);
@@ -1783,6 +1803,93 @@ var SingleFieldDialog = function SingleFieldDialog(_ref) {
             mt: 1
           }, config.inputStyle)
         });
+      case 'image':
+        return /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+          sx: {
+            mt: 1
+          },
+          children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+            ref: fileInputRef,
+            type: "file",
+            accept: "image/*",
+            onChange: handleImageSelect,
+            style: {
+              display: 'none'
+            }
+          }), imagePreview ? /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+            sx: {
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: 1.5
+            },
+            children: [/*#__PURE__*/jsxRuntime.jsx(material.Box, {
+              sx: {
+                width: '100%',
+                maxHeight: 220,
+                borderRadius: 1,
+                overflow: 'hidden',
+                border: '1px solid #e0e0e0',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: '#fafafa'
+              },
+              children: /*#__PURE__*/jsxRuntime.jsx("img", {
+                src: imagePreview,
+                alt: "Preview",
+                style: {
+                  maxWidth: '100%',
+                  maxHeight: 220,
+                  objectFit: 'contain'
+                }
+              })
+            }), /*#__PURE__*/jsxRuntime.jsx(material.Button, {
+              variant: "outlined",
+              size: "small",
+              onClick: function onClick() {
+                var _fileInputRef$current;
+                return (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 ? void 0 : _fileInputRef$current.click();
+              },
+              sx: {
+                textTransform: 'none',
+                fontSize: 12
+              },
+              children: t('inputFieldsDialog.changeImage', 'Change Image')
+            })]
+          }) : /*#__PURE__*/jsxRuntime.jsxs(material.Box, {
+            onClick: function onClick() {
+              var _fileInputRef$current2;
+              return (_fileInputRef$current2 = fileInputRef.current) === null || _fileInputRef$current2 === void 0 ? void 0 : _fileInputRef$current2.click();
+            },
+            sx: {
+              border: '2px dashed #ccc',
+              borderRadius: '8px',
+              p: 3,
+              textAlign: 'center',
+              cursor: 'pointer',
+              transition: 'all 0.2s ease',
+              '&:hover': {
+                borderColor: '#0d83cd',
+                backgroundColor: 'rgba(13,131,205,0.04)'
+              }
+            },
+            children: [/*#__PURE__*/jsxRuntime.jsx(CloudUploadIcon, {
+              sx: {
+                fontSize: 36,
+                color: '#999',
+                mb: 1
+              }
+            }), /*#__PURE__*/jsxRuntime.jsx(material.Typography, {
+              variant: "body2",
+              sx: {
+                color: '#666',
+                fontSize: 13
+              },
+              children: t('inputFieldsDialog.uploadImage', 'Click to select an image')
+            })]
+          })]
+        });
       case 'text':
       default:
         return /*#__PURE__*/jsxRuntime.jsx(material.TextField, {
@@ -1875,10 +1982,10 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
     _onComplete = _ref2.onComplete,
     _ref2$enabled = _ref2.enabled,
     enabled = _ref2$enabled === void 0 ? true : _ref2$enabled;
-  var _useState3 = react.useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    currentIndex = _useState4[0],
-    setCurrentIndex = _useState4[1];
+  var _useState5 = react.useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    currentIndex = _useState6[0],
+    setCurrentIndex = _useState6[1];
   var config = getInputFieldsConfig();
   var pendingFields = store._pendingInputFields || [];
 
@@ -1888,10 +1995,8 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
       store.clearPendingInputFields();
     }
   }, [enabled, pendingFields.length, store]);
-
-  // Filter out image types (not supported yet)
   var fields = pendingFields.filter(function (f) {
-    return f.custom && f.custom.inputType !== 'image';
+    return f.custom && f.custom.inputField;
   });
   react.useEffect(function () {
     setCurrentIndex(0);
@@ -1900,47 +2005,20 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
   var currentField = fields[currentIndex];
   if (!currentField) return null;
 
-  // If the consuming project provided a CustomDialog, use that
-  var CustomDialog = config.CustomDialog;
-  if (CustomDialog) {
-    return /*#__PURE__*/jsxRuntime.jsx(CustomDialog, {
-      fields: fields,
-      currentIndex: currentIndex,
-      onSubmit: function onSubmit(elementId, value) {
-        var el = store.getElementById(elementId);
-        if (el && el.set) {
-          el.set({
-            text: String(value)
-          });
-        }
-        store._resolveInputField(elementId);
-        if (currentIndex + 1 >= fields.length) {
-          store.history.addUndoState();
-          if (_onComplete) _onComplete();
-        } else {
-          setCurrentIndex(currentIndex + 1);
-        }
-      },
-      onSkip: function onSkip(elementId) {
-        store._resolveInputField(elementId);
-        if (currentIndex + 1 >= fields.length) {
-          if (_onComplete) _onComplete();
-        } else {
-          setCurrentIndex(currentIndex + 1);
-        }
-      },
-      onComplete: function onComplete() {
-        store.history.addUndoState();
-        if (_onComplete) _onComplete();
-      }
-    });
-  }
+  // ── Shared submit / skip helpers ────────────────────────────────────
   var handleSubmit = function handleSubmit(elementId, value) {
     var el = store.getElementById(elementId);
     if (el && el.set) {
-      el.set({
-        text: String(value)
-      });
+      var isImage = el.custom && el.custom.inputType === 'image';
+      if (isImage) {
+        el.set({
+          src: String(value)
+        });
+      } else {
+        el.set({
+          text: String(value)
+        });
+      }
     }
     store._resolveInputField(elementId);
     if (currentIndex + 1 >= fields.length) {
@@ -1962,6 +2040,33 @@ var InputFieldsDialog = mobxReactLite.observer(function (_ref2) {
       });
     }
   };
+
+  // ── Resolve which dialog component to use ───────────────────────────
+  // Priority: per-type custom dialog > global CustomDialog > built-in
+  var TYPE_DIALOG_MAP = {
+    text: config.CustomTextDialog,
+    date: config.CustomDateDialog,
+    integer: config.CustomIntegerDialog,
+    image: config.CustomImageDialog
+  };
+  var fieldType = currentField.custom && currentField.custom.inputType || 'text';
+  var PerTypeDialog = TYPE_DIALOG_MAP[fieldType];
+  var GlobalCustomDialog = config.CustomDialog;
+  var ResolvedDialog = PerTypeDialog || GlobalCustomDialog || null;
+  if (ResolvedDialog) {
+    return /*#__PURE__*/jsxRuntime.jsx(ResolvedDialog, {
+      field: currentField,
+      fields: fields,
+      currentIndex: currentIndex,
+      totalCount: fields.length,
+      onSubmit: handleSubmit,
+      onSkip: handleSkip,
+      onComplete: function onComplete() {
+        store.history.addUndoState();
+        if (_onComplete) _onComplete();
+      }
+    });
+  }
   return /*#__PURE__*/jsxRuntime.jsx(SingleFieldDialog, {
     field: currentField,
     onSubmit: handleSubmit,
@@ -2284,7 +2389,8 @@ var Workspace = mobxReactLite.observer(function (_ref6) {
     _ref6$components = _ref6.components,
     components = _ref6$components === void 0 ? {} : _ref6$components,
     _ref6$showInputFields = _ref6.showInputFieldsPopup,
-    showInputFieldsPopup = _ref6$showInputFields === void 0 ? true : _ref6$showInputFields;
+    showInputFieldsPopup = _ref6$showInputFields === void 0 ? true : _ref6$showInputFields,
+    onInputFieldsComplete = _ref6.onInputFieldsComplete;
   var stageRef = react.useRef(null);
   var containerRef = react.useRef(null);
   var _useState5 = react.useState({
@@ -2569,7 +2675,8 @@ var Workspace = mobxReactLite.observer(function (_ref6) {
       store: store
     }) : null, /*#__PURE__*/jsxRuntime.jsx(InputFieldsDialog, {
       store: store,
-      enabled: showInputFieldsPopup
+      enabled: showInputFieldsPopup,
+      onComplete: onInputFieldsComplete
     })]
   });
 });