@megaads/wm
Version:
To install the library, use npm:
239 lines (234 loc) • 7.22 kB
JavaScript
// Synthetic minimal sample exercising text, clipart, grouped_clipart, and a print area.
// URLs are public placeholder images so the visual preview works without auth.
const IMG = (text, color = 'a3a3a3') =>
`https://placehold.co/600x600/${color}/ffffff?text=${encodeURIComponent(text)}`;
const CLIP = (text, color = '6366f1') =>
`https://placehold.co/200x200/${color}/ffffff?text=${encodeURIComponent(text)}`;
export const sampleMinimal = {
result: {
campaign_products: [
{
id: 'cp-1',
campaign_mockups: [
{
id: 'cm-1',
width: 600,
height: 600,
preview_url: IMG('Mockup', '1f2937'),
preview_thumbnail: IMG('Thumb', '1f2937'),
layers: [
{
id: 'mockup-bg',
visible: true,
url: IMG('T-Shirt+Mockup', 'e5e7eb'),
top: 0,
left: 0,
width: 600,
height: 600,
opacity: 1,
position: 0,
rotate: 0,
},
{
id: 'mockup-pa-1',
visible: true,
printarea_id: 'pa-1',
top: 150,
left: 175,
width: 250,
height: 300,
opacity: 1,
position: 1,
rotate: 0,
},
],
},
],
campaign_variants: [],
},
],
campaign_artworks: [{ artwork_id: 'aw-1', printarea_id: 'pa-1' }],
artworks: [
{
id: 'aw-1',
name: 'Front design',
width: 250,
height: 300,
template_settings: { label: 'Choose your style' },
data: [
{
id: 'tpl-classic',
name: 'Classic',
title: 'Classic',
thumbnail: CLIP('Classic', '0ea5e9'),
url: CLIP('Classic', '0ea5e9'),
positions: ['layer-name', 'layer-pet', 'layer-quote'],
layers: [
{
id: 'layer-name',
type: 'text',
visible: true,
form_label: 'Pet name',
required: true,
text: 'Buddy',
top: 30,
left: 25,
width: 200,
height: 40,
rotate: 0,
color: '#1e293b',
align: 'center',
typography: { family: 'Arial', size: 28, variant: 'bold' },
typography_type: 'google',
max_length: 20,
form_input_textcase: 'uppercase',
},
{
id: 'layer-pet',
type: 'clipart',
form_type: 'grouped_clipart',
visible: true,
form_label: 'Pet type',
required: true,
grouped_clipart: 'pets-parent',
top: 80,
left: 75,
width: 100,
height: 100,
rotate: 0,
grouped_reposition: [
{ id: 'pets-cat', top: 0, left: 0, width: 100, height: 100 },
{ id: 'pets-dog', top: -10, left: 10, width: 110, height: 110 },
],
},
{
id: 'layer-quote',
type: 'text',
visible: true,
form_label: 'Quote',
text: 'Best Friend',
top: 200,
left: 25,
width: 200,
height: 30,
rotate: 0,
color: '#475569',
align: 'center',
typography: { family: 'Georgia', size: 18, variant: 'regular' },
typography_type: 'google',
},
],
},
{
id: 'tpl-modern',
name: 'Modern',
title: 'Modern',
thumbnail: CLIP('Modern', 'f59e0b'),
url: CLIP('Modern', 'f59e0b'),
positions: ['layer-name', 'layer-pet'],
layers: [
{
id: 'layer-name',
type: 'text',
visible: true,
form_label: 'Pet name',
required: true,
text: 'Buddy',
top: 220,
left: 25,
width: 200,
height: 40,
rotate: 0,
color: '#7c3aed',
align: 'center',
typography: { family: 'Impact', size: 32, variant: 'bold' },
typography_type: 'google',
max_length: 20,
},
{
id: 'layer-pet',
type: 'clipart',
form_type: 'grouped_clipart',
visible: true,
form_label: 'Pet type',
required: true,
grouped_clipart: 'pets-parent',
top: 40,
left: 75,
width: 100,
height: 100,
rotate: 0,
},
],
},
],
},
],
clipart_categories: [
{ id: 'pets-parent', name: 'Pets', options: [] },
{
id: 'pets-cat',
name: 'Cats',
parent_id: 'pets-parent',
thumbnail: CLIP('Cats', 'f97316'),
options: [
{ id: 'c-1', name: 'Black cat', url: CLIP('Black+Cat', '111827') },
{ id: 'c-2', name: 'White cat', url: CLIP('White+Cat', 'd1d5db') },
{ id: 'c-3', name: 'Orange cat', url: CLIP('Orange+Cat', 'f97316') },
],
},
{
id: 'pets-dog',
name: 'Dogs',
parent_id: 'pets-parent',
thumbnail: CLIP('Dogs', '8b5cf6'),
options: [
{ id: 'd-1', name: 'Puppy', url: CLIP('Puppy', 'fbbf24') },
{ id: 'd-2', name: 'Husky', url: CLIP('Husky', '64748b') },
],
},
],
},
};
// Sample multi-artwork to test Fix 3 (no auto-select template).
export const sampleMultiArtwork = (() => {
const base = JSON.parse(JSON.stringify(sampleMinimal));
base.result.campaign_artworks.push({ artwork_id: 'aw-2', printarea_id: 'pa-1' });
base.result.artworks.push({
id: 'aw-2',
name: 'Variant design',
width: 250,
height: 300,
template_settings: { label: 'Variant style' },
data: [
{
id: 'tpl-bold',
name: 'Bold',
title: 'Bold',
thumbnail: CLIP('Bold', 'ef4444'),
url: CLIP('Bold', 'ef4444'),
positions: ['layer-text'],
layers: [
{
id: 'layer-text',
type: 'text',
visible: true,
form_label: 'Slogan',
required: true,
text: 'BE BOLD',
top: 120,
left: 25,
width: 200,
height: 60,
rotate: 0,
color: '#dc2626',
align: 'center',
typography: { family: 'Impact', size: 40, variant: 'bold' },
typography_type: 'google',
},
],
},
],
});
return base;
})();