@massimo-cassandro/minimo 1.11.1 → 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/README.md

@@ -6,7 +6,7 @@ A collection of standalone Node.js CLI utilities to help manage a web project's
 * [Svg Icons Tools](./svg-icons-tools/README.md) — optimizes SVG icons and combines/converts them into symbols, JSX, or SCSS variables
 * [Create favicons](./create-favicons/README.md) — generates the full favicon set (SVG, PNG, ICO, webmanifest, HTML snippet) from a source image
 * [upd@m](./upd@m/README.md) — updates all `@massimo-cassandro/*` packages installed in `node_modules`
-
+* **webpack-setup** — script for installing minimo environment
 
 ## Usage of SVG adn favicons tools
 

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/update-version/index.mjs

@@ -79,7 +79,7 @@ async function run() {
       (params.logRow.descr
         ? ' - ' + params.logRow.descr
         : params.updateMode === 'patch'
-          ? ' - Upd / Fix / Dependencies upd'
+          ? ' - Fix / Dependencies upd'
           : '')
     );
 

package/dev-tools/update-version/src/chooser-inquirer.mjs

@@ -33,7 +33,7 @@ export async function chooser() {
       default: answer === 'init'
         ? 'Setup'
         : answer === 'patch'
-          ? 'Upd / Fix / Dependencies upd'
+          ? 'Fix / Dependencies upd'
           : ''
     });
     params.logRow.descr = descr.trim() || null;

package/dev-tools/webpack-setup/starter-install.sh

