@massimo-cassandro/minimo 1.12.0 → 1.12.1

package/charts/src/node-helpers/create-svg-canvas-node.mjs

@@ -0,0 +1,37 @@
+/*
+  per utilizzo con applicazioni node, di default non utilizzato.
+  Dove necessario rimpiazza la funzione `createSvgCanvas` di default
+  Vedi ./demo/node-demo/index.mjs
+
+  {
+    utils: { createSvgCanvas: createSvgCanvasNode}
+    // ...
+  }
+
+*/
+
+import { createSVGWindow } from 'svgdom';
+import { SVG, registerWindow } from '@svgdotjs/svg.js';
+
+// "@svgdotjs/svg.js": "^3.2.4",
+//     "svgdom": "^0.1.21"
+
+
+// https://svgjs.dev/docs/3.2/getting-started/
+// https://github.com/svgdotjs/svgdom#readme
+
+
+export function createSvgCanvasNode() {
+
+  // returns a window with a document and an svg root node
+  const window = createSVGWindow();
+  const document = window.document;
+
+  // register window and document
+  registerWindow(window, document);
+
+  // create svgCanvas
+  const svgCanvas = SVG(document.documentElement);
+
+  return svgCanvas;
+}

package/dev-tools/create-favicons/src/init-start-text.txt

@@ -0,0 +1,20 @@
+/*
+  File di configurazione per `create-favicons`.
+
+  I valori indicati sono quelli di default.
+  Per avviare la generazione delle favicon digitare
+
+  npx create-favicons
+
+  dalla directory che contiene questo file.
+
+  (o `npx create-favicons  --dir=./path/to/config/dir` dalla root del progetto)
+
+  TUTTI I PERCORSI DALLA DIRECTORY CHE CONTIENE IL FILE DI CONFIGURAZIONE
+
+  Creazione favicons (senza installare il package nel progetto):
+  npx --package=@massimo-cassandro/create-favicons create-favicons (dalla dir corrente)
+
+  Altre info: https://github.com/massimo-cassandro/create-favicons
+
+*/

package/dev-tools/webpack-setup/webpack-modules/mini-svg-data-uri-loader.cjs

@@ -0,0 +1,25 @@
+// ./loaders/mini-svg-data-uri-loader.cjs
+// Questo file USA la libreria 'mini-svg-data-uri', ma è un wrapper specifico per Webpack.
+
+/* eslint-env node */
+// Nota: require perché i Webpack Loaders sono tradizionalmente CommonJS,
+// e Node.js li gestisce correttamente con l'estensione .cjs.
+const svgToMiniDataURI = require('mini-svg-data-uri');
+
+/**
+ * Webpack Loader che prende una stringa SVG e la converte in un
+ * Data URI compatto usando la libreria mini-svg-data-uri.
+ * @param {string} source - Contenuto SVG (già ottimizzato da svgo-loader)
+ * @returns {string} Il Data URI SVG compatto (formato stringa)
+ */
+module.exports = function (source) {
+
+  // rimuove height e width nel svgo non fosse attivato
+  source = source.replace(/ width="\d+"/, '').replace(/ height="\d+"/, '');
+  
+  // Richiama la funzione per ottenere l'URI compatto
+  const dataUri = svgToMiniDataURI(source);
+
+  // Ritorna la stringa Data URI
+  return dataUri;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.12.0",
+  "version": "1.12.1",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",
@@ -55,11 +55,9 @@
     "design-tokens/tokens/**/*.{tokens.json,tokens.jsonc}",
     "design-tokens/_src/**/*.{tokens.json,tokens.jsonc,mjs,js,md}",
     "design-tokens/utilities/**/*.{mjs,md}",
-    "charts/**/*.{js,md}",
-    "dev-tools/**/*.{js,mjs,md,html}",
-    "dev-tools/webpack-setup/**/*.{js,mjs,md,sh,json,ejs}",
-    "dev-tools/webpack-setup/**/_*",
-    "snippets/**/*.{php,js,md,twig}"
+    "charts/**/*.{js,mjs,md}",
+    "dev-tools/**/*",
+    "snippets/**/*"
   ],
   "peerDependenciesMeta": {
     "@svgdotjs/svg.js": {
@@ -82,4 +80,4 @@
     "sharp": "^0.35.3",
     "sharp-ico": "^0.1.5"
   }
-}
+}

