create-procode 1.0.0 → 1.1.0

package/templates/base/src/assets/styles/index.scss.tmpl

@@ -1,146 +1,149 @@
-// ---------------------------------------------------------------------------
-// The import order below IS the cascade. Each layer expects the ones above it
-// to have been declared, and the whole stack is one Sass compilation:
-//
-//   1. vs-theme      design tokens ($space-*, $text-*, colour ramps) — nothing
-//                    above it can reference a token, so it goes first.
-//   2. kendo-widget  the _kendo-bridge that binds Kendo's variables to those
-//                    tokens; must be declared before Kendo's own theme reads
-//                    them.
-//   3. kendo-theme-default  Kendo's compiled theme. NOT declared as a peer by
-//                    anything, but the widget library imports it BY NAME — so
-//                    it is a hard build failure when missing, not an extra.
-//   4. core          runtime layout (prc-cl-N columns, skeletons).
-//   5. vs-template   toolbar, grid chrome, saved views.
-//
-// Reordering these produces "Undefined variable" at build time, or a screen
-// that renders with the wrong spacing and no error at all.
-// ---------------------------------------------------------------------------
-@import "procode-vs-theme/scss";
-@import "procode-lowcode-kendo-widget/styles";
-@import "@progress/kendo-theme-default/dist/all.scss";
-@import "procode-lowcode-core/styles";
-@import "procode-vs-template/styles";
-
-// ---------------------------------------------------------------------------
-// App styles go BELOW this line.
-//
-// Reach for a theme token or a utility class before writing a rule, and never a
-// literal hex value — the theme ships 200+ utilities that already exist.
-// Do not redeclare a `.prc-*` or `.qo-*` class: those belong to the
-// libraries, and newer versions guard them with a doubled class, so a host rule
-// silently loses anyway.
-// ---------------------------------------------------------------------------
-
-// ---------------------------------------------------------------------------
-// THE FONT FAMILY IS SET ONCE, HERE.
-//
-// The theme's reset sets no `font-family` on `body`, and several of its own
-// component classes (`.qo-page-title`, `.qo-page-subtitle`) style size, weight
-// and colour only. Anything not carrying `qo-font-family-primary` therefore
-// inherits the browser default, which is a SERIF. One line here is the single
-// point that makes every screen agree; do not repeat the class per widget.
-// ---------------------------------------------------------------------------
-body {
-  font-family: var(--qo-font-family-primary);
-}
-
-// ---------------------------------------------------------------------------
-// LOADING PLACEHOLDERS — one height, one sweep, visible on a white card.
-//
-// Core ships `--skeleton-field-height: 32px`; every control on this stack is
-// 40px (`--qo-control-height`), so the form re-flowed 8px a row as data landed.
-// Core's `#eee` base with a sheen whose brightest stop is LIGHTER than the base
-// reads as "a white background animating" on a `qo-card`; both are restated as
-// theme tokens. The two `.prc-loading-container` rules: core nests
-// that element inside itself, so two rgba(0,0,0,.1) backdrops stacked, and the
-// dim landed on the skeleton base but not its z-index:2000 shimmer.
-// ---------------------------------------------------------------------------
-:root {
-  --skeleton-field-height: var(--qo-control-height);
-  --skeleton-background-color: var(--qo-bg-disabled);
-  --skeleton-background-linear-gradient: linear-gradient(
-    110deg,
-    var(--qo-bg-disabled) 8%,
-    var(--qo-bg-light) 18%,
-    var(--qo-bg-disabled) 33%
-  );
-}
-
-.prc-loading-container .prc-loading-container {
-  background-color: transparent;
-}
-
-body:has(.prc-skeleton) .prc-loading-container {
-  background-color: transparent;
-}
-
-// ---------------------------------------------------------------------------
-// Kendo controls that a schema put on the 40px ramp — make the ramp stick.
-//
-// `qo-h-control` is (0,1,0). kendo-widget's `.k-dropdownlist, .k-picker-solid
-// { height: 32px }` ties it and loads later, so DROPDOWNs drew 8px shorter than
-// the TEXTBOXes beside them. Doubling the class is (0,2,0) and re-states the
-// theme's own token — no `!important`.
-// ---------------------------------------------------------------------------
-.qo-h-control.k-picker-solid,
-.qo-h-control.k-input-solid {
-  height: var(--qo-control-height);
-}
-
-// A MultiSelect grows with its chips, so it takes a floor and not a height.
-.qo-min-h-control.k-input-solid,
-.qo-min-h-control.k-picker-solid {
-  height: auto;
-  min-height: var(--qo-control-height);
-}
-
-// ---------------------------------------------------------------------------
-// Control text — NO RULE HERE, on purpose. 12px label / 13px value.
-//
-// Add, Edit and View read in one pair of sizes, and all of it comes from the
-// libraries: a field label is vs-theme's `qo-label` (12px / 600), and every
-// control's text is 13px from kendo-widget 2.8.1 — as are a BLOCK's value and
-// the grid toolbar's search from vs-template 2.12.1. Do not put a size on
-// `.k-input-inner`: a declaration on the element beats every class on the
-// wrapper, and globally it would also pin the toolbar search and filter cells.
-// (Apps generated before 1.0.1 carried an 11px rule here; delete it when they
-// adopt kendo-widget 2.8.1.)
-// ---------------------------------------------------------------------------
-
-// ---------------------------------------------------------------------------
-// Two fields in one row, one label wraps — keep the controls on one line.
-//
-// The label HOC stacks label over control in `.prc-label-field`; a row of two
-// aligns them by their TOP, so a wrapped label pushes its control down a line.
-// Aligning the controls by their BOTTOM fixes it at every width. Both
-// restrictions are load-bearing: `[class*="prc-cl-"]` keeps it on a column
-// SLOT (`:has()` is a descendant test), and `:not(.prc-flx-container)` excludes
-// a slot that is itself a layout — a scroll pane carrying `prc-cl-fl` otherwise
-// gets bottom-packed and its first section is pushed above the fold, measured.
-// Durable home: core's ContainerRenderer styles.
-// ---------------------------------------------------------------------------
-.prc-flx-container:not(.prc-verticle):not(.prc-verticle-reverse)
-  > [class*="prc-cl-"]:not(.prc-flx-container):has(.prc-label-field) {
-  align-self: stretch;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-}
-
-// ---------------------------------------------------------------------------
-// App screens (src/Screens) — the loader, error and 404 elements main.tsx
-// hands to <Core>. They reuse the core classes; only the colour and the
-// missing height are restated here, as theme tokens.
-// ---------------------------------------------------------------------------
-.prc-spinner-arc.prc-spinner-arc {
-  border-top-color: var(--qo-border-primary);
-  border-right-color: var(--qo-border-primary);
-}
-
-.prc-404-container.app-screen-message {
-  min-height: 100dvh;
-  padding: var(--qo-space-lg);
-}
-
-@import "../../Factory/Widgets/SectionNav/style.scss";
+// ---------------------------------------------------------------------------
+// The import order below IS the cascade. Each layer expects the ones above it
+// to have been declared, and the whole stack is one Sass compilation:
+//
+//   1. vs-theme      design tokens ($space-*, $text-*, colour ramps) — nothing
+//                    above it can reference a token, so it goes first.
+//   2. kendo-widget  the _kendo-bridge that binds Kendo's variables to those
+//                    tokens; must be declared before Kendo's own theme reads
+//                    them.
+//   3. kendo-theme-default  Kendo's compiled theme. NOT declared as a peer by
+//                    anything, but the widget library imports it BY NAME — so
+//                    it is a hard build failure when missing, not an extra.
+//   4. core          runtime layout (prc-cl-N columns, skeletons).
+//   5. vs-template   toolbar, grid chrome, saved views.
+//
+// Reordering these produces "Undefined variable" at build time, or a screen
+// that renders with the wrong spacing and no error at all.
+// ---------------------------------------------------------------------------
+@import "procode-vs-theme/scss";
+@import "procode-lowcode-kendo-widget/styles";
+@import "@progress/kendo-theme-default/dist/all.scss";
+@import "procode-lowcode-core/styles";
+@import "procode-vs-template/styles";
+
+// ---------------------------------------------------------------------------
+// App styles go BELOW this line.
+//
+// Reach for a theme token or a utility class before writing a rule, and never a
+// literal hex value — the theme ships 200+ utilities that already exist.
+// Do not redeclare a `.prc-*` or `.qo-*` class: those belong to the
+// libraries, and newer versions guard them with a doubled class, so a host rule
+// silently loses anyway.
+// ---------------------------------------------------------------------------
+
+// ---------------------------------------------------------------------------
+// THE FONT FAMILY IS SET ONCE, HERE.
+//
+// The theme's reset sets no `font-family` on `body`, and several of its own
+// component classes (`.qo-page-title`, `.qo-page-subtitle`) style size, weight
+// and colour only. Anything not carrying `qo-font-family-primary` therefore
+// inherits the browser default, which is a SERIF. One line here is the single
+// point that makes every screen agree; do not repeat the class per widget.
+// ---------------------------------------------------------------------------
+body {
+  font-family: var(--qo-font-family-primary);
+}
+
+// ---------------------------------------------------------------------------
+// LOADING PLACEHOLDERS — one height, one sweep, visible on a white card.
+//
+// Core ships `--skeleton-field-height: 32px`; every control on this stack is
+// 40px (`--qo-control-height`), so the form re-flowed 8px a row as data landed.
+// Core's `#eee` base with a sheen whose brightest stop is LIGHTER than the base
+// reads as "a white background animating" on a `qo-card`; both are restated as
+// theme tokens. The two `.prc-loading-container` rules: core nests
+// that element inside itself, so two rgba(0,0,0,.1) backdrops stacked, and the
+// dim landed on the skeleton base but not its z-index:2000 shimmer.
+// ---------------------------------------------------------------------------
+:root {
+  --skeleton-field-height: var(--qo-control-height);
+  --skeleton-background-color: var(--qo-bg-disabled);
+  --skeleton-background-linear-gradient: linear-gradient(
+    110deg,
+    var(--qo-bg-disabled) 8%,
+    var(--qo-bg-light) 18%,
+    var(--qo-bg-disabled) 33%
+  );
+}
+
+.prc-loading-container .prc-loading-container {
+  background-color: transparent;
+}
+
+body:has(.prc-skeleton) .prc-loading-container {
+  background-color: transparent;
+}
+
+// ---------------------------------------------------------------------------
+// Kendo controls that a schema put on the 40px ramp — make the ramp stick.
+//
+// `qo-h-control` is (0,1,0). kendo-widget's `.k-dropdownlist, .k-picker`
+// `{ height: 32px }` ties it and loads later, so DROPDOWNs drew 8px shorter than
+// the TEXTBOXes beside them. Doubling the class is (0,2,0) and re-states the
+// theme's own token — no `!important`.
+// ---------------------------------------------------------------------------
+// KendoReact 13+ emits no fill-mode class (`k-picker-solid`, `k-input-solid`) when
+// the theme decides the fill, so the solid default is the bare base class; the
+// `:where()` keeps "not flat / not outline" at the old (0,2,0) specificity.
+.qo-h-control.k-picker:where(:not(.k-picker-flat, .k-picker-outline)),
+.qo-h-control.k-input:where(:not(.k-input-flat, .k-input-outline)) {
+  height: var(--qo-control-height);
+}
+
+// A MultiSelect grows with its chips, so it takes a floor and not a height.
+.qo-min-h-control.k-input:where(:not(.k-input-flat, .k-input-outline)),
+.qo-min-h-control.k-picker:where(:not(.k-picker-flat, .k-picker-outline)) {
+  height: auto;
+  min-height: var(--qo-control-height);
+}
+
+// ---------------------------------------------------------------------------
+// Control text — NO RULE HERE, on purpose. 12px label / 13px value.
+//
+// Add, Edit and View read in one pair of sizes, and all of it comes from the
+// libraries: a field label is vs-theme's `qo-label` (12px / 600), and every
+// control's text is 13px from kendo-widget 2.8.1 — as are a BLOCK's value and
+// the grid toolbar's search from vs-template 2.12.1. Do not put a size on
+// `.k-input-inner`: a declaration on the element beats every class on the
+// wrapper, and globally it would also pin the toolbar search and filter cells.
+// (Apps generated before 1.0.1 carried an 11px rule here; delete it when they
+// adopt kendo-widget 2.8.1.)
+// ---------------------------------------------------------------------------
+
+// ---------------------------------------------------------------------------
+// Two fields in one row, one label wraps — keep the controls on one line.
+//
+// The label HOC stacks label over control in `.prc-label-field`; a row of two
+// aligns them by their TOP, so a wrapped label pushes its control down a line.
+// Aligning the controls by their BOTTOM fixes it at every width. Both
+// restrictions are load-bearing: `[class*="prc-cl-"]` keeps it on a column
+// SLOT (`:has()` is a descendant test), and `:not(.prc-flx-container)` excludes
+// a slot that is itself a layout — a scroll pane carrying `prc-cl-fl` otherwise
+// gets bottom-packed and its first section is pushed above the fold, measured.
+// Durable home: core's ContainerRenderer styles.
+// ---------------------------------------------------------------------------
+.prc-flx-container:not(.prc-verticle):not(.prc-verticle-reverse)
+  > [class*="prc-cl-"]:not(.prc-flx-container):has(.prc-label-field) {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+// ---------------------------------------------------------------------------
+// App screens (src/Screens) — the loader, error and 404 elements main.tsx
+// hands to <Core>. They reuse the core classes; only the colour and the
+// missing height are restated here, as theme tokens.
+// ---------------------------------------------------------------------------
+.prc-spinner-arc.prc-spinner-arc {
+  border-top-color: var(--qo-border-primary);
+  border-right-color: var(--qo-border-primary);
+}
+
+.prc-404-container.app-screen-message {
+  min-height: 100dvh;
+  padding: var(--qo-space-lg);
+}
+
+@import "../../Factory/Widgets/SectionNav/style.scss";

package/templates/base/vite.config.ts.tmpl

@@ -1,61 +1,90 @@
+/// <reference types="vitest" /> // @tests
 import { fileURLToPath } from "node:url";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  // Must match VITE_HOMEPAGE in .env. The app is served from this segment, so a
-  // screen lives at <base>/<slug> — e.g. __BASE_PATH_SLASH__sample.
-  base: "__BASE_PATH_SLASH__",
-
-  plugins: [react()],
-
-  resolve: {
-    alias: [
-      {
-        // procode-lowcode-core exports "./styles" as src/Assets/styles/index.scss,
-        // but the package ships the folder as src/assets/. Windows and macOS
-        // ignore the case and build; Linux (CI, Docker) fails the @import. This
-        // points the import at the real path on every OS.
-        find: /^procode-lowcode-core\/styles$/,
-        replacement: fileURLToPath(
-          new URL("./node_modules/procode-lowcode-core/src/assets/styles/index.scss", import.meta.url),
-        ),
+export default defineConfig(({ command, mode }) => {
+  // A personal dev token must never ship. `vite build` reads .env.local like
+  // `vite dev` does, so a VITE_HARDCODED_TOKEN left there would be compiled into
+  // dist/ and every user of the build would act as that developer. Refuse
+  // instead. (ALLOW_TOKEN_IN_BUILD=1 overrides it for a throwaway local build.)
+  const env = loadEnv(mode, process.cwd(), "");
+  if (command === "build" && env.VITE_HARDCODED_TOKEN && process.env.ALLOW_TOKEN_IN_BUILD !== "1") {
+    throw new Error(
+      "VITE_HARDCODED_TOKEN is set (usually in .env.local). Remove it before building — " +
+        "a built app authenticates from the AuthToken cookie. For a throwaway local build only: ALLOW_TOKEN_IN_BUILD=1.",
+    );
+  }
+
+  return {
+    // Must match VITE_HOMEPAGE in .env. The app is served from this segment, so a
+    // screen lives at <base>/<slug> — e.g. __BASE_PATH_SLASH__sample.
+    base: "__BASE_PATH_SLASH__",
+
+    plugins: [react()],
+
+    resolve: {
+      alias: [
+        {
+          // procode-lowcode-core exports "./styles" as src/Assets/styles/index.scss,
+          // but the package ships the folder as src/assets/. Windows and macOS
+          // ignore the case and build; Linux (CI, Docker) fails the @import. This
+          // points the import at the real path on every OS.
+          find: /^procode-lowcode-core\/styles$/,
+          replacement: fileURLToPath(
+            new URL("./node_modules/procode-lowcode-core/src/assets/styles/index.scss", import.meta.url),
+          ),
+        },
+      ],
+    },
+
+    build: {
+      // Must stay >= es2018. Object rest/spread is an ES2018 feature, and the
+      // es2015 downlevel transform miscompiles a `const` that declares two rest
+      // patterns at once — it drops bindings and emits a bare `{} = null`, which
+      // throws "Cannot destructure 'null' as it is null" at runtime. Kendo's
+      // CalendarCell.shouldComponentUpdate is written that way, so the date picker
+      // crashes on open in built bundles only — never in dev, which skips this
+      // transform. Do not lower this to chase bundle size.
+      target: "es2020",
+      minify: false,
+    },
+
+    esbuild: {
+      target: "es2020",
+    },
+
+    // The two runtime libraries ship CommonJS-interop shapes that Vite's dep
+    // scanner does not find on its own; pre-bundling them keeps dev reloads fast
+    // and avoids "outdated optimize dep" full-page reloads on every save.
+    optimizeDeps: {
+      include: ["procode-lowcode-kendo-widget", "procode-lowcode-core"],
+    },
+
+    // Some transitive dependencies still reference the Node `global`.
+    define: {
+      global: "globalThis",
+    },
+
+    server: {
+      fs: {
+        allow: ["..", "."],
+      },
+    },
+
+    // @tests-start
+    // `npm test` (vitest). The ProCode packages ship sources that import SCSS and
+    // JSON; inlining them lets Vite transform them in the test run as it does in
+    // the app — without this every test importing a package fails to load.
+    test: {
+      include: ["src/**/*.test.ts"],
+      server: {
+        deps: {
+          inline: [/procode-/],
+        },
       },
-    ],
-  },
-
-  build: {
-    // Must stay >= es2018. Object rest/spread is an ES2018 feature, and the
-    // es2015 downlevel transform miscompiles a `const` that declares two rest
-    // patterns at once — it drops bindings and emits a bare `{} = null`, which
-    // throws "Cannot destructure 'null' as it is null" at runtime. Kendo's
-    // CalendarCell.shouldComponentUpdate is written that way, so the date picker
-    // crashes on open in built bundles only — never in dev, which skips this
-    // transform. Do not lower this to chase bundle size.
-    target: "es2020",
-    minify: false,
-  },
-
-  esbuild: {
-    target: "es2020",
-  },
-
-  // The two runtime libraries ship CommonJS-interop shapes that Vite's dep
-  // scanner does not find on its own; pre-bundling them keeps dev reloads fast
-  // and avoids "outdated optimize dep" full-page reloads on every save.
-  optimizeDeps: {
-    include: ["procode-lowcode-kendo-widget", "procode-lowcode-core"],
-  },
-
-  // Some transitive dependencies still reference the Node `global`.
-  define: {
-    global: "globalThis",
-  },
-
-  server: {
-    fs: {
-      allow: ["..", "."],
     },
-  },
+    // @tests-end
+  };
 });

package/templates/multi-language/locales/fr/core.json

@@ -0,0 +1,76 @@
+{
+  "validation.required": "Ce champ est obligatoire",
+  "validation.email": "L'adresse e-mail est invalide",
+  "validation.bulkEmail": "Une ou plusieurs adresses e-mail sont invalides",
+  "validation.alphanumericSpace": "Seuls les lettres, les chiffres et les espaces sont autorisés",
+  "validation.maxChars": "{maxCharCount} caractères maximum",
+  "validation.minChars": "{minCharCount} caractères minimum",
+  "validation.greaterThan": "La valeur doit être supérieure à {value}",
+  "validation.greaterThanEqual": "La valeur doit être supérieure ou égale à {value}",
+  "validation.lessThan": "La valeur doit être inférieure à {value}",
+  "validation.lessThanEqual": "La valeur doit être inférieure ou égale à {value}",
+  "validation.between": "La valeur doit être comprise entre {min} et {max}",
+  "validation.notBetween": "La valeur ne doit pas être comprise entre {min} et {max}",
+  "validation.invalidNumber": "Valeur numérique invalide",
+  "validation.invalidDate": "Valeur de date invalide",
+  "validation.invalidList": "Valeur de liste invalide",
+  "validation.invalidValue": "Valeur {dataType} invalide",
+  "validation.itemCount_one": "{count} élément",
+  "validation.itemCount_other": "{count} éléments",
+  "validation.misconfigured.comparisonValueMissing": "Validation mal configurée : la valeur de comparaison est absente",
+  "validation.misconfigured.minBoundaryMissing": "Validation mal configurée : la borne minimale est absente",
+  "validation.misconfigured.maxBoundaryMissing": "Validation mal configurée : la borne maximale est absente",
+  "validation.misconfigured.maxCharCountMissing": "Validation mal configurée : le paramètre maxCharCount est absent",
+  "validation.misconfigured.minCharCountMissing": "Validation mal configurée : le paramètre minCharCount est absent",
+  "action.notAvailable": "Cette action n'est pas disponible. Veuillez contacter le support.",
+  "action.denied": "Vous n'avez pas l'autorisation d'effectuer cette action.",
+  "action.permissionsLoading": "Les autorisations sont encore en cours de chargement. Veuillez réessayer.",
+  "screen.denied": "Vous n'avez pas l'autorisation de consulter cet écran.",
+  "screen.loadError": "Une erreur s'est produite lors du chargement de cet écran.",
+  "screen.oops": "Oups !",
+  "screen.notFoundTitle": "404 - PAGE INTROUVABLE",
+  "screen.notFoundDescription": "La page que vous recherchez a peut-être été supprimée, renommée ou est temporairement indisponible.",
+  "screen.unexpectedError": "Une erreur inattendue s'est produite.",
+  "locale.label": "Langue",
+  "http.GET.200": "Récupération réussie",
+  "http.GET.204": "Aucun contenu",
+  "http.GET.400": "Requête incorrecte",
+  "http.GET.401": "Non autorisé",
+  "http.GET.404": "Entité introuvable",
+  "http.GET.415": "Type de média non pris en charge",
+  "http.GET.500": "Erreur",
+  "http.POST.201": "Création réussie",
+  "http.POST.204": "Aucun contenu",
+  "http.POST.400": "Requête incorrecte",
+  "http.POST.401": "Non autorisé",
+  "http.POST.409": "Entrée en double",
+  "http.POST.415": "Type de média non pris en charge",
+  "http.POST.422": "Erreur de validation",
+  "http.POST.500": "Erreur",
+  "http.PUT.201": "Mise à jour réussie",
+  "http.PUT.204": "Aucun contenu",
+  "http.PUT.400": "Requête incorrecte",
+  "http.PUT.401": "Non autorisé",
+  "http.PUT.404": "Entité introuvable",
+  "http.PUT.409": "Entrée en double",
+  "http.PUT.415": "Type de média non pris en charge",
+  "http.PUT.422": "Erreur de validation",
+  "http.PUT.500": "Erreur",
+  "http.PATCH.201": "Mise à jour réussie",
+  "http.PATCH.204": "Aucun contenu",
+  "http.PATCH.400": "Requête incorrecte",
+  "http.PATCH.401": "Non autorisé",
+  "http.PATCH.404": "Entité introuvable",
+  "http.PATCH.409": "Entrée en double",
+  "http.PATCH.415": "Type de média non pris en charge",
+  "http.PATCH.422": "Erreur de validation",
+  "http.PATCH.500": "Erreur",
+  "http.DELETE.200": "Suppression réussie",
+  "http.DELETE.204": "Aucun contenu",
+  "http.DELETE.401": "Non autorisé",
+  "http.DELETE.404": "Entité introuvable",
+  "http.DELETE.409": "Entrée en double",
+  "http.DELETE.415": "Type de média non pris en charge",
+  "http.DELETE.422": "Erreur de validation",
+  "http.DELETE.500": "Erreur"
+}