@lightspeed/crane 0.1.1 → 1.0.1

package/template/sections/example-section/settings/translations.ts

@@ -0,0 +1,59 @@
+export default {
+  en: {
+    '$label.section_title.label': 'Main title',
+    '$label.section_title.placeholder': 'This will be the main title for this section',
+    '$label.section_description.label': 'Long description',
+    '$label.section_description.placeholder': 'This description will be displayed below the title',
+    '$label.image_text.label': 'Image Caption',
+    '$label.image_text_1.label': 'Image 1 caption',
+    '$label.image_text_2.label': 'Image 2 caption',
+    '$label.image_text_3.label': 'Image 3 caption',
+    '$label.image_text_4.label': 'Image 4 caption',
+    '$label.image_text.placeholder': 'This caption will be displayed on or below the image',
+    '$label.image_content.label': 'Image Content',
+    '$label.image_content_1.label': 'Image 1',
+    '$label.image_content_2.label': 'Image 2',
+    '$label.image_content_3.label': 'Image 3',
+    '$label.image_content_4.label': 'Image 4',
+    '$label.image_link_1.label': 'Image 1 link',
+    '$label.image_link_2.label': 'Image 2 link',
+    '$label.image_link_3.label': 'Image 3 link',
+    '$label.image_link_4.label': 'Image 4 link',
+    '$label.image_link.placeholder': 'Enter an optional URL for the image',
+    '$label.image_text_position.label': 'Image caption position',
+    '$label.image_text_position.placeholder': 'Choose',
+    '$label.image_text_position.description': 'Select the position of the image caption',
+    '$label.image_text_position.on.label': 'On the image',
+    '$label.image_text_position.under.label': 'Below the image',
+    '$label.background.label': 'Background',
+  },
+
+  nl: {
+    '$label.section_title.label': 'Hoofdtitel',
+    '$label.section_title.placeholder': 'Dit wordt de hoofdtitel voor deze sectie',
+    '$label.section_description.label': 'Lange beschrijving',
+    '$label.section_description.placeholder': 'Deze beschrijving wordt onder de titel weergegeven',
+    '$label.image_text.label': 'Bijschrift afbeelding',
+    '$label.image_text_1.label': 'Onderschrift afbeelding 1',
+    '$label.image_text_2.label': 'Bijschrift afbeelding 2',
+    '$label.image_text_3.label': 'Bijschrift afbeelding 3',
+    '$label.image_text_4.label': 'Bijschrift afbeelding 4',
+    '$label.image_text.placeholder': 'Dit bijschrift wordt op of onder de afbeelding weergegeven',
+    '$label.image_content.label': 'Afbeeldingsinhoud',
+    '$label.image_content_1.label': 'Afbeelding 1',
+    '$label.image_content_2.label': 'Afbeelding 2',
+    '$label.image_content_3.label': 'Afbeelding 3',
+    '$label.image_content_4.label': 'Afbeelding 4',
+    '$label.image_link_1.label': 'Afbeelding 1 link',
+    '$label.image_link_2.label': 'Afbeelding 2 link',
+    '$label.image_link_3.label': 'Afbeelding 3 link',
+    '$label.image_link_4.label': 'Afbeelding 4 link',
+    '$label.image_link.placeholder': 'Voer een optionele URL in voor de afbeelding',
+    '$label.image_text_position.label': 'Positie van bijschrift afbeelding',
+    '$label.image_text_position.placeholder': 'Kies',
+    '$label.image_text_position.description': 'Selecteer de positie van het afbeeldingsbijschrift',
+    '$label.image_text_position.on.label': 'Op de afbeelding',
+    '$label.image_text_position.under.label': 'Onder de afbeelding',
+    '$label.background.label': 'Achtergrond',
+  },
+} as const;

package/template/sections/example-section/showcases/1.ts

