> For the complete documentation index, see [llms.txt](https://manu-artero-anguita.gitbook.io/buenas-practicas-con-react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manu-artero-anguita.gitbook.io/buenas-practicas-con-react/sesion-5/12.-documentacion.md).

# 12. Documentación

### Comentarios de calidad

* `README.md`
* (exp personal): mantenerse lejos del detalle

{% embed url="<https://project-awesome.org/matiassingers/awesome-readme>" %}

#### TODOs y FIXMEs

* TODO: algo que dejas incompleto a sabiendas
* FIXME: algo que puede causar una issue/bug
* (exp. personal): Poner el ID de la herramienta de ticketing
* (exp. personal): Dejar enlaces de la investigación que has hecho, en el futuro sabrás por donde tirar.

```javascript
// TODO LAM-2950
// Fix deprecated warning (error for storybook >= v7)
// @see https://storybook.js.org/docs/react/writing-stories/decorators#global-decorators
addDecorator(literalsDecorator);
```

```javascript
// FIXME LAM-3258
// <ScreenList /> depends on <ScreenCardController /> */
function ScreenList(props) {
```

### Comentarios de mala calidad

```javascript
/**
 * @param {itemId} itemId
 */
function getItemPrice(itemId) {}
```

```javascript
/**
 * fetch item name
 */
function getItemPrice(itemId) {}
```

#### Ejercicio: cómo comentarias esta función?

```javascript
function getFileInfoFromFolder(path) => {
  const files = fs.readdirSync(path, 'utf8');
  const response = [];
  for (let file of files) {
    const extension = path.extname(file);
    const fileSizeInBytes = fs.statSync(file).size;
    response.push({ name: file, extension, fileSizeInBytes });
  }
  return response;
}
```

### Documentación front: `storybook`

{% embed url="<https://storybook.js.org/>" %}

{% embed url="<https://storybook.js.org/addons/@storybook/addon-storyshots>" %}

{% file src="/files/MESM71RV77C16XnLHzgm" %}