Initial vault setup

2026-06-09 18:40:21 +02:00
commit bda02d587f
3692 changed files with 402457 additions and 0 deletions
@@ -0,0 +1,87 @@
+---
+title: Storybook
+created: 2026-06-08
+updated: 2026-06-08
+type: app
+tags: [catalogue, design, app-marathon3-rattrapage-b]
+confidence: high
+contested: false
+sources: [https://selfh.st/apps/?tag=design&app=storybook]
+---
+
+# 📚 Storybook
+
+> Atelier de développement de composants UI — développez, testez et documentez vos composants en isolation.
+
+## 📋 Informations Générales
+
+| Champ | Valeur |
+| :--- | :--- |
+| **Site web** | [storybook.js.org](https://storybook.js.org) |
+| **GitHub** | [storybookjs/storybook](https://github.com/storybookjs/storybook) |
+| **License** | MIT |
+| **Langage** | TypeScript |
+| **Étoiles GitHub** | ~85k ⭐ |
+| **Catégorie** | [[cat-design\|Design]] |
+
+## 📝 Description
+
+**Storybook** est un outil de **développement et documentation de composants UI** qui s'exécute en dehors de l'application principale. Chaque composant a ses **stories** (cas d'usage), testables visuellement, avec mocks, contrôles interactifs, a11y, et tests visuels. Différence vs **Penpot/Figma**: Storybook est **orienté code** (vous codez les composants en React/Vue/Angular/Svelte) alors que Penpot/Figma sont des outils de design visuels. Pour qui: équipes frontend qui veulent un **catalogue vivant** de leurs composants, accélérer les revues UI, partager un design system code-first.
+
+## 🚀 Installation
+
+Storybook n'est pas une "app" à deployer, c'est un outil dev dans votre projet. Mais il peut être **buildé statiquement** et hébergé.
+
+```bash
+# Dans un projet React existant
+npx storybook@latest init
+# Lance le dev server sur :6006
+npm run storybook
+
+# Build statique
+npm run build-storybook
+# → sortied dans storybook-static/
+```
+
+Hébergement via nginx/Caddy/Traefik du dossier `storybook-static/`.
+
+```nginx
+# nginx
+server {
+  listen 80;
+  server_name storybook.example.com;
+  root /var/www/storybook-static;
+  index index.html;
+  try_files $uri $uri/ /index.html;
+}
+```
+
+## 🔄 Alternatives
+
+### Open Source
+- [[app-penpot]] — Design graphique open source, pas code-first.
+- **Histoire** — Storybook-like pour Vue, plus léger.
+- **Pattern Lab** — Atomic design PHP/Node.
+- **Docz** — Documentation MDX React.
+
+### Propriétaires
+- **Figma** — Design cloud, leader.
+- **Sketch** — macOS only, payant.
+- **Bit.dev** — Catalogue de composants cloud.
+- **Zeroheight** — Documentation design system.
+
+## 🔐 Sécurité
+- **Build statique**: pas de runtime → surface d'attaque minimale.
+- **HTTPS**: obligatoire pour iframe embedding.
+- **Contrôle d'accès**: à protéger par SSO/Authentik si interne sensible.
+- **Add-ons**: surveiller la供应链 (npm).
+
+## 📚 Ressources
+- [Documentation](https://storybook.js.org/docs)
+- [GitHub](https://github.com/storybookjs/storybook)
+- [Add-ons registry](https://storybook.js.org/addons)
+
+## Pages Liées
+- [[cat-design]] — Catégorie Design
+- [[app-penpot]] — Design open source
+- [[recettes-docker-compose]] — Templates Docker