@@ -0,0 +1,160 @@
+export default {
+  showcaseId: '1',
+  previewImage: {
+    set: {
+      ORIGINAL: {
+        url: 'custom_section_showcase_1_preview.jpg',
+      },
+    },
+  },
+  blockName: '$label.showcase_1.blockName',
+  content: {
+    section_title: {
+      type: 'INPUTBOX',
+      text: '$label.showcase_1.section_title.text',
+    },
+    section_description: {
+      type: 'TEXTAREA',
+      text: '$label.showcase_1.section_description.text',
+    },
+    image_text_1: {
+      type: 'TEXTAREA',
+      text: '$label.showcase_1.image_text_1.text',
+    },
+    image_text_2: {
+      type: 'TEXTAREA',
+      text: '$label.showcase_1.image_text_2.text',
+    },
+    image_text_3: {
+      type: 'TEXTAREA',
+      text: '$label.showcase_1.image_text_3.text',
+    },
+    image_text_4: {
+      type: 'TEXTAREA',
+      text: '$label.showcase_1.image_text_4.text',
+    },
+    image_content_1: {
+      type: 'IMAGE',
+      imageData: {
+        set: {
+          LOW_RES: {
+            url: 'new_arrivals_mobile_low.jpeg',
+          },
+          MOBILE_WEBP_LOW_RES: {
+            url: 'new_arrivals_mobile_low.jpeg',
+          },
+          MOBILE_WEBP_HI_RES: {
+            url: 'new_arrivals_mobile_high.jpeg',
+          },
+          WEBP_LOW_RES: {
+            url: 'new_arrivals_pc_low.jpeg',
+          },
+          WEBP_HI_2X_RES: {
+            url: 'new_arrivals_pc_high.jpeg',
+          },
+        },
+        borderInfo: {},
+      },
+    },
+    image_content_2: {
+      type: 'IMAGE',
+      imageData: {
+        set: {
+          LOW_RES: {
+            url: 'sport_look_mobile_low.jpeg',
+          },
+          MOBILE_WEBP_LOW_RES: {
+            url: 'sport_look_mobile_low.jpeg',
+          },
+          MOBILE_WEBP_HI_RES: {
+            url: 'sport_look_mobile_high.jpeg',
+          },
+          WEBP_LOW_RES: {
+            url: 'sport_look_pc_low.jpeg',
+          },
+          WEBP_HI_2X_RES: {
+            url: 'sport_look_pc_high.jpeg',
+          },
+        },
+        borderInfo: {},
+      },
+    },
+    image_content_3: {
+      type: 'IMAGE',
+      imageData: {
+        set: {
+          LOW_RES: {
+            url: 'summer_accessories_mobile_low.jpeg',
+          },
+          MOBILE_WEBP_LOW_RES: {
+            url: 'summer_accessories_mobile_low.jpeg',
+          },
+          MOBILE_WEBP_HI_RES: {
+            url: 'summer_accessories_mobile_high.jpeg',
+          },
+          WEBP_LOW_RES: {
+            url: 'summer_accessories_pc_low.jpeg',
+          },
+          WEBP_HI_2X_RES: {
+            url: 'summer_accessories_pc_high.jpeg',
+          },
+        },
+        borderInfo: {},
+      },
+    },
+    image_content_4: {
+      type: 'IMAGE',
+      imageData: {
+        set: {
+          LOW_RES: {
+            url: 'trending_footwear_mobile_low.jpeg',
+          },
+          MOBILE_WEBP_LOW_RES: {
+            url: 'trending_footwear_mobile_low.jpeg',
+          },
+          MOBILE_WEBP_HI_RES: {
+            url: 'trending_footwear_mobile_high.jpeg',
+          },
+          WEBP_LOW_RES: {
+            url: 'trending_footwear_pc_low.jpeg',
+          },
+          WEBP_HI_2X_RES: {
+            url: 'trending_footwear_pc_high.jpeg',
+          },
+        },
+        borderInfo: {},
+      },
+    },
+    image_link_1: {
+      type: 'TEXTAREA',
+      text: '$label.showcase_1.image_link_1.text',
+    },
+  },
+  design: {
+    section_title: {
+      type: 'TEXT',
+      font: 'global.fontFamily.body',
+      size: 44,
+      bold: true,
+      italic: false,
+      color: '#333',
+    },
+    image_text: {
+      type: 'TEXT',
+      size: 20,
+      bold: false,
+      italic: false,
+      color: '#FFFFFF',
+    },
+    background: {
+      type: 'BACKGROUND',
+      style: 'COLOR',
+      color: 'global.color.background',
+    },
+    image_content: {
+      type: 'IMAGE',
+      overlay: 'GRADIENT',
+      color: ['#FFFFFF', '#000000'],
+    },
+  },
+} as const;

package/template/sections/example-section/showcases/2.ts

