Add bar for component mappers

Author: rvsia

packages/react-renderer-demo/src/components/component-mapper-bar.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { makeStyles } from '@material-ui/core/styles';
+
+import IconButton from '@material-ui/core/IconButton';
+
+import LanguageIcon from '@material-ui/icons/Language';
+import GitHubIcon from '@material-ui/icons/GitHub';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'row-reverse',
+    marginTop: -48,
+    [theme.breakpoints.down('xs')]: {
+      marginTop: 'initial',
+      flexDirection: 'row'
+    }
+  },
+  npm: {
+    display: 'grid',
+    '& img': {
+      margin: 'auto'
+    }
+  }
+}));
+
+const ComponentMapperBar = ({ prefix, href }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <a
+        href={`https://badge.fury.io/js/%40data-driven-forms%2F${prefix}-component-mapper`}
+        rel="noopener noreferrer"
+        target="_blank"
+        className={classes.npm}
+      >
+        <img src={`https://badge.fury.io/js/%40data-driven-forms%2F${prefix}-component-mapper.svg`} alt="current version" />
+      </a>
+      <IconButton aria-label="web" title="Library web" href={href} rel="noopener noreferrer" target="_blank">
+        <LanguageIcon />
+      </IconButton>
+      <IconButton
+        aria-label="github"
+        title="Git Hub package"
+        href={`https://github.com/data-driven-forms/react-forms/tree/master/packages/${prefix}-component-mapper`}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <GitHubIcon />
+      </IconButton>
+    </div>
+  );
+};
+
+ComponentMapperBar.propTypes = {
+  prefix: PropTypes.string.isRequired,
+  href: PropTypes.string.isRequired
+};
+
+export default ComponentMapperBar;

packages/react-renderer-demo/src/next.config.js

@@ -63,7 +63,8 @@ module.exports = withBundleAnalyzer(
           '@docs/examples': path.resolve(__dirname, './examples'),
           '@docs/code-example': path.resolve(__dirname, './components/code-example'),
           '@docs/hooks': path.resolve(__dirname, './hooks'),
-          '@docs/doc-page': path.resolve(__dirname, './components/doc-page')
+          '@docs/doc-page': path.resolve(__dirname, './components/doc-page'),
+          '@docs/component-mapper-bar': path.resolve(__dirname, './components/component-mapper-bar')
         };
 
         config.optimization.minimizer = [

packages/react-renderer-demo/src/pages/mappers/blueprint-component-mapper.md

@@ -1,15 +1,16 @@
 import DocPage from '@docs/doc-page';
+import ComponentMapperBar from '@docs/component-mapper-bar';
 
 <DocPage>
 
 # BlueprintJS
 
+<ComponentMapperBar prefix="blueprint" href="https://blueprintjs.com/" />
+
 BlueprintJS mapper provides components from [Blueprint UI toolkit](https://blueprintjs.com/).
 
 ## Installation
 
-Link to [NPM](https://www.npmjs.com/package/@data-driven-forms/blueprint-component-mapper).
-
 ```bash
 npm install --save @data-driven-forms/blueprint-component-mapper
 ```
@@ -79,8 +80,4 @@ const FormTemplate = ({ formFields }) => {
 }
 ```
 
-## Contribution
-
-You can contribute to this mapper [here](https://github.com/data-driven-forms/react-forms/tree/master/packages/blueprint-component-mapper).
-
 </DocPage>

packages/react-renderer-demo/src/pages/mappers/mui-component-mapper.md

@@ -1,15 +1,16 @@
 import DocPage from '@docs/doc-page';
+import ComponentMapperBar from '@docs/component-mapper-bar';
 
 <DocPage>
 
 # MaterialUI mapper
 
+<ComponentMapperBar prefix="mui" href="https://material-ui.com/" />
+
 MaterialUI mapper provides components from [MaterialUI React library](https://material-ui.com/).
 
 ## Installation
 
-Link to [NPM](https://www.npmjs.com/package/@data-driven-forms/mui-component-mapper).
-
 ```bash
 npm install --save @data-driven-forms/mui-component-mapper
 ```
@@ -35,8 +36,4 @@ MUI mapper provides an option to validate a field when the component is mounted.
 
 This field will show the error immediately.
 
-## Contribution
-
-You can contribute to this mapper [here](https://github.com/data-driven-forms/react-forms/tree/master/packages/mui-component-mapper).
-
 </DocPage>

packages/react-renderer-demo/src/pages/mappers/pf3-component-mapper.md

@@ -1,15 +1,16 @@
 import DocPage from '@docs/doc-page';
+import ComponentMapperBar from '@docs/component-mapper-bar';
 
 <DocPage>
 
 # PatternFly 3 mapper
 
+<ComponentMapperBar prefix="pf3" href="https://www.patternfly.org/v3/" />
+
 PatternFly 3 mapper provides components from [PatternFly 3 design system](https://www.patternfly.org/v3/).
 
 ## Installation
 
-Link to [NPM](https://www.npmjs.com/package/@data-driven-forms/pf3-component-mapper).
-
 ```bash
 npm install --save @data-driven-forms/pf3-component-mapper
 ```
@@ -35,8 +36,4 @@ PF3 mapper provides an option to validate a field when the component is mounted.
 
 This field will show the error immediately.
 
-## Contribution
-
-You can contribute to this mapper [here](https://github.com/data-driven-forms/react-forms/tree/master/packages/pf3-component-mapper).
-
 </DocPage>

packages/react-renderer-demo/src/pages/mappers/pf4-component-mapper.md

@@ -1,15 +1,16 @@
 import DocPage from '@docs/doc-page';
+import ComponentMapperBar from '@docs/component-mapper-bar';
 
 <DocPage>
 
 # PatternFly 4 mapper
 
+<ComponentMapperBar prefix="pf4" href="https://www.patternfly.org/v4/" />
+
 PatternFly 4 mapper provides components from [PatternFly 4 design system](https://www.patternfly.org/v4/).
 
 ## Installation
 
-Link to [NPM](https://www.npmjs.com/package/@data-driven-forms/pf4-component-mapper).
-
 ```bash
 npm install --save @data-driven-forms/pf4-component-mapper
 ```
@@ -20,8 +21,4 @@ yarn add @data-driven-forms/pf4-component-mapper
 
 PatternFly 4 has to be installed seperately. Please follow their [guidelines](https://www.patternfly.org/v4/get-started/developers#react).
 
-## Contribution
-
-You can contribute to this mapper [here](https://github.com/data-driven-forms/react-forms/tree/master/packages/pf4-component-mapper).
-
 </DocPage>

packages/react-renderer-demo/src/pages/mappers/suir-component-mapper.md

@@ -1,15 +1,16 @@
 import DocPage from '@docs/doc-page';
+import ComponentMapperBar from '@docs/component-mapper-bar';
 
 <DocPage>
 
 # Semantic UI react
 
+<ComponentMapperBar prefix="suir" href="https://react.semantic-ui.com/" />
+
 Semantic UI react mapper provides components from [Semantic UI react](https://react.semantic-ui.com/).
 
 ## Installation
 
-Link to [NPM](https://www.npmjs.com/package/@data-driven-forms/suir-component-mapper).
-
 ```bash
 npm install --save @data-driven-forms/suir-component-mapper
 ```
@@ -40,8 +41,4 @@ All components accept all other props described in Semantic UI react documentati
 
 To avoid re-refining common customization for each field in schema, check out the [global component props](/mappers/global-component-props) section.
 
-## Contribution
-
-You can contribute to this mapper [here](https://github.com/data-driven-forms/react-forms/tree/master/packages/suir-component-mapper).
-
 </DocPage>