Skip to content

Commit

Permalink
feat: complete nextui and storybook chapters
Browse files Browse the repository at this point in the history
  • Loading branch information
@sgomez
sgomez committed Oct 1, 2023
1 parent 98a7631 commit 8857d3a
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 42 deletions.
2 changes: 1 addition & 1 deletion docs/install.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ Y con el siguiente comando podremos añadir un comando test a npm:
npm pkg set scripts.test="jest"
```

!!! question
!!! question "Ejercicio"
Se deja como ejercicio, guardar los cambios en git con la configuración de
jest y siguiendo conventional commits para el mensaje.

Expand Down
96 changes: 85 additions & 11 deletions docs/nextui.md
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,41 @@
Ya tenemos Next instalado, pero ahora necesitamos integrar el resto de componentes que vamos a necesitar para trabajar: Jest, Storybook y NextUI.
Ya tenemos Next instalado, pero ahora necesitamos integrar el resto de componentes que vamos a necesitar para trabajar.

## NextUI

Esta librería de componentes se apoya en TailwindCSS con lo que su instalación nos dará muy pocos problemas y viene bien descrita en la [web oficial](https://storiesv2.nextui.org/docs/frameworks/nextjs). En cualquier caso, vamos a instalarlo con el paquete `@heroicons/react`, que nos permitirá tener un paquete de iconos en la aplicación.
Esta librería de componentes se apoya en TailwindCSS con lo que su instalación nos dará muy pocos problemas y viene bien descrita en la [web oficial](https://storiesv2.nextui.org/docs/frameworks/nextjs). En cualquier caso, vamos a instalarlo con el paquete `@heroicons/react`, que nos permitirá tener un paquete de iconos en la aplicación y con `next-themes` para poder aplicar tema oscuro o
claro.

```bash
npm install @nextui-org/react framer-motion @heroicons/react
npm install @nextui-org/react framer-motion @heroicons/react next-themes
```

Ahora necesitamos configurar el fichero de estilos de `tailwindcss` para que
soporte los componentes de NextUI.

```typescript title="tailwind.config.ts" hl_lines="1 9 11 12"
import { nextui } from '@nextui-org/react'
import type { Config } from 'tailwindcss'

const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
],
darkMode: 'class',
plugins: [nextui()],
theme: {
extend: {
backgroundImage: {
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
},
},
},
}
export default config
```

### Dark theme
Expand Down Expand Up @@ -34,13 +64,45 @@ export function Providers({children}: { children: React.ReactNode }) {
!!! info
La notación ```"use client";``` es exclusiva de algunos frameworks con soporte de `React Server Components`. Se verá su uso durante el curso.

Y este archivo de providers se debe cargar en el layout principal:

```typescript title="src/app/layout.tsx" hl_lines="6 23"
import './globals.css'

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

import { Providers } from './providers'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
description: 'Aplicación del taller de Next del Aula de Software Libre',
title: 'Taller de Next con Typescript',
}

export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className="dark">
<body className={inter.className}>
<Providers>{children}</Providers>
</body>
</html>
)
}
```

### Nuestro primer componente: ThemeSwitcher

Para poder ver en funcionamiento el selector de tema claro/oscuro, vamos a crear un _switch_ para cambiar de un tema a otro.

Para eso crearemos el siguiente componente:

```typescript title="src/components/ThemeSwitcher/index.tsx"
```typescript title="src/components/ThemeSwitcher/ThemeSwitcher.tsx"
"use client";

import { MoonIcon, SunIcon } from "@heroicons/react/24/solid";
Expand Down Expand Up @@ -75,16 +137,20 @@ export default function ThemeSwitcher() {
2. Hook proporcionado por next-themes para conocer el tema y cambiarlo.
3. Esta función se ejecuta una sola vez, justo después de que el componente se haya montado, y cambia el estado del hook a _true_.

Y a continuación vamos a crear un fichero `index.ts` en ese directorio:

Y para que funcione vamos a hacer un par de cambios. Eliminamos los estilos que nos trae por defecto la plantilla de Next:

```css title="src/app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;
```typescript title="src/components/ThemeSwitcher/index.ts"
export { default } from './ThemeSwitcher'
```

Y añadimos nuestro componente a la página principal:
!!! note

En React, los componentes pueden organizarse de diferentes maneras. Pueden colocarse directamente en el directorio `components`; dentro de un directorio
con el nombre del componente y en un archivo index.tsx o como en el ejemplo, utilizando archivos `index.ts` para exportar componentes de manera centralizada. La elección depende del proyecto y las preferencias del equipo.



Vamos a probar a añadir nuestro componente a la pagina principal:

```typescript title="src/app/page.tsx" hl_lines="2 13"
import Image from 'next/image'
Expand All @@ -111,6 +177,14 @@ export default function Home() {
1. Añadimos el componente antes del logo de Vercel. El IDE importará automáticamente el componente.
Y para que funcione vamos a hacer un par de cambios. Eliminamos los estilos que nos trae por defecto la plantilla de Next:
```css title="src/app/globals.css"
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Ahora, ya tendremos la página principal con nuestro componente para cambiar al tema claro:
![Alt text](images/next-light-theme.png)
Expand Down
84 changes: 54 additions & 30 deletions docs/storybook.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,28 @@ Sin embargo, no suele ser sencillo de configurar. Aunque la herramienta de insta

## Instalación

