FSHSP-145 fix(schematics): drop demo/figma links from scaffolded Intr…

CHANGELOG.md

@@ -16,6 +16,10 @@ Le format suit [Keep a Changelog](https://keepachangelog.com/fr/1.1.0/) et le pr
 
 ## [Unreleased]
 
+### Fixed
+
+- **La page `Introduction` du Storybook posé par `ng add @4sh/ui-kit-schematics` renvoyait vers la démo et les fichiers Figma du starter** (FSHSP-145). `scripts/schematics-assets.build.mjs` copiait `Introduction.mdx` tel quel en le traitant comme sans dépendance au monorepo, alors que ses sections « Application de démonstration » et « Ressources Figma » sont propres à ce dépôt. `scaffoldStorybook` pose désormais un scaffold (`src/ng-add/files/storybook/docs/Introduction.mdx`, sans ces deux sections) avant la copie brute des assets, pour la court-circuiter sur ce fichier précis.
+
 ## [0.5.0] - 2026-08-20
 
 ### Fixed

projects/ui-kit-schematics/src/ng-add/files/storybook/docs/Introduction.mdx

@@ -0,0 +1,216 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Introduction" />
+
+<div className="sb-container">
+    <div className="sb-section-title">
+        # Bienvenue dans la documentation du Design System
+    </div>
+
+    <div className="sb-section">
+        ## Stack Technique
+
+        <div className="stack-grid">
+            <div className="stack-card">
+                <h3>Angular 22</h3>
+                <p>Framework principal : architecture <strong>standalone</strong> et API <strong>signals</strong> native.</p>
+            </div>
+            <div className="stack-card">
+                <h3>Composants</h3>
+                <p>Composants + <strong>[Angular CDK](https://material.angular.io/cdk/categories)</strong> (overlay, a11y, focus-trap). Style co-localisé, zéro librairie UI propriétaire.</p>
+            </div>
+            <div className="stack-card">
+                <h3>Storybook 10</h3>
+                <p>Documentation vivante et terrain de jeu des composants, connecté à Figma via <strong>addon-designs</strong>.</p>
+            </div>
+        </div>
+    </div>
+
+    <div className="sb-section">
+        ### Fondations & outillage
+
+        <div className="feature-grid">
+            <div className="feature-card">
+                <div className="feature-card-media">
+                    <img src="./doc-token.png" alt="Design System intégré basé sur les design tokens" />
+                </div>
+                <div className="feature-card-body">
+                    <h3>Design System Intégré</h3>
+                    <p>Thème cohérent basé sur vos <strong>design tokens Figma</strong>, propagé à tous les composants.</p>
+                </div>
+            </div>
+
+            <div className="feature-card">
+                <div className="feature-card-media">
+                    <img src="./doc-token-json.png" alt="Fichiers de tokens JSON configurables" />
+                </div>
+                <div className="feature-card-body">
+                    <h3>Configuration Flexible</h3>
+                    <p>Personnalisez facilement les <strong>couleurs</strong>, la <strong>typographie</strong> et les <strong>espacements</strong> via les fichiers de tokens JSON.</p>
+                </div>
+            </div>
+
+            <div className="feature-card">
+                <div className="feature-card-media">
+                    <img src="./doc-tfm.png" alt="Interface de gestion Token Flow Manager" />
+                </div>
+                <div className="feature-card-body">
+                    <h3><a href="https://www.npmjs.com/package/token-flow-manager" target="_blank">Token Flow Manager</a></h3>
+                    <p>Visualisez et éditez vos tokens de style directement côté code via un <strong>dashboard local visuel</strong>, sans altérer votre formatage JSON.</p>
+                </div>
+            </div>
+
+            <div className="feature-card">
+                <div className="feature-card-media">
+                    <img src="./doc-gridaflex.png" alt="Système de grille Gridaflex" />
+                </div>
+                <div className="feature-card-body">
+                    <h3><a href="https://www.npmjs.com/package/gridaflex" target="_blank">Gridaflex</a></h3>
+                    <p>Système de grille flexbox et gestion des <strong>breakpoints / media queries</strong>, alimenté par les tokens responsive.</p>
+                </div>
+            </div>
+
+            <div className="feature-card">
+                <div className="feature-card-media">
+                    <img src="./doc-icon.png" alt="Librairie d'icônes FontAwesome" />
+                </div>
+                <div className="feature-card-body">
+                    <h3>Librairie d'icônes</h3>
+                    <p>Icônes <strong><a href="https://fontawesome.com/" target="_blank">FontAwesome Free</a></strong> intégrées par defaut via le composant <code>ui-icon</code>, décoratives par défaut (a11y).</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+    {`
+    .sb-container {
+      margin-bottom: 48px;
+      font-family: var(--font-family, sans-serif);
+      color: var(--sb-text);
+    }
+
+        .sb-section-title {
+          margin-bottom: 48px;
+        }
+
+        .sb-section {
+          margin-bottom: 40px;
+        }
+
+        .sb-lead {
+          margin-top: 16px;
+          max-width: 720px;
+          font-size: 15px;
+          line-height: 1.6;
+          color: var(--sb-text-subtle);
+        }
+
+        /* ── Stack : cartes cœur de stack ───────────────────────── */
+        .stack-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+          gap: 20px;
+          margin-top: 24px;
+        }
+
+        .stack-card {
+          padding: 24px;
+          background: var(--sb-bg-subtle);
+          border: 1px solid var(--sb-border);
+          border-radius: 12px;
+          transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+        }
+
+        .stack-card:hover {
+          transform: translateY(-3px);
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+          border-color: var(--sb-text-subtle);
+        }
+
+        .stack-card h3 {
+          margin: 0 0 8px;
+          font-size: 17px;
+        }
+
+        .stack-card p {
+          margin: 0;
+          font-size: 14px;
+          line-height: 1.55;
+          color: var(--sb-text-subtle);
+        }
+
+        /* ── Fondations : cartes illustrées ─────────────────────── */
+        .feature-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+          gap: 24px;
+          margin-top: 20px;
+        }
+
+        .feature-card {
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          background: var(--sb-bg);
+          border: 1px solid var(--sb-border);
+          border-radius: 12px;
+          transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+        }
+
+        .feature-card:hover {
+          transform: translateY(-3px);
+          box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
+          border-color: var(--sb-text-subtle);
+        }
+
+        .feature-card-media {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 20px;
+          aspect-ratio: 16 / 9;
+          background:
+            radial-gradient(circle at 30% 20%, rgba(124, 58, 237, 0.12), transparent 60%),
+            var(--sb-bg-subtle);
+          border-bottom: 1px solid var(--sb-border);
+        }
+
+        .feature-card-media img {
+          max-width: 100%;
+          max-height: 100%;
+          object-fit: contain;
+          border-radius: 12px;
+        }
+
+        .feature-card-body {
+          padding: 20px;
+        }
+
+        .feature-card-body h3 {
+          margin: 0 0 8px;
+          font-size: 17px;
+        }
+
+        .feature-card-body p {
+          margin: 0;
+          font-size: 14px;
+          line-height: 1.55;
+          color: var(--sb-text-subtle);
+        }
+
+        .feature-card-body code {
+          font-size: 13px;
+          padding: 1px 5px;
+          border-radius: 4px;
+          background: var(--sb-bg-subtle);
+        }
+
+        h2 {
+          border-bottom: 1px solid var(--sb-border);
+          padding-bottom: 8px;
+          margin-bottom: 24px;
+        }
+`}
+</style>

projects/ui-kit-schematics/src/ng-add/index.ts

@@ -316,7 +316,8 @@ const UI_IMAGE_MARKER_RE = /^[ \t]*\/\/ <\/?ui-image>\n/gm;
  * là-bas (`manager.ts`, `brand-toolbar.ts`, `preview-head.html`, les pages de
  * doc transverses) vient des assets, synchronisé depuis ce dépôt ; ce qui doit
  * diverger (`main.js` et ses globs, `preview.ts` et ses couplages, `myTheme.ts`
- * et sa marque, les tsconfig) est un scaffold écrit pour le consommateur.
+ * et sa marque, les tsconfig, `docs/Introduction.mdx` et ses liens vers la
+ * démo/le Figma DE CE DÉPÔT) est un scaffold écrit pour le consommateur.
  *
  * La règle tourne APRÈS la copie des composants, et pas avant : c'est l'arbre
  * qui dit si `ui-image` en fait partie. Sa preview a besoin de providers que
@@ -351,6 +352,15 @@ function scaffoldStorybook(): Rule {
       }
     };
 
