Instalación y Configuración de Storybook con JavaScript

¿Cómo empezar con Storybook y su instalación?

Para sumergirnos en el interesante mundo de Storybook, primero debemos abordar la instalación y entender qué hace después de estar instalada. Storybook es crucial en el diseño de sistemas (Design System) y, por ello, exploraremos desde su instalación hasta su funcionamiento inicial. Este proceso fomenta una mejor organización y funcionalidad de los proyectos, permitiendo una visualización clara y documentación de los componentes.

¿Cómo se instala Storybook?

Para instalar Storybook, es esencial seguir las recomendaciones de la documentación oficial. Allí se ofrecen guías detalladas para su instalación en React, Vue, Angular, y otros marcos, aunque en este caso utilizaremos JavaScript, también conocido como Vanilla JavaScript. Aquí hay un resumen paso a paso:

1. Requisitos previos:

   • Asegúrate de tener configuradas las carpetas de tu proyecto y el conocimiento básico necesario para utilizar NPX en tu computadora.

2. Instalación:

   • Primero, verifica que tienes acceso a la terminal en tu editor de código (por ejemplo, Visual Studio Code).
   • Dirígete a la documentación oficial de Storybook para encontrar el comando exacto de instalación que necesitas.
   • Ejecuta el comando de instalación en la terminal, eliminando cualquier parámetro como addStory si aparece, ya que no es necesario.
   • Durante la instalación, si aparece una pregunta, simplemente presiona y para continuar.
   • Una vez instalado, ejecuta npm run storybook para ver Storybook en acción.

¿Cómo funciona Storybook después de la instalación?

Después de la instalación, Storybook crea un entorno interactivo para visualizar y manipular componentes. Aquí describimos qué puedes esperar y cómo navegar en su interfaz:

1. Interfaz gráfica:

   • Al ejecutar Storybook, abrirá una ventana en tu navegador en localhost:2.6006, mostrando un menú a la izquierda con una serie de componentes predeterminados.
   • Puedes hacer clic en cualquier componente para visualizar sus características y modificar propiedades en el panel derecho.

2. Controles y variantes:

   • Storybook permite manipular componentes a través de controles de propiedades (como isPrimary, label, y backgroundColor), ideal para probar diferentes variantes de un componente.
   • Esta funcionalidad es especialmente útil si estás familiarizado con trabajos de variantes en herramientas como Figma.

3. Documentación integrada:

   • Storybook proporciona documentación detallada sobre cada componente, permitiendo verificar su existencia, rastrear su uso y copiar el código necesario para su implementación.

4. Opciones avanzadas:

   • La barra superior incluye herramientas adicionales para ajustar configuraciones como padding, visualizar en diferentes dispositivos (móvil y escritorio), y más.

¿Qué características tiene el código generado por Storybook?

Storybook no solo ofrece un entorno visual, sino también una estructura lógica sólida detrás de escena:

Estructura del proyecto

• Archivo principal: main.js:

  • Este archivo define la configuración básica de Storybook, incluyendo la lista de historias y addons necesarios.

• Archivos de historias:

  • Estos proporcionan la información sobre dónde leer y cómo mostrar las historias en el navegador.
  • Cada componente se apoya generalmente en un trío de archivos: JavaScript (la funcionalidad), CSS (los estilos), y las historias (para Storybook).

• Addons:

  • Storybook incluye addons esenciales por defecto para enriquecer la experiencia del usuario y probar diferentes aspectos de los componentes, como accesibilidad.

Exploración del código

• JavaScript y CSS:

  • El componente se construye con un archivo de JavaScript para la lógica y un archivo CSS para los estilos.

• Historias:

  • El archivo de historias permite que el componente aparezca en Storybook al importar sus funciones y estilos.

Al descomponer la complejidad de Storybook en pasos simples, puedes empezar a crear sistemas de diseño efectivos y eficientes. ¡Ánimo! A medida que avanzas con Storybook, estarás construyendo una base sólida para futuros proyectos de desarrollo y diseño.