feat: Webiny SDK (#4925)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: adrians5j <5121148+adrians5j@users.noreply.github.com>
Co-authored-by: adrians5j <adrian@webiny.com>
Co-authored-by: Adrian Smijulj <adrian1358@gmail.com>

Author: Copilot

extensions/models/ContactSubmissionHook.ts

@@ -0,0 +1,56 @@
+import { EntryBeforeCreateEventHandler as EntryBeforeCreateEventHandlerAbstraction } from "webiny/api/cms/entry";
+import { Logger } from "webiny/api/logger";
+
+// List of common free email providers
+const PERSONAL_EMAIL_DOMAINS = [
+    "gmail.com",
+    "yahoo.com",
+    "hotmail.com",
+    "outlook.com",
+    "aol.com",
+    "icloud.com",
+    "protonmail.com"
+];
+
+class ContactSubmissionHookImpl implements EntryBeforeCreateEventHandlerAbstraction.Interface {
+    public constructor(private logger: Logger.Interface) {}
+
+    public async handle(event: EntryBeforeCreateEventHandlerAbstraction.Event): Promise<void> {
+        const { model, input, entry } = event.payload;
+
+        // 1. Check if this event is for our Contact Submission model
+        if (model.modelId !== "contactSubmission") {
+            return;
+        }
+
+        this.logger.info(`Processing contact submission for model: ${model.modelId}`);
+
+        // 2. Get the email from the payload
+        // Note: In Webiny CMS events, the entry data is typically in payload.values
+        const email = input.values?.email as string;
+
+        if (!email) {
+            this.logger.warn("No email found in contact submission");
+            return;
+        }
+
+        // 3. Analyze the email domain
+        const domain = email.split("@")[1]?.toLowerCase();
+
+        let type = "work";
+        if (domain && PERSONAL_EMAIL_DOMAINS.includes(domain)) {
+            type = "personal";
+        }
+
+        this.logger.info(`Classified email ${email} as ${type}`);
+
+        // 4. Update the entry with the classification
+        // We can directly modify the payload.values object to set data before it's saved
+        entry.values.emailType = type;
+    }
+}
+
+export default EntryBeforeCreateEventHandlerAbstraction.createImplementation({
+    implementation: ContactSubmissionHookImpl,
+    dependencies: [Logger]
+});

extensions/models/ContactSubmissionModel.ts

@@ -0,0 +1,64 @@
+import { ModelFactory } from "webiny/api/cms/model";
+
+export const CONTACT_SUBMISSION_MODEL_ID = "contactSubmission";
+
+class ContactSubmissionModelImpl implements ModelFactory.Interface {
+    async execute(builder: ModelFactory.Builder) {
+        return [
+            builder
+                .public({
+                    modelId: CONTACT_SUBMISSION_MODEL_ID,
+                    name: "Contact Submission",
+                    group: "ungrouped"
+                })
+                .description("Stores contact form submissions from the website")
+                .fields(fields => ({
+                    name: fields
+                        .text()
+                        .renderer("text-input")
+                        .label("Name")
+                        .help("Full name of the person submitting the form")
+                        .required("Name is required")
+                        .minLength(2)
+                        .maxLength(100)
+                        .help("Enter your full name"),
+                    email: fields
+                        .text()
+                        .renderer("text-input")
+                        .label("Email")
+                        .help("Email address for contact")
+                        .required("Email is required")
+                        .email()
+                        .help("Enter a valid email address"),
+                    message: fields
+                        .longText()
+                        .renderer("long-text-text-area")
+                        .label("Message")
+                        .help("Message content from the contact form")
+                        .required("Message is required")
+                        .minLength(10)
+                        .maxLength(1000)
+                        .help("Enter your message..."),
+                    emailType: fields
+                        .text()
+                        .renderer("radio-buttons")
+                        .label("Email Type")
+                        .help("Automatically classified as Work or Personal")
+                        .predefinedValues([
+                            { label: "Work", value: "work" },
+                            { label: "Personal", value: "personal" }
+                        ])
+                }))
+                .layout([["name", "email"], ["message"], ["emailType"]])
+                .titleFieldId("name")
+                .descriptionFieldId("message")
+                .singularApiName("ContactSubmission")
+                .pluralApiName("ContactSubmissions")
+        ];
+    }
+}
+
+export default ModelFactory.createImplementation({
+    implementation: ContactSubmissionModelImpl,
+    dependencies: []
+});

extensions/models/EmailTypeEntryListColumn.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { ContentEntryListConfig } from "webiny/admin/cms/entry/list";
+
+// You can destructure config components to make the code more readable and easier to work with.
+const { Browser } = ContentEntryListConfig;
+
+interface ContactSubmissionTableRow {
+    values: {
+        emailType: "work" | "personal";
+    };
+}
+
+export const EmailTypeCell = () => {
+    // You can destructure child methods to make the code more readable and easier to work with.
+    const { useTableRow, isFolderRow } = ContentEntryListConfig.Browser.Table.Column;
+    // useTableRow() allows you to access the entire data of the current row.
+    const { row } = useTableRow<ContactSubmissionTableRow>();
+
+    // isFolderRow() allows for custom rendering when the current row is a folder.
+    if (isFolderRow(row)) {
+        return <>{"-"}</>;
+    }
+
+    const emailType = row.data.values.emailType;
+    return emailType === "work" ? <>{"Business"}</> : <>{"Personal"}</>;
+};
+
+const EmailTypeEntryListColumn = () => {
+    return (
+        <ContentEntryListConfig>
+            <Browser.Table.Column
+                name={"email"}
+                path={"values.email"}
+                header={"Email"}
+                modelIds={["contactSubmission"]}
+            />
+            <Browser.Table.Column
+                name={"emailType"}
+                header={"Email Type"}
+                modelIds={["contactSubmission"]}
+                cell={<EmailTypeCell />}
+            />
+        </ContentEntryListConfig>
+    );
+};
+
+export default EmailTypeEntryListColumn;

extensions/ProductCategoryModel.ts extensions/models/ProductCategoryModel.tsextensions/ProductCategoryModel.ts renamed to extensions/models/ProductCategoryModel.ts

@@ -6,25 +6,26 @@ class ProductCategoryModelImpl implements ModelFactory.Interface {
     async execute(builder: ModelFactory.Builder) {
         return [
             builder
-                .public()
-                .modelId(PRODUCT_CATEGORY_MODEL_ID)
-                .name("Product Category")
+                .public({
+                    modelId: PRODUCT_CATEGORY_MODEL_ID,
+                    name: "Product Category",
+                    group: "ungrouped"
+                })
                 .description("Product categories for organizing products")
-                .group("ungrouped")
                 .fields(fields => ({
                     name: fields
                         .text()
                         .renderer("text-input")
                         .label("Name")
-                        .helpText("Name of the product category")
+                        .help("Name of the product category")
                         .required("Name is required")
                         .minLength(2)
                         .maxLength(100),
                     slug: fields
                         .text()
                         .renderer("text-input")
                         .label("Slug")
-                        .helpText("URL-friendly identifier")
+                        .help("URL-friendly identifier")
                         .required("Slug is required")
                         .unique(),
                     description: fields

extensions/ProductModel.ts extensions/models/ProductModel.tsextensions/ProductModel.ts renamed to extensions/models/ProductModel.ts

@@ -6,30 +6,31 @@ class ProductModelImpl implements ModelFactory.Interface {
     async execute(builder: ModelFactory.Builder) {
         return [
             builder
-                .public()
-                .modelId(PRODUCT_MODEL_ID)
-                .name("Product")
+                .public({
+                    modelId: PRODUCT_MODEL_ID,
+                    name: "Product",
+                    group: "ungrouped"
+                })
                 .description("Products for our e-commerce store")
-                .group("ungrouped")
                 .fields(fields => ({
                     name: fields
                         .text()
                         .renderer("text-input")
                         .label("Name")
-                        .helpText("Product name")
+                        .help("Product name")
                         .required("Name is required"),
                     sku: fields
                         .text()
                         .renderer("text-input")
                         .label("SKU")
-                        .helpText("Stock Keeping Unit - unique product identifier")
+                        .help("Stock Keeping Unit - unique product identifier")
                         .required("SKU is required")
                         .unique(),
                     description: fields
                         .longText()
                         .renderer("long-text-text-area")
                         .label("Description")
-                        .helpText("Detailed product description"),
+                        .help("Detailed product description"),
                     price: fields
                         .number()
                         .renderer("number-input")

packages/admin-ui/src/DataTable/DataTable.tsx

@@ -51,6 +51,10 @@ interface DataTableColumn<T> {
      * Enable column visibility toggling.
      */
     enableHiding?: boolean;
+    /*
+     * Accessor key for the column data path.
+     */
+    accessorKey?: string;
 }
 
 type DataTableColumns<T> = {
@@ -161,6 +165,7 @@ const defineColumns = <T,>(
 
         const defaults: ColumnDef<T>[] = columnsList.map(column => {
             const {
+                accessorKey,
                 cell,
                 className,
                 enableHiding = true,
@@ -173,7 +178,7 @@ const defineColumns = <T,>(
 
             return {
                 id,
-                accessorKey: id,
+                accessorKey: accessorKey || id,
                 header: () => header,
                 cell: props => {
                     if (cell && typeof cell === "function") {

packages/api-headless-cms/__tests__/graphql/schema/cms/helpers.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+import { transformSortToArray } from "~/graphql/schema/cms/helpers";
+
+/**
+ * Test the sort transformation helper that converts object format to array format.
+ * This transformation is needed because the CMS schema accepts sort as an object,
+ * but the underlying GraphQL schemas expect an array format.
+ */
+describe("CMS Schema Helpers", () => {
+    describe("transformSortToArray", () => {
+        it("should transform single sort field from object to array", () => {
+            const input = { createdOn: "desc" };
+            const expected = ["createdOn_DESC"];
+
+            const result = transformSortToArray(input);
+
+            expect(result).toEqual(expected);
+        });
+
+        it("should transform multiple sort fields from object to array", () => {
+            const input = { createdOn: "desc", name: "asc" };
+            const expected = ["createdOn_DESC", "name_ASC"];
+
+            const result = transformSortToArray(input);
+
+            expect(result).toEqual(expected);
+        });
+
+        it("should handle uppercase direction values", () => {
+            const input = { createdOn: "DESC" };
+            const expected = ["createdOn_DESC"];
+
+            const result = transformSortToArray(input);
+
+            expect(result).toEqual(expected);
+        });
+
+        it("should handle lowercase direction values", () => {
+            const input = { modifiedOn: "asc" };
+            const expected = ["modifiedOn_ASC"];
+
+            const result = transformSortToArray(input);
+
+            expect(result).toEqual(expected);
+        });
+
+        it("should return undefined for undefined input", () => {
+            const result = transformSortToArray(undefined);
+
+            expect(result).toBeUndefined();
+        });
+
+        it("should return undefined for null input", () => {
+            const result = transformSortToArray(null as any);
+
+            expect(result).toBeUndefined();
+        });
+
+        it("should return empty array for empty object", () => {
+            const result = transformSortToArray({});
+
+            expect(result).toEqual([]);
+        });
+    });
+});