@massimo-cassandro/minimo 0.8.8 → 0.9.0

package/README.md

@@ -11,3 +11,22 @@ npm i @massimo-cassandro/minimo
 ```
 
 > Note: **minimo** is designed to be used with WebPack using the configuration you can find in the [webpack-setup folder](./webpack-setup/) of this repository. If changes are made (for example, to how SVG files are imported), things may not work as expected
+
+
+## Utilities
+
+### Dom builder
+
+Builds dom elements from array of objects.
+
+Only available as module script.
+
+```
+import { domBuilder } from '@massimo.cassandro/dom-builder';
+
+domBuilder({ /* options */}); // see source code for details
+```
+
+### Classnames
+
+TODO

package/design-tokens-src/components/snackbar.minimo.tokens.mjs

@@ -0,0 +1,35 @@
+// tokens utitilizzati sia da snackaber che da toast
+export default{
+  snackbar: {
+
+
+
+
+
+
+    font: {
+      size: {
+        $value: '{font.size.sm}',
+        $type: 'dimension'
+      },
+    },
+
+    border: {
+      radius: {
+        $value: '{radius.sm}',
+        $type: 'color'
+      }
+    },
+    text: {
+      color: {
+        $value: '{text.color}',
+        $type: 'color'
+      }
+    },
+    duration: {
+      $value: '5s',
+      $type: 'duration'
+    }
+  }
+
+};

package/index.js

@@ -1 +1,2 @@
 export { classnames } from './src/utilities/classnames.js';
+export { domBuilder } from './src/utilities/dom-builder/dom-builder.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "0.8.8",
-  "description": "Light css framework",
+  "version": "0.9.0",
+  "description": "Light css framework & utilities",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",
   "bugs": {
@@ -19,6 +19,7 @@
     "UPD-version": "npx update-version  # --config=./dev-utilities.config.mjs",
     "upd@m": "npx upd@m",
     "npm-publish": "npm publish",
+    "webpack": "NODE_ENV=development webpack serve --config ./demo/demo-src/webpack.config.mjs",
     "build-tokens": "node ./design-tokens-utilities/build-tokens.mjs --config ./tokens-config.mjs",
     "check unresolved props": "node ./design-tokens-utilities/check-unresolved-custom-props.mjs --config ./tokens-config.mjs"
   },
@@ -28,6 +29,16 @@
     "access": "public"
   },
   "main": "./index.js",
+  "sideEffects": [
+    "*.css",
+    "*.js",
+    "*.svg",
+    "*.jpg",
+    "*.jpeg",
+    "*.png",
+    "*.webp",
+    "*.avif"
+  ],
   "files": [
     "./index.js",
     "src/**/*.{js,mjs,css,svg,md}",
@@ -36,9 +47,36 @@
     "design-tokens-utilities/**/*.{mjs,md}"
   ],
   "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.2",
+    "@csstools/postcss-global-data": "^4.0.0",
     "@massimo-cassandro/dev-updater": "^3.0.3",
     "@massimo-cassandro/eslint-config": "^3.0.6",
     "@massimo-cassandro/stylelint-config": "^2.3.4",
-    "style-dictionary": "^5.4.0"
+    "autoprefixer": "^10.5.0",
+    "babel-loader": "^10.1.1",
+    "css-loader": "^7.1.4",
+    "css-minimizer-webpack-plugin": "^8.0.0",
+    "cssnano": "^7.1.5",
+    "ejs-loader": "^0.5.0",
+    "html-loader": "^5.1.0",
+    "html-webpack-plugin": "^5.6.7",
+    "mini-css-extract-plugin": "^2.10.2",
+    "mini-svg-data-uri": "^1.4.4",
+    "postcss": "^8.5.10",
+    "postcss-custom-media": "^12.0.1",
+    "postcss-loader": "^8.2.1",
+    "postcss-preset-env": "^11.2.1",
+    "process": "^0.11.10",
+    "style-dictionary": "^5.4.0",
+    "style-loader": "^4.0.0",
+    "svg-url-loader": "^8.0.0",
+    "svgo": "^4.0.1",
+    "svgo-add-viewbox": "^3.1.0",
+    "svgo-loader": "^5.0.0",
+    "terser-webpack-plugin": "^5.4.0",
+    "webpack": "^5.106.2",
+    "webpack-cli": "^7.0.2",
+    "webpack-dev-server": "^5.2.3"
   }
 }

package/src/components/modal-alert/TODO.md

@@ -0,0 +1,2 @@
+da rivedere
+spostare custome props nel dictionary

package/src/components/modal-alert/modal-alert.css

@@ -1,4 +1,3 @@
-/* NB incluso nel css principale */
 
 @import '@massimo-cassandro/modal-alert';
 
@@ -13,8 +12,8 @@
   --malert-warning-color: var(--status-warning-color);
   --malert-warning-color-fg: var(--status-warning-fg);
 
-  --malert-error-color: var(--status-danger-color);
-  --malert-error-color-fg: var(--status-danger-fg);
+  --malert-danger-color: var(--status-danger-color);
+  --malert-danger-color-fg: var(--status-danger-fg);
 
   --malert-confirm-color: var(--status-warning-color);
   --malert-confirm-color-fg: var(--status-warning-fg);

package/src/components/snackbar/snackbar.js

@@ -0,0 +1,105 @@
+import { domBuilder, classnames } from '../../../index.js';
+import * as styles from './core.module.css';
+
+/*
+References
+* https://web.dev/learn/css/popover-and-dialog
+* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover
+* https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
+* https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using
+
+* https://m3.material.io/components/snackbar/guidelines
+
+*/
+
+export function snackbar(message, options = {}){
+
+  options = {
+
+    status       : null, // danger, warning, info, success
+    duration     : 4000, // ms or false/null to avoid autoclose
+    close_btn    : true, // true | false
+
+    // TODO snackbar action
+    action       : null, // null or function
+    action_text  : null, // null or string
+
+    ...options
+  };
+
+  domBuilder([
+    {
+      className: classnames(styles.snackbar, options.status? styles[`status-${options.status}`] : null),
+      attrs: {
+        popover: 'manual',
+        role: options.action? 'alert' : 'status'
+      },
+      children: [
+        {
+          className: styles.text,
+          content: message
+        },
+        {
+          tag: 'button',
+          attrs: {
+            type: 'button',
+          },
+          className: classnames('btn-reset', styles.action),
+          content: options.action_text?? '_actions_',
+          condition: options.action && (typeof options.action === 'function'),
+          callback: el => {}
+        },
+        {
+          tag: 'button',
+          className: classnames('btn-close', styles.closeBtn),
+          attrs: {
+            type: 'button',
+          },
+        }
+      ]
+    }
+  ], document.body);
+
+}
+
+/*
+export const NotificationCore = {
+
+  createNotificationElement(message, options = {}) {
+
+
+
+    const show = () => {
+      document.body.appendChild(el);
+      el.showPopover();
+      setTimeout(() => hide(), duration);
+    };
+
+    const hide = () => {
+      if (el.matches(':popover-open')) {
+        el.hidePopover();
+        el.remove(); // Pulizia del DOM
+      }
+    };
+
+    return { el, show, hide };
+  }
+};
+
+
+
+
+toast
+
+import { NotificationCore } from './notifications.js';
+
+export const toast = (message, type = 'info') => {
+  const { el, show } = NotificationCore.createBase(message, { type, duration: 4000 });
+
+  el.classList.add('ui-toast');
+
+  show();
+};
+
+
+ */

package/src/components/snackbar/snackbar.module.css

@@ -0,0 +1,70 @@
+/* purgecss start ignore */
+
+.snackbar {
+
+}
+
+/* purgecss end ignore */
+
+
+/*
+
+
+
+
+
+.toastWrapper {
+  position: fixed;
+  inset-block-end: 0;
+  inset-inline: 0;
+  z-index: 1;
+
+  display: grid;
+  gap: 1vh;
+  justify-content: center;
+  justify-items: stretch;
+  padding-block-end: 5vh;
+
+  pointer-events: none;
+}
+
+.toast {
+  --_bg-lightness: 90%;
+  --_travel-distance: 0;
+
+  max-inline-size: min(25ch, 90vw);
+  padding-block: .5ch;
+  padding-inline: 1ch;
+
+  font-size: var(--toast-font-size);
+  color: var(--toast-text-color);
+  background: hsl(0 0% var(--_bg-lightness) / 90%);
+  border-radius: var(--toast-border-radius);
+  animation:
+    fade-in .3s ease,
+    slide-in .3s ease,
+    fade-out .3s ease var(--toast-duration);
+
+  will-change: transform;
+
+  @media (--dark) {
+    --_bg-lightness: 20%;
+  }
+
+  @media (--motionOK) {
+    --_travel-distance: 5vh;
+  }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+}
+
+@keyframes fade-out {
+  to { opacity: 0; }
+}
+
+@keyframes slide-in {
+  from { transform: translateY(var(--_travel-distance, 10px)); }
+}
+ */

package/src/css/alerts.css

@@ -24,7 +24,7 @@
     --------------------------
   */
 
-  /* alert-error / alert-danger (default) */
+  /* alert-danger (default) */
   --_alert-bg-color: var(--status-danger-background-color);
   --_alert-fg-color: var(--status-danger-fg);
   --_alert-border-color: var(--status-danger-border-color);

package/src/css/anchors.css

@@ -20,7 +20,11 @@ a:not(.btn) {
 }
 
 a:not(.btn), .btn-link {
-  &:focus, &:focus-visible {
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
     outline: 1px solid color-mix(in srgb, var(--link-color) 60%, transparent);
     outline-offset: 2px;
   }

package/src/css/buttons/btn-close.css

@@ -41,6 +41,10 @@
   }
 
   &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
     outline: var(--btn-close-focus-outline-width) solid var(--btn-close-focus-outline-color);
     outline-offset: var(--btn-close-focus-outline-offset);
   }

package/src/css/buttons/buttons-primary.css

@@ -11,8 +11,11 @@
       --_button-border-color: var(--btn-primary-hover-border-color);
     }
   }
+  &:focus {
+    outline: none;
+  }
 
-  &:focus, &:active {
+  &:focus-visible, &:active {
     outline: var(--btn-focus-outline-width) solid var(--btn-primary-focus-outline-color);
     /* outline-offset: 4px; */
   }

package/src/css/buttons/buttons-secondary.css

@@ -12,7 +12,11 @@
     }
   }
 
-  &:focus, &:active {
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible, &:active {
     outline: var(--btn-focus-outline-width) solid var(--btn-secondary-focus-outline-color);
     /* outline-offset: 4px; */
   }

package/src/css/buttons/buttons.css

@@ -22,7 +22,11 @@ button svg {
 }
 
 a.btn {
-  &, &:hover, &:active, &:focus, &:visited {
+  &:focus {
+    outline: none;
+  }
+
+  &, &:hover, &:active, &:focus-visible, &:visited {
     color: var(--_button-fg-color);
     text-decoration: none;
   }

package/src/css/buttons/status-buttons.css

@@ -18,13 +18,13 @@
     --_status-fg-color: var(--status-info-fg);
     --_status-border-color: var(--status-info-border-color);
   }
-  &.btn-danger, &.btn-error {
+  &.btn-danger {
     --_status-bg-color: var(--status-danger-color);
     --_status-fg-color: var(--status-danger-fg);
     --_status-border-color: var(--status-danger-border-color);
   }
 
-  &.btn-success, &.btn-info, &.btn-danger, &.btn-error  {
+  &.btn-success, &.btn-info, &.btn-danger  {
     --_status-hover-bg-color: color-mix(in srgb, var(--_status-bg-color) 30%, transparent);
     --_status-hover-fg-color: var(--_status-bg-color);
     --_status-hover-border-color: var(--_status-bg-color);
@@ -51,7 +51,7 @@
 
   }
 
-  &.btn-success, &.btn-info, &.btn-danger, &.btn-error, &.btn-warning  {
+  &.btn-success, &.btn-info, &.btn-danger, &.btn-warning  {
 
     --_button-bg-color: var(--_status-bg-color);
     --_button-fg-color: var(--_status-fg-color);
@@ -74,7 +74,11 @@
       }
     }
 
-    &:focus, &:active {
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible, &:active {
       outline: var(--_status-focus-outline);
     }
 

package/src/css/forms/forms.css

@@ -41,6 +41,10 @@
   border-radius: var(--form-control-border-radius);
 
   &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
     outline: var(--form-control-focus-outline-width) solid var(--form-control-focus-color);
     outline-offset: var(--form-control-focus-outline-offset);
   }

package/src/css/forms/input-group.css

@@ -33,7 +33,11 @@
   }
 
   > * {
-    &:focus, &:focus-within {
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible, &:focus-within {
       z-index: 5;
     }
   }

package/src/css/forms/validation.css

@@ -18,6 +18,10 @@
     outline-offset: var(--form-validation-outline-offset);
 
     &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
       /* background-color: var(--_status-color); */
       outline: var(--form-control-focus-outline-width) solid var(--_status-color);
       outline-offset: var(--form-control-focus-outline-offset);

package/src/css/text.css

@@ -19,7 +19,11 @@ a {
 }
 
 a, .btn-link {
-  &:focus, &:focus-visible {
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
     outline: 1px solid color-mix(in srgb, var(--link-color) 60%, transparent);
     outline-offset: 2px;
   }

package/src/utilities/dom-builder/dom-builder.js

@@ -0,0 +1,184 @@
+import { domBuilderBasicSetup } from './domBuilderBasicSetup.js';
+import { parseDomString } from './parseDomString.js';
+
+// TODO sintassi stringa su più righe in cui ogni riga corrisponde ad un elemento
+// TODO sintassi stringa come il precedente, ma con possibilità di indicare una nidificazione (indent?)
+
+/**
+ * domBuilder
+ * Costruisce una struttura DOM a partire da un array di configurazione.
+ *
+ * La funzione analizza un array di oggetti di configurazione per creare elementi HTML.
+ *
+ * **Formato della Struttura di Configurazione (structureArray):**
+ *
+ * L'array `structureArray` può contenere stringhe (con sintassi abbreviata) e/o oggetti di configurazione:
+ *
+ * ```javascript
+ * structure = [
+ *   '#mainContainer.container',
+ *   'p#main-info.info.active{data-id:123,role=button} Lorem ipsum',
+ *   {
+ *     tag: 'div' | ['.divClass', 'h2#id', 'table.class1', 'thead', 'tr.class2.class3(attr1: attrValue)'], // anche tagName
+ *     className: 'xxx' | ['class1', 'class2'], // anche `class`
+ *     id: 'element-id',
+ *     attrs: [attr_name, attr_value] | [[...], [...]] | {name: value},
+ *     content: 'xxx' | 123 | function | Element,
+ *     condition: true | false,
+ *     callback: el => ...,
+ *     children: [...]
+ *   },
+ *   'div.class[data-xxx: value]',
+ *   '.another-div',
+ *   'p#paragraph''
+ *   '...',
+ *   { ... }
+ * ]
+ * ```
+ *
+ * id e classi possono essere specificati sia chiave dell'oggetto di configurazione che all'interno dell'oggetto `attrs`
+ * In caso di conflitto, prevalgono quelli indicati al livello principale.
+ *
+ * È inoltre possibile utilizzare una versione "abbreviata" utilizzando una stringa costruita secondo la sintassi di `parseDomString`.
+ * Vedi `parseDomString` per altre in.formazioni.
+ *
+ * Questo tipo di sintassi non prevede la possibilità di definire `content`, `callback`, `condition` e `children`: in questi casi è necessario utilizzare la sintassi di base.
+ *
+ * La sintassi abbreviata può essere utilizzata anche con l'elemento `tag` della sintassi ad oggetti.
+ * È possibile definirlo come array in cui ogni elemento corrisponde al genitore del successivo. Eventuali altre proprietà dell'oggetto
+ * (className, callback, ecc.) vengono applicate solo all'ultimo elemento dell'array.
+ * In caso di conflitto tra classi, id o attributi indicati nella stringa e quelli indicati nell'oggetto
+ * prevalgono questi ultimi.
+ *
+ * @function domBuilder
+ * @param {Array<Object|string>} [structureArray=[]] - Array di configurazione degli elementi. Può contenere stringhe (con sintassi abbreviata secondo `parseDomString`) e/o oggetti di configurazione.
+ * @param {string|Array<string>} [structureArray[].tag='div'] - Nome del tag HTML (es. 'div', 'p') o array di tag nidificati (es. ['div.container', 'section', 'article']).
+ * @param {string|Array<string>} [structureArray[].tagName='div'] - Alias di tag
+ * @param {string|Array<string>} [structureArray[].className] - Classe/i CSS: stringa singola o array di classi, in quest'ultimo caso, i valori *falsy* vengopno rimossi.
+ * @param {string|Array<string>} [structureArray[].class] - Alias di className.
+ * @param {string} [structureArray[].id] - ID univoco dell'elemento.
+ * @param {Array<[string, *]>|Array<Array<[string, *]>>|Object<string, *>} [structureArray[].attrs] - Attributi: coppia `[name, value]`, array di coppie o oggetto `{name: value}`.
+ * @param {string|number|Function|Element} [structureArray[].content] - Contenuto dell'elemento: stringa, numero, funzione che restituisce contenuto, o HTMLElement.
+ * @param {boolean} [structureArray[].condition=true] - Se false, l'elemento non viene generato.
+ * @param {Function} [structureArray[].callback] - Callback invocata quando l'elemento viene creato; riceve l'elemento come argomento.
+ * @param {Array<Object>} [structureArray[].children] - Array di configurazione per elementi figlio.
+ * @param {HTMLElement} [parent] - Elemento genitore al quale appendere la struttura.
+ * @param {Object} [options={}] - Opzioni di configurazione.
+ * @param {boolean} [options.emptyParent=true] - Se true, l'element parent indicato viene svuotato prima di procedere con ciclo builder
+ * @returns {HTMLElement|null} Il primo elemento creato, o null se nessun elemento è stato creato.
+ */
+
+
+export function domBuilder(structureArray = [], parent, options = {}) {
+
+  options = {
+    emptyParent: false,
+    ...options
+  };
+
+  let mainElement = null, el, grand_parent = null;
+
+  if(parent && options.emptyParent) {
+    parent.innerHTML = '';
+  }
+
+  structureArray.forEach(item => {
+
+    if(item != null && typeof item === 'string' && item !== '') {
+      item = parseDomString(item);
+    }
+
+    // console.log(item);
+
+    if (item != null && (item.condition ?? true)) {
+
+
+      // se tag è un array, vengono creati una serie di elementi nidificati
+      // l'ultimo è quello a cui vengono applicate le altre proprietà dell'oggetto in esame
+      if (Array.isArray(item.tag)) {
+
+        grand_parent = parent;
+
+        item.tag.forEach((tagItem, idx) => {
+
+          const isLast = idx === item.tag.length - 1;
+          const parsedItem = parseDomString(tagItem);
+
+          // nel caso dell'ultimo elemento, merge con le opzioni dell'oggetto
+          // con precedenza alle proprietà di quest'ultimo
+          if(isLast) {
+            item.attrs = {...parsedItem.attrs??{}, ...item.attrs??{}};
+          }
+          el = domBuilderBasicSetup(
+            document.createElement(parsedItem.tag || 'div'),
+            {...parsedItem, ...(isLast? item??{} : {})}
+          );
+
+          if (!isLast) { // l'ultimo elemento è gestito dalla procedura "standard"
+            if (parent) {
+              parent.appendChild(el);
+            }
+            parent = el;
+          }
+
+        });
+
+      } else {
+        el = domBuilderBasicSetup(
+          document.createElement(item.tag ?? 'div'),
+          item
+        );
+      }
+
+
+      if (item.content != null) {
+
+        let content = '';
+        if (typeof item.content === 'function') {
+          content = item.content();
+
+        } else if (item.content != null) {
+          content = String(item.content);
+        }
+
+        if (content instanceof Element) {
+          el.appendChild(content);
+
+        } else {
+          el.innerHTML = content;
+        }
+      }
+
+
+      if (item.children != null && !Array.isArray(item.children)) {
+        // eslint-disable-next-line no-console
+        console.error('Error: `item.children` must be an array → ' + item.children);
+      }
+      if (item.children && Array.isArray(item.children)) {
+        domBuilder(item.children, el, {emptyParent: false});
+      }
+
+      if (mainElement == null) {
+        mainElement = el;
+      }
+
+      if (parent) {
+        parent.appendChild(el);
+      }
+
+      // TODO callback che includano azioni relatuvi ai children dell'elemento potrebbero bìnon essere eseguiti in assenza di parent
+      if (item.callback && typeof item.callback === 'function') {
+        item.callback(el);
+      }
+
+      if (grand_parent) {
+        parent = grand_parent;
+      }
+    } // end if ((item.condition ?? true) && item != null)
+
+  }); // end forEach
+
+  return mainElement;
+}
+
+

package/src/utilities/dom-builder/domBuilderBasicSetup.js

@@ -0,0 +1,75 @@
+
+/**
+ * Esegue le operazione di base del domBuilder: assegnazione classi, id ecc...
+ */
+export function domBuilderBasicSetup (element, domBuilderItem) {
+
+  // classi
+  // possibili denominazioni: class o className
+  // se presente className, class viene ignorato
+  if (domBuilderItem.class && !domBuilderItem.className) {
+    domBuilderItem.className = domBuilderItem.class;
+  }
+
+  // se item.attrs è un array singolo viene trattato come singolo elemento
+  if (domBuilderItem.attrs && Array.isArray(domBuilderItem.attrs) && !Array.isArray(domBuilderItem.attrs[0])) {
+    domBuilderItem.attrs = [ domBuilderItem.attrs ];
+
+  // item.attrs può essere un oggetto del tipo {attr_name: attr_value}
+  } else if (typeof domBuilderItem.attrs === 'object' && !Array.isArray(domBuilderItem.attrs) && domBuilderItem.attrs !== null) {
+    domBuilderItem.attrs = Object.entries(domBuilderItem.attrs);
+  }
+
+  // gli attributi booleani non vengono aggiunti se il loro valore è false
+  const boolAttrs = [
+    'allowfullscreen',
+    'async',
+    'autocomplete',
+    'autofocus',
+    'autoplay',
+    'border',
+    'checked',
+    'compact',
+    'contenteditable',
+    'controls',
+    'default',
+    'loop',
+    'defer',
+    'disabled',
+    'formnovalidate',
+    'hidden',
+    'inert',
+    'ismap',
+    'multiple',
+    'muted',
+    'novalidate',
+    'open',
+    'readonly',
+    'required',
+    'reversed',
+    'selected',
+    'spellcheck',
+    'translate'
+  ];
+
+
+
+  (domBuilderItem.attrs ?? []).forEach(attr => {
+    if (attr[1] != null && !(boolAttrs.includes(attr[0]) && attr[1]=== false)) {
+      element.setAttribute(attr[0], String(attr[1]));
+    }
+  });
+
+  // assegnazioen classi e id (dopo attrs in modo che le proprietà a livello di oggetto prevalgano)
+  if(domBuilderItem.className) {
+    element.className = Array.isArray(domBuilderItem.className)
+      ? domBuilderItem.className.filter(Boolean).join(' ')
+      : domBuilderItem.className;
+  }
+  if(domBuilderItem.id) {
+    element.id = domBuilderItem.id;
+  }
+
+  return element;
+
+}

package/src/utilities/dom-builder/parseDomString.js

@@ -0,0 +1,105 @@
+/**
+ * Analizza una stringa per estrarre il nome del tag, l'ID, le classi e gli attributi.
+ *
+ * * Il formato della stringa atteso è:
+ *
+ * `tag#id.classe1.classe2.classeN(attributo1: valore1, attributo2=valore2) Lorem ipsum`
+ *
+ * In cui:
+ * * `tag` è il nome dell'elemento, se non specificato si assume che sia un `div`
+ * * `id` è l'id, facoltativo, da assegnare all'elemento, deve essere preeceduto da `#` e deve essere posizionato subito dopo il tag
+ * * `classe1, classe2...` sono le classi, facoltative, devono essere precedute da `.`
+ * * `(...)` è il blocco degli attributi, facoltativo. Oltre che dalle parentesi tonde, questa parte può essere delimitata dalle quadre e dalle graffe.
+ *   Ogni coppia _nome-valore_ va separata con `:` o `=`. Se presente solo il nome, si assume che il valore sia `true`.
+ * * `Lorem ipsum` indica un eventuale contenuto testuale, separato dal blocco precedente da uno spazio
+ *
+ * Restituisce un oggetto *child* domBuilder
+ *
+ * Esempio:
+ * > p#main-info.info.active{data-id:123,role=button} text content
+ *
+ * oppure
+ * > input#search-field[type=text,disabled]
+ *
+ * @param {string} domString La stringa DOM Builder da analizzare.
+ * @returns {{tagName: string, id: string, classes: string[], attributes: {[key: string]: string}}}
+ */
+
+export function parseDomString(domString) {
+
+  // versione con groups
+  // const regex = new RegExp(
+  //   /^(?<tag>[a-zA-Z]+)?/.source +                // tag
+  //   /(?:#(?<id>[a-zA-Z0-9_-]+))?/.source +        // id
+  //   /(?<classes>(?:\.[a-zA-Z0-9_-]+)*)?/.source + // classi
+  //   /(?<attrs>[([{].*?[)\]}])?/.source +          // attrs
+  //   /(?: +(?<content>.*))?$/.source               // content
+  // );
+
+  const regex = new RegExp(
+    /^([a-zA-Z]+)?/.source +            // tag
+    /(?:#([a-zA-Z0-9_-]+))?/.source +   // id
+    /((?:\.[a-zA-Z0-9_-]+)*)?/.source + // classi
+    /([([{].*?[)\]}])?/.source +        // attrs
+    /(?: +(.*))?$/.source               // content
+  );
+
+  const matches = domString.match(regex);
+
+
+  if (!matches) {
+    return null;
+  }
+
+  // Nuovi gruppi di cattura (match array):
+  // [0]: intera stringa
+  // [1]: Tag
+  // [2]: ID
+  // [3]: Classi
+  // [4]: Attributi (raw)
+  // [5]: content
+
+  const tag = (matches[1] || 'div').toLowerCase(),
+    id = matches[2]?.trim() || null,
+    classes = matches[3] ? matches[3].slice(1).split('.').map(c => c.trim()) : [],
+    rawAttrs = matches[4]?.trim() || null,
+    content =  matches[5]?.trim() || null
+  ;
+
+  // versione con uso di `groups`
+  // const tag = (matches.groups.tag || 'div').toLowerCase(),
+  //   id = matches.groups.id?.trim() || null,
+  //   classes = matches.groups.classes? matches[3].slice(1).split('.').map(c => c.trim()) : [],
+  //   rawAttrs = matches.groups.attrs?.trim() || null,
+  //   content =  matches.groups.content?.trim() || null
+  // ;
+
+  const attrs = {};
+  if (rawAttrs) {
+    const attrsContent = rawAttrs.substring(1, rawAttrs.length - 1);
+    const attrPairs = attrsContent.split(/\s*,\s*/);
+
+    attrPairs.forEach(pair => {
+      if (!pair) return;
+      if (pair.includes('=') || pair.includes(':')) {
+        const parts = pair.split(/[:=]/, 2),
+          name = parts[0]?.trim(),
+          value = parts[1] != null ? parts[1].trim() : true;
+
+        attrs[name] = value;
+
+      } else {
+
+        attrs[pair.trim()] = true;
+      }
+    });
+  }
+
+  return {
+    tag: tag,
+    id: id,
+    className: classes?.join(' '),
+    attrs: attrs,
+    content: content
+  };
+}