@@ -0,0 +1,149 @@
+#!/bin/zsh
+
+# Configurazione variabili
+# BASE_URL="https://raw.githubusercontent.com/massimo-cassandro/minimo/refs/heads/main"
+
+# in locale: cat ....
+# da remoto curl -s
+
+# %:A risolve il percorso assoluto (anche con link simbolici)
+# %:h estrae l'header (ovvero la directory, come 'dirname')
+BASE_URL=${0:A:h}
+
+echo "BASE_URL: ${BASE_URL}"
+
+TEMPLATES_DIR="${BASE_URL}/templates"
+# WEBPACK_SOURCE_DIR="$BASE_URL/webpack-setup"
+WEBPACK_SOURCE_DIR="$BASE_URL"
+
+RED='\033[0;31m'
+YELLOW='\033[0;33m'
+GREEN='\033[0;32m'
+NC='\033[0m' # No Color
+
+# protezione contro la sovrascrittura
+set -C
+
+# Array per tracciare le copie bloccati
+BLOCKED_FILES=()
+
+# Wrapper: copia solo se il file non esiste, altrimenti registra il blocco
+safe_cat() {
+  local src="$1"
+  local dest="$2"
+  if [ -e "$dest" ]; then
+    BLOCKED_FILES+=("$dest")
+  else
+    cat "$src" > "$dest"
+  fi
+}
+
+echo -e "${GREEN}...package.json${NC}"
+if [ ! -f package.json ]; then
+  safe_cat "${TEMPLATES_DIR}/package-tpl.json" package.json
+else
+  echo -e "${GREEN}package.json already exists${NC}"
+fi
+
+echo -e "${GREEN}...gitignore${NC}"
+if [ ! -f .gitignore ]; then
+  safe_cat "${TEMPLATES_DIR}/_gitignore" .gitignore
+else
+  echo -e "${GREEN}.gitignore already exists${NC}"
+fi
+
+echo -e "\n${GREEN}Where do you want to install the frontend configuration?${NC}"
+echo "1) Root directory"
+echo "2) 'frontend' Directory"
+read "?Choose (1 or 2) [default: 1]: " choice < /dev/tty
+choice=${choice:-1}
+
+if [ "$choice" = "2" ]; then
+  FRONTEND_INSTALL_PATH="./frontend"
+  echo -e "${GREEN}Files will be installed in: ./frontend${NC}"
+else
+  FRONTEND_INSTALL_PATH="."
+  echo -e "${GREEN}Files will be installed in: root directory${NC}"
+fi
+
+if [ "$FRONTEND_INSTALL_PATH" = "./frontend" ]; then
+  mkdir -p frontend
+fi
+
+
+echo -e "\n${GREEN}...config files & utilities${NC}"
+
+safe_cat "${TEMPLATES_DIR}/_browserslistrc"            .browserslistrc
+safe_cat "${TEMPLATES_DIR}/_editorconfig"              .editorconfig
+safe_cat "${TEMPLATES_DIR}/_prettierrc"                .prettierrc
+safe_cat "${TEMPLATES_DIR}/jsconfig.json"              jsconfig.json
+safe_cat "${TEMPLATES_DIR}/__project__.code-workspace" __project__.code-workspace
+
+
+echo -e "\n${GREEN}...eslint${NC}"
+npm i -D @massimo-cassandro/eslint-config
+safe_cat "${TEMPLATES_DIR}/eslint.config.mjs" eslint.config.mjs
+
+echo -e "\n${GREEN}...stylelint${NC}"
+npm i -D @massimo-cassandro/stylelint-config
+safe_cat "${TEMPLATES_DIR}/stylelint.config.mjs" stylelint.config.mjs
+
+echo -e "\n${GREEN}...webpack${NC}"
+npm i -D webpack-cli webpack-dev-server webpack-manifest-plugin webpack
+npm i -D @babel/core @babel/preset-env babel-loader terser-webpack-plugin
+npm i -D webpack-remove-empty-scripts copy-webpack-plugin html-loader html-webpack-plugin
+npm i -D postcss autoprefixer postcss-custom-media @csstools/postcss-global-data postcss-loader postcss-preset-env
+npm i -D cssnano mini-css-extract-plugin style-loader css-loader css-minimizer-webpack-plugin
+npm i -D responsive-loader
+npm i -D process dotenv-webpack
+npm i -D svgo svg-url-loader svgo-loader svgo-add-viewbox mini-svg-data-uri
+npm i -D ejs-loader
+npm i -D purgecss-webpack-plugin glob
+
+npm i -D style-dictionary
+
+safe_cat "${WEBPACK_SOURCE_DIR}/webpack.config.mjs"   "${FRONTEND_INSTALL_PATH}/webpack.config.mjs"
+safe_cat "${WEBPACK_SOURCE_DIR}/webpack-template.ejs" "${FRONTEND_INSTALL_PATH}/webpack-template.ejs"
+
+# cartella webpack
+WEBPACK_LOCAL_DIR="${FRONTEND_INSTALL_PATH}/webpack-modules"
+WEBPACK_MODULES_REMOTE_URL="${WEBPACK_SOURCE_DIR}/webpack-modules"
+FILES=(
+  'css-rules.mjs'
+  'get-jsConfig-aliases.mjs'
+  'mini-svg-data-uri-loader.cjs'
+  'svg-rules.mjs'
+  'svgo.config.mjs'
+  'postcss.config.mjs'
+)
+
+if [ ! -d "$WEBPACK_LOCAL_DIR" ]; then
+  mkdir -p "$WEBPACK_LOCAL_DIR"
+
+  for FILE in "${FILES[@]}"; do
+    # echo "Scaricamento di $FILE..."
+    safe_cat "${WEBPACK_MODULES_REMOTE_URL}/${FILE}" "${WEBPACK_LOCAL_DIR}/${FILE}"
+  done
+
+fi
+
+echo -e "\n${GREEN}Creating a template of your frontend application's folder structured${NC}"
+
+TEMPLATE_DIR_NAME="__frontend_app_dir_template__"
+mkdir -p "$TEMPLATE_DIR_NAME"
+cd "$TEMPLATE_DIR_NAME"
+mkdir -p error-pages imgs icons src src/css favicons design-tokens
+cd ..
+set +C
+
+# Riepilogo finale dei file bloccati
+if [ ${#BLOCKED_FILES[@]} -gt 0 ]; then
+  echo -e "\n${YELLOW}*** File non copiati (già esistenti): ***${NC}"
+  for F in "${BLOCKED_FILES[@]}"; do
+    echo -e "${YELLOW}  ✗ $F${NC}"
+  done
+else
+  echo -e "\n${GREEN}Nessun file bloccato.${NC}"
+fi
+
+echo -e "\n\n${GREEN}*** END ***${NC}"

package/dev-tools/webpack-setup/templates/__project__.code-workspace

@@ -0,0 +1,93 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+  ],
+  "settings": {
+
+    "cssvar.files": [
+      "frontend/css/custom-properties-list.css", // project props
+      
+      // OPEN PROPS
+      // "./node_modules/open-props/open-props.min.css", // all open-props
+
+      // "./node_modules/open-props/animations.min.css",
+      // "./node_modules/open-props/aspects.min.css",
+      // "./node_modules/open-props/borders.min.css",
+      // "./node_modules/open-props/buttons.dark.min.css",
+      // "./node_modules/open-props/buttons.light.min.css",
+      // "./node_modules/open-props/buttons.min.css",
+      // "./node_modules/open-props/durations.min.css",
+      // "./node_modules/open-props/easings.min.css",
+      // "./node_modules/open-props/fonts.min.css",
+      // "./node_modules/open-props/gradients.min.css",
+      // "./node_modules/open-props/masks.corner-cuts.min.css",
+      // "./node_modules/open-props/masks.edges.min.css",
+      // "./node_modules/open-props/media.min.css",
+      // "./node_modules/open-props/normalize.dark.min.css",
+      // "./node_modules/open-props/normalize.light.min.css",
+      // "./node_modules/open-props/normalize.min.css",
+      // "./node_modules/open-props/sizes.min.css",
+      // "./node_modules/open-props/supports.min.css",
+      // "./node_modules/open-props/theme.dark.switch.min.css",
+      // "./node_modules/open-props/theme.light.switch.min.css",
+      // "./node_modules/open-props/zindex.min.css",
+
+      // "./node_modules/open-props/colors.min.css",
+      // "./node_modules/open-props/colors-hsl.min.css",
+      // "./node_modules/open-props/colors-hsl.shadow.min.css",
+      // "./node_modules/open-props/colors-oklch.min.css",
+      // "./node_modules/open-props/colors-oklch.shadow.min.css",
+      // "./node_modules/open-props/oklch-hues.min.css",
+      // "./node_modules/open-props/oklch-hues.shadow.min.css",
+
+      // "./node_modules/open-props/shadows.min.css",
+      // "./node_modules/open-props/animations.shadow.min.css",
+      // "./node_modules/open-props/aspects.shadow.min.css",
+      // "./node_modules/open-props/borders.shadow.min.css",
+      // "./node_modules/open-props/colors.shadow.min.css",
+      // "./node_modules/open-props/easings.shadow.min.css",
+      // "./node_modules/open-props/fonts.shadow.min.css",
+      // "./node_modules/open-props/gradients.shadow.min.css",
+      // "./node_modules/open-props/normalize.shadow.min.css",
+      // "./node_modules/open-props/shadows.shadow.min.css",
+      // "./node_modules/open-props/sizes.shadow.min.css",
+      // "./node_modules/open-props/zindex.shadow.min.css",
+
+    ],
+    // Do not ignore node_modules css files, which is ignored by default
+    "cssvar.ignore": [],
+
+    // add support for autocomplete in JS or JS like files
+    "cssvar.extensions": [
+      "css", "postcss", "jsx", "tsx", "scss"
+    ],
+
+    "favorites.resources": [
+      {
+        "filePath": "node_modules/@fontsource-variable",
+        "group": "Default"
+      },
+      {
+        "filePath": "node_modules/@fontsource",
+        "group": "Default"
+      },
+      {
+        "filePath": "node_modules/@massimo-cassandro",
+        "group": "Default"
+      },
+      {
+        "filePath": "node_modules/open-props",
+        "group": "Default"
+      }
+    ],
+
+    "bootstrapIntelliSense": {
+      "enable": false,
+      "bsVersion": "5.3.7",
+      "showSuggestions": false,
+      "autoComplete": false
+    }
+  }
+}

