@panneau/core 1.0.1-alpha.0 → 1.0.3-alpha.0

package/es/index.js

@@ -1,9 +1,991 @@
-/** @module panneau/core */
-import * as _PropTypes from './lib/PropTypes';
-export { _PropTypes as PropTypes };
-export { default as ComponentsCollection } from './lib/ComponentsCollection';
-export { default as UrlGenerator } from './lib/UrlGenerator';
-export { default as Definition } from './lib/Definition';
-export { default as Resource } from './lib/Resource';
-export { default as ResourceApi } from './lib/ResourceApi';
-export { default as useResourceApi } from './lib/useResourceApi';
+import PropTypes$1 from 'prop-types';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
+import _createClass from '@babel/runtime/helpers/createClass';
+import _inherits from '@babel/runtime/helpers/inherits';
+import _createSuper from '@babel/runtime/helpers/createSuper';
+import EventEmitter from 'wolfy87-eventemitter';
+import 'lodash/isNumber';
+import 'snake-case';
+import isObject from 'lodash/isObject';
+import 'react';
+import { pascalCase } from 'change-case';
+import ReactIs from 'react-is';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import 'lodash/isString';
+import isArray from 'lodash/isArray';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import 'lodash/get';
+import 'lodash/capitalize';
+import 'slugify';
+import uniqBy from 'lodash/uniqBy';
+import uniq from 'lodash/uniq';
+import { Tracking as Tracking$1 } from '@folklore/tracking';
+
+var message = PropTypes$1.shape({
+  id: PropTypes$1.string.isRequired,
+  defaultMessage: PropTypes$1.string
+});
+var label = PropTypes$1.oneOfType([message, PropTypes$1.node]);
+var statusCode = PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.string]);
+/**
+ * Core
+ */
+
+var menuItem = PropTypes$1.shape({
+  id: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.string]),
+  label: label,
+  url: PropTypes$1.string,
+  external: PropTypes$1.bool,
+  active: PropTypes$1.bool
+});
+var menuItems = PropTypes$1.arrayOf(menuItem);
+var button = PropTypes$1.shape({
+  id: PropTypes$1.string,
+  label: label,
+  onClick: PropTypes$1.func
+});
+var buttons = PropTypes$1.arrayOf(button);
+var buttonTheme = PropTypes$1.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark', null]);
+var buttonSize = PropTypes$1.oneOf(['lg', 'sm', null]);
+var buttonType = PropTypes$1.oneOf(['button', 'submit']);
+var dropdownAlign = PropTypes$1.oneOf(['start', 'end']);
+var controlSize = PropTypes$1.oneOf(['lg', 'sm', null]);
+var formStatus = PropTypes$1.oneOf(['loading', 'success', 'error', null]);
+var fieldOption = PropTypes$1.shape({
+  value: PropTypes$1.string,
+  label: PropTypes$1.string
+});
+var fieldOptions = PropTypes$1.arrayOf(fieldOption);
+var toggle = PropTypes$1.shape({
+  key: PropTypes$1.string,
+  label: PropTypes$1.string
+});
+var toggles = PropTypes$1.arrayOf(toggle);
+var tableColumn = PropTypes$1.shape({
+  id: PropTypes$1.string,
+  component: PropTypes$1.string,
+  path: PropTypes$1.string,
+  field: PropTypes$1.string,
+  columnClassName: PropTypes$1.string
+});
+var tableColumns = PropTypes$1.arrayOf(tableColumn);
+/**
+ * Panneau Definitions
+ */
+
+var routes = PropTypes$1.shape({
+  'resources.index': PropTypes$1.string.isRequired,
+  'resources.create': PropTypes$1.string.isRequired,
+  'resources.store': PropTypes$1.string.isRequired,
+  'resources.show': PropTypes$1.string.isRequired,
+  'resources.edit': PropTypes$1.string.isRequired,
+  'resources.update': PropTypes$1.string.isRequired,
+  'resources.delete': PropTypes$1.string.isRequired,
+  'resources.destroy': PropTypes$1.string.isRequired
+});
+var intl = PropTypes$1.shape({
+  locale: PropTypes$1.string,
+  messages: PropTypes$1.objectOf(PropTypes$1.string),
+  values: PropTypes$1.objectOf(PropTypes$1.string)
+});
+var page = PropTypes$1.shape({
+  component: PropTypes$1.string.isRequired
+});
+var pages = PropTypes$1.objectOf(page);
+var field = PropTypes$1.shape({
+  name: PropTypes$1.string.isRequired,
+  type: PropTypes$1.string,
+  component: PropTypes$1.string,
+  label: PropTypes$1.node
+});
+var fields = PropTypes$1.arrayOf(field);
+var form = PropTypes$1.shape({
+  // type: PropTypes.string.isRequired,
+  title: PropTypes$1.isRequired,
+  fields: fields
+});
+var forms = PropTypes$1.arrayOf(form);
+var resource = PropTypes$1.shape({
+  id: PropTypes$1.string.isRequired,
+  name: PropTypes$1.string.isRequired,
+  intl: intl,
+  fields: fields,
+  forms: PropTypes$1.shape({}),
+  shows_in_navbar: PropTypes$1.bool
+});
+var resources = PropTypes$1.arrayOf(resource);
+var panneauDefinition = PropTypes$1.shape({
+  name: PropTypes$1.string,
+  resources: resources,
+  routes: routes,
+  pages: pages,
+  intl: intl // intl,
+
+});
+var definition = PropTypes$1.shape({
+  name: PropTypes$1.string // resources,
+  // routes,
+  // intl,
+
+});
+var item = PropTypes$1.shape({
+  id: PropTypes$1.string.isRequired
+});
+var items = PropTypes$1.arrayOf(item);
+var user = PropTypes$1.shape({
+  id: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.string])
+});
+var users = PropTypes$1.arrayOf(user);
+var selectOption = PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.shape({
+  value: PropTypes$1.any,
+  // eslint-disable-line
+  label: label
+})]);
+var selectOptions = PropTypes$1.arrayOf(selectOption);
+var feedback = PropTypes$1.oneOf(['valid', 'invalid', 'loading', null]);
+var formError = PropTypes$1.shape({
+  message: PropTypes$1.string
+});
+var formErrors = PropTypes$1.arrayOf(formError);
+var uppy = PropTypes$1.shape({
+  tus: PropTypes$1.object
+}); // eslint-disable-line
+
+var triggerUpdate = PropTypes$1.string;
+
+var PropTypes = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    message: message,
+    label: label,
+    statusCode: statusCode,
+    menuItem: menuItem,
+    menuItems: menuItems,
+    button: button,
+    buttons: buttons,
+    buttonTheme: buttonTheme,
+    buttonSize: buttonSize,
+    buttonType: buttonType,
+    dropdownAlign: dropdownAlign,
+    controlSize: controlSize,
+    formStatus: formStatus,
+    fieldOption: fieldOption,
+    fieldOptions: fieldOptions,
+    toggle: toggle,
+    toggles: toggles,
+    tableColumn: tableColumn,
+    tableColumns: tableColumns,
+    routes: routes,
+    intl: intl,
+    page: page,
+    pages: pages,
+    field: field,
+    fields: fields,
+    form: form,
+    forms: forms,
+    resource: resource,
+    resources: resources,
+    panneauDefinition: panneauDefinition,
+    definition: definition,
+    item: item,
+    items: items,
+    user: user,
+    users: users,
+    selectOption: selectOption,
+    selectOptions: selectOptions,
+    feedback: feedback,
+    formError: formError,
+    formErrors: formErrors,
+    uppy: uppy,
+    triggerUpdate: triggerUpdate
+});
+
+var flattenComponents = function flattenComponents(components) {
+  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
+  if (components === null) {
+    return null;
+  }
+
+  return Object.keys(components).reduce(function (newMap, key) {
+    return ReactIs.isValidElementType(components[key]) ? _objectSpread(_objectSpread({}, newMap), {}, _defineProperty({}, prefix !== null ? "".concat(prefix, ".").concat(key) : key, components[key])) : _objectSpread(_objectSpread({}, newMap), flattenComponents(components[key], key));
+  }, {});
+};
+
+var getComponentFromName = function getComponentFromName() {
+  var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var components = arguments.length > 1 ? arguments[1] : undefined;
+  var defaultComponent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+
+  if (components === null || name === null) {
+    return defaultComponent;
+  }
+
+  var pascalName = pascalCase(name);
+  var component = components[pascalName] || components[name] || defaultComponent;
+
+  if (!component) {
+    console.warn('Could not find component from name', name, pascalName, components);
+  }
+
+  return component;
+};
+
+var ComponentsManager = /*#__PURE__*/function (_EventEmitter) {
+  _inherits(ComponentsManager, _EventEmitter);
+
+  var _super = _createSuper(ComponentsManager);
+
+  function ComponentsManager() {
+    var _this;
+
+    var components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    _classCallCheck(this, ComponentsManager);
+
+    _this = _super.call(this);
+    _this.components = flattenComponents(components);
+    return _this;
+  }
+
+  _createClass(ComponentsManager, [{
+    key: "addComponent",
+    value: function addComponent(name, component) {
+      var namespace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      return this.addComponents(_defineProperty({}, name, component), namespace);
+    }
+  }, {
+    key: "addComponents",
+    value: function addComponents(components) {
+      var namespace = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      var newComponents = namespace !== null ? Object.keys(components).reduce(function (componentsMaps, name) {
+        return _objectSpread(_objectSpread({}, componentsMaps), {}, _defineProperty({}, "".concat(namespace, ".").concat(name), components[name]));
+      }, {}) : components;
+      this.components = _objectSpread(_objectSpread({}, this.components), newComponents);
+      this.emit('change');
+      return this;
+    }
+  }, {
+    key: "merge",
+    value: function merge(manager) {
+      var namespace = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      return this.addComponents(manager.getComponents(), namespace);
+    }
+  }, {
+    key: "addNamespace",
+    value: function addNamespace(namespace) {
+      var _this2 = this;
+
+      if (namespace === null) {
+        return this;
+      }
+
+      this.components = Object.keys(this.components).reduce(function (componentsMap, name) {
+        return _objectSpread(_objectSpread({}, componentsMap), {}, _defineProperty({}, "".concat(namespace, ".").concat(name), _this2.components[name]));
+      }, {});
+      return this;
+    }
+  }, {
+    key: "getComponent",
+    value: function getComponent(name) {
+      var namespace = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      var components = this.getComponents(namespace);
+      return getComponentFromName(name, components);
+    }
+  }, {
+    key: "getComponents",
+    value: function getComponents() {
+      var _this3 = this;
+
+      var namespace = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      return namespace !== null ? Object.keys(this.components || {}).reduce(function (componentsMap, name) {
+        var pattern = new RegExp("^".concat(namespace, "\\.(.*)$"));
+        var matches = pattern.exec(name);
+        return matches !== null ? _objectSpread(_objectSpread({}, componentsMap), {}, _defineProperty({}, matches[1], _this3.components[name])) : componentsMap;
+      }, null) : this.components;
+    }
+  }, {
+    key: "hasComponent",
+    value: function hasComponent(name) {
+      var namespace = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      return this.components !== null && typeof this.components[namespace !== null ? "".concat(namespace, ".").concat(name) : name] !== 'undefined';
+    }
+  }]);
+
+  return ComponentsManager;
+}(EventEmitter);
+
+var DefinitionsManager = /*#__PURE__*/function (_EventEmitter) {
+  _inherits(DefinitionsManager, _EventEmitter);
+
+  var _super = _createSuper(DefinitionsManager);
+
+  function DefinitionsManager() {
+    var _this;
+
+    var definitions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+
+    _classCallCheck(this, DefinitionsManager);
+
+    _this = _super.call(this);
+    _this.definitions = definitions || [];
+    return _this;
+  }
+
+  _createClass(DefinitionsManager, [{
+    key: "addDefinition",
+    value: function addDefinition(definition) {
+      this.addDefinitions(isArray(definition) ? definition : [definition]);
+      return this;
+    }
+  }, {
+    key: "addDefinitions",
+    value: function addDefinitions(definitions) {
+      this.definitions = uniqBy([].concat(_toConsumableArray(definitions), _toConsumableArray(this.definitions)), function (it) {
+        return it.id;
+      });
+      this.emit('change');
+      return this;
+    }
+  }, {
+    key: "merge",
+    value: function merge(manager) {
+      return this.addDefinitions(manager.getDefinitions());
+    }
+  }, {
+    key: "getDefinition",
+    value: function getDefinition(id) {
+      if (id === null) {
+        return null;
+      }
+
+      return this.definitions.find(function (it) {
+        return it.id === id;
+      }) || null;
+    }
+  }, {
+    key: "getDefinitions",
+    value: function getDefinitions() {
+      return this.definitions;
+    }
+  }, {
+    key: "hasDefinition",
+    value: function hasDefinition(id) {
+      return this.getDefinition(id) !== null;
+    }
+  }, {
+    key: "getComponent",
+    value: function getComponent(id) {
+      var _ref = this.getDefinition(id) || {},
+          _ref$component = _ref.component,
+          component = _ref$component === void 0 ? null : _ref$component;
+
+      return component;
+    }
+  }, {
+    key: "getComponents",
+    value: function getComponents() {
+      return this.definitions.reduce(function (allComponents, _ref2) {
+        var id = _ref2.id,
+            _ref2$component = _ref2.component,
+            component = _ref2$component === void 0 ? null : _ref2$component;
+        return component !== null ? _objectSpread(_objectSpread({}, allComponents), {}, _defineProperty({}, id, component)) : allComponents;
+      }, {});
+    }
+  }]);
+
+  return DefinitionsManager;
+}(EventEmitter);
+
+var EventsManager = /*#__PURE__*/function (_EventEmitter) {
+  _inherits(EventsManager, _EventEmitter);
+
+  var _super = _createSuper(EventsManager);
+
+  function EventsManager(element) {
+    var _this;
+
+    _classCallCheck(this, EventsManager);
+
+    _this = _super.call(this);
+    _this.element = element;
+    _this.events = {};
+    _this.listeners = {};
+    return _this;
+  }
+
+  _createClass(EventsManager, [{
+    key: "subscribe",
+    value: function subscribe(event, callback) {
+      this.on(event, callback);
+      this.events = _objectSpread(_objectSpread({}, this.events), {}, _defineProperty({}, event, [].concat(_toConsumableArray(this.events[event] || []), [callback])));
+
+      if (this.events[event].length === 1) {
+        this.addEventListener(event);
+      }
+    }
+  }, {
+    key: "unsubscribe",
+    value: function unsubscribe(event, callback) {
+      var _this2 = this;
+
+      this.off(event, callback);
+      this.events = Object.keys(this.events).reduce(function (newEvents, eventName) {
+        if (eventName !== event) {
+          return _objectSpread(_objectSpread({}, newEvents), {}, _defineProperty({}, eventName, _this2.events[eventName]));
+        }
+
+        var newListeners = _this2.events[eventName].filter(function (listener) {
+          return listener !== callback;
+        });
+
+        return newListeners.length > 0 ? _objectSpread(_objectSpread({}, newEvents), {}, _defineProperty({}, eventName, newListeners)) : newEvents;
+      }, {});
+
+      if (typeof this.events[event] === 'undefined') {
+        this.removeEventListener(event);
+      }
+    }
+  }, {
+    key: "addEventListener",
+    value: function addEventListener(event) {
+      var _this3 = this;
+
+      if (typeof this.listeners[event] === 'undefined') {
+        this.listeners[event] = function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+
+          return _this3.emit.apply(_this3, [event].concat(args));
+        };
+      }
+
+      this.element.addEventListener(event, this.listeners[event]);
+    }
+  }, {
+    key: "removeEventListener",
+    value: function removeEventListener(event) {
+      this.element.removeEventListener(event, this.listeners[event]);
+    }
+  }]);
+
+  return EventsManager;
+}(EventEmitter);
+
+var FieldsManager$1 = /*#__PURE__*/function (_DefinitionsManager) {
+  _inherits(FieldsManager, _DefinitionsManager);
+
+  var _super = _createSuper(FieldsManager);
+
+  function FieldsManager() {
+    _classCallCheck(this, FieldsManager);
+
+    return _super.apply(this, arguments);
+  }
+
+  return _createClass(FieldsManager);
+}(DefinitionsManager);
+
+var _excluded$2 = ["fonts"];
+
+var FontsParser = /*#__PURE__*/function () {
+  function FontsParser(_ref) {
+    var fieldsManager = _ref.fieldsManager,
+        screensManager = _ref.screensManager;
+
+    _classCallCheck(this, FontsParser);
+
+    this.fieldsManager = fieldsManager;
+    this.screensManager = screensManager;
+  } // Extract fonts
+
+
+  _createClass(FontsParser, [{
+    key: "parse",
+    value: function parse(story) {
+      var _this = this;
+
+      if (story === null) {
+        return story;
+      } // Extract fonts from screen
+
+
+      var _ref2 = story || {},
+          _ref2$theme = _ref2.theme,
+          theme = _ref2$theme === void 0 ? null : _ref2$theme,
+          _ref2$components = _ref2.components,
+          components = _ref2$components === void 0 ? [] : _ref2$components;
+
+      var fonts = uniq(components.reduce(function (currentFonts, screen) {
+        var type = screen.type;
+
+        var _ref3 = _this.screensManager.getDefinition(type) || {},
+            _ref3$fields = _ref3.fields,
+            fields = _ref3$fields === void 0 ? [] : _ref3$fields;
+
+        var fieldsPattern = _this.getFieldsPattern(fields);
+
+        var newFonts = FontsParser.extractFontsWithPaths(screen, fieldsPattern);
+        return newFonts.length > 0 ? [].concat(_toConsumableArray(currentFonts), _toConsumableArray(newFonts)) : currentFonts;
+      }, []), 'name'); // Extract fonts from theme
+
+      if (theme !== null) {
+        var _this$parse = this.parse(theme),
+            _this$parse$fonts = _this$parse.fonts,
+            themeFonts = _this$parse$fonts === void 0 ? [] : _this$parse$fonts,
+            newTheme = _objectWithoutProperties(_this$parse, _excluded$2);
+
+        return fonts.length > 0 || themeFonts.length > 0 ? _objectSpread(_objectSpread({}, story), {}, {
+          theme: newTheme,
+          fonts: uniq([].concat(_toConsumableArray(themeFonts), _toConsumableArray(fonts)), 'name')
+        }) : story;
+      }
+
+      return fonts.length > 0 ? _objectSpread(_objectSpread({}, story), {}, {
+        fonts: fonts
+      }) : story;
+    }
+  }, {
+    key: "getFieldsPattern",
+    value: function getFieldsPattern(fields) {
+      var _this2 = this;
+
+      var namePrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      return fields.reduce(function (patterns, field) {
+        var _field$name = field.name,
+            name = _field$name === void 0 ? null : _field$name,
+            _field$type = field.type,
+            type = _field$type === void 0 ? null : _field$type;
+        var path = [namePrefix, name].filter(function (it) {
+          return it !== null;
+        }).join('\\.');
+
+        var fieldDefinition = _objectSpread(_objectSpread({}, type !== null ? _this2.fieldsManager.getDefinition(type) : null), field); // also check settings fields
+
+
+        var _fieldDefinition$fiel = fieldDefinition.fields,
+            subFields = _fieldDefinition$fiel === void 0 ? [] : _fieldDefinition$fiel,
+            _fieldDefinition$item = fieldDefinition.itemsField,
+            itemsField = _fieldDefinition$item === void 0 ? null : _fieldDefinition$item,
+            _fieldDefinition$sett = fieldDefinition.settings,
+            settings = _fieldDefinition$sett === void 0 ? [] : _fieldDefinition$sett;
+        return [].concat(_toConsumableArray(patterns), _toConsumableArray(FontsParser.fieldIsFontFamily(fieldDefinition) ? [new RegExp("^".concat(path, "$"))] : []), _toConsumableArray(_this2.getFieldsPattern(subFields, path)), _toConsumableArray(_this2.getFieldsPattern(settings, path)), _toConsumableArray(itemsField !== null ? _this2.getFieldsPattern([itemsField], "".concat(path, "\\.[0-9]+")) : []));
+      }, []);
+    }
+  }], [{
+    key: "fieldIsFontFamily",
+    value: function fieldIsFontFamily(_ref4) {
+      var _ref4$id = _ref4.id,
+          id = _ref4$id === void 0 ? null : _ref4$id;
+      return id === 'font-family';
+    }
+  }, {
+    key: "valueIsFont",
+    value: function valueIsFont(_ref5) {
+      var _ref5$type = _ref5.type,
+          type = _ref5$type === void 0 ? null : _ref5$type;
+      return type === 'custom' || type === 'google';
+    }
+  }, {
+    key: "extractFontsWithPaths",
+    value: function extractFontsWithPaths(data, patterns) {
+      var keyPrefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      var dataIsArray = isArray(data);
+      var keys = dataIsArray ? _toConsumableArray(data.keys()) : Object.keys(data);
+      return keys.reduce(function (currentFonts, key) {
+        var path = [keyPrefix, key].filter(function (it) {
+          return it !== null;
+        }).join('.');
+        var patternMatch = patterns.reduce(function (found, pattern) {
+          return found || pattern.test(path);
+        }, false);
+        var value = data[key];
+        var font = null;
+        var subFonts = null;
+
+        if (patternMatch && isObject(value) && FontsParser.valueIsFont(value)) {
+          font = value;
+        } else if (isObject(value) || isArray(value)) {
+          subFonts = FontsParser.extractFontsWithPaths(value, patterns, path);
+        }
+
+        return subFonts !== null || font !== null ? [].concat(_toConsumableArray(currentFonts), _toConsumableArray(subFonts || []), _toConsumableArray(font !== null ? [font] : [])) : currentFonts;
+      }, []);
+    }
+  }]);
+
+  return FontsParser;
+}();
+
+var FieldsManager = /*#__PURE__*/function (_ComponentsManager) {
+  _inherits(FieldsManager, _ComponentsManager);
+
+  var _super = _createSuper(FieldsManager);
+
+  function FieldsManager() {
+    _classCallCheck(this, FieldsManager);
+
+    return _super.apply(this, arguments);
+  }
+
+  return _createClass(FieldsManager);
+}(ComponentsManager);
+
+var _excluded$1 = ["medias"];
+
+var MediasParser = /*#__PURE__*/function () {
+  function MediasParser(_ref) {
+    var fieldsManager = _ref.fieldsManager,
+        screensManager = _ref.screensManager;
+
+    _classCallCheck(this, MediasParser);
+
+    this.fieldsManager = fieldsManager;
+    this.screensManager = screensManager;
+  } // Convert medias object to path
+
+
+  _createClass(MediasParser, [{
+    key: "toPath",
+    value: function toPath(story) {
+      var _this = this;
+
+      if (story === null) {
+        return story;
+      }
+
+      var _ref2 = story || {},
+          _ref2$theme = _ref2.theme,
+          theme = _ref2$theme === void 0 ? null : _ref2$theme,
+          _ref2$components = _ref2.components,
+          components = _ref2$components === void 0 ? [] : _ref2$components;
+
+      var _components$reduce = components.reduce(function (_ref3, screen) {
+        var previousComponents = _ref3.components,
+            currentMedias = _ref3.medias;
+        var type = screen.type;
+
+        var _ref4 = _this.screensManager.getDefinition(type) || {},
+            _ref4$fields = _ref4.fields,
+            fields = _ref4$fields === void 0 ? [] : _ref4$fields;
+
+        var fieldsPattern = _this.getMediaFieldsPattern(fields);
+
+        var _MediasParser$replace = MediasParser.replaceMediasWithPaths(screen, fieldsPattern),
+            newScreen = _MediasParser$replace.data,
+            newMedias = _MediasParser$replace.medias;
+
+        return {
+          components: [].concat(_toConsumableArray(previousComponents), [newScreen]),
+          medias: _objectSpread(_objectSpread({}, currentMedias), newMedias)
+        };
+      }, {
+        components: [],
+        medias: null
+      }),
+          newComponents = _components$reduce.components,
+          medias = _components$reduce.medias;
+
+      if (theme !== null) {
+        var _this$toPath = this.toPath(theme),
+            themeMedias = _this$toPath.medias,
+            newTheme = _objectWithoutProperties(_this$toPath, _excluded$1);
+
+        return medias !== null || themeMedias !== null ? _objectSpread(_objectSpread({}, story), {}, {
+          theme: newTheme,
+          components: newComponents,
+          medias: _objectSpread(_objectSpread({}, themeMedias), medias)
+        }) : story;
+      }
+
+      return medias !== null ? _objectSpread(_objectSpread({}, story), {}, {
+        components: newComponents,
+        medias: medias
+      }) : story;
+    } // Convert path to medias object
+
+  }, {
+    key: "fromPath",
+    value: function fromPath(story) {
+      var _this2 = this;
+
+      var defaultMedias = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
+      if (story === null) {
+        return story;
+      }
+
+      var _ref5 = story || {},
+          _ref5$theme = _ref5.theme,
+          theme = _ref5$theme === void 0 ? null : _ref5$theme,
+          _ref5$components = _ref5.components,
+          components = _ref5$components === void 0 ? [] : _ref5$components,
+          _ref5$medias = _ref5.medias,
+          medias = _ref5$medias === void 0 ? defaultMedias : _ref5$medias;
+
+      if (medias === null && theme === null) {
+        return story;
+      } // Replace path with medias objects
+
+
+      var newComponents = medias !== null ? components.map(function (screen) {
+        var type = screen.type;
+
+        var _ref6 = _this2.screensManager.getDefinition(type) || {},
+            _ref6$fields = _ref6.fields,
+            fields = _ref6$fields === void 0 ? [] : _ref6$fields;
+
+        var fieldsPattern = _this2.getMediaFieldsPattern(fields);
+
+        return MediasParser.replacePathsWithMedias(screen, medias, fieldsPattern);
+      }) : components; // Replace path with medias object in theme
+
+      if (theme !== null) {
+        var newTheme = this.fromPath(theme, medias);
+        return newTheme !== theme || newComponents !== components ? _objectSpread(_objectSpread({}, story), {}, {
+          theme: newTheme,
+          components: newComponents
+        }) : story;
+      }
+
+      return newComponents !== components ? _objectSpread(_objectSpread({}, story), {}, {
+        components: newComponents
+      }) : story;
+    }
+  }, {
+    key: "getMediaFieldsPattern",
+    value: function getMediaFieldsPattern(fields) {
+      var _this3 = this;
+
+      var namePrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      return fields.reduce(function (patterns, field) {
+        var _field$name = field.name,
+            name = _field$name === void 0 ? null : _field$name,
+            _field$type = field.type,
+            type = _field$type === void 0 ? null : _field$type;
+        var path = [namePrefix, name].filter(function (it) {
+          return it !== null;
+        }).join('\\.');
+
+        var fieldDefinition = _objectSpread(_objectSpread({}, type !== null ? _this3.fieldsManager.getDefinition(type) : null), field); // also check settings fields
+
+
+        var _fieldDefinition$fiel = fieldDefinition.fields,
+            subFields = _fieldDefinition$fiel === void 0 ? [] : _fieldDefinition$fiel,
+            _fieldDefinition$item = fieldDefinition.itemsField,
+            itemsField = _fieldDefinition$item === void 0 ? null : _fieldDefinition$item,
+            _fieldDefinition$sett = fieldDefinition.settings,
+            settings = _fieldDefinition$sett === void 0 ? [] : _fieldDefinition$sett;
+        return [].concat(_toConsumableArray(patterns), _toConsumableArray(MediasParser.fieldIsMedia(fieldDefinition) ? [new RegExp("^".concat(path, "$"))] : []), _toConsumableArray(MediasParser.fieldIsFontFamily(fieldDefinition) ? [new RegExp("^".concat(path, "\\.media$"))] : []), _toConsumableArray(_this3.getMediaFieldsPattern(subFields, path)), _toConsumableArray(_this3.getMediaFieldsPattern(settings, path)), _toConsumableArray(itemsField !== null ? _this3.getMediaFieldsPattern([itemsField], "".concat(path, "\\.[0-9]+")) : []));
+      }, []);
+    }
+  }], [{
+    key: "fieldIsMedia",
+    value: function fieldIsMedia(_ref7) {
+      var _ref7$media = _ref7.media,
+          media = _ref7$media === void 0 ? false : _ref7$media;
+      return media;
+    }
+  }, {
+    key: "fieldIsFontFamily",
+    value: function fieldIsFontFamily(_ref8) {
+      var _ref8$id = _ref8.id,
+          id = _ref8$id === void 0 ? null : _ref8$id;
+      return id === 'font-family';
+    }
+  }, {
+    key: "replacePathsWithMedias",
+    value: function replacePathsWithMedias(data, medias, patterns) {
+      var keyPrefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+      var dataIsArray = isArray(data);
+      var keys = dataIsArray ? _toConsumableArray(data.keys()) : Object.keys(data);
+      return keys.reduce(function (newData, key) {
+        var path = [keyPrefix, key].filter(function (it) {
+          return it !== null;
+        }).join('.');
+        var patternMatch = patterns.reduce(function (found, pattern) {
+          return found || pattern.test(path);
+        }, false);
+        var value = data[key];
+        var newValue;
+
+        if (patternMatch) {
+          newValue = isObject(value) ? value : medias[value] || null;
+        } else {
+          newValue = isObject(value) || isArray(value) ? MediasParser.replacePathsWithMedias(value, medias, patterns, path) : value;
+        }
+
+        return dataIsArray ? [].concat(_toConsumableArray(newData), [newValue]) : _objectSpread(_objectSpread({}, newData), {}, _defineProperty({}, key, newValue));
+      }, dataIsArray ? [] : {});
+    }
+  }, {
+    key: "getMediaPath",
+    value: function getMediaPath(_ref9) {
+      var _ref9$id = _ref9.id,
+          id = _ref9$id === void 0 ? null : _ref9$id;
+      return id !== null ? "media://".concat(id) : null;
+    }
+  }, {
+    key: "replaceMediasWithPaths",
+    value: function replaceMediasWithPaths(data, patterns) {
+      var medias = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      var keyPrefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+      var dataIsArray = isArray(data);
+      var keys = dataIsArray ? _toConsumableArray(data.keys()) : Object.keys(data);
+      return keys.reduce(function (_ref10, key) {
+        var currentData = _ref10.data,
+            currentMedias = _ref10.medias;
+        var path = [keyPrefix, key].filter(function (it) {
+          return it !== null;
+        }).join('.');
+        var patternMatch = patterns.reduce(function (found, pattern) {
+          return found || pattern.test(path);
+        }, false);
+        var value = data[key];
+        var newValue;
+        var media = null;
+        var subMedias = null;
+
+        if (patternMatch && isObject(value)) {
+          var mediaPath = MediasParser.getMediaPath(value);
+          newValue = mediaPath !== null ? mediaPath : value;
+          media = mediaPath !== null ? value : null;
+        } else if (isObject(value) || isArray(value)) {
+          var subReturn = MediasParser.replaceMediasWithPaths(value, patterns, medias, path);
+          newValue = subReturn.data;
+          subMedias = subReturn.medias;
+        } else {
+          newValue = value;
+        }
+
+        return {
+          data: dataIsArray ? [].concat(_toConsumableArray(currentData || []), [newValue]) : _objectSpread(_objectSpread({}, currentData), {}, _defineProperty({}, key, newValue)),
+          medias: media !== null ? _objectSpread(_objectSpread(_objectSpread({}, currentMedias), subMedias), {}, _defineProperty({}, newValue, media)) : _objectSpread(_objectSpread({}, currentMedias), subMedias)
+        };
+      }, {
+        data: null,
+        medias: medias
+      });
+    }
+  }]);
+
+  return MediasParser;
+}();
+
+var _excluded = ["value"],
+    _excluded2 = ["value"];
+
+var Tracking = /*#__PURE__*/function (_BaseTracking) {
+  _inherits(Tracking, _BaseTracking);
+
+  var _super = _createSuper(Tracking);
+
+  function Tracking() {
+    var _this;
+
+    var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    _classCallCheck(this, Tracking);
+
+    _this = _super.call(this, opts);
+    var _this$options$variabl = _this.options.variables,
+        variables = _this$options$variabl === void 0 ? null : _this$options$variabl;
+    _this.variables = null;
+
+    if (variables !== null) {
+      _this.setVariables(variables);
+    }
+
+    return _this;
+  }
+
+  _createClass(Tracking, [{
+    key: "setVariables",
+    value: function setVariables(variables) {
+      this.variables = variables;
+
+      if (variables !== null) {
+        this.push(variables);
+      }
+    }
+  }, {
+    key: "getVariables",
+    value: function getVariables() {
+      return this.variables;
+    }
+  }, {
+    key: "trackScreenView",
+    value: function trackScreenView(screen, screenIndex) {
+      var _ref = screen || {},
+          _ref$id = _ref.id,
+          screenId = _ref$id === void 0 ? null : _ref$id,
+          _ref$type = _ref.type,
+          screenType = _ref$type === void 0 ? null : _ref$type;
+
+      var data = {
+        event: 'screenView',
+        screenId: screenId,
+        screenType: screenType,
+        screenIndex: screenIndex
+      };
+      this.push(data);
+    }
+  }, {
+    key: "trackEvent",
+    value: function trackEvent(category, action, label) {
+      var _ref2 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
+          _ref2$value = _ref2.value,
+          value = _ref2$value === void 0 ? null : _ref2$value,
+          opts = _objectWithoutProperties(_ref2, _excluded);
+
+      var data = _objectSpread(_objectSpread({}, opts), {}, {
+        event: 'eventInteraction',
+        eventCategory: category,
+        eventAction: action,
+        eventLabel: label,
+        eventValue: value
+      });
+
+      this.push(data);
+    }
+  }, {
+    key: "trackMedia",
+    value: function trackMedia(type, media, action) {
+      var _ref3 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
+          _ref3$value = _ref3.value,
+          value = _ref3$value === void 0 ? null : _ref3$value,
+          opts = _objectWithoutProperties(_ref3, _excluded2);
+
+      var _ref4 = media || {},
+          _ref4$id = _ref4.id,
+          mediaId = _ref4$id === void 0 ? null : _ref4$id,
+          _ref4$name = _ref4.name,
+          name = _ref4$name === void 0 ? null : _ref4$name,
+          _ref4$duration = _ref4.duration,
+          duration = _ref4$duration === void 0 ? null : _ref4$duration,
+          _ref4$currentTime = _ref4.currentTime,
+          currentTime = _ref4$currentTime === void 0 ? null : _ref4$currentTime;
+
+      var label = name;
+
+      var data = _objectSpread(_objectSpread({}, opts), {}, {
+        event: 'eventInteraction',
+        eventCategory: type,
+        eventAction: action,
+        eventLabel: label,
+        eventValue: value,
+        mediaId: mediaId,
+        mediaCurrentTime: currentTime !== null ? Math.round(currentTime) : null,
+        mediaProgress: currentTime !== null && duration !== null && duration > 0 ? Math.round(currentTime / duration * 100) : null
+      });
+
+      this.push(data);
+    }
+  }]);
+
+  return Tracking;
+}(Tracking$1);
+
+export { ComponentsManager, DefinitionsManager, EventsManager, FieldsManager$1 as FieldsManager, FontsParser, FieldsManager as FormsManager, MediasParser, PropTypes, Tracking };