Inicio
Blog
¿Cómo configurar Storybook para utilizar Ant Design? (Parte 3)
Programación, Tutoriales

¿Cómo configurar Storybook para utilizar Ant Design? (Parte 3)

Requisitos 

En la segunda parte aprendimos cómo mockear las peticiones que hacen nuestros componentes al servidor, mientras en la primera, cómo crear un proyecto con la configuración necesaria para trabajar con Storybook, y así poder testear nuestros componentes. Hoy seguimos evaluando otras interesantes aristas de esta herramienta.

Introducción

En muchos proyectos utilizamos biblioteca de componentes. En React existen muchas de ellas, y aunque ya tienen muy bien definidas sus características y funcionamiento, es bueno testear cómo se integrarán con los componentes que crearemos y formarán parte de nuestra aplicación, con sus propias particularidades. Por ello, es muy buena idea configurar Antd con Storybook. En este articulo estaremos viendo cuales son los pasos necesarios para que Antd quede integrado con Storybook.

Código de la aplicación

https://github.com/giorbismiguel/aprendiendo_storybook

¿Qué  es Ant Design?

Ant Design es una biblioteca de componentes para ReactJs que podemos utilizar en nuestros proyectos. Nos permite crear interfaces más complejas utilizando las estructuras que tienen y aprovechando a su vez la interactividad que ofrecen, además, ganamos en tiempo pues sus componentes son altamente configurables y evita, en su gran mayoría, tener que hacer adaptaciones de los mismos.

Instalación y configuración de Ant Design con Storybook

Para configurar Ant Design con Storybook lo primero que tenemos que hacer es instalar la librería dentro de un proyecto que tenga React e Storybook configurados. Partiendo de esta configuración abrimos el proyecto con nuestro editor favorito y en la raíz del mismo, ejecutamos el siguiente comando para instalar Ant Design.

yarn add antd

Instalar (yarn add antd)

 

Al terminar la instalación tenemos que decirle a Storybook que utilice las hojas de estilo CSS de Antd, para lo cual vamos a la carpeta .storybook dentro del proyecto y buscamos el fichero preview.js y le agregamos al principio la línea: import ‘antd/dist/antd.css’;

 

Importar  antd

Luego vamos a la carpeta components y agregamos 2 ficheros: AntdCard.jsx y AntdCard.stories.jsx. Así vamos a probar que al importar un componente de Antd Design carga correctamente dentro de Storybook. Esto significa que los componentes se muestran correctamente, y con los estilos de css que tiene predefinido Ant Design.

Para probar, vamos a utilizar el componente Card de Ant Design y específicamente la variante:  https://ant.design/components/card/#components-card-demo-simple. Aquí tiene un ejemplo que debe copiar dentro del fichero: AntdCard.jsx.

import React from "react";
import { Card } from "antd";
const { Meta } = Card;

export const AntdCard = () => {
  return (
    <Card
      hoverable
      style={{ width: 240 }}
      cover={
        <img
          alt="example"
          src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
        />
      }
    >
      <Meta title="Europe Street beat" description="www.instagram.com" />
    </Card>
  );
};

 

Ahora vamos a crear la historia para ese componente para lo cual se debe abrir el fichero AntdCard.stories.jsx y actualízalo con el siguiente código:

import React from 'react'

import { AntdCard } from './AntdCard';


export default {

  title: "AntD Card",

  component: AntdCard,

};


export const DefaultState = () => <AntdCard />;

Con esto ya se puede probar el comando para levantar el Storybook y chequear si el componente Card cargó correctamente, igual que como están los ejemplos en el sitio de And Desing. Para ello ejecutamos el comando:

yarn storybook

yarn storybook

 

Debe cargar la página de Storybook en la url Local,  chequear que se muestra correctamente el componente Card de Ant Design, justo como se puede observar en la siguiente imagen:

Storybook

Conclusiones

Al integrar Antd con Storybook, dentro de un proyecto, todos los componentes de la aplicación se podrán ver como lo hará el cliente. La librería Antd, por su parte, posibilita que en la aplicación se puedan crear formularios, tablas y otras estructuras más complejas.Todo esto lo vas a poder ver y testear, dentro de Storybook, con los estilos y clases CSS. Con esta importante herramienta las librerías son más útiles. Es una excelente combinación que recomendamos.

Bibliografía

  1. https://ant.design/ 
  1. https://storybook.js.org/tutorials/intro-to-storybook/react/en/get-started/

 

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuar!

Promedio de puntuación 3.7 / 5. Recuento de votos: 9

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

¡Siento que este contenido no te haya sido útil!

¡Déjame mejorar este contenido!

Dime, ¿cómo puedo mejorar este contenido?

Déjanos tu comentario

Daisy Diana Vargas Vento

“De Dofleini Software hemos aprendido la competitividad que exige este mercado”

Daisy Diana Vargas Vento Subdirectora de la División Integradora de Negocios de Desoft