@dbmx/toasts 0.0.19 → 0.0.20

package/cjs/components/HelloWorld/index.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+
+var HelloWorld = function HelloWorld(_ref) {
+  var name = _ref.name;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: '#cfe8ff60',
+      padding: 15
+    }
+  }, /*#__PURE__*/React.createElement("h2", null, "testing react component"), /*#__PURE__*/React.createElement("p", null, "Your name is: ", /*#__PURE__*/React.createElement("i", {
+    style: {
+      color: '#9c9c9c'
+    }
+  }, name)), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "filter"
+  }));
+};
+
+module.exports = HelloWorld;

package/cjs/index.cjs

@@ -1,37 +1,68 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.cjs');
-var React = require('react');
-
-function _interopNamespaceDefaultOnly (e) { return Object.freeze({ __proto__: null, default: e }); }
+// import { lazy } from 'react'
 
 var importPath = '@dbmx/toasts';
-var type = importPath;
-var tag = 'toast';
-var toasts = [{
+// const type = importPath
+// const tag = 'toast'
+
+var toasts = [
+// {
+//   id: 'sdmxDatagrid',
+//   importPath,
+//   type,
+//   tag,
+//   name: 'SDMX Datagrid',
+//   tech: 'react',
+//   description:
+//     'SDMX, which stands for Statistical Data and Metadata eXchange, is an international initiative that aims at standardising and modernising ("industrialising") the mechanisms and processes for the exchange of statistical data and metadata among international organisations and their member countries.',
+//   component: lazy(async () => {
+//     const obj = await import('./components/SdmxDatagrid/index.jsx')
+//     return typeof obj.default === 'function' ? obj : obj.default
+//   }),
+//   image: '/images/toasts/sdmx_datagrid.png', // TODO
+//   props: {
+//     endpoint: {
+//       type: 'url',
+//       required: true,
+//     },
+//     resourceType: {
+//       type: 'select',
+//       required: true,
+//       defaultValue: 'dataflow',
+//       data: [
+//         { value: 'dataflow', label: 'Dataflow' },
+//         { value: 'datastructure', label: 'DataStructure' },
+//         { value: 'dataproviderscheme', label: 'DataProvider' },
+//       ],
+//     },
+//     agencyID: {
+//       type: 'string',
+//       required: true,
+//       defaultValue: '*',
+//     },
+//     id: {
+//       type: 'string',
+//       required: true,
+//     },
+//     version: {
+//       type: 'string',
+//       required: true,
+//       defaultValue: '~',
+//     },
+//   },
+// },
+
+{
   id: 'sdmxDatagrid',
   importPath: importPath,
-  type: type,
-  tag: tag,
+  brand: 'web-component',
+  tag: 'sdmx-datagrid',
   name: 'SDMX Datagrid',
-  tech: 'react',
   description: 'SDMX, which stands for Statistical Data and Metadata eXchange, is an international initiative that aims at standardising and modernising ("industrialising") the mechanisms and processes for the exchange of statistical data and metadata among international organisations and their member countries.',
-  component: /*#__PURE__*/React.lazy( /*#__PURE__*/_rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
-    var obj;
-    return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _context.next = 2;
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./components/SdmxDatagrid/index.cjs')); });
-        case 2:
-          obj = _context.sent;
-          return _context.abrupt("return", typeof obj["default"] === 'function' ? obj : obj["default"]);
-        case 4:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }))),
+  "import": function _import() {
+    return Promise.resolve().then(function () { return require('./webComponents/SDMXDatagrid/index.cjs'); });
+  },
   image: '/images/toasts/sdmx_datagrid.png',
   // TODO
   props: {
@@ -72,12 +103,11 @@ var toasts = [{
 }, {
   id: 'helloWorld',
   importPath: '@dbmx/webComponents',
-  type: '@dbmx/webComponents',
+  brand: 'web-component',
   tag: 'hello-world',
   name: 'Hello World',
-  tech: 'web-component',
   description: 'web component demonstration',
-  component: function component() {
+  "import": function _import() {
     return Promise.resolve().then(function () { return require('./webComponents/HelloWorld/index.cjs'); });
   },
   image: 'https://ui.mantine.dev/_next/static/media/comments-light.9c0747c0.svg',

package/cjs/webComponents/HelloWorld/index.cjs

@@ -3,23 +3,8 @@
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.cjs');
 var React = require('react');
 var client = require('../../node_modules/react-dom/client.cjs');
+var index = require('../../components/HelloWorld/index.cjs');
 
-var Component = function Component(_ref) {
-  var name = _ref.name;
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      backgroundColor: '#cfe8ff60',
-      padding: 15
-    }
-  }, /*#__PURE__*/React.createElement("h2", null, "testing react component"), /*#__PURE__*/React.createElement("p", null, "Your name is: ", /*#__PURE__*/React.createElement("i", {
-    style: {
-      color: '#9c9c9c'
-    }
-  }, name)), /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    placeholder: "filter"
-  }));
-};
 var HelloWorld = /*#__PURE__*/function (_HTMLElement) {
   _rollupPluginBabelHelpers.inherits(HelloWorld, _HTMLElement);
   var _super = _rollupPluginBabelHelpers.createSuper(HelloWorld);
@@ -30,14 +15,14 @@ var HelloWorld = /*#__PURE__*/function (_HTMLElement) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "setName", void 0);
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "HelloWorldContainer", function () {
-      var _useState = React.useState(_this.getAttribute('name')),
-        _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-        name = _useState2[0],
-        updateName = _useState2[1];
-      _this.setName = updateName;
-      return /*#__PURE__*/React.createElement(Component, {
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "forceUpdateComponent", void 0);
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "container", function () {
+      var forceUpdate = React.useReducer(function () {
+        return {};
+      }, {})[1];
+      _this.forceUpdateComponent = forceUpdate;
+      var name = _this.getAttribute('name');
+      return /*#__PURE__*/React.createElement(index, {
         name: name
       });
     });
@@ -51,16 +36,12 @@ var HelloWorld = /*#__PURE__*/function (_HTMLElement) {
         mode: 'open'
       }).appendChild(mountPoint);
       var root = client.createRoot(mountPoint);