@@ -0,0 +1,156 @@
+export default {
+  showcaseId: '2',
+  previewImage: {
+    set: {
+      ORIGINAL: {
+        url: 'custom_section_showcase_2_preview.png',
+      },
+    },
+  },
+  blockName: '$label.showcase_2.blockName',
+  content: {
+    section_title: {
+      type: 'INPUTBOX',
+      text: '$label.showcase_2.section_title.text',
+    },
+    image_text_1: {
+      type: 'TEXTAREA',
+      text: '$label.showcase_2.image_text_1.text',
+    },
+    image_text_2: {
+      type: 'TEXTAREA',
+      text: '$label.showcase_2.image_text_2.text',
+    },
+    image_text_3: {
+      type: 'TEXTAREA',
+      text: '$label.showcase_2.image_text_3.text',
+    },
+    image_text_4: {
+      type: 'TEXTAREA',
+      text: '$label.showcase_2.image_text_4.text',
+    },
+    image_content_1: {
+      type: 'IMAGE',
+      imageData: {
+        set: {
+          LOW_RES: {
+            url: 'new_tshirts_collection_mobile_low.jpeg',
+          },
+          MOBILE_WEBP_LOW_RES: {
+            url: 'new_tshirts_collection_mobile_low.jpeg',
+          },
+          MOBILE_WEBP_HI_RES: {
+            url: 'new_tshirts_collection_mobile_high.jpeg',
+          },
+          WEBP_LOW_RES: {
+            url: 'new_tshirts_collection_pc_low.jpeg',
+          },
+          WEBP_HI_2X_RES: {
+            url: 'new_tshirts_collection_pc_high.jpeg',
+          },
+        },
+        borderInfo: {},
+      },
+    },
+    image_content_2: {
+      type: 'IMAGE',
+      imageData: {
+        set: {
+          LOW_RES: {
+            url: 'autumn_looks_mobile_low.jpeg',
+          },
+          MOBILE_WEBP_LOW_RES: {
+            url: 'autumn_looks_mobile_low.jpeg',
+          },
+          MOBILE_WEBP_HI_RES: {
+            url: 'autumn_looks_mobile_high.jpeg',
+          },
+          WEBP_LOW_RES: {
+            url: 'autumn_looks_pc_low.jpeg',
+          },
+          WEBP_HI_2X_RES: {
+            url: 'autumn_looks_pc_high.jpeg',
+          },
+        },
+        borderInfo: {},
+      },
+    },
+    image_content_3: {
+      type: 'IMAGE',
+      imageData: {
+        set: {
+          LOW_RES: {
+            url: 'bianka_wardrobe_mobile_low.jpeg',
+          },
+          MOBILE_WEBP_LOW_RES: {
+            url: 'bianka_wardrobe_mobile_low.jpeg',
+          },
+          MOBILE_WEBP_HI_RES: {
+            url: 'bianka_wardrobe_mobile_high.jpeg',
+          },
+          WEBP_LOW_RES: {
+            url: 'bianka_wardrobe_pc_low.jpeg',
+          },
+          WEBP_HI_2X_RES: {
+            url: 'bianka_wardrobe_pc_high.jpeg',
+          },
+        },
+        borderInfo: {},
+      },
+    },
+    image_content_4: {
+      type: 'IMAGE',
+      imageData: {
+        set: {
+          LOW_RES: {
+            url: 'story_of_jane_mobile_low.jpeg',
+          },
+          MOBILE_WEBP_LOW_RES: {
+            url: 'story_of_jane_mobile_low.jpeg',
+          },
+          MOBILE_WEBP_HI_RES: {
+            url: 'story_of_jane_mobile_high.jpeg',
+          },
+          WEBP_LOW_RES: {
+            url: 'story_of_jane_pc_low.jpeg',
+          },
+          WEBP_HI_2X_RES: {
+            url: 'story_of_jane_pc_high.jpeg',
+          },
+        },
+        borderInfo: {},
+      },
+    },
+    image_link_1: {
+      type: 'TEXTAREA',
+      text: '$label.showcase_2.image_link_1.text',
+    },
+  },
+  design: {
+    section_title: {
+      type: 'TEXT',
+      font: 'global.fontFamily.body',
+      size: 44,
+      bold: true,
+      italic: false,
+      color: '#333',
+    },
+    image_text: {
+      type: 'TEXT',
+      size: 20,
+      bold: false,
+      italic: false,
+      color: '#FFFFFF',
+    },
+    background: {
+      type: 'BACKGROUND',
+      style: 'COLOR',
+      color: 'global.color.background',
+    },
+    image_content: {
+      type: 'IMAGE',
+      overlay: 'GRADIENT',
+      color: ['#FFFFFF', '#000000'],
+    },
+  },
+} as const;

package/template/sections/example-section/showcases/translations.ts