package/dev-tools/webpack-setup/templates/_browserslistrc

@@ -0,0 +1,27 @@
+# https://github.com/browserslist/browserslist
+# https://browsersl.ist/
+
+last 2 major versions
+since 2023
+not dead
+
+not op_mini all
+not op_mob > 0
+not and_uc > 0
+not and_qq > 0
+not baidu > 0
+not kaios > 0
+not android > 0
+not ie > 0
+not ie_mob > 0
+not bb > 0
+
+safari >= 16
+ios_saf >= 16
+edge >= 109
+chrome >= 109
+firefox esr
+opera >= 95
+samsung >= 20
+
+> 3% in IT

package/dev-tools/webpack-setup/templates/_editorconfig

@@ -0,0 +1,17 @@
+# https://editorconfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
+

package/dev-tools/webpack-setup/templates/_gitignore

@@ -0,0 +1,21 @@
+*~
+.DS_Store
+**/*.mwb.bak
+**/*.mwb.beforefix
+
+vendor
+
+# local env
+# .env
+.env.dev
+.env.local
+.env.development
+.env.test
+.env.development.local
+.env.test.local
+.env.production.local
+
+# frontend
+node_modules
+_private
+public/_dev

package/dev-tools/webpack-setup/templates/_prettierrc

@@ -0,0 +1,9 @@
+{
+  "endOfLine": "lf",
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true
+}

package/dev-tools/webpack-setup/templates/eslint.config.mjs

