@micromag/core 0.3.417 → 0.3.420

package/es/components.js

@@ -3827,7 +3827,7 @@ var Placeholder = /*#__PURE__*/React.memo(ScreenPlaceholder);
 
 var styles$6 = {"stack":"micromag-core-screens-preview-stack","stackScreen":"micromag-core-screens-preview-stackScreen","stackItem":"micromag-core-screens-preview-stackItem","screen":"micromag-core-screens-preview-screen"};
 
-var _excluded = ["screen", "screenState", "width", "height", "screenWidth", "screenHeight", "className", "withSize"];
+var _excluded = ["screen", "screenState", "width", "height", "screenWidth", "screenHeight", "className", "withSize", "hidden"];
 var propTypes$7 = {
   screen: PropTypes.component.isRequired,
   screenState: PropTypes$1.string,
@@ -3836,7 +3836,8 @@ var propTypes$7 = {
   screenWidth: PropTypes$1.number,
   screenHeight: PropTypes$1.number,
   className: PropTypes$1.string,
-  withSize: PropTypes$1.bool
+  withSize: PropTypes$1.bool,
+  hidden: PropTypes$1.bool
 };
 var defaultProps$7 = {
   screenState: null,
@@ -3845,7 +3846,8 @@ var defaultProps$7 = {
   screenWidth: undefined,
   screenHeight: undefined,
   className: null,
-  withSize: false
+  withSize: false,
+  hidden: false
 };
 var ScreenPreview = function ScreenPreview(_ref) {
   var screen = _ref.screen,
@@ -3856,6 +3858,7 @@ var ScreenPreview = function ScreenPreview(_ref) {
     screenHeight = _ref.screenHeight,
     className = _ref.className,
     withSize = _ref.withSize,
+    hidden = _ref.hidden,
     props = _objectWithoutProperties(_ref, _excluded);
   var screenElement = /*#__PURE__*/React.createElement(Screen$1, Object.assign({
     screen: screen,
@@ -3865,13 +3868,14 @@ var ScreenPreview = function ScreenPreview(_ref) {
     height: !withSize ? height : undefined,
     className: classNames([styles$6.screen, _defineProperty({}, className, !withSize)])
   }, props));
+  var element = !hidden ? screenElement : /*#__PURE__*/React.createElement("div", null);
   var screenWithSize = withSize ? /*#__PURE__*/React.createElement(ScreenSizer, {
     className: className,
     screenWidth: screenWidth,
     screenHeight: screenHeight,
     width: width,
     height: height
-  }, screenElement) : screenElement;
+  }, element) : element;
   return screenWithSize;
 };
 ScreenPreview.propTypes = propTypes$7;

package/es/index.js

@@ -1156,7 +1156,8 @@ var FieldsManager = /*#__PURE__*/function (_DefinitionsManager) {
   return FieldsManager;
 }(DefinitionsManager);
 
-var _excluded$4 = ["medias"];
+var _excluded$4 = ["medias"],
+  _excluded2$2 = ["medias"];
 var MediasParser = /*#__PURE__*/function () {
   function MediasParser(_ref) {
     var fieldsManager = _ref.fieldsManager,
@@ -1165,8 +1166,23 @@ var MediasParser = /*#__PURE__*/function () {
     this.fieldsManager = fieldsManager;
     this.screensManager = screensManager;
     this.fieldsPatternCache = {};
+    this.parsedThemesCache = {};
   }
   _createClass(MediasParser, [{
+    key: "getParsedStoryTheme",
+    value: function getParsedStoryTheme(storyId, theme) {
+      if (typeof this.parsedThemesCache[storyId] === 'undefined') {
+        var _this$toPath = this.toPath(theme),
+          themeMedias = _this$toPath.medias,
+          newTheme = _objectWithoutProperties(_this$toPath, _excluded$4);
+        this.parsedThemesCache[storyId] = {
+          themeMedias: themeMedias,
+          newTheme: newTheme
+        };
+      }
+      return this.parsedThemesCache[storyId];
+    }
+  }, {
     key: "getFieldsPatternByScreen",
     value: function getFieldsPatternByScreen(type) {
       if (typeof this.fieldsPatternCache[type] === 'undefined') {
@@ -1187,6 +1203,8 @@ var MediasParser = /*#__PURE__*/function () {
         return story;
       }
       var _ref3 = story || {},
+        _ref3$id = _ref3.id,
+        storyId = _ref3$id === void 0 ? null : _ref3$id,
         _ref3$theme = _ref3.theme,
         theme = _ref3$theme === void 0 ? null : _ref3$theme,
         _ref3$components = _ref3.components,
@@ -1210,9 +1228,9 @@ var MediasParser = /*#__PURE__*/function () {
         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$4);
+        var _this$getParsedStoryT = this.getParsedStoryTheme(storyId, theme),
+          themeMedias = _this$getParsedStoryT.medias,
+          newTheme = _objectWithoutProperties(_this$getParsedStoryT, _excluded2$2);
         return medias !== null || themeMedias !== null ? _objectSpread(_objectSpread({}, story), {}, {
           theme: newTheme,
           components: newComponents,
@@ -1641,6 +1659,7 @@ var ThemeParser = /*#__PURE__*/function () {
     _classCallCheck(this, ThemeParser);
     this.screensManager = screensManager;
     this.definitionCache = {};
+    this.fieldsCache = {};
   }
   _createClass(ThemeParser, [{
     key: "getDefinitionByScreen",
@@ -1657,6 +1676,54 @@ var ThemeParser = /*#__PURE__*/function () {
       }
       return this.definitionCache[type];
     }
+  }, {
+    key: "getFieldsForDefinition",
+    value: function getFieldsForDefinition(definition) {
+      var _ref2 = definition || {},
+        _ref2$id = _ref2.id,
+        definitionId = _ref2$id === void 0 ? null : _ref2$id,
+        _ref2$fields = _ref2.fields,
+        fields = _ref2$fields === void 0 ? [] : _ref2$fields,
+        _ref2$states = _ref2.states,
+        states = _ref2$states === void 0 ? [] : _ref2$states;
+      if (typeof this.fieldsCache[definitionId] === 'undefined') {
+        if (states === null || states.length === 0) {
+          this.fieldsCache[definitionId] = {
+            fields: fields
+          };
+        } else {
+          // TODO: test this
+          var finalFields = fields;
+          var repetableStates = [];
+          if (states !== null && states.length > 0) {
+            var nonRepetableStates = states.filter(function (_ref3) {
+              var _ref3$repeatable = _ref3.repeatable,
+                repeatable = _ref3$repeatable === void 0 ? false : _ref3$repeatable;
+              return repeatable === false;
+            });
+            repetableStates = states.filter(function (_ref4) {
+              var _ref4$repeatable = _ref4.repeatable,
+                repeatable = _ref4$repeatable === void 0 ? false : _ref4$repeatable;
+              return repeatable === true;
+            });
+            finalFields = nonRepetableStates.reduce(function (acc, it) {
+              var _ref5 = it || {},
+                _ref5$fields = _ref5.fields,
+                itemFields = _ref5$fields === void 0 ? [] : _ref5$fields;
+              if (itemFields !== null && itemFields.length > 0) {
+                return acc.concat(itemFields);
+              }
+              return acc;
+            }, finalFields);
+          }
+          this.fieldsCache[definitionId] = {
+            fields: finalFields,
+            repetableStates: repetableStates
+          };
+        }
+      }
+      return this.fieldsCache[definitionId];
+    }
   }, {
     key: "parse",
     value: function parse(story) {
@@ -1664,11 +1731,11 @@ var ThemeParser = /*#__PURE__*/function () {
       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 ? null : _ref2$components;
+      var _ref6 = story || {},
+        _ref6$theme = _ref6.theme,
+        theme = _ref6$theme === void 0 ? null : _ref6$theme,
+        _ref6$components = _ref6.components,
+        components = _ref6$components === void 0 ? null : _ref6$components;
       if (theme === null || components === null) {
         return story;
       }
@@ -1682,6 +1749,33 @@ var ThemeParser = /*#__PURE__*/function () {
         themeTextStyles = _theme$textStyles === void 0 ? null : _theme$textStyles,
         _theme$boxStyles = theme.boxStyles,
         themeBoxStyles = _theme$boxStyles === void 0 ? null : _theme$boxStyles;
+
+      // Speed test
+      // const newComponents = [...components];
+      // for (let index = 0; index < components.length; index += 1) {
+      //     const screen = components[index] || {};
+      //     const { type } = screen;
+      //     const { definition, themeScreen } = this.getDefinitionByScreen(type, themeComponents);
+      //     const newScreen = this.parseScreen(
+      //         definition,
+      //         screen,
+      //         themeScreen,
+      //         themeBackground,
+      //         themeColors,
+      //         themeTextStyles,
+      //         themeBoxStyles,
+      //     );
+
+      //     if (newScreen !== screen || themeScreen !== null) {
+      //         newComponents[index] = {
+      //             ...themeScreen,
+      //             ...newScreen,
+      //         };
+      //     }
+      // }
+      // story.components = newComponents;
+      // return story;
+
       var newComponents = components.reduce(function (currentComponents, screen, index) {
         var type = screen.type;
         var _this$getDefinitionBy = _this.getDefinitionByScreen(type, themeComponents),
@@ -1700,8 +1794,11 @@ var ThemeParser = /*#__PURE__*/function () {
     key: "parseScreen",
     value: function parseScreen(definition, value, themeValue, themeBackground, themeColors, themeTextStyles, themeBoxStyles) {
       var _this2 = this;
-      var _definition$fields = definition.fields,
-        fields = _definition$fields === void 0 ? [] : _definition$fields;
+      var _this$getFieldsForDef = this.getFieldsForDefinition(definition),
+        _this$getFieldsForDef2 = _this$getFieldsForDef.fields,
+        fields = _this$getFieldsForDef2 === void 0 ? null : _this$getFieldsForDef2,
+        _this$getFieldsForDef3 = _this$getFieldsForDef.repetableStates,
+        repetableStates = _this$getFieldsForDef3 === void 0 ? null : _this$getFieldsForDef3;
       var newThemeValue = themeValue === null && themeBackground !== null ? {} : themeValue;
       if (themeBackground !== null && typeof newThemeValue.background !== 'undefined') {
         newThemeValue.background = _objectSpread(_objectSpread({}, themeBackground), newThemeValue.background);
@@ -1709,12 +1806,33 @@ var ThemeParser = /*#__PURE__*/function () {
         newThemeValue.background = themeBackground;
       }
       var newScreenValue = Object.keys(value).reduce(function (currentValue, key) {
-        var fieldDefinition = fields.find(function (it) {
+        var repetableState = null;
+        if (repetableStates !== null && repetableStates.length > 0) {
+          repetableState = repetableStates.find(function (_ref7) {
+            var _ref7$id = _ref7.id,
+              stateId = _ref7$id === void 0 ? null : _ref7$id;
+            return stateId !== null && stateId === key;
+          }) || null;
+        }
+        var fieldDefinition = (fields || null).find(function (it) {
           return it.name === key;
-        }) || {};
+        }) || repetableState || {};
         var fieldValue = value[key];
         var fieldThemeValue = newThemeValue !== null ? newThemeValue[key] || null : null;
-        var newFieldValue = _this2.parseField(key, fieldDefinition, fieldValue, fieldThemeValue, themeColors, themeTextStyles, themeBoxStyles);
+
+        // Try for early return
+        var _ref8 = fieldDefinition || {},
+          _ref8$theme = _ref8.theme,
+          theme = _ref8$theme === void 0 ? null : _ref8$theme;
+        if ((theme === null || !isObject(theme)) && fields === null) {
+          return _objectSpread(_objectSpread({}, currentValue), {}, _defineProperty({}, key, fieldValue));
+        }
+
+        // console.log('start', key, fieldValue);
+        var newFieldValue = _this2.parseField(fieldValue, fieldDefinition, fieldThemeValue, themeColors, themeTextStyles, themeBoxStyles);
+        // console.log('result', newFieldValue);
+
+        // const newFieldValue = fieldValue;
 
         // Only switch field if it has changed
         return newFieldValue !== fieldValue ? _objectSpread(_objectSpread({}, currentValue), {}, _defineProperty({}, key, newFieldValue)) : currentValue;
@@ -1725,40 +1843,49 @@ var ThemeParser = /*#__PURE__*/function () {
     // eslint-disable-next-line class-methods-use-this
   }, {
     key: "parseField",
-    value: function parseField(key, definition, value, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
-      var _definition$theme = definition.theme,
-        fieldTheme = _definition$theme === void 0 ? null : _definition$theme;
-      // console.log('fieldTheme', id, fieldTheme);
+    value: function parseField(value, fieldDefinition, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
+      var _this3 = this;
+      var _fieldDefinition$them = fieldDefinition.theme,
+        fieldTheme = _fieldDefinition$them === void 0 ? null : _fieldDefinition$them,
+        _fieldDefinition$fiel = fieldDefinition.fields,
+        definitionFields = _fieldDefinition$fiel === void 0 ? null : _fieldDefinition$fiel;
+
+      // There are sub-fields in this definition
+      if (definitionFields !== null && value !== null) {
+        return isArray(value) ? value.map(function (innerFieldValue) {
+          if (innerFieldValue === null) {
+            return innerFieldValue;
+          }
+          return _this3.parseInnerFields(innerFieldValue, definitionFields, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+        }) : this.parseInnerFields(value, definitionFields, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+      }
 
       // Early return
       if (fieldTheme === null || !isObject(fieldTheme)) {
         return value;
       }
 
-      // @TODO very sloow
+      // @TODO very slooow...
       if (isArray(value)) {
         var newFieldValue = value.map(function (innerField) {
           return innerField !== null ? Object.keys(innerField).reduce(function (newInnerField, innerFieldName) {
-            // console.log('innerField', innerField);
             // Early return
             if (!isObject(innerField[innerFieldName])) {
               return newInnerField;
             }
-            var _ref3 = fieldTheme[innerFieldName] || {},
-              _ref3$textStyle = _ref3.textStyle,
-              innerFieldTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle,
-              _ref3$color = _ref3.color,
-              innerFieldColor = _ref3$color === void 0 ? null : _ref3$color,
-              _ref3$boxStyle = _ref3.boxStyle,
-              innerFieldBoxStyle = _ref3$boxStyle === void 0 ? null : _ref3$boxStyle;
+            var _ref9 = fieldTheme[innerFieldName] || {},
+              _ref9$textStyle = _ref9.textStyle,
+              innerFieldTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle,
+              _ref9$color = _ref9.color,
+              innerFieldColor = _ref9$color === void 0 ? null : _ref9$color,
+              _ref9$boxStyle = _ref9.boxStyle,
+              innerFieldBoxStyle = _ref9$boxStyle === void 0 ? null : _ref9$boxStyle;
 
             // Early return, no theme
             if (innerFieldTextStyle === null && innerFieldColor === null && innerFieldBoxStyle === null) {
               return newInnerField;
             }
 
-            // TODO: replace this with the recursive parseValue...
-
             // Color
             var colorValue = innerFieldColor !== null ? {
               color: innerFieldColor !== null && themeColors !== null ? themeColors[innerFieldColor] || null : null
@@ -1784,22 +1911,55 @@ var ThemeParser = /*#__PURE__*/function () {
       }
       return value;
     }
+  }, {
+    key: "parseInnerFields",
+    value: function parseInnerFields(value, fieldsOrDefinition, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
+      var _this4 = this;
+      var newValue = Object.keys(value).reduce(function (finalValue, innerFieldName) {
+        var innerDefinition = isArray(fieldsOrDefinition) ? fieldsOrDefinition.find(function (it) {
+          return it.name === innerFieldName;
+        }) || null : fieldsOrDefinition;
+        var _ref10 = innerDefinition || {},
+          _ref10$theme = _ref10.theme,
+          idfTheme = _ref10$theme === void 0 ? null : _ref10$theme;
+        var innerValue = value[innerFieldName];
+
+        // For items fields
+        if (innerValue !== null && innerDefinition !== null && isArray(innerValue)) {
+          // eslint-disable-next-line no-param-reassign
+          finalValue[innerFieldName] = _this4.parseField(innerValue, innerDefinition, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+          return finalValue;
+        }
+
+        // For fields with fields
+        if (innerValue !== null && idfTheme !== null && isObject(idfTheme) && isObject(innerValue)) {
+          // eslint-disable-next-line no-param-reassign
+          finalValue[innerFieldName] = _this4.parseValue(innerValue, idfTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+          return finalValue;
+        }
+
+        // eslint-disable-next-line no-param-reassign
+        finalValue[innerFieldName] = value[innerFieldName];
+        return finalValue;
+      }, {});
+      return newValue;
+    }
 
     // eslint-disable-next-line class-methods-use-this
   }, {
     key: "parseValue",
     value: function parseValue(initialValue, fieldTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
-      var _this3 = this;
+      var _this5 = this;
       if (isObject(initialValue) || isObject(fieldTheme)) {
         var value = initialValue || null;
-        var _ref4 = fieldTheme || {},
-          _ref4$textStyle = _ref4.textStyle,
-          fieldTextStyleName = _ref4$textStyle === void 0 ? null : _ref4$textStyle,
-          _ref4$color = _ref4.color,
-          fieldColorName = _ref4$color === void 0 ? null : _ref4$color,
-          _ref4$boxStyle = _ref4.boxStyle,
-          fieldBoxStyleName = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle,
-          otherProps = _objectWithoutProperties(_ref4, _excluded$1);
+        var _ref11 = fieldTheme || {},
+          _ref11$textStyle = _ref11.textStyle,
+          fieldTextStyleName = _ref11$textStyle === void 0 ? null : _ref11$textStyle,
+          _ref11$color = _ref11.color,
+          fieldColorName = _ref11$color === void 0 ? null : _ref11$color,
+          _ref11$boxStyle = _ref11.boxStyle,
+          fieldBoxStyleName = _ref11$boxStyle === void 0 ? null : _ref11$boxStyle,
+          otherProps = _objectWithoutProperties(_ref11, _excluded$1);
         if (fieldTextStyleName === null && fieldColorName === null && fieldBoxStyleName === null && isEmpty(otherProps) && !isObject(fieldTheme)) {
           return value;
         }
@@ -1807,15 +1967,15 @@ var ThemeParser = /*#__PURE__*/function () {
         if (!isEmpty(otherProps)) {
           complexValue = Object.keys(otherProps).reduce(function (newObject, key) {
             var innerValue = value !== null ? value[key] || null : null;
-            var newValue = _this3.parseValue(innerValue, otherProps[key], themeValue, themeColors, themeTextStyles, themeBoxStyles);
+            var newValue = _this5.parseValue(innerValue, otherProps[key], themeValue, themeColors, themeTextStyles, themeBoxStyles);
             return _objectSpread(_objectSpread({}, newObject), newValue !== null ? _defineProperty({}, key, newValue) : null);
           }, {});
         }
-        var _ref6 = value || {},
-          _ref6$textStyle = _ref6.textStyle,
-          valueTextStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle,
-          _ref6$boxStyle = _ref6.boxStyle,
-          valueBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle;
+        var _ref13 = value || {},
+          _ref13$textStyle = _ref13.textStyle,
+          valueTextStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle,
+          _ref13$boxStyle = _ref13.boxStyle,
+          valueBoxStyle = _ref13$boxStyle === void 0 ? null : _ref13$boxStyle;
 
         // Color
         var fieldColor = fieldColorName !== null && themeColors !== null ? themeColors[fieldColorName] || null : null;

package/lib/components.js

@@ -3868,7 +3868,7 @@ var Placeholder = /*#__PURE__*/React__default["default"].memo(ScreenPlaceholder)
 
 var styles$6 = {"stack":"micromag-core-screens-preview-stack","stackScreen":"micromag-core-screens-preview-stackScreen","stackItem":"micromag-core-screens-preview-stackItem","screen":"micromag-core-screens-preview-screen"};
 
-var _excluded = ["screen", "screenState", "width", "height", "screenWidth", "screenHeight", "className", "withSize"];
+var _excluded = ["screen", "screenState", "width", "height", "screenWidth", "screenHeight", "className", "withSize", "hidden"];
 var propTypes$7 = {
   screen: core.PropTypes.component.isRequired,
   screenState: PropTypes__default["default"].string,
@@ -3877,7 +3877,8 @@ var propTypes$7 = {
   screenWidth: PropTypes__default["default"].number,
   screenHeight: PropTypes__default["default"].number,
   className: PropTypes__default["default"].string,
-  withSize: PropTypes__default["default"].bool
+  withSize: PropTypes__default["default"].bool,
+  hidden: PropTypes__default["default"].bool
 };
 var defaultProps$7 = {
   screenState: null,
@@ -3886,7 +3887,8 @@ var defaultProps$7 = {
   screenWidth: undefined,
   screenHeight: undefined,
   className: null,
-  withSize: false
+  withSize: false,
+  hidden: false
 };
 var ScreenPreview = function ScreenPreview(_ref) {
   var screen = _ref.screen,
@@ -3897,6 +3899,7 @@ var ScreenPreview = function ScreenPreview(_ref) {
     screenHeight = _ref.screenHeight,
     className = _ref.className,
     withSize = _ref.withSize,
+    hidden = _ref.hidden,
     props = _objectWithoutProperties__default["default"](_ref, _excluded);
   var screenElement = /*#__PURE__*/React__default["default"].createElement(Screen$1, Object.assign({
     screen: screen,
@@ -3906,13 +3909,14 @@ var ScreenPreview = function ScreenPreview(_ref) {
     height: !withSize ? height : undefined,
     className: classNames__default["default"]([styles$6.screen, _defineProperty__default["default"]({}, className, !withSize)])
   }, props));
+  var element = !hidden ? screenElement : /*#__PURE__*/React__default["default"].createElement("div", null);
   var screenWithSize = withSize ? /*#__PURE__*/React__default["default"].createElement(ScreenSizer, {
     className: className,
     screenWidth: screenWidth,
     screenHeight: screenHeight,
     width: width,
     height: height
-  }, screenElement) : screenElement;
+  }, element) : element;
   return screenWithSize;
 };
 ScreenPreview.propTypes = propTypes$7;

package/lib/index.js

@@ -1183,7 +1183,8 @@ var FieldsManager = /*#__PURE__*/function (_DefinitionsManager) {
   return FieldsManager;
 }(DefinitionsManager);
 
-var _excluded$4 = ["medias"];
+var _excluded$4 = ["medias"],
+  _excluded2$2 = ["medias"];
 var MediasParser = /*#__PURE__*/function () {
   function MediasParser(_ref) {
     var fieldsManager = _ref.fieldsManager,
@@ -1192,8 +1193,23 @@ var MediasParser = /*#__PURE__*/function () {
     this.fieldsManager = fieldsManager;
     this.screensManager = screensManager;
     this.fieldsPatternCache = {};
+    this.parsedThemesCache = {};
   }
   _createClass__default["default"](MediasParser, [{
+    key: "getParsedStoryTheme",
+    value: function getParsedStoryTheme(storyId, theme) {
+      if (typeof this.parsedThemesCache[storyId] === 'undefined') {
+        var _this$toPath = this.toPath(theme),
+          themeMedias = _this$toPath.medias,
+          newTheme = _objectWithoutProperties__default["default"](_this$toPath, _excluded$4);
+        this.parsedThemesCache[storyId] = {
+          themeMedias: themeMedias,
+          newTheme: newTheme
+        };
+      }
+      return this.parsedThemesCache[storyId];
+    }
+  }, {
     key: "getFieldsPatternByScreen",
     value: function getFieldsPatternByScreen(type) {
       if (typeof this.fieldsPatternCache[type] === 'undefined') {
@@ -1214,6 +1230,8 @@ var MediasParser = /*#__PURE__*/function () {
         return story;
       }
       var _ref3 = story || {},
+        _ref3$id = _ref3.id,
+        storyId = _ref3$id === void 0 ? null : _ref3$id,
         _ref3$theme = _ref3.theme,
         theme = _ref3$theme === void 0 ? null : _ref3$theme,
         _ref3$components = _ref3.components,
@@ -1237,9 +1255,9 @@ var MediasParser = /*#__PURE__*/function () {
         newComponents = _components$reduce.components,
         medias = _components$reduce.medias;
       if (theme !== null) {
-        var _this$toPath = this.toPath(theme),
-          themeMedias = _this$toPath.medias,
-          newTheme = _objectWithoutProperties__default["default"](_this$toPath, _excluded$4);
+        var _this$getParsedStoryT = this.getParsedStoryTheme(storyId, theme),
+          themeMedias = _this$getParsedStoryT.medias,
+          newTheme = _objectWithoutProperties__default["default"](_this$getParsedStoryT, _excluded2$2);
         return medias !== null || themeMedias !== null ? _objectSpread__default["default"](_objectSpread__default["default"]({}, story), {}, {
           theme: newTheme,
           components: newComponents,
@@ -1668,6 +1686,7 @@ var ThemeParser = /*#__PURE__*/function () {
     _classCallCheck__default["default"](this, ThemeParser);
     this.screensManager = screensManager;
     this.definitionCache = {};
+    this.fieldsCache = {};
   }
   _createClass__default["default"](ThemeParser, [{
     key: "getDefinitionByScreen",
@@ -1684,6 +1703,54 @@ var ThemeParser = /*#__PURE__*/function () {
       }
       return this.definitionCache[type];
     }
+  }, {
+    key: "getFieldsForDefinition",
+    value: function getFieldsForDefinition(definition) {
+      var _ref2 = definition || {},
+        _ref2$id = _ref2.id,
+        definitionId = _ref2$id === void 0 ? null : _ref2$id,
+        _ref2$fields = _ref2.fields,
+        fields = _ref2$fields === void 0 ? [] : _ref2$fields,
+        _ref2$states = _ref2.states,
+        states = _ref2$states === void 0 ? [] : _ref2$states;
+      if (typeof this.fieldsCache[definitionId] === 'undefined') {
+        if (states === null || states.length === 0) {
+          this.fieldsCache[definitionId] = {
+            fields: fields
+          };
+        } else {
+          // TODO: test this
+          var finalFields = fields;
+          var repetableStates = [];
+          if (states !== null && states.length > 0) {
+            var nonRepetableStates = states.filter(function (_ref3) {
+              var _ref3$repeatable = _ref3.repeatable,
+                repeatable = _ref3$repeatable === void 0 ? false : _ref3$repeatable;
+              return repeatable === false;
+            });
+            repetableStates = states.filter(function (_ref4) {
+              var _ref4$repeatable = _ref4.repeatable,
+                repeatable = _ref4$repeatable === void 0 ? false : _ref4$repeatable;
+              return repeatable === true;
+            });
+            finalFields = nonRepetableStates.reduce(function (acc, it) {
+              var _ref5 = it || {},
+                _ref5$fields = _ref5.fields,
+                itemFields = _ref5$fields === void 0 ? [] : _ref5$fields;
+              if (itemFields !== null && itemFields.length > 0) {
+                return acc.concat(itemFields);
+              }
+              return acc;
+            }, finalFields);
+          }
+          this.fieldsCache[definitionId] = {
+            fields: finalFields,
+            repetableStates: repetableStates
+          };
+        }
+      }
+      return this.fieldsCache[definitionId];
+    }
   }, {
     key: "parse",
     value: function parse(story) {
@@ -1691,11 +1758,11 @@ var ThemeParser = /*#__PURE__*/function () {
       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 ? null : _ref2$components;
+      var _ref6 = story || {},
+        _ref6$theme = _ref6.theme,
+        theme = _ref6$theme === void 0 ? null : _ref6$theme,
+        _ref6$components = _ref6.components,
+        components = _ref6$components === void 0 ? null : _ref6$components;
       if (theme === null || components === null) {
         return story;
       }
@@ -1709,6 +1776,33 @@ var ThemeParser = /*#__PURE__*/function () {
         themeTextStyles = _theme$textStyles === void 0 ? null : _theme$textStyles,
         _theme$boxStyles = theme.boxStyles,
         themeBoxStyles = _theme$boxStyles === void 0 ? null : _theme$boxStyles;
+
+      // Speed test
+      // const newComponents = [...components];
+      // for (let index = 0; index < components.length; index += 1) {
+      //     const screen = components[index] || {};
+      //     const { type } = screen;
+      //     const { definition, themeScreen } = this.getDefinitionByScreen(type, themeComponents);
+      //     const newScreen = this.parseScreen(
+      //         definition,
+      //         screen,
+      //         themeScreen,
+      //         themeBackground,
+      //         themeColors,
+      //         themeTextStyles,
+      //         themeBoxStyles,
+      //     );
+
+      //     if (newScreen !== screen || themeScreen !== null) {
+      //         newComponents[index] = {
+      //             ...themeScreen,
+      //             ...newScreen,
+      //         };
+      //     }
+      // }
+      // story.components = newComponents;
+      // return story;
+
       var newComponents = components.reduce(function (currentComponents, screen, index) {
         var type = screen.type;
         var _this$getDefinitionBy = _this.getDefinitionByScreen(type, themeComponents),
@@ -1727,8 +1821,11 @@ var ThemeParser = /*#__PURE__*/function () {
     key: "parseScreen",
     value: function parseScreen(definition, value, themeValue, themeBackground, themeColors, themeTextStyles, themeBoxStyles) {
       var _this2 = this;
-      var _definition$fields = definition.fields,
-        fields = _definition$fields === void 0 ? [] : _definition$fields;
+      var _this$getFieldsForDef = this.getFieldsForDefinition(definition),
+        _this$getFieldsForDef2 = _this$getFieldsForDef.fields,
+        fields = _this$getFieldsForDef2 === void 0 ? null : _this$getFieldsForDef2,
+        _this$getFieldsForDef3 = _this$getFieldsForDef.repetableStates,
+        repetableStates = _this$getFieldsForDef3 === void 0 ? null : _this$getFieldsForDef3;
       var newThemeValue = themeValue === null && themeBackground !== null ? {} : themeValue;
       if (themeBackground !== null && typeof newThemeValue.background !== 'undefined') {
         newThemeValue.background = _objectSpread__default["default"](_objectSpread__default["default"]({}, themeBackground), newThemeValue.background);
@@ -1736,12 +1833,33 @@ var ThemeParser = /*#__PURE__*/function () {
         newThemeValue.background = themeBackground;
       }
       var newScreenValue = Object.keys(value).reduce(function (currentValue, key) {
-        var fieldDefinition = fields.find(function (it) {
+        var repetableState = null;
+        if (repetableStates !== null && repetableStates.length > 0) {
+          repetableState = repetableStates.find(function (_ref7) {
+            var _ref7$id = _ref7.id,
+              stateId = _ref7$id === void 0 ? null : _ref7$id;
+            return stateId !== null && stateId === key;
+          }) || null;
+        }
+        var fieldDefinition = (fields || null).find(function (it) {
           return it.name === key;
-        }) || {};
+        }) || repetableState || {};
         var fieldValue = value[key];
         var fieldThemeValue = newThemeValue !== null ? newThemeValue[key] || null : null;
-        var newFieldValue = _this2.parseField(key, fieldDefinition, fieldValue, fieldThemeValue, themeColors, themeTextStyles, themeBoxStyles);
+
+        // Try for early return
+        var _ref8 = fieldDefinition || {},
+          _ref8$theme = _ref8.theme,
+          theme = _ref8$theme === void 0 ? null : _ref8$theme;
+        if ((theme === null || !isObject__default["default"](theme)) && fields === null) {
+          return _objectSpread__default["default"](_objectSpread__default["default"]({}, currentValue), {}, _defineProperty__default["default"]({}, key, fieldValue));
+        }
+
+        // console.log('start', key, fieldValue);
+        var newFieldValue = _this2.parseField(fieldValue, fieldDefinition, fieldThemeValue, themeColors, themeTextStyles, themeBoxStyles);
+        // console.log('result', newFieldValue);
+
+        // const newFieldValue = fieldValue;
 
         // Only switch field if it has changed
         return newFieldValue !== fieldValue ? _objectSpread__default["default"](_objectSpread__default["default"]({}, currentValue), {}, _defineProperty__default["default"]({}, key, newFieldValue)) : currentValue;
@@ -1752,40 +1870,49 @@ var ThemeParser = /*#__PURE__*/function () {
     // eslint-disable-next-line class-methods-use-this
   }, {
     key: "parseField",
-    value: function parseField(key, definition, value, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
-      var _definition$theme = definition.theme,
-        fieldTheme = _definition$theme === void 0 ? null : _definition$theme;
-      // console.log('fieldTheme', id, fieldTheme);
+    value: function parseField(value, fieldDefinition, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
+      var _this3 = this;
+      var _fieldDefinition$them = fieldDefinition.theme,
+        fieldTheme = _fieldDefinition$them === void 0 ? null : _fieldDefinition$them,
+        _fieldDefinition$fiel = fieldDefinition.fields,
+        definitionFields = _fieldDefinition$fiel === void 0 ? null : _fieldDefinition$fiel;
+
+      // There are sub-fields in this definition
+      if (definitionFields !== null && value !== null) {
+        return isArray__default["default"](value) ? value.map(function (innerFieldValue) {
+          if (innerFieldValue === null) {
+            return innerFieldValue;
+          }
+          return _this3.parseInnerFields(innerFieldValue, definitionFields, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+        }) : this.parseInnerFields(value, definitionFields, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+      }
 
       // Early return
       if (fieldTheme === null || !isObject__default["default"](fieldTheme)) {
         return value;
       }
 
-      // @TODO very sloow
+      // @TODO very slooow...
       if (isArray__default["default"](value)) {
         var newFieldValue = value.map(function (innerField) {
           return innerField !== null ? Object.keys(innerField).reduce(function (newInnerField, innerFieldName) {
-            // console.log('innerField', innerField);
             // Early return
             if (!isObject__default["default"](innerField[innerFieldName])) {
               return newInnerField;
             }
-            var _ref3 = fieldTheme[innerFieldName] || {},
-              _ref3$textStyle = _ref3.textStyle,
-              innerFieldTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle,
-              _ref3$color = _ref3.color,
-              innerFieldColor = _ref3$color === void 0 ? null : _ref3$color,
-              _ref3$boxStyle = _ref3.boxStyle,
-              innerFieldBoxStyle = _ref3$boxStyle === void 0 ? null : _ref3$boxStyle;
+            var _ref9 = fieldTheme[innerFieldName] || {},
+              _ref9$textStyle = _ref9.textStyle,
+              innerFieldTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle,
+              _ref9$color = _ref9.color,
+              innerFieldColor = _ref9$color === void 0 ? null : _ref9$color,
+              _ref9$boxStyle = _ref9.boxStyle,
+              innerFieldBoxStyle = _ref9$boxStyle === void 0 ? null : _ref9$boxStyle;
 
             // Early return, no theme
             if (innerFieldTextStyle === null && innerFieldColor === null && innerFieldBoxStyle === null) {
               return newInnerField;
             }
 
-            // TODO: replace this with the recursive parseValue...
-
             // Color
             var colorValue = innerFieldColor !== null ? {
               color: innerFieldColor !== null && themeColors !== null ? themeColors[innerFieldColor] || null : null
@@ -1811,22 +1938,55 @@ var ThemeParser = /*#__PURE__*/function () {
       }
       return value;
     }
+  }, {
+    key: "parseInnerFields",
+    value: function parseInnerFields(value, fieldsOrDefinition, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
+      var _this4 = this;
+      var newValue = Object.keys(value).reduce(function (finalValue, innerFieldName) {
+        var innerDefinition = isArray__default["default"](fieldsOrDefinition) ? fieldsOrDefinition.find(function (it) {
+          return it.name === innerFieldName;
+        }) || null : fieldsOrDefinition;
+        var _ref10 = innerDefinition || {},
+          _ref10$theme = _ref10.theme,
+          idfTheme = _ref10$theme === void 0 ? null : _ref10$theme;
+        var innerValue = value[innerFieldName];
+
+        // For items fields
+        if (innerValue !== null && innerDefinition !== null && isArray__default["default"](innerValue)) {
+          // eslint-disable-next-line no-param-reassign
+          finalValue[innerFieldName] = _this4.parseField(innerValue, innerDefinition, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+          return finalValue;
+        }
+
+        // For fields with fields
+        if (innerValue !== null && idfTheme !== null && isObject__default["default"](idfTheme) && isObject__default["default"](innerValue)) {
+          // eslint-disable-next-line no-param-reassign
+          finalValue[innerFieldName] = _this4.parseValue(innerValue, idfTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+          return finalValue;
+        }
+
+        // eslint-disable-next-line no-param-reassign
+        finalValue[innerFieldName] = value[innerFieldName];
+        return finalValue;
+      }, {});
+      return newValue;
+    }
 
     // eslint-disable-next-line class-methods-use-this
   }, {
     key: "parseValue",
     value: function parseValue(initialValue, fieldTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
-      var _this3 = this;
+      var _this5 = this;
       if (isObject__default["default"](initialValue) || isObject__default["default"](fieldTheme)) {
         var value = initialValue || null;
-        var _ref4 = fieldTheme || {},
-          _ref4$textStyle = _ref4.textStyle,
-          fieldTextStyleName = _ref4$textStyle === void 0 ? null : _ref4$textStyle,
-          _ref4$color = _ref4.color,
-          fieldColorName = _ref4$color === void 0 ? null : _ref4$color,
-          _ref4$boxStyle = _ref4.boxStyle,
-          fieldBoxStyleName = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle,
-          otherProps = _objectWithoutProperties__default["default"](_ref4, _excluded$1);
+        var _ref11 = fieldTheme || {},
+          _ref11$textStyle = _ref11.textStyle,
+          fieldTextStyleName = _ref11$textStyle === void 0 ? null : _ref11$textStyle,
+          _ref11$color = _ref11.color,
+          fieldColorName = _ref11$color === void 0 ? null : _ref11$color,
+          _ref11$boxStyle = _ref11.boxStyle,
+          fieldBoxStyleName = _ref11$boxStyle === void 0 ? null : _ref11$boxStyle,
+          otherProps = _objectWithoutProperties__default["default"](_ref11, _excluded$1);
         if (fieldTextStyleName === null && fieldColorName === null && fieldBoxStyleName === null && isEmpty__default["default"](otherProps) && !isObject__default["default"](fieldTheme)) {
           return value;
         }
@@ -1834,15 +1994,15 @@ var ThemeParser = /*#__PURE__*/function () {
         if (!isEmpty__default["default"](otherProps)) {
           complexValue = Object.keys(otherProps).reduce(function (newObject, key) {
             var innerValue = value !== null ? value[key] || null : null;
-            var newValue = _this3.parseValue(innerValue, otherProps[key], themeValue, themeColors, themeTextStyles, themeBoxStyles);
+            var newValue = _this5.parseValue(innerValue, otherProps[key], themeValue, themeColors, themeTextStyles, themeBoxStyles);
             return _objectSpread__default["default"](_objectSpread__default["default"]({}, newObject), newValue !== null ? _defineProperty__default["default"]({}, key, newValue) : null);
           }, {});
         }
-        var _ref6 = value || {},
-          _ref6$textStyle = _ref6.textStyle,
-          valueTextStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle,
-          _ref6$boxStyle = _ref6.boxStyle,
-          valueBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle;
+        var _ref13 = value || {},
+          _ref13$textStyle = _ref13.textStyle,
+          valueTextStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle,
+          _ref13$boxStyle = _ref13.boxStyle,
+          valueBoxStyle = _ref13$boxStyle === void 0 ? null : _ref13$boxStyle;
 
         // Color
         var fieldColor = fieldColorName !== null && themeColors !== null ? themeColors[fieldColorName] || null : null;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.417",
+    "version": "0.3.420",
     "private": false,
     "description": "",
     "keywords": [
@@ -136,5 +136,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "5a0113a6eaafea5c33a6beece8ad581519f490bb"
+    "gitHead": "5b0f037a41c3bca07a5bce8f0dce205242f7ad17"
 }