Merge pull request #261 from vivid-planet/feature/mail-rendering-package

Feature/mail rendering package

.changeset/nervous-rats-walk.md

@@ -0,0 +1,9 @@
+---
+"@comet/brevo-mail-rendering": major
+"@comet/brevo-admin": major
+"@comet/brevo-api": major
+---
+
+Add `mail-rendering` package for providing reuseable components for rendering emails
+
+Add new `NewsletterImageBlock`

.github/workflows/lint.yml

@@ -70,3 +70,7 @@ jobs:
           pnpm run lint
           # check for duplicate ids of formatted messages
           pnpm run intl:extract
+          # check if schema files are up to date
+          pnpm --filter '@comet/brevo-api' run generate-block-meta
+          pnpm --filter '@comet/brevo-api' run generate-schema
+          git diff --exit-code HEAD --

copy-schema-files.js

@@ -3,6 +3,7 @@ const fs = require("fs");
 (async () => {
     await Promise.all([
         fs.promises.copyFile("packages/api/schema.gql", "packages/admin/schema.gql"),
+        fs.promises.copyFile("packages/api/block-meta.json", "packages/mail-rendering/block-meta.json"),
 
         fs.promises.copyFile("demo/api/block-meta.json", "demo/admin/block-meta.json"),
         fs.promises.copyFile("demo/api/block-meta.json", "demo/site/block-meta.json"),

demo/admin/package.json

@@ -25,13 +25,13 @@
     "dependencies": {
         "@apollo/client": "^3.12.2",
         "@babel/core": "^7.26.0",
-        "@comet/admin": "^7.7.0",
-        "@comet/admin-icons": "^7.7.0",
-        "@comet/admin-rte": "^7.7.0",
-        "@comet/admin-theme": "^7.7.0",
-        "@comet/blocks-admin": "^7.7.0",
+        "@comet/admin": "^7.10.0",
+        "@comet/admin-icons": "^7.10.0",
+        "@comet/admin-rte": "^7.10.0",
+        "@comet/admin-theme": "^7.10.0",
+        "@comet/blocks-admin": "^7.10.0",
         "@comet/brevo-admin": "workspace:*",
-        "@comet/cms-admin": "^7.7.0",
+        "@comet/cms-admin": "^7.10.0",
         "@emotion/react": "^11.9.3",
         "@emotion/styled": "^11.9.3",
         "@fontsource-variable/roboto-flex": "^5.1.1",
@@ -61,8 +61,8 @@
         "react-router-dom": "^5.3.4"
     },
     "devDependencies": {
-        "@comet/cli": "^7.7.0",
-        "@comet/eslint-config": "^7.7.0",
+        "@comet/cli": "^7.10.0",
+        "@comet/eslint-config": "^7.10.0",
         "@emotion/babel-plugin": "^11.0.0",
         "@formatjs/cli": "^3.2.0",
         "@gitbeaker/node": "^35.8.1",

demo/admin/src/emailCampaigns/blocks/EmailCampaignContentBlock.tsx

@@ -1,5 +1,5 @@
 import { createBlocksBlock } from "@comet/blocks-admin";
-import { PixelImageBlock } from "@comet/cms-admin";
+import { NewsletterImageBlock } from "@comet/brevo-admin";
 import { RichTextBlock } from "@src/common/blocks/RichTextBlock";
 
 import { DividerBlock } from "./DividerBlock";
@@ -11,6 +11,6 @@ export const EmailCampaignContentBlock = createBlocksBlock({
         divider: DividerBlock,
         text: RichTextBlock,
         salutation: EmailCampaignSalutationBlock,
-        image: PixelImageBlock,
+        image: NewsletterImageBlock,
     },
 });

demo/api/block-meta.json

@@ -286,7 +286,7 @@
                                 "text": "RichText",
                                 "divider": "EmailCampaignDivider",
                                 "salutation": "EmailCampaignSalutation",
-                                "image": "PixelImage"
+                                "image": "NewsletterImage"
                             },
                             "nullable": false
                         }
@@ -323,7 +323,7 @@
                                 "text": "RichText",
                                 "divider": "EmailCampaignDivider",
                                 "salutation": "EmailCampaignSalutation",
-                                "image": "PixelImage"
+                                "image": "NewsletterImage"
                             },
                             "nullable": false
                         }
