@massimo-cassandro/minimo 0.1.12 → 0.2.1

package/src/design-tokens-utilities/check-unresolved-custom-props.mjs

@@ -0,0 +1,131 @@
+#!/usr/bin/env node
+
+/* eslint-disable no-console */
+
+// rivela eventuale custom props css nei file della dir data non presenti nel file css di definizione
+// uso: node check-unresolved-custom-props.mjs --config ./path/to-config.mjs
+
+import path from 'path';
+import fs from 'node:fs';
+import { fileURLToPath, pathToFileURL } from 'url';
+import { dirname } from 'path';
+import { glob } from 'node:fs/promises';
+import { styleText, parseArgs } from 'node:util';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// 1. Configurazione e parsing dei flag
+const options = {
+  config: {
+    type: 'string',
+    short: 'c',
+  },
+  // Qui in futuro potrai aggiungere altri flag, es:
+  // verbose: { type: 'boolean', short: 'v' }
+};
+
+const { values } = parseArgs({ options });
+
+if (!values.config) {
+  console.error(styleText(['red'], 'Errore: Devi fornire il percorso del config con il flag --config o -c'));
+  console.log('Esempio: node check-unresolved-custom-props.mjs --config ./config.mjs');
+  process.exit(1);
+}
+
+const absoluteConfigPath = path.resolve(process.cwd(), values.config);
+const configDir = path.dirname(absoluteConfigPath);
+
+async function run() {
+  try {
+
+    const { default: config } = await import(pathToFileURL(absoluteConfigPath).href);
+console.log(config);
+    const custom_prop_file_path = path.resolve(configDir, path.join(config.buildPath, config.destFile));
+    const custom_prop_filename = path.basename(custom_prop_file_path);
+    const checkdir = path.resolve(configDir, config.dir_to_check);
+    const exclude = config.exclude_pattern;
+
+    const files = [];
+    for await (const entry of glob(path.join(checkdir, '/**/*.css'))) {
+      if (!entry.endsWith(custom_prop_filename)) {
+        files.push(entry);
+      }
+    }
+
+    if (!fs.existsSync(custom_prop_file_path)) {
+      throw new Error(`File delle proprietà non trovato: ${custom_prop_file_path}`);
+    }
+
+    // lista custom props definiti
+    const cssContent = fs.readFileSync(custom_prop_file_path, 'utf-8');
+    const regex = /--([a-z0-9-]+)(?=\s*:)/g;
+    const propertyNamesList = [...cssContent.matchAll(regex)].map(match => `--${match[1]}`);
+    // extra_custom_props_files 
+
+    (config.extra_custom_props_files??[]).forEach(extraCustomePropsFile => {
+      
+      const extraCustomPropsContent = fs.readFileSync(
+        path.resolve(configDir, extraCustomePropsFile), 
+      'utf-8');
+
+      const extraMatches = [...extraCustomPropsContent.matchAll(regex)].map(match => `--${match[1]}`);
+      propertyNamesList.push(...extraMatches);
+    });
+
+  
+
+    // rilevamento custom props nei vari file css
+    const regex2 = /var\(\s*(--[a-z0-9-]+)\s*(,.*?)?\)/g;
+    const unresolved_props = [];
+    const check = []; // per controllo aggiuntivo esecuzione
+
+    files.forEach(file => {
+      const fileContent = fs.readFileSync(file, 'utf-8');
+      // const filename = path.relative(checkdir, file);
+      const filename = path.relative(configDir, file);
+      const matches = [...fileContent.matchAll(regex2)];
+
+      matches.forEach(match => {
+        const cprop = match[1];
+        const isExcluded = exclude.some(exRegex => exRegex.test(cprop));
+        const isDefined = propertyNamesList.includes(cprop);
+
+        const lineNumber = fileContent.substring(0, match.index).split('\n').length;
+        if (!isExcluded && !isDefined) {
+          // unresolved_props.push(`${filename}:${lineNumber} -> var(${cprop})`);
+          unresolved_props.push({file: filename, line: lineNumber, prop: cprop});
+        }
+
+        check.push(`${filename}:${lineNumber} - ${cprop} - unresolved: ${(!isExcluded && !isDefined) ? 'Y' : 'N'}`);
+      });
+    });
+
+    unresolved_props.sort((a,b) => a.file.localeCompare(b.file));
+
+
+    const result_file = path.resolve(configDir, 'unresolved-props.md');
+
+    console.log(styleText(['green'], 
+      `${unresolved_props.length} custom properties non impostate ` +
+      `-> ${path.relative(process.cwd(), result_file)}`)
+    );
+
+    // Output
+    fs.writeFileSync(result_file, unresolved_props
+      .map(item => `* [${path.basename(item.file)} :: ${item.line}](${item.file}#L${item.line}) -> var(${item.prop})`)
+      .join('\n'), 'utf-8');
+    
+    // fs.writeFileSync(path.resolve(configDir, 'full-result.txt'), check.join('\n'), 'utf-8');
+
+
+    console.log(styleText(['green'], '**** FINE ****'));
+
+  } catch (err) {
+    console.log(styleText(['redBright'], err.stack));
+    // console.error(styleText(['red'], `Errore: ${err.message}`));
+    process.exit(1);
+  }
+}
+
+run();

