@massimo-cassandro/minimo 1.43.4 → 1.45.0

package/dev-tools/custom-media-builder/README.md

@@ -0,0 +1,11 @@
+# Custom media builder
+
+Genera il file css delle @custom-media a partire da un modulo JS che esporta
+(default) un oggetto { nome: media-query } e un un secondo oggetto breakpoint.js
+per la condivisione dei breakpoiunt in js, vedi `src/custom-media.js`.
+
+Uso da riga di comando (percorsi relativi alla directory corrente):
+
+```bash
+node custom-media-builder.mjs [--src=./app/css/custom-media.js] [--dest=<src con estensione .css>]
+```

package/dev-tools/custom-media-builder/custom-media-builder.mjs

@@ -0,0 +1,74 @@
+#!/usr/bin/env node
+
+/* eslint-disable no-console */
+import fs from 'fs';
+import path from 'path';
+import process from 'process';
+import { pathToFileURL } from 'url';
+
+/**
+ * Genera il file css delle @custom-media.
+ * Il file viene riscritto solo se il contenuto è cambiato,
+ * per non attivare inutilmente il watcher di webpack.
+ *
+ * @param {object} [options]
+ * @param {string} [options.src] modulo JS con l'export default delle custom media
+ * @param {string} [options.dest] file css da generare (default: file in `src` con estensione cambiata in `.css`)
+ * @returns {Promise<boolean>} `true` se il file è stato riscritto
+ *
+ * @example
+ * await buildCustomMedia({
+ *   src: './app/css/custom-media.js',
+ *   dest: './app/css/custom-media.css',
+ * });
+ */
+export async function buildCustomMedia({
+  src = './app/css/custom-media.js',
+  dest = null,
+} = {}) {
+
+  const srcPath = path.resolve(src),
+    destPath = path.resolve(dest ?? srcPath.replace(/\.m?js$/, '.css'));
+
+  const { default: customMedia } = await import(pathToFileURL(srcPath).href);
+
+  if (!customMedia || typeof customMedia !== 'object') {
+    throw new Error(`${src}: export default mancante o non valido`);
+  }
+
+  const rows = Object.entries(customMedia).map(([name, query]) => {
+    if (typeof query !== 'string' || !query.trim()) {
+      throw new Error(`${src}: valore non valido per "${name}"`);
+    }
+    return `@custom-media --${name.replace(/^--/, '')} ${query.trim()};`;
+  });
+
+  const content = '/* File generato da custom-media-builder.mjs a partire da ' +
+    `${path.basename(srcPath)}. Eventuali modifich andranno perdute */\n\n` +
+    rows.join('\n') + '\n';
+
+  if (fs.existsSync(destPath) && fs.readFileSync(destPath, 'utf8') === content) {
+    return false;
+  }
+
+  fs.writeFileSync(destPath, content);
+  return true;
+}
+
+// esecuzione da riga di comando
+if (process.argv[1] && import.meta.url === pathToFileURL(path.resolve(process.argv[1])).href) {
+  const args = Object.fromEntries(
+    process.argv.slice(2)
+      .map(arg => arg.match(/^--(src|dest)=(.+)$/))
+      .filter(Boolean)
+      .map(([, key, value]) => [key, value])
+  );
+
+  try {
+    const written = await buildCustomMedia(args);
+    console.log(written ? 'custom media: file aggiornato' : 'custom media: nessuna modifica');
+  } catch (err) {
+    console.error(err.message);
+    process.exit(1);
+  }
+}

package/dev-tools/starter-kit/source_files/root/_sf/templates/_incl/minimo-form-layout.html.twig