@@ -663,6 +663,25 @@
             }
         ]
     },
+    {
+        "name": "NewsletterImage",
+        "fields": [
+            {
+                "name": "image",
+                "kind": "Block",
+                "block": "PixelImage",
+                "nullable": false
+            }
+        ],
+        "inputFields": [
+            {
+                "name": "image",
+                "kind": "Block",
+                "block": "PixelImage",
+                "nullable": false
+            }
+        ]
+    },
     {
         "name": "OptionalPixelImage",
         "fields": [

demo/api/package.json

@@ -49,9 +49,9 @@
         }
     },
     "dependencies": {
-        "@comet/blocks-api": "^7.7.0",
+        "@comet/blocks-api": "^7.10.0",
         "@comet/brevo-api": "workspace:*",
-        "@comet/cms-api": "^7.7.0",
+        "@comet/cms-api": "^7.10.0",
         "@faker-js/faker": "^8.4.1",
         "@hapi/accept": "^5.0.2",
         "@kubernetes/client-node": "^0.18.0",
@@ -74,7 +74,7 @@
         "apollo-server-core": "^3.13.0",
         "apollo-server-express": "^3.13.0",
         "class-transformer": "^0.5.1",
-        "class-validator": "^0.14.1",
+        "class-validator": "^0.13.2",
         "cli-progress": "^3.12.0",
         "commander": "^7.2.0",
         "compression": "^1.7.5",
@@ -98,7 +98,7 @@
         "webpack": "^5.64.2"
     },
     "devDependencies": {
-        "@comet/eslint-config": "^7.7.0",
+        "@comet/eslint-config": "^7.10.0",
         "@nestjs/cli": "^9.5.0",
         "@nestjs/schematics": "^9.2.0",
         "@nestjs/testing": "^9.4.3",

demo/api/schema.gql

@@ -2,7 +2,7 @@
 # THIS FILE WAS AUTOMATICALLY GENERATED (DO NOT MODIFY)
 # ------------------------------------------------------
 
-type User {
+type UserPermissionsUser {
   id: String!
   name: String!
   email: String!
@@ -26,7 +26,7 @@ type CurrentUser {
   email: String!
   permissions: [CurrentUserPermission!]!
   impersonated: Boolean
-  authenticatedUser: User
+  authenticatedUser: UserPermissionsUser
   permissionsForScope(scope: JSONObject!): [String!]!
 }
 
@@ -169,12 +169,10 @@ type FileUpload {
   contentHash: String!
   createdAt: DateTime!
   updatedAt: DateTime!
-  downloadUrl: String
-  imageUrl(resizeWidth: Int!): String
 }
 
-type PaginatedUserList {
-  nodes: [User!]!
+type UserPermissionPaginatedUserList {
+  nodes: [UserPermissionsUser!]!
   totalCount: Int!
 }
 
@@ -564,8 +562,8 @@ input EmailCampaignContentScopeInput {
 
 type Query {
   currentUser: CurrentUser!
-  userPermissionsUserById(id: String!): User!
-  userPermissionsUsers(offset: Int! = 0, limit: Int! = 25, search: String, filter: UserFilter, sort: [UserSort!]): PaginatedUserList!
+  userPermissionsUserById(id: String!): UserPermissionsUser!
+  userPermissionsUsers(offset: Int! = 0, limit: Int! = 25, search: String, filter: UserPermissionsUserFilter, sort: [UserPermissionsUserSort!]): UserPermissionPaginatedUserList!
   userPermissionsPermissionList(userId: String!): [UserPermission!]!
   userPermissionsPermission(id: ID!, userId: String): UserPermission!
   userPermissionsAvailablePermissions: [String!]!
@@ -614,12 +612,12 @@ type Query {
   brevoConfig(scope: EmailCampaignContentScopeInput!): BrevoConfig
 }
 
-input UserFilter {
+input UserPermissionsUserFilter {
   name: StringFilter
   email: StringFilter
   status: StringFilter
-  and: [UserFilter!]
-  or: [UserFilter!]
+  and: [UserPermissionsUserFilter!]
+  or: [UserPermissionsUserFilter!]
 }
 
 input StringFilter {
@@ -630,12 +628,12 @@ input StringFilter {
   notEqual: String
 }
 
-input UserSort {
-  field: UserSortField!
+input UserPermissionsUserSort {
+  field: UserPermissionsUserSortField!
   direction: SortDirection! = ASC
 }
 
-enum UserSortField {
+enum UserPermissionsUserSortField {
   name
   email
   status

demo/api/src/comet-config.json

@@ -5,7 +5,7 @@
     },
     "dam": {
         "uploadsMaxFileSize": 500,
-        "allowedImageSizes": [1200],
+        "allowedImageSizes": [320, 420, 768, 1024, 1200, 2048],
         "allowedImageAspectRatios": ["16x9", "4x3", "3x2", "3x1", "2x1", "1x1", "1x2", "1x3", "2x3", "3x4", "9x16"]
     },
     "fileUploads": {

demo/api/src/email-campaign/blocks/email-campaign-content.block.ts

@@ -1,5 +1,5 @@
 import { createBlocksBlock } from "@comet/blocks-api";
-import { PixelImageBlock } from "@comet/cms-api";
+import { NewsletterImageBlock } from "@comet/brevo-api";
 
 import { EmailCampaignDividerBlock } from "./email-campaign-divider.block";
 import { EmailCampaignRichTextBlock } from "./email-campaign-rich-text.block";
@@ -11,7 +11,7 @@ export const EmailCampaignContentBlock = createBlocksBlock(
             text: EmailCampaignRichTextBlock,
             divider: EmailCampaignDividerBlock,
             salutation: EmailCampaignSalutationBlock,
-            image: PixelImageBlock,
+            image: NewsletterImageBlock,
         },
     },
     {

demo/campaign/package.json

@@ -19,7 +19,8 @@
         "serve": "NODE_ENV=production node server.js"
     },
     "dependencies": {
-        "@comet/cms-site": "^7.7.0",
+        "@comet/brevo-mail-rendering": "workspace:*",
+        "@comet/cms-site": "^7.10.0",
         "@faire/mjml-react": "^3.4.0",
         "@luma-team/mjml-react": "^0.2.1",
         "@next/bundle-analyzer": "^12.3.4",
@@ -48,8 +49,8 @@
     },
     "devDependencies": {
         "@babel/core": "^7.26.0",
-        "@comet/cli": "^7.7.0",
-        "@comet/eslint-config": "^7.7.0",
+        "@comet/cli": "^7.10.0",
+        "@comet/eslint-config": "^7.10.0",
         "@formatjs/cli": "^4.8.4",
         "@gitbeaker/node": "^35.8.1",
         "@graphql-codegen/add": "^3.2.3",

demo/campaign/src/blocks/ContentBlock.tsx

@@ -1,17 +1,17 @@
+import { NewsletterImageBlock } from "@comet/brevo-mail-rendering";
 import { BlocksBlock, SupportedBlocks } from "@comet/cms-site";
 import { EmailCampaignContentBlockData } from "@src/blocks.generated";
 import { RichTextBlock } from "@src/blocks//RichTextBlock";
 import { DividerBlock } from "@src/blocks/DividerBlock";
 import React from "react";
 
-import { ImageBlock } from "./ImageBlock";
 import { SalutationBlock } from "./SalutationBlock";
 
 const supportedBlocks: SupportedBlocks = {
     divider: (data) => <DividerBlock />,
     text: (data) => <RichTextBlock data={data} />,
     salutation: (data) => <SalutationBlock data={data} />,
-    image: (data) => <ImageBlock data={data} />,
+    image: (data) => <NewsletterImageBlock data={data} />,
 };
 
 interface Props {

demo/site/package.json

@@ -25,7 +25,7 @@
         "serve": "npm run extract:publicGenerated && NODE_ENV=production node server.js"
     },
     "dependencies": {
-        "@comet/cms-site": "^7.7.0",
+        "@comet/cms-site": "^7.10.0",
         "@next/bundle-analyzer": "^12.3.4",
         "@opentelemetry/api": "^1.7.0",
         "@opentelemetry/auto-instrumentations-node": "^0.40.0",
@@ -49,8 +49,8 @@
     },
     "devDependencies": {
         "@babel/core": "^7.26.0",
-        "@comet/cli": "^7.7.0",
-        "@comet/eslint-config": "^7.7.0",
+        "@comet/cli": "^7.10.0",
+        "@comet/eslint-config": "^7.10.0",
         "@formatjs/cli": "^4.8.4",
         "@gitbeaker/node": "^35.8.1",
         "@graphql-codegen/add": "^3.2.3",

dev-pm.config.js

@@ -1,6 +1,7 @@
 const packageFolderMapping = {
     "@comet/brevo-api": "packages/api",
     "@comet/brevo-admin": "packages/admin",
+    "@comet/brevo-mail-rendering": "packages/brevo-mail-rendering",
 };
 
 const waitOnPackages = (...packages) => {
@@ -20,12 +21,28 @@ module.exports = {
             script: "pnpm --filter @comet/brevo-api run generate-schema:watch",
             group: ["api"],
         },
+        {
+            name: "api-codegen-block-meta",
+            script: "pnpm --filter @comet/brevo-api run generate-block-meta:watch",
+            group: ["api"],
+        },
         //group admin
         {
             name: "admin",
             script: "pnpm --filter @comet/brevo-admin run start",
             group: ["admin"],
         },
+        //group mail-rendering
+        {
+            name: "mail-rendering",
+            script: "pnpm --filter @comet/brevo-mail-rendering run dev",
+            group: ["mail-rendering"],
+        },
+        {
+            name: "mail-rendering-block-codegen",
+            script: "pnpm --filter @comet/brevo-mail-rendering run generate-block-types:watch",
+            group: ["mail-rendering"],
+        },
         //group demo admin
         {
             name: "demo-admin",

install.sh

@@ -22,6 +22,9 @@ pnpm install
 # create admin symlinks
 ln -sf ../api/schema.gql ./packages/admin/schema.gql
 
+# create mail-rendering symlinks
+ln -sf ../api/block-meta.json ./packages/mail-rendering/block-meta.json
+
 # create demo api symlinks
 ln -sf ../../.env ./demo/api/.env
 ln -sf ../../.env.local ./demo/api
@@ -50,5 +53,4 @@ sh ./demo/admin/intl-update.sh
 sh ./demo/site/intl-update.sh
 sh ./demo/campaign/intl-update.sh
 
-mkdir -p ./demo/api/uploads
-
+mkdir -p ./demo/api/uploads

package.json

@@ -6,8 +6,10 @@
         "build:packages": "pnpm run build",
         "build:api": "pnpm recursive --filter '@comet/brevo-api' run build",
         "build:admin": "pnpm recursive --filter '@comet/brevo-admin' run build",
+        "build:mail-rendering": "pnpm recursive --filter '@comet/brevo-mail-rendering' run build",
         "build:api:skippable": "test -f packages/api/lib/index.d.ts && echo 'Skipping API build' || $npm_execpath build:api",
         "build:admin:skippable": "test -f packages/admin/lib/index.d.ts && echo 'Skipping Admin build' || $npm_execpath build:admin",
+        "build:mail-rendering:skippable": "test -f packages/mail-rendering/lib/index.d.ts && echo 'Skipping Mail-Rendering build' || $npm_execpath build:mail-rendering",
         "build:lib": "pnpm recursive --filter '@comet/*' run build",
         "clean": "pnpm recursive run clean",
         "copy-schema-files": "node copy-schema-files.js",
@@ -17,6 +19,7 @@
         "dev:demo:site": "dotenv -c -- dev-pm start @demo-site",
         "dev:api": "pnpm recursive --filter '@comet/brevo-api' run clean && dotenv -c -- dev-pm start @api",
         "dev:admin": "pnpm recursive --filter '@comet/brevo-admin' run clean && dotenv -c -- dev-pm start @admin",
+        "dev:mail-rendering": "pnpm recursive --filter '@comet/brevo-mail-rendering' run clean && dotenv -c -- dev-pm start @mail-rendering",
         "postinstall": "husky install",
         "lint": "pnpm lint:root && pnpm recursive run lint",
         "lint:root": "$npm_execpath prettier --check './!(demo|packages)/**/*.{js,json,md,yml,yaml}'",
@@ -66,6 +69,16 @@
                 "peerDependencies": {
                     "@types/react": "*"
                 }
+            },
+            "@types/hoist-non-react-statics": {
+                "peerDependencies": {
+                    "@types/react": "*"
+                }
+            },
+            "@types/react-transition-group": {
+                "peerDependencies": {
+                    "@types/react": "^17.0.0"
+                }
             }
         }
     }