En vez de dirigirnos a la web principal, vamos a indicar los pasos a seguir. Lo primero es instalar storybook dentro de nuestro proyecto.
En vez de dirigirnos a la web principal, vamos a indicar los pasos a seguir. Lo primero es instalar storybook dentro de nuestro proyecto. Nos preguntará si
queremos usar el plugin de eslint, le diremos que sí.

```bash
npx storybook@latest init
npx storybook@latest init -t nextjs
```

!!! note
Normalmente el instalador detecta el tipo de proyecto, pero hemos tenido
algún problema haciendo este tutorial, por eso estamos forzando a detectar
nextjs con el parámetro `-t nextjs`.


Seleccionaremos todas las respuestas por defecto. Con esto ya tendremos una serie de componentes básicos para que podamos ver su funcionamiento:

```bash
npm run storybook
```

!!! info
La primera vez que se instala se inicia solo y nos muestra un tutorial.

Se nos abrirá esta página con algunos componentes de ejemplo:

![Landing page de Storybook](images/storybook-landingpage.png)
Expand All @@ -26,34 +36,17 @@ Se nos abrirá esta página con algunos componentes de ejemplo:
!!! warning
Storybook crea una serie de historias de ejemplo en el directorio `src/stories`. Recuerda no guardarlas en git.

## Creación de una historia

Una historia en Storybook es una representación visual y funcional de un componente de React en un estado particular o variación. Cada historia describe cómo se ve y se comporta un componente en un contexto específico, lo que facilita la visualización y documentación de su uso y apariencia.

Vamos a crear la historia del componente que creamos antes:

```typescript title="src/stories/components/ThemeSwitcher.stories.ts"
import ThemeSwitcher from "@/components/ThemeSwitcher";
import { Meta, StoryObj } from "@storybook/react";
## Configuración de Storybook

const meta = {
title: 'Components/ThemeSwitcher',
component: ThemeSwitcher,
} satisfies Meta<typeof ThemeSwitcher>

export default meta;
type Story = StoryObj<typeof meta>;

export const Basic: Story = {}
```

!!! info
Es probable que storybook se vuelva inestable cuando se añade un nuevo fichero.
Si fuera así hay que reiniciarlo.
Storybook es una aplicación distinta a la de next, por tanto, no tiene por qué
cargar la misma configuración que tenemos en nuestro proyecto. Esta es la parte
más complicada de hacer funcionar Storybook.

Y aparecerá una nueva sección llamada componentes que tendrá nuestra historia. Desgraciadamente no se verá como se espera. Eso es debido a que tenemos que configurar nuestro entorno para que sea el mismo qeu tiene next. Para ello debemos modificar los archivos que están en el directorio `.storybook`.
En nuestro caso tenemos tres partes que tenemos que configurar: el entorno de
typescript, los estilos de NextUI y los providers para los estados de los
componentes.

Este fichero permite usar los alias de typescript:
Vamos a empezar por el entorno de typescript. Necesitamos que Storybook entienad los paths que tenemos configurados en el archivo `tsconfig.json`:

```typescript title=".storybook/main.ts" hl_lines="2 19-27"
import type { StorybookConfig } from "@storybook/nextjs";
Expand Down Expand Up @@ -87,7 +80,11 @@ const config: StorybookConfig = {
export default config;
```

Este fichero nos permite cargar los estilos:
A continuación vamos a cargar los providers a la hora de visualizar los
componentes:

!!! warning
El fichero `.storybook/preview.ts` debe ser renombrado a `.storybook/preview.tsx`. Después es probable que tengas que reiniciar el storybook.

```typescript title=".storybook/preview.tsx" linenums="1" hl_lines="2-5 9-15"
import type { Preview } from "@storybook/react";
Expand Down Expand Up @@ -119,10 +116,37 @@ const preview: Preview = {
export default preview;
```


## Creación de una historia

Una historia en Storybook es una representación visual y funcional de un componente de React en un estado particular o variación. Cada historia describe cómo se ve y se comporta un componente en un contexto específico, lo que facilita la visualización y documentación de su uso y apariencia.

Vamos a crear la historia del componente que creamos antes:

```typescript title="src/stories/components/ThemeSwitcher.stories.ts"
import ThemeSwitcher from "@/components/ThemeSwitcher";
import { Meta, StoryObj } from "@storybook/react";

const meta = {
title: 'Components/ThemeSwitcher',
component: ThemeSwitcher,
} satisfies Meta<typeof ThemeSwitcher>

export default meta;
type Story = StoryObj<typeof meta>;

export const Basic: Story = {}
```

!!! warning
El fichero `.storybook/preview.ts` debe ser renombrado a `.storybook/preview.tsx`.
Es probable que storybook se vuelva inestable cuando se añade un nuevo fichero. Si fuera así hay que reiniciarlo.

Y aparecerá una nueva sección llamada componentes que tendrá nuestra historia.

Ahora si reiniciamos _Storybook_ veremos nuestra historia de forma correcta. Podemos ya incluso borrar los componentes de ejemplo.
Ahora veremos nuestra historia de forma correcta. Podemos ya incluso borrar los componentes de ejemplo.

![Storybook configurado](images/storybook-configured.png)

!!! question "Ejercicio"
Guarda los cambios que hemos hecho y la historia que hemos creado en git.
No guardes los componentes de ejemplo.

0 comments on commit 8857d3a

Please sign in to comment.