+    // `Introduction.mdx` des assets cite la démo et les Figma DE CE DÉPÔT
+    // (sections "Application de démonstration" / "Ressources Figma") : sans
+    // objet chez un consommateur. Scaffold posé en premier pour que `create()`
+    // dans `copyAll` le trouve déjà là et n'écrase pas avec la version brute.
+    create(
+      'storybook/docs/Introduction.mdx',
+      readFileSync(join(scaffolds, 'docs/Introduction.mdx'), 'utf8'),
+    );
+
     copyAll(assets, 'storybook');
 
     for (const name of ['main.js', 'myTheme.ts', 'tsconfig.json', 'tsconfig.doc.json']) {

scripts/schematics-assets.build.mjs

@@ -278,8 +278,12 @@ function main() {
   // dur les stories de tous les composants du monorepo. Ni l'une ni l'autre
   // ne transposent tel quel chez un consommateur qui n'a copié qu'une partie
   // des composants.
-  // `Introduction`, elle, n'a aucune dépendance au monorepo (texte + images
-  // statiques) : FSHSP-138 corrige son absence, oubliée jusqu'ici.
+  // `Introduction`, elle, est en majorité indépendante du monorepo (texte +
+  // images statiques) : FSHSP-138 corrige son absence, oubliée jusqu'ici. Ses
+  // sections "Application de démonstration" / "Ressources Figma" restent
+  // spécifiques À CE DÉPÔT : `ng-add` les court-circuite avec un scaffold
+  // (`src/ng-add/files/storybook/docs/Introduction.mdx`), posé avant cette
+  // copie brute — voir `scaffoldStorybook`.
   const introSrc = join(ROOT, 'storybook/docs/Introduction.mdx');
   if (existsSync(introSrc)) {
     mkdirSync(join(ASSETS, 'storybook/docs'), { recursive: true });