@qoh/core-react 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# **0.0.1** feature parity _(2023-03-20)_
+
+#### changes:
+
+- use the same features and names as the angular version

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 gravity&storm GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+#Queen of hearts client core package
+This package is providing the core client packages in react.

package/lib/ApiError.d.ts

@@ -0,0 +1,9 @@
+export declare class ApiError extends Error {
+    status: number;
+    body: {
+        id: string;
+        summary: string;
+        details: string;
+    };
+    constructor(status: number, body: any);
+}

package/lib/ApiError.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ApiError = void 0;
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var ApiError = exports.ApiError = /*#__PURE__*/function (_Error) {
+  (0, _inherits2["default"])(ApiError, _Error);
+  var _super = _createSuper(ApiError);
+  function ApiError(status, body) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, ApiError);
+    _this = _super.call(this, body.summary);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "status", void 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "body", void 0);
+    _this.name = "ApiError";
+    _this.status = status;
+    _this.body = body;
+    return _this;
+  }
+  return (0, _createClass2["default"])(ApiError);
+}( /*#__PURE__*/(0, _wrapNativeSuper2["default"])(Error));

package/lib/QueenofheartsService.d.ts

@@ -0,0 +1,66 @@
+export interface IFCDictionary {
+    [index: string]: ReactFCWithFieldNames;
+}
+export interface ReactFCWithFieldNames {
+    component: React.FC<any>;
+    fieldNames?: string[];
+}
+export declare let componentRegistry: IFCDictionary;
+export declare function unregisterComponent(name: string): void;
+export declare function registerComponent(functionalComponent: React.FC<any>, typeName: string, fieldNames?: string[]): void;
+export declare function getAllregisteredComponents(): IFCDictionary;
+import React from 'react';
+import Backend from './backend/Backend';
+export declare enum Filter {
+    eq = "eq",
+    in = "in",
+    neq = "neq",
+    notIn = "notIn"
+}
+export interface QohResponse {
+    pages: any | null;
+    message: string;
+}
+export declare class QueenofheartsService {
+    private static instance;
+    data: any;
+    debug: boolean;
+    backend: Backend;
+    apiToken: string;
+    localServer?: string;
+    latestUrl: string;
+    latestData: Object;
+    private constructor();
+    static init(backend: Backend, apiToken: string, localServer?: string): void;
+    static getInstance(): QueenofheartsService;
+    createComponent(props: any): JSX.Element | null;
+    private buildUrl;
+    queryGraphql: (graphqlQuery: string) => Promise<any>;
+    query: (queryName: string, options?: {
+        filter?: {
+            name: string;
+            operator: Filter;
+            value: string;
+        }[];
+        components?: string;
+        ignoreProperties?: string[];
+        variables?: {
+            [x: string]: unknown;
+            filter?: {
+                name: string;
+                operator: Filter;
+                value: string;
+            }[];
+            locale?: string;
+        };
+        locale?: string;
+        depth?: number;
+    }) => Promise<any>;
+    private getRegisteredComponentsWithFields;
+    getQueries: () => Promise<any>;
+    private injectIds;
+    private sendDebugEvent;
+    private sendQueriesEvent;
+    private sendComponentHTML;
+    private highlightComponent;
+}

package/lib/QueenofheartsService.js

