feat(catalog): refresh visual block library

src/entities/block/block-factory.ts

@@ -92,7 +92,7 @@ export function createImageAtom(): ImageAtom {
   return {
     id: nanoid(8),
     type: 'image',
-    src: '/img/logo-black.png',
+    src: '/img/system/logos/logo-black.png',
     link: 'https://example.com',
     alt: 'Image',
     width: 120,

src/entities/template/types.ts

@@ -149,6 +149,7 @@ export type ComponentType
     | 'footer'
     | 'header'
     | 'menu'
+    | 'transactional'
 
 export interface CanvasBlockInstance {
   id: string

src/features/editor/model/state.ts

@@ -9,6 +9,7 @@ import {
   footer,
   header,
   menu,
+  transactional,
 } from '@/features/email-preview/catalog/load-blocks'
 
 export const library = shallowRef<BlockLibraryCategory[]>([
@@ -18,6 +19,7 @@ export const library = shallowRef<BlockLibraryCategory[]>([
   { name: 'Feature', components: feature },
   { name: 'Call to Action', components: cta },
   { name: 'E-Commerce', components: ecommerce },
+  { name: 'Transactional', components: transactional },
   { name: 'Footer', components: footer },
 ])
 

src/features/editor/model/tools.ts

@@ -20,7 +20,7 @@ export const DEFAULT_MENU_IMAGE_ITEM = {
   type: 'image' as const,
   name: 'Icon',
   link: 'https://example',
-  url: '/img/facebook-black.png',
+  url: '/img/system/social/menu/facebook-black.png',
   width: 16,
   height: 16,
   alt: 'Icon',

src/features/email-preview/catalog/blocks/content1.json

@@ -5,30 +5,32 @@
   "type": "content",
   "preview": "img/components/content-1.png",
   "block": {
-    "id": "G86LJihh",
+    "id": "lIQcolOZ",
     "label": "Content 1",
     "settings": {
       "spacing": {
         "padding": [
-          30,
-          24,
-          30,
-          24
+          44,
+          44,
+          40,
+          44
         ]
       },
-      "backgroundColor": "#FFFFFF"
+      "backgroundColor": "#FFF9F3"
     },
     "rows": [
       {
-        "id": "ZF7fxSqh",
+        "id": "ZpCshJt0",
         "settings": {
           "spacing": {},
           "backgroundColor": "transparent",
+          "hiddenOnMobile": false,
+          "collapseOnMobile": true,
           "gap": 0
         },
         "cells": [
           {
-            "id": "Z69ew8wD",
+            "id": "h6CJDQ5x",
             "settings": {
               "spacing": {},
               "backgroundColor": "transparent",
@@ -37,22 +39,42 @@
             },
             "atoms": [
               {
-                "id": "8Br6p3rY",
+                "id": "h7acjiWh",
                 "type": "text",
-                "value": "<p style=\"text-align: center\"><span style=\"color: rgb(159, 163, 167); font-size: 14px\">12 July '19</span></p><p style=\"text-align: center\"><strong><span style=\"font-size: 24px\">Is There a Perfect Time of</span></strong><br><strong><span style=\"font-size: 24px\">Day to Meditate?</span></strong></p>",
-                "color": "#111111",
+                "value": "<p><strong><span style=\"color:#FF6B00;font-size:13px\">EDITOR'S NOTE / 01</span></strong></p><p><strong><span style=\"font-size:38px\">The useful part starts before the big idea.</span></strong></p><p><span style=\"color:#7A6558;font-size:17px\">A text-first opening for a point of view, announcement or thoughtful introduction.</span></p>",
+                "color": "#1F1712",
                 "spacing": {
-                  "margin": [
+                  "padding": [
                     0,
                     0,
                     0,
                     0
                   ],
+                  "margin": [
+                    0,
+                    0,
+                    0,
+                    0
+                  ]
+                }
+              },
+              {
+                "id": "SXzqGnaq",
+                "type": "divider",
+                "color": "#FFD9B8",
+                "height": 1,
+                "spacing": {
                   "padding": [
                     0,
                     0,
                     0,
                     0
+                  ],
+                  "margin": [
+                    18,
+                    0,
+                    18,
+                    0
                   ]
                 }
               }
@@ -62,31 +84,79 @@
         ]
       },
       {
-        "id": "8pyLw4IG",
+        "id": "GPNQ8JtY",
         "settings": {
           "spacing": {},
           "backgroundColor": "transparent",
-          "gap": 0
+          "hiddenOnMobile": false,
+          "collapseOnMobile": true,
+          "gap": 28
         },
         "cells": [
           {
-            "id": "WrsH1hiL",
+            "id": "h37960CJ",
             "settings": {
               "spacing": {},
               "backgroundColor": "transparent",
-              "link": "https://example.com",
               "verticalAlign": "top",
               "horizontalAlign": "left",
-              "borderRadius": 5,
-              "backgroundImage": {
-                "url": "img/simon-migaj-Yui5vfKHuzs-unsplash.jpg",
-                "position": "center",
-                "repeat": "no-repeat",
-                "size": "cover"
-              },
-              "height": 200
+              "width": 50
+            },
+            "atoms": [
+              {
+                "id": "F__w2E_S",
+                "type": "text",
+                "value": "<p><strong><span style=\"font-size:16px\">Start with context</span></strong></p><p><span style=\"color:#7A6558;font-size:14px\">Explain what changed and why the reader should care now.</span></p>",
+                "color": "#1F1712",
+                "spacing": {
+                  "padding": [
+                    0,
+                    0,
+                    0,
+                    0
+                  ],
+                  "margin": [
+                    0,
+                    0,
+                    0,
+                    0
+                  ]
+                }
+              }
+            ],
+            "rows": []
+          },
+          {
+            "id": "-T6-tRyr",
+            "settings": {
+              "spacing": {},
+              "backgroundColor": "transparent",
+              "verticalAlign": "top",
+              "horizontalAlign": "left",
+              "width": 50
             },
-            "atoms": [],
+            "atoms": [
+              {
+                "id": "9QyWJNb_",
+                "type": "text",
+                "value": "<p><strong><span style=\"font-size:16px\">End with direction</span></strong></p><p><span style=\"color:#7A6558;font-size:14px\">Give the next section a clear promise instead of another headline.</span></p>",
+                "color": "#1F1712",
+                "spacing": {
+                  "padding": [
+                    0,
+                    0,
+                    0,
+                    0
+                  ],
+                  "margin": [
+                    0,
+                    0,
+                    0,
+                    0
+                  ]
+                }
+              }
+            ],
             "rows": []
           }
         ]

src/features/email-preview/catalog/blocks/content10.json

@@ -0,0 +1,169 @@
+{
+  "version": 2,
+  "name": "content10",
+  "label": "Content 10",
+  "type": "content",
+  "preview": "img/components/content-10.png",
+  "block": {
+    "id": "fe-VHQ4t",
+    "label": "Content 10",
+    "settings": {
+      "spacing": {
+        "padding": [
+          34,
+          32,
+          34,
+          32
+        ]
+      },
+      "backgroundColor": "#FFFFFF"
+    },
+    "rows": [
+      {
+        "id": "d4bGOO3V",
+        "settings": {
+          "spacing": {},
+          "backgroundColor": "transparent",
+          "hiddenOnMobile": false,
+          "collapseOnMobile": true,
+          "gap": 0
+        },
+        "cells": [
+          {
+            "id": "f_Ia-58K",
+            "settings": {
+              "spacing": {},
+              "backgroundColor": "transparent",
+              "verticalAlign": "top",
+              "horizontalAlign": "center"
+            },
+            "atoms": [
+              {
+                "id": "QRJHnOME",
+                "type": "text",
+                "value": "<p style=\"text-align:center\"><strong><span style=\"color:#FF6B00;font-size:13px\">TWO PERSPECTIVES</span></strong></p><p style=\"text-align:center\"><strong><span style=\"font-size:30px\">What changed after the first week.</span></strong></p>",
+                "color": "#1F1712",
+                "spacing": {
+                  "padding": [
+                    0,
+                    0,
+                    0,
+                    0
+                  ],
+                  "margin": [
+                    0,
+                    0,
+                    0,
+                    0
+                  ]
+                }
+              }
+            ],
+            "rows": []
+          }
+        ]
+      },
+      {
+        "id": "cPW19YcT",
+        "settings": {
+          "spacing": {
+            "padding": [
+              18,
+              0,
+              0,
+              0
+            ]
+          },
+          "backgroundColor": "transparent",
+          "hiddenOnMobile": false,
+          "collapseOnMobile": true,
+          "gap": 16
+        },
+        "cells": [
+          {
+            "id": "kAZN277F",
+            "settings": {
+              "spacing": {
+                "padding": [
+                  22,
+                  20,
+                  22,
+                  20
+                ]
+              },
+              "backgroundColor": "#FFF3E6",
+              "verticalAlign": "top",
+              "horizontalAlign": "left",
+              "borderRadius": 16,
+              "width": 50
+            },
+            "atoms": [
+              {
+                "id": "TMYC-8cT",
+                "type": "text",
+                "value": "<p><strong><span style=\"color:#FF6B00;font-size:30px\">“</span></strong></p><p><strong><span style=\"font-size:19px\">We stopped explaining the interface and started discussing the work.</span></strong></p><p><span style=\"color:#7A6558;font-size:13px\">Maya Chen · Product lead</span></p>",
+                "color": "#1F1712",
+                "spacing": {
+                  "padding": [
+                    0,
+                    0,
+                    0,
+                    0
+                  ],
+                  "margin": [
+                    0,
+                    0,
+                    0,
+                    0
+                  ]
+                }
+              }
+            ],
+            "rows": []
+          },
+          {
+            "id": "P-EpauiY",
+            "settings": {
+              "spacing": {
+                "padding": [
+                  22,
+                  20,
+                  22,
+                  20
+                ]
+              },
+              "backgroundColor": "#FFD9B8",
+              "verticalAlign": "top",
+              "horizontalAlign": "left",
+              "borderRadius": 16,
+              "width": 50
+            },
+            "atoms": [
+              {
+                "id": "5I6UAJuf",
+                "type": "text",
+                "value": "<p><strong><span style=\"color:#FF6B00;font-size:30px\">“</span></strong></p><p><strong><span style=\"font-size:19px\">The handoff became shorter because the structure already carried intent.</span></strong></p><p><span style=\"color:#7A6558;font-size:13px\">Noah Ellis · Design director</span></p>",
+                "color": "#1F1712",
+                "spacing": {
+                  "padding": [
+                    0,
+                    0,
+                    0,
+                    0
+                  ],
+                  "margin": [
+                    0,
+                    0,
+                    0,
+                    0
+                  ]
+                }
+              }
+            ],
+            "rows": []
+          }
+        ]
+      }
+    ]
+  }
+}