@micromag/core 0.2.357 → 0.2.371

package/es/contexts.js

@@ -2,11 +2,11 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React, { useContext, useMemo, useState, useEffect, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import isString from 'lodash/isString';
-import { ComponentsManager, ScreensManager, PropTypes as PropTypes$1, FieldsManager, ColorsParser, Tracking } from '@micromag/core';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { ComponentsManager, PropTypes as PropTypes$1, FieldsManager, ScreensManager, ColorsParser, Tracking } from '@micromag/core';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import uniqBy from 'lodash/uniqBy';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import isObject from 'lodash/isObject';
 import { getJSON } from '@folklore/fetch';
 import { loadGoogleApi, loadGoogleMaps } from '@folklore/services';
@@ -161,16 +161,62 @@ var ComponentsProvider = function ComponentsProvider(_ref) {
 ComponentsProvider.propTypes = propTypes$i;
 ComponentsProvider.defaultProps = defaultProps$i;
 
+var FieldsContext = /*#__PURE__*/React.createContext(null);
+var useFieldsManager = function useFieldsManager() {
+  return useContext(FieldsContext);
+};
+var useFieldDefinition = function useFieldDefinition(id) {
+  var manager = useFieldsManager();
+  return manager.getDefinition(id);
+};
+var propTypes$h = {
+  fields: PropTypes$1.fieldDefinitions,
+  manager: PropTypes.instanceOf(FieldsManager),
+  children: PropTypes.node.isRequired
+};
+var defaultProps$h = {
+  fields: null,
+  manager: null
+};
+var FieldsProvider = function FieldsProvider(_ref) {
+  var fields = _ref.fields,
+      manager = _ref.manager,
+      children = _ref.children;
+  var previousManager = useFieldsManager() || null;
+  var finalManager = useMemo(function () {
+    var newFields = uniqBy([].concat(_toConsumableArray(fields || []), _toConsumableArray(manager !== null ? manager.getDefinitions() : []), _toConsumableArray(previousManager !== null ? previousManager.getDefinitions() : [])), function (_ref2) {
+      var id = _ref2.id;
+      return id;
+    }).reverse();
+    return new FieldsManager(newFields);
+  }, [previousManager, manager, fields]);
+  var components = useMemo(function () {
+    var newComponents = finalManager.getComponents();
+    return Object.keys(newComponents).reduce(function (map, id) {
+      var component = newComponents[id];
+      return isString(component) ? map : _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, id, component));
+    }, {});
+  }, [finalManager]);
+  return /*#__PURE__*/React.createElement(FieldsContext.Provider, {
+    value: finalManager
+  }, /*#__PURE__*/React.createElement(ComponentsProvider, {
+    namespace: FIELDS_NAMESPACE,
+    components: components
+  }, children));
+};
+FieldsProvider.propTypes = propTypes$h;
+FieldsProvider.defaultProps = defaultProps$h;
+
 var ScreensContext = /*#__PURE__*/React.createContext(new ScreensManager());
 var useScreensManager = function useScreensManager() {
   return useContext(ScreensContext);
 };
-var propTypes$h = {
+var propTypes$g = {
   screens: PropTypes$1.screenDefinitions,
   manager: PropTypes.instanceOf(ScreensManager),
   children: PropTypes.node.isRequired
 };
-var defaultProps$h = {
+var defaultProps$g = {
   screens: null,
   manager: null
 };
@@ -214,54 +260,8 @@ var ScreensProvider = function ScreensProvider(_ref) {
     components: components
   }, children));
 };
