labellife-design-tool 1.0.4 → 1.0.6

package/README.md

@@ -128,7 +128,8 @@ import {
   exportToJPG,
   exportToJSON,
   canvasToBlob,
-  importFromJSON 
+  importFromJSON,
+  importFromJSONData 
 } from 'labellife-design-tool';
 import type { CanvasElement } from 'labellife-design-tool';
 
@@ -143,6 +144,122 @@ function MyEditor() {
 }
 ```
 
+### Template Import
+
+The library provides two ways to import template designs:
+
+#### File-Based Import
+
+```tsx
+import { importFromJSON } from 'labellife-design-tool';
+
+// Use with file input
+function handleFileImport(event) {
+  importFromJSON(
+    event,
+    (design) => {
+      console.log('Design loaded:', design);
+      // Use the design
+    },
+    (error) => {
+      alert('Import failed: ' + error);
+    }
+  );
+}
+```
+
+#### Direct JSON Data Import
+
+```tsx
+import { importFromJSONData } from 'labellife-design-tool';
+
+// Import JSON data directly (no file needed)
+const templateData = {
+  width: 800,
+  height: 600,
+  pages: [{
+    id: "1",
+    name: "Page 1",
+    elements: [
+      {
+        type: "text",
+        text: "Hello World",
+        x: 100,
+        y: 100,
+        fontSize: 24
+      }
+    ],
+    background: "white"
+  }]
+};
+
+importFromJSONData(
+  templateData,
+  (design) => {
+    console.log('Design loaded:', design);
+    // Use the design in CanvasEditor
+  },
+  (error) => {
+    console.error('Import failed:', error);
+  }
+);
+```
+
+#### Import from API
+
+```tsx
+// Load template from API
+async function loadTemplateFromAPI(templateId: string) {
+  try {
+    const response = await fetch(`/api/templates/${templateId}`);
+    const templateData = await response.json();
+    
+    importFromJSONData(
+      templateData,
+      (design) => {
+        // Template loaded successfully
+        setDesign(design);
+      },
+      (error) => {
+        alert('Failed to load template: ' + error);
+      }
+    );
+  } catch (error) {
+    console.error('API error:', error);
+  }
+}
+```
+
+#### Import with User Inputs
+
+```tsx
+importFromJSONData(
+  templateData,
+  (design) => {
+    // Design loaded with user inputs applied
+    setDesign(design);
+  },
+  (error) => {
+    alert('Import failed: ' + error);
+  },
+  (inputs, onComplete) => {
+    // Show custom input modal
+    showInputModal(inputs, (values) => {
+      onComplete(values);
+    });
+  }
+);
+```
+
+**Comparison:**
+
+| Feature | `importFromJSON` | `importFromJSONData` |
+|---------|------------------|---------------------|
+| **Input Source** | File upload event | JSON data object |
+| **File Reading** | Built-in FileReader | Not needed |
+| **Use Case** | User file uploads | API data, database, programmatic imports |
+| **Processing** | Identical | Identical |
+
 ### Canvas to Blob Export
 
 The library provides a flexible `canvasToBlob` function that allows converting the canvas to a Blob for various use cases:
@@ -252,9 +369,68 @@ function App() {
 }
 ```
 
+## WordPress Integration
+
+The library includes a special WordPress-compatible entry point that ensures proper compatibility with WordPress's React environment.
+
+### Using with WordPress
+
+When using this library in a WordPress environment, import from the WordPress-specific entry point:
+
+```tsx
+// Import from the WordPress-specific entry point
+import { CanvasEditor } from 'labellife-design-tool/wordpress';
+import 'labellife-design-tool/styles'; // Import CSS
+
+// Use as normal
+function MyWordPressComponent() {
+  return (
+    <CanvasEditor
+      name="WordPress Design Editor"
+      config={{
+        export: { png: true, jpg: true, json: true },
+        multiPage: true
+      }}
+    />
+  );
+}
+```
+
+### WordPress Helper Function
+
+For simpler integration with vanilla WordPress plugins, a helper function is provided:
+
+```javascript
+import { initWordPressCanvasEditor } from 'labellife-design-tool/wordpress';
+import 'labellife-design-tool/styles'; // Import CSS
+
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+  const containerId = 'editor-container'; // ID of your container element
+  
+  initWordPressCanvasEditor(containerId, {
+    name: "WordPress Editor",
+    config: {
+      export: { png: true, jpg: true, json: true },
+      multiPage: true,
+      variables: true
+    }
+  });
+});
+```
+
+### How the WordPress Compatibility Works
+
+The WordPress integration automatically handles compatibility with WordPress's React environment by:
+
+1. Detecting when React is available globally (as in WordPress)
+2. Adding necessary JSX runtime compatibility functions
+3. Making the library work seamlessly in WordPress's React environment
+
 ## Project Structure
 
 - `src/lib/index.ts` - Library entry point (npm package)
+- `src/wordpress.tsx` - WordPress-specific entry point
 - `src/CanvasEditor.tsx` - Main editor component
 - `src/types/` - TypeScript type definitions
 - `src/components/` - React components

package/dist/lib/index.css

@@ -11,6 +11,8 @@
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-green-600: oklch(62.7% 0.194 149.214);
+    --color-green-700: oklch(52.7% 0.154 150.069);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
@@ -215,6 +217,12 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .-top-1 {
+    top: calc(var(--spacing) * -1);
+  }
+  .-right-1 {
+    right: calc(var(--spacing) * -1);
+  }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
@@ -257,6 +265,9 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
@@ -320,6 +331,9 @@
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
+  .h-64 {
+    height: calc(var(--spacing) * 64);
+  }
   .h-full {
     height: 100%;
   }
@@ -329,6 +343,9 @@
   .max-h-32 {
     max-height: calc(var(--spacing) * 32);
   }
+  .max-h-\[80vh\] {
+    max-height: 80vh;
+  }
   .max-h-\[90vh\] {
     max-height: 90vh;
   }
@@ -395,6 +412,9 @@
   .resize {
     resize: both;
   }
+  .resize-none {
+    resize: none;
+  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -419,6 +439,9 @@
   .justify-center {
     justify-content: center;
   }
+  .justify-end {
+    justify-content: flex-end;
+  }
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -482,6 +505,9 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .overflow-auto {
+    overflow: auto;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -570,6 +596,12 @@
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
+  .bg-green-600 {
+    background-color: var(--color-green-600);
+  }
+  .bg-red-500 {
+    background-color: var(--color-red-500);
+  }
   .bg-red-700 {
     background-color: var(--color-red-700);
   }
@@ -636,6 +668,9 @@
   .text-right {
     text-align: right;
   }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -828,6 +863,13 @@
       }
     }
   }
+  .hover\:bg-green-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-green-700);
+      }
+    }
+  }
   .hover\:bg-red-500 {
     &:hover {
       @media (hover: hover) {