package/src/design-tokens-utilities/config-templates/tokens-config.mjs

@@ -0,0 +1,34 @@
+
+import { homedir } from 'os';
+import path from 'path';
+
+// TODO spostare percorsi minimo su node modules
+const minimo_path = path.resolve(homedir(), 'Sites/minimo/src');
+
+// path relativi a questo file
+
+const config = {
+  // build tokens
+  stylelintConfigPath: '../../stylelint.config.mjs',
+  buildPath: '../src/css', // dir in cui salvare il file generato da style dictionary
+  destFile: 'custom-properties.css', // nome del file generato da style dictionary
+  // tokens files
+  source: [
+    // '../../node_modules/open-props/open-props.style-dictionary-tokens.json',
+    path.join(minimo_path, 'design-tokens/*.jsonc'),
+    path.join(minimo_path, 'components/**/*.tokens.jsonc'),
+    path.join(minimo_path, 'web-components/**/*.tokens.jsonc'),
+    './figma-tokens-OK/*.jsonc',
+  ],
+
+  // eventuali file aggiuntivi con custim props utilizzate nel progetto
+  extra_custom_props_files: [
+    // '../../node_modules/open-props/open-props.min.css'
+  ],
+  dir_to_check: '../../src', // percorso della dir che include i css da analizzare
+  exclude_pattern: [ // patterns per l'esclusione dal controllo di alcune custom props
+    /^--_/,
+  ]
+};
+
+export default config;

package/src/design-tokens-utilities/readme.md

@@ -0,0 +1,16 @@
+```json
+{
+  "build tokens": "node ~/Sites/minimo/utilities/build-tokens.mjs --config ./path/to/tokens-config.mjs",
+  "check unresolved props": "node ~/Sites/minimo/utilities/check-unresolved-custom-props.mjs --config ./path/to/tokens-config.mjs"
+}
+```
+
+```bash
+ln -s ~/Sites/minimo/src dest/_minimo-alias
+```
+
+## TODO
+
+* <https://github.com/georgeadamson/postcss-merge-selectors>
+* <https://medium.com/@ashusingh584/chokidar-11290855e2cb>
+* <https://github.com/xtivia/style-dictionary-watcher>

package/src/fonts-template.css

@@ -0,0 +1,7 @@
+/*
+  https://fontsource.org/fonts/rethink-sans/install
+
+*/
+
+@import '@fontsource-variable/rethink-sans/wght.css';
+@import '@fontsource-variable/rethink-sans/wght-italic.css';

package/src/index-template.css

@@ -15,7 +15,11 @@
 @import '@minimo/css/container.css';
 
 /* @import '@minimo/css/forms/forms.css'; */