@@ -0,0 +1,462 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.componentRegistry = exports.QueenofheartsService = exports.Filter = void 0;
+exports.getAllregisteredComponents = getAllregisteredComponents;
+exports.registerComponent = registerComponent;
+exports.unregisterComponent = unregisterComponent;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _ApiError = require("./ApiError");
+var _react = _interopRequireDefault(require("react"));
+var _Dodo = _interopRequireDefault(require("./components/Dodo"));
+var _class;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var qohUri = 'https://qoh.azurewebsites.net/api';
+var componentRegistry = exports.componentRegistry = {};
+function unregisterComponent(name) {
+  delete componentRegistry[name];
+}
+function registerComponent(functionalComponent, typeName, fieldNames) {
+  if (typeName !== undefined) {
+    if (componentRegistry[typeName] === undefined) {
+      var componentWithFieldNames = {
+        component: functionalComponent,
+        fieldNames: fieldNames
+      };
+      componentRegistry[typeName] = componentWithFieldNames;
+    }
+  }
+}
+function getAllregisteredComponents() {
+  return componentRegistry;
+}
+
+//TODO: remove????
+var Filter = exports.Filter = /*#__PURE__*/function (Filter) {
+  Filter["eq"] = "eq";
+  Filter["in"] = "in";
+  Filter["neq"] = "neq";
+  Filter["notIn"] = "notIn";
+  return Filter;
+}({});
+var QueenofheartsService = exports.QueenofheartsService = /*#__PURE__*/function () {
+  function QueenofheartsService(backend, apiToken, localServer) {
+    var _this = this;
+    (0, _classCallCheck2["default"])(this, QueenofheartsService);
+    (0, _defineProperty2["default"])(this, "data", void 0);
+    (0, _defineProperty2["default"])(this, "debug", void 0);
+    (0, _defineProperty2["default"])(this, "backend", void 0);
+    (0, _defineProperty2["default"])(this, "apiToken", void 0);
+    (0, _defineProperty2["default"])(this, "localServer", void 0);
+    //debugger-data:
+    (0, _defineProperty2["default"])(this, "latestUrl", '');
+    (0, _defineProperty2["default"])(this, "latestData", {});
+    (0, _defineProperty2["default"])(this, "buildUrl", function (endpoint) {
+      //use Azure function
+      if (_this.apiToken) {
+        var _this$localServer;
+        return "".concat((_this$localServer = _this.localServer) !== null && _this$localServer !== void 0 ? _this$localServer : qohUri, "/").concat(endpoint, "?code=").concat(_this.apiToken);
+      }
+      //use localServer (API token not provided)
+      else if (_this.apiToken == '') {
+        return "".concat(_this.localServer, "/").concat(endpoint);
+      } else {
+        return null;
+      }
+    });
+    (0, _defineProperty2["default"])(this, "queryGraphql", /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(graphqlQuery) {
+        var queryUrl, response, body, errorResponse;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              /*    
+              if (!this.backend.uri) {
+                throw new Error(
+                  'Backend-Uri is missing. The Backend-Uri is either set via the constructor or the init methode.'
+                );
+              }
+              if (!this.backend.token) {
+                throw new Error(
+                  'Token is missing. The token is eihter set via the constructor or the init methode.'
+                );
+              }
+              */
+              queryUrl = _this.buildUrl('execGraphqlQuery');
+              _context.next = 3;
+              return fetch(queryUrl, {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                  uri: _this.backend.uri,
+                  query: graphqlQuery,
+                  token: _this.backend.token
+                })
+              });
+            case 3:
+              response = _context.sent;
+              if (!response.ok) {
+                _context.next = 12;
+                break;
+              }
+              _context.next = 7;
+              return response.json();
+            case 7:
+              body = _context.sent;
+              _this.sendDebugEvent();
+              return _context.abrupt("return", body);
+            case 12:
+              _context.next = 14;
+              return response.json();
+            case 14:
+              errorResponse = _context.sent;
+              console.log(errorResponse);
+              throw new _ApiError.ApiError(response.status, errorResponse);
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+    (0, _defineProperty2["default"])(this, "query", /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(queryName, options) {
+        var queryUrl, extendedVariables, _extendedVariables$fi, _options$variables, _extendedVariables$fi2, response, _yield$response$json, body, normalizedBody, injectedBody, errorResponse;
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              // if (!this.backend.uri) {
+              //   throw new Error(
+              //     'Backend-Uri is missing. The Backend-Uri is either set via the constructor or the init methode.'
+              //   );
+              // }
+              // if (!this.backend.token) {
+              //   throw new Error(
+              //     'Token is missing. The token is eihter set via the constructor or the init methode.'
+              //   );
+              // }
+              //    if (queryName) {
+              //      throw new Error('QueryName is missing. The QueryName is has to be provided when calling the query methode. The queryName refers to the name of the objects to be queried. E.g. pages');
+              //    }
+              queryUrl = _this.buildUrl('execQuery');
+              extendedVariables = options !== null && options !== void 0 && options.variables ? _objectSpread({}, options.variables) : {};
+              if (options !== null && options !== void 0 && options.locale) {
+                extendedVariables.locale = options.locale;
+              }
+              if (options !== null && options !== void 0 && options.filter && Array.isArray(options.filter)) {
+                if (!extendedVariables.filter) {
+                  extendedVariables.filter = [];
+                }
+                (_extendedVariables$fi = extendedVariables.filter).push.apply(_extendedVariables$fi, (0, _toConsumableArray2["default"])(options.filter));
+                if (options !== null && options !== void 0 && (_options$variables = options.variables) !== null && _options$variables !== void 0 && _options$variables.filter && Array.isArray(options.variables.filter)) {
+                  (_extendedVariables$fi2 = extendedVariables.filter).push.apply(_extendedVariables$fi2, (0, _toConsumableArray2["default"])(options.variables.filter));
+                }
+              }
+              _context2.next = 6;
+              return fetch(queryUrl, {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                  uri: _this.backend.uri,
+                  queryname: queryName,
+                  token: _this.backend.token,
+                  variables: extendedVariables,
+                  components: _this.getRegisteredComponentsWithFields(),
+                  ignoreProperties: options.ignoreProperties,
+                  depth: options.depth
+                })
+              });
+            case 6:
+              response = _context2.sent;
+              if (!response.ok) {
+                _context2.next = 27;
+                break;
+              }
+              _context2.next = 10;
+              return response.json();
+            case 10:
+              _context2.t1 = _yield$response$json = _context2.sent;
+              _context2.t0 = _context2.t1 === null;
+              if (_context2.t0) {
+                _context2.next = 14;
+                break;
+              }
+              _context2.t0 = _yield$response$json === void 0;
+            case 14:
+              if (!_context2.t0) {
+                _context2.next = 18;
+                break;
+              }
+              _context2.t2 = void 0;
+              _context2.next = 19;
+              break;
+            case 18:
+              _context2.t2 = _yield$response$json.data;
+            case 19:
+              body = _context2.t2;
+              normalizedBody = _this.backend.normalize(body);
+              injectedBody = _this.debug ? _this.injectIds(normalizedBody) : normalizedBody;
+              _this.latestData = injectedBody;
+              _this.sendDebugEvent();
+              return _context2.abrupt("return", injectedBody);
+            case 27:
+              _context2.next = 29;
+              return response.json();
+            case 29:
+              errorResponse = _context2.sent;
+              console.log(errorResponse);
+              throw new _ApiError.ApiError(response.status, errorResponse);
+            case 32:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function (_x2, _x3) {
+        return _ref2.apply(this, arguments);
+      };
+    }());
+    (0, _defineProperty2["default"])(this, "getRegisteredComponentsWithFields", function () {
+      var components = {};
+      var entries = Object.entries(getAllregisteredComponents());
+      if (entries && Array.isArray(entries)) {
+        entries.forEach(function (_ref3) {
+          var _ref4 = (0, _slicedToArray2["default"])(_ref3, 2),
+            key = _ref4[0],
+            value = _ref4[1];
+          var fields = {};
+          var fieldNames = value.fieldNames;
+          var hasAtLeastOneField = false;
+          if (fieldNames && Array.isArray(fieldNames)) {
+            fieldNames.forEach(function (field) {
+              fields[field] = true;
+              hasAtLeastOneField = true;
+            });
+          }
+          if (hasAtLeastOneField) {
+            components[key] = fields;
+          } else {
+            components[key] = {
+              __all: true
+            };
+          }
+        });
+      }
+      return components;
+    });
+    (0, _defineProperty2["default"])(this, "getQueries", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+      var queryUrl, response, body;
+      return _regenerator["default"].wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            queryUrl = _this.buildUrl('queries');
+            if (!(queryUrl && _this.backend && (_this.localServer || _this.backend.token))) {
+              _context3.next = 18;
+              break;
+            }
+            _context3.next = 4;
+            return fetch(queryUrl, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify({
+                uri: _this.backend.uri,
+                token: _this.backend.token || null
+              })
+            });
+          case 4:
+            response = _context3.sent;
+            if (!response.ok) {
+              _context3.next = 16;
+              break;
+            }
+            _context3.prev = 6;
+            _context3.next = 9;
+            return response.json();
+          case 9:
+            body = _context3.sent;
+            return _context3.abrupt("return", body);
+          case 13:
+            _context3.prev = 13;
+            _context3.t0 = _context3["catch"](6);
+            console.error(_context3.t0);
+          case 16:
+            _context3.next = 19;
+            break;
+          case 18:
+            console.error('api, uri and CMSToken have to be provided');
+          case 19:
+            return _context3.abrupt("return", '');
+          case 20:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3, null, [[6, 13]]);
+    })));
+    this.backend = backend;
+    this.apiToken = apiToken;
+    this.localServer = localServer;
+    // devtools-panel events and debug-option
+    this.debug = typeof document !== 'undefined' && document.getElementsByTagName('body')[0].classList.contains('qoh-inject-ids');
+    if (this.debug && typeof window !== 'undefined') {
+      window.addEventListener('QueenOfHearts-RequestData', function () {
+        _this.sendDebugEvent();
+      });
+      window.addEventListener('QueenOfHearts-RequestQueries', function () {
+        _this.sendQueriesEvent();
+      });
+      window.addEventListener('QueenOfHearts-HighlightComponent', function (event) {
+        _this.highlightComponent(event.detail);
+      });
+      window.addEventListener('QueenOfHearts-RequestComponentHTML', function (event) {
+        _this.sendComponentHTML(event.detail);
+      });
+    }
+  }
+  (0, _createClass2["default"])(QueenofheartsService, [{
+    key: "createComponent",
+    value: function createComponent(props) {
+      var _componentRegistry$pr, _componentRegistry$pr2;
+      var functionalComponent = (_componentRegistry$pr = (_componentRegistry$pr2 = componentRegistry[props.data.__typename]) === null || _componentRegistry$pr2 === void 0 ? void 0 : _componentRegistry$pr2.component) !== null && _componentRegistry$pr !== void 0 ? _componentRegistry$pr : _Dodo["default"];
+      return /*#__PURE__*/_react["default"].createElement(functionalComponent, _objectSpread(_objectSpread({}, props), props.data));
+    }
+  }, {
+    key: "injectIds",
+    value: function injectIds(data) {
+      var _this2 = this;
+      if (Array.isArray(data)) {
+        data.forEach(function (entry) {
+          return _this2.injectIds(entry);
+        });
+      } else if (data && (0, _typeof2["default"])(data) === 'object') {
+        if (data.hasOwnProperty('__typename')) {
+          var id = Math.random().toString();
+          data.__qohId = id.substr(id.indexOf('.') + 1);
+        }
+        Object.keys(data).forEach(function (key) {
+          return data[key] = _this2.injectIds(data[key]);
+        });
+      }
+      return data;
+    }
+  }, {
+    key: "sendDebugEvent",
+    value: function sendDebugEvent() {
+      if (typeof window === 'undefined') return;
+      var debugData = {
+        registeredComponents: Object.keys(componentRegistry),
+        url: this.latestUrl,
+        data: this.latestData
+      };
+      var event = new CustomEvent('QueenOfHearts-DebuggingData', {
+        detail: debugData
+      });
+      window.dispatchEvent(event);
+    }
+  }, {
+    key: "sendQueriesEvent",
+    value: function () {
+      var _sendQueriesEvent = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+        var event;
+        return _regenerator["default"].wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              if (!(typeof window === 'undefined')) {
+                _context4.next = 2;
+                break;
+              }
+              return _context4.abrupt("return");
+            case 2:
+              _context4.t0 = CustomEvent;
+              _context4.next = 5;
+              return this.getQueries();
+            case 5:
+              _context4.t1 = _context4.sent;
+              _context4.t2 = {
+                detail: _context4.t1
+              };
+              event = new _context4.t0('QueenOfHearts-AvailableQueries', _context4.t2);
+              window.dispatchEvent(event);
+            case 9:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4, this);
+      }));
+      function sendQueriesEvent() {
+        return _sendQueriesEvent.apply(this, arguments);
+      }
+      return sendQueriesEvent;
+    }()
+  }, {
+    key: "sendComponentHTML",
+    value: function sendComponentHTML(id) {
+      var _document$querySelect;
+      if (typeof window === 'undefined') return;
+      var component = (_document$querySelect = document.querySelector("[qohId='".concat(id, "']"))) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.nextElementSibling;
+      if (component) {
+        var event = new CustomEvent('QueenOfHearts-SelectedComponentHTML', {
+          detail: {
+            qohId: id,
+            html: component.outerHTML
+          }
+        });
+        window.dispatchEvent(event);
+      }
+    }
+  }, {
+    key: "highlightComponent",
+    value: function highlightComponent(id) {
+      var _document$querySelect2;
+      var animation = [{
+        outline: 'thick auto white'
+      }, {
+        outline: 'thick auto red'
+      }];
+      var animationTiming = {
+        duration: 1000,
+        iterations: 2
+      };
+      var component = (_document$querySelect2 = document.querySelector("[qohId='".concat(id, "']"))) === null || _document$querySelect2 === void 0 ? void 0 : _document$querySelect2.nextElementSibling;
+      component && component.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'center'
+      });
+      component && component.animate(animation, animationTiming);
+    }
+  }], [{
+    key: "init",
+    value: function init(backend, apiToken, localServer) {
+      QueenofheartsService.instance = new QueenofheartsService(backend, apiToken, localServer);
+    }
+  }, {
+    key: "getInstance",
+    value: function getInstance() {
+      if (!QueenofheartsService.instance) console.error('QueenofheartsService was not initializes using QueenofheartsService.init(backend, apiToken)');
+      return QueenofheartsService.instance;
+    }
+  }]);
+  return QueenofheartsService;
+}();
+_class = QueenofheartsService;
+(0, _defineProperty2["default"])(QueenofheartsService, "instance", void 0);

