feat(sui-widget-embedder): created Widgets components

Author: carlosvillu

packages/sui-widget-embedder/.gitignore

@@ -0,0 +1 @@
+react/

packages/sui-widget-embedder/.npmignore

@@ -0,0 +1 @@
+src-react

packages/sui-widget-embedder/package.json

@@ -6,15 +6,20 @@
     "sui-widget-embedder": "./bin/sui-widget-embedder.js"
   },
   "main": "index.js",
-  "scripts": {},
+  "scripts": {
+    "prepublish": "babel --presets sui ./src-react --out-dir ./react"
+  },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "@s-ui/bundler": "2",
-    "@s-ui/lint": "2"
+    "@s-ui/lint": "2",
+    "babel-cli": "6.26.0"
   },
   "dependencies": {
+    "@s-ui/component-peer-dependencies": "1",
+    "@s-ui/react-domain-connector": "1",
     "commander": "2.11.0",
     "express": "4.16.2",
     "http-proxy": "1.16.2",

packages/sui-widget-embedder/src-react/Widget.js

@@ -0,0 +1,27 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import ReactDOM from 'react-dom'
+
+import {Provider} from '@s-ui/react-domain-connector'
+
+export default class Widget extends Component {
+  static propTypes = {
+    children: PropTypes.element,
+    node: PropTypes.string,
+    i18n: PropTypes.object,
+    domain: PropTypes.object
+  }
+
+  componentDidMount () {
+    const node = document.querySelector(this.props.node)
+    const {children, i18n, domain} = this.props
+    ReactDOM.render(
+      <Provider i18n={i18n} domain={domain}>
+        {children}
+      </Provider>,
+      node
+    )
+  }
+
+  render () { return null }
+}

packages/sui-widget-embedder/src-react/Widgets.js

@@ -0,0 +1,7 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default function Widgets (props) {
+  return <div key={Math.random()}>{props.children}</div>
+}
+Widgets.propTypes = { children: PropTypes.node }

packages/sui-widget-embedder/src-react/render.js

@@ -0,0 +1,7 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+document.body.innerHTML += '<div id="root"></div>'
+export default function render (root) {
+  ReactDOM.render(<div>{root}</div>, document.querySelector('#root'))
+}