qc-trousse-sdg 1.4.0-develop.1 → 1.4.0

package/rollup.config.js

@@ -4,23 +4,28 @@ import css from 'rollup-plugin-css-only'
 import sveltePreprocess from 'svelte-preprocess';
 import commonjs from '@rollup/plugin-commonjs'
 import terser from '@rollup/plugin-terser';
-// import scss from 'rollup-plugin-sass'
 import scss from 'rollup-plugin-scss'
-import copy from 'rollup-plugin-copy'
 import replace from '@rollup/plugin-replace';
 import postcss from 'postcss'
-import autoprefixer from 'autoprefixer'
 import cssReplace from 'postcss-replace'
 import pkg from './package.json';
 import fs from "fs";
+import buildHtmlDoc from './plugins/buildHtmlDoc.js';
+import buildDevDoc from "./plugins/buildDevDoc"; // adapte le chemin si besoin
+import buildTestFixtures from "./plugins/buildTestFixtures";
 
 
-const dev_process = (process.env.npm_lifecycle_event == 'dev');
+const
+    dev_process = (process.env.npm_lifecycle_event == 'dev'),
+    version_process = (process.env.npm_lifecycle_event == 'version'),
+    build_process = (process.env.npm_lifecycle_event == 'build')
+;
 const verbose = false;
 const  includePaths = [
+        dev_process && 'src/doc/scss',
         'src/sdg/scss',
-        'src/doc/scss'
-];
+        "src",
+].filter(Boolean);
 
 // const path = require('path');
 
@@ -57,10 +62,10 @@ const scssOptions = {
     includePaths: includePaths,
     processor: css =>
         postcss([
-            autoprefixer(),
             cssReplace({
                 data: {
-                    'pkg-version': pkg.version
+                    'pkg-version': pkg.version,
+                    'dev-env': dev_process ? 'true' : 'false',
                 }
             })
         ])
@@ -73,8 +78,8 @@ const scssOptions = {
     prependData: `
         @use "qc-sdg-lib" as *;
     `,
-    outputStyle: dev_process ? 'expanded' : 'compressed',
-    watch: ['src/sdg/scss', 'src/doc/scss'],
+    outputStyle: build_process ? 'compressed' : 'expanded',
+    watch: ['src'],
     silenceDeprecations: ['legacy-js-api'],
 };
 
@@ -105,9 +110,9 @@ let
             // This `main.js` file we wrote
             input: 'src/sdg/qc-sdg.js',
             output: {
-                file: dev_process
-                        ? 'public/js/qc-sdg.js'
-                        : 'dist/js/qc-sdg.min.js',
+                file: build_process
+                        ? 'dist/js/qc-sdg.min.js'
+                        : 'public/js/qc-sdg.js',
                 format: 'iife',
                 name: 'qcSdg',
             },
@@ -123,34 +128,27 @@ let
                 }),
                 commonjs(),
                 // compress js only when build
