Skip to content

Commit

Permalink
Merge pull request #7 from aulasoftwarelibre/update-202403
Browse files Browse the repository at this point in the history 
Update 202403
  • Loading branch information
@sgomez
sgomez authored Mar 10, 2024
2 parents 8021a75 + f708ce2 commit 3057bb9
Show file tree
Hide file tree
Showing 10 changed files with 513 additions and 484 deletions.
115 changes: 65 additions & 50 deletions docs/install.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,22 +40,18 @@ imports.
Procedemos a instalar las dependencias de desarrollo:

```bash
npm install --save-dev prettier eslint-config-prettier eslint-plugin-import \
eslint-plugin-prettier eslint-plugin-simple-import-sort eslint-plugin-sort \
eslint-plugin-unused-imports @typescript-eslint/eslint-plugin \
@typescript-eslint/parser
npm install --save-dev "@typescript-eslint/eslint-plugin@^6" "@typescript-eslint/parser@^6" \
eslint-plugin-import eslint-plugin-simple-import-sort eslint-plugin-sort eslint-plugin-unused-imports \
prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-unicorn
```

Y a continuación vamos a editar el archivo `.eslintrc.json` con este contenido:

```json title=".eslintrc.json"
{
"env": {
"node": true,
"jest": true
},
"extends": [
"next",
"plugin:unicorn/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
Expand Down Expand Up @@ -88,6 +84,7 @@ Y a continuación vamos a editar el archivo `.eslintrc.json` con este contenido:
"sort/destructuring-properties": "error",
"sort/object-properties": "error",
"sort/type-properties": "error",
"unicorn/no-null": "off",
"unused-imports/no-unused-imports": "error"
}
}
Expand Down Expand Up @@ -129,18 +126,36 @@ npm run lint -- --fix

```json title=".vscode/settings.json"
{
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.organizeImports": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
"editor.codeActionsOnSave": {
"source.fixAll": "always",
"source.organizeImports": "always"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
```

Esta configuración de vscode es exclusiva para este proyecto, se puede
configurar para que lo haga en todos los que creemos si configuramos
estas opciones en el entorno de usuario.

Probablemente veamos un error indicando que el plugin `esbenp.prettier-vscode`
no existe, debido a que probablemente no lo tengamos instalado. Los IDE
suelen proporcionar plugins que facilitan el trabajo. Si quieres, puedes instalar
esa extensión manualmente o crear este fichero que te recomendará instalar
varias extensiones que usaremos en este taller.


```json title=".vscode/extensions.json"
{
"recommendations": [
"esbenp.prettier-vscode",
"vitest.explorer",
"bradlc.vscode-tailwindcss"
]
}
```

Se recomienda ver el [Taller de VSCode](https://aulasoftwarelibre.github.io/taller-vscode/).

## Git hooks
Expand Down Expand Up @@ -173,15 +188,15 @@ npm install --save-dev husky lint-staged

Y creamos el archivo de configuración:

```javascript title=".lintstagedrc.js"
const path = require('path')
```javascript title=".lintstagedrc.mjs"
import { relative } from 'path'

const buildEslintCommand = (filenames) =>
`next lint --fix --file ${filenames
.map((f) => path.relative(process.cwd(), f))
.map((f) => relative(process.cwd(), f))
.join(' --file ')}`
module.exports = {

export default {
'*.{js,jsx,ts,tsx}': [buildEslintCommand],
}
```
Expand All @@ -198,9 +213,8 @@ module.exports = {
Y ahora configuramos husky para que ejecute lint-staged antes de cada commit:

```
npm pkg set scripts.prepare="husky install"
npm run prepare
npx husky add .husky/pre-commit "npx lint-staged"
npx husky init
echo "npx lint-staged" > .husky/pre-commit
```

### Configurar _conventional commits_
Expand All @@ -222,8 +236,8 @@ dependencias:

```bash
npm install --save-dev @commitlint/{config-conventional,cli}
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > .commitlintrc.js
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'
echo "export default { extends: ['@commitlint/config-conventional'] }" > .commitlintrc.mjs
echo "npx --no -- commitlint --edit ${1}" > .husky/commit-msg
```

Y una vez hecho todo eso intentamos ya, por fin, guardar los cambios y veremos
Expand All @@ -242,52 +256,53 @@ git commit -m "chore: configure linting, lint-staged and conventional commits"
git commit --allow-empty -m "invalid message"
```

## Jest
## Vitest

Para completar nuestro entorno, vamos a configurar jest. Jest es un marco de pruebas (testing framework) ampliamente utilizado en el desarrollo de aplicaciones JavaScript y React. Sirve para automatizar y simplificar la realización de pruebas unitarias, de integración y funcionales en el código de tu aplicación. Jest facilita la creación de pruebas al proporcionar un conjunto de utilidades y funciones que permiten escribir y ejecutar pruebas de manera eficiente, asegurando que tu código funcione como se espera y reduciendo la probabilidad de errores en producción.
Para completar nuestro entorno, vamos a configurar Vitest. Vitest es un marco de pruebas (testing framework) moderno y rápido, diseñado específicamente para el ecosistema de Vite, pero que también se adapta perfectamente al desarrollo de aplicaciones React. Ofrece una experiencia de prueba eficiente y optimizada, facilitando la realización de pruebas unitarias, de integración y funcionales. Gracias a su compatibilidad con la API de Jest, Vitest permite una transición suave para aquellos proyectos que desean mejorar su velocidad y eficiencia en las pruebas.

Instalamos las dependencias:

```bash
npm install --save-dev jest jest-environment-jsdom @testing-library/react \
@testing-library/jest-dom
npm install --save-dev vitest @testing-library/react @vitejs/plugin-react jsdom
```

Y creamos el archivo de configuración:

```js title="jest.config.mjs"
import nextJest from 'next/jest.js'

const createJestConfig = nextJest({
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
dir: './',
```js title="vitest.config.mjs"
import { defineConfig } from 'vitest/config'

export default defineConfig({
// Specify the test environment
test: {
// Use jsdom environment
environment: 'jsdom',
// Setup files to be run before each test
// setupFiles: ['./vitest.setup.js'],

// Import assertion library or any global setup
globals: true,

// Add react plugin
plugins: [react()],

// Enable if you're using React 18's server components or need top-level await support
// ssr: true,
}
})

// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const config = {
// Add more setup options before each test is run
// setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],

testEnvironment: 'jest-environment-jsdom',
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config)
```

Y con el siguiente comando podremos añadir un comando test a npm:

```bash
npm pkg set scripts.test="jest"
npm pkg set scripts.test="vitest"
```

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

!!! tip
A partir de aquí ya tendríamos una plantilla básica para trabajar con Next.
Puede usarse ya como [plantillas de repositorios para Github](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository) o esperar a la siguiente sección donde se
añadirá una librería de componentes y la herramienta _Storybook_, aunque eso
provoca que la plantilla sea menos versátil.
provoca que la plantilla sea menos versátil.
7 changes: 3 additions & 4 deletions docs/new-project.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ En este capítulo, aprenderemos a crear un nuevo proyecto de React utilizando Ne

## Instalación

Crear un boilerplate desde cero para hacer funcionar múltiples herramientas de Node.js, como React, NextUI, Jest y Storybook, puede ser una tarea desafiante y propensa a errores, especialmente para los novatos. Los problemas de configuración, las dependencias en conflicto y las incompatibilidades pueden ser una fuente de frustración significativa. Esto puede desanimar a los principiantes y hacer que el proceso de inicio sea más largo y complicado de lo deseado, en lugar de permitirles centrarse directamente en el desarrollo de sus aplicaciones.
Crear un boilerplate desde cero para hacer funcionar múltiples herramientas de Node.js, como React, NextUI, Vitest y Storybook, puede ser una tarea desafiante y propensa a errores, especialmente para los novatos. Los problemas de configuración, las dependencias en conflicto y las incompatibilidades pueden ser una fuente de frustración significativa. Esto puede desanimar a los principiantes y hacer que el proceso de inicio sea más largo y complicado de lo deseado, en lugar de permitirles centrarse directamente en el desarrollo de sus aplicaciones.

## Dependencias

Expand All @@ -22,7 +22,6 @@ NextUI es una biblioteca de componentes de interfaz de usuario que se encuentra

Storybook es una importante herramienta en el desarrollo de React debido a su capacidad para permitir el desarrollo aislado de componentes, generar documentación en vivo con historias que muestran usos variados, fomentar la colaboración entre equipos y detectar errores de manera temprana. Esta herramienta agiliza el proceso de desarrollo al centrarse en componentes individuales, mejora la calidad del código al prevenir errores antes de la integración y facilita la comunicación entre diseñadores y desarrolladores al proporcionar una representación visual de los componentes en su estado real, lo que contribuye a una experiencia de usuario más sólida.

### Entornos de testing: Jest

Jest es una herramienta de prueba ampliamente utilizada en el ecosistema de React que ofrece un conjunto de bibliotecas y utilidades específicas para la realización de pruebas en aplicaciones React. Algunas de las bibliotecas más destacadas incluyen `@testing-library/react` y `@testing-library/jest-dom`, que proporcionan una API sencilla y efectiva para interactuar con componentes React y realizar afirmaciones sobre su comportamiento y apariencia en un entorno de prueba. Además, Jest también es conocido por su capacidad para realizar pruebas unitarias y de integración de manera eficiente, lo que lo convierte en una elección popular para el desarrollo y la garantía de calidad de aplicaciones React.
### Entornos de testing: Vitest

Vitest es una herramienta de pruebas moderna y rápida que se utiliza en el ecosistema de React, diseñada como una alternativa más eficiente a Jest. Proporciona un conjunto de bibliotecas y utilidades específicas para la realización de pruebas en aplicaciones React. Algunas de las bibliotecas más destacadas incluyen `@testing-library/react` para interactuar con componentes React y `@testing-library/jest-dom` para realizar afirmaciones sobre su comportamiento y apariencia en un entorno de prueba, aunque es importante notar que, a pesar del nombre `jest-dom`, es completamente compatible con Vitest gracias a su API compatible con Jest. Vitest es conocido por su alta velocidad y eficiencia. Además, Vitest facilita la ejecución de pruebas unitarias y de integración, ofreciendo características como la ejecución en paralelo y la recopilación de cobertura de código, lo que lo convierte en una excelente opción para el desarrollo y la garantía de calidad de aplicaciones React.
14 changes: 6 additions & 8 deletions docs/nextui.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,15 +102,15 @@ Para poder ver en funcionamiento el selector de tema claro/oscuro, vamos a crear

Para eso crearemos el siguiente componente:

```typescript title="src/components/ThemeSwitcher/ThemeSwitcher.tsx"
```typescript title="src/components/theme-switcher/theme-switcher.tsx"
"use client";

import { MoonIcon, SunIcon } from "@heroicons/react/24/solid";
import { Switch } from "@nextui-org/react";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";

export default function ThemeSwitcher() {
export function ThemeSwitcher() {
const [mounted, setMounted] = useState(false); // (1)!
const { theme, setTheme } = useTheme(); // (2)!

Expand Down Expand Up @@ -139,22 +139,20 @@ export default function ThemeSwitcher() {

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

```typescript title="src/components/ThemeSwitcher/index.ts"
export { default } from './ThemeSwitcher'
```typescript title="src/components/theme-switcher/index.ts"
export * from './theme-switcher'
```

!!! 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.
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'
import ThemeSwitcher from '@/components/ThemeSwitcher'
import { ThemeSwitcher } from '@/components/theme-switcher'

export default function Home() {
return (
Expand Down
Loading

0 comments on commit 3057bb9

Please sign in to comment.