Future Admin Generator: parse config using ts-morph to support inline functions and direct imports

.changeset/pre.json

@@ -1,81 +1,81 @@
 {
-  "mode": "pre",
-  "tag": "beta",
-  "initialVersions": {
-    "comet-demo-admin": "1.0.0",
-    "comet-demo-admin-server": "1.0.0",
-    "comet-demo-api": "1.0.0",
-    "comet-demo-site": "1.0.0",
-    "comet-demo-site-pages": "1.0.0",
-    "comet-docs": "0.0.0",
-    "@comet/admin": "7.13.0",
-    "@comet/admin-babel-preset": "7.13.0",
-    "@comet/admin-color-picker": "7.13.0",
-    "@comet/admin-date-time": "7.13.0",
-    "@comet/admin-icons": "7.13.0",
-    "@comet/admin-rte": "7.13.0",
-    "@comet/admin-theme": "7.13.0",
-    "@comet/cms-admin": "7.13.0",
-    "@comet/cms-api": "7.13.0",
-    "@comet/cli": "7.13.0",
-    "@comet/eslint-config": "7.13.0",
-    "@comet/eslint-plugin": "7.13.0",
-    "@comet/cms-site": "7.13.0",
-    "comet-storybook": "1.0.0",
-    "@comet/admin-generator": "7.14.0",
-    "@comet/api-generator": "7.14.0"
-  },
-  "changesets": [
-    "chatty-pets-serve",
-    "clean-dots-pull",
-    "cyan-ghosts-smoke",
-    "dirty-brooms-beam",
-    "eighty-rockets-yell",
-    "fast-plums-tickle",
-    "fifty-buses-hope",
-    "five-games-refuse",
-    "four-cobras-mate",
-    "four-forks-call",
-    "four-houses-taste",
-    "giant-teachers-tease",
-    "grumpy-fishes-live",
-    "heavy-games-marry",
-    "hot-cheetahs-juggle",
-    "khaki-zebras-roll",
-    "late-hats-explain",
-    "lazy-pears-shout",
-    "little-students-attend",
-    "lucky-books-thank",
-    "lucky-doors-raise",
-    "nasty-pets-check",
-    "nervous-otters-hunt",
-    "new-cherries-provide",
-    "nice-bananas-press",
-    "nice-masks-invite",
-    "old-adults-whisper",
-    "perfect-mangos-greet",
-    "polite-chairs-join",
-    "popular-seals-promise",
-    "purple-pants-tell",
-    "rich-spiders-trade",
-    "rude-laws-pretend",
-    "seven-wasps-jump",
-    "sharp-apes-visit",
-    "sharp-dryers-happen",
-    "shiny-ads-fix",
-    "six-suns-join",
-    "soft-horses-ring",
-    "soft-taxis-train",
-    "spicy-bottles-admire",
-    "spotty-stingrays-camp",
-    "sweet-guests-poke",
-    "sweet-ways-relax",
-    "tame-ligers-enjoy",
-    "tasty-goats-explode",
-    "ten-onions-wash",
-    "thick-windows-cover",
-    "thirty-moles-invite",
-    "two-humans-decide",
-    "wicked-coins-work"
-  ]
+    "mode": "pre",
+    "tag": "beta",
+    "initialVersions": {
+        "comet-demo-admin": "1.0.0",
+        "comet-demo-admin-server": "1.0.0",
+        "comet-demo-api": "1.0.0",
+        "comet-demo-site": "1.0.0",
+        "comet-demo-site-pages": "1.0.0",
+        "comet-docs": "0.0.0",
+        "@comet/admin": "7.13.0",
+        "@comet/admin-babel-preset": "7.13.0",
+        "@comet/admin-color-picker": "7.13.0",
+        "@comet/admin-date-time": "7.13.0",
+        "@comet/admin-icons": "7.13.0",
+        "@comet/admin-rte": "7.13.0",
+        "@comet/admin-theme": "7.13.0",
+        "@comet/cms-admin": "7.13.0",
+        "@comet/cms-api": "7.13.0",
+        "@comet/cli": "7.13.0",
+        "@comet/eslint-config": "7.13.0",
+        "@comet/eslint-plugin": "7.13.0",
+        "@comet/cms-site": "7.13.0",
+        "comet-storybook": "1.0.0",
+        "@comet/admin-generator": "7.14.0",
+        "@comet/api-generator": "7.14.0"
+    },
+    "changesets": [
+        "chatty-pets-serve",
+        "clean-dots-pull",
+        "cyan-ghosts-smoke",
+        "dirty-brooms-beam",
+        "eighty-rockets-yell",
+        "fast-plums-tickle",
+        "fifty-buses-hope",
+        "five-games-refuse",
+        "four-cobras-mate",
+        "four-forks-call",
+        "four-houses-taste",
+        "giant-teachers-tease",
+        "grumpy-fishes-live",
+        "heavy-games-marry",
+        "hot-cheetahs-juggle",
+        "khaki-zebras-roll",
+        "late-hats-explain",
+        "lazy-pears-shout",
+        "little-students-attend",
+        "lucky-books-thank",
+        "lucky-doors-raise",
+        "nasty-pets-check",
+        "nervous-otters-hunt",
+        "new-cherries-provide",
+        "nice-bananas-press",
+        "nice-masks-invite",
+        "old-adults-whisper",
+        "perfect-mangos-greet",
+        "polite-chairs-join",
+        "popular-seals-promise",
+        "purple-pants-tell",
+        "rich-spiders-trade",
+        "rude-laws-pretend",
+        "seven-wasps-jump",
+        "sharp-apes-visit",
+        "sharp-dryers-happen",
+        "shiny-ads-fix",
+        "six-suns-join",
+        "soft-horses-ring",
+        "soft-taxis-train",
+        "spicy-bottles-admire",
+        "spotty-stingrays-camp",
+        "sweet-guests-poke",
+        "sweet-ways-relax",
+        "tame-ligers-enjoy",
+        "tasty-goats-explode",
+        "ten-onions-wash",
+        "thick-windows-cover",
+        "thirty-moles-invite",
+        "two-humans-decide",
+        "wicked-coins-work"
+    ]
 }