package/snippets/build-chrome-custom-device-list.mjs

@@ -0,0 +1,101 @@
+/* eslint-disable no-console */
+/* eslint-env node */
+
+import fs from 'fs';
+
+const device_std_height = 700,
+
+  breakpoints = [
+    {title: 'moto g5',  w:  360, h: 512},
+
+    {title: 'bs5 xs max',  w:  575, h: device_std_height},
+    {title: 'bs5 sm min',  w:  576, h: device_std_height},
+    {title: 'bs5 sm max',  w:  767, h: device_std_height},
+    {title: 'bs5 md min',  w:  768, h: device_std_height},
+    {title: 'bs5 md max',  w:  991, h: device_std_height},
+    {title: 'bs5 lg min',  w:  992, h: device_std_height},
+    {title: 'bs5 lg max',  w: 1199, h: device_std_height},
+    {title: 'bs5 xl min',  w: 1200, h: device_std_height},
+    {title: 'bs5 xl max',  w: 1399, h: device_std_height},
+    {title: 'bs5 xxl min', w: 1400, h: device_std_height},
+
+
+    {title: 'schermo staff BV (1280x960)', w: 1280, h: 960},
+    {title: '1366x768', w: 1366, h: 768},
+    {title: '1280x720 (HD)', w: 1280, h: 720},
+    {title: '1920x1080 (full HD)', w: 1920, h: 1980},
+
+  ];
+
+let device_list = breakpoints.map((item, idx) => {
+
+  return {
+    'title': ('00' + String(idx+1)).slice(-2) + '. ' + item.title,
+    'type': 'unknown',
+    'user-agent': '',
+    'capabilities': [
+      'mobile'
+    ],
+    'screen': {
+      'device-pixel-ratio': 0,
+      'vertical': {
+        'width': item.w,
+        'height': item.h
+      },
+      'horizontal': {
+        'width': item.h,
+        'height': item.w
+      }
+    },
+    'modes': [
+      {
+        'title': '',
+        'orientation': 'vertical',
+        'insets': {
+          'left': 0,
+          'top': 0,
+          'right': 0,
+          'bottom': 0
+        }
+      },
+      {
+        'title': '',
+        'orientation': 'horizontal',
+        'insets': {
+          'left': 0,
+          'top': 0,
+          'right': 0,
+          'bottom': 0
+        }
+      }
+    ],
+    'show-by-default': true,
+    'dual-screen': false,
+    'show': 'Default',
+    'user-agent-metadata': {
+      'brands': [
+        {
+          'brand': '',
+          'version': ''
+        }
+      ],
+      'fullVersion': '',
+      'platform': '',
+      'platformVersion': '',
+      'architecture': '',
+      'model': '',
+      'mobile': true
+    }
+  };
+});
+
+
+const dest = 'ChromeCustomDeviceList.txt',
+  str = '"custom-emulated-device-list":"'+ JSON.stringify(device_list).replace(/"/g, '\\"') + '",';
+
+fs.writeFileSync(dest, str);
+
+console.log (
+  'copiare all\'interno del file `~/Library/Application Support/Google/Chrome/Default/Preferences` (NB: è un file JSON)\n'+
+  'vedi: https://stackoverflow.com/a/70905335/743443\n'
+);

package/snippets/config-templates/_env.local

@@ -0,0 +1,13 @@
+DATABASE_URL=mysql://root:mysql8root@127.0.0.1:3306/xxxx?serverVersion=8.0
+
+APP_ENV=dev
+APP_DEBUG=1
+
+### mailHog
+MAILER_DSN=smtp://localhost:1025
+
+### supporto webpack
+# cartella, dentro public, in cui webpack salva js, css immagini ecc
+ASSETS_DIR=_dev
+
+

package/snippets/config-templates/_github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: "npm" # Indica che stiamo usando NPM
+    directory: "/"           # Dove si trova il package.json
+    schedule:
+      interval: "monthly"     # Può essere: daily, weekly, monthly
+    open-pull-requests-limit: 15 # Massimo 10 PR aperte contemporaneamente
+    labels:
+      - "dependencies"
+      - "javascript"

package/snippets/config-templates/_hintrc.cjs

@@ -0,0 +1,35 @@
+module.exports = {
+  "connector": {
+    "name": "local",
+    "options": {
+      "pattern": ["./build/**/*.html"] // Analizza i file HTML generati nella directory di build
+    }
+  },
+  "extends": [
+    "development", // Configurazione base per lo sviluppo
+    "accessibility", // Regole per l'accessibilità
+    "performance", // Regole per le prestazioni
+    "security", // Regole per la sicurezza
+    "html-checker" // Controllo della validità HTML
+  ],
+  "hints": {
+    "axe": "error", // Controlla l'accessibilità con axe-core
+    "content-type": "error", // Verifica i tipi di contenuto corretti
+    "disown-opener": "warning", // Consiglia di usare `rel="noopener"`
+    "http-cache": ["warning", { "maxAge": 31536000 }], // Suggerisce una cache HTTP ottimale
+    "image-optimization-cloudinary": "off", // Disattiva l'ottimizzazione delle immagini
+    "meta-viewport": "error", // Verifica la presenza del meta tag viewport
+    "no-vulnerable-javascript-libraries": "error", // Controlla librerie JS vulnerabili
+    "performance-budget": [
+      "warning",
+      {
+        "resourceTypes": {
+          "script": 250, // Limite di 250 KB per gli script
+          "image": 500 // Limite di 500 KB per le immagini
+        }
+      }
+    ],
+    "strict-transport-security": "error", // Suggerisce l'uso di HSTS
+    "validate-set-cookie-header": "error" // Controlla l'uso corretto dell'header Set-Cookie
+  }
+};

package/snippets/config-templates/_htaccess

@@ -0,0 +1,69 @@
+
+# no cache
+# <IfModule mod_headers.c>
+#   Header set Cache-Control "no-cache, no-store, must-revalidate"
+#   Header set Pragma "no-cache"
+#   Header set Expires 0
+# </IfModule>
+
+# blocco iframe
+# "deny" = tutti siti
+# "sameorigin" tutti tranne quelli che vengono dalla stessa origine
+# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
+Header set X-Frame-Options "sameorigin"
+
+
+<IfModule mod_expires.c>
+  ExpiresActive On
+  AddType application/vnd.ms-fontobject .eot
+  AddType application/x-font-ttf .ttf
+  AddType application/x-font-opentype .otf
+  AddType application/x-font-woff .woff
+  AddType application/x-font-woff2 .woff2
+  AddType application/font-sfnt otf ttf
+  AddType application/font-woff  woff
+  AddType application/font-woff2 woff2
+  AddType image/svg+xml .svg
+
+  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
+  ExpiresByType application/x-font-ttf "access plus 1 year"
+  ExpiresByType application/x-font-opentype "access plus 1 year"
+  ExpiresByType application/x-font-woff "access plus 1 year"
+  ExpiresByType application/x-font-woff2 "access plus 1 year"
+  ExpiresByType application/font-sfnt "access plus 1 year"
+  ExpiresByType application/font-woff "access plus 1 year"
+  ExpiresByType application/font-woff2 "access plus 1 year"
+
+  ExpiresByType text/html "access plus 1 hour"
+  ExpiresByType text/css "access plus 1 year"
+  ExpiresByType text/x-javascript "access plus 1 year"
+  ExpiresByType application/javascript "access plus 1 year"
+  ExpiresByType application/x-javascript "access plus 1 year"
+
+  ExpiresByType image/svg+xml "access plus 1 year"
+  ExpiresByType image/gif "access plus 1 year"
+  ExpiresByType image/png "access plus 1 year"
+  ExpiresByType image/jpeg "access plus 1 year"
+  ExpiresByType image/pjpeg "access plus 1 year"
+  ExpiresByType image/webp "access plus 1 year"
+  ExpiresByType image/avif "access plus 1 year"
+
+  ExpiresByType application/pdf "access plus 1 year"
+
+  ExpiresByType video/mp4 "access plus 1 year"
+  ExpiresByType video/webm "access plus 1 year"
+  ExpiresByType video/x-m4v "access plus 1 year"
+  ExpiresByType video/quicktime "access plus 1 year"
+  ExpiresByType audio/mpeg "access plus 1 year"
+  ExpiresByType audio/x-wav "access plus 1 year"
+
+  ExpiresByType image/x-icon "access plus 1 year"
+  ExpiresDefault "access plus 1 year"
+</IfModule>
+
+<IfModule !mod_expires.c>
+  <IfModule mod_headers.c>
+    # 1 year
+    Header set Cache-Control 'public, max-age 31536000'
+  </IfModule>
+</IfModule>

package/snippets/config-templates/_npmignore

@@ -0,0 +1,8 @@
+*~
+.codekit-cache/
+config.codekit3
+*.code-workspace
+.DS_Store*
+ehthumbs.db
+Icon?
+Thumbs.db

package/snippets/config-templates/_npmrc

@@ -0,0 +1 @@
+package-lock=false

package/snippets/config-templates/_stylelintignore

@@ -0,0 +1,5 @@
+
+/**/*.css
+/**/node_modules/**/*.css
+/**/node_modules/**/*.scss
+/**/node_modules/**/*.less

package/snippets/config-templates/babel.config--react.json

@@ -0,0 +1,20 @@
+{
+    "presets": [
+      "@babel/preset-env",
+      [
+        "@babel/preset-react",
+        {
+          "runtime": "automatic"
+        }
+      ]
+    ],
+    "plugins": [],
+    "env": {
+      "production": {
+        "plugins": [
+          "transform-react-remove-prop-types"
+        ]
+      }
+    }
+  }
+

package/snippets/config-templates/babel.config--solidJS.json

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "@babel/preset-env", "babel-preset-solid"
+  ],
+  "plugins": [
+    "@babel/plugin-syntax-jsx"
+  ]
+}

