Add AWS Northstar component to documentation

Author: rvsia

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

@@ -33,24 +33,24 @@ const Root = styled('div')(({ theme }) => ({
   },
 }));
 
-const ComponentMapperBar = ({ prefix, href }) => {
+const ComponentMapperBar = ({ prefix, href, github, npm, npmSvg }) => {
   return (
     <Root className={classes.root}>
       <a
-        href={`https://badge.fury.io/js/%40data-driven-forms%2F${prefix}-component-mapper`}
+        href={npm || `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" />
+        <img src={npmSvg || `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" size="large">
         <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`}
+        href={github || `https://github.com/data-driven-forms/react-forms/tree/master/packages/${prefix}-component-mapper`}
         rel="noopener noreferrer"
         target="_blank"
         size="large"
@@ -64,6 +64,9 @@ const ComponentMapperBar = ({ prefix, href }) => {
 ComponentMapperBar.propTypes = {
   prefix: PropTypes.string.isRequired,
   href: PropTypes.string.isRequired,
+  github: PropTypes.string.isRequired,
+  npm: PropTypes.string.isRequired,
+  npmSvg: PropTypes.string.isRequired,
 };
 
 export default ComponentMapperBar;

packages/react-renderer-demo/src/components/navigation/schemas/provider-mappers.schema.js

@@ -34,6 +34,15 @@ const providedMappersSchema = [
     link: 'suir-component-mapper',
     linkText: 'Semantic UI mapper',
   },
+  {
+    subHeader: true,
+    noRoute: true,
+    title: 'Community mappers',
+  },
+  {
+    link: 'aws-northstar',
+    linkText: 'AWS Northstar',
+  },
   {
     subHeader: true,
     noRoute: true,

packages/react-renderer-demo/src/pages/provided-mappers/aws-northstar.md

@@ -0,0 +1,31 @@
+import DocPage from '@docs/doc-page';
+import ComponentMapperBar from '@docs/component-mapper-bar';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+
+<DocPage>
+
+# AWS Northstar
+
+<ComponentMapperBar prefix="mui" href="https://northstar.aws-prototyping.cloud/#/Components/FormRenderer" github="https://github.com/aws/aws-northstar" npm="https://www.npmjs.com/package/aws-northstar" npmSvg="https://badge.fury.io/js/aws-northstar.svg" />
+
+<br />
+
+<Alert severity="info">This is a community mapper.</Alert>
+
+<br />
+
+Form Renderer component from [Amazon Web Services - NorthStar - Prototyping Design System](https://github.com/aws/aws-northstar) fully integrates Data Driven Forms.
+
+## Description
+
+*"NorthStar aims to be the standard for rapidly prototyping intuitive, meaningful and accessible user experiences. It simplifies your work and ensures consistent, predictable experiences at scale for your customers. With NorthStar, you can focus on innovation and do more with less."*
+
+<Box sx={{ marginTop: 12 }}>
+<hr />
+
+*Do you have own mapper you want to share? [Let us know!](https://github.com/data-driven-forms/react-forms/discussions)*
+
+</Box>
+
+</DocPage>