package/lib/backend/Backend.d.ts

@@ -0,0 +1,5 @@
+export default interface Backend {
+    token: string;
+    uri: string;
+    normalize(data: any): any;
+}

package/lib/backend/Backend.js

@@ -0,0 +1 @@
+"use strict";

package/lib/backend/DatoCMS.d.ts

@@ -0,0 +1,8 @@
+import Backend from './Backend';
+export default class DatoCMS implements Backend {
+  token: string;
+  uri: string;
+  constructor(token: string);
+  renameSEOMetaTags(props: any): void;
+  normalize(data: any): any;
+}

package/lib/backend/DatoCMS.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var DatoCMS = exports["default"] = /*#__PURE__*/function () {
+  function DatoCMS(token) {
+    (0, _classCallCheck2["default"])(this, DatoCMS);
+    (0, _defineProperty2["default"])(this, "token", '');
+    (0, _defineProperty2["default"])(this, "uri", 'https://graphql.datocms.com/');
+    this.token = token;
+  }
+  (0, _createClass2["default"])(DatoCMS, [{
+    key: "renameSEOMetaTags",
+    value: function renameSEOMetaTags(props) {
+      props.forEach(function (_, i, tags) {
+        tags[i].__typename = "SEOMetaTag";
+      });
+    }
+  }, {
+    key: "normalize",
+    value: function normalize(data) {
+      var _this = this;
+      if (data["_seoMetaTags"]) {
+        this.renameSEOMetaTags(data["_seoMetaTags"]);
+      }
+      Object.keys(data).forEach(function (key) {
+        if (Array.isArray(data[key])) {
+          data[key] = data[key].map(function (value) {
+            return _this.normalize(value);
+          });
+        }
+        if (!!data[key] && (0, _typeof2["default"])(data[key]) === "object") {
+          data[key] = _this.normalize(data[key]);
+        }
+      });
+      return data;
+    }
+  }]);
+  return DatoCMS;
+}();