@@ -0,0 +1,41 @@
+export default {
+  en: {
+    '$label.showcase_1.blockName': 'Reference Section — Retail',
+    '$label.showcase_1.section_title.text': 'Trending collections',
+    '$label.showcase_1.section_description.text': 'Discover our favorite pieces this season, and indulge yourself in '
+        + 'these timeless pieces suitable for every occasion. We offer free shipping and returns, and 24/7 fashion '
+        + 'advice through our mobile app.',
+    '$label.showcase_1.image_text_1.text': 'New Arrivals',
+    '$label.showcase_1.image_text_2.text': 'Sport look',
+    '$label.showcase_1.image_text_3.text': 'Summer accessories',
+    '$label.showcase_1.image_text_4.text': 'Trending footwear',
+    '$label.showcase_1.image_link_1.text': '/products',
+    '$label.showcase_2.blockName': 'Reference section — Apparel',
+    '$label.showcase_2.section_title.text': 'Trending collections',
+    '$label.showcase_2.image_text_1.text': 'New t-shirts collection',
+    '$label.showcase_2.image_text_2.text': 'Autumn looks',
+    '$label.showcase_2.image_text_3.text': 'Bianka\'s wardrobe',
+    '$label.showcase_2.image_text_4.text': 'Story of Jane',
+    '$label.showcase_2.image_link_1.text': '/products',
+  },
+
+  nl: {
+    '$label.showcase_1.blockName': 'Referentiesectie — Detailhandel',
+    '$label.showcase_1.section_title.text': 'Trending collecties',
+    '$label.showcase_1.section_description.text': 'Ontdek onze favoriete stukken van dit seizoen en verwen jezelf met '
+        + 'deze tijdloze stukken die geschikt zijn voor elke gelegenheid. Wij bieden gratis verzending en retourneren, '
+        + 'en 24/7 modeadvies via onze mobiele app.',
+    '$label.showcase_1.image_text_1.text': 'Nieuw binnen',
+    '$label.showcase_1.image_text_2.text': 'Sportieve look',
+    '$label.showcase_1.image_text_3.text': 'Zomeraccessoires',
+    '$label.showcase_1.image_text_4.text': 'Trending schoenen',
+    '$label.showcase_1.image_link_1.text': '/products',
+    '$label.showcase_2.blockName': 'Referentiesectie — Kleding',
+    '$label.showcase_2.section_title.text': 'Trending collecties',
+    '$label.showcase_2.image_text_1.text': 'Nieuwe t-shirtscollectie',
+    '$label.showcase_2.image_text_2.text': 'Herfstlooks',
+    '$label.showcase_2.image_text_3.text': 'Bianka\'s kledingkast',
+    '$label.showcase_2.image_text_4.text': 'Verhaal van Jane',
+    '$label.showcase_2.image_link_1.text': '/products',
+  },
+} as const;

package/template/templates/template.ts

