@comet/admin-generator 8.0.0-beta.3 → 8.0.0-beta.5

package/bin/admin-generator.js

@@ -1,5 +1,8 @@
 #!/usr/bin/env node
+
 require("ts-node").register({
     require: ["tsconfig-paths/register"],
+    transpileOnly: true,
 });
+
 require("../lib/adminGenerator");

package/lib/commands/generate/config/parseConfig.d.ts

@@ -0,0 +1 @@
+export declare function parseConfig(file: string): Promise<any>;

package/lib/commands/generate/config/parseConfig.js

@@ -0,0 +1,72 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseConfig = parseConfig;
+const fs_1 = require("fs");
+const path_1 = require("path");
+const transformConfig_1 = require("./transformConfig");
+function parseConfig(file) {
+    return __awaiter(this, void 0, void 0, function* () {
+        //1. parse config file using TypeScript Complier Api and transform it (replace imports and functions that can't be executed)
+        const transformedConfig = (0, transformConfig_1.transformConfigFile)(file, yield fs_1.promises.readFile(file, "utf-8"));
+        //2. save modified config file to temp file
+        const tempFileName = `${(0, path_1.dirname)(file)}/.temp-${(0, path_1.basename)(file)}`;
+        yield fs_1.promises.writeFile(tempFileName, transformedConfig, "utf-8");
+        //3. import (=execute) temp modified config file
+        let executedConfig;
+        try {
+            const configFile = yield Promise.resolve(`${tempFileName.replace(/\.tsx?$/, "")}`).then(s => __importStar(require(s)));
+            if (!configFile.default) {
+                throw new Error(`No default export found in ${file}`);
+            }
+            executedConfig = configFile.default;
+        }
+        catch (e) {
+            console.error(e);
+            throw new Error(`Error executing config file ${file}: ${e}`);
+        }
+        yield fs_1.promises.rm(tempFileName);
+        return executedConfig;
+    });
+}

package/lib/commands/generate/config/transformConfig.d.ts

@@ -0,0 +1 @@
+export declare function transformConfigFile(fileName: string, sourceText: string): string;

package/lib/commands/generate/config/transformConfig.js

