best better docs configuration for React

EasyTooltip.js

import React from 'react';
import pt from 'prop-types';
import { Tooltip, OverlayTrigger } from 'react-bootstrap';

/**
 * A very expandable component for
 * adding tooltip to elements easily.
 *
 * ```
 * <EasyTooltip
 * variant="danger"
 * overlay={<span>this is an overlay</span>}
 * placement="top-end"
 * overlayProps={{id: 'button-tooltip', className: 'my-class'}}>
 *    <button> Show tooltip on mouse over </button>
 *  </EasyTooltip>
 * ```
 *
 * @component
 *
 */
const EasyTooltip = ({ variant, children, placement, overlay, overlayProps }) => {
  /**
   * tooltip overlay
   *
   * @param {object} [partialOverlayProps] manually created param
   * to expand Tooltip
   * @param {object} [props] added by OverlayTrigger automatically
   *
   */
  const renderTooltip = (props) => {
    const { className, ...partialOverlayProps } = overlayProps;
    return (
      <Tooltip
        id={overlayProps.id}
        className={`${className} easy-tooltip easy-tooltip--${placement} easy-tooltip--${variant}`}
        {...props}
        {...partialOverlayProps}
      >
        {overlay}
      </Tooltip>
    );
  };
  return (
    <OverlayTrigger
      placement={placement}
      show={true}
      delay={{ show: 250, hide: 400 }}
      overlay={renderTooltip}
    >
      {children}
    </OverlayTrigger>
  );
};

EasyTooltip.propTypes = {
  /**
   * changes background color
   */
  variant: pt.oneOf(['', 'default', 'gray', 'primary', 'secondary', 'danger', 'info', 'success']),
  /**
   * children prop as always
   */
  children: pt.node.isRequired,
  /**
   * overlay to be shown as tooltip
   */
  overlay: pt.node,
  /**
   * props used in overlay (renderTooltip function)
   * This is added to Tooltip with rest operator
   */
  overlayProps: pt.shape({
    id: pt.string,
    className: pt.string,
  }),
  /**
   * adds a placement prop to OverlayTrigger
   * and a className `easy-tooltip--${placement}`
   * to renderTooltip func
   *
   * ! only top-start, top-end, bottom-start and bottom-end
   *   are fully extended
   */
  placement: pt.oneOf([
    '',
    'auto-start',
    'auto',
    'auto-end',
    'top-start',
    'top',
    'top-end',
    'right-start',
    'right',
    'right-end',
    'bottom-end',
    'bottom',
    'bottom-start',
    'left-end',
    'left',
    'left-start',
  ]),
};

EasyTooltip.defaultProps = {
  variant: 'default',
  placement: 'top-end',
  overlay: 'Set overlay prop',
  overlayProps: { id: 'button-tooltip' },
};

export default EasyTooltip;

jsdoc.json

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

package.json

...

"scripts": {
    "docs": "cross-env NODE_ENV=development jsdoc -c jsdoc.json"
  },

...
"dependencies" : {
    "cross-env": "^5.2.0"
},
"devDependencies": {
    "better-docs": "^2.0.1",
    "jsdoc": "^3.6.4",
    "parcel-bundler": "^1.12.4"
  },
  "optionalDependencies": {
    "win-node-env": "^0.4.0"
  }

...

style-tutorial.md

Common styles

_common-classes.scss

Centers horizontally and vertically via flex

full-center

tutorials.json

{ "style-tutorial": { "title": "Style tutorial" } }