@@ -0,0 +1,31 @@
+import eslint_config from '@massimo-cassandro/eslint-config';
+
+// https://github.com/cybozu/eslint-config
+// import cybozuEslintConfigBaseline from '@cybozu/eslint-config/flat/presets/css-baseline.js';
+
+
+export default [
+
+  // ...cybozuEslintConfigBaseline.map((config) => ({
+  //   ...config,
+  //   files: ['**/*.css']
+  // })),
+
+  ...eslint_config,
+  // {
+  //   files: ['src/**/*.js'],
+  //   ignores: [
+  //     'dist/',
+  //     'build/',
+  //     '**/vendor/'
+  //   ],
+  // }
+  // {
+  //   languageOptions: {
+  //     globals: {
+  //       jQuery: 'readonly',
+  //       $: 'readonly',
+  //     },
+  //   },
+  // },
+];

package/dev-tools/webpack-setup/templates/jsconfig.json

@@ -0,0 +1,22 @@
+{
+  "__help": "https://code.visualstudio.com/docs/languages/jsconfig",
+  "compilerOptions": {
+    "checkJs": true,
+    "target": "ES2023",
+    "module": "ESNext",
+    "baseUrl": ".",
+    "allowSyntheticDefaultImports": false,
+    "paths": {
+      "@frontend/*": ["./frontend/*"],
+      "@src/*": ["frontend/src/*"],
+      "@imgs/*": ["./frontend/imgs/*"],
+      "@icone/*": ["./frontend/icone/*"],
+      "@backoffice/*": ["./frontend/backoffice/*"],
+      "@minimo/*": ["./node_modules/@massimo-cassandro/minimo/src/*"]
+    }
+
+
+
+  },
+  "exclude": ["node_modules", "dist", "docs", "build", "public"]
+}

package/dev-tools/webpack-setup/templates/package-tpl.json

@@ -0,0 +1,37 @@
+{
+  "name": "xxxxx",
+  "description": "",
+  "version": "0.1.0",
+  "license": "MIT",
+  "author": "Massimo Cassandro",
+  "main": "index.js",
+  "type":"module",
+  "sideEffects": [
+    "*.css",
+    "*.js",
+    "*.svg",
+    "*.jpg",
+    "*.jpeg",
+    "*.png",
+    "*.webp",
+    "*.avif"
+  ],
+  "scripts": {
+    "progetto JS webpack DEV": "npm 'launchChrome' && NODE_ENV=development webpack serve --config ./webpack.config.mjs #--open-app-name 'Google Chrome'",
+    "progettop sf webpack DEV": "rm -rf ./public/_dev && NODE_ENV=development webpack --config ./frontend/webpack.config.mjs",
+    "webpack PROD": "NODE_ENV=production webpack --config ./webpack.config.mjs --stats minimal",
+    "create-favicons INIT": "npx create-favicons init",
+    "create-favicons": "npx create-favicons --dir=./src/favicons",
+    "UPD-version": "npx update-version  # --log-file=./frontend/changelog.md --log-patch --pkg=alt/path/to/package.json",
+    "upd@m": "npx upd@m",
+    "launchChrome": "open -n -a 'Google Chrome' --args --profile-directory='Profile 3'",
+    "python server": "python3 -m http.server 8000 # --directory __dirname__ # 8000 = default port",
+    "php server": "php -S localhost:8000 # -t root_dir/",
+    "symfony local server": "symfony serve -d",
+    "node server": "node serve # richiede ‘npm i serve’",
+    "build tokens": "npx buildTokens --config ./path/to/tokens-config.mjs",
+    "check unresolved props": "npx checkUnresolvedProps --config ./path/to/tokens-config.mjs"
+  },
+  "dependencies": {},
+  "devDependencies": {}
+}

package/dev-tools/webpack-setup/templates/stylelint.config.mjs

@@ -0,0 +1,32 @@
+export default {
+  extends: [
+    '@massimo-cassandro/stylelint-config',
+  ],
+
+  // File da ignorare durante l'analisi
+  ignoreFiles: [
+    'node_modules/**/*.{css,scss}',
+    'vendor/**/*.{css,scss}',
+    'templates/**/*.{css,scss}',
+    'dist/**/*.css',
+    'build/**/*.css',
+    'public/**/*.css',
+    'test/**/*.css',
+    'docs/**/*.css',
+    'demo/**/*.css',
+  ],
+
+  // Overrides
+  rules: {
+
+    // 'color-function-notation': null,
+
+    //********************** optionally for tailwind:
+    // 'at-rule-no-unknown': [
+    //   true,
+    //   'value-keyword-case': null,
+    //   '@stylistic/number-no-trailing-zeros': null
+    // ],
+    //********************** /tailwind
+  }
+};