package/lib/backend/StrapiCMS.d.ts

@@ -0,0 +1,8 @@
+import Backend from './Backend';
+export default class StrapiCMS implements Backend {
+    token: string;
+    uri: string;
+    constructor(token: string, strapiUrl: string);
+    renameSEOMetaTags(props: any): void;
+    normalize(data: any): any;
+}

package/lib/backend/StrapiCMS.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _dotenv = _interopRequireDefault(require("dotenv"));
+_dotenv["default"].config();
+var StrapiCMS = exports["default"] = /*#__PURE__*/function () {
+  function StrapiCMS(token, strapiUrl) {
+    (0, _classCallCheck2["default"])(this, StrapiCMS);
+    (0, _defineProperty2["default"])(this, "token", '');
+    (0, _defineProperty2["default"])(this, "uri", '');
+    this.token = token;
+    this.uri = strapiUrl;
+  }
+  (0, _createClass2["default"])(StrapiCMS, [{
+    key: "renameSEOMetaTags",
+    value: function renameSEOMetaTags(props) {
+      props.forEach(function (_, i, tags) {
+        tags[i].__typename = 'SEOMetaTag';
+      });
+    }
+  }, {
+    key: "normalize",
+    value: function normalize(data) {
+      var _this = this;
+      if (!data) {
+        return data;
+      }
+      if (data['_seoMetaTags']) {
+        this.renameSEOMetaTags(data['_seoMetaTags']);
+      }
+      Object.keys(data).forEach(function (key) {
+        if (Array.isArray(data[key])) {
+          data[key] = data[key].map(function (value) {
+            return _this.normalize(value);
+          });
+        }
+        if (!!data[key] && (0, _typeof2["default"])(data[key]) === 'object') {
+          data[key] = _this.normalize(data[key]);
+        }
+      });
+      return data;
+    }
+  }]);
+  return StrapiCMS;
+}();

