@ostack.tech/ui-kform-scaffolder 0.4.0 → 0.5.0

package/dist/ostack-ui-kform-scaffolder.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useConfig, UseTableValuesSerializerConfig as UseTableValuesSerializerConfig$1, addEjsTemplateFile, joinPaths, tsFile, code, anySchematicKind as anySchematicKind$1, bigDecimalSchematicKind as bigDecimalSchematicKind$1, bigIntegerSchematicKind as bigIntegerSchematicKind$1, booleanSchematicKind as booleanSchematicKind$1, byteSchematicKind as byteSchematicKind$1, classSchematicKind as classSchematicKind$1, doubleSchematicKind as doubleSchematicKind$1, enumSchematicKind as enumSchematicKind$1, fileSchematicKind as fileSchematicKind$1, floatSchematicKind as floatSchematicKind$1, intSchematicKind as intSchematicKind$1, ListableBuilderWithoutKindSelect, createSchematic, listSchematicKind, localDateSchematicKind as localDateSchematicKind$1, longSchematicKind as longSchematicKind$1, shortSchematicKind as shortSchematicKind$1, stringSchematicKind as stringSchematicKind$1, tableSchematicKind as tableSchematicKind$1, annotate, addTemplateFile, SchematicBuilder as SchematicBuilder$1, configScaffolder, scaffoldSchemas, scaffoldModels, scaffoldValidator } from "@ostack.tech/kform-scaffolder";
 import { useRef } from "react";
-import { capitalCase, camelCase, kebabCase, constantCase, sentenceCase, pascalCase } from "change-case";
+import { camelCase, kebabCase, constantCase, sentenceCase, capitalCase, pascalCase } from "change-case";
 const DEFAULT_LOCALE = "en-US";
 const LOCALES = JSON.parse('["en-GB","en-US","fr","pt"]');
 function DefaultLocaleConfig({
@@ -75,7 +75,7 @@ function UseTableValuesSerializerConfig({
   );
 }
 const loadTsxEjs = 'import { LoadAction } from "@ostack.tech/ui-kform";\nimport { decode<%= formClass %>FromString, <%= formClass %>FormMode } from "<%= kmpModuleName %>";\nimport { use<%= formClass %>Context } from "../<%= formClass %>Context.ts";\n\nexport function Load() {\n  const { externalContexts } = use<%= formClass %>Context();\n\n  return (\n    externalContexts.mode !== <%= formClass %>FormMode.READ && (\n      <LoadAction\n        decode={async (file) => decode<%= formClass %>FromString(await file.text())}\n        mimeTypes={["<%= serializationMimeType %>"]}\n        extensions={[".<%= serializationFormat %>"]}\n      />\n    )\n  );\n}\n';
-const saveTsxEjs = 'import { SaveAction } from "@ostack.tech/ui-kform";\nimport { format } from "date-fns";\nimport { type <%= formClass %>, encode<%= formClass %>ToString, <%= formClass %>FormMode } from "<%= kmpModuleName %>";\nimport { use<%= formClass %>Context } from "../<%= formClass %>Context.ts";\n\nexport function Save() {\n  const { externalContexts } = use<%= formClass %>Context();\n\n  return (\n    <SaveAction\n      encode={(<%= formVar %>: <%= formClass %>) => encode<%= formClass %>ToString(<%= formVar %>, true)}\n      disableOverwrite={externalContexts.mode === <%= formClass %>FormMode.READ}\n      fileName={() => `<%= formTitle %> ${format(new Date(), "yyyy-MM-dd")}.<%= serializationFormat %>`}\n      mimeTypes={["<%= serializationMimeType %>"]}\n      extensions={[".<%= serializationFormat %>"]}\n    />\n  );\n}\n';
+const saveTsxEjs = 'import { SaveAction } from "@ostack.tech/ui-kform";\nimport { format } from "date-fns";\nimport { type <%= formClass %>, encode<%= formClass %>ToString, <%= formClass %>FormMode } from "<%= kmpModuleName %>";\nimport { use<%= formClass %>Context } from "../<%= formClass %>Context.ts";\n\nexport function Save() {\n  const { externalContexts } = use<%= formClass %>Context();\n\n  return (\n    <SaveAction\n      encode={(<%= formVar %>: <%= formClass %>) => encode<%= formClass %>ToString(<%= formVar %>, true)}\n      disableOverwrite={externalContexts.mode === <%= formClass %>FormMode.READ}\n      mimeTypes={["<%= serializationMimeType %>"]}\n      extensions={[".<%= serializationFormat %>"]}\n    />\n  );\n}\n';
 const submitTsxEjs = 'import { LocatedValidationWarning } from "@ostack.tech/kform";\nimport { SubmitAction } from "@ostack.tech/ui-kform";\nimport {\n  type <%= formClass %>,\n  <%= formClass %>FormMode,\n  <%= formClass %>SubmitSuccess,\n  <%= formClass %>SubmitValidationError,\n  <%= formClass %>SubmitError,\n} from "<%= kmpModuleName %>";\nimport { use<%= formClass %>Context } from "../<%= formClass %>Context.ts";\nimport { submit } from "../api/submit.ts";\n\nexport function Submit() {\n  const { externalContexts } = use<%= formClass %>Context();\n\n  const handleSubmit = async (\n    <%= formVar %>: <%= formClass %>,\n    acceptedWarnings?: LocatedValidationWarning[],\n  ) => {\n    const response = await submit(<%= formVar %>, acceptedWarnings);\n    if (response instanceof <%= formClass %>SubmitSuccess) {\n      return response.redirectTo;\n    } else if (response instanceof <%= formClass %>SubmitValidationError) {\n      return response.issues;\n    } else {\n      throw response as <%= formClass %>SubmitError;\n    }\n  };\n\n  const handleSuccessfulSubmit = (redirectTo: string) => {\n    window.location.href = redirectTo;\n  };\n\n  return (\n    externalContexts.mode !== <%= formClass %>FormMode.READ && (\n      <SubmitAction\n        onSubmit={handleSubmit}\n        onSuccessfulSubmit={handleSuccessfulSubmit}\n        <%_ if (useTableValuesSerializer) { -%>\n        convertExternalIssuesTableRowIndicesToIds\n        <%_ } -%>\n      />\n    )\n  );\n}\n';
 const validateTsxEjs = 'import { ValidateAction } from "@ostack.tech/ui-kform";\nimport { <%= formClass %>FormMode } from "<%= kmpModuleName %>";\nimport { use<%= formClass %>Context } from "../<%= formClass %>Context.ts";\n\nexport function Validate() {\n  const { externalContexts } = use<%= formClass %>Context();\n\n  return externalContexts.mode !== <%= formClass %>FormMode.READ && <ValidateAction />;\n}\n';
 function scaffoldActions(schematic, data) {
@@ -85,7 +85,6 @@ function scaffoldActions(schematic, data) {
     serializationMimeType: `application/${data.serializationFormat}`,
     formVar: camelCase(schematic.name),
     formClass: schematic.name,
-    formTitle: capitalCase(schematic.name),
     useTableValuesSerializer: data.useTableValuesSerializer
   };
   addEjsTemplateFile(data, "actions/Load.tsx", loadTsxEjs, ejsData);
@@ -757,6 +756,7 @@ function scaffoldAppComponentFile(schematic, data) {
     { moduleName: "@ostack.tech/ui-kform", name: "Annexes" },
     { moduleName: "@ostack.tech/ui-kform", name: "Annex" },
     { moduleName: "@ostack.tech/ui-kform", name: "FormPages" },
+    { moduleName: "@ostack.tech/ui-kform", name: "FormPage" },
     { moduleName: "@ostack.tech/ui-kform", name: "IssuesPanel" },
     { moduleName: "react", name: "useMemo" },
     { moduleName: data.kmpModuleName, name: schematic.name },
@@ -783,9 +783,7 @@ function scaffoldAppComponentFile(schematic, data) {
       moduleName: "@ostack.tech/ui-kform",
       name: "AnnexesManager"
     });
-    annexesManager = `
-  <AnnexesManager />
-`;
+    annexesManager = "\n  <AnnexesManager />\n";
   }
   data.currentFile.declarations.push(code`
     export function ${schematic.name}App() {
@@ -809,6 +807,7 @@ function scaffoldAppComponentFile(schematic, data) {
               ? "manual"
               : "auto"
           }
+          formTitle="${capitalCase(schematic.name)}"
           activePath={activePath}
           onActivePathChange={setActivePath}
           issueMessages={${constantCase(schematic.name)}_ISSUE_MESSAGES}
@@ -838,22 +837,25 @@ function scaffoldAnnexes(layout, data) {
   return layout.map((annex) => scaffoldAnnex(annex, data)).join("\n\n");
 }
 function scaffoldAnnex(annex, data) {
+  return code`
+    <Annex path="${annex.data.currentPath}" title="${sentenceCase(annex.schematic.name)}"${annex.formPages.length === 1 && annex.schematic === annex.formPages[0].schematic ? " documentTitle={null}" : ""}>
+      ${scaffoldFormPages(annex, data)}
+    </Annex>
+  `;
+}
+function scaffoldFormPages(annex, data) {
   let formPagesNavigation = "";
   if (annex.formPages.length > 1) {
     data.currentFile.imports.push({
       moduleName: "@ostack.tech/ui-kform",
       name: "FormPagesNavigation"
     });
-    formPagesNavigation = `
-  <FormPagesNavigation />
-`;
+    formPagesNavigation = "\n  <FormPagesNavigation />\n";
   }
   return code`
-    <Annex path="${annex.data.currentPath}" title="${sentenceCase(annex.schematic.name)}"${annex.formPages.length === 1 && annex.schematic === annex.formPages[0].schematic ? " documentTitle={null}" : ""}>
-      <FormPages>${formPagesNavigation}
-        ${annex.formPages.map((formPage) => scaffoldFormPage(annex, formPage, data))}
-      </FormPages>
-    </Annex>
+    <FormPages>${formPagesNavigation}
+      ${annex.formPages.map((formPage) => scaffoldFormPage(annex, formPage, data)).join("\n\n")}
+    </FormPages>
   `;
 }
 function scaffoldFormPage(annex, formPage, data) {
@@ -932,7 +934,7 @@ function scaffoldGradleProject(schematic, data) {
     filePackage: data.currentPackage,
     formId: kebabCase(schematic.name),
     formTitle: capitalCase(schematic.name),
-    kFormVersion: "0.31.5",
+    kFormVersion: "0.31.6",
     serializationFormat: data.serializationFormat ?? "json",
     includeKotlinxDatetime: data.includeKotlinxDatetime ?? usesKotlinxDatetime(schematic, data),
     includeKtMath: data.includeKtMath ?? usesKtMath(schematic),
@@ -1392,10 +1394,12 @@ function scaffoldMainDeclarations(schematic, data) {
     };
   `);
 }
-const editorconfig = "# http://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_style = space\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n\n[{*.kt,*.kts,*.md}]\nindent_size = 4\nmax_line_length = 100\n\n[{*.js,*.jsx,*.ts,*.tsx,*.json,*.html,*.css,*.scss,*.toml}]\nindent_size = 2\nmax_line_length = 80";
+const editorconfig = "# http://editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 2\nindent_style = space\ninsert_final_newline = true\nmax_line_length = 80\ntrim_trailing_whitespace = true\n\n[*.bat]\nend_of_line = crlf\n\n[{*.kt,*.kts,*.md}]\nindent_size = 4\nmax_line_length = 100\n";
+const gitattributes = "* text=auto eol=lf\n*.bat text eol=crlf\n";
 const gitignore = "# Gradle\n.gradle/\nbuild/\n!**/src/**/build/\n\n# Kotlin\n.kotlin/\n\n# Node.js\nnode_modules/\n.npmrc\n\n# Typescript\n*.tsbuildinfo\n\n# Local env files\n.env*.local\n\n# Logs\nlogs\n*.log\n\n# IDEs and editors\n.vscode/\n.idea/\n.project\n.classpath\n.c9/\n*.launch\n.settings/\n*.sublime-workspace\nout/\n!**/src/**/out/\n\n# Misc\n.DS_Store\n*.pem\n";
 function scaffoldProjectMisc(_schematic, data) {
   addTemplateFile(data, ".gitignore", gitignore);
+  addTemplateFile(data, ".gitattributes", gitattributes);
   addTemplateFile(data, ".editorconfig", editorconfig);
 }
 const responsesKt = 'package <%= filePackage %>\n\nimport kotlin.js.JsExport\nimport kotlin.jvm.JvmOverloads\nimport kotlinx.serialization.SerialName\nimport kotlinx.serialization.Serializable\nimport tech.ostack.kform.LocatedValidationIssue\n\n@JsExport\n@Serializable\nsealed interface <%= formClass %>SubmitResponse\n\n@JsExport\n@Serializable\n@SerialName("success")\nclass <%= formClass %>SubmitSuccess(val redirectTo: String) : <%= formClass %>SubmitResponse\n\n@JsExport\n@Serializable\n@SerialName("error")\nclass <%= formClass %>SubmitError @JvmOverloads constructor(override val message: String? = null) :\n    Throwable(message), <%= formClass %>SubmitResponse\n\n@JsExport\n@Serializable\n@SerialName("validationError")\nclass <%= formClass %>SubmitValidationError(val issues: List<LocatedValidationIssue>) :\n    <%= formClass %>SubmitResponse\n';
@@ -1433,12 +1437,12 @@ function scaffoldStyles(_schematic, data) {
 }
 const eslintConfigJs = 'import js from "@eslint/js";\nimport { defineConfig, globalIgnores } from "eslint/config";\nimport reactHooks from "eslint-plugin-react-hooks";\nimport reactRefresh from "eslint-plugin-react-refresh";\nimport globals from "globals";\nimport tseslint from "typescript-eslint";\n\nexport default defineConfig([\n  globalIgnores([".gradle", "build"]),\n  {\n    files: ["**/*.{ts,tsx}"],\n    extends: [\n      js.configs.recommended,\n      tseslint.configs.recommended,\n      reactHooks.configs.flat.recommended,\n      reactRefresh.configs.vite,\n    ],\n    languageOptions: {\n      ecmaVersion: 2020,\n      globals: globals.browser,\n    },\n  },\n]);\n';
 const indexHtmlEjs = '<!doctype html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <link rel="icon" type="image/svg+xml" href="/vite.svg" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <title><%= formTitle %></title>\n  </head>\n  <body>\n    <div\n      id="<%= formId %>-app-root"\n      data-external-contexts="<%= externalContextsData %>"\n    ></div>\n    <script type="module" src="/src/main.tsx"><\/script>\n    <script type="module">\n      render<%= formClass %>App();\n    <\/script>\n  </body>\n</html>\n';
-const packageJsonEjs = '{\n  "name": "<%= formId %>-react-app",\n  "private": true,\n  "version": "0.0.0",\n  "type": "module",\n  "scripts": {\n    "dev": "vite",\n    "build": "tsc -b && vite build",\n    "lint": "eslint .",\n    "preview": "vite preview"\n  },\n  "dependencies": {\n    "@fortawesome/fontawesome-svg-core": "<%= dependencyVersions["@fortawesome/fontawesome-svg-core"] %>",\n    "@fortawesome/free-regular-svg-icons": "<%= dependencyVersions["@fortawesome/free-regular-svg-icons"] %>",\n    "@fortawesome/free-solid-svg-icons": "<%= dependencyVersions["@fortawesome/free-solid-svg-icons"] %>",\n    "@ostack.tech/kform-react": "~<%= kFormVersion %>",\n    "@ostack.tech/ui": "~<%= ostackUiVersion %>",\n    "@ostack.tech/ui-kform": "~<%= ostackUiVersion %>",\n    "date-fns": "<%= dependencyVersions["date-fns"] %>",\n    "<%= formId %>-shared": "file:../shared/build/<%= formId %>-shared-0.0.1.tgz",\n    "react": "<%= dependencyVersions.react %>",\n    "react-dom": "<%= dependencyVersions["react-dom"] %>"\n  },\n  "devDependencies": {\n    "@eslint/js": "<%= dependencyVersions["@eslint/js"] %>",\n    "@types/node": "<%= dependencyVersions["@types/node"] %>",\n    "@types/ostack.tech__kform": "npm:@ostack.tech/kform@~<%= kFormVersion %>",\n    "@types/react": "<%= dependencyVersions["@types/react"] %>",\n    "@types/react-dom": "<%= dependencyVersions["@types/react-dom"] %>",\n    "@vitejs/plugin-react-swc": "<%= dependencyVersions["@vitejs/plugin-react-swc"] %>",\n    "eslint": "<%= dependencyVersions.eslint %>",\n    "eslint-plugin-react-hooks": "<%= dependencyVersions["eslint-plugin-react-hooks"] %>",\n    "eslint-plugin-react-refresh": "<%= dependencyVersions["eslint-plugin-react-refresh"] %>",\n    "globals": "<%= dependencyVersions.globals %>",\n    "sass-embedded": "<%= dependencyVersions["sass-embedded"] %>",\n    "typescript": "<%= dependencyVersions.typescript %>",\n    "typescript-eslint": "<%= dependencyVersions["typescript-eslint"] %>",\n    "vite": "<%= dependencyVersions.vite %>"\n  }\n}\n';
+const packageJsonEjs = '{\n  "name": "<%= formId %>-react-app",\n  "private": true,\n  "version": "0.0.0",\n  "type": "module",\n  "scripts": {\n    "dev": "vite",\n    "build": "tsc -b && vite build",\n    "lint": "eslint .",\n    "preview": "vite preview"\n  },\n  "dependencies": {\n    "@fortawesome/fontawesome-svg-core": "<%= dependencyVersions["@fortawesome/fontawesome-svg-core"] %>",\n    "@fortawesome/free-regular-svg-icons": "<%= dependencyVersions["@fortawesome/free-regular-svg-icons"] %>",\n    "@fortawesome/free-solid-svg-icons": "<%= dependencyVersions["@fortawesome/free-solid-svg-icons"] %>",\n    "@ostack.tech/kform-react": "~<%= kFormVersion %>",\n    "@ostack.tech/ui": "~<%= ostackUiVersion %>",\n    "@ostack.tech/ui-kform": "~<%= ostackUiVersion %>",\n    "date-fns": "<%= dependencyVersions["date-fns"] %>",\n    "<%= formId %>-shared": "file:../shared/build/<%= formId %>-shared-0.0.1.tgz",\n    "react": "<%= dependencyVersions.react %>",\n    "react-dom": "<%= dependencyVersions["react-dom"] %>"\n  },\n  "devDependencies": {\n    "@eslint/js": "<%= dependencyVersions["@eslint/js"] %>",\n    "@types/node": "<%= dependencyVersions["@types/node"] %>",\n    "@types/ostack.tech__kform": "npm:@ostack.tech/kform@~<%= kFormVersion %>",\n    "@types/react": "<%= dependencyVersions["@types/react"] %>",\n    "@types/react-dom": "<%= dependencyVersions["@types/react-dom"] %>",\n    "@vitejs/plugin-react": "<%= dependencyVersions["@vitejs/plugin-react"] %>",\n    "eslint": "<%= dependencyVersions.eslint %>",\n    "eslint-plugin-react-hooks": "<%= dependencyVersions["eslint-plugin-react-hooks"] %>",\n    "eslint-plugin-react-refresh": "<%= dependencyVersions["eslint-plugin-react-refresh"] %>",\n    "globals": "<%= dependencyVersions.globals %>",\n    "sass-embedded": "<%= dependencyVersions["sass-embedded"] %>",\n    "typescript": "<%= dependencyVersions.typescript %>",\n    "typescript-eslint": "<%= dependencyVersions["typescript-eslint"] %>",\n    "vite": "<%= dependencyVersions.vite %>"\n  }\n}\n';
 const viteSvg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>\n';
 const tsConfigAppJson = '{\n  "compilerOptions": {\n    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",\n    "target": "ES2022",\n    "useDefineForClassFields": true,\n    "lib": ["ES2022", "DOM", "DOM.Iterable"],\n    "module": "ESNext",\n    "types": ["vite/client"],\n    "skipLibCheck": true,\n\n    /* Bundler mode */\n    "moduleResolution": "bundler",\n    "allowImportingTsExtensions": true,\n    "verbatimModuleSyntax": true,\n    "moduleDetection": "force",\n    "noEmit": true,\n    "jsx": "react-jsx",\n\n    /* Linting */\n    "strict": true,\n    "noUnusedLocals": true,\n    "noUnusedParameters": true,\n    "erasableSyntaxOnly": true,\n    "noFallthroughCasesInSwitch": true,\n    "noUncheckedSideEffectImports": true\n  },\n  "include": ["src"]\n}\n';
 const tsConfigJson = '{\n  "files": [],\n  "references": [\n    { "path": "./tsconfig.app.json" },\n    { "path": "./tsconfig.node.json" }\n  ]\n}\n';
 const tsConfigNodeJson = '{\n  "compilerOptions": {\n    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",\n    "target": "ES2023",\n    "lib": ["ES2023"],\n    "module": "ESNext",\n    "types": ["node"],\n    "skipLibCheck": true,\n\n    /* Bundler mode */\n    "moduleResolution": "bundler",\n    "allowImportingTsExtensions": true,\n    "verbatimModuleSyntax": true,\n    "moduleDetection": "force",\n    "noEmit": true,\n\n    /* Linting */\n    "strict": true,\n    "noUnusedLocals": true,\n    "noUnusedParameters": true,\n    "erasableSyntaxOnly": true,\n    "noFallthroughCasesInSwitch": true,\n    "noUncheckedSideEffectImports": true\n  },\n  "include": ["vite.config.ts"]\n}\n';
-const viteConfigTsEjs = 'import { resolve } from "node:path";\n\nimport react from "@vitejs/plugin-react-swc";\nimport { defineConfig } from "vite";\n\n// https://vite.dev/config/\nexport default defineConfig({\n  plugins: [react()],\n  build: {\n    outDir: "<%= viteConfigOutDir %>",\n    rollupOptions: {\n      input: {\n        "<%= formId %>-app":\n          process.env.VITE_BUILD_REASON === "preview"\n            ? "index.html"\n            : "src/main.tsx",\n      },\n      output: {\n        // Output files without hashes, making it easier to serve them in the\n        // server. However, the server is expected to somehow "version" them for\n        // cache busting purposes.\n        entryFileNames: "assets/[name].js",\n        chunkFileNames: "assets/[name].js",\n        assetFileNames: "assets/[name].[ext]",\n      },\n    },\n  },\n  resolve: {\n    alias: [\n      // Due to how Kotlin "bundles" dependencies, we need to use the\n      // `@ostack.tech/kform` produced by the shared module.\n      {\n        find: "@ostack.tech/kform",\n        replacement: resolve(\n          import.meta.dirname,\n          "node_modules/<%= formId %>-shared/ostack-kform.mjs",\n        ),\n      },\n    ],\n  },\n  server: {\n    proxy: { "<%= apiBasePath %>": "<%= viteConfigProxyTarget %>" },\n  },\n});\n';
+const viteConfigTsEjs = 'import { resolve } from "node:path";\n\nimport react from "@vitejs/plugin-react";\nimport { defineConfig } from "vite";\n\n// https://vite.dev/config/\nexport default defineConfig({\n  plugins: [react()],\n  build: {\n    outDir: "<%= viteConfigOutDir %>",\n    rollupOptions: {\n      input: {\n        "<%= formId %>-app":\n          process.env.VITE_BUILD_REASON === "preview"\n            ? "index.html"\n            : "src/main.tsx",\n      },\n      output: {\n        // Output files without hashes, making it easier to serve them in the\n        // server. However, the server is expected to somehow "version" them for\n        // cache busting purposes.\n        entryFileNames: "assets/[name].js",\n        chunkFileNames: "assets/[name].js",\n        assetFileNames: "assets/[name].[ext]",\n      },\n    },\n  },\n  resolve: {\n    alias: [\n      // Due to how Kotlin "bundles" dependencies, we need to use the\n      // `@ostack.tech/kform` produced by the shared module.\n      {\n        find: "@ostack.tech/kform",\n        replacement: resolve(\n          import.meta.dirname,\n          "node_modules/<%= formId %>-shared/ostack-kform.mjs",\n        ),\n      },\n    ],\n  },\n  server: {\n    proxy: { "<%= apiBasePath %>": "<%= viteConfigProxyTarget %>" },\n  },\n});\n';
 const DEFAULT_VITE_CONFIG_OUT_DIR = "build/dist/";
 const DEFAULT_VITE_CONFIG_PROXY_TARGET = "http://127.0.0.1:8080/";
 function scaffoldViteProject(schematic, data) {
@@ -1446,9 +1450,9 @@ function scaffoldViteProject(schematic, data) {
     formId: kebabCase(schematic.name),
     formClass: schematic.name,
     formTitle: capitalCase(schematic.name),
-    ostackUiVersion: "0.4.0",
-    kFormVersion: "0.31.5",
-    dependencyVersions: JSON.parse('{"@eslint/js":"^9.39.1","@fortawesome/fontawesome-svg-core":"^7.1.0","@fortawesome/free-brands-svg-icons":"^7.1.0","@fortawesome/free-regular-svg-icons":"^7.1.0","@fortawesome/free-solid-svg-icons":"^7.1.0","@ostack.tech/kform":"~0.31.5","@ostack.tech/kform-react":"~0.31.5","@ostack.tech/kform-scaffolder":"~0.31.5","@storybook/addon-docs":"^10.0.5","@storybook/addon-links":"^10.0.5","@storybook/react-vite":"^10.0.5","@types/node":"^24.10.0","@types/react":"^19.2.2","@types/react-dom":"^19.2.2","@vitejs/plugin-react-swc":"^4.2.1","change-case":"^5.4.4","cpy-cli":"^6.0.0","date-fns":"^4.1.0","eslint":"^9.39.1","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.4","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.4.24","eslint-plugin-simple-import-sort":"^12.1.1","eslint-plugin-storybook":"^10.0.5","globals":"^16.5.0","happy-dom":"^20.0.10","lint-staged":"^16.2.6","prettier":"^3.6.2","prettier-plugin-jsdoc":"^1.5.0","react":"^19.2.0","react-dom":"^19.2.0","rimraf":"^6.1.0","sass-embedded":"^1.93.2","simple-git-hooks":"^2.13.1","storybook":"^10.0.5","terser":"^5.44.1","tslib":"^2.8.1","typescript":"~5.9.3","typescript-eslint":"^8.46.3","vite":"^7.2.1","vite-plugin-dts":"^4.5.4","vitest":"^4.0.7","zustand":"^5.0.8"}'),
+    ostackUiVersion: "0.5.0",
+    kFormVersion: "0.31.6",
+    dependencyVersions: JSON.parse('{"@eslint/js":"^9.39.1","@fortawesome/fontawesome-svg-core":"^7.1.0","@fortawesome/free-brands-svg-icons":"^7.1.0","@fortawesome/free-regular-svg-icons":"^7.1.0","@fortawesome/free-solid-svg-icons":"^7.1.0","@ostack.tech/kform":"~0.31.6","@ostack.tech/kform-react":"~0.31.6","@ostack.tech/kform-scaffolder":"~0.31.6","@storybook/addon-docs":"^10.0.8","@storybook/addon-links":"^10.0.8","@storybook/react-vite":"^10.0.8","@types/node":"^22.19.1","@types/react":"^19.2.7","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^5.1.1","change-case":"^5.4.4","cpy-cli":"^6.0.0","date-fns":"^4.1.0","eslint":"^9.39.1","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.4","eslint-plugin-react-hooks":"^7.0.1","eslint-plugin-react-refresh":"^0.4.24","eslint-plugin-simple-import-sort":"^12.1.1","eslint-plugin-storybook":"^10.0.8","globals":"^16.5.0","happy-dom":"^20.0.10","lint-staged":"^16.2.7","prettier":"^3.6.2","prettier-plugin-jsdoc":"^1.5.0","react":"^19.2.0","react-dom":"^19.2.0","rimraf":"^6.1.2","sass-embedded":"^1.93.3","simple-git-hooks":"^2.13.1","storybook":"^10.0.8","terser":"^5.44.1","tslib":"^2.8.1","typescript":"~5.9.3","typescript-eslint":"^8.48.0","vite":"^7.2.4","vite-plugin-dts":"^4.5.4","vitest":"^4.0.14","zustand":"^5.0.8"}'),
     externalContextsData: data.serializationFormat === "json" ? "{}" : `<${schematic.name}ExternalContexts />`,
     apiBasePath: data.apiBasePath ?? DEFAULT_API_BASE_PATH,
     viteConfigOutDir: data.viteConfigOutDir ?? DEFAULT_VITE_CONFIG_OUT_DIR,
@@ -1568,6 +1572,7 @@ export {
   scaffoldExternalContexts,
   scaffoldField,
   scaffoldFormPage,
+  scaffoldFormPages,
   scaffoldGradleProject,
   scaffoldGradleWrapper,
   scaffoldIssueMessages,