Extraits réutilisables

export const sdkComponents = [
  { "name": "CardForm", "version": "2.4.0", "status": "Stable", "docs": "/components/card-form" },
  { "name": "PinReveal", "version": "1.9.2", "status": "Beta", "docs": "/components/pin-reveal" }
];

export const ComponentsTable = ({ rows }) => (
  <table>
    <thead>
      <tr>
        <th>Composant</th>
        <th>Version</th>
        <th>Statut</th>
      </tr>
    </thead>
    <tbody>
      {rows.map((row) => (
        <tr key={row.name}>
          <td><a href={row.docs}>{row.name}</a></td>
          <td><code>{row.version}</code></td>
          <td>{row.status}</td>
        </tr>
      ))}
    </tbody>
  </table>
);

---
title: "Composants SDK"
description: "Tous les composants du SDK, avec leur version actuelle et leur statut."
---

import { sdkComponents } from "/snippets/sdk-components.js";
import { ComponentsTable } from "/snippets/components-table.jsx";

Le SDK inclut {sdkComponents.length} composants.

<ComponentsTable rows={sdkComponents} />

## Composants stables

<ComponentsTable rows={sdkComponents.filter((row) => row.status === "Stable")} />

import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
import { parse } from "yaml";

const components = parse(readFileSync("sdk-components.yaml", "utf8"));
const slug = (name) => name.toLowerCase().replace(/[^a-z0-9]+/g, "-");

// Un snippet avec toutes les données, pour les tableaux et listes n'importe où dans la documentation.
writeFileSync("snippets/sdk-components.js", `export const sdkComponents = ${JSON.stringify(components, null, 2)};\n`);

// Une page par composant.
mkdirSync("components", { recursive: true });
for (const component of components) {
  const page = `---
title: ${JSON.stringify(component.name)}
description: ${JSON.stringify(component.description)}
---

{/* Généré à partir de sdk-components.yaml par scripts/generate-docs.mjs. Modifiez le YAML, pas ce fichier. */}

| Champ | Valeur |
| --- | --- |
| Version | \`${component.version}\` |
| Statut | ${component.status} |
`;
  writeFileSync(`components/${slug(component.name)}.mdx`, page);
}

// Garder la navigation synchronisée : remplacer les pages du groupe nommé "Components", où qu'il se trouve.
const docs = JSON.parse(readFileSync("docs.json", "utf8"));
const findGroup = (node) => (Array.isArray(node) ? node.map(findGroup).find(Boolean) : node && typeof node === "object" ? (node.group === "Components" ? node : findGroup(Object.values(node))) : undefined);
const group = findGroup(docs.navigation);
if (group) {
  group.pages = components.map((component) => `components/${slug(component.name)}`);
  writeFileSync("docs.json", `${JSON.stringify(docs, null, 2)}\n`);
}

name: Generate docs from YAML

on:
  push:
    paths:
      - sdk-components.yaml
      - scripts/generate-docs.mjs
  workflow_dispatch:

permissions:
  contents: write

jobs:
  generate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm install yaml
      - run: node scripts/generate-docs.mjs
      - name: Commit generated files
        run: |
          git add -A
          if git diff --cached --quiet; then
            echo "Nothing changed."
            exit 0
          fi
          git config user.name "github-actions[bot]"
          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
          git commit -m "docs: regenerate from sdk-components.yaml"
          git push