package/lib/backend/index.d.ts

@@ -0,0 +1,3 @@
+import DatoCMS from './DatoCMS';
+import StrapiCMS from './StrapiCMS';
+export { DatoCMS, StrapiCMS };

package/lib/backend/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DatoCMS", {
+  enumerable: true,
+  get: function get() {
+    return _DatoCMS["default"];
+  }
+});
+Object.defineProperty(exports, "StrapiCMS", {
+  enumerable: true,
+  get: function get() {
+    return _StrapiCMS["default"];
+  }
+});
+var _DatoCMS = _interopRequireDefault(require("./DatoCMS"));
+var _StrapiCMS = _interopRequireDefault(require("./StrapiCMS"));

package/lib/components/Dodo.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function DodoComponent(props: any): JSX.Element;

package/lib/components/Dodo.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = DodoComponent;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var React = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function renderArray(key, value, i) {
+  return /*#__PURE__*/React.createElement(_material.Accordion, {
+    key: "".concat(key, "_").concat(i),
+    style: {
+      width: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(_material.AccordionSummary, {
+    style: {
+      padding: 0
+    },
+    expandIcon: /*#__PURE__*/React.createElement(_ExpandMore["default"], null)
+  }, key, ": Array[", value.length, "]"), /*#__PURE__*/React.createElement(_material.AccordionDetails, null, value.map(function (element, i) {
+    return renderData('', element, i);
+  })));
+}
+function renderObject(key, value, i) {
+  return /*#__PURE__*/React.createElement(_material.Accordion, {
+    key: "".concat(key, "_").concat(i),
+    style: {
+      width: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(_material.AccordionSummary, {
+    expandIcon: /*#__PURE__*/React.createElement(_ExpandMore["default"], null)
+  }, key), /*#__PURE__*/React.createElement(_material.AccordionDetails, null, Object.entries(value).map(function (entry, i) {
+    return renderData(entry[0], entry[1], i);
+  })));
+}
+function renderSimple(key, value, i) {
+  return /*#__PURE__*/React.createElement("div", {
+    key: "".concat(key, "_").concat(i)
+  }, key, ": ", "".concat(value));
+}
+function renderData(key, value, i) {
+  var _value$__typename;
+  if (Array.isArray(value)) return renderArray(key, value, i);
+  if (!value || ['string', 'number'].includes((0, _typeof2["default"])(value))) return renderSimple(key, value, i);
+  if (typeof value === 'boolean') return renderSimple(key, value ? 'true' : 'false', i);
+  var objectKey = "".concat(key ? key + ': ' : '').concat((_value$__typename = value.__typename) !== null && _value$__typename !== void 0 ? _value$__typename : 'object');
+  return renderObject(objectKey, value, i);
+}
+function DodoComponent(props) {
+  if ((0, _typeof2["default"])(props.data) === "object") {
+    return /*#__PURE__*/React.createElement(_material.Paper, {
+      style: {
+        margin: ".5em",
+        width: "calc(100% - 1em)"
+      }
+    }, renderData('', props.data, 1));
+  }
+  return null;
+}

package/lib/components/QueenofheartsRenderComponent.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function QueenofheartsRenderComponent(props: any): JSX.Element;

package/lib/components/QueenofheartsRenderComponent.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QueenofheartsRenderComponent = QueenofheartsRenderComponent;
+var _index = require("../index");
+var _react = _interopRequireDefault(require("react"));
+function QueenofheartsRenderComponent(props) {
+  if (props.data && _index.QueenofheartsService.getInstance()) {
+    if (Array.isArray(props.data)) {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, props.data.map(function (item, index) {
+        return _index.QueenofheartsService.getInstance().createComponent({
+          data: item,
+          key: index
+        });
+      }));
+    }
+    return _index.QueenofheartsService.getInstance().createComponent(props);
+  } else if (!_index.QueenofheartsService.getInstance()) {
+    return /*#__PURE__*/_react["default"].createElement("div", null, "QueenofheartsService is not initialised");
+  }
+  return /*#__PURE__*/_react["default"].createElement("div", null, "QueenofheartsRenderComponent: Invalid Data received");
+}

package/lib/declaration.d.js

@@ -0,0 +1 @@
+"use strict";

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./components/QueenofheartsRenderComponent";
+export * from "./QueenofheartsService";
+export * from "./backend";
+export * from "./ApiError";

package/lib/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _QueenofheartsRenderComponent = require("./components/QueenofheartsRenderComponent");
+Object.keys(_QueenofheartsRenderComponent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _QueenofheartsRenderComponent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _QueenofheartsRenderComponent[key];
+    }
+  });
+});
+var _QueenofheartsService = require("./QueenofheartsService");
+Object.keys(_QueenofheartsService).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _QueenofheartsService[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _QueenofheartsService[key];
+    }
+  });
+});
+var _backend = require("./backend");
+Object.keys(_backend).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _backend[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _backend[key];
+    }
+  });
+});
+var _ApiError = require("./ApiError");
+Object.keys(_ApiError).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ApiError[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ApiError[key];
+    }
+  });
+});

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@qoh/core-react",
+  "description": "Queen of hearts Core API",
+  "version": "0.0.1",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "/lib",
+    "/*.md"
+  ],
+  "private": false,
+  "scripts": {
+    "test": "jest --passWithNoTests",
+    "build:prod": "babel src --out-dir lib --extensions \".ts,.tsx\" --presets minify",
+    "build": "npm run build:types && npm run build:dev",
+    "build:dev": "babel src --out-dir lib --extensions \".ts,.tsx\"",
+    "build:types": "tsc --project tsconfig.json"
+  },
+  "dependencies": {
+    "@babel/cli": "^7.21.0",
+    "@babel/core": "^7.21.4",
+    "@mui/icons-material": "^5.11.16",
+    "babel-plugin-transform-scss": "^1.2.0",
+    "cross-env": "^7.0.3",
+    "mobx": "^6.3.0",
+    "mobx-react": "^7.1.0",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-decorators": "^7.14.2",
+    "@babel/plugin-transform-runtime": "^7.21.0",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@mui/material": "^5.11.16",
+    "@types/react": "^18.0.33",
+    "babel-jest": "^26.6.3",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-preset-minify": "^0.5.2",
+    "decamelize": "^1.2.0",
+    "i": "^0.3.7",
+    "identity-obj-proxy": "^3.0.0",
+    "is-ci": "^2.0.0",
+    "jest": "^26.6.3",
+    "npm": "^9.6.4",
+    "typescript": "^4.9.5",
+    "which-module": "^2.0.0"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.[t|j]sx?$": "babel-jest"
+    }
+  }
+}