feat: add Navigation and OData V4 tutorials, align all packages

[petermuessig]

What this PR does

Brings two new tutorials into the monorepo — Navigation and Routing (17 steps) and OData V4 (11 steps) — and reworks all four tutorials onto a single template so they share the same toolchain, layout, namespace, and documentation conventions.

After this PR the repo ships 4 tutorials with 69 step workspaces, all under the ui5.tutorial.<name>.stepNN naming.

Tutorials

packages/navigation/ (new)

• 17 steps imported from the OpenUI5 demokit, restructured into the standard steps/NN/ layout.
• App namespace renamed sap.ui.demo.nav → ui5.tutorial.navigation across manifests, TS imports, JSDoc @namespace, XML controllerName, tsconfig paths, and HTML resource-roots.
• Dev dependencies switched to the walkthrough set (@types/openui5, ui5-middleware-serveframework, ui5-tooling-transpile).
• Per-step package.json names → ui5.tutorial.navigation.stepNN; ui5.yaml metadata aligned.

packages/odatav4/ (new)

• 11 steps imported from the same demokit source.
• Restructured solutions/ → steps/, root-level markdown moved into per-step README.md, shared images/ split into per-step assets/.
• JS sources fully converted to TypeScript ES modules: Component, App.controller, model/models, initMockServer, the ~800-line sinon-based mock server, plus the view XML.
• Hungarian variable prefixes stripped (oModel → model, aMatches → matches, sUrl → url, …) to match the project's TS style — confirmed against packages/walkthrough/.
• App namespace standardised to ui5.tutorial.odatav4.

Namespace alignment of the existing tutorials

• packages/walkthrough/ — renamed ui5.walkthrough → ui5.tutorial.walkthrough across ~630 files (manifests, TS imports + @namespace, XML controllerName + xmlns, tsconfig paths, HTML resource-roots, every README code snippet, step package.json names).
• packages/quickstart/ — renamed ui5.quickstart → ui5.tutorial.quickstart with the same shape across 27 files; ui5.yaml metadata.name quickstart-tutorial → ui5.tutorial.quickstart.

Documentation

