diff --git a/docs/i18n/espanol/how-to-work-on-localized-client-webapp.md b/docs/i18n/espanol/how-to-work-on-localized-client-webapp.md index 940c5c2533..919df84cd0 100644 --- a/docs/i18n/espanol/how-to-work-on-localized-client-webapp.md +++ b/docs/i18n/espanol/how-to-work-on-localized-client-webapp.md @@ -1,20 +1,20 @@ -# How to work on localized client webapp +# Cómo trabajar en una aplicación web de cliente localizada -The react based client web app that powers our learning platform is built using Gatsby. It is translated into various world languages using [react-i18next](https://react.i18next.com/) and [i18next](https://www.i18next.com/). +La aplicación web de cliente basada en react que impulsa nuestra plataforma de aprendizaje se construyo utilizando Gatsby. Se traduce a varios idiomas utilizando [react-i18next](https://react.i18next.com/) y [i18next](https://www.i18next.com/). -You can learn more about setting up the client application locally for development by following [our local setup guide here](how-to-setup-freecodecamp-locally.md). By default the application is available only in English. +Puedes obtener más información sobre cómo configurar la aplicación cliente localmente para su desarrollo siguiendo [nuestra guía de configuración local aquí](how-to-setup-freecodecamp-locally.md). Por defecto, la aplicación solo está disponible en inglés. -Once you have setup the project locally you should be able to follow this documentation to run the client in the language of your choice from the list of available languages. +Una vez que hayas configurado el proyecto localmente, deberías poder seguir esta documentación para ejecutar el cliente en el idioma de tu elección de la lista de idiomas disponibles. -This could be helpful when you are working on a feature that specifically targets something that involves localization, and requires you to validate for instance a button's label in a different language. +Esto podría ser útil cuando se está trabajando en una función que se dirige específicamente a algo que implica la localización, y requiere que valides, por ejemplo, la etiqueta de un botón en un idioma diferente. -> [!TIP] You do not need to follow this document for translating freeCodeCamp's curriculum or contributing documentation. Read [this guide here](how-to-translate-files.md) instead. +> [!TIP] No necesitas seguir este documento para traducir el currículo de freeCodeCamp o para contribuir con la documentación. En su lugar, lee [esta guia](how-to-translate-files.md). -Let's understand how the i18n frameworks and tooling work. +Veamos cómo funcionan los marcos de trabajo y las herramientas de i18n. -## File Structure +## Estructura de archivos -Most of files for translating the platform are located in the [`client/i18n`](https://github.com/freeCodeCamp/freeCodeCamp/tree/main/client/i18n) folder. Each language has a directory within that containing JSON files with the translations. +La mayoría de los archivos para traducir la plataforma se encuentran en la carpeta [`client/i18n`](https://github.com/freeCodeCamp/freeCodeCamp/tree/main/client/i18n). Cada idioma tiene una carpeta dentro que contiene archivos JSON con las traducciones. ```console config/i18n @@ -59,29 +59,29 @@ Most of files for translating the platform are located in the [`client/i18n`](ht └── validate-keys.ts ``` -Some of these files are translated on our translation platform (Crowdin), some are not. +Algunos de estos archivos son traducidos en nuestra plataforma de traducción (Crowdin), otros no lo son. -**Files translated on our translation platform:** +**Archivos traducidos en nuestra plataforma de traducción:** -- The `translations.json` file contains the majority of the text that appears on the user interface elements. The keys are used in the codebase to get the correct text for whatever language is set. This file needs to have the exact same keys in all languages. +- El archivo `translations.json` contiene la mayor parte del texto que aparece en los elementos de la interfaz de usuario. Las claves son usadas en el código base para obtener el texto correcto de cualquier lenguaje que sea seleccionado. Este archivo debe tener exactamente las mismas claves en todos los idiomas. -- The `intro.json` file contains the key-value pairs for the introduction text on the certification pages. +- El archivo `intro.json` contiene los pares clave-valor para el texto de introducción en las páginas de certificación. - If you want to add/update translations for the keys please [read this guide here](how-to-translate-files.md). + Si quieres añadir/actualizar las traducciones para las claves por favor lee [esta guía aquí.](https://freecodecamp.crowdin.com/how-to-translate-files.md). -**Files NOT translated on our translations platform:** +**Archivos que NO son traducidos en nuestra plataforma de traducciones:** -- The `motivation.json` files are not required to have the same quotes, compliments, or array length. Just the same JSON structure. +- Los archivos `motivation.json` no requieren que tengan las mismas comillas, complementos o tamaños u orden. Simplemente la misma estructura JSON. -- The `trending.json` file contains the titles and links for the trending news articles in the website's footer. +- El archivo `trending.json` contiene los títulos y enlaces para los artículos noticiosos en tendencia dentro del footer del sitio web. -- The `meta-tags.json` file contains the information for our website's meta tag information. +- El archivo`meta-tags.json` contiene la información para nuestra informacion de la Meta etiqueta del sitio web. - Changes to these files are typically done by the staff team. If you see something out of the ordinary we recommend you reach us in the [contributors chat room](https://chat.freecodecamp.org/channel/contributors). + Los cambios en estos archivos son usualmente realizados por nuestro personal. Si ves algo raro o fuera de lo normal, deberías comunicarte con nosotros en el [chat de colaboradores](https://chat.freecodecamp.org/channel/contributors). -## Testing the client app in a world language +## Probando la app cliente en un idioma mundial -You can test the client app in any language available in the [list of languages here](https://github.com/freeCodeCamp/freeCodeCamp/blob/6b4a6a02568b809fc216ea8566ff5df446d1da4e/config/i18n/all-langs.js#L5). +Puedes probar la app cliente en cualquier lenguaje disponible en la [lista de idiomas aquí](https://github.com/freeCodeCamp/freeCodeCamp/blob/6b4a6a02568b809fc216ea8566ff5df446d1da4e/config/i18n/all-langs.js#L5). ```js const availableLangs = { diff --git a/docs/i18n/espanol/how-to-work-on-the-component-library.md b/docs/i18n/espanol/how-to-work-on-the-component-library.md index a2b50a05f1..7e55fe8b1a 100644 --- a/docs/i18n/espanol/how-to-work-on-the-component-library.md +++ b/docs/i18n/espanol/how-to-work-on-the-component-library.md @@ -1,31 +1,31 @@ -Welcome to freeCodeCamp's `ui-components` library. The components are built mostly from scratch with basic HTML elements and [Tailwind CSS](https://tailwindcss.com/). +Bienvenido a la librería `ui-components` de freeCodeCamp. Los componentes se construyen principalmente desde cero con elementos HTML básicos y [Tailwind CSS](https://tailwindcss.com/). -# How to Work on the Component Library +# Cómo trabajar en la biblioteca de componentes > [!NOTE] > -> freeCodeCamp has been using Bootstrap components in the UI. However, we are moving away from it and building our own component library, which helps standardize our UX/UI patterns and improve accessibility. The project is tracked in [this GitHub issue](https://github.com/freeCodeCamp/freeCodeCamp/issues/44668). +> freeCodeCamp ha estado usando componentes de Bootstrap en la interfaz de usuario. Sin embargo, nos estamos alejando de ella y construyendo nuestra propia biblioteca de componentes, lo que ayuda a estandarizar nuestros patrones UX/UI y a mejorar la accesibilidad. El proyecto está rastreado en [este problema de GitHub](https://github.com/freeCodeCamp/freeCodeCamp/issues/44668). -The following steps are recommended when working on a new component: +Se recomiendan los siguientes pasos al trabajar en un nuevo componente: -- Research and planning -- Implement the component -- Display the use cases on Storybook -- Write unit tests +- Investigación y planificación +- Implementar el componente +- Mostrar los casos de uso en el Storybook +- Escribir pruebas unitarias -## Researching and planning +## Investigación y planificación -Before building a component, you need to research and document on how the existing version behaves and looks, to ensure that the new one has matching styles and supports all the current usages. In order to meet the web accessibility requirements, you should also pay attention to the accessibility aspect of the component, see which HTML elements and ARIA attributes are used under the hood. +Antes de construir un componente, necesita investigar y documentar cómo se comporta y se ve la versión existente, para asegurarse de que el nuevo tiene estilos coincidentes y soporta todos los usos actuales. Para cumplir con los requisitos de accesibilidad web, también debe prestar atención al aspecto de accesibilidad del componente, ver qué elementos HTML y atributos ARIA se utilizan bajo el capó. -Once you have gathered enough information about the component, you can start thinking about the props interface. Ideally, the interface should be as similar to the current version as possible, to ease the adoption later on. Since we are using Bootstrap components, the simplest approach is to mimic [their implementation](https://github.com/react-bootstrap/react-bootstrap/tree/master/src). +Una vez que haya reunido suficiente información sobre el componente, puede empezar a pensar en la interfaz de accesorios. Idealmente, la interfaz debe ser tan similar a la versión actual como sea posible, para facilitar la adopción más adelante. Puesto que estamos utilizando componentes de Bootstrap, el enfoque más simple es imitar [su implementación](https://github.com/react-bootstrap/react-bootstrap/tree/master/src). -We prefer smaller pull requests rather than a large one, because they speed up the review time and reduce cognitive overload for the reviewers. For that reason, you should think about how you would break down the implementation and come up with a delivery plan. +Preferimos solicitudes de extracción más pequeñas que grandes porque aceleran el tiempo de revisión y reducen la sobrecarga cognitiva de los revisores. Por este motivo, debería pensar en cómo desglosar la aplicación y elaborar un plan de entrega. -We recommend opening a separate GitHub issue for each component and include all the notes in the issue description. It can be used as a place to host all of your working notes, as well as a way to communicate the approach with the reviewers. We will use the issue thread for further discussion if needed. [The issue for Button component](https://github.com/freeCodeCamp/freeCodeCamp/issues/45357) can be used as a reference. +Recomendamos abrir un número separado de GitHub para cada componente e incluir todas las notas en la descripción de incidencias. Se puede utilizar como un lugar para alojar todas sus notas de trabajo, así como una forma de comunicar el enfoque con los revisores. Utilizaremos el tema para seguir debatiendo, si es necesario. [El problema para el componente Button](https://github.com/freeCodeCamp/freeCodeCamp/issues/45357) puede ser utilizado como referencia. -## Implementing the component +## Implementando el componente -A new component can be created using the following command from the root directory: +Se puede crear un nuevo componente utilizando el siguiente comando desde el directorio raíz: ```bash cd tools/ui-components @@ -33,55 +33,55 @@ cd tools/ui-components npm run gen-component MyComponent ``` -The command will generate a new folder inside the `ui-components` directory, with the following files: +El comando generará una nueva carpeta dentro del directorio `ui-components`, con los siguientes archivos: -| File name | Purpose | -| -------------------------- | ------------------------------------------------------ | -| `index.ts` | It is used for exporting the component and its types. | -| `my-component.stories.tsx` | It is used for demoing the component on Storybook. | -| `my-component.test.tsx` | It is a test file. | -| `my-component.tsx` | It is where we implement the component. | -| `types.ts` | Is is where we locate component's interface and types. | +| Nombre del archivo | Propósito | +| -------------------------- | ------------------------------------------------------------ | +| `index.ts` | Se utiliza para exportar el componente y sus tipos. | +| `my-component.stories.tsx` | Se utiliza para demostrar el componente en Storybook. | +| `my-component.test.tsx` | Se trata de un archivo de prueba. | +| `my-component.tsx` | Ahí es donde aplicamos el componente. | +| `types.ts` | Es donde localizamos la interfaz y los tipos del componente. | -Each component is different, but in general a component should: +Cada componente es diferente, pero en general un componente debería: -- Support forwarding ref -- Be styled for both light and dark themes -- Be styled internally based on their props (the consumers should not need to restyle the component with the `className` prop) -- Utilize the built-in styling system from Tailwind instead of having custom styles +- Apoyar el reenvío de ref +- Estilo tanto para temas claros como oscuros +- Estilo internamente basado en sus accesorios (los consumidores no deben necesitar reponer el componente con el accesorio `className`) +- Utilizar el sistema de estilo incorporado desde Tailwind, en lugar de tener estilos personalizados -### Useful links +### Enlaces útiles -- [Tailwind CSS Configuration](https://tailwindcss.com/docs/configuration) -- [React Bootstrap v0.33 Docs](https://react-bootstrap-v3.netlify.app) -- [Bootstrap 3.3.7 stylesheet](https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css) -- [React Bootstrap current implementation](https://github.com/react-bootstrap/react-bootstrap/tree/master/src) -- [React Bootstrap current tests](https://github.com/react-bootstrap/react-bootstrap/tree/master/test) +- [Configuración de Tailwind CSS](https://tailwindcss.com/docs/configuration) +- [Documentación de React Bootstrap v0.33](https://react-bootstrap-v3.netlify.app) +- [Hoja de estilos de Bootstrap 3.3.7](https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css) +- [Implementación actual de React Bootstrap](https://github.com/react-bootstrap/react-bootstrap/tree/master/src) +- [Pruebas actuales de React Bootstrap](https://github.com/react-bootstrap/react-bootstrap/tree/master/test) -## Displaying the use cases on Storybook +## Mostrar los casos de uso en el Storybook -Use cases of the component should be added to the Storybook file (`.stories.tsx`). +Los casos de uso del componente deben añadirse al archivo Storybook (`.stories.tsx`). -To start Storybook, run the following command from the root directory: +Para iniciar Storybook, ejecute el siguiente comando desde el directorio raíz: ```bash npm run storybook ``` -The Storybook page is available on [http://localhost:6006](http://localhost:6006). +La página de Storybook está disponible en [http://localhost:6006](http://localhost:6006). -## Writing unit tests +## Escribir pruebas unitarias -We use [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) to write unit tests. The tests should assert that the components behave as expected and are accessible. +Utilizamos [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) para escribir pruebas unitarias. Las pruebas deben asegurar que los componentes se comportan como se espera y son accesibles. -To run tests against the component library, run the following command from the root directory: +Para ejecutar pruebas contra la biblioteca de componentes, ejecute el siguiente comando desde el directorio root: ```bash npm run test-ui-components ``` -### Useful links +### Enlaces útiles -- [Testing for Accessibility](https://testing-library.com/docs/dom-testing-library/api-accessibility) -- [Order of priority of React Testing Library's queries](https://testing-library.com/docs/queries/about/#priority) -- [Common mistakes with React Testing Library](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library) +- [Pruebas de Accesibilidad](https://testing-library.com/docs/dom-testing-library/api-accessibility) +- [Orden de prioridad de las consultas de React Testing Library](https://testing-library.com/docs/queries/about/#priority) +- [Errores comunes con React Testing Library](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library)