
# How document my react components with JSDoc

<Date date="01-16-2023" />

<GoogleAdsense />

## Introduction

It is necessary to have a good documentation about our components, so that other developers can understand how it works and how to use it. In this article we are going to see how we can document our react components with JSDoc and how to publish the documentation in our static site.

With a few simple steps, the jsdoc library and the use of good programming practices when working with react, we will be able to have a documentation of our components automatically. There are different plugins to upgrade our jsdoc and support react, but as React is still javascript and the components functions the default lib is more than enough.

The report we are going to generate is still an html file, so you can deploy it in any static site.

> If you use typescript you will need to install jsdoc-babel

## 1. Installation

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```bash

yarn add jsdoc-babel -D

```

</CH.Code>

## 2. Configuration

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```json jsdoc.json
{
    "tags": {
        "allowUnknownTags": true,
        "dictionaries": ["jsdoc", "closure"]
    },
    "source": {
        "include": ["src/components/"],
        "includePattern": ".+\\.tsx$",
        "excludePattern": "(node_modules/|docs)"
    },
    "plugins": ["plugins/markdown", "node_modules/jsdoc-babel"],
    "templates": {
        "cleverLinks": false,
        "monospaceLinks": false
    },
    "babel": {
        "extensions": ["tsx"],
        "ignore": ["**/*.(test|spec).ts"],
        "babelrc": false,
        "presets": [["@babel/preset-env", { "targets": { "node": true } }], "@babel/preset-typescript"],
        "plugins": ["@babel/proposal-class-properties", "@babel/proposal-object-rest-spread"]
    },
    "opts": {
        "encoding": "utf8",
        "destination": "./public/docs/",
        "recurse": true,
        "verbose": true
    }
}
```

</CH.Code>

## 3. Customise your report

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```javascript custom-docs.js mark=13

import { readFile, writeFile } from 'fs';
import glob from 'glob';

glob('public/docs/**/*.?(html|css)', function (err, files) {
    if (err) {
        console.log('err', err);
        return;
    }

    files.forEach((path) => {
        readFile(path, 'utf8', (err, data) => {
            ...code
        });
    });
});


```

</CH.Code>

> There you should find the code you need to modify your report and overwrite it.

## 4. Generate your report

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```bash

yarn jsdoc -c jsdoc.json

```

</CH.Code>