-/* @import '@minimo/css/forms/form-edit-info.css'; */
+/* @import '@minimo/css/forms/fieldset.css'; */
+/* @import '@minimo/css/forms/form-group.css'; */
+/* @import '@minimo/css/forms/input-group.css'; */
+/* @import '@minimo/css/forms/validation.css'; */
+/* @import '@minimo/css/forms/form-utilities.css'; */
 @import '@minimo/css/buttons/buttons.css';
 /* @import '@minimo/css/buttons/status-buttons.css'; */
 /* @import '@minimo/css/buttons/btn-close.css'; */
@@ -26,19 +30,10 @@
 /* @import '@minimo/css/icons.css'; */
 @import '@minimo/css/svg.css';
 @import '@minimo/css/overlay.css';
-/* @import '@minimo/css/inner-nav.css'; */
 /* @import '@minimo/css/table.css'; */
 /* @import '@minimo/css/flex.css'; */
 /* @import '@minimo/css/grid.css'; */
 /* @import '@minimo/css/details.css'; */
-
-/* spinner attivarne uno solo + spinner-wrapper */
-@import '@minimo/css/spinners/spinner-wrapper.css';
-/* @import '@minimo/css/spinners/spinner-trailing-dots.css'; */
-/* @import '@minimo/css/spinners/spinner-three-dots.css'; */
-/* @import '@minimo/css/spinners/spinner-circle.css'; */
-@import '@minimo/css/spinners/spinner-circle-basic.css';
-
 /* @import '@minimo/css/utilities.css'; */
 
 

package/src/index.js

@@ -0,0 +1 @@
+export { classnames } from './utilities/classnames.js';

package/src/utilities/classnames.js

@@ -0,0 +1,3 @@
+export function classnames(...args) {
+  return args.filter(Boolean).join(' ');
+}

package/src/web-components/simple-datatable/icons/arrow-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M205.66 149.66l-72 72a8 8 0 0 1-11.32 0l-72-72a8 8 0 0 1 11.32-11.32L120 196.69V40a8 8 0 0 1 16 0v156.69l58.34-58.35a8 8 0 0 1 11.32 11.32z"/></svg>

package/src/web-components/simple-datatable/icons/arrow-up.svg

@@ -0,0 +1,2 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path d="M205.66 117.66a8 8 0 0 1-11.32 0L136 59.31V216a8 8 0 0 1-16 0V59.31l-58.34 58.35a8 8 0 0 1-11.32-11.32l72-72a8 8 0 0 1 11.32 0l72 72a8 8 0 0 1 0 11.32z"/></svg>

package/src/web-components/simple-datatable/icons/arrows-down-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path d="M117.66 170.34a8 8 0 0 1 0 11.32l-32 32a8 8 0 0 1-11.32 0l-32-32a8 8 0 0 1 11.32-11.32L72 188.69V48a8 8 0 0 1 16 0v140.69l18.34-18.35a8 8 0 0 1 11.32 0zm96-96l-32-32a8 8 0 0 0-11.32 0l-32 32a8 8 0 0 0 11.32 11.32L168 67.31V208a8 8 0 0 0 16 0V67.31l18.34 18.35a8 8 0 0 0 11.32-11.32z"/></svg>

package/src/web-components/simple-datatable/icons/caret-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"></path></svg>

package/src/web-components/simple-datatable/icons/caret-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg>

package/src/web-components/simple-datatable/icons/check-bold.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path></svg>

package/src/web-components/simple-datatable/icons/x-bold.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"></path></svg>

package/src/web-components/simple-datatable/simple-datatable.js