package/snippets/config-templates/react/offcanvas/offcanvas.jsx

@@ -0,0 +1,89 @@
+/**
+* Offcanvas
+*
+*
+*/
+
+
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import styles from './offcanvas.module.scss';
+
+// https://react-icons.github.io/react-icons/icons/pi/
+import { PiXCircleBold } from 'react-icons/pi';
+
+
+function Offcanvas(props) {
+  const [isHiding, setIsHiding] = React.useState(false),
+    [isShowing, setIsShowing] = React.useState(props.show),
+    [content, setContent] = React.useState();
+
+  React.useEffect(() => {
+
+    // disable body scroll
+    document.body.classList.toggle('no-scroll', props.show);
+
+    if(props.show) {
+      setIsShowing(true);
+    }
+  }, [props.show]);
+
+  useEffect(() => {
+    setContent(
+      <div
+        role="dialog"
+        aria-modal="true"
+        className={classnames(
+          styles.offcanvas,
+          props.className,
+          {
+            [styles.fullscreen]: props.fullscreen,
+            [styles.show]: props.show,
+            [styles.hiding]: isHiding,
+            [styles.showing]: isShowing
+          }
+        )}
+        tabIndex="-1"
+        onTransitionEnd={() => {setIsHiding(false); setIsShowing(false);}}
+      >
+        <div className={styles.offcanvasInner}>
+          <div className={styles.offcanvasHeader}>
+            <button
+              type="button"
+              className={styles.offcanvasClose}
+              aria-label="Close"
+              onClick={() => {
+                setIsHiding(true);
+                props.offcanvasShowHandler(props.handlerHideValue);
+              }}
+            ><PiXCircleBold /></button>
+          </div>
+          <div className={styles.offcanvasBody}>
+            {props.children}
+          </div>
+        </div>
+      </div>
+    );
+  }, [isHiding, isShowing, props]);
+
+  return (content);
+}
+
+// https://www.npmjs.com/package/prop-types
+
+Offcanvas.propTypes = {
+  className: PropTypes.string,
+  offcanvasShowHandler: PropTypes.func,
+  show: PropTypes.bool,
+  fullscreen: PropTypes.bool,
+  handlerHideValue: PropTypes.any
+
+};
+Offcanvas.defaultProps = {
+  show: false,
+  fullscreen: false,
+  handlerHideValue: false
+};
+
+export default Offcanvas;