To see an example of the output you can click above where it says Docs or via this [link](https://docs.xabierlameiro.com 'Link to my docs')



# Filter for positions, survey to check compatibility

<Date date="03-07-2023" />

<GoogleAdsense slot="6618374506" horizontal />

## Motivation

Believe it or not, due to the high demand for developers of all kinds in the market by companies, many recruiters and headhunters have become copy paste machines. I don't know the number or the daily amount of messages they send to all the profiles in their network that match the new position they have available, but I would bet they are not few. And it's not that I don't like them sending me messages, but I would like them to send me messages that really interest me and make me think that they have seen my profile, my code or some of my work and that they really want to hire me for my skills.

This is not usually the case, many people use programs to automate the process of searching for profiles such as [Hiretual](https://hiretual.com/ 'Hiretual') or [Jobvite](https://www.jobvite.com/ 'Jobvite'), they send messages to all users "that match" and sometimes this does not work very well. Since your profile clearly says Frontend Developer, your experience says the same... but, they have a Java position with awesome microservices for you.

Other times they screw up and send you a message with the name of your teammate:

<Image src="/coincidence.png" alt="Coincidence" width="1024" height="726" layout="responsive" />

## The idea

How many times have you had a call with questions like:

-   Why are you looking for a change?
-   Do you know the SOLID principles?
-   How many years would you say you've been working with React ? How about Typescript ?
-   Do you know what continuous integration is?

> To be offered a lower salary than you have, or to be asked for your CV and never be told anything again.

How many times bro ?

**_The idea is to screen you before you get screened._**

## Solution

10 simple questions about points that you consider important, requirements, values... or basically whatever you want and if they are fulfilled, the recruiter will get contact information to be able to go into detail about the whole process.

It's a win win, we both save time, don't we?

## Code

With a container or page component, a couple of buttons, radiobuttons and an array of objects you have more than enough, in my case:

I have my page:

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```tsx survey.tsx
import Dialog from '@/components/Dialog';
import styles from '@/styles/survey.module.css';
import ControlButtons from '@/components/ControlButtons';
import Confetti from 'react-confetti';
import SEO from '@/components/SEO';
import useWindowResize from '@/hooks/useWidowResize';
import useSurvey from '@/hooks/useSurvey';
import NavigationArrows from '@/components/NavigationArrows';

const Survey = () => {
    const { width, height } = useWindowResize();
    const {
        questions,
        answers,
        surveySuccess,
        totalQuestions,
        currentQuestionNum,
        questionsDoneNum,
        handleNextQuestion,
        handlePreviousQuestion,
        handleAnswerOptionClick,
    } = useSurvey();

    return (
        <>
            <Confetti width={width} height={height} numberOfPieces={100} run={surveySuccess} />
            <SEO
                noimage={false}
                meta={{
                    title: 'Find out if I match the position in 1 minute',
                    description: 'Click to continue',
                    noindex: true,
                }}
            />
            <Dialog
                open
                modalMode
                withPadding
                header={
                    <div className={styles.header}>
                        <ControlButtons />
                        <span>
                            {currentQuestionNum > 0 && currentQuestionNum < 11 && (
                                <span>
                                    {currentQuestionNum} / {totalQuestions - 2}
                                </span>
                            )}
                        </span>
                    </div>
                }
                body={
                    // TODO: Move to a component
                    <div className={styles.container}>
                        {questions.map(
                            (question: any, index: number) =>
                                currentQuestionNum === index && (
                                    <div key={index} className={styles.question}>
                                        <div
                                            dangerouslySetInnerHTML={{ __html: question.questionHtml }}
                                            className={styles.questionHtml}
                                        />
                                        {question.answerOptions?.map((answerOption: any) => (
                                            <label htmlFor={answerOption.answerText} key={answerOption.answerText}>
                                                <input
                                                    onChange={(e) =>
                                                        handleAnswerOptionClick({
                                                            question: question.questionText,
                                                            answer: e.target.value,
                                                            isCorrect: answerOption.isCorrect,
                                                            questionNum: index,
                                                        })
                                                    }
                                                    type="radio"
                                                    id={answerOption.answerText}
                                                    name={String(index)}
                                                    value={answerOption.answerText}
                                                    checked={answers[index]?.answer === answerOption.answerText}
                                                />
                                                {answerOption.answerText}
                                            </label>
                                        ))}
                                    </div>
                                )
                        )}
                    </div>
                }
                footer={
                    <div className={styles.buttons}>
                        <NavigationArrows
                            hidden={currentQuestionNum < 1 || currentQuestionNum > 10}
                            disabledLeft={currentQuestionNum < 2}
                            disabledRight={questionsDoneNum < currentQuestionNum}
                            onClickLeft={handlePreviousQuestion}
                            onClickRight={handleNextQuestion}
                        />
                    </div>
                }
            />
        </>
    );
};

export default Survey;
```

</CH.Code>

My hook with logic

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```ts useSurvey.ts
import { useRouter } from 'next/router';
import { useReducer, useEffect, useRef } from 'react';

const initialState = {
    currentQuestion: 0,
    questionsDone: 0,
    success: false,
    answers: [],
};

const reducer = (state: any, action: any) => {
    ...ya sabes como funciona un switch no?
};

const useSurvey = () => {
    const { query } = useRouter();
    const { name = '&#128075;' } = query;
    const emailRef = useRef<boolean>(false);

    const [state, dispatch] = useReducer(reducer, initialState);

    // Prepotency here!
    const questions = [
        {
            questionText: 'Which came first, the chicken or the egg?
            questionHtml: `<h2>Which came first the chicken or the egg?</h2>`,
            answerOptions: [{ answerText: 'Egg', isCorrect: true, }, { answerText: 'Chicken', isCorrect: false }],
        },
    ];

    useEffect(() => {
        if (state.currentQuestion === questions.length - 1 && !emailRef.current) {
            (async () => {
                try {
                    await fetch('/api/email', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            subject: `Job survey from ${name} - ${new Date().toLocaleString()}`,
                            message: `
                                    <h1> ${name} </h1>
                                    <code> ${navigator.userAgent} </code>
                                    <ol>
                                        ${state.answers.map(
                                            (answer: any) =>
                                                `<li> ${answer.question} : ${answer.answer} - ${
                                                    answer.isCorrect ? '✅' : '🚫'
                                                } </li>`
                                        )}
                                    </ol>
                                    `.replace(/,/g, ''),
                        }),
                    });
                    emailRef.current = true;
                } catch (e) {
                    console.log(e);
                }
            })();
        }
    }, [state, name, questions.length]);

    const handlePreviousQuestion = () => {
        if (state.currentQuestion > 1) dispatch({ type: 'PREVIOUS_QUESTION' });
    };

    const handleNextQuestion = () => {
        if (state.currentQuestion != 0 && state.questionsDone >= state.currentQuestion)
            dispatch({ type: 'NEXT_QUESTION' });
    };

    const handleAnswerOptionClick = (payload: {
        question: string;
        answer: string;
        isCorrect: boolean;
        questionNum: number;
    }) => dispatch({ type: 'ADD_ANSWER', payload });

    return {
        questions,
        answers: state.answers,
        surveySuccess: state.success,
        currentQuestionNum: state.currentQuestion,
        questionsDoneNum: state.questionsDone,
        totalQuestions: questions.length,
        handleAnswerOptionClick,
        handleNextQuestion,
        handlePreviousQuestion,
    };
};

export default useSurvey;
```

</CH.Code>

My endpoint

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```ts email.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import nodemailer from 'nodemailer';

export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
    const transporter = nodemailer.createTransport({
        service: process.env.EMAIL_HOST,
        auth: {
            user: process.env.EMAIL,
            pass: process.env.EMAIL_PASSWORD,
        },
    });

    const { subject, message } = req.body;

    const mailOptions = {
        from: process.env.EMAIL,
        to: process.env.EMAIL,
        subject: subject,
        html: message,
    };

    try {
        await transporter.sendMail(mailOptions);
        res.status(200).json({ success: true });
    } catch (error) {
        res.status(500).json({ success: error });
    }
}
```

</CH.Code>

## Result

<Image src="/survey-success.png" alt="Success case" width="544" height="452" />
<Image src="/survey-email.png" alt="Mail with answers" width="822" height="491" />

Try it yourself: [Link to result](https://xabierlameiro.com/survey?name=Lector/a 'Link to survey')



# How to publish the test coverage report in your React application

<Date date="01-01-2023" />

<GoogleAdsense />

In this post we are going to see how to publish the test coverage report in your React application. For this we will use:

-   [Jest](https://jestjs.io/ 'Link to jestjs website')

> A Perfect "alternative" for SonarQube for a small projects.

It is not common or necessary to publish your test report of your application, there will even be those who think that it is somewhat imprudent because
You can expose sensitive information from your application. But the main idea of this is that if you have an open source project and you want
so that people can contribute, it's a good idea that they can see the test report so they know how well your project is covered or
because you want to teach people how to test an application.

However, to have extra security, it is as simple as having it in a protected path with a username and password.

PD: This example is developed in a web application made with **Nextjs** but it works for any web application that uses **jest**.

## 1. Path for the report

The first thing we need to do is assign the jest outputDirectory to a public folder

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```javascript jest.config.js mark=4
const customJestConfig = {
    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
    coveragePathIgnorePatterns: ['^.*\\.stories\\.[jt]sx?$'],
    coverageDirectory: 'public/coverage',
    testEnvironment: 'jest-environment-jsdom',
    coverageReporters: ['html'],
    collectCoverageFrom: ['src/components/**/*.tsx'],
    moduleNameMapper: {
        '^@/helpers(.*)$': '<rootDir>src/helpers/index.ts$1',
        '^@/layout(.*)$': '<rootDir>src/components/Layout/index.tsx$1',
        '^@/test$': '<rootDir>/jest.setup.js',
        '^@/components(.*)$': '<rootDir>src/components/$1',
        '^@/context(.*)$': '<rootDir>src/context/$1',
        '^@/hooks(.*)$': '<rootDir>src/hooks/$1',
        '^@/constants(.*)$': '<rootDir>src/constants/$1',
    },
};
```

</CH.Code>

## 2. Script to modify the report

What this script does is modify the path of the static files that the report needs to function as images, css, javascript, etc.
In addition, some report texts are customized.

> The alternative if you use class is to use the class [CustomReporter](https://jestjs.io/docs/configuration 'Jest configuration') and implement the onRunComplete method.

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```javascript custom-reporter.js
import { readFile, writeFile } from 'fs';
import glob from 'glob';

glob('public/coverage/**/*.?(html|css)', function (err, files) {
    if (err) {
        console.log('err', err);
        return;
    }

    files.forEach((path) => {
        readFile(path, 'utf8', (err, data) => {
            if (err) {
                console.log('err', err);
                return;
            }
            let replaced = data.replace(
                /Code coverage generated by\n\s*<a href="https:\/\/istanbul\.js\.org\/"/g,
                `Code coverage automatically generated by Xabier Lameiro on ${new Date().toLocaleDateString()}`
            );

            if (path === 'public/coverage/index.html') {
                replaced = replaced.replace(/src="/g, 'src="coverage/');
                replaced = replaced.replace(/href="/g, 'href="coverage/');
            }

            writeFile(path, replaced, 'utf-8', function (err, a) {
                if (err) {
                    console.log('err', err);
                    return;
                }
            });
        });
    });
});
```

</CH.Code>

## 3. Command to generate the report when the build is generated

In order for the report to be generated in the public folder when the build is finished, we need to add the following commands in the package.json

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```json package.json mark=5,9
{
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "postbuild": "npm run coverage",
        "start": "next start",
        "lint": "next lint",
        "test": "NODE_ENV=test jest",
        "coverage": "rm -rf public/coverage && NODE_ENV=test jest --coverage && node custom-reporter.js",
        "watch": "jest --watchAll",
        "test:clear": "jest --clearCache",
        "storybook": "storybook dev -p 6006",
        "build-storybook": "storybook build"
    }
}
```

</CH.Code>

## 4. Create a redirect on the server/cloud platform

In my case I use Vercel but whatever platform you use, you must create a redirect so that any

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```javascript next.config.js mark=4,5
 rewrites: async () => {
        return [
            {
                source: '/:coverage',
                destination: '/:coverage/index.html',
            },
        ];
    },
```

</CH.Code>

> Here you can see an example of what the test report of this blog looks like [xabierlameiro.com/coverage](https://coverage.xabierlameiro.com/ 'Coverage section')



# Deploying my storybook is very simple

<Date date="01-04-2023" />

<GoogleAdsense />

Once you\'ve created your components in Storybook, you are able to share them in a few different ways. You can deploy Storybook to Vercel, GitHub or Netlify or Heroku and share the URL with your team and potential clients.
Alternatively, you can also create a static version of Storybook and deploy it to a web server. This allows you to have a version of Storybook that is always online and up to date.

Storybook is easy to set up and manage. You will need Node.js and a few development dependencies installed in order to set up your own environment. You can also use generator-storybook to quickly get started with creating a Storybook configuration file.

Once you\'ve configured your Storybook, you can start writing stories for your components. A story is essentially a brief explanation of how your component will be used in the application. You can write stories for components that you have already
created and also any components that you are working on. Storybook also allows you to create variations of your component, this is helpful for A/B testing.

Deploying React components with Storybook is a great way to showcase your work and ensure your components are bug-free. It allows you to create living style guides for your components and provides a sandbox for testing them.
Setting up Storybook can seem daunting, but it is easy if you follow the documentation. Once you have it set up, you can start creating stories and variations of your components and sharing them with your team and potential clients.

## 1. Storybook commands

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>
```javascript package.json
"scripts": {
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
}
```
</CH.Code>

## 2. Make a stories from your components

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```tsx Avatar.stories.tsx
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import Avatar from '.';

export default {
    /* 👇 The title prop is optional.
     * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
     * to learn how to generate automatic titles
     */
    title: 'Settings / Avatar',
    component: Avatar,
} as ComponentMeta<typeof Avatar>;

//👇 We create a “template” of how args map to rendering
const Template: ComponentStory<typeof Avatar> = (args) => <Avatar {...args} />;

// 👇 Each story then reuses that template
export const Primary = Template.bind({});

Primary.args = {
    name: 'Juan Carlos de Borbón',
    description: 'Rey emérito de España',
    img: '/avatar.png',
    alt: 'Quien bien se vive!',
};
```

</CH.Code>

## 3. Deploy Storybook

The most important things are build command, output directory and install command. (yarn, npm or whatever) for dependencies.

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```bash

yard build-storybook

./storybook-static

yarn i || npm i || npx i

```

</CH.Code>

> Here you can show the example of my storybook deployed in a subdomain: [https://storybook.xabierlameiro.com](https://storybook.xabierlameiro.com 'Link to my storybook')
