Merge pull request #786 from chromaui/docs_intro_storybook_react_es_u…

…pdates

Docs: Adjusts Spanish translation version

README.md

@@ -239,7 +239,7 @@ Currently, the [Intro to Storybook tutorial](https://storybook.js.org/tutorials/
 | Framework    | Translation      | Updated |
 | ------------ | ---------------- | ------- |
 | React        | English          | ✅      |
-|              | Spanish          | ❌      |
+|              | Spanish          | ✅      |
 |              | Portuguese       | ❌      |
 |              | ZH-TW            | ❌      |
 |              | Mainland Chinese | ❌      |

content/intro-to-storybook/react/en/using-addons.md

@@ -5,7 +5,7 @@ description: 'Learn how to integrate and use the popular Controls addon'
 commit: 'f89cfe0'
 ---
 
-Storybook has a robust ecosystem of [addons](https://storybook.js.org/docs/configure/storybook-addons) that you can use to enhance the developer experience for everybody in your team. View them all [here](https://storybook.js.org/integrations).
+Storybook has a robust ecosystem of [addons](https://storybook.js.org/docs/configure/user-interface/storybook-addons) that you can use to enhance the developer experience for everybody in your team. View them all [here](https://storybook.js.org/integrations).
 
 If you've been following this tutorial, you've already encountered multiple addons and set one up in the [Testing](/intro-to-storybook/react/en/test/) chapter.
 

content/intro-to-storybook/react/es/conclusion.md

@@ -15,7 +15,7 @@ Storybook es una poderosa herramienta para React, React Native, Vue, Angular, Sv
 
 ¿Quieres explorar más a fondo? Aquí algunos recursos útiles:
 
-- [**Documentación oficial de Storybook**](https://storybook.js.org/docs/react/get-started/install) tiene la documentación del API, links comunitarios y una galería de complementos.
+- [**Documentación oficial de Storybook**](https://storybook.js.org/docs/get-started/install) tiene la documentación del API, links comunitarios y una galería de complementos.
 
 - [**Manual de pruebas de IU**](https://storybook.js.org/blog/ui-testing-playbook/) destaca las mejores prácticas del flujo de trabajo utilizado por equipos de alta velocidad en Twilio, Adobe, Peloton y Shopify.
 

content/intro-to-storybook/react/es/deploy.md

@@ -108,7 +108,8 @@ jobs:
 ```
 
 <div class="aside">
-💡 Para mantener el tutorial breve no mencionamos a [GitHub secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository). Secretos son variables de entorno seguras proporcionadas por GitHub para que no tengas que codificar el `project-token`. 
+
+💡 Para mantener el tutorial breve no mencionamos a [GitHub secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository). Secretos son variables de entorno seguras proporcionadas por GitHub para que no tengas que codificar el `project-token`.
 
 </div>
 

content/intro-to-storybook/react/es/get-started.md

@@ -35,14 +35,10 @@ Podemos comprobar rápidamente que los distintos entornos de nuestra aplicación
 # Start the component explorer on port 6006:
 yarn storybook
 
-# Run the frontend app proper on port 3000:
-yarn start
+# Run the frontend app proper on port 5173:
+yarn dev
 ```
 
-<div class="aside"> 
-💡 Observa el indicador --watchAll en el comando de prueba. Si incluyes este indicador en tu comando, garantizarás que se ejecuten todas las pruebas. Mientras avanzas en este tutorial, vas a ver diferentes escenarios de prueba. Es posible que desees considerar ajustar los scripts de tu archivo package.json en consecuencia.
-</div>
-
 Nuestras principales modalidades para la aplicación frontend son: el desarrollo de componentes (Storybook) y la propia aplicación.
 
 ![Main modalities](/intro-to-storybook/app-main-modalities-react.png)

content/intro-to-storybook/react/es/screen.md

@@ -113,7 +113,7 @@ const store = configureStore({
 export default store;
 ```
 
-Ahora que hemos actualizado nuestro store para recuperar los datos desde un endpoint de una API remota y lo hemos preparado para manejar los diversos estados de nuestra aplicación, vamos a crear nuestro `InboxScreen.js` en el directorio `src/components`:
+Ahora que hemos actualizado nuestro store para recuperar los datos desde un endpoint de una API remota y lo hemos preparado para manejar los diversos estados de nuestra aplicación, vamos a crear nuestro `InboxScreen.jsx` en el directorio `src/components`:
 
 ```jsx:title=src/components/InboxScreen.jsx
 import { useEffect } from 'react';
@@ -268,7 +268,7 @@ const preview = {
 export default preview;
 ```
 
-Por último, actualiza las historias `InboxScreen` y incluye un [parámetro](https://storybook.js.org/docs/react/writing-stories/parameters) que simula las llamadas API remotas:
+Por último, actualiza las historias `InboxScreen` y incluye un [parámetro](https://storybook.js.org/docs/writing-stories/parameters) que simula las llamadas API remotas:
 
 ```diff:title=src/components/InboxScreen.stories.jsx
 import InboxScreen from './InboxScreen';
@@ -338,7 +338,7 @@ Hasta ahora, hemos podido crear una aplicación completamente funcional desde ce
 
 ### Escribe una prueba de componente usando la función "play"
 
-La función [`play`](https://storybook.js.org/docs/react/writing-stories/play-function) de Storybook y [`@storybook/addon-interactions`](https://storybook.js.org/docs/react/writing-tests/component-testing) nos ayuda con esto. La función `play` incluye pequeños fragmentos de código que se ejecutan después de que se renderiza la historia.
+La función [`play`](https://storybook.js.org/docs/writing-stories/play-function) de Storybook y [`@storybook/addon-interactions`](https://storybook.js.org/docs/writing-tests/component-testing) nos ayuda con esto. La función `play` incluye pequeños fragmentos de código que se ejecutan después de que se renderiza la historia.
 
 La función play nos ayuda a verificar lo que sucede a la interfaz de usuario cuando se actualizan las tareas. Usa APIs del DOM que son "framework-agnostic", lo que significa que podemos escribir historias con la función play para interactuar con la interfaz de usuario y simular el comportamiento humano sin importar el framework del frontend.
 
@@ -431,7 +431,7 @@ Con la función de `play` de Storybook, pudimos eludir nuestro problema, permiti
 
 Pero, si miramos a Storybook más a fondo, podemos ver que solo ejecuta las pruebas de interacción al ver la historia. Por lo tanto, todavía tendríamos que revisar cada historia para ejecutar todas los checks si hacemos un cambio. ¿No podríamos automatizarlo?
 
-¡La buena noticia es que podemos! El [test runner](https://storybook.js.org/docs/react/writing-tests/test-runner) de Storybook nos permite hacer precisamente eso. Es una utilidad independiente accionado por [Playwright](https://playwright.dev/) que ejecuta todas nuestras pruebas de interacciones y detecta historias rotas.
+¡La buena noticia es que podemos! El [test runner](https://storybook.js.org/docs/writing-tests/test-runner) de Storybook nos permite hacer precisamente eso. Es una utilidad independiente accionado por [Playwright](https://playwright.dev/) que ejecuta todas nuestras pruebas de interacciones y detecta historias rotas.
 
 Vamos a ver cómo funciona. Ejecuta el siguiente comando para instalarlo:
 
@@ -457,7 +457,7 @@ yarn test-storybook --watch
 
 <div class="aside">
 
-💡 Las pruebas de componentes con la función play son una forma fantástica para probar los componentes de la interfaz de usuario. Puede hacer mucho más de lo que hemos visto aquí. Recomendamos leer la [documentación oficial](https://storybook.js.org/docs/react/writing-tests/component-testing) para aprender más al respecto.
+💡 Las pruebas de componentes con la función play son una forma fantástica para probar los componentes de la interfaz de usuario. Puede hacer mucho más de lo que hemos visto aquí. Recomendamos leer la [documentación oficial](https://storybook.js.org/docs/writing-tests/component-testing) para aprender más al respecto.
 
 Para profundizar aún más en las pruebas, puedes mirar el [Manual de pruebas](/ui-testing-handbook). Cubre las estrategias de prueba utilizadas por los equipos de front-end escalados para potenciar tu flujo de trabajo de desarrollo.
 

content/intro-to-storybook/react/es/simple-component.md

@@ -20,7 +20,7 @@ A medida que comencemos a construir `Task`, primero escribiremos nuestros tests
 
 ## Ajustes iniciales
 
-Primero, vamos a crear el componente Task y el archivo de historias de Storybook que lo acompaña: `src/components/Task.js` y `src/components/Task.stories.js`.
+Primero, vamos a crear el componente Task y el archivo de historias de Storybook que lo acompaña: `src/components/Task.js` y `src/components/Task.stories.jsx`.
 
 Comenzaremos con una implementación básica de `Task`, simplemente teniendo en cuenta los atributos que sabemos que necesitaremos y las dos acciones que puedes realizar con una tarea (para moverla entre las listas):
 
@@ -113,7 +113,7 @@ Para contarle a Storybook sobre el componente que estamos documentando, creamos
 
 Para definir nuestras historias, utilizaremos el formato Component Story Format 3 (también conocido como [CSF3](https://storybook.js.org/docs/api/csf) ) para crear cada uno de nuestros casos de prueba. Este formato está diseñado para crear cada uno de nuestros casos de prueba de manera concisa. Al exportar un objeto que contiene cada estado del componente, podemos definir nuestras pruebas de manera más intuitiva y crear y reutilizar historias de manera más eficiente.
 
-Argumentos o [`args`](https://storybook.js.org/docs/react/writing-stories/args), nos permiten editar en vivo nuestros componentes con el complemento "Controls" sin reiniciar Storybook. Una vez que cambia el valor de un [`arg`](https://storybook.js.org/docs/react/writing-stories/args), el componente también cambia.
+Argumentos o [`args`](https://storybook.js.org/docs/writing-stories/args), nos permiten editar en vivo nuestros componentes con el complemento "Controls" sin reiniciar Storybook. Una vez que cambia el valor de un [`arg`](https://storybook.js.org/docs/writing-stories/args), el componente también cambia.
 
 `fn()` nos permite crear llamadas o "callbacks" que aparecen en el panel de **actions** de la UI de Storybook cuando se hace clic. Así que cuando construyamos un botón de pin, podremos determinar si un clic en el botón es exitoso en la interfaz de usuario.
 
@@ -167,13 +167,13 @@ const preview = {
 export default preview;
 ```
 
-Los [`parametros`](https://storybook.js.org/docs/react/writing-stories/parameters) se utilizan normalmente para controlar el comportamiento de las funciones y complementos (addons) de Storybook. En nuestro caso, no los usaremos para ese propósito. En su lugar, importaremos el archivo CSS de nuestra aplicación.
+Los [`parametros`](https://storybook.js.org/docs/writing-stories/parameters) se utilizan normalmente para controlar el comportamiento de las funciones y complementos (addons) de Storybook. En nuestro caso, no los usaremos para ese propósito. En su lugar, importaremos el archivo CSS de nuestra aplicación.
 
 Una vez que hayamos hecho esto, reiniciar el servidor de Storybook debería producir casos de prueba para los tres estados de Task:
 
 <video autoPlay muted playsInline loop>
   <source
-    src="/intro-to-storybook/inprogress-task-states-6-0.mp4"
+    src="/intro-to-storybook/inprogress-task-states-7-0.mp4"
     type="video/mp4"
   />
 </video>
@@ -243,7 +243,7 @@ El maquetado adicional de arriba, combinado con el CSS que hemos importado antes
 
 ## Especificar los requerimientos de datos
 
-Es una buena práctica utilizar `propTypes` en React para especificar la forma de los datos que  un componente espera. No sólo se auto documenta, sino que también ayuda a detectar problemas de manera temprana.
+Es una buena práctica utilizar `propTypes` en React para especificar la forma de los datos que un componente espera. No sólo se auto documenta, sino que también ayuda a detectar problemas de manera temprana.
 
 ```diff:title=src/components/Task.jsx
 + import PropTypes from 'prop-types';

content/intro-to-storybook/react/es/test.md

@@ -43,7 +43,7 @@ Empieza creando una nueva rama para este cambio:
 git checkout -b change-task-background
 ```
 
-Cambia `src/components/Task.js` al siguiente:
+Cambia `src/components/Task.jsx` al siguiente:
 
 ```diff:title=src/components/Task.jsx
 export default function Task({ task: { id, title, state }, onArchiveTask, onPinTask }) {

content/intro-to-storybook/react/es/using-addons.md

@@ -5,7 +5,7 @@ description: 'Aprende como integrar y utilizar el popular complemento Controls'
 commit: 'f89cfe0'
 ---
 
-Storybook tiene un ecosistema sólido de [complementos, o "addons"](https://storybook.js.org/docs/configure/storybook-addons) que puedes utilizar para mejorar la experiencia del desarrollador para todos en tu equipo. Puedes ver todo los complementos [aquí](https://storybook.js.org/integrations).
+Storybook tiene un ecosistema sólido de [complementos, o "addons"](https://storybook.js.org/docs/configure/user-interface/storybook-addons) que puedes utilizar para mejorar la experiencia del desarrollador para todos en tu equipo. Puedes ver todo los complementos [aquí](https://storybook.js.org/integrations).
 
 Si has estado siguiendo este tutorial, ya encontraste varios complementos y configuraste uno en el capítulo [Testing](/intro-to-storybook/react/es/test/).
 

gatsby-config.js

@@ -21,7 +21,7 @@ module.exports = {
         react: {
           de: 5.3,
           en: 8.3,
-          es: 6.5,
+          es: 8.3,
           fr: 6.5,
           it: 7.6,
           ja: 6.5,