• Per-tutorial overview READMEs (packages/{navigation,odatav4}/README.md) now mirror packages/walkthrough/README.md: each step bullet has an inline 🔗 Live Preview link plus paired <details class="ts-only"> / <details class="js-only"> 📥 Download Solution blocks.
• Step READMEs ship with paired ```ts / ```js code blocks so the Jekyll code-couple toggle renders both flavours. The JS half is generated from the build's sanitised *-dbg.js output where applicable.
• Folder-structure images replaced with fenced ```text ASCII trees (using .?s placeholders so the toggle flips the extensions); images deleted from per-step assets/.
• All callout syntaxes (GitHub-flavoured alerts > [!NOTE] plus walkthrough's emoji blockquotes > 📝 **Note:** <br>) normalised to the :note: / :tip: / :info: / :caution: / :warning: shorthand mandated by _/AUTOMATE.md — 76 callouts converted.
• Step-level "view and download all files at [demokit]" links retargeted to the published https://ui5.github.io/tutorials/... URLs so they resolve against the local dist/ via the dev server.
• License year bumped 2025 → 2026 across all overview READMEs; ## License sections added to the new navigation and odatav4 overviews.

Tooling

• tools/dev-server/server.js:
  • Mount dist/ under /dist/... so npm start serves the locally-built apps and ZIPs.
  • Rewrite the published https://ui5.github.io/tutorials/... URLs in rendered markdown to local /dist/... paths for the four known tutorial slugs (walkthrough, quickstart, navigation, odatav4).
  • Friendly hint page when an artifact is missing.
• README.md: document the npm install && npm run build && npm start workflow.

Verification

• ✅ npm install succeeds and registers all 69 workspaces under the new ui5.tutorial.* namespace.
• ✅ npm run typecheck -ws --if-present → exit 0.
• ✅ npm run build → exit 0. Produces dist/<tutorial>/build/NN/ apps, <tutorial>-step-NN.zip and <tutorial>-step-NN-js.zip downloads, and the rewritten dist/index.md overview for each tutorial.
• ✅ index-cdn.html present for every webapp that bootstraps SAPUI5 (68 of 69 — walkthrough step 01 is the bare HTML "Hello World" and intentionally has none).
• ✅ Dev-server smoke test: Live Preview links from the overview README resolve to /dist/<tutorial>/build/NN/index-cdn.html with HTTP 200.

Stats

1363 files changed: 49,009 insertions, 1,320 deletions.

JIRA: FIORITECHP1-35769

[petermuessig]

@flovogt thanks for the review — all three findings are addressed in 9b4f266, plus a broader cleanup pass on cross-tutorial inconsistencies that showed up once versions were aligned. Threads resolved above.

Review findings ✅

• manifest v2 → _version: "2.8.0" across all 69 manifests (mapping for UI5 1.148 per ui5-manifest mapping.json)
• specVersion '4.0' → specVersion: "4.0" in all 69 ui5.yaml files
• Trailing newlines → every webapp source file ends with \n (re-checked after the indent sweep)

UI5 LTS alignment

• Framework bumped to OpenUI5 1.148.1 (latest patch in the 1.148.x LTS line) in every step ui5.yaml, every CDN bootstrap URL (index-cdn.html and walkthrough's test/*.cdn.qunit.html / mockServer-cdn.html), and @types/openui5 → ^1.148.0
• minUI5Version → "1.148" in every manifest
• README narrative and inline manifest snippets that referenced the previous LTS (1.120 / _version 1.60.0 / 1.38.0) updated to the new values

Cross-tutorial cleanup

• Quickstart Component.ts: @namespace sap.m.tutorial.quickstart.NN → ui5.tutorial.quickstart, static readonly metadata → public static metadata, added missing interfaces: ["sap.ui.core.IAsyncContentCreation"]
• Hungarian-notation residue stripped in quickstart controllers/index.ts (oEvent/bState/oView) and the three identifiers named in the odatav4 OPA tests (iGrowingBy/sViewName/oListBinding)
• tsconfig.json: explicit "strict": false, "strictNullChecks": false added to walkthrough and quickstart tsconfigs to match navigation/odatav4
• index.html: removed redundant data-sap-ui-libs from quickstart steps 02/03 (Component manifest already declares the libs); added explicit data-sap-ui-theme="sap_horizon" to quickstart and navigation bootstrap tags

Indentation normalization per .editorconfig

• JSON / XML / YAML / .properties → 2 spaces
• .ts / .js / .html → tabs
• Fenced code blocks inside step README.md files re-indented to the same conventions, so the doc snippets mirror the actual source files byte-for-byte

Per-tutorial differences kept intentional: per-tutorial framework.libraries, walkthrough's simpleproxy for OData V2 (only used by that tutorial), walkthrough's @ui5/ts-interface-generator/local-web-server/build-script late-step extras, odatav4's SAP i18n comment prefixes (#XTIT:/#XFLD: …) and // filename.ts — headers, and the controller-folder layout in quickstart (kept flat at webapp/ for tutorial simplicity).

Verification

• npm run typecheck → exit 0 across all 69 workspaces
• npm run build → exit 0; dist/ regenerated cleanly with the new framework version
• ui5-linter (via UI5 MCP) → 0 findings on sampled steps in all four tutorials
• run_manifest_validation clean on navigation step 01; the contentDensities schema-strictness warnings surfaced on other manifests (e.g. odatav4/01, walkthrough/15) are an orthogonal item we can address in a follow-up if you'd like.

[petermuessig]

Latest commit: Migrated from @types/openui5 to @openui5/types

The package reference for OpenUI5 TypeScript types has been updated across all tutorial packages to use the official @openui5/types package instead of the deprecated @types/openui5.

Changes

• package.json: Replaced @types/openui5 with @openui5/types in devDependencies across all steps of all tutorials (quickstart, walkthrough, navigation, odatav4)
• tsconfig.json: Updated the types array entries accordingly
• README.md: Updated documentation references in quickstart step 1, walkthrough steps 2 and 3

Scope

138 files updated across the following packages:

• packages/quickstart (steps 1–3)
• packages/walkthrough (steps 2–38)
• packages/navigation (steps 1–17)
• packages/odatav4 (steps 1–11)

[flovogt]

@petermuessig working with QUnit tests, i would assume we need the "types": ["@openui5/types", "@types/qunit"] like @akudev did already in https://github.com/SAP-samples/ui5-typescript-tutorial/blame/main/exercises/ex6/com.myorg.myapp/tsconfig.json#L12

[petermuessig]

I'm on it - started just a few mins back after noticing the issues. Ok with me to also use the latest patch for 1.148

[petermuessig]

Cleanup: tsconfig types arrays + @openui5/types 1.148.1 bump

Pushed as 8980fe1.

Changes

tsconfig.json cleanup (68 files):

• Removed the unused "node" entry from the types array — the webapp/ sources are browser code and don't use any Node.js APIs (no process, Buffer, __dirname, etc.), so pulling in @types/node globals only muddied the type environment.
• Added explicit "@types/qunit" to the types array in the 14 packages containing QUnit test files (walkthrough steps 27–38, odatav4 steps 08 and 11) so the tests get proper QUnit ambient types rather than relying on transitive resolution.

package.json (14 files):

• Added "@types/qunit": "2.5.4" as a direct devDependency to the QUnit-using packages. This is required because @types/qunit is nested inside @openui5/types/node_modules/@types/qunit and is not hoisted to the top-level node_modules/@types, so listing it in tsconfig types without an explicit dep fails to resolve.

package.json (67 files):

• Bumped "@openui5/types" from ^1.148.0 to ^1.148.1, aligning with the 1.148.1 references already present in every ui5.yaml and every index-cdn.html bootstrap URL.

Verification

npm run typecheck (runs tsc --noEmit in every workspace) — all 68 packages pass, exit 0.

[flovogt]

package-lock is outdated

[petermuessig]

AHHHHHH - @akudev merged the change for the dependency hardening as @flovogt reviewed it ! Now the effort to merge is on my side... :-(

[flovogt]

@petermuessig please no merge commits :-D

[petermuessig]

The merge commit was an easy one - just the package-lock.json. So it was cheaper for me to do so rather than manually rebasing. Just to safe time. Can we now go ahead and squash and merge the change?

[akudev]

@petermuessig Sorry, only noticed after it was done. But then again, we could invert my change easily.
To make up for it, I am already in the process of making a thorough review of your change.

And... aren't the actual conflicts little? Should be only 1-2 files, no?

[petermuessig]

What is the problem with the merge now? It only changes the package-lock.json and fixes it so it can be merged. It anyhow becomes a SQUASH MERGE at the end!

[flovogt]

True. Just kidding.

[akudev]

here, it's
"_version": "1.12.0",
but in the actual manifest file at
https://github.com/UI5/tutorials/pull/295/changes#diff-7ce1ab8b4489a1b669bc44882998822f64fd68f9905c245a96f0ad30bb72100fR2
it is
"_version": "2.8.0",

[akudev]

"node" is explained here and contained above, but in the actual tsconfig file, it is beign removed by this PR.

[akudev]

sUrl is still Hungarian notation, but the real parameter below is "url".
Same for many others in here.

[akudev]

Previous to step 1? :-)

[akudev]

Issues are noted. Fix later.