@@ -0,0 +1,239 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformConfigFile = transformConfigFile;
+const ts = __importStar(require("typescript"));
+const supportedImportPaths = [
+    "[type=grid].columns.filterOperators",
+    "[type=grid].columns.block",
+    "[type=grid].columns.component",
+    // TODO implement in generator "[type=grid].columns.renderCell",
+    //support in up to 5 levels of nested fields (eg. fieldSet)
+    ...Array.from(Array(5).keys()).map((i) => `[type=form]${".fields".repeat(i + 1)}.validate`),
+    ...Array.from(Array(5).keys()).map((i) => `[type=form]${".fields".repeat(i + 1)}.block`),
+    ...Array.from(Array(5).keys()).map((i) => `[type=form]${".fields".repeat(i + 1)}.component`),
+];
+const supportedInlineCodePaths = [
+    // TODO implement in generator "[type=grid].columns.filterOperators",
+    "[type=grid].columns.renderCell",
+    //support in up to 5 levels of nested fields (eg. fieldSet)
+    ...Array.from(Array(5).keys()).map((i) => `[type=form]${".fields".repeat(i + 1)}.validate`),
+];
+// transform the config file to replace all imports and inline code with a { code, imports } object
+// this is needed to be able to execute the config file in a node environment
+function transformConfigFile(fileName, sourceText) {
+    const sourceFile = ts.createSourceFile(fileName, sourceText, ts.ScriptTarget.ES2024, // language version
+    true);
+    const importedIdentifiers = collectImports(sourceFile);
+    function configTransformer() {
+        return (context) => {
+            const visit = (node, path) => {
+                if (ts.isArrowFunction(node)) {
+                    if (supportedInlineCodePaths.includes(path)) {
+                        let code = node.getText();
+                        if (code.endsWith(","))
+                            code = code.slice(0, -1); // for some unknown reason node can contain the trailing comma
+                        const imports = findUsedImports(node.body, importedIdentifiers); //find all imports used in the function body
+                        // replace inline code with { code, imports } object
+                        return ts.factory.createObjectLiteralExpression([
+                            ts.factory.createPropertyAssignment("code", ts.factory.createStringLiteral(code)),
+                            ts.factory.createPropertyAssignment("imports", ts.factory.createArrayLiteralExpression(imports.map((imprt) => {
+                                return ts.factory.createObjectLiteralExpression([
+                                    ts.factory.createPropertyAssignment("name", ts.factory.createStringLiteral(imprt.name)),
+                                    ts.factory.createPropertyAssignment("import", ts.factory.createStringLiteral(imprt.import)),
+                                ]);
+                            }))),
+                        ], true);
+                    }
+                    else {
+                        throw new Error(`Inline Function is not allowed here and calling the function is not supported: ${path}`);
+                    }
+                }
+                else if (ts.isIdentifier(node)) {
+                    const imported = importedIdentifiers.get(node.text);
+                    if (imported) {
+                        if (supportedImportPaths.includes(path)) {
+                            // replace imported identifier with { name, import } object
+                            return ts.factory.createObjectLiteralExpression([
+                                ts.factory.createPropertyAssignment("name", ts.factory.createStringLiteral(node.text)),
+                                ts.factory.createPropertyAssignment("import", ts.factory.createStringLiteral(imported.import)),
+                            ], true);
+                        }
+                        else {
+                            throw new Error(`Following the import is not supported: ${path} ${node.text}`);
+                        }
+                    }
+                }
+                const transformKinds = [
+                    ts.SyntaxKind.Identifier,
+                    ts.SyntaxKind.ArrayLiteralExpression,
+                    ts.SyntaxKind.ObjectLiteralExpression,
+                    ts.SyntaxKind.TaggedTemplateExpression,
+                    ts.SyntaxKind.SpreadElement,
+                    ts.SyntaxKind.PropertyAssignment,
+                    ts.SyntaxKind.ShorthandPropertyAssignment,
+                ];
+                if (!transformKinds.includes(node.kind)) {
+                    // if the node is not one of the transformKinds, stop transformation at this level return it as is
+                    return node;
+                }
+                let newPath = path;
+                if (path == "") {
+                    // first entry of path is the type, then property names (. separated) are added
+                    if (ts.isObjectLiteralExpression(node)) {
+                        const typeProperty = getTypePropertyFromObjectLiteral(node);
+                        newPath = typeProperty ? `[type=${typeProperty}]` : "";
+                    }
+                }
+                else {
+                    if (ts.isPropertyAssignment(node)) {
+                        newPath = `${path}.${node.name.getText()}`;
+                    }
+                }
+                return ts.visitEachChild(node, (child) => {
+                    return visit(child, newPath);
+                }, context);
+            };
+            return (node) => ts.visitNode(node, (child) => visit(child, ""));
+        };
+    }
+    const configNode = findConfigNode(sourceFile);
+    const transformedConfigNode = ts.transform(configNode, [configTransformer()]).transformed[0];
+    const updatedSource = ts.transform(sourceFile, [
+        (context) => {
+            const visitor = (node) => {
+                if (node === configNode)
+                    return transformedConfigNode;
+                return ts.visitEachChild(node, visitor, context);
+            };
+            return (node) => ts.visitNode(node, visitor);
+        },
+    ]).transformed[0];
+    const printer = ts.createPrinter();
+    return printer.printFile(updatedSource);
+}
+// finds the config node in the source file (=default export, might be wrapped in defineConfig or uses satisfies)
+function findConfigNode(sourceFile) {
+    let ret;
+    sourceFile.forEachChild((node) => {
+        if (ts.isExportAssignment(node)) {
+            const exportedNode = node.expression;
+            if (ts.isCallExpression(exportedNode) && exportedNode.expression.getText() == "defineConfig") {
+                //export default defineConfig<Foo>({ ... });
+                const args = exportedNode.arguments;
+                if (args.length != 1) {
+                    throw new Error(`Expected exactly one argument for defineConfig`);
+                }
+                ret = args[0];
+                return false;
+            }
+            else if (ts.isSatisfiesExpression(exportedNode)) {
+                //export default { ... } satisfies GeneratorConfig<Foo>;
+                if (ts.isObjectLiteralExpression(exportedNode.expression)) {
+                    ret = exportedNode.expression;
+                    return false;
+                }
+            }
+            else if (ts.isObjectLiteralExpression(exportedNode)) {
+                //export default { ... };
+                ret = exportedNode;
+                return false;
+            }
+        }
+    });
+    if (!ret) {
+        throw new Error(`No default export found, please export the GeneratorConfig as default, preferrable using defineConfig helper.`);
+    }
+    return ret;
+}
+// simple helper that extracts the value of the type property from a object literal ({ type: "grid" } returns "grid")
+function getTypePropertyFromObjectLiteral(node) {
+    for (const property of node.properties) {
+        if (ts.isPropertyAssignment(property)) {
+            if (property.name.getText() == "type") {
+                const propertyAssignmentInitializer = property.initializer;
+                if (ts.isStringLiteral(propertyAssignmentInitializer)) {
+                    return propertyAssignmentInitializer.text;
+                }
+            }
+        }
+    }
+    return null;
+}
+// visits ast and collects all imports statements in the source file
+function collectImports(rootNode) {
+    const importedIdentifiers = new Map();
+    function visit(node) {
+        if (ts.isImportDeclaration(node) &&
+            node.importClause &&
+            node.importClause.namedBindings &&
+            ts.isNamedImports(node.importClause.namedBindings)) {
+            const moduleSpecifier = node.moduleSpecifier.text;
+            for (const element of node.importClause.namedBindings.elements) {
+                const localName = element.name.text;
+                const originalName = element.propertyName ? element.propertyName.text : localName;
+                importedIdentifiers.set(localName, {
+                    name: originalName,
+                    import: moduleSpecifier,
+                });
+            }
+        }
+        ts.forEachChild(node, visit);
+    }
+    visit(rootNode);
+    return importedIdentifiers;
+}
+// visits ast and collects all identifiers that are an import
+function findUsedImports(rootNode, importedIdentifiers) {
+    const imports = [];
+    const usedNames = new Set();
+    // Collect all identifiers used in the rootNode
+    function collectUsedIdentifiers(node) {
+        if (ts.isIdentifier(node)) {
+            usedNames.add(node.text);
+        }
+        ts.forEachChild(node, collectUsedIdentifiers);
+    }
+    collectUsedIdentifiers(rootNode);
+    // Match used identifiers to imported ones
+    // NOTE: this is not 100% correct as it doesn't recognize cases where a import is overwritten by a local variable. But it is fast.
+    for (const name of usedNames) {
+        const imported = importedIdentifiers.get(name);
+        if (imported) {
+            imports.push(imported);
+        }
+    }
+    return imports;
+}