@@ -0,0 +1,219 @@
+
+import { DataTable } from 'simple-datatables';
+// import { classnames } from '@massimo-cassandro/js-utilities/index.js';
+
+import { parseCols } from './src/parse-cols.js';
+
+import * as styles from './simple-datatable.module.css';
+
+import caretLeftIcon from './icons/caret-left.svg?inline';
+import caretRightIcon from './icons/caret-right.svg?inline';
+
+// TODO possibilità di definizione cols anche da js. In questo caso, in presenza ANCHE dell'attributo, deve prevalere quest'ultimo
+
+// https://fiduswriter.github.io/simple-datatables/documentation/
+
+class SimpleDatatable extends HTMLElement {
+  constructor() {
+    super();
+    // this.attachShadow({ mode: 'open' }); // commentare per light dom
+  }
+
+
+  // implementare se necessario modificare gli attributi nel runtime
+  /*
+  static get observedAttributes() {
+    return ['icon', 'variant', 'size', 'url'];
+  }
+
+  attributeChangedCallback() {}
+  */
+
+
+  async connectedCallback() {
+    this.innerHTML = '<div class="spinner"><span class="visually-hidden">Caricamento dati...</span></div>';
+
+    const jsonUrl = this.getAttribute('json') || null,
+      cols = JSON.parse(this.getAttribute('cols')?? {});
+
+    try {
+      const response = await fetch(jsonUrl),
+        json_data = await response.json();
+
+      this.headings = cols.map(item => item._title? `<abbr title="${item._title}">${item._heading}</abbr>` : item._heading);
+
+      this.data = json_data.data.map((row, idx) => {
+
+        // riga datatable
+        return {
+          attributes: {'data-jidx': idx}, // indice della riga dati nel json originale
+
+          cells: cols.map((col_item, col_idx) => {
+
+            let value = row[col_item._field];
+            // let order = null;
+
+            // ------------------
+            // elaborazione _renderTpl -> aggiunta id e/o altri riferimenti a campi della riga.
+            // necessario farlo così, perché simple-datatable non permette l'accesso ai dati di riga
+            // durante il render delle celle, i riferimenti vanno quindi risolti al momento di elaborare i dati
+            if(col_item._renderTpl) {
+              const this_value = decodeURIComponent(col_item._renderTpl).replace(/\[\[(.*?)\]\]/g, (match, key) => {
+
+                if(row[key] == null) {
+                  // eslint-disable-next-line no-console
+                  console.error(`[s-datatable] Chiave “${key}” non trovata (colonna ${col_idx})`);
+                }
+                return row[key]?? '{{' + key + '}}';
+              });
+
+              value = this_value;
+              // order = row[col_item._field];
+            }
+            // ------------------
+
+            // conversione date symfony in ISO8601
+            else if(col_item._renderMode === 'sf_datetime' && value != null) {
+              value = value.date.replace(' ', 'T') +
+                (value.timezone === 'UTC'? 'Z' : '');
+            }
+
+            return value; //{text: value, ...(order? {order: order} : {})};
+          })
+        };
+      });
+
+      this.columns = cols.map((col_settings, idx ) => {
+
+        // pre-elaborazione tipi predefiniti
+        col_settings = parseCols(col_settings);
+
+        const col_obj = {
+          ...(Object.fromEntries(
+            Object.entries(col_settings).filter(([key]) => !key.startsWith('_'))
+          )),
+          select: idx,
+          type: col_settings.type?? 'string',
+          searchable: col_settings.searchable?? true,
+          sortable: col_settings.sortable?? true,
+        };
+
+        return col_obj;
+      });
+
+      // console.log('json_data', json_data);
+      // console.log('cols', cols);
+      // console.log('columns', this.columns);
+      // console.log('data', this.data);
+
+    } catch(err) {
+      /* eslint-disable no-console */
+      console.error(jsonUrl);
+      console.error(err);
+      /* eslint-enable no-console */
+    }
+
+    this.render();
+  }
+
+  // approccio per eventuale modifica degli attributi nel runtime
+  // set variant(val) {this.setAttribute('variant', val);} get variant(val) {return this.getAttribute('variant')}
+
+  render() {
+    this.innerHTML = '';
+    const table = document.createElement('table');
+    this.appendChild(table);
+
+    // https://fiduswriter.github.io/simple-datatables/documentation/Options
+    const dt = new DataTable(table, {
+      locale: 'it',
+      searchable: true,
+      sortable: true,
+      fixedHeight: false,
+      fixedColumns: false,
+      paging: true,
+      perPage: +this.getAttribute('perPage') || 25,
+      pagerDelta: 2,
+      perPageSelect: false,
+
+      labels: {
+        placeholder: 'Cerca...',
+        searchTitle: 'Cerca nella tabella',
+        pageTitle: 'Pagina {page}',
+        perPage: 'Righe per pagina',
+        noRows: 'Nessun record trovato',
+        info: 'Stai visualizzando le righe da {start} a {end}, su un totale di {rows}',
+        noResults: 'Nessun risultato per la ricerca',
+      },
+      classes: {
+        wrapper                 : styles.datatableWrapper,
+        container               : 'table-responsive',
+        loading                 : 'datatable-loading', // ??
+
+        // barra superiore
+        top                     : styles.topArea,
+        search                  : styles.searchWrapper,
+        input                   : 'form-control form-control-sm',
+        // dropdown         : 'datatable-dropdown', // selettore righe per pagina, disattivato
+
+        empty                   : styles.empty,
+
+        // table
+        table                   : `table table-bordered ${styles.table}`,
+        // buttons in thead per il sort
+        sorter                  : `btn-reset ${styles.sortBtn}`,
+        ascending               : styles.sortAscending,
+        descending              : styles.sortDescending,
+
+        // area inferiore
+        bottom                  : styles.bottomArea,
+        // info text
+        info                    : styles.info,
+
+        // pagination
+        // pagination           : styles.paginationNav,
+        paginationList          : styles.paginationList,
+        paginationListItem      : styles.paginationListItem,
+        paginationListItemLink  : styles.paginationListItemBtn,
+        // hidden                  : 'datatable-hidden',
+        disabled                : styles.paginationDisabled,
+        active                  : styles.paginationActive,
+
+        // cursor: 'datatable-cursor',
+        // dropdown: 'datatable-dropdown',
+        // ellipsis: 'datatable-ellipsis',
+        // filter: 'datatable-filter',
+        // filterActive: 'datatable-filter-active',
+        // headercontainer: 'datatable-headercontainer',
+        // selector: 'datatable-selector',
+      },
+
+      columns: this.columns,
+      data: {
+        headings: this.headings,
+        data: this.data
+      }
+    });
+
+    dt.on('datatable.init', () => {
+      const pagination = this.querySelector(`.${styles.paginationList}`);
+
+      if(pagination.querySelectorAll(`.${styles.paginationListItem}`).length) {
+
+        pagination.querySelector(`.${styles.paginationListItem}:first-child .${styles.paginationListItemBtn}`)
+          .innerHTML = caretLeftIcon;
+
+        pagination.querySelector(`.${styles.paginationListItem}:last-child .${styles.paginationListItemBtn}`)
+          .innerHTML = caretRightIcon;
+
+        pagination.querySelectorAll(`.${styles.paginationListItemBtn}:has(svg)`)
+          .forEach(btn => btn.classList.add(styles.hasSvg));
+      }
+    });
+
+  } // end render
+} // end component
+
+if (!customElements.get('s-datatable')) {
+  customElements.define('s-datatable', SimpleDatatable);
+}

package/src/web-components/simple-datatable/simple-datatable.minimo.tokens.jsonc

@@ -0,0 +1,50 @@
+{
+  "sdt": {
+
+    "thead": {
+      "hover": {
+        "background": {
+          "color": {
+            "$value": "color-mix(in srgb, {table.thead.background.color} 90%, {accent.base})",
+            "$type": "color"
+          }
+        }
+      }
+    },
+
+    "pagination": {
+      "border": {
+        "$type": "border",
+        "$value": {
+          "color": "{neutral.base}",
+          "width": "{btn.border.width}",
+          // "style": "solid"
+        }
+      },
+      "padding": {
+        "block": {
+          "$value": "{size.xxs}",
+          "$type": "dimension"
+        },
+        "inline": {
+          "$value": "{size.xs}",
+          "$type": "dimension"
+        },
+      }
+    },
+    "hover": {
+      "background": {
+        "color": {
+          "$value": "{btn.primary.background.color}",
+          "$type": "color"
+        }
+      },
+      "color": {
+        "$value": "{btn.primary.color}",
+        "$type": "color"
+      }
+
+    }
+  }
+
+}