Uibook

Uibook es una herramienta para pruebas visuales de componentes React. Te permite ver rápidamente tanto la vista de escritorio como la móvil de tus componentes con consultas de medios reales y diferentes combinaciones de props.

Las características clave:

• Pruebas responsivas para desarrolladores para jugar con consultas de medios reales
• Edición de texto en vivo para diseñadores y editores para verificar su contenido
• Instalado como un plugin de Webpack, no requiere ningún compilador adicional.

:triangular_flag_on_post: Revisa el proyecto demo de Uibook aquí: https://uibook.vrizo.net/.

Uso

Instalación rápida :hatching_chick:

Hemos diseñado Uibook para una integración fluida en tu proyecto. Instálalo como un plugin de webpack, y estarás listo: Uibook no requiere ningún empaquetador separado.

_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
    })
  ],
}

Lea más sobre la instalación → Instalar en Create React App usando CRACO →

Describir componentes en Páginas :hatched_chick:

Debe definir solo dos cosas:

• La Página — objeto simple con el nombre del componente de prueba y los casos;
• El Caso — conjunto de props y callbacks para el componente.

_button.uibook.js_

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

Lee más sobre la configuración →

Pasar Páginas al Controlador :baby_chick:

Tan pronto como termines tu primera Página de Uibook, estarás listo para escribir el Controlador de Uibook. Este es el lugar donde todas las Páginas se incluyen y se pasan a UibookStarter :sparkles:

_uibook-controller.js_

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

Lea más sobre el Controlador →

Lanzamiento :rocket:

No se necesitan servidores adicionales ni instancias de webpack. Uibook se integra en tu proyecto, así que solo ejecuta tu empaquetador y abre /uibook (o tu dirección personalizada — outputPath) en un navegador.

Más información

• Solución de problemas
• Ejemplos
• Pregúntame

Edición de texto en vivo

Este modo habilita contentEditable para cada caso, permitiendo a gerentes, diseñadores y editores de interfaz previsualizar contenido en los componentes.

Agradecimientos especiales

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

Cualquiera es bienvenido a contribuir, puedes consultar las tareas actuales en PLAN.md. Estaré encantado de responder tus preguntas sobre el proyecto.

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