-                !dev_process && terser(),
+                build_process && terser(),
 
                 // will output compiled styles to output.css
                 scss(Object.assign({
                     output: (styles, styleNodes) => {
-                        fs.writeFileSync( dev_process
-                            ? 'public/css/qc-sdg.css'
-                            : 'dist/css/qc-sdg.min.css'
+                        fs.writeFileSync(
+                            build_process
+                            ? 'dist/css/qc-sdg.min.css'
+                            : 'public/css/qc-sdg.css'
                             , styles)
                     }}
                     , scssOptions
                 )),
-                !dev_process && copy({
-                    targets: [
-                        {
-                            src: 'dist/img/*',
-                            dest: [`public/img`],
-                        }
-                    ],
-                    verbose: verbose,
-                }),
+
             ],
         },
         {
             // qc-sdg without grid system
             input: 'src/sdg/qc-sdg-no-grid.js',
             output: {
-                file: (dev_process ? 'public': 'dist') + '/js/qc-sdg-no-grid.js',
+                file: (build_process ? 'dist' : 'public') + '/js/qc-sdg-no-grid.js',
                 format: 'iife',
             },
             plugins: [
@@ -165,9 +163,10 @@ let
                 // will output compiled styles to output.css
                 scss(Object.assign({
                         output: (styles, styleNodes) => {
-                            fs.writeFileSync( dev_process
-                                    ? 'public/css/qc-sdg-no-grid.css'
-                                    : 'dist/css/qc-sdg-no-grid.min.css'
+                            fs.writeFileSync(
+                                build_process
+                                    ? 'dist/css/qc-sdg-no-grid.min.css'
+                                    : 'public/css/qc-sdg-no-grid.css'
                                 , styles)
                         }
                     }
@@ -188,22 +187,22 @@ let
                 }),
                 scss(Object.assign({
                         output: (styles, styleNodes) => {
-                            fs.writeFileSync( dev_process
-                                    ? 'public/css/qc-sdg-design-tokens.css'
-                                    : 'dist/css/qc-sdg-design-tokens.min.css'
+                            fs.writeFileSync(
+                                build_process
+                                    ? 'dist/css/qc-sdg-design-tokens.min.css'
+                                    : 'public/css/qc-sdg-design-tokens.css'
                                 , styles)
                         }
                     }
                     , scssOptions
                 )),
             ],
-        },
-
+        }
     ]
 ;
 
 