-      root.render( /*#__PURE__*/React.createElement(this.HelloWorldContainer, null));
+      root.render( /*#__PURE__*/React.createElement(this.container, null));
     }
   }, {
     key: "attributeChangedCallback",
-    value: function attributeChangedCallback(attrName, oldValue, newValue) {
-      if (attrName === 'name') {
-        if (typeof this.setName === 'function') {
-          this.setName(newValue);
-        }
-      }
+    value: function attributeChangedCallback() {
+      if (typeof this.forceUpdateComponent === 'function') this.forceUpdateComponent();
     }
   }], [{
     key: "observedAttributes",

package/cjs/webComponents/SDMXDatagrid/index.cjs

@@ -0,0 +1,81 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var client = require('../../node_modules/react-dom/client.cjs');
+var reactIntl = require('react-intl');
+var core = require('@mantine/core');
+var index = require('../../components/SdmxDatagrid/index.cjs');
+
+var SDMXDatagrid = /*#__PURE__*/function (_HTMLElement) {
+  _rollupPluginBabelHelpers.inherits(SDMXDatagrid, _HTMLElement);
+  var _super = _rollupPluginBabelHelpers.createSuper(SDMXDatagrid);
+  function SDMXDatagrid() {
+    var _this;
+    _rollupPluginBabelHelpers.classCallCheck(this, SDMXDatagrid);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "forceUpdateComponent", void 0);
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "container", function () {
+      var forceUpdate = React.useReducer(function () {
+        return {};
+      }, {})[1];
+      _this.forceUpdateComponent = forceUpdate;
+      var props = {
+        endpoint: _this.getAttribute('endpoint'),
+        resourceType: _this.getAttribute('resourceType'),
+        agencyID: _this.getAttribute('agencyID'),
+        id: _this.getAttribute('id'),
+        version: _this.getAttribute('version')
+      };
+      var containerProps = _this.getAttribute('containerProps') || {};
+      var containerPropsValue = typeof containerProps === 'string' ? JSON.parse(containerProps) : {};
+      return /*#__PURE__*/React.createElement(reactIntl.IntlProvider, {
+        defaultLocale: "en",
+        locale: "en",
+        messages: {}
+      }, /*#__PURE__*/React.createElement("div", containerPropsValue, /*#__PURE__*/React.createElement(index, props)));
+    });
+    return _this;
+  }
+  _rollupPluginBabelHelpers.createClass(SDMXDatagrid, [{
+    key: "connectedCallback",
+    value: function connectedCallback() {
+      var shadowRoot = this.attachShadow({
+        mode: 'open'
+      });
+      var mountPoint = document.createElement('div');
+      var emotionRoot = document.createElement('div');
+      shadowRoot.appendChild(mountPoint);
+      shadowRoot.appendChild(emotionRoot);
+      var appendCache = core.createEmotionCache({
+        key: 'mantine-wc',
+        container: emotionRoot
+      });
+      var root = client.createRoot(mountPoint);
+      root.render( /*#__PURE__*/React.createElement(core.MantineProvider, {
+        emotionCache: appendCache,
+        withGlobalStyles: true,
+        withNormalizeCSS: true
+      }, /*#__PURE__*/React.createElement(reactIntl.IntlProvider, {
+        defaultLocale: "en",
+        locale: "en",
+        messages: {}
+      }, /*#__PURE__*/React.createElement(this.container, null))));
+    }
+  }, {
+    key: "attributeChangedCallback",
+    value: function attributeChangedCallback() {
+      if (typeof this.forceUpdateComponent === 'function') this.forceUpdateComponent();
+    }
+  }], [{
+    key: "observedAttributes",
+    get: function get() {
+      return ['endpoint', 'resourceType', 'agencyID', 'id', 'version'];
+    }
+  }]);
+  return SDMXDatagrid;
+}( /*#__PURE__*/_rollupPluginBabelHelpers.wrapNativeSuper(HTMLElement));
+customElements.define('sdmx-datagrid', SDMXDatagrid);