@@ -1,8 +1,8 @@
 {#
-  Bootstrap 5 Symfony form layout
+  minimo form layout (ex bs5)
   =======================================
   Massimo Cassandro
-  https://github.com/massimo-cassandro/symfony-bootstrap-form-theme
+  v. 2.1
 #}
 
 {#
@@ -112,11 +112,17 @@
     {% set params = {} %}
   {%- endif -%}
   {%- if params.container_attr is not defined %}
-    {% set params = params|merge({container_attr: {}}) %}
+    {% set params = params|merge({container_attr: {} }) %}
   {%- endif -%}
 
   {% set params = params|merge({
-    container_attr: params.container_attr|merge({ class: (params.container_attr.class|default('') ~ (compound|default()? ' form-collection-fset form-group' : ' form-group'))|trim })
+    container_attr: params.container_attr
+      |merge({
+        class: (
+          container_class|default('') ~ ' ' ~
+          params.container_attr.class|default('') ~
+            (compound|default()? ' form-collection-fset form-group' : ' form-group')
+        )|trim })
   }) %}
 
   {%- if disabled is defined and disabled %}

package/dev-tools/starter-kit/source_files/root/package-tpl.json

@@ -31,6 +31,7 @@
     "create-favicons": "npx create-favicons --dir=./app/favicons",
     "python server": "python3 -m http.server [[port8000]] # --directory __dirname__ # 8000 = default port",
     "node server": "node serve # richiede ‘npm i serve’",
+    "build custom media": "npx custom-media-builder --src=./app/css/custom-media.js",
     "build tokens": "npx buildTokens --config ./app/css/tokens-config.mjs",
     "check unresolved props": "npx checkUnresolvedProps --config ./app/css/tokens-config.mjs",
     "find orphan css classes": "npx findOrphanCssClasses --config ./app/css/orphan-css-classes.config.mjs",

package/dev-tools/starter-kit/starter-install.sh

@@ -458,6 +458,7 @@ done
 MINIMO_PKG_DIR=./node_modules/@massimo-cassandro/minimo
 
 force_cat "${MINIMO_PKG_DIR}/src/custom-properties.css" "${FRONTEND_INSTALL_PATH}/css/minimo-custom-properties.css"
+force_cat "${MINIMO_PKG_DIR}/src/custom-media.js" "${FRONTEND_INSTALL_PATH}/css/custom-media.js"
 force_cat "${MINIMO_PKG_DIR}/src/custom-media.css" "${FRONTEND_INSTALL_PATH}/css/custom-media.css"
 
 # entry css principale del progetto: copia diretta di minimo.css

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.43.4",
+  "version": "1.45.0",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./src/index.js",
@@ -34,6 +34,7 @@
     "upd@m": "dev-tools/upd@m/index.mjs",
     "svgIconsTools": "dev-tools/svg-icons-tools/index.mjs",
     "create-favicons": "dev-tools/create-favicons/index.mjs",
+    "custom-media-builder": "dev-tools/custom-media-builder/custom-media-builder.mjs",
     "starter-kit": "dev-tools/starter-kit/starter-install.sh"
   },
   "repository": {
@@ -47,6 +48,7 @@
     "build-margin-padding-css": "node ./scripts/build-margin-padding-css.mjs",
     "generate:types": "node ./scripts/generate-class-types.mjs",
     "prepublishOnly": "npm run generate:types",
+    "build custom media": "node ./dev-tools/custom-media-builder/custom-media-builder.mjs --src=./src/custom-media.js",
     "check unresolved props": "node ./dev-tools/design-tokens-builder/check-unresolved-custom-props.mjs --config ./design-tokens/tokens-config.mjs",
     "test": "node --test \"test/**/*.test.mjs\"",
     "test sideEffects tree-shaking": "node ./test/sideEffects-tree-shaking/run-test.mjs",

package/src/css/forms/forms.css

@@ -151,6 +151,7 @@ input[type='checkbox'] {
   display: block;
   padding-left: 1.5em;
   margin-block-start: var(--size-sm);
+  break-inside: avoid;
 
   .form-check-input {
     float: left;

package/src/custom-media.css

@@ -1,40 +1,17 @@
-/* TODO valutare rinomina dei breakpoint in nomi semantici (es. dsk/lap/tab/mob,
-   vedi scripts/build-margin-padding-css.mjs) per coerenza con la scala `sizes`,
-   che usa la stessa nomenclatura xs/sm/md/lg/xl e genera ambiguità nelle
-   utility responsive. Non banale: i tier attuali (xxlarge/xlarge/large/medium/
-   small, con varianti -only/-down) sono numerosi e in parte sovrapposti (es.
-   "large" = "small desktop") e non si riducono in modo pulito a poche
-   categorie semantiche; inoltre il nome è usato in molti file (grid.css,
-   display.css, visibility.css, text.css, sf-macro.css, json-table, oltre ai
-   file margin-padding-*-media.css) ed è parte di un template pensato per
-   essere personalizzato dall'utente: rinominarlo qui non aggiorna le copie
-   già in uso nei progetti che lo hanno importato. */
-
-/*
-90rem    : 1440px xxlarge (large desktop)
-80rem    : 1280px xlarge (desktop)
-64rem    : 1024px large (small desktop)
-47.5rem  : 760px  medium (tablet)
-25rem    : 400px  small (phone)
-
-tablet alt:
-53.75rem : 860px  medium (tablet)
-*/
+/* File generato da custom-media-builder.mjs a partire da custom-media.js: NON MODIFICARE DIRETTAMENTE */
 
 @custom-media --media-xxlarge-viewport-up (width >= 90rem);
 @custom-media --media-xlarge-viewport-up (width >= 80rem);
 @custom-media --media-large-viewport-up (width >= 64rem);
 @custom-media --media-medium-viewport-up (width >= 47.5rem);
 @custom-media --media-small-viewport-up (width >= 25rem);
-
 @custom-media --media-xxlarge-viewport-only (width >= 90rem);
-@custom-media --media-xlarge-viewport-only (64rem < width <= 80rem);
-@custom-media --media-large-viewport-only (64rem < width <= 80rem);
-@custom-media --media-medium-viewport-only (47.5rem < width <= 64rem);
-@custom-media --media-small-viewport-only (width <= 47.5rem);
-
-@custom-media --media-xxlarge-viewport-down (max-width: 90rem);
-@custom-media --media-xlarge-viewport-down (max-width: 80rem);
-@custom-media --media-large-viewport-down (max-width: 64rem);
-@custom-media --media-medium-viewport-down (max-width: 47.5rem);
-@custom-media --media-small-viewport-down (max-width: 25rem);
+@custom-media --media-xlarge-viewport-only (80rem <= width < 90rem);
+@custom-media --media-large-viewport-only (64rem <= width < 80rem);
+@custom-media --media-medium-viewport-only (47.5rem <= width < 64rem);
+@custom-media --media-small-viewport-only (width < 47.5rem);
+@custom-media --media-xxlarge-viewport-down (width < 90rem);
+@custom-media --media-xlarge-viewport-down (width < 80rem);
+@custom-media --media-large-viewport-down (width < 64rem);
+@custom-media --media-medium-viewport-down (width < 47.5rem);
+@custom-media --media-small-viewport-down (width < 25rem);

package/src/custom-media.js

@@ -0,0 +1,72 @@
+/*
+Definizioni delle custom media del progetto: unica fonte dei breakpoint,
+usata sia per generare custom-media.css (vedi custom-media-builder.mjs,
+`npm run "build custom media"`) sia direttamente in JS.
+
+NB: dopo ogni modifica rigenerare custom-media.css (la generazione è
+comunque eseguita all'avvio delle build webpack DEV e PROD).
+
+I valori sono duplicati nei `media` scritti a mano dei template Twig
+(home.html.twig e home_incl/hero.incl.html.twig): vanno aggiornati a mano.
+
+90rem    : 1440px xxlarge (large desktop)
+80rem    : 1280px xlarge (desktop)
+64rem    : 1024px large (small desktop)
+47.5rem  : 760px  medium (tablet)
+25rem    : 400px  small (phone)
+
+tablet alt:
+53.75rem : 860px  medium (tablet)
+*/
+
+/* TODO valutare rinomina dei breakpoint in nomi semantici (es. dsk/lap/tab/mob,
+   vedi scripts/build-margin-padding-css.mjs) per coerenza con la scala `sizes`,
+   che usa la stessa nomenclatura xs/sm/md/lg/xl e genera ambiguità nelle
+   utility responsive. Non banale: i tier attuali (xxlarge/xlarge/large/medium/
+   small, con varianti -only/-down) sono numerosi e in parte sovrapposti (es.
+   "large" = "small desktop") e non si riducono in modo pulito a poche
+   categorie semantiche; inoltre il nome è usato in molti file (grid.css,
+   display.css, visibility.css, text.css, sf-macro.css, json-table, oltre ai
+   file margin-padding-*-media.css) ed è parte di un template pensato per
+   essere personalizzato dall'utente: rinominarlo qui non aggiorna le copie
+   già in uso nei progetti che lo hanno importato. */
+
+export const breakpoints = {
+  xxlarge: '90rem',
+  xlarge: '80rem',
+  large: '64rem',
+  medium: '47.5rem',
+  small: '25rem',
+};
+
+const bp = breakpoints;
+
+/**
+ * Custom media del progetto: chiave = nome della custom media (senza `--`),
+ * valore = media query.
+ *
+ * @example
+ * import customMedia from './custom-media.js';
+ * const mql = matchMedia(customMedia['media-medium-viewport-up']); // '(width >= 47.5rem)'
+ */
+const customMedia = {
+  'media-xxlarge-viewport-up': `(width >= ${bp.xxlarge})`,
+  'media-xlarge-viewport-up': `(width >= ${bp.xlarge})`,
+  'media-large-viewport-up': `(width >= ${bp.large})`,
+  'media-medium-viewport-up': `(width >= ${bp.medium})`,
+  'media-small-viewport-up': `(width >= ${bp.small})`,
+
+  'media-xxlarge-viewport-only': `(width >= ${bp.xxlarge})`,
+  'media-xlarge-viewport-only': `(${bp.xlarge} <= width < ${bp.xxlarge})`,
+  'media-large-viewport-only': `(${bp.large} <= width < ${bp.xlarge})`,
+  'media-medium-viewport-only': `(${bp.medium} <= width < ${bp.large})`,
+  'media-small-viewport-only': `(width < ${bp.medium})`,
+
+  'media-xxlarge-viewport-down': `(width < ${bp.xxlarge})`,
+  'media-xlarge-viewport-down': `(width < ${bp.xlarge})`,
+  'media-large-viewport-down': `(width < ${bp.large})`,
+  'media-medium-viewport-down': `(width < ${bp.medium})`,
+  'media-small-viewport-down': `(width < ${bp.small})`,
+};
+
+export default customMedia;

package/src/utilities/better-text-with-places.js

@@ -1,7 +1,7 @@
 // @ts-check
 /*! minimo - Better Text with places */
 
-import { betterText, NBSP_AFTER_PARTICLE_REGEX } from './better-text.js';
+import { betterText, NBSP_AFTER_PARTICLE_REGEX, PARTICELLE } from './better-text.js';
 
 const places = [
   // EUROPA
@@ -467,6 +467,19 @@ function buildPlacesMatcher(list) {
 
 const defaultMatcher = buildPlacesMatcher(places);
 
+/*
+  Corrisponde agli spazi (normali o non separabili) NON seguiti da una particella:
+  usata con l'opzione `addNbsp` per unire le parole dei nomi composti, lasciando
+  separabile lo spazio prima di una particella (es. "Lago di Como" → spazio normale
+  tra "Lago" e "di", mentre quello tra "di" e "Como" è già gestito da betterText())
+*/
+const SPACE_BEFORE_NON_PARTICLE_REGEX = new RegExp(
+  '[ \\u00A0]+(?!(?:' +
+    PARTICELLE.map(p => p.replace(/[.*+?^${}()|[\]\\/]/g, '\\$&')).join('|') +
+  ')(?![\\p{L}\\p{N}]))',
+  'giu'
+);
+
 /**
  * Versione di betterText() che normalizza anche le occorrenze di luoghi noti
  * (paesi, città, fiumi, monti, località turistiche) presenti nel testo:
@@ -480,18 +493,33 @@ const defaultMatcher = buildPlacesMatcher(places);
  * ovunque compaiano.
  *
  * @param {string} str - stringa da elaborare
- * @param {string[]} [custom_words] - elenco di parole di cui va mantenuta la capitalizzazione esatta (es. `['iPhone', 'macOS']`) (default: [])
- * @param {string[]} [extra_places] - luoghi aggiuntivi, uniti all'elenco predefinito (default: [])
+ * @param {object} [options] - opzioni (default: {})
+ * @param {string[]} [options.custom_words] - elenco di parole di cui va mantenuta la capitalizzazione esatta (es. `['iPhone', 'macOS']`) (default: [])
+ * @param {string[]} [options.extra_places] - luoghi aggiuntivi, uniti all'elenco predefinito (default: [])
+ * @param {boolean} [options.addNbsp] - se `true`, nei nomi di luogo composti da più parole gli spazi vengono
+ * sostituiti da spazi non separabili, tranne quelli che precedono una particella
+ * (es. in "Monte Bianco" lo spazio diventa non separabile, in "Lago di Como" solo quello dopo "di") (default: false)
  * @returns {string} stringa elaborata, oppure stringa vuota se l'input è falsy
  *
  * @example
  * betterTextWithPlaces("vacanza a  new york e  nel lago di como ,l'avana");
  * // → "vacanza a New York e nel Lago di Como, L’Avana"
  *
- * betterTextWithPlaces('gita a monte cervino', ['iPhone'], ['Monte Cervino']);
+ * betterTextWithPlaces('gita a monte cervino', { custom_words: ['iPhone'], extra_places: ['Monte Cervino'] });
  * // → 'gita a Monte Cervino'
+ *
+ * // opzioni con i valori di default
+ * betterTextWithPlaces('monte bianco e lago di como', {
+ *   custom_words: [],
+ *   extra_places: [],
+ *   addNbsp: false
+ * });
+ * // → 'Monte Bianco e Lago di Como' (spazio non separabile solo dopo "di")
+ *
+ * betterTextWithPlaces('monte bianco e lago di como', { addNbsp: true });
+ * // → 'Monte Bianco e Lago di Como' (spazi non separabili tra "Monte" e "Bianco" e dopo "di")
  */
-export function betterTextWithPlaces(str, custom_words = [], extra_places = []) {
+export function betterTextWithPlaces(str, { custom_words = [], extra_places = [], addNbsp = false } = {}) {
 
   str = betterText(str, custom_words);
 
@@ -503,7 +531,12 @@ export function betterTextWithPlaces(str, custom_words = [], extra_places = [])
     ? buildPlacesMatcher([...places, ...extra_places])
     : defaultMatcher;
 
-  return matcher
-    ? str.replace(matcher.regex, match => matcher.canonical.get(placeKey(match)) ?? match)
-    : str;
+  if (!matcher) {
+    return str;
+  }
+
+  return str.replace(matcher.regex, match => {
+    const place = matcher.canonical.get(placeKey(match)) ?? match;
+    return addNbsp ? place.replace(SPACE_BEFORE_NON_PARTICLE_REGEX, '\u00A0') : place;
+  });
 }

package/src/utilities/better-text.js

@@ -9,7 +9,7 @@
   che nulla di tutto ciò dipende dagli argomenti della funzione e in precedenza veniva
   ricostruito a ogni singola chiamata di betterText().
 */
-const PARTICELLE = [
+export const PARTICELLE = [
   'e', 'ed',
   'di', 'a', 'da', 'in', 'per', 'con', 'su', 'per', 'tra', 'fra',
   'il', 'lo', 'la', 'i', 'gli', 'le',