feat: add ability to share html-reporter components with its plugins (#407)

Author: DudaGod

README.md

@@ -270,10 +270,48 @@ directory.
   ```
 
   In the example you can also see another convenient properties:
+  - `pluginName` - plugin name;
   - `actions` - the html-reporter **Redux** actions;
   - `selectors` - the memoized html-reporter selectors which created using **reselect** library
   - `pluginConfig` - plugin configuration.
 
+  Available dependencies:
+  - `react`
+  - `redux`
+  - `react-redux`
+  - `lodash`
+  - `prop-types`
+  - `classnames`
+  - `semantic-ui-react`
+  - `react-markdown`
+  - `reduce-reducers`
+  - `immer`
+  - `reselect`
+  - `axios`
+
+  Available components:
+  - `components`
+    - `<Details />` - component which allows users to toggle the display of content.
+        Example of usage:
+        ```js
+        // ... inside your react component
+        render() {
+            return <Details
+                title='Some title'
+                content='Some content' // content that will appear when you click on the title
+                extendClassNames='some_class_name' // ability to add own css-classes to component
+                onClick={() => console.log('clicked')} // ability to add handler
+            />
+        }
+        ```
+
+        , where:
+
+        * **title** (required) `String|JSX.Element` - title that describes information hidden underneath.
+        * **content** (required) `Function|String|Array<String>|JSX.Element` - content that will appear after click on the title.
+        * **extendClassNames** (optional) `String|Array<String>` - ability to add own css classes to the component.
+        * **onClick** (optional) `Function` - handler that will be called when the title is clicked.
+
   #### Extension points
 
   Extension points - places within the report UI that are available to extend with React components with the help of [html-reporter plugins](#html-reporter-plugins).

lib/static/modules/load-plugin.js

@@ -11,6 +11,7 @@ import immer from 'immer';
 import * as reselect from 'reselect';
 import axios from 'axios';
 import * as selectors from './selectors';
+import Details from '../components/details';
 
 const whitelistedDeps = {
     'react': React,
@@ -24,7 +25,10 @@ const whitelistedDeps = {
     'reduce-reducers': reduceReducers,
     'immer': immer,
     'reselect': reselect,
-    'axios': axios
+    'axios': axios,
+    'components': {
+        Details
+    }
 };
 
 // It's expected that in the plugin code there is a