Uibook

Uibook est un outil de test visuel pour les composants React. Il vous permet de vérifier rapidement la vue desktop et mobile de vos composants avec de vraies media queries et différentes combinaisons de props.

Les fonctionnalités clés :

• Test responsive pour les développeurs pour jouer avec de vraies media queries
• Édition de texte en direct pour les designers et éditeurs pour vérifier leur contenu
• Installé en tant que plugin Webpack, il ne nécessite aucun builder supplémentaire.

:triangular_flag_on_post: Découvrez le projet démo Uibook ici : https://uibook.vrizo.net/.

Utilisation

Installation rapide :hatching_chick:

Nous avons conçu Uibook pour une intégration fluide à votre projet. Installez-le comme un plugin webpack, et vous êtes prêt : Uibook ne nécessite aucun bundler séparé.

_webpack.config.js_

const UibookPlugin = require('uibook/plugin')
module.exports = {
  …
  plugins: [
    new UibookPlugin({
      outputPath: '/uibook',
      controller: path.join(__dirname, '../src/uibook-controller.js'),
      hot: true
    })
  ],
}

En savoir plus sur l'installation → Installer dans Create React App avec CRACO →

Décrire les composants dans Pages :hatched_chick:

Vous devez définir uniquement deux choses :

• La Page — objet simple avec le nom du composant test et les cas ;
• Le Cas — ensemble de props et de callbacks pour le composant.

_button.uibook.js_

import UibookCase from 'uibook/case'
import Button from '../src/button'
export default {
  component: Button,
  cases: [
    () => Button,
    () => Small button
  ]
}

En savoir plus sur la configuration →

Passer les Pages au Contrôleur :baby_chick:

Dès que vous avez terminé votre première Page Uibook, vous êtes prêt à écrire le Contrôleur Uibook. C’est un endroit où toutes les Pages sont incluses et transmises à UibookStarter :sparkles:

_uibook-controller.js_

import UibookStarter from 'uibook/starter'
import ButtonUibook from './button.uibook'
export default UibookStarter({
  pages: {
    Button: ButtonUibook
  }
})

En savoir plus sur le Contrôleur →

Lancement :rocket:

Aucun besoin de serveurs supplémentaires ou d’instances webpack. Uibook s’intègre à votre projet, il suffit donc de lancer votre bundler et d’ouvrir /uibook (ou votre adresse personnalisée — outputPath) dans un navigateur.

Plus d’informations

• Dépannage
• Exemples
• Contactez-moi

Édition de texte en direct

Ce mode active contentEditable pour chaque cas, permettant aux managers, designers et éditeurs d’interface de prévisualiser le contenu dans les composants.

Remerciements spéciaux

• @ai
• @demiazz
• @marfitsin
• @iadramelk
• @ikowalsker
• @antiflasher
• @HellSquirrel

Toute personne est invitée à contribuer, vous pouvez consulter les tâches en cours dans PLAN.md. Je serai heureux de répondre à vos questions sur le projet.

--- Tranlated By Open Ai Tx | Last indexed: 2026-03-26 ---