package/snippets/config-templates/react/offcanvas/offcanvas.module.scss

@@ -0,0 +1,109 @@
+// da bs
+
+// @use '../scss/cfg/cfg-settings' as settings;
+// @use '../scss/cfg/grid-breakpoints' as breakpoints;
+// @use 'sass:map
+
+@use '../scss/mixins/media-mixins' as mediaMixins;
+@use '../scss/mixins/buttons-mixins' as buttonsMixins;
+// @use '../scss/cfg/status-mixins' as statusMixins;
+// @use '../scss/cfg/text-mixins' as textMixins;
+
+.offcanvas {
+  --offcanvas-padding-x: 1.4rem;
+  --offcanvas-padding-y: 2rem;
+
+  position: fixed;
+  inset: 0;
+  z-index: 1045;
+  display: block;
+  visibility: hidden;
+  background-color: var(--overlay-color);
+  backdrop-filter: blur(1px);
+
+  &.show, &.hiding, &.showing {
+    visibility: visible;
+  }
+
+}
+
+.offcanvasInner {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: 18rem;
+  min-width: 280px;
+  max-width: 100dvw;
+  // height: 100%;
+  color: var(--text-color);
+  background-color: var(--body-bg-color);
+  background-clip: padding-box;
+  border-left: var(--text-color);
+  outline: 0;
+  box-shadow: var(--shadow-3);
+  // opacity: 0;
+  // transition: transform, opacity .3s ease-in-out;
+  transition: transform .3s ease-in-out;
+  transform: translateX(100%);
+
+  .show & {
+    box-shadow: -.5rem 0 .5rem var(--text-color);
+    // opacity: 1;
+    transform: none;
+  }
+
+  .fullscreen & {
+    inset: 0;
+    width: auto;
+    border-left: none;
+  }
+  .fullscreen.show & {
+    box-shadow: none;
+  }
+
+  // @include mediaMixins.media-desktop-up() {}
+  @media screen and (min-width: __desktop_breakpoint__) {
+    .fullscreen & {
+      inset: 1.5rem;
+    }
+    .fullscreen.show & {
+      inset: 1.5rem;
+      box-shadow:
+        10px 10px 1rem var(--overlay),
+        -10px 10px 1rem var(--overlay),
+        10px -10px 1rem var(--overlay),
+        -10px -10px 1rem var(--overlay);
+
+    }
+
+  }
+
+}
+
+.offcanvasHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--offcanvas-padding-y) var(--offcanvas-padding-x) calc(var(--offcanvas-padding-y) / 2);
+}
+
+.offcanvasClose {
+  @include buttonsMixins.reset-button();
+  font-size: 2rem;
+  color: var(--bz-primary);
+}
+
+.offcanvasBody {
+  flex-grow: 1;
+  padding: 0 var(--offcanvas-padding-x) var(--offcanvas-padding-y);
+  overflow-y: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .offcanvas {
+    transition: none;
+  }
+}

package/snippets/config-templates/robots.txt

@@ -0,0 +1,5 @@
+User-agent: *
+Allow: /
+# Disallow: /
+
+Sitemap: https://www.example.com/sitemap.xml

package/snippets/config-templates/rollup.config.mjs

@@ -0,0 +1,115 @@
+import terser  from '@rollup/plugin-terser';
+import fs from 'fs';
+import node_resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+
+// https://github.com/hyhappy/rollup-plugin-string-html
+// import htmlString from 'rollup-plugin-string-html';
+
+// https://github.com/exuanbo/rollup-plugin-minify-html-template-literals
+// https://github.com/asyncLiz/minify-html-literals
+// https://github.com/kangax/html-minifier#options-quick-reference
+// import minifyHTML from 'rollup-plugin-minify-html-template-literals';
+
+import p from '../package.json'; // assert { type: 'json' };
+
+const terserOptions = {
+    compress: {
+      passes: 2
+    }
+  },
+  anno = new Date().getFullYear(),
+  dirs = [
+    {source_dir: './front-end/js', output_dir: './AppBundle/Resources/public/js'}
+  ];
+
+let config = [];
+
+// lettura subdir apps e aggiunta a `dirs`
+fs.readdirSync('./front-end/apps').forEach(item => {
+  let stats = fs.statSync(`./front-end/apps/${item}`); // stats.isFile() / stats.isDirectory()
+  if(stats.isDirectory()) {
+    dirs.push({
+      source_dir: `./front-end/apps/${item}`,
+      output_dir: `./AppBundle/Resources/public/apps/${item}`
+    });
+  }
+});
+
+dirs.forEach(dir => {
+
+  fs.readdirSync(dir.source_dir)
+    .filter(f => /\.js$/.test(f))
+    .filter(f => /^[^_]/.test(f)) // ignore files starting with _
+    .forEach(file => {
+
+      let format = 'iife',
+        name = null;
+
+      if(/(-umd\.js)$/.test(file)) {
+        format = 'umd';
+        name = file.replace('-umd.js', '').replace(/-/g, '_');
+      }
+
+      config.push(
+        {
+          // preserveEntrySignatures: false,
+          input: `${dir.source_dir}/${file}`,
+          plugins: [
+            // deve essere il primo
+            // minifyHTML({
+            //   options: {
+            //     minifyOptions: {
+            //       html5: true,
+            //       collapseWhitespace: true,
+            //       collapseInlineTagWhitespace: true,
+            //       conservativeCollapse: true,
+            //       decodeEntities: true
+            //     },
+            //     shouldMinify: () => true
+            //   },
+            // }),
+            node_resolve(),
+            commonjs(),
+            terser(terserOptions),
+          ],
+          output: [{
+            file: `${dir.output_dir}/${file.replace('.js', '-min.js')}`,
+            format: format,
+            sourcemap: true,
+            name: name,
+            banner: `/*! xxxx v.${p.version} - Massimo Cassandro ${anno} */`,
+            // footer: `//! Released on ${new Date().toLocaleString('it-IT', { year: 'numeric',  month: 'short', day: '2-digit', hour12: false, hour:'2-digit', minute:'2-digit' })}`
+          }]
+        }
+      );
+
+    });
+});
+
+export default config;
+
+
+// versione statica
+
+// export default [
+//   {
+//     input: 'input.js',
+//     plugins: [
+//       node_resolve(),
+//       // commonjs(),
+//       terser({ compress: { passes: 2 } }),
+//     ],
+//     output: [
+//       {
+//         file: 'output.min.js',
+//         format: 'iife',
+//         sourcemap: true,
+
+//         banner: `/*! xxxx v.${p.version} - Massimo Cassandro ${anno} */`,
+//         // footer: `//! Released on ${new Date().toLocaleString('it-IT', { year: 'numeric',  month: 'short', day: '2-digit', hour12: false, hour:'2-digit', minute:'2-digit' })}`
+//       }
+//     ]
+//   },
+//   ...
+// ];