-ScreensProvider.propTypes = propTypes$h;
-ScreensProvider.defaultProps = defaultProps$h;
-
-var FieldsContext = /*#__PURE__*/React.createContext(null);
-var useFieldsManager = function useFieldsManager() {
-  return useContext(FieldsContext);
-};
-var useFieldDefinition = function useFieldDefinition(id) {
-  var manager = useFieldsManager();
-  return manager.getDefinition(id);
-};
-var propTypes$g = {
-  fields: PropTypes$1.fieldDefinitions,
-  manager: PropTypes.instanceOf(FieldsManager),
-  children: PropTypes.node.isRequired
-};
-var defaultProps$g = {
-  fields: null,
-  manager: null
-};
-var FieldsProvider = function FieldsProvider(_ref) {
-  var fields = _ref.fields,
-      manager = _ref.manager,
-      children = _ref.children;
-  var previousManager = useFieldsManager() || null;
-  var finalManager = useMemo(function () {
-    var newFields = uniqBy([].concat(_toConsumableArray(fields || []), _toConsumableArray(manager !== null ? manager.getDefinitions() : []), _toConsumableArray(previousManager !== null ? previousManager.getDefinitions() : [])), function (_ref2) {
-      var id = _ref2.id;
-      return id;
-    }).reverse();
-    return new FieldsManager(newFields);
-  }, [previousManager, manager, fields]);
-  var components = useMemo(function () {
-    var newComponents = finalManager.getComponents();
-    return Object.keys(newComponents).reduce(function (map, id) {
-      var component = newComponents[id];
-      return isString(component) ? map : _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, id, component));
-    }, {});
-  }, [finalManager]);
-  return /*#__PURE__*/React.createElement(FieldsContext.Provider, {
-    value: finalManager
-  }, /*#__PURE__*/React.createElement(ComponentsProvider, {
-    namespace: FIELDS_NAMESPACE,
-    components: components
-  }, children));
-};
-FieldsProvider.propTypes = propTypes$g;
-FieldsProvider.defaultProps = defaultProps$g;
+ScreensProvider.propTypes = propTypes$g;
+ScreensProvider.defaultProps = defaultProps$g;
 
 var StoryContext = /*#__PURE__*/React.createContext(null);
 var useStoryContext = function useStoryContext() {
@@ -293,8 +293,11 @@ var useEditor = function useEditor() {
   return useContext(EditorContext);
 };
 var useGetColors = function useGetColors() {
-  var _useEditor = useEditor(),
-      getColors = _useEditor.getColors;
+  var _ref = useEditor() || {},
+      _ref$getColors = _ref.getColors,
+      getColors = _ref$getColors === void 0 ? function () {
+    return [];
+  } : _ref$getColors;
 
   return getColors;
 };
@@ -302,8 +305,8 @@ var propTypes$e = {
   children: PropTypes.node.isRequired
 };
 var defaultProps$e = {};
-var EditorProvider = function EditorProvider(_ref) {
-  var children = _ref.children;
+var EditorProvider = function EditorProvider(_ref2) {
+  var children = _ref2.children;
   var story = useStory();
   var screensManager = useScreensManager();
   var fieldsManager = useFieldsManager();
@@ -1027,7 +1030,6 @@ var ScreenSizeProvider = function ScreenSizeProvider(_ref) {
 ScreenSizeProvider.propTypes = propTypes$4;
 ScreenSizeProvider.defaultProps = defaultProps$4;
 
-/* eslint-disable react/jsx-props-no-spreading */
 var useTracking = function useTracking() {
   return useContext(TrackingContext);
 };
@@ -1043,13 +1045,8 @@ var TrackingProvider = function TrackingProvider(_ref) {
       children = _ref.children;
   var contextTracking = useTracking() || null;
   var tracking = useMemo(function () {
-    if (contextTracking !== null) {
-      contextTracking.setVariables(variables);
-      return contextTracking;
-    }
-
     return new Tracking({
-      variables: variables
+      variables: _objectSpread(_objectSpread({}, contextTracking !== null ? contextTracking.getVariables() : null), variables)
     });
   }, [contextTracking, variables]);
   return /*#__PURE__*/React.createElement(TrackingContainer, {

package/es/index.js

@@ -1798,7 +1798,7 @@ var StoryParser = /*#__PURE__*/function () {
 }();
 
 var _excluded = ["value"],
-    _excluded2 = ["value"];
+    _excluded2 = ["value", "currentTime"];
 
 var Tracking = /*#__PURE__*/function (_BaseTracking) {
   _inherits(Tracking, _BaseTracking);
@@ -1816,6 +1816,7 @@ var Tracking = /*#__PURE__*/function (_BaseTracking) {
     var _this$options$variabl = _this.options.variables,
         variables = _this$options$variabl === void 0 ? null : _this$options$variabl;
     _this.variables = null;
+    _this.screensViewed = [];
 
     if (variables !== null) {
       _this.setVariables(variables);
@@ -1841,27 +1842,44 @@ var Tracking = /*#__PURE__*/function (_BaseTracking) {
   }, {
     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 _ref = this.variables || {},
+          _ref$screensCount = _ref.screensCount,
+          screensCount = _ref$screensCount === void 0 ? null : _ref$screensCount;
+
+      var _ref2 = screen || {},
+          _ref2$id = _ref2.id,
+          screenId = _ref2$id === void 0 ? null : _ref2$id,
+          _ref2$type = _ref2.type,
+          screenType = _ref2$type === void 0 ? null : _ref2$type,
+          _ref2$metadata = _ref2.metadata,
+          metadata = _ref2$metadata === void 0 ? {} : _ref2$metadata;
+
+      var _ref3 = metadata || {},
+          screenTitle = _ref3.title;
+
+      if (this.screensViewed.indexOf(screenId || index) !== -1) {
+        this.screensViewed = [].concat(_toConsumableArray(this.screensViewed), [screenId || index]);
+      }
 
       var data = {
         event: 'screenView',
         screenId: screenId,
         screenType: screenType,
-        screenIndex: screenIndex
+        screenIndex: screenIndex,
+        screenTitle: screenTitle,
+        screenProgress: screensCount !== null && screenIndex !== null ? (screenIndex + 1) / screensCount : null,
+        screensViewed: this.screensViewed,
+        screensViewedProgress: screensCount !== null ? this.screensViewed.length / screensCount : null
       };
       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 _ref4 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
+          _ref4$value = _ref4.value,
+          value = _ref4$value === void 0 ? null : _ref4$value,
+          opts = _objectWithoutProperties(_ref4, _excluded);
 
       var data = _objectSpread(_objectSpread({}, opts), {}, {
         event: 'eventInteraction',
@@ -1876,20 +1894,28 @@ var Tracking = /*#__PURE__*/function (_BaseTracking) {
   }, {
     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 _ref5 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
+          _ref5$value = _ref5.value,
+          value = _ref5$value === void 0 ? null : _ref5$value,
+          _ref5$currentTime = _ref5.currentTime,
+          optsCurrentTime = _ref5$currentTime === void 0 ? null : _ref5$currentTime,
+          opts = _objectWithoutProperties(_ref5, _excluded2);
+
+      var _ref6 = media || {},
+          _ref6$id = _ref6.id,
+          mediaId = _ref6$id === void 0 ? null : _ref6$id,
+          _ref6$name = _ref6.name,
+          name = _ref6$name === void 0 ? null : _ref6$name,
+          _ref6$duration = _ref6.duration,
+          rootDuration = _ref6$duration === void 0 ? null : _ref6$duration,
+          _ref6$currentTime = _ref6.currentTime,
+          currentTime = _ref6$currentTime === void 0 ? optsCurrentTime : _ref6$currentTime,
+          _ref6$metadata = _ref6.metadata,
+          metadata = _ref6$metadata === void 0 ? {} : _ref6$metadata;
+
+      var _ref7 = metadata || {},
+          _ref7$duration = _ref7.duration,
+          duration = _ref7$duration === void 0 ? rootDuration : _ref7$duration;
 
       var label = name;
 

package/es/utils.js

@@ -395,7 +395,8 @@ var getStyleFromColor = function getStyleFromColor() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var property = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'backgroundColor';
   var overideAlpha = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  return value !== null ? _defineProperty({}, property, getColorAsString(value, overideAlpha)) : null;
+  var color = getColorAsString(value, overideAlpha);
+  return color !== null ? _defineProperty({}, property, color) : null;
 };
 
 var getStyleFromBorder = function getStyleFromBorder(value) {
@@ -406,14 +407,14 @@ var getStyleFromBorder = function getStyleFromBorder(value) {
   var _value$width = value.width,
       width = _value$width === void 0 ? null : _value$width,
       _value$style = value.style,
-      style = _value$style === void 0 ? null : _value$style,
+      borderStyle = _value$style === void 0 ? null : _value$style,
       _value$color = value.color,
       color = _value$color === void 0 ? null : _value$color;
-  var colorProcessed = getStyleFromColor(color, 'color');
-  var validBorder = width !== null && style !== null && color !== null && colorProcessed;
-  return {
-    border: validBorder ? "".concat(width !== null ? "".concat(width, "px") : '', " ").concat(style !== null ? style : '', " ").concat(colorProcessed ? colorProcessed.color : '') : null
-  };
+  return _objectSpread(_objectSpread(_objectSpread({}, width !== null ? {
+    borderWidth: width
+  } : null), borderStyle !== null ? {
+    borderStyle: borderStyle
+  } : null), getStyleFromColor(color, 'borderColor'));
 };
 
 var getStyleFromButton = function getStyleFromButton(value) {
@@ -436,9 +437,9 @@ var getStyleFromButton = function getStyleFromButton(value) {
     style: borderStyle,
     color: borderColor
   };
-  return _objectSpread(_objectSpread({}, getStyleFromColor(backgroundColor, 'backgroundColor')), {}, {
-    borderRadius: borderRadius || null
-  }, getStyleFromBorder(border));
+  return _objectSpread(_objectSpread(_objectSpread({}, getStyleFromColor(backgroundColor, 'backgroundColor')), borderRadius !== null ? {
+    borderRadius: borderRadius
+  } : null), getStyleFromBorder(border));
 };
 
 var getStyleFromContainer = function getStyleFromContainer(value) {
@@ -497,10 +498,11 @@ var getStyleFromImage = function getStyleFromImage(value) {
       axisAlign = _position$axisAlign === void 0 ? null : _position$axisAlign,
       _position$crossAlign = position.crossAlign,
       crossAlign = _position$crossAlign === void 0 ? null : _position$crossAlign;
-  return _objectSpread({
-    objectFit: size,
-    objectPosition: axisAlign !== null && crossAlign !== null ? "".concat(axisAlign, " ").concat(crossAlign) : null
-  }, getStyleFromColor(backgroundColor, 'backgroundColor'));
+  return _objectSpread(_objectSpread(_objectSpread({}, size !== null ? {
+    objectFit: size
+  } : null), axisAlign !== null && crossAlign !== null ? {
+    objectPosition: "".concat(axisAlign, " ").concat(crossAlign)
+  } : null), getStyleFromColor(backgroundColor, 'backgroundColor'));
 };
 
 var getStyleFromLink = function getStyleFromLink(value) {
@@ -520,11 +522,13 @@ var getStyleFromLink = function getStyleFromLink(value) {
       _ref$underline = _ref.underline,
       underline = _ref$underline === void 0 ? false : _ref$underline;
 
-  return _objectSpread(_objectSpread({}, color !== null ? getStyleFromColor(color, 'color') : null), {}, {
-    fontStyle: italic ? 'italic' : null,
-    fontWeight: bold ? 'bold' : null,
-    textDecoration: underline ? 'underline' : null
-  });
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, color !== null ? getStyleFromColor(color, 'color') : null), italic ? {
+    fontStyle: 'italic'
+  } : null), bold ? {
+    fontWeight: 'bold'
+  } : null), underline ? {
+    textDecoration: 'underline'
+  } : null);
 };
 
 var getStyleFromText = function getStyleFromText(value) {
@@ -543,7 +547,7 @@ var getStyleFromText = function getStyleFromText(value) {
       _value$letterSpacing = value.letterSpacing,
       letterSpacing = _value$letterSpacing === void 0 ? null : _value$letterSpacing,
       _value$align = value.align,
-      align = _value$align === void 0 ? null : _value$align,
+      textAlign = _value$align === void 0 ? null : _value$align,
       _value$color = value.color,
       color = _value$color === void 0 ? null : _value$color;
 
@@ -558,20 +562,28 @@ var getStyleFromText = function getStyleFromText(value) {
       _ref$outline = _ref.outline,
       outline = _ref$outline === void 0 ? false : _ref$outline;
 
-  return _objectSpread({
-    fontFamily: getFontFamily(fontFamily),
-    fontSize: fontSize,
-    fontStyle: italic ? 'italic' : null,
-    fontWeight: bold ? 'bold' : null,
-    textDecoration: underline ? 'underline' : null,
-    textTransform: textTransform,
-    textAlign: align,
-    lineHeight: lineHeight,
-    letterSpacing: letterSpacing,
-    WebkitTextStroke: outline ? "2px ".concat(getStyleFromColor(color, 'color').color) : null
-  }, outline ? {
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    fontFamily: getFontFamily(fontFamily)
+  }, fontSize !== null ? {
+    fontSize: fontSize
+  } : null), italic ? {
+    fontStyle: 'italic'
+  } : null), bold ? {
+    fontWeight: 'bold'
+  } : null), underline ? {
+    textDecoration: 'underline'
+  } : null), textTransform !== null ? {
+    textTransform: textTransform
+  } : null), textAlign !== null ? {
+    textAlign: textAlign
+  } : null), lineHeight !== null ? {
+    lineHeight: lineHeight
+  } : null), letterSpacing !== null ? {
+    letterSpacing: letterSpacing
+  } : null), getStyleFromColor(color, 'color')), outline ? {
+    WebkitTextStroke: "2px ".concat(getColorAsString(color, 'color')),
     color: 'transparent'
-  } : getStyleFromColor(color, 'color'));
+  } : null);
 };
 
 var getStyleFromMargin = function getStyleFromMargin(value) {
@@ -583,10 +595,11 @@ var getStyleFromMargin = function getStyleFromMargin(value) {
       marginTop = _value$top === void 0 ? null : _value$top,
       _value$bottom = value.bottom,
       marginBottom = _value$bottom === void 0 ? null : _value$bottom;
-  return {
-    marginTop: marginTop,
+  return _objectSpread(_objectSpread({}, marginTop !== null ? {
+    marginTop: marginTop
+  } : null), marginBottom !== null ? {
     marginBottom: marginBottom
-  };
+  } : null);
 };
 
 var getLayoutParts = function getLayoutParts() {

package/lib/contexts.js

@@ -7,10 +7,10 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var isString = require('lodash/isString');
 var core = require('@micromag/core');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var uniqBy = require('lodash/uniqBy');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var isObject = require('lodash/isObject');
 var fetch = require('@folklore/fetch');
 var services = require('@folklore/services');
@@ -45,10 +45,10 @@ var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 
@@ -195,16 +195,62 @@ var ComponentsProvider = function ComponentsProvider(_ref) {
 ComponentsProvider.propTypes = propTypes$i;
 ComponentsProvider.defaultProps = defaultProps$i;
 
+var FieldsContext = /*#__PURE__*/React__default["default"].createContext(null);
+var useFieldsManager = function useFieldsManager() {
+  return React.useContext(FieldsContext);
+};
+var useFieldDefinition = function useFieldDefinition(id) {
+  var manager = useFieldsManager();
+  return manager.getDefinition(id);
+};
+var propTypes$h = {
+  fields: core.PropTypes.fieldDefinitions,
+  manager: PropTypes__default["default"].instanceOf(core.FieldsManager),
+  children: PropTypes__default["default"].node.isRequired
+};
+var defaultProps$h = {
+  fields: null,
+  manager: null
+};
+var FieldsProvider = function FieldsProvider(_ref) {
+  var fields = _ref.fields,
+      manager = _ref.manager,
+      children = _ref.children;
+  var previousManager = useFieldsManager() || null;
+  var finalManager = React.useMemo(function () {
+    var newFields = uniqBy__default["default"]([].concat(_toConsumableArray__default["default"](fields || []), _toConsumableArray__default["default"](manager !== null ? manager.getDefinitions() : []), _toConsumableArray__default["default"](previousManager !== null ? previousManager.getDefinitions() : [])), function (_ref2) {
+      var id = _ref2.id;
+      return id;
+    }).reverse();
+    return new core.FieldsManager(newFields);
+  }, [previousManager, manager, fields]);
+  var components = React.useMemo(function () {
+    var newComponents = finalManager.getComponents();
+    return Object.keys(newComponents).reduce(function (map, id) {
+      var component = newComponents[id];
+      return isString__default["default"](component) ? map : _objectSpread__default["default"](_objectSpread__default["default"]({}, map), {}, _defineProperty__default["default"]({}, id, component));
+    }, {});
+  }, [finalManager]);
+  return /*#__PURE__*/React__default["default"].createElement(FieldsContext.Provider, {
+    value: finalManager
+  }, /*#__PURE__*/React__default["default"].createElement(ComponentsProvider, {
+    namespace: FIELDS_NAMESPACE,
+    components: components
+  }, children));
+};
+FieldsProvider.propTypes = propTypes$h;
+FieldsProvider.defaultProps = defaultProps$h;
+
 var ScreensContext = /*#__PURE__*/React__default["default"].createContext(new core.ScreensManager());
 var useScreensManager = function useScreensManager() {
   return React.useContext(ScreensContext);
 };
-var propTypes$h = {
+var propTypes$g = {
   screens: core.PropTypes.screenDefinitions,
   manager: PropTypes__default["default"].instanceOf(core.ScreensManager),
   children: PropTypes__default["default"].node.isRequired
 };
-var defaultProps$h = {
+var defaultProps$g = {
   screens: null,
   manager: null
 };
@@ -248,54 +294,8 @@ var ScreensProvider = function ScreensProvider(_ref) {
     components: components
   }, children));
 };
-ScreensProvider.propTypes = propTypes$h;
-ScreensProvider.defaultProps = defaultProps$h;
-
-var FieldsContext = /*#__PURE__*/React__default["default"].createContext(null);
-var useFieldsManager = function useFieldsManager() {
-  return React.useContext(FieldsContext);
-};
-var useFieldDefinition = function useFieldDefinition(id) {
-  var manager = useFieldsManager();
-  return manager.getDefinition(id);
-};
-var propTypes$g = {
-  fields: core.PropTypes.fieldDefinitions,
-  manager: PropTypes__default["default"].instanceOf(core.FieldsManager),
-  children: PropTypes__default["default"].node.isRequired
-};
-var defaultProps$g = {
-  fields: null,
-  manager: null
-};
-var FieldsProvider = function FieldsProvider(_ref) {
-  var fields = _ref.fields,
-      manager = _ref.manager,
-      children = _ref.children;
-  var previousManager = useFieldsManager() || null;
-  var finalManager = React.useMemo(function () {
-    var newFields = uniqBy__default["default"]([].concat(_toConsumableArray__default["default"](fields || []), _toConsumableArray__default["default"](manager !== null ? manager.getDefinitions() : []), _toConsumableArray__default["default"](previousManager !== null ? previousManager.getDefinitions() : [])), function (_ref2) {
-      var id = _ref2.id;
-      return id;
-    }).reverse();
-    return new core.FieldsManager(newFields);
-  }, [previousManager, manager, fields]);
-  var components = React.useMemo(function () {
-    var newComponents = finalManager.getComponents();
-    return Object.keys(newComponents).reduce(function (map, id) {
-      var component = newComponents[id];
-      return isString__default["default"](component) ? map : _objectSpread__default["default"](_objectSpread__default["default"]({}, map), {}, _defineProperty__default["default"]({}, id, component));
-    }, {});
-  }, [finalManager]);
-  return /*#__PURE__*/React__default["default"].createElement(FieldsContext.Provider, {
-    value: finalManager
-  }, /*#__PURE__*/React__default["default"].createElement(ComponentsProvider, {
-    namespace: FIELDS_NAMESPACE,
-    components: components
-  }, children));
-};
-FieldsProvider.propTypes = propTypes$g;
-FieldsProvider.defaultProps = defaultProps$g;
+ScreensProvider.propTypes = propTypes$g;
+ScreensProvider.defaultProps = defaultProps$g;
 
 var StoryContext = /*#__PURE__*/React__default["default"].createContext(null);
 var useStoryContext = function useStoryContext() {
@@ -327,8 +327,11 @@ var useEditor = function useEditor() {
   return React.useContext(EditorContext);
 };
 var useGetColors = function useGetColors() {
-  var _useEditor = useEditor(),
-      getColors = _useEditor.getColors;
+  var _ref = useEditor() || {},
+      _ref$getColors = _ref.getColors,
+      getColors = _ref$getColors === void 0 ? function () {
+    return [];
+  } : _ref$getColors;
 
   return getColors;
 };
@@ -336,8 +339,8 @@ var propTypes$e = {
   children: PropTypes__default["default"].node.isRequired
 };
 var defaultProps$e = {};
-var EditorProvider = function EditorProvider(_ref) {
-  var children = _ref.children;
+var EditorProvider = function EditorProvider(_ref2) {
+  var children = _ref2.children;
   var story = useStory();
   var screensManager = useScreensManager();
   var fieldsManager = useFieldsManager();
@@ -1061,7 +1064,6 @@ var ScreenSizeProvider = function ScreenSizeProvider(_ref) {
 ScreenSizeProvider.propTypes = propTypes$4;
 ScreenSizeProvider.defaultProps = defaultProps$4;
 
-/* eslint-disable react/jsx-props-no-spreading */
 var useTracking = function useTracking() {
   return React.useContext(tracking.TrackingContext);
 };
@@ -1077,13 +1079,8 @@ var TrackingProvider = function TrackingProvider(_ref) {
       children = _ref.children;
   var contextTracking = useTracking() || null;
   var tracking$1 = React.useMemo(function () {
-    if (contextTracking !== null) {
-      contextTracking.setVariables(variables);
-      return contextTracking;
-    }
-
     return new core.Tracking({
-      variables: variables
+      variables: _objectSpread__default["default"](_objectSpread__default["default"]({}, contextTracking !== null ? contextTracking.getVariables() : null), variables)
     });
   }, [contextTracking, variables]);
   return /*#__PURE__*/React__default["default"].createElement(tracking.TrackingContainer, {

package/lib/index.js

@@ -1824,7 +1824,7 @@ var StoryParser = /*#__PURE__*/function () {
 }();
 
 var _excluded = ["value"],
-    _excluded2 = ["value"];
+    _excluded2 = ["value", "currentTime"];
 
 var Tracking = /*#__PURE__*/function (_BaseTracking) {
   _inherits__default["default"](Tracking, _BaseTracking);
@@ -1842,6 +1842,7 @@ var Tracking = /*#__PURE__*/function (_BaseTracking) {
     var _this$options$variabl = _this.options.variables,
         variables = _this$options$variabl === void 0 ? null : _this$options$variabl;
     _this.variables = null;
+    _this.screensViewed = [];
 
     if (variables !== null) {
       _this.setVariables(variables);
@@ -1867,27 +1868,44 @@ var Tracking = /*#__PURE__*/function (_BaseTracking) {
   }, {
     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 _ref = this.variables || {},
+          _ref$screensCount = _ref.screensCount,
+          screensCount = _ref$screensCount === void 0 ? null : _ref$screensCount;
+
+      var _ref2 = screen || {},
+          _ref2$id = _ref2.id,
+          screenId = _ref2$id === void 0 ? null : _ref2$id,
+          _ref2$type = _ref2.type,
+          screenType = _ref2$type === void 0 ? null : _ref2$type,
+          _ref2$metadata = _ref2.metadata,
+          metadata = _ref2$metadata === void 0 ? {} : _ref2$metadata;
+
+      var _ref3 = metadata || {},
+          screenTitle = _ref3.title;
+
+      if (this.screensViewed.indexOf(screenId || index) !== -1) {
+        this.screensViewed = [].concat(_toConsumableArray__default["default"](this.screensViewed), [screenId || index]);
+      }
 
       var data = {
         event: 'screenView',
         screenId: screenId,
         screenType: screenType,
-        screenIndex: screenIndex
+        screenIndex: screenIndex,
+        screenTitle: screenTitle,
+        screenProgress: screensCount !== null && screenIndex !== null ? (screenIndex + 1) / screensCount : null,
+        screensViewed: this.screensViewed,
+        screensViewedProgress: screensCount !== null ? this.screensViewed.length / screensCount : null
       };
       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__default["default"](_ref2, _excluded);
+      var _ref4 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
+          _ref4$value = _ref4.value,
+          value = _ref4$value === void 0 ? null : _ref4$value,
+          opts = _objectWithoutProperties__default["default"](_ref4, _excluded);
 
       var data = _objectSpread__default["default"](_objectSpread__default["default"]({}, opts), {}, {
         event: 'eventInteraction',
@@ -1902,20 +1920,28 @@ var Tracking = /*#__PURE__*/function (_BaseTracking) {
   }, {
     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__default["default"](_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 _ref5 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
+          _ref5$value = _ref5.value,
+          value = _ref5$value === void 0 ? null : _ref5$value,
+          _ref5$currentTime = _ref5.currentTime,
+          optsCurrentTime = _ref5$currentTime === void 0 ? null : _ref5$currentTime,
+          opts = _objectWithoutProperties__default["default"](_ref5, _excluded2);
+
+      var _ref6 = media || {},
+          _ref6$id = _ref6.id,
+          mediaId = _ref6$id === void 0 ? null : _ref6$id,
+          _ref6$name = _ref6.name,
+          name = _ref6$name === void 0 ? null : _ref6$name,
+          _ref6$duration = _ref6.duration,
+          rootDuration = _ref6$duration === void 0 ? null : _ref6$duration,
+          _ref6$currentTime = _ref6.currentTime,
+          currentTime = _ref6$currentTime === void 0 ? optsCurrentTime : _ref6$currentTime,
+          _ref6$metadata = _ref6.metadata,
+          metadata = _ref6$metadata === void 0 ? {} : _ref6$metadata;
+
+      var _ref7 = metadata || {},
+          _ref7$duration = _ref7.duration,
+          duration = _ref7$duration === void 0 ? rootDuration : _ref7$duration;
 
       var label = name;
 

package/lib/utils.js

@@ -412,7 +412,8 @@ var getStyleFromColor = function getStyleFromColor() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var property = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'backgroundColor';
   var overideAlpha = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  return value !== null ? _defineProperty__default["default"]({}, property, getColorAsString(value, overideAlpha)) : null;
+  var color = getColorAsString(value, overideAlpha);
+  return color !== null ? _defineProperty__default["default"]({}, property, color) : null;
 };
 
 var getStyleFromBorder = function getStyleFromBorder(value) {
@@ -423,14 +424,14 @@ var getStyleFromBorder = function getStyleFromBorder(value) {
   var _value$width = value.width,
       width = _value$width === void 0 ? null : _value$width,
       _value$style = value.style,
-      style = _value$style === void 0 ? null : _value$style,
+      borderStyle = _value$style === void 0 ? null : _value$style,
       _value$color = value.color,
       color = _value$color === void 0 ? null : _value$color;
-  var colorProcessed = getStyleFromColor(color, 'color');
-  var validBorder = width !== null && style !== null && color !== null && colorProcessed;
-  return {
-    border: validBorder ? "".concat(width !== null ? "".concat(width, "px") : '', " ").concat(style !== null ? style : '', " ").concat(colorProcessed ? colorProcessed.color : '') : null
-  };
+  return _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, width !== null ? {
+    borderWidth: width
+  } : null), borderStyle !== null ? {
+    borderStyle: borderStyle
+  } : null), getStyleFromColor(color, 'borderColor'));
 };
 
 var getStyleFromButton = function getStyleFromButton(value) {
@@ -453,9 +454,9 @@ var getStyleFromButton = function getStyleFromButton(value) {
     style: borderStyle,
     color: borderColor
   };
-  return _objectSpread__default["default"](_objectSpread__default["default"]({}, getStyleFromColor(backgroundColor, 'backgroundColor')), {}, {
-    borderRadius: borderRadius || null
-  }, getStyleFromBorder(border));
+  return _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, getStyleFromColor(backgroundColor, 'backgroundColor')), borderRadius !== null ? {
+    borderRadius: borderRadius
+  } : null), getStyleFromBorder(border));
 };
 
 var getStyleFromContainer = function getStyleFromContainer(value) {
@@ -514,10 +515,11 @@ var getStyleFromImage = function getStyleFromImage(value) {
       axisAlign = _position$axisAlign === void 0 ? null : _position$axisAlign,
       _position$crossAlign = position.crossAlign,
       crossAlign = _position$crossAlign === void 0 ? null : _position$crossAlign;
-  return _objectSpread__default["default"]({
-    objectFit: size,
-    objectPosition: axisAlign !== null && crossAlign !== null ? "".concat(axisAlign, " ").concat(crossAlign) : null
-  }, getStyleFromColor(backgroundColor, 'backgroundColor'));
+  return _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, size !== null ? {
+    objectFit: size
+  } : null), axisAlign !== null && crossAlign !== null ? {
+    objectPosition: "".concat(axisAlign, " ").concat(crossAlign)
+  } : null), getStyleFromColor(backgroundColor, 'backgroundColor'));
 };
 
 var getStyleFromLink = function getStyleFromLink(value) {
@@ -537,11 +539,13 @@ var getStyleFromLink = function getStyleFromLink(value) {
       _ref$underline = _ref.underline,
       underline = _ref$underline === void 0 ? false : _ref$underline;
 
-  return _objectSpread__default["default"](_objectSpread__default["default"]({}, color !== null ? getStyleFromColor(color, 'color') : null), {}, {
-    fontStyle: italic ? 'italic' : null,
-    fontWeight: bold ? 'bold' : null,
-    textDecoration: underline ? 'underline' : null
-  });
+  return _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, color !== null ? getStyleFromColor(color, 'color') : null), italic ? {
+    fontStyle: 'italic'
+  } : null), bold ? {
+    fontWeight: 'bold'
+  } : null), underline ? {
+    textDecoration: 'underline'
+  } : null);
 };
 
 var getStyleFromText = function getStyleFromText(value) {
@@ -560,7 +564,7 @@ var getStyleFromText = function getStyleFromText(value) {
       _value$letterSpacing = value.letterSpacing,
       letterSpacing = _value$letterSpacing === void 0 ? null : _value$letterSpacing,
       _value$align = value.align,
-      align = _value$align === void 0 ? null : _value$align,
+      textAlign = _value$align === void 0 ? null : _value$align,
       _value$color = value.color,
       color = _value$color === void 0 ? null : _value$color;
 
@@ -575,20 +579,28 @@ var getStyleFromText = function getStyleFromText(value) {
       _ref$outline = _ref.outline,
       outline = _ref$outline === void 0 ? false : _ref$outline;
 
-  return _objectSpread__default["default"]({
-    fontFamily: getFontFamily(fontFamily),
-    fontSize: fontSize,
-    fontStyle: italic ? 'italic' : null,
-    fontWeight: bold ? 'bold' : null,
-    textDecoration: underline ? 'underline' : null,
-    textTransform: textTransform,
-    textAlign: align,
-    lineHeight: lineHeight,
-    letterSpacing: letterSpacing,
-    WebkitTextStroke: outline ? "2px ".concat(getStyleFromColor(color, 'color').color) : null
-  }, outline ? {
+  return _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({
+    fontFamily: getFontFamily(fontFamily)
+  }, fontSize !== null ? {
+    fontSize: fontSize
+  } : null), italic ? {
+    fontStyle: 'italic'
+  } : null), bold ? {
+    fontWeight: 'bold'
+  } : null), underline ? {
+    textDecoration: 'underline'
+  } : null), textTransform !== null ? {
+    textTransform: textTransform
+  } : null), textAlign !== null ? {
+    textAlign: textAlign
+  } : null), lineHeight !== null ? {
+    lineHeight: lineHeight
+  } : null), letterSpacing !== null ? {
+    letterSpacing: letterSpacing
+  } : null), getStyleFromColor(color, 'color')), outline ? {
+    WebkitTextStroke: "2px ".concat(getColorAsString(color, 'color')),
     color: 'transparent'
-  } : getStyleFromColor(color, 'color'));
+  } : null);
 };
 
 var getStyleFromMargin = function getStyleFromMargin(value) {
@@ -600,10 +612,11 @@ var getStyleFromMargin = function getStyleFromMargin(value) {
       marginTop = _value$top === void 0 ? null : _value$top,
       _value$bottom = value.bottom,
       marginBottom = _value$bottom === void 0 ? null : _value$bottom;
-  return {
-    marginTop: marginTop,
+  return _objectSpread__default["default"](_objectSpread__default["default"]({}, marginTop !== null ? {
+    marginTop: marginTop
+  } : null), marginBottom !== null ? {
     marginBottom: marginBottom
-  };
+  } : null);
 };
 
 var getLayoutParts = function getLayoutParts() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.2.357",
+    "version": "0.2.371",
     "description": "",
     "keywords": [
         "javascript"
@@ -98,7 +98,7 @@
         "debug": "^4.3.1",
         "flat": "^5.0.2",
         "hoist-non-react-statics": "^3.3.2",
-        "lodash": "^4.17.20",
+        "lodash": "^4.17.21",
         "param-case": "^3.0.4",
         "prop-types": "^15.7.2",
         "react-helmet": "^6.1.0",
@@ -117,5 +117,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "978cc1f0c491a8e164ee4c6b8f6433f8fb5972ab"
+    "gitHead": "c0b4ada82950489dde098c81af7eb04cce86b56d"
 }