@@ -18,126 +18,149 @@ export default {
     },
     {
       type: 'custom',
-      id: 'block-example'
+      id: 'example-section'
     },
     {
       type: 'custom',
-      id: 'block-example',
+      id: 'example-section',
       content: {
-        inputbox: {
+        section_title: {
           type: 'INPUTBOX',
-          label: '$label.inputbox.label',
-          placeholder: '$label.inputbox.placeholder',
+          label: '$label.section_title.label',
+          placeholder: '$label.section_title.placeholder',
         },
-        textarea: {
+        section_description: {
           type: 'TEXTAREA',
-          label: '$label.textarea.label',
-          placeholder: '$label.textarea.placeholder',
+          label: '$label.section_description.label',
+          placeholder: '$label.section_description.placeholder',
         },
-        button: {
-          type: 'BUTTON',
-          label: '$label.button.label',
+        image_content_1: {
+          type: 'IMAGE',
+          label: '$label.image_content_1.label',
+        },
+        image_text_1: {
+          type: 'TEXTAREA',
+          label: '$label.image_text_1.label',
+          placeholder: '$label.image_text.placeholder',
+        },
+        image_link_1: {
+          type: 'INPUTBOX',
+          label: '$label.image_link_1.label',
+          placeholder: '$label.image_link.placeholder',
         },
-        image: {
+        image_content_2: {
           type: 'IMAGE',
-          label: '$label.image.label',
+          label: '$label.image_content_2.label',
         },
-        toggle: {
-          type: 'TOGGLE',
-          label: '$label.toggle.label',
-          description: '$label.toggle.description',
+        image_text_2: {
+          type: 'TEXTAREA',
+          label: '$label.image_text_2.label',
+          placeholder: '$label.image_text.placeholder',
+        },
+        image_link_2: {
+          type: 'INPUTBOX',
+          label: '$label.image_link_2.label',
+          placeholder: '$label.image_link.placeholder',
+        },
+        image_content_3: {
+          type: 'IMAGE',
+          label: '$label.image_content_3.label',
+        },
+        image_text_3: {
+          type: 'TEXTAREA',
+          label: '$label.image_text_3.label',
+          placeholder: '$label.image_text.placeholder',
+        },
+        image_link_3: {
+          type: 'INPUTBOX',
+          label: '$label.image_link_3.label',
+          placeholder: '$label.image_link.placeholder',
+        },
+        image_content_4: {
+          type: 'IMAGE',
+          label: '$label.image_content_4.label',
+        },
+        image_text_4: {
+          type: 'TEXTAREA',
+          label: '$label.image_text_4.label',
+          placeholder: '$label.image_text.placeholder',
+        },
+        image_link_4: {
+          type: 'INPUTBOX',
+          label: '$label.image_link_4.label',
+          placeholder: '$label.image_link.placeholder',
         },
-        selectbox: {
-          type: 'SELECTBOX',
-          label: '$label.selectbox.label',
-          placeholder: '$label.selectbox.placeholder',
-          description: '$label.selectbox.description',
-          options: [
-            {
-              value: 'one',
-              label: '$label.selectbox.one.label',
-            },
-            {
-              value: 'two',
-              label: '$label.selectbox.two.label',
-            }
-          ]
-        }
       },
       design: {
-        inputbox: {
+        section_title: {
           type: 'TEXT',
-          label: '$label.inputbox.label',
+          label: '$label.section_title.label',
           colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
-          sizes: [12, 13, 14, 15, 16, 17, 18, 20],
+          sizes: [18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60],
           defaults: {
             font: 'global.fontFamily.body',
-            size: 18,
+            size: 40,
             bold: true,
             italic: false,
-            color: '#333'
-          }
+            color: '#313131',
+            visible: true,
+          },
         },
-        textarea: {
+        section_description: {
           type: 'TEXT',
-          label: '$label.textarea.label',
+          label: '$label.section_description.label',
           colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
           sizes: [12, 13, 14, 15, 16, 17, 18, 20],
           defaults: {
             font: 'global.fontFamily.body',
-            size: 16,
+            size: 18,
             bold: false,
             italic: true,
-            color: '#333'
-          }
+            color: '#313131',
+            visible: true,
+          },
         },
-        button: {
-          type: 'BUTTON',
-          label: '$label.button.label',
+        image_text: {
+          type: 'TEXT',
+          label: '$label.image_text.label',
           colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
+          sizes: [12, 13, 14, 15, 16, 17, 18, 20],
           defaults: {
             font: 'global.fontFamily.body',
-            size: 'MEDIUM',
-            appearance: 'OUTLINE',
-            shape: 'PILL',
-            color: '#333'
-          }
+            size: 16,
+            bold: false,
+            italic: true,
+            color: '#333',
+            visible: true,
+          },
         },
-        image: {
+        image_content: {
           type: 'IMAGE',
-          label: '$label.image.label',
+          label: '$label.image_content.label',
           colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
           defaults: {
             overlay: 'COLOR',
-            color: '#333'
-          }
+            color: '#333',
+          },
         },
-        toggle: {
-          type: 'TOGGLE',
-          label: '$label.toggle.label',
-          description: '$label.toggle.description',
-          defaults: {
-            enabled: true
-          }
-        },
-        selectbox: {
+        image_text_position: {
           type: 'SELECTBOX',
-          label: '$label.selectbox.label',
-          placeholder: '$label.selectbox.placeholder',
-          description: '$label.selectbox.description',
+          label: '$label.image_text_position.label',
+          placeholder: '$label.image_text_position.placeholder',
+          description: '$label.image_text_position.description',
           options: [
             {
-              value: 'one',
-              label: '$label.selectbox.one.label',
+              value: 'on',
+              label: '$label.image_text_position.on.label',
             },
             {
-              value: 'two',
-              label: '$label.selectbox.two.label',
-            }
+              value: 'under',
+              label: '$label.image_text_position.under.label',
+            },
           ],
           defaults: {
-            value: 'two'
-          }
+            value: 'on',
+          },
         },
         background: {
           type: 'BACKGROUND',
@@ -145,10 +168,10 @@ export default {
           colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
           defaults: {
             style: 'COLOR',
-            color: 'global.color.background'
-          }
-        }
-      }
+            color: 'global.color.background',
+          },
+        },
+      },
     },
     {
       type: 'default',