package/lib/commands/generate/generate-command.d.ts

@@ -40,6 +40,7 @@ export type FormFieldConfig<T> = (({
     multiline?: boolean;
 } & InputBaseFieldConfig) | ({
     type: "number";
+    decimals?: number;
 } & InputBaseFieldConfig) | ({
     type: "numberRange";
     minValue: number;
@@ -105,13 +106,6 @@ export type FormConfig<T extends {
     createMutation?: string;
     fields: (FormFieldConfig<T> | FormLayoutConfig<T> | ComponentFormFieldConfig)[];
 };
-type TabsConfig = {
-    type: "tabs";
-    tabs: {
-        name: string;
-        content: GeneratorConfig;
-    }[];
-};
 type BaseColumnConfig = Pick<GridColDef, "headerName" | "width" | "minWidth" | "maxWidth" | "flex" | "pinned" | "disableExport"> & {
     headerInfoTooltip?: string;
     visible?: ColumnVisibleOption;
@@ -127,6 +121,8 @@ export type GridColumnConfig<T extends GridValidRowModel> = ({
     renderCell?: (params: GridRenderCellParams<T, any, any>) => JSX.Element;
 } | {
     type: "number";
+    currency?: string;
+    decimals?: number;
     renderCell?: (params: GridRenderCellParams<T, any, any>) => JSX.Element;
 } | {
     type: "boolean";
@@ -157,7 +153,7 @@ export type ActionsGridColumnConfig = {
 export type VirtualGridColumnConfig<T extends GridValidRowModel> = {
     type: "virtual";
     name: string;
-    queryFields?: UsableFields<T>[];
+    queryFields?: UsableFields<T, true>[];
     renderCell: (params: GridRenderCellParams<T, any, any>) => JSX.Element;
 } & Pick<GridColDef, "sortBy"> & BaseColumnConfig;
 type InitialFilterConfig = {
@@ -190,8 +186,17 @@ export type GridConfig<T extends {
     newEntryText?: string;
     rowActionProp?: boolean;
     selectionProps?: "multiSelect" | "singleSelect";
+    rowReordering?: {
+        enabled: boolean;
+        dragPreviewField?: UsableFields<T>;
+    };
 };
-export type GeneratorConfig = FormConfig<any> | GridConfig<any> | TabsConfig;
+export type GeneratorConfig<T extends {
+    __typename?: string;
+}> = FormConfig<T> | GridConfig<T>;
+export declare function defineConfig<T extends {
+    __typename?: string;
+}>(config: GeneratorConfig<T>): GeneratorConfig<T>;
 type GQLDocumentConfig = {
     document: string;
     export: boolean;

package/lib/commands/generate/generate-command.js

@@ -12,6 +12,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateCommand = void 0;
 exports.isFormFieldConfig = isFormFieldConfig;
 exports.isFormLayoutConfig = isFormLayoutConfig;
+exports.defineConfig = defineConfig;
 const graphql_file_loader_1 = require("@graphql-tools/graphql-file-loader");
 const load_1 = require("@graphql-tools/load");
 const commander_1 = require("commander");
@@ -19,9 +20,9 @@ const fs_1 = require("fs");
 const glob_1 = require("glob");
 const graphql_1 = require("graphql");
 const path_1 = require("path");
+const parseConfig_1 = require("./config/parseConfig");
 const generateForm_1 = require("./generateForm/generateForm");
 const generateGrid_1 = require("./generateGrid/generateGrid");
-const tsMorphHelper_1 = require("./utils/tsMorphHelper");
 const writeGenerated_1 = require("./utils/writeGenerated");
 function isFormFieldConfig(arg) {
     return !isFormLayoutConfig(arg);
@@ -29,11 +30,15 @@ function isFormFieldConfig(arg) {
 function isFormLayoutConfig(arg) {
     return arg.type !== undefined && ["fieldSet", "optionalNestedFields"].includes(arg.type);
 }
+function defineConfig(config) {
+    return config;
+}
 /**
  * @experimental
  */
 function runGenerate() {
     return __awaiter(this, arguments, void 0, function* (filePattern = "src/**/*.cometGen.{ts,tsx}") {
+        var _a;
         const schema = yield (0, load_1.loadSchema)("./schema.gql", {
             loaders: [new graphql_file_loader_1.GraphQLFileLoader()],
         });
@@ -44,28 +49,27 @@ function runGenerate() {
             let gqlDocumentsOutputCode = "";
             const targetDirectory = `${(0, path_1.dirname)(file)}/generated`;
             const baseOutputFilename = (0, path_1.basename)(file).replace(/\.cometGen\.tsx?$/, "");
-            const configs = (0, tsMorphHelper_1.configsFromSourceFile)((0, tsMorphHelper_1.morphTsSource)(file));
-            //const configs = await import(`${process.cwd()}/${file.replace(/\.ts$/, "")}`);
+            console.log(`generating ${file}`);
+            const config = yield (0, parseConfig_1.parseConfig)(file);
             const codeOuputFilename = `${targetDirectory}/${(0, path_1.basename)(file.replace(/\.cometGen\.tsx?$/, ""))}.tsx`;
             yield fs_1.promises.rm(codeOuputFilename, { force: true });
-            console.log(`generating ${file}`);
-            for (const exportName in configs) {
-                const config = configs[exportName];
-                let generated;
-                if (config.type == "form") {
-                    generated = (0, generateForm_1.generateForm)({ exportName, gqlIntrospection, baseOutputFilename, targetDirectory }, config);
-                }
-                else if (config.type == "grid") {
-                    generated = (0, generateGrid_1.generateGrid)({ exportName, gqlIntrospection, baseOutputFilename, targetDirectory }, config);
-                }
-                else {
-                    throw new Error(`Unknown config type: ${config.type}`);
-                }
-                outputCode += generated.code;
-                for (const queryName in generated.gqlDocuments) {
-                    const exportStatement = generated.gqlDocuments[queryName].export ? "export " : "";
-                    gqlDocumentsOutputCode += `${exportStatement} const ${queryName} = gql\`${generated.gqlDocuments[queryName].document}\`\n`;
-                }
+            const exportName = (_a = file.match(/([^/]+)\.cometGen\.tsx?$/)) === null || _a === void 0 ? void 0 : _a[1];
+            if (!exportName)
+                throw new Error("Can not determine exportName");
+            let generated;
+            if (config.type == "form") {
+                generated = (0, generateForm_1.generateForm)({ exportName, gqlIntrospection, baseOutputFilename, targetDirectory }, config);
+            }
+            else if (config.type == "grid") {
+                generated = (0, generateGrid_1.generateGrid)({ exportName, gqlIntrospection, baseOutputFilename, targetDirectory }, config);
+            }
+            else {
+                throw new Error(`Unknown config type`);
+            }
+            outputCode += generated.code;
+            for (const queryName in generated.gqlDocuments) {
+                const exportStatement = generated.gqlDocuments[queryName].export ? "export " : "";
+                gqlDocumentsOutputCode += `${exportStatement} const ${queryName} = gql\`${generated.gqlDocuments[queryName].document}\`\n`;
             }
             yield (0, writeGenerated_1.writeGenerated)(codeOuputFilename, outputCode);
             if (gqlDocumentsOutputCode != "") {
@@ -78,6 +82,7 @@ function runGenerate() {
             `;
                 yield (0, writeGenerated_1.writeGenerated)(gqlDocumentsOuputFilename, gqlDocumentsOutputCode);
             }
+            console.log("");
         }
     });
 }

package/lib/commands/generate/generateForm/generateForm.js

@@ -48,7 +48,43 @@ config) {
     const instanceGqlType = gqlType[0].toLowerCase() + gqlType.substring(1);
     const formFragmentName = (_a = config.fragmentName) !== null && _a !== void 0 ? _a : `${gqlType}Form`;
     const gqlDocuments = {};
-    const imports = [];
+    const imports = [
+        { name: "FormattedMessage", importPath: "react-intl" },
+        { name: "useApolloClient", importPath: "@apollo/client" },
+        { name: "useQuery", importPath: "@apollo/client" },
+        { name: "gql", importPath: "@apollo/client" },
+        { name: "AsyncSelectField", importPath: "@comet/admin" },
+        { name: "CheckboxField", importPath: "@comet/admin" },
+        { name: "Field", importPath: "@comet/admin" },
+        { name: "filterByFragment", importPath: "@comet/admin" },
+        { name: "FinalForm", importPath: "@comet/admin" },
+        { name: "FinalFormInput", importPath: "@comet/admin" },
+        { name: "FinalFormRangeInput", importPath: "@comet/admin" },
+        { name: "FinalFormSelect", importPath: "@comet/admin" },
+        { name: "FinalFormSubmitEvent", importPath: "@comet/admin" },
+        { name: "Loading", importPath: "@comet/admin" },
+        { name: "NumberField", importPath: "@comet/admin" },
+        { name: "RadioGroupField", importPath: "@comet/admin" },
+        { name: "TextAreaField", importPath: "@comet/admin" },
+        { name: "TextField", importPath: "@comet/admin" },
+        { name: "useFormApiRef", importPath: "@comet/admin" },
+        { name: "useStackSwitchApi", importPath: "@comet/admin" },
+        { name: "ArrowLeft", importPath: "@comet/admin-icons" },
+        { name: "Lock", importPath: "@comet/admin-icons" },
+        { name: "DateTimeField", importPath: "@comet/admin-date-time" },
+        { name: "FinalFormDatePicker", importPath: "@comet/admin-date-time" },
+        { name: "BlockState", importPath: "@comet/cms-admin" },
+        { name: "createFinalFormBlock", importPath: "@comet/cms-admin" },
+        { name: "queryUpdatedAt", importPath: "@comet/cms-admin" },
+        { name: "resolveHasSaveConflict", importPath: "@comet/cms-admin" },
+        { name: "useFormSaveConflict", importPath: "@comet/cms-admin" },
+        { name: "FileUploadField", importPath: "@comet/cms-admin" },
+        { name: "IconButton", importPath: "@mui/material" },
+        { name: "MenuItem", importPath: "@mui/material" },
+        { name: "InputAdornment", importPath: "@mui/material" },
+        { name: "FormApi", importPath: "final-form" },
+        { name: "useMemo", importPath: "react" },
+    ];
     const props = [];
     const mode = (_b = config.mode) !== null && _b !== void 0 ? _b : "all";
     const editMode = mode === "edit" || mode == "all";
@@ -219,10 +255,12 @@ config) {
             name: `GQL${documentName}${type[0].toUpperCase() + type.substring(1)}`,
             importPath: `./${baseOutputFilename}.gql.generated`,
         });
-        imports.push({
-            name: `GQL${documentName}${type[0].toUpperCase() + type.substring(1)}Variables`,
-            importPath: `./${baseOutputFilename}.gql.generated`,
-        });
+        if (type !== "fragment") {
+            imports.push({
+                name: `GQL${documentName}${type[0].toUpperCase() + type.substring(1)}Variables`,
+                importPath: `./${baseOutputFilename}.gql.generated`,
+            });
+        }
     }
     const finalFormSubscription = Object.keys((_e = (_d = generatedFields.finalFormConfig) === null || _d === void 0 ? void 0 : _d.subscription) !== null && _e !== void 0 ? _e : {});
     const finalFormRenderProps = Object.keys((_g = (_f = generatedFields.finalFormConfig) === null || _f === void 0 ? void 0 : _f.renderProps) !== null && _g !== void 0 ? _g : {});
@@ -248,33 +286,10 @@ config) {
         }`;
         filterByFragmentType = `${formFragmentName}Fragment`;
     }
-    const code = `import { useApolloClient, useQuery, gql } from "@apollo/client";
-    import {
-        AsyncSelectField,
-        CheckboxField,
-        Field,
-        filterByFragment,
-        FinalForm,
-        FinalFormInput,
-        FinalFormRangeInput,
-        FinalFormSelect,
-        FinalFormSubmitEvent,
-        Loading,
-        RadioGroupField,
-        TextAreaField,
-        TextField,
-        useFormApiRef,
-        useStackSwitchApi,
-    } from "@comet/admin";
-    import { ArrowLeft, Lock } from "@comet/admin-icons";
-    import { DateTimeField, FinalFormDatePicker } from "@comet/admin-date-time";
-    import { BlockState, createFinalFormBlock, queryUpdatedAt, resolveHasSaveConflict, useFormSaveConflict, FileUploadField } from "@comet/cms-admin";
-    import { FormControlLabel, IconButton, MenuItem, InputAdornment } from "@mui/material";
-    import { FormApi } from "final-form";
-    import isEqual from "lodash.isequal";
-    import { useMemo } from "react";
-    import { FormattedMessage } from "react-intl";
+    const code = `
     ${(0, generateImportsCode_1.generateImportsCode)(imports)}
+    import isEqual from "lodash.isequal";
+
     ${rootBlockFields.length > 0
         ? `const rootBlocks = {
                 ${rootBlockFields.map((field) => `${String(field.name)}: ${field.block.name}`)}
@@ -283,11 +298,11 @@ config) {
 
     ${customFilterByFragment}
 
-    type FormValues = ${formValuesConfig.filter((config) => !!config.omitFromFragmentType).length > 0
-        ? `Omit<${filterByFragmentType}, ${formValuesConfig
-            .filter((config) => !!config.omitFromFragmentType)
-            .map((config) => `"${config.omitFromFragmentType}"`)
-            .join(" | ")}>`
+    type FormValues = ${formValuesConfig.filter((config) => !!config.omitFromFragmentType).length > 0 || rootBlockFields.length > 0
+        ? `Omit<${filterByFragmentType}, ${[
+            ...(rootBlockFields.length > 0 ? ["keyof typeof rootBlocks"] : []),
+            ...formValuesConfig.filter((config) => !!config.omitFromFragmentType).map((config) => `"${config.omitFromFragmentType}"`),
+        ].join(" | ")}>`
         : `${filterByFragmentType}`} ${formValuesConfig.filter((config) => !!config.typeCode).length > 0
         ? `& {
                 ${formValuesConfig

package/lib/commands/generate/generateForm/generateFormField.js

@@ -140,6 +140,7 @@ function generateFormField({ gqlIntrospection, baseOutputFilename, config, formC
     let formValueToGqlInputCode = "";
     let formFragmentField = name;
     if (config.type == "text") {
+        const required = config.required !== undefined ? config.required : false; // don't use inferred from gql here, non-nullable textinput allows empty string
         const TextInputComponent = config.multiline ? "TextAreaField" : "TextField";
         code = `
         <${TextInputComponent}
@@ -158,18 +159,20 @@ function generateFormField({ gqlIntrospection, baseOutputFilename, config, formC
             : ""}
             ${validateCode}
         />`;
+        if (!config.virtual && !required && !config.readOnly) {
+            formValueToGqlInputCode = `${name}: formValues.${name} ?? "",`;
+        }
     }
     else if (config.type == "number") {
         code = `
-            <Field
+            <NumberField
                 ${required ? "required" : ""}
                 ${config.readOnly ? readOnlyPropsWithLock : ""}
                 variant="horizontal"
                 fullWidth
                 name="${nameWithPrefix}"
-                component={FinalFormInput}
-                type="number"
                 label={${fieldLabel}}
+                ${config.decimals ? `decimals={${config.decimals}}` : ""}
                 ${config.startAdornment ? `startAdornment={<InputAdornment position="start">${startAdornment.adornmentString}</InputAdornment>}` : ""}
                 ${config.endAdornment ? `endAdornment={<InputAdornment position="end">${endAdornment.adornmentString}</InputAdornment>}` : ""}
                 ${config.helperText
@@ -462,7 +465,14 @@ function generateFormField({ gqlIntrospection, baseOutputFilename, config, formC
             imports.push({ name: "OnChangeField", importPath: "@comet/admin" });
             finalFormConfig = { subscription: { values: true }, renderProps: { values: true, form: true } };
         }
-        formValueToGqlInputCode = !config.virtual ? `${name}: formValues.${name}?.id,` : ``;
+        if (!config.virtual) {
+            if (!required) {
+                formValueToGqlInputCode = `${name}: formValues.${name} ? formValues.${name}.id : null,`;
+            }
+            else {
+                formValueToGqlInputCode = `${name}: formValues.${name}?.id,`;
+            }
+        }
         imports.push({
             name: `GQL${queryName}Query`,
             importPath: `./${baseOutputFilename}.generated`,