Components not showing in docs

I created documentation for React Components but they do not appear in docs.

No components section in generated html.

jsdoc.conf.json:

{
    "tags": {
        "allowUnknownTags": true,
        "dictionaries": ["jsdoc"]
    },
    "source": {
        "include": ["src"],
        "includePattern": ".+\\.js(doc|x)?$",
        "excludePattern": "(^|\\/|\\\\)_"
    },
    "plugins": ["./node_modules/better-docs/component"],
    "templates": {
        "better-docs": {
            "name": "LD-UI-REACT"
        }
    },
    "opts": {
        "destination": "docs",
        "encoding": "utf8",
        "recurse": true,
        "readme": "README.md",
        "verbose": true,
        "template": "./node_modules/better-docs"
    }
}

running script:

...
"docs": "jsdoc -c jsdoc.conf.json"
...

Component Source Code:

import React, { useContext } from "react";
import PropTypes from "prop-types";

import "./Collection.css";

import Entity from "./Entity";
import ThemeContext, { themes, DEFAULT_CONFIG } from "./config";

/**
 * A component to show a collection of items
 *
 * @component
 * @example
 * const collections = []
 * return <Collection collections={collections}>
 */
export default function Collection(props) {
    const THEME = useContext(ThemeContext);

    return (
        <ThemeContext.Provider value={themes[DEFAULT_CONFIG]}>
            <div>
                {/* <h1
                    style={THEME.style.collectionLabel}
                    className={props.class.collectionLabel}
                >
                    {props.entities[0].collectionLabel}
                </h1> */}
                <section
                    className={`collection-container container ${props.class.collectionContainer}`}
                    style={THEME.style.collectionContainer}
                >
                    {props.entities.map((entity, i) => {
                        return (
                            <Entity
                                entity={entity}
                                key={i}
                                class={props.class}
                            ></Entity>
                        );
                    })}
                </section>
            </div>
        </ThemeContext.Provider>
    );
}

Collection.propTypes = {
    // List of class to custom style the component
    class: PropTypes.string.isRequired,
};

Collection.defaultProps = {
    class: {
        collectionLabel: "",
        collectionContainer: "",
        entityImage: "",
        entityLabel: "",
        entityContent: "",
    },
};

generated html:

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title> Home</title>

  <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script src="./build/entry.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,700|Inconsolata,700" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <link type="text/css" rel="stylesheet" href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/tomorrow-night.min.css">
  <link type="text/css" rel="stylesheet" href="styles/app.min.css">
  <link type="text/css" rel="stylesheet" href="styles/iframe.css">
  <link type="text/css" rel="stylesheet" href="">
  <script async defer src="https://buttons.github.io/buttons.js"></script>

</head>

<body class="layout small-header">
    <div id="stickyNavbarOverlay"></div>

<div class="top-nav">
    <div class="inner">
        <a id="hamburger" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
        <div class="logo">

                <a href="index.html">
                    <h1 class="navbar-item">LD-UI-REACT</h1>
                </a>

        </div>
        <div class="menu">

            <div class="navigation">
                <a
                    href="index.html"
                    class="link"
                >
                    API Documentation
                </a>

            </div>
        </div>
    </div>
</div>
    <div id="main">
        <div
            class="sidebar "
            id="sidebarNav"
        >

            <nav>

                    <h2><a href="index.html">Documentation</a></h2><div class="category"><h3>Classes</h3><ul><li><a href="Edge.html">Edge</a></li><li><a href="Edge.module.exports.html">module.exports</a></li><li><a href="Graph.html">Graph</a></li><li><a href="Graph.module.exports.html">module.exports</a></li><li><a href="module.html#.exports">exports</a></li><li><a href="Node.html">Node</a></li><li><a href="Node.module.exports.html">module.exports</a></li><li><a href="RequiredParamChecker.html">RequiredParamChecker</a></li><li><a href="RequiredParamChecker.module.exports.html">module.exports</a></li><li><a href="RequiredParamError.html">RequiredParamError</a></li></ul><h3>Global</h3><ul><li><a href="global.html#blueMarkerIcon">blueMarkerIcon</a></li><li><a href="global.html#defineProp">defineProp</a></li><li><a href="global.html#fitSvg">fitSvg</a></li><li><a href="global.html#getAngle">getAngle</a></li><li><a href="global.html#getLayerPoint">getLayerPoint</a></li><li><a href="global.html#getSlope">getSlope</a></li><li><a href="global.html#getURILabel">getURILabel</a></li><li><a href="global.html#getWindowDimensions">getWindowDimensions</a></li><li><a href="global.html#leafletIcon">leafletIcon</a></li><li><a href="global.html#passOver">passOver</a></li><li><a href="global.html#projectLine">projectLine</a></li><li><a href="global.html#redSquatMarkerIcon">redSquatMarkerIcon</a></li><li><a href="global.html#segmentAxis">segmentAxis</a></li><li><a href="global.html#sortByTime">sortByTime</a></li><li><a href="global.html#useMap">useMap</a></li><li><a href="global.html#usePane">usePane</a></li><li><a href="global.html#useWindowDimensions">useWindowDimensions</a></li></ul></div>

            </nav>
        </div>
        <div class="core" id="main-content-wrapper">
            <div class="content">
                <header class="page-title">
                    <p></p>
                    <h1>Home</h1>
                </header>

    <h3> </h3>

    <section>
        <article><h1>MAP providers</h1>
<p>You can find interesting map on TileLayer 's on: <a href="http://leaflet-extras.github.io/leaflet-providers/preview/index.html">leaflet-provider.js</a></p>
<h1>URI encoded icon</h1>
<p>You can download svg icons, uri encode and embed them directly in the html file.
This is a good solution avoiding to struggle with webpack building configuration for
applications using this package.</p>
<p>Some day you may host icons in a separate online server and switch the iconUrl to the online one.</p>
<p>To encode icons you need to:</p>
<p><code>$ npm run encode-svg</code></p></article>
    </section>

            </div>

            <footer class="footer">
                <div class="content has-text-centered">
                    <p>Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a></p>
                    <p class="sidebar-created-by">
                        <a href="https://github.com/SoftwareBrothers/better-docs" target="_blank">BetterDocs theme</a> provided with <i class="fas fa-heart"></i> by 
                        <a href="http://softwarebrothers.co" target="_blank">SoftwareBrothers - JavaScript Development Agency</a>
                    </p>
                </div>
            </footer>

        </div>
        <div id="side-nav" class="side-nav">
        </div>
    </div>
<script src="scripts/app.min.js"></script>
<script>PR.prettyPrint();</script>
<script src="scripts/linenumber.js"> </script>

</body>
</html>

SoftwareBrothers / better-docs

Components not showing in docs #121