-if (dev_process) {
+if (!build_process) {
     rollupOptions.unshift({
         input: 'src/doc/qc-doc-sdg.js',
         output: {
@@ -212,6 +211,16 @@ if (dev_process) {
         },
         plugins: [
             replace(replacements),
+            buildHtmlDoc({
+                input: 'src/doc/_index.html',
+                output: 'public/index.html'
+            }),
+            buildDevDoc({
+                input: 'src/doc/_dev.html'
+            }),
+            buildTestFixtures({
+                input: 'src/doc/_test.html'
+            }),
             svelte(svelteOptions),
             resolve({
                 browser: true,
@@ -221,20 +230,37 @@ if (dev_process) {
             scss(
                 Object.assign({
                         output: (styles, styleNodes) => {
-                            fs.writeFileSync( dev_process
-                                    ? 'public/css/qc-doc-sdg.css'
-                                    : 'dist/css/qc-doc-sdg.min.css'
+                            fs.writeFileSync(
+                                'public/css/qc-doc-sdg.css'
                                 , styles)
                         }},
                     scssOptions
                 )
             ),
             css(),
-            serve(),
+            dev_process && serve(),
             //uncomment to enable the Hot Reload,
             // livereload('public'),
         ],
-    },)
+    },
+        {
+            // token only css file
+            input: 'src/sdg/qc-sdg-test.js',
+            output: {
+                file: 'public/js/qc-sdg-test.js',
+                format: 'iife',
+            },
+            plugins: [
+                svelte(svelteOptions),
+                resolve({
+                    browser: true,
+                    // Force resolving for these modules to root's node_modules that helps
+                    // to prevent bundling the same package multiple times if package is
+                    // imported from dependencies.
+                    dedupe: ['svelte']
+                }),
+            ],
+        },)
 }
 
 export default rollupOptions;

package/scripts/buildImagesMap.js

@@ -0,0 +1,85 @@
+const fs = require('fs');
+const path = require('path');
+const ejs = require('ejs');
+
+
+
+const settings = {
+    inputDir: path.resolve('dist/img/icon'),
+    output: path.resolve('src/sdg/scss/settings/_images.scss'),
+    exclude: ["QUEBEC_blanc","QUEBEC_couleur"]
+}
+
+try {
+
+    // Lit tous les fichiers SVG du dossier source
+    const files = fs.readdirSync(settings.inputDir);
+    const svgFiles = {};
+    let fileNames = [];
+
+    files.forEach(file => {
+        if (path.extname(file).toLowerCase() === '.svg') {
+            const filePath = path.join(settings.inputDir, file);
+            const name = path.basename(file, '.svg');
+            if (settings.exclude.includes(name)) return;
+            fileNames.push(name);
+            const content = fs.readFileSync(filePath, 'base64');
+            svgFiles[name] = content;
+        }
+    });
+
+    // Génère et écrit le fichier SCSS
+    const scssContent = generateScssContent(svgFiles);
+    fs.writeFileSync(settings.output, scssContent, 'utf8');
+
+
+    // Génération de la documentation HTML des icônes
+    const ejsFilePath = 'src/sdg/bases/Icon/IconDoc.ejs';
+    // chemin du partiel
+    const htmlFilePath = 'src/sdg/bases/Icon/_icon.html';
+
+    // Lecture du template EJS
+    fs.readFile(ejsFilePath, 'utf-8', (err, ejsTemplate) => {
+        if (err) {
+            console.error("Erreur lors de la lecture du fichier EJS :", err);
+            return;
+        }
+
+        // Rendu du template EJS avec les données
+        const renderedHtml = ejs.render(ejsTemplate, {icons: fileNames});
+
+        // Écriture du résultat dans un fichier HTML
+        fs.writeFile(htmlFilePath, renderedHtml, (err) => {
+            if (err) {
+                console.error("Erreur lors de l'écriture du fichier HTML :", err);
+                return;
+            }
+            console.log(`Le fichier ${htmlFilePath} a été généré avec succès.`);
+        });
+    });
+
+
+    console.log('\x1b[32m%s\x1b[0m', `✓ Fichier ${settings.output} généré avec succès !`);
+    console.log('\x1b[36m%s\x1b[0m', `  → ${Object.keys(svgFiles).length} images SVG traitées.`);
+
+} catch (error) {
+    console.error('\x1b[31m%s\x1b[0m', '✗ Erreur lors de la génération du fichier :');
+    console.error('\x1b[31m%s\x1b[0m', `  → ${error.message}`);
+    process.exit(1);
+}
+/**
+ * Génère le contenu du fichier SCSS avec la map des images
+ * @param {Object} svgFiles - Objet contenant les paires nom/contenu base64 des SVG
+ * @returns {string} Contenu formaté du fichier SCSS
+ */
+function generateScssContent(svgFiles) {
+    let content = '// Ce fichier est généré automatiquement. Ne pas modifier directement.\n\n';
+    content += '$images: (\n';
+
+    for (const [name, base64] of Object.entries(svgFiles)) {
+        content += `    ${name}: '${base64}',\n`;
+    }
+
+    content = content.slice(0, -2) + '\n);';
+    return content;
+}

package/scripts/check-release-note.sh

@@ -0,0 +1,11 @@
+#!/bin/sh
+
+echo "Avez-vous ajouté une note de version ? (o/n)"
+read reponse
+
+if [ "$reponse" != "o" ] && [ "$reponse" != "O" ]; then
+  echo "Versionnage annulé. Merci d'ajouter une note de version."
+  exit 1
+fi
+
+echo "Merci ! On continue le versionnage..."

package/scripts/compile-doc.sh

@@ -0,0 +1,4 @@
+#!/bin/sh
+
+rollup -c --bundleConfigAsCjs \
+&& git add public/js/qc-doc-sdg.js

package/src/doc/_index.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<!--suppress ALL -->
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet"
+        href="css/qc-sdg.css">
+  <link rel="stylesheet"
+        href="css/qc-doc-sdg.css">
+  <title>Documentation technique du Système de design gouvernemental</title>
+  <script defer
+          src='js/qc-sdg.js'
+          sdg-css-filename="qc-sdg.css">
+  </script>
+  <script defer
+          src='js/qc-doc-sdg.js'
+          sdg-css-filename="qc-doc-sdg.css">
+  </script>
+</head>
+<body>
+<header>
+  <qc-piv-header id="pivEntete"
+                 title-text="Trousse de développement du Système de design gouvernemental"
+                 alt-logo="Signature du gouvernement du Québec. Accédez au Système de design gouvernemental.">
+  </qc-piv-header>
+</header>
+<qc-doc-top-nav></qc-doc-top-nav>
+<div class="qc-container">
+  <!-- _nav.html -->
+</div>
+<main id="main">
+  <div class="qc-container">
+    <hr/>
+    <!-- _colors.html -->
+
+    <hr/>
+
+    <!-- grille horizontale -->
+    <!-- _grid.html -->
+    <hr/>
+    <!-- _figure.html -->
+    <hr/>
+    <!-- _icon.html -->
+    <hr/>
+    <!-- _links.html -->
+    <hr/>
+    <!-- _lists.html -->
+    <hr/>
+    <!-- _headings.html -->
+    <hr/>
+    <!-- _shadings.html -->
+    <hr/>
+    <!-- _paragraph.html -->
+    <hr/>
+    <!-- _font.html -->
+    <hr/>
+    <!-- _separator.html -->
+    <hr/>
+    <!-- _alert.html -->
+    <hr/>
+    <!-- _notice.html -->
+    <hr/>
+    <!-- _searchBar.html -->
+    <hr/>
+    <!-- _button.html -->
+    <hr/>
+    <h2 id="formulaires">Formulaires</h2>
+    <h3 id="radios-checkboxes">Boutons radios et cases à cocher</h3>
+    <!-- _choiceGroup.html -->
+    <hr/>
+    <!-- _checkbox.html -->
+    <hr/>
+    <!-- _selectionButtons.html -->
+    <hr/>
+    <!-- _textField.html -->
+    <hr/>
+    <!-- _searchInput.html -->
+    <hr/>
+    <!-- _toggleSwitch.html -->
+    <hr/>
+    <!-- _select.html -->
+    <hr/>
+    <!-- _formfieldRow.html -->
+    <hr/>
+    <!-- _toTop.html -->
+    <hr/>
+    <!-- _pivHeader.html -->
+    <hr/>
+    <!-- _pivFooter.html -->
+    <hr/>
+  </div>
+</main>
+<footer>
+  <qc-piv-footer></qc-piv-footer>
+</footer>
+<script src='js/qc-doc-exemple.js'></script>
+</body>
+</html>

package/src/doc/_nav.html

@@ -0,0 +1,53 @@
+<h1>
+  <span class="qc-subhead" id="version"></span>
+  Documentation technique
+</h1>
+<nav class="main-menu"
+     aria-label="Navigation principale">
+  <h2 class="qc-h4">Bases</h2>
+  <ul>
+    <li><a href='#couleurs'>Couleurs</a></li>
+    <li><a href='#grille'>Grille horizontale (grille de 8 px)</a></li>
+    <li><a href='#images'>Images</a></li>
+    <li><a href="#icons">Iconographie</a></li>
+    <li><a href='#liens'>Liens</a></li>
+    <li><a href='#liste'>Liste</a></li>
+    <li><a href='#titre'>Niveaux de titres</a></li>
+    <li><a href='#ombrages'>Ombrages</a></li>
+    <li><a href='#paragraphes'>Paragraphes</a></li>
+    <li><a href='#polices'>Polices de caractères</a></li>
+    <li><a href='#separator'>Séparateur</a></li>
+  </ul>
+  <h2 class="qc-h4">Composants</h2>
+  <ul>
+    <li><a href='#alert'>Alerte générale</a></li>
+    <li><a href='#notice'>Avis</a></li>
+    <li><a href='#search-bar'>Barre de recherche</a></li>
+    <li><a href='#buttons'>Boutons</a></li>
+    <li>
+      <a href='#formulaires'>Formulaires</a>
+      <ul>
+        <li><a href="#radios-checkboxes">Boutons radio, cases à cocher et boutons de sélection</a>
+          <ul>
+            <li><a href="#choice-group">Groupe de boutons radio et de cases à cocher</a></li>
+            <li><a href="#checkbox">Case à cocher unique</a></li>
+            <li><a href="#selection-button">Boutons de sélection</a></li>
+          </ul>
+        </li>
+        <li><a href="#textfield">Champ texte</a></li>
+        <li><a href="#search-input">Champ de recherche</a></li>
+        <li><a href="#toggle-switch">Commutateur</a></li>
+        <li><a href="#select">Liste déroulante</a></li>
+        <li><a href="#champs-alignes">Champs alignés horizontalement</a></li>
+      </ul>
+
+    </li>
+    <li><a href="#toTop">Haut de page</a></li>
+  </ul>
+  <h2 class="qc-h4">Modèles</h2>
+  <ul>
+    <li><a href='#piv-header'>Bandeau d’en-tête du PIV</a>
+    <li><a href='#piv-footer'>Pied de page du PIV</a>
+  </ul>
+
+</nav>

package/src/doc/_test.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet"
+        href="css/qc-sdg.css">
+  <link rel="stylesheet"
+        href="css/qc-doc-sdg.css">
+  <title>Documentation technique du Système de design gouvernemental</title>
+  <script defer
+          src='js/qc-sdg.js'
+          sdg-css-filename="qc-sdg.css">
+  </script>
+  <script defer
+          src='js/qc-doc-sdg.js'
+          sdg-css-filename="qc-doc-sdg.css">
+  </script>
+</head>
+<body>
+<main id="main">
+  <div class="qc-container">
+    <!-- _partial.html -->
+  </div>
+</main>
+<script src='js/qc-doc-exemple.js'></script>
+<script src='js/qc-sdg-test.js'
+        sdg-css-filename="qc-sdg.css"
+  ></script>
+</body>
+</html>

package/src/doc/components/Code.svelte

@@ -12,6 +12,7 @@
 
   import {HighlightJS} from "highlight.js"
   import pretty from "pretty";
+  import jsBeautify from "js-beautify";
 
   let {
       targetId = '',
@@ -39,7 +40,10 @@
           . replace('/qc-hash-.*/g', '')
           . replace('/is-external=""/g', 'is-external')
       ;
-      prettyCode = pretty(rawCode, {wrap_attributes: 'force-aligned'});
+      // prettyCode = pretty(rawCode, prettyOptions);
+      prettyCode = language === 'javascript'
+                    ? jsBeautify(rawCode)
+                    : pretty(rawCode, {wrap_attributes: 'force-aligned'});
       hlCode = HighlightJS.highlight(prettyCode, {language:language}).value;
   }
 
@@ -49,7 +53,7 @@
 
 <pre
     ><code class="hljs"
-        ><button class="btn btn-sm btn-primary"
+        ><button class="qc-button qc-compact qc-primary"
                  onclick={copy}>
             <span class="copy">copier</span>
             <span class="copied">copié !</span>

package/src/doc/components/TopNav.svelte

@@ -1,12 +1,11 @@
 <svelte:options customElement="{{
     tag: 'qc-doc-top-nav',
     shadow: 'none',
-   props: {
-
-  }
+    props: {}
 }}" />
+
 <script>
-    import Switch from "./Switch.svelte";
+    import ToggleSwitch from "../../sdg/components/ToggleSwitch/ToggleSwitch.svelte";
     let value = $state(localStorage.getItem('dark-theme') === "true");
 
     $effect(() => {
@@ -18,13 +17,15 @@
 <div role="complementary">
     <div class="qc-container top-nav">
         <div class="switch-control">
-            <label for="switch">Activer le thème sombre</label>
-            <Switch id="switch" bind:value />
+            <ToggleSwitch
+                label="Activer le thème sombre"
+                bind:checked={value}
+            />
         </div>
     </div>
 </div>
-<style lang="scss">
 
+<style lang="scss">
   [role=complementary] {
     position: sticky;
     z-index: 100;
@@ -51,6 +52,4 @@
       }
     }
   }
-
-
 </style>

package/src/doc/components/color-doc.svelte

@@ -22,7 +22,7 @@
     </div>
 </div>
 <style lang="scss">
-    @use "base/colors";
+    @use "sdg/bases/colors/colors" as *;
     .color-details {
         display: flex;
         justify-content: flex-start;