@massimo-cassandro/minimo 1.8.4 → 1.9.1

package/dev-tools/create-favicons/src/print-frame.mjs

@@ -0,0 +1,56 @@
+/* eslint-disable no-console */
+
+// https://nodejs.org/api/util.html#utilstyletextformat-text-options
+import { styleText } from 'node:util';
+
+export function log(color, string, mode='log') {
+  console[mode]( styleText(color, string) );
+}
+
+export function printFrame(options) {
+
+  /*
+    stringsArray = [
+      {string: '__string__', color: 'green', bg: false, bold: false, underline: false},
+      {...}
+    ]
+  */
+
+  const defaults = {
+      strings: [],
+      frameColor: 'green',
+      frametype: 'single'
+    },
+    string_defaults = { string: '', color: 'green', bg: false, bold: false, underline: false},
+    frame_lines = {
+      single: ['┌', '┐', '└', '┘', '┈', '│'],
+      double: ['╔', '╗', '╚', '╝', '═', '║']
+    };
+
+  options = {...defaults, ...options};
+
+  const frames_elements = frame_lines[options.frametype];
+
+  options.strings = options.strings.map(item => {return {...string_defaults, ...item }; });
+
+  // aggiunta spazi sulle righe `bg`
+  options.strings.forEach(item => {
+    if(/^bg/.test(item.color)) {
+      item.string = ` ${item.string} `;
+    }
+  });
+
+  const total_length = Math.max( ...(options.strings.map(item => item.string.length)) ) + 2;
+
+  log( options.frameColor, `\n${frames_elements[0]}` + frames_elements[4].repeat(total_length) + frames_elements[1] );
+
+  options.strings.forEach(item => {
+    console.log(
+      styleText(options.frameColor, `${frames_elements[5]} `) +
+      styleText(item.color, item.string)  + ' '.repeat(total_length - item.string.length - 2) +
+      styleText(options.frameColor, ` ${frames_elements[5]}`)
+    );
+  });
+
+  log(options.frameColor, frames_elements[2] + frames_elements[4].repeat(total_length) + `${frames_elements[3]}\n` );
+}

package/dev-tools/create-favicons/src/print-result.mjs

@@ -0,0 +1,60 @@
+import { printFrame } from './print-frame.mjs';
+import { remove_homedir_string } from './remove-homedir-string.mjs';
+import * as fs from 'fs';
+
+
+export function printResult(params) {
+
+  function printSize(size) {
+    if(size > 1024) {
+      return `${(size / 1024).toFixed(2)} KB`;
+    } else {
+      return `${size} B`;
+
+    }
+  }
+
+  // print result
+  let extra_strings = [];
+
+  // immagini generate e dimensioni
+  [
+    'apple-touch-icon.png',
+    'favicon.ico',
+    'favicon.svg',
+    'icon-192.png',
+    'icon-512.png',
+    params.manifest_file_name
+  ].forEach(item => {
+    const stats = fs.statSync(`${params.output_dir}/${item}`);
+    extra_strings.push({string: `${item}: ${printSize(stats.size)}`, color: 'greenBright'});
+  });
+
+  if(params.snippet_path  !== params.output_dir && params.snippet_name !== null) {
+    extra_strings.push(
+      {string: ''},
+      {string: `Il file snippet '${params.snippet_name}' è stato salvato nella directory:`, color: 'green'},
+      {string: remove_homedir_string(params.snippet_path ), color: 'yellow'},
+    );
+
+  } else if(params.snippet_name === null) {
+    extra_strings.push(
+      {string: ''},
+      {string: 'Il file snippet non è stato generato', color: 'magentaBright'},
+    );
+  }
+
+
+  printFrame({
+    strings: [
+      {string: '** Creazione favicons completata **', color: 'bgGreen'},
+      {string: ''},
+      {string: 'I file generati sono nella directory:', color: 'green'},
+      {string: remove_homedir_string(params.output_dir), color: 'yellow'},
+      {string: ''},
+      ...extra_strings
+    ],
+    frameColor: 'green',
+    frameType: 'single'
+  });
+}

