Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Adjusts Spanish translation version #786

Merged
merged 1 commit into from
Nov 7, 2024
Merged

Docs: Adjusts Spanish translation version #786

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 | ❌ |
Expand Down
2 changes: 1 addition & 1 deletion content/intro-to-storybook/react/en/using-addons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion content/intro-to-storybook/react/es/conclusion.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
3 changes: 2 additions & 1 deletion content/intro-to-storybook/react/es/deploy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
8 changes: 2 additions & 6 deletions content/intro-to-storybook/react/es/get-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
10 changes: 5 additions & 5 deletions content/intro-to-storybook/react/es/screen.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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:

Expand All @@ -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.

Expand Down
10 changes: 5 additions & 5 deletions content/intro-to-storybook/react/es/simple-component.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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):

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion content/intro-to-storybook/react/es/test.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) {
Expand Down
2 changes: 1 addition & 1 deletion content/intro-to-storybook/react/es/using-addons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/).

Expand Down
2 changes: 1 addition & 1 deletion gatsby-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading