En la guía anterior, Entorno de desarrollo por componentes con React, styled-components y storybook, dejé preparado el PC con las herramientas necesarias para poder desarrollar componentes en un ecosistema JavaScript. También creé un proyecto con estas herramientas e hice la prueba para ver si todo funcionaba correctamente.

En esta guía, mi intención es crear un componente muy básico para aprender a manejarme en este ecosistema JavaScript paso a paso

El primer problema con el que me encuentro es que el entorno creado con la herramienta create-react-app que instalé, genera un arquetipo de aplicación y para esta guía mis necesidades son otras. Así que empezaré por la configuración del proyecto.

Dejo el enlace al repositorio de la aplicación por si alguién más quiere echarle un ojo y/o clonarlo.

Configuración storybook

Lo primero es preparar la configuración de storybook para leer las historias creadas para cada componente. Para ello debo abrir el fichero .storybook/config.js y sustituir el contenido:

import { configure } from '@storybook/react';
function loadStories() {
  require('../src/stories');
}
configure(loadStories, module);

por algo como lo siguiente:

import { configure } from '@storybook/react';
const req = require.context('../src/components/', true, /stories\.js$/)
function loadStories() {
  req.keys().forEach(req)
}
configure(loadStories, module)

Información que he obtenido del siguiente hilo en GitHub: How to require all stories?.

Eliminación de ficheros

Lo siguiente que voy a hacer es eliminar algunos ficheros que no voy a usar, creados en el proceso de creación del proyecto, y que, de momento, no voy a necesitar. Si fuera necesario, más adelante volveré a crearlos.

Así que elimino el contenido de la carpeta src

Crear directorios

Dentro de la carpeta src crearé una carpeta llamada components:

cd src
mkdir components

En este carpeta alojaré todos los componentes que vaya creando en este proyecto.

Crear un componente

Lo siguiente es crear una estructura de carpetas donde alojar un componente. El primero que voy a crear es un simple párrafo con algún estilo bastante básico. Como puede verse en la imagen de abajo, he creado un directorio llamado Paragraph que contiene los ficheros index.js, stories.js y styled.js.

Voy a indicar el contenido de cada uno de los ficheros para que quede más claro la función de cada uno de ellos.

Fichero index.js

import React from 'react';

/**  styles **/
import {StyleParagraph} from './styled';

/** Crear un componente **/
const Paragraph = () =>  (
    <StyleParagraph>Esto es un párrafo</StyleParagraph>
);

/** Nombrar por defecto para exportar el componente **/
export default Paragraph;

Fichero styled.js

/** Importar la librería styled-components **/
import styled from 'styled-components';

/** Indicar el estilo para un elemento de tipo párrafo **/
const StyleParagraph = styled.p`
    font-size: 150%;
    font-family: Arial;
    text-align: center;
    background-color: #EFEFEF;
    padding: 2rem;
    max-width: 20rem;
    margin: auto;
    text-transform: lowercase;
    font-variant: small-caps;
    display: flex;
    flex-flow: column;
    align-items: center;
    align-content: flex-start;
    justify-content: flex-start;
`;

/** Exportar los elementos del fichero **/
export {StyleParagraph};

Fichero stories.js

/** Importar la librería React **/
import React from 'react';

/** Importar la utilidad storiesOf de storybook **/
import { storiesOf } from '@storybook/react';

/** Importar el componente Paragraph de nuestro fichero index.js **/
import Paragraph from '.';

/** Crear una historia con el componente Paragraph **/
storiesOf('Paragraph', module).add('default', () => <Paragraph />);

Resultado

Una vez hecho todo esto arranco el proyecto con la instrucción vista en la guía anterior:

npm run storybook

y el navegador me muestra el siguiente resultado:

Anotaciones

Tras la realización del primer componente llego a las siguientes conclusiones:

1. Siempre se importa el componente desde el fichero index.js, tal y como hago en el fichero stories.js. El '.' hace referencia a este fichero.
2. El componente ya tiene los estilos asociados, ya que este es el que se encarga, a su vez, de importar los estilos desde el fichero styled.js

Conclusión

En primer lugar, este componente, compuesto unicamente por un párrafo (p) y que tienen asociados unos estilos, es demasiado sencillo y acabaré eliminando de este proyecto. En todo caso, si que me es útil para ver y comprender los conceptos básicos de esta tecnología.