package/dev-tools/create-favicons/src/remove-homedir-string.mjs

@@ -0,0 +1,9 @@
+// rimuove la porzione homedir da un path e la sostituisce con '~'
+
+import {homedir} from 'os';
+
+export function remove_homedir_string(path) {
+  const homeDirRegex = new RegExp('^' + homedir());
+
+  return path.replace(homeDirRegex, '~');
+}

package/dev-tools/svg-icons-tools/README.md

@@ -0,0 +1,75 @@
+# Svg Icons Tools
+
+Svg Icons Tools provides some utilities for manage and optimize SVG icons:
+
+* optimize all files with [SVGO](https://svgo.dev/)
+* combine svg files into a single file, where each icon is wrapped within a `<symbol>` element (inspired from [svgstore](https://github.com/svgstore/svgstore)) 
+* convert svg files to JSX
+* copy optimized svg files to target directory
+* removes *pallets* from the icon markups (see config file for more details).
+* create a scss file with svg icons converted to sass variables
+* jsx and optimized icons only: ability to manage both icons with `fill` and `stroke` adding optional classes to apply different css properties
+
+These tools are pretty useless if you download your icons from one of the libraries you can find on the web, but if you design them yourself, *svg-icons-tools* can save you a lot of time in cleaning up and optimizing icons drawn with Illustrator, Figma, Sketch etc.
+
+Also, most (or all) libraries only allow you to download icons with a fixed thickness, but you can often download "working" versions where thickness is defined by the stroke attribute. In these cases there is often a *pallet* that you can easily remove.
+
+Read more in my [Building an Icon System in React](https://medium.com/better-programming/building-an-icon-system-in-react-16757d73cc35) article.
+
+## Installation
+
+```bash
+npm i -D @massimo-cassandro/svg-icons-tools
+```
+
+## Setup
+
+First, create a config file for you project, you can run:
+
+```bash
+npx iconsTools init
+```
+
+This creates a `svg-icons-tools` directory which contains the `svg-icons-tools.config.mjs` configuration file.
+
+Rename the folder as you like and move it where you need. Then open and customize the `svg-icons-tools.config.mjs` file.
+
+## Run
+
+To launch the script, open your terminal and use the command:
+
+```bash
+npx iconsTools --config ./path/to/svg-icons-tools.config.mjs
+```
+
+where `--config` must contain the path, relative to the current dir, to the config file.
+
+If the `--config` parameter is not set, the script will look for the configuration file in the current directory; if the file is not found, an error will be thrown.
+
+
+## Configuration details
+
+See [src/default-config.mjs](src/default-config.mjs) for more info.
+
+## Demo
+
+See [demo/readme](demo/readme.md).
+
+## TODO
+* documentation to jsdoc
+* prettify the jsx output (update docs)
+* SVG attributes to jsx (upd doc)
+* option to clean-up dest folder for jsx and optimized (?)
+* auto changelog
+
+
+## Changelog / Breaking Changes
+
+### 1.1
+* added default jsx icon builder function
+
+#### Breaking Changes
+* in config file, `config.jsx.icon_builder` becomes `config.jsx.custom_icon_builder`, if not defined the default icon builder is used for jsx files.
+
+### 1.0
+* First production release

package/dev-tools/svg-icons-tools/index.mjs

@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+import * as process from 'process';
+import * as fs from 'fs';
+import * as path from 'path';
+
+import { init } from './src/init.mjs';
+import { homedir_path_to_tilde } from './src/homedir-path-to-tilde.mjs';
+// import default_config from './src/default-config.mjs';
+import { configManager } from './src/config-manager.mjs';
+import { start } from './src/start.mjs';
+import { printResult } from './src/print-result.mjs';
+
+try {
+
+  // init: creazione file cfg base
+  if(process.argv.indexOf('init') !== -1) {
+
+    init(process.cwd());
+
+  } else {
+
+    let config_file = './svg-icons-tools.config.mjs';
+
+
+    if(process.argv.indexOf('--config') !== -1) {
+      config_file = path.resolve(process.cwd(), process.argv[process.argv.indexOf('--config') + 1].trim());
+    }
+
+    if(!config_file) {
+      throw new Error('Missing config file path');
+    }
+
+    config_file = new URL(config_file, import.meta.url).pathname;
+    const work_dir = path.dirname(config_file);
+
+    if(!fs.existsSync(config_file)) {
+      throw new Error(`Config file not found: ${homedir_path_to_tilde(config_file)}`);
+    }
+
+    import(config_file).then((custom_cfg) => {
+
+      configManager.updCfg({ ...custom_cfg.default, work_dir: work_dir});
+
+      start();
+    });
+
+  }
+
+} catch(err) {
+  printResult(err, 'error');
+}

package/dev-tools/svg-icons-tools/src/config-manager.mjs

@@ -0,0 +1,23 @@
+import default_config from './default-config.mjs';
+
+
+export const configManager = {
+
+  cfgObj: default_config,
+
+  updCfg: function(cfg) {
+    this.cfgObj = { ...this.cfgObj, ...cfg };
+
+    // deep merge of cfg objects
+    Object.keys(default_config).forEach((key) => {
+      if (default_config[key] && typeof default_config[key] === 'object' && !Array.isArray(default_config[key])) {
+        this.cfgObj[key] = { ...default_config[key], ...this.cfgObj[key] };
+      }
+    });
+  },
+
+  getCfg: function() {
+    return this.cfgObj;
+  }
+
+};

package/dev-tools/svg-icons-tools/src/create-dest-folder.mjs

@@ -0,0 +1,20 @@
+import { printResult } from './print-result.mjs';
+import { rm, mkdir } from 'fs/promises';
+
+export async function create_dest_folder(folder_path, removeIfExists = true) {
+  try {
+    if (removeIfExists) {
+      // Rimuovi la cartella se esiste
+      await rm(folder_path, { recursive: true, force: true });
+      printResult(`dir ${folder_path} cleared`, 'infoDim');
+    }
+    // Ricrea la cartella (se già esiste non dà errore grazie a recursive: true)
+    await mkdir(folder_path, { recursive: true });
+    printResult(`dir ${folder_path} created`, 'infoDim');
+
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error(err);
+    throw err;
+  }
+}

package/dev-tools/svg-icons-tools/src/default-config.mjs

@@ -0,0 +1,343 @@
+/**
+ * svg-icons-tools configuration file
+ * ----------------------------
+ * all paths relative to the work directory
+ *
+ * More info at https://github.com/massimo-cassandro/svg-icons-tools
+ *
+ * run with (from the svg-icons-tools work dir): `npx iconsTools`
+ * or specifing a path for the config file: `npx iconsTools --config path/to/config.mjs`
+ *
+ * All paths in this config object are relative to the folder containing the config file
+ *
+ */
+
+const config = {
+
+  /**
+   * SVG to JSX components
+   */
+  jsx: {
+    /**
+     * Source folders
+     *
+     * Every file with svg extension in these folders will be processed
+     * Sub dirs are ignored.
+     * the `fill` array must contains the icons that use the `fill` attribute
+     * similarly, the `stroke` one must contains the icons that use the `stroke` attribute
+     * It is possible to manage both types of icons at the same time, otherwise leave
+     * them empty or remove the ones you don't need.
+     * If you don't need this feature, just remove the whole `jsx` object
+     */
+    source_folders: {
+      fill: [],
+      stroke: []
+    },
+
+    /**
+     * Custom function to create each JSX icon file
+     *
+     * If not defined, the default function will be used.
+     * See `src/jsx-icon-file-builder.mjs` for more details about function argument and values to be returned
+     *
+     * @example
+     * custom_icon_builder: (parsed_svg) => { ... your code ... }
+     */
+    custom_icon_builder: null,
+
+    /* path to the folder where the jsx components will be saved */
+    dest_folder: '',
+
+    /**
+     * Clear dest_folder folder before save new files
+     */
+    clearDestFolder: false,
+
+
+    /**
+     * path to jsx icons index file
+     *
+     * Optional file that contains all generated icons as named exports.
+     * Leave empty o remove if you don't need it
+     */
+    index_file: '',
+
+    /** if not null, overrides the global `svgo_config` */
+    svgo_config: null
+  },
+
+  /**
+   * svg file to be optimized
+   */
+  optimize: {
+    /**
+     * Source folders
+     *
+     * See comment at `jsx` for more details
+     * Leave empty  or remove the whole `optimize` obj if you don't need this feature
+     */
+    source_folders: {
+      fill: [],
+      stroke: []
+    },
+
+    /* path to the folder where the optimized files will be saved */
+    dest_folder: '',
+
+    /**
+     * Clear dest_folder folder before save new files
+     */
+    clearDestFolder: false,
+
+    /** if not null, overrides the global `svgo_config` */
+    svgo_config: null
+  },
+
+  /**
+   * SVG as symbols
+   *
+   * Parameters to combine many svg files into a single svg file with symbols
+   * If you don't need this feature, just remove the `symbols` object or leave paths empty
+   */
+  symbols: {
+    /**
+     * Source folders
+     *
+     * Every file with svg extension in these folders will be processed
+     * Sub dirs are ignored.
+     * Leave empty  or remove the whole `symbols` obj if you don't need this feature
+     *
+     * NB: stroke and fill icons are handled by adding some classes to the `symbol` tag.
+     * The same goes for non-square icons.
+     * Adding classes to the `symbol` tag is useful for styling icons with css,
+     * but it is not a well documented feature and may not work as expected in all browsers.
+     * Be aware of this if you plan to use this feature.
+     */
+    source_folders: {
+      fill: [],
+      stroke: []
+    },
+
+    /* path of the processed svg file */
+    dest_file: '',
+
+    /* if true, the xml declaration (`<?xml version...`) is added to the resulting file */
+    add_xml_declaration: true,
+
+    /* if true, the svg doctype (`<!DOCTYPE svg PUBLIC...`) is added to the resulting file */
+    add_svg_doctype: false,
+
+    /* if true, the `hidden` attribute is added to the svg tag of the resulting file */
+    add_hidden_attribute: true,
+
+    /**
+     * optional path to the js file that will contain the list of icons converted as symbols.
+     *
+     * Leave empty if you don't need it
+     *
+     * @example
+     * icons_list_file: './path/to/icons-list.js',
+     */
+    icons_list_file: '',
+
+    /**
+     * optional template for building the icons demo file
+     *
+     * A basic tpl file is provided when the script is launched with `init` option:
+     * you can customize it as you like.
+     * If you don't need this feature, remove the tpl file and leave empty or remove
+     * the `demo_tpl_path` parameter
+     *
+     * @example
+     * demo_tpl_path: './path/to/symbols-demo-tpl.html',
+     */
+    demo_tpl_path: '',
+
+    /**
+     * optional path for generated demo file
+     *
+     * It includes the list of icons converted as symbols and the symbols file itself,
+     * so it can be viewed in a browser using the `file:///` protocol.
+     * Requires the `demo_tpl_path` parameter to be set.
+     * Leave this parameter empty if you don't need it
+     *
+     * @example
+     * demo_file_path: './symbols-demo.html',
+     */
+    demo_file_path: '',
+
+    /** if not null, overrides the global `svgo_config` */
+    svgo_config: null
+  },
+
+
+  /**
+   * GLOBAL PARAMETERS
+   *
+   * These parameters are used in all the features
+   */
+
+  /*
+   * prefixes of the svg files names to be removed in `symbols` ids and in jsx and
+   * optimized files names
+   */
+  remove_prefix: [],
+
+  /**
+   * SVGO configuration
+   *
+   * see https://svgo.dev/docs/plugins/
+   */
+  svgo_config: {
+    multipass: true,
+    plugins: [
+      { name: 'cleanupIds', params: { remove: true, minify: true } }
+      , 'removeDoctype'
+      , 'removeComments'
+      , 'removeTitle'
+      , 'removeDimensions'
+      , 'collapseGroups'
+      , { name: 'cleanupNumericValues', params: { floatPrecision: 4  } }
+      , { name: 'convertColors', params: { names2hex: true, rgb2hex: true } }
+      , 'removeStyleElement'
+      , 'removeEmptyContainers'
+      // , { name: 'removeAttrs', params: { attrs: ['(fill|stroke|class|style|data.*)', 'svg:(width|height)'] } }
+      // , { name: 'removeAttrs', params: { attrs: ['(filter|fill|stroke|class|style|data.*)', 'svg:(width|height)'] } }
+      , { name: 'removeAttrs', params: { attrs: ['(filter|fill|stroke|fill-rule|clip-rule|stroke-linecap|stroke-linejoin|stroke-width|transform|style|class|data.*)', 'svg:(width|height)'] } }
+      , 'removeUselessDefs'
+      //, { name: 'addAttributesToSVGElement0, params: {attribute: "#{$attr}"}}
+      // , { name: 'addClassesToSVGElement', params: { className: 'line-icon'  } }
+    ]
+  },
+
+  /**
+   * “pallet” markups to be removed from the svg files
+   *
+   * As clearly explained on the [remixicon site](https://remixicon.com/),
+   * the "pallet" is a transparent rectangle that ensures that the SVGs maintain
+   * their dimensions in your design software. They are not necessary in the final SVGs,
+   * and can even produce unwanted effects, so they are removed.
+   * Each item is a regular expression.
+   */
+  pallets: [
+    /<rect width="256" height="256" fill="none" ?\/?>(<\/rect>)?/gmi, // phosphoricons raw
+    /<path fill="none" d="(M0 0h24v24H0z|M0 0h256v256H0z)" ?\/?>(<\/path>)?/gmi, // remixicons with 'pallets' option (and others)
+  ],
+
+  /**
+   * Opacity classes for duotone icons
+   *
+   * Convert opacity values to predefined classes
+   * the key is the decimal part of the opacity value (e.g.: 2 == 0.2), the value
+   * is the class to be added in place of the opacity value.
+   * The purpose of this feature is to convert the opacity values of duotone icons
+   * to predefined classes, merging similar values to an unique class:
+   * the script will assign the class whose key is the closest to the opacity value.
+   * For example, both 0.2 and 0.26 opacity values are converted
+   * to the class `duotone-light` (whose key is 2). You then only need to set the classes in your css.
+   * NB: only opacity attributes applied to elements inside the svg tag will be considered.
+   * If you don't want to use this feature, remove the `opacity_classes` object or leave it empty
+   *
+   * @example
+   * opacity_classes: {
+   *   2: 'duotone-light',
+   *   4: 'duotone-medium',
+   *   6: 'duotone-dark',
+   * },
+   */
+  opacity_classes: {},
+
+  /**
+     * Icon type classes
+     *
+     * Optional classes to be added to fill and or stroke icons
+     * leave empty or remove if you don't need them
+     *
+     * @example
+     * icon_type_class: {
+     *   fill: 'fill-icons',
+     *   stroke: 'stroke-icons',
+     * },
+     */
+  icon_type_class: {
+    fill: '',
+    stroke: ''
+  },
+
+  /**
+   * Non-square icons classes
+   *
+   * Assign specific classes to non-square icons.
+   * Assuming that all icons have the viewBox attribute, and that all viewboxes
+   * origin is at 0 0, the script analizes all icons widths and heights
+   * and detect those with non-square aspect ratio.
+   * Then, the values are compared (after being rounded to two decimal places)
+   * to find the closest aspect ratio among
+   * those listed in the `non_square_icons_classes` array. The class corresponding
+   * to the found value is then assigned to the icon.
+   * The first value of each subarray of `non_square_icons_classes` is the aspect ratio
+   * (width / height), the second is the class to be assigned.
+   * If you don't want to use this feature, remove the `non_square_icons_classes`
+   * array or leave it empty
+   *
+   * NB: Although aspect-ratio classes are added to `symbol` tags, this functionality
+   * is not supported in SVGs with that element type.
+   *
+   * @example
+   * non_square_icons_classes: [
+   *   [ 3/4, 'ratio-3x4'],
+   *   [ 3/5, 'ratio-3x5'],
+   *   [ 2/3, 'ratio-2x3'],
+   * ],
+   */
+  non_square_icons_classes: [],
+
+
+  /**
+   * Console colors
+   *
+   * Colors for console output as defined in <https://nodejs.org/api/util.html#customizing-utilinspect-colors>
+   * The default colors work well on dark background terminals, if you have a light background terminal, you may
+   * need to change the colors.
+   */
+  console_colors: {
+    error    : 'bgRed',
+    warning  : 'red',
+    success  : 'bgGreen',
+    info     : 'yellow',
+    infoDim  : ['yellow', 'dim'],
+  },
+
+
+  /**
+   * LEGACY
+   * Features mantained for compatibility reasons
+   */
+
+  /**
+   * Svg to scss variables
+   * Generate scss variables from specified svg icons
+   */
+  svg_to_scss: {
+    /* icons to be converted to scss variables.
+     * Paths of the svg files to be processed (relative to config file).
+     * Icons will be parsed and optimized then converted to scss variables.
+     * The variable names will be the same as the file names, without extensions
+     * and parts removed as per the `remove_prefix` parameter.
+     */
+    files: [],
+
+    /* string to be prefixed to the variable names */
+    varname_prefix: 'icon-',
+
+    /* if true, the svg files are converted to data urls */
+    convert_to_css_url: true,
+
+    /* path of the generated scss file */
+    scss_icons_file: '_icons-svg.scss',
+  }
+
+};
+
+
+export default config;

package/dev-tools/svg-icons-tools/src/homedir-path-to-tilde.mjs

@@ -0,0 +1,9 @@
+// rimuove la porzione homedir da un path e la sostituisce con '~'
+
+import {homedir} from 'os';
+
+export function homedir_path_to_tilde(path) {
+  const homeDirRegex = new RegExp('^' + homedir());
+
+  return path.replace(homeDirRegex, '~');
+}

package/dev-tools/svg-icons-tools/src/init.mjs

@@ -0,0 +1,38 @@
+
+import * as fs from 'fs';
+import * as path from 'path';
+// import process from 'process';
+
+import { printResult } from './print-result.mjs';
+import { homedir_path_to_tilde } from './homedir-path-to-tilde.mjs';
+
+export function init(work_dir) {
+
+  const source_dir = new URL('.', import.meta.url).pathname;
+
+  // create dest dir
+  const dest = path.join(work_dir, 'svg-icons-tools');
+  if(fs.existsSync(dest)) {
+    throw `${homedir_path_to_tilde(dest)} already exists`;
+  }
+  fs.mkdirSync(dest);
+
+  // copy cfg file
+  const cfg_file = path.join(dest, '/svg-icons-tools.config.mjs');
+
+  fs.copyFileSync(
+    path.join(source_dir, '/default-config.mjs'),
+    cfg_file
+  );
+
+  // copy tpl file
+  const target_demo_file =  path.join(dest, 'symbols-demo-tpl.html');
+  fs.copyFileSync(
+    path.join(source_dir, 'symbols-demo-tpl.html'),
+    target_demo_file
+  );
+
+  printResult('SVG-ICONS-TOOLS', 'success');
+  printResult('Created config file: ' + homedir_path_to_tilde(cfg_file));
+  printResult('Created symbols demo file: ' + homedir_path_to_tilde(target_demo_file) + '\n\n');
+}