demo/admin/src/news/NewsForm.cometGen.ts

@@ -1,6 +1,9 @@
 import { type FormConfig } from "@comet/admin-generator";
+import { DamImageBlock } from "@comet/cms-admin";
 import { type GQLNews } from "@src/graphql.generated";
 
+import { NewsContentBlock } from "./blocks/NewsContentBlock";
+
 export const NewsForm: FormConfig<GQLNews> = {
     type: "form",
     gqlType: "News",
@@ -36,13 +39,13 @@ export const NewsForm: FormConfig<GQLNews> = {
             type: "block",
             name: "image",
             label: "Image",
-            block: { name: "DamImageBlock", import: "@comet/cms-admin" },
+            block: DamImageBlock,
         },
         {
             type: "block",
             name: "content",
             label: "Content",
-            block: { name: "NewsContentBlock", import: "../blocks/NewsContentBlock" },
+            block: NewsContentBlock,
         },
     ],
 };

demo/admin/src/news/NewsGrid.cometGen.ts

@@ -1,6 +1,9 @@
 import { type GridConfig } from "@comet/admin-generator";
+import { DamImageBlock } from "@comet/cms-admin";
 import { type GQLNews } from "@src/graphql.generated";
 
+import { NewsContentBlock } from "./blocks/NewsContentBlock";
+
 export const NewsGrid: GridConfig<GQLNews> = {
     type: "grid",
     gqlType: "News",
@@ -26,13 +29,13 @@ export const NewsGrid: GridConfig<GQLNews> = {
             type: "block",
             name: "image",
             headerName: "Image",
-            block: { name: "DamImageBlock", import: "@comet/cms-admin" },
+            block: DamImageBlock,
         },
         {
             type: "block",
             name: "content",
             headerName: "Content",
-            block: { name: "NewsContentBlock", import: "../blocks/NewsContentBlock" },
+            block: NewsContentBlock,
         },
     ],
 };

demo/admin/src/products/ProductsGridPreviewAction.tsx

@@ -8,13 +8,14 @@ import {
     IconButton,
     Typography,
 } from "@mui/material";
-import { type GridCellParams, type GridValidRowModel } from "@mui/x-data-grid-pro";
-import { type GQLProductsGridFutureFragment } from "@src/products/future/generated/ProductsGrid.generated";
-import { type GQLProductsListManualFragment } from "@src/products/ProductsGrid.generated";
+import { type GridCellParams } from "@mui/x-data-grid-pro";
 import { useState } from "react";
 import { FormattedMessage } from "react-intl";
 
-type Props = GridCellParams<GridValidRowModel, GQLProductsListManualFragment | GQLProductsGridFutureFragment>;
+import { type GQLProductsGridFutureFragment } from "./future/generated/ProductsGrid.generated";
+import { type GQLProductsListManualFragment } from "./ProductsGrid.generated";
+
+type Props = GridCellParams<GQLProductsListManualFragment | GQLProductsGridFutureFragment>;
 
 export const ProductsGridPreviewAction = ({ row }: Props) => {
     const [showDetails, setShowDetails] = useState(false);

demo/admin/src/products/future/CreateCapProductForm.cometGen.ts

@@ -1,6 +1,9 @@
 import { type FormConfig } from "@comet/admin-generator";
+import { DamImageBlock } from "@comet/cms-admin";
 import { type GQLProduct } from "@src/graphql.generated";
 
+import { validateTitle } from "./validateTitle";
+
 export const CreateCapProductForm: FormConfig<GQLProduct> = {
     type: "form",
     gqlType: "Product",
@@ -12,13 +15,13 @@ export const CreateCapProductForm: FormConfig<GQLProduct> = {
             name: "title",
             label: "Titel", // default is generated from name (camelCaseToHumanReadable)
             required: true, // default is inferred from gql schema
-            validate: { name: "validateTitle", import: "./validateTitle" },
+            validate: validateTitle,
         },
         { type: "text", name: "slug" },
         { type: "text", name: "description", label: "Description", multiline: true },
         { type: "asyncSelect", name: "category", rootQuery: "productCategories" },
         { type: "boolean", name: "inStock" },
         { type: "date", name: "availableSince", startAdornment: { icon: "CalendarToday" } },
-        { type: "block", name: "image", label: "Image", block: { name: "DamImageBlock", import: "@comet/cms-admin" } },
+        { type: "block", name: "image", label: "Image", block: DamImageBlock },
     ],
 };

demo/admin/src/products/future/IdFieldInForm.cometGen.ts

@@ -1,4 +1,5 @@
 import { type FormConfig } from "@comet/admin-generator";
+import { DamImageBlock } from "@comet/cms-admin";
 import { type GQLProduct } from "@src/graphql.generated";
 
 export const ProductForm: FormConfig<GQLProduct> = {
@@ -8,6 +9,6 @@ export const ProductForm: FormConfig<GQLProduct> = {
     fields: [
         { type: "text", name: "id", label: "ID", readOnly: true },
         { type: "text", name: "title", label: "Title", required: true },
-        { type: "block", name: "image", label: "Image", block: { name: "DamImageBlock", import: "@comet/cms-admin" } },
+        { type: "block", name: "image", label: "Image", block: DamImageBlock },
     ],
 };

demo/admin/src/products/future/ProductForm.cometGen.ts → demo/admin/src/products/future/ProductForm.cometGen.tsx

@@ -1,5 +1,9 @@
 import { type FormConfig } from "@comet/admin-generator";
+import { DamImageBlock } from "@comet/cms-admin";
 import { type GQLProduct } from "@src/graphql.generated";
+import { FormattedMessage } from "react-intl";
+
+import { FutureProductNotice } from "../helpers/FutureProductNotice";
 
 export const ProductForm: FormConfig<GQLProduct> = {
     type: "form",
@@ -18,7 +22,10 @@ export const ProductForm: FormConfig<GQLProduct> = {
                     name: "title",
                     label: "Titel", // default is generated from name (camelCaseToHumanReadable)
                     required: true, // default is inferred from gql schema
-                    validate: { name: "validateTitle", import: "./validateTitle" },
+                    validate: (value: string) =>
+                        value.length < 3 ? (
+                            <FormattedMessage id="product.validate.titleMustBe3CharsLog" defaultMessage="Title must be at least 3 characters long" />
+                        ) : undefined,
                 },
                 { type: "text", name: "slug" },
                 { type: "date", name: "createdAt", label: "Created", readOnly: true },
@@ -68,8 +75,8 @@ export const ProductForm: FormConfig<GQLProduct> = {
                 },
                 { type: "boolean", name: "inStock" },
                 { type: "date", name: "availableSince", startAdornment: { icon: "CalendarToday" } },
-                { type: "component", component: { name: "FutureProductNotice", import: "../../helpers/FutureProductNotice" } },
-                { type: "block", name: "image", label: "Image", block: { name: "DamImageBlock", import: "@comet/cms-admin" } },
+                { type: "component", component: FutureProductNotice },
+                { type: "block", name: "image", label: "Image", block: DamImageBlock },
                 { type: "fileUpload", name: "priceList", label: "Price List", maxFileSize: 1024 * 1024 * 4, download: true },
                 { type: "fileUpload", name: "datasheets", label: "Datasheets", multiple: true, maxFileSize: 1024 * 1024 * 4, download: false },
                 { type: "dateTime", name: "lastCheckedAt", label: "Last checked at" },

demo/admin/src/products/future/ProductTitle.tsx

@@ -0,0 +1,3 @@
+export function ProductTitle({ title }: { title: string }) {
+    return <div>Product: {title}</div>;
+}

demo/admin/src/products/future/ProductsGrid.cometGen.ts → demo/admin/src/products/future/ProductsGrid.cometGen.tsx

@@ -1,6 +1,10 @@
 import { type GridConfig } from "@comet/admin-generator";
 import { type GQLProduct } from "@src/graphql.generated";
 
+import { ProductsGridPreviewAction } from "../ProductsGridPreviewAction";
+import { ManufacturerFilterOperators } from "./ManufacturerFilter";
+import { ProductTitle } from "./ProductTitle";
+
 const typeValues = [{ value: "Cap", label: "great Cap" }, "Shirt", "Tie"];
 
 export const ProductsGrid: GridConfig<GQLProduct> = {
@@ -62,6 +66,14 @@ export const ProductsGrid: GridConfig<GQLProduct> = {
             sortBy: ["title", "price", "type", "category", "inStock"],
             disableExport: true, // TODO: Implement `valueFormatter` for type "combination"
         },
+        {
+            type: "text",
+            renderCell: ({ value, row }) => <ProductTitle title={value} />,
+            name: "title",
+            headerName: "Custom",
+            minWidth: 200,
+            visible: "down('md')",
+        },
         { type: "text", name: "title", headerName: "Titel", minWidth: 200, maxWidth: 250, visible: "up('md')" },
         { type: "text", name: "description", headerName: "Description" },
         // TODO: Allow setting options for `intl.formatNumber` through `valueFormatter` (type "number")
@@ -102,11 +114,11 @@ export const ProductsGrid: GridConfig<GQLProduct> = {
             name: "manufacturer.name",
             headerName: "Manufacturer",
             fieldName: "manufacturer",
-            filterOperators: { name: "ManufacturerFilterOperators", import: "./ManufacturerFilter" },
+            filterOperators: ManufacturerFilterOperators,
         },
         {
             type: "actions",
-            component: { name: "ProductsGridPreviewAction", import: "../../ProductsGridPreviewAction" },
+            component: ProductsGridPreviewAction,
         },
     ],
 };

demo/admin/src/products/future/generated/ProductForm.tsx

@@ -42,7 +42,6 @@ import { FormSpy } from "react-final-form";
 import { FormattedMessage } from "react-intl";
 
 import { FutureProductNotice } from "../../helpers/FutureProductNotice";
-import { validateTitle } from "../validateTitle";
 import {
     type GQLManufacturersSelectQuery,
     type GQLManufacturersSelectQueryVariables,
@@ -213,7 +212,14 @@ export function ProductForm({ id }: FormProps) {
                                 fullWidth
                                 name="title"
                                 label={<FormattedMessage id="product.title" defaultMessage="Titel" />}
-                                validate={validateTitle}
+                                validate={(value: string) =>
+                                    value.length < 3 ? (
+                                        <FormattedMessage
+                                            id="product.validate.titleMustBe3CharsLog"
+                                            defaultMessage="Title must be at least 3 characters long"
+                                        />
+                                    ) : undefined
+                                }
                             />
 
                             <TextField
@@ -423,14 +429,14 @@ export function ProductForm({ id }: FormProps) {
                                 name="priceList"
                                 label={<FormattedMessage id="product.priceList" defaultMessage="Price List" />}
                                 variant="horizontal"
-                                maxFileSize={4194304}
+                                maxFileSize={1024 * 1024 * 4}
                             />
                             <FileUploadField
                                 name="datasheets"
                                 label={<FormattedMessage id="product.datasheets" defaultMessage="Datasheets" />}
                                 variant="horizontal"
                                 multiple
-                                maxFileSize={4194304}
+                                maxFileSize={1024 * 1024 * 4}
                             />
                             <DateTimeField
                                 variant="horizontal"