@micromag/core 0.3.506 → 0.3.507

package/es/index.js

@@ -926,6 +926,52 @@ var getComponentFromName = function getComponentFromName() {
   return components[pascalName] || components[name] || defaultComponent;
 };
 
+function getScreenFieldsWithStates(definition) {
+  var _ref = definition || {},
+    _ref$fields = _ref.fields,
+    screenFields = _ref$fields === void 0 ? null : _ref$fields,
+    _ref$states = _ref.states,
+    states = _ref$states === void 0 ? null : _ref$states;
+  if (states === null) {
+    return screenFields;
+  }
+  var extraFields = states.reduce(function (statesFields, current) {
+    var _ref2 = current || {},
+      id = _ref2.id,
+      _ref2$fields = _ref2.fields,
+      fields = _ref2$fields === void 0 ? [] : _ref2$fields,
+      _ref2$repeatable = _ref2.repeatable,
+      repeatable = _ref2$repeatable === void 0 ? false : _ref2$repeatable,
+      _ref2$fieldName = _ref2.fieldName,
+      fieldName = _ref2$fieldName === void 0 ? null : _ref2$fieldName,
+      label = _ref2.label,
+      _ref2$defaultValue = _ref2.defaultValue,
+      defaultValue = _ref2$defaultValue === void 0 ? null : _ref2$defaultValue;
+    return [].concat(_toConsumableArray(statesFields), _toConsumableArray(repeatable ? [{
+      type: 'items',
+      name: fieldName || id,
+      label: label,
+      defaultValue: defaultValue,
+      stateId: id,
+      itemsField: {
+        label: label,
+        type: 'fields',
+        fields: fields
+      }
+    }] : []), _toConsumableArray(!repeatable && fieldName !== null ? [{
+      type: 'fields',
+      name: fieldName,
+      stateId: id,
+      fields: fields
+    }] : []), _toConsumableArray(!repeatable && fieldName === null ? fields.map(function (it) {
+      return _objectSpread(_objectSpread({}, it), {}, {
+        stateId: id
+      });
+    }) : []));
+  }, []);
+  return [].concat(_toConsumableArray(extraFields), _toConsumableArray(screenFields));
+}
+
 var ComponentsManager = /*#__PURE__*/function (_EventEmitter) {
   function ComponentsManager() {
     var _this;
@@ -1188,9 +1234,7 @@ var MediasParser = /*#__PURE__*/function () {
     key: "getFieldsPatternByScreen",
     value: function getFieldsPatternByScreen(type) {
       if (typeof this.fieldsPatternCache[type] === 'undefined') {
-        var _ref2 = this.screensManager.getDefinition(type) || {},
-          _ref2$fields = _ref2.fields,
-          fields = _ref2$fields === void 0 ? [] : _ref2$fields;
+        var fields = getScreenFieldsWithStates(this.screensManager.getDefinition(type) || {});
         this.fieldsPatternCache[type] = this.getFieldsPattern(fields);
       }
       return this.fieldsPatternCache[type];
@@ -1204,16 +1248,16 @@ var MediasParser = /*#__PURE__*/function () {
       if (story === null) {
         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,
-        components = _ref3$components === void 0 ? [] : _ref3$components;
-      var _components$reduce = components.reduce(function (_ref4, screen) {
-          var previousComponents = _ref4.components,
-            currentMedias = _ref4.medias;
+      var _ref2 = story || {},
+        _ref2$id = _ref2.id,
+        storyId = _ref2$id === void 0 ? null : _ref2$id,
+        _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 fieldsPattern = _this.getFieldsPatternByScreen(type);
           var _MediasParser$replace = MediasParser.replaceMediasWithPaths(screen, fieldsPattern),
@@ -1253,13 +1297,13 @@ var MediasParser = /*#__PURE__*/function () {
       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;
+      var _ref4 = story || {},
+        _ref4$theme = _ref4.theme,
+        theme = _ref4$theme === void 0 ? null : _ref4$theme,
+        _ref4$components = _ref4.components,
+        components = _ref4$components === void 0 ? [] : _ref4$components,
+        _ref4$medias = _ref4.medias,
+        medias = _ref4$medias === void 0 ? defaultMedias : _ref4$medias;
       if (medias === null && theme === null) {
         return story;
       }
@@ -1317,16 +1361,16 @@ var MediasParser = /*#__PURE__*/function () {
     }
   }], [{
     key: "fieldIsMedia",
-    value: function fieldIsMedia(_ref6) {
-      var _ref6$media = _ref6.media,
-        media = _ref6$media === void 0 ? false : _ref6$media;
+    value: function fieldIsMedia(_ref5) {
+      var _ref5$media = _ref5.media,
+        media = _ref5$media === void 0 ? false : _ref5$media;
       return media;
     }
   }, {
     key: "fieldIsFontFamily",
-    value: function fieldIsFontFamily(_ref7) {
-      var _ref7$id = _ref7.id,
-        id = _ref7$id === void 0 ? null : _ref7$id;
+    value: function fieldIsFontFamily(_ref6) {
+      var _ref6$id = _ref6.id,
+        id = _ref6$id === void 0 ? null : _ref6$id;
       return id === 'font-family';
     }
   }, {
@@ -1353,9 +1397,9 @@ var MediasParser = /*#__PURE__*/function () {
     }
   }, {
     key: "getMediaPath",
-    value: function getMediaPath(_ref8) {
-      var _ref8$id = _ref8.id,
-        id = _ref8$id === void 0 ? null : _ref8$id;
+    value: function getMediaPath(_ref7) {
+      var _ref7$id = _ref7.id,
+        id = _ref7$id === void 0 ? null : _ref7$id;
       return id !== null ? "media://".concat(id) : null;
     }
   }, {
@@ -1365,9 +1409,9 @@ var MediasParser = /*#__PURE__*/function () {
       var keyPrefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
       var dataIsArray = isArray(data);
       var dataKeys = MediasParser.keys(data);
-      return dataKeys.reduce(function (_ref9, key) {
-        var currentData = _ref9.data,
-          currentMedias = _ref9.medias;
+      return dataKeys.reduce(function (_ref8, key) {
+        var currentData = _ref8.data,
+          currentMedias = _ref8.medias;
         var path = [keyPrefix, key].filter(function (it) {
           return it !== null;
         }).join('.');
@@ -1502,9 +1546,7 @@ var FontsParser = /*#__PURE__*/function () {
     key: "getFieldsPatternByScreen",
     value: function getFieldsPatternByScreen(type) {
       if (typeof this.fieldsPatternCache[type] === 'undefined') {
-        var _ref2 = this.screensManager.getDefinition(type) || {},
-          _ref2$fields = _ref2.fields,
-          fields = _ref2$fields === void 0 ? [] : _ref2$fields;
+        var fields = getScreenFieldsWithStates(this.screensManager.getDefinition(type) || {});
         this.fieldsPatternCache[type] = this.getFieldsPattern(fields);
       }
       return this.fieldsPatternCache[type];
@@ -1520,11 +1562,11 @@ var FontsParser = /*#__PURE__*/function () {
       }
 
       // Extract fonts from screen
-      var _ref3 = story || {},
-        _ref3$theme = _ref3.theme,
-        theme = _ref3$theme === void 0 ? null : _ref3$theme,
-        _ref3$components = _ref3.components,
-        components = _ref3$components === void 0 ? [] : _ref3$components;
+      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 fieldsPattern = _this.getFieldsPatternByScreen(type);
@@ -1574,16 +1616,16 @@ var FontsParser = /*#__PURE__*/function () {
     }
   }], [{
     key: "fieldIsFontFamily",
-    value: function fieldIsFontFamily(_ref4) {
-      var _ref4$id = _ref4.id,
-        id = _ref4$id === void 0 ? null : _ref4$id;
+    value: function fieldIsFontFamily(_ref3) {
+      var _ref3$id = _ref3.id,
+        id = _ref3$id === void 0 ? null : _ref3$id;
       return id === 'font-family';
     }
   }, {
     key: "valueIsFont",
-    value: function valueIsFont(_ref5) {
-      var _ref5$type = _ref5.type,
-        type = _ref5$type === void 0 ? null : _ref5$type;
+    value: function valueIsFont(_ref4) {
+      var _ref4$type = _ref4.type,
+        type = _ref4$type === void 0 ? null : _ref4$type;
       return type === 'custom' || type === 'google';
     }
   }, {

package/es/utils.js

@@ -1,5 +1,7 @@
 import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { paramCase, pascalCase, snakeCase } from 'change-case';
 export { camelCase, pascalCase, snakeCase } from 'change-case';
 import isNumber from 'lodash/isNumber';
@@ -7,8 +9,6 @@ import isObject from 'lodash/isObject';
 import { useEffect, useMemo } from 'react';
 import isString from 'lodash/isString';
 import tinycolor from 'tinycolor2';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import isArray from 'lodash/isArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
@@ -634,6 +634,52 @@ var getScreenExtraField = function getScreenExtraField(intl) {
 };
 var getScreenExtraField$1 = getScreenExtraField;
 
+function getScreenFieldsWithStates(definition) {
+  var _ref = definition || {},
+    _ref$fields = _ref.fields,
+    screenFields = _ref$fields === void 0 ? null : _ref$fields,
+    _ref$states = _ref.states,
+    states = _ref$states === void 0 ? null : _ref$states;
+  if (states === null) {
+    return screenFields;
+  }
+  var extraFields = states.reduce(function (statesFields, current) {
+    var _ref2 = current || {},
+      id = _ref2.id,
+      _ref2$fields = _ref2.fields,
+      fields = _ref2$fields === void 0 ? [] : _ref2$fields,
+      _ref2$repeatable = _ref2.repeatable,
+      repeatable = _ref2$repeatable === void 0 ? false : _ref2$repeatable,
+      _ref2$fieldName = _ref2.fieldName,
+      fieldName = _ref2$fieldName === void 0 ? null : _ref2$fieldName,
+      label = _ref2.label,
+      _ref2$defaultValue = _ref2.defaultValue,
+      defaultValue = _ref2$defaultValue === void 0 ? null : _ref2$defaultValue;
+    return [].concat(_toConsumableArray(statesFields), _toConsumableArray(repeatable ? [{
+      type: 'items',
+      name: fieldName || id,
+      label: label,
+      defaultValue: defaultValue,
+      stateId: id,
+      itemsField: {
+        label: label,
+        type: 'fields',
+        fields: fields
+      }
+    }] : []), _toConsumableArray(!repeatable && fieldName !== null ? [{
+      type: 'fields',
+      name: fieldName,
+      stateId: id,
+      fields: fields
+    }] : []), _toConsumableArray(!repeatable && fieldName === null ? fields.map(function (it) {
+      return _objectSpread(_objectSpread({}, it), {}, {
+        stateId: id
+      });
+    }) : []));
+  }, []);
+  return [].concat(_toConsumableArray(extraFields), _toConsumableArray(screenFields));
+}
+
 function getShadowCoords(angle, distance) {
   var x = (Math.cos(angle) * distance).toFixed(3);
   var y = (Math.sin(angle) * distance).toFixed(3);
@@ -1164,4 +1210,4 @@ var getContrastingColor = function getContrastingColor(backgroundColor) {
 };
 var getContrastingColor$1 = getContrastingColor;
 
-export { convertStyleToString$1 as convertStyleToString, copyToClipboard, createNullableOnChange$1 as createNullableOnChange, createUseEvent$1 as createUseEvent, easings$1 as easings, getColorAsString$1 as getColorAsString, getComponentFromName$1 as getComponentFromName, getContrastingColor$1 as getContrastingColor, getDeviceScreens$1 as getDeviceScreens, getDisplayName$1 as getDisplayName, getFieldByName$1 as getFieldByName, getFieldFromPath$1 as getFieldFromPath, getFileName$1 as getFileName, getFontFamilyFromFont, getFooterProps$1 as getFooterProps, getGridLayoutName$1 as getGridLayoutName, largestRemainderRound$1 as getLargestRemainderRound, getLayersFromBackground$1 as getLayersFromBackground, getLayoutParts$1 as getLayoutParts, getMediaFilesAsArray$1 as getMediaFilesAsArray, getOptimalImageUrl$1 as getOptimalImageUrl, getScreenExtraField$1 as getScreenExtraField, getSecondsFromTime$1 as getSecondsFromTime, getShadowCoords, getStyleFromAlignment$1 as getStyleFromAlignment, getStyleFromBorder$1 as getStyleFromBorder, getStyleFromBox$1 as getStyleFromBox, getStyleFromColor$1 as getStyleFromColor, getStyleFromContainer$1 as getStyleFromContainer, getStyleFromHighlight$1 as getStyleFromHighlight, getStyleFromImage$1 as getStyleFromImage, getStyleFromLink$1 as getStyleFromLink, getStyleFromMargin$1 as getStyleFromMargin, getStyleFromText$1 as getStyleFromText, getVideoSupportedMimes, isFooterFilled$1 as isFooterFilled, isHeaderFilled$1 as isHeaderFilled, isImageFilled$1 as isImageFilled, isIos$1 as isIos, isTextFilled$3 as isLabelFilled, isMessage$1 as isMessage, isTextFilled$1 as isTextFilled, isValidUrl$1 as isValidUrl, schemaId$1 as schemaId, setValue$1 as setFieldValue, slug$1 as slug, unique$1 as unique, validateFields$1 as validateFields };
+export { convertStyleToString$1 as convertStyleToString, copyToClipboard, createNullableOnChange$1 as createNullableOnChange, createUseEvent$1 as createUseEvent, easings$1 as easings, getColorAsString$1 as getColorAsString, getComponentFromName$1 as getComponentFromName, getContrastingColor$1 as getContrastingColor, getDeviceScreens$1 as getDeviceScreens, getDisplayName$1 as getDisplayName, getFieldByName$1 as getFieldByName, getFieldFromPath$1 as getFieldFromPath, getFileName$1 as getFileName, getFontFamilyFromFont, getFooterProps$1 as getFooterProps, getGridLayoutName$1 as getGridLayoutName, largestRemainderRound$1 as getLargestRemainderRound, getLayersFromBackground$1 as getLayersFromBackground, getLayoutParts$1 as getLayoutParts, getMediaFilesAsArray$1 as getMediaFilesAsArray, getOptimalImageUrl$1 as getOptimalImageUrl, getScreenExtraField$1 as getScreenExtraField, getScreenFieldsWithStates, getSecondsFromTime$1 as getSecondsFromTime, getShadowCoords, getStyleFromAlignment$1 as getStyleFromAlignment, getStyleFromBorder$1 as getStyleFromBorder, getStyleFromBox$1 as getStyleFromBox, getStyleFromColor$1 as getStyleFromColor, getStyleFromContainer$1 as getStyleFromContainer, getStyleFromHighlight$1 as getStyleFromHighlight, getStyleFromImage$1 as getStyleFromImage, getStyleFromLink$1 as getStyleFromLink, getStyleFromMargin$1 as getStyleFromMargin, getStyleFromText$1 as getStyleFromText, getVideoSupportedMimes, isFooterFilled$1 as isFooterFilled, isHeaderFilled$1 as isHeaderFilled, isImageFilled$1 as isImageFilled, isIos$1 as isIos, isTextFilled$3 as isLabelFilled, isMessage$1 as isMessage, isTextFilled$1 as isTextFilled, isValidUrl$1 as isValidUrl, schemaId$1 as schemaId, setValue$1 as setFieldValue, slug$1 as slug, unique$1 as unique, validateFields$1 as validateFields };

package/lib/index.js

@@ -1012,6 +1012,52 @@ var getComponentFromName = function getComponentFromName() {
   return components[pascalName] || components[name] || defaultComponent;
 };
 
+function getScreenFieldsWithStates(definition) {
+  var _ref = definition || {},
+    _ref$fields = _ref.fields,
+    screenFields = _ref$fields === void 0 ? null : _ref$fields,
+    _ref$states = _ref.states,
+    states = _ref$states === void 0 ? null : _ref$states;
+  if (states === null) {
+    return screenFields;
+  }
+  var extraFields = states.reduce(function (statesFields, current) {
+    var _ref2 = current || {},
+      id = _ref2.id,
+      _ref2$fields = _ref2.fields,
+      fields = _ref2$fields === void 0 ? [] : _ref2$fields,
+      _ref2$repeatable = _ref2.repeatable,
+      repeatable = _ref2$repeatable === void 0 ? false : _ref2$repeatable,
+      _ref2$fieldName = _ref2.fieldName,
+      fieldName = _ref2$fieldName === void 0 ? null : _ref2$fieldName,
+      label = _ref2.label,
+      _ref2$defaultValue = _ref2.defaultValue,
+      defaultValue = _ref2$defaultValue === void 0 ? null : _ref2$defaultValue;
+    return [].concat(_toConsumableArray(statesFields), _toConsumableArray(repeatable ? [{
+      type: 'items',
+      name: fieldName || id,
+      label: label,
+      defaultValue: defaultValue,
+      stateId: id,
+      itemsField: {
+        label: label,
+        type: 'fields',
+        fields: fields
+      }
+    }] : []), _toConsumableArray(!repeatable && fieldName !== null ? [{
+      type: 'fields',
+      name: fieldName,
+      stateId: id,
+      fields: fields
+    }] : []), _toConsumableArray(!repeatable && fieldName === null ? fields.map(function (it) {
+      return _objectSpread(_objectSpread({}, it), {}, {
+        stateId: id
+      });
+    }) : []));
+  }, []);
+  return [].concat(_toConsumableArray(extraFields), _toConsumableArray(screenFields));
+}
+
 var ComponentsManager = /*#__PURE__*/function (_EventEmitter) {
   function ComponentsManager() {
     var _this;
@@ -1274,9 +1320,7 @@ var MediasParser = /*#__PURE__*/function () {
     key: "getFieldsPatternByScreen",
     value: function getFieldsPatternByScreen(type) {
       if (typeof this.fieldsPatternCache[type] === 'undefined') {
-        var _ref2 = this.screensManager.getDefinition(type) || {},
-          _ref2$fields = _ref2.fields,
-          fields = _ref2$fields === void 0 ? [] : _ref2$fields;
+        var fields = getScreenFieldsWithStates(this.screensManager.getDefinition(type) || {});
         this.fieldsPatternCache[type] = this.getFieldsPattern(fields);
       }
       return this.fieldsPatternCache[type];
@@ -1290,16 +1334,16 @@ var MediasParser = /*#__PURE__*/function () {
       if (story === null) {
         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,
-        components = _ref3$components === void 0 ? [] : _ref3$components;
-      var _components$reduce = components.reduce(function (_ref4, screen) {
-          var previousComponents = _ref4.components,
-            currentMedias = _ref4.medias;
+      var _ref2 = story || {},
+        _ref2$id = _ref2.id,
+        storyId = _ref2$id === void 0 ? null : _ref2$id,
+        _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 fieldsPattern = _this.getFieldsPatternByScreen(type);
           var _MediasParser$replace = MediasParser.replaceMediasWithPaths(screen, fieldsPattern),
@@ -1339,13 +1383,13 @@ var MediasParser = /*#__PURE__*/function () {
       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;
+      var _ref4 = story || {},
+        _ref4$theme = _ref4.theme,
+        theme = _ref4$theme === void 0 ? null : _ref4$theme,
+        _ref4$components = _ref4.components,
+        components = _ref4$components === void 0 ? [] : _ref4$components,
+        _ref4$medias = _ref4.medias,
+        medias = _ref4$medias === void 0 ? defaultMedias : _ref4$medias;
       if (medias === null && theme === null) {
         return story;
       }
@@ -1403,16 +1447,16 @@ var MediasParser = /*#__PURE__*/function () {
     }
   }], [{
     key: "fieldIsMedia",
-    value: function fieldIsMedia(_ref6) {
-      var _ref6$media = _ref6.media,
-        media = _ref6$media === void 0 ? false : _ref6$media;
+    value: function fieldIsMedia(_ref5) {
+      var _ref5$media = _ref5.media,
+        media = _ref5$media === void 0 ? false : _ref5$media;
       return media;
     }
   }, {
     key: "fieldIsFontFamily",
-    value: function fieldIsFontFamily(_ref7) {
-      var _ref7$id = _ref7.id,
-        id = _ref7$id === void 0 ? null : _ref7$id;
+    value: function fieldIsFontFamily(_ref6) {
+      var _ref6$id = _ref6.id,
+        id = _ref6$id === void 0 ? null : _ref6$id;
       return id === 'font-family';
     }
   }, {
@@ -1439,9 +1483,9 @@ var MediasParser = /*#__PURE__*/function () {
     }
   }, {
     key: "getMediaPath",
-    value: function getMediaPath(_ref8) {
-      var _ref8$id = _ref8.id,
-        id = _ref8$id === void 0 ? null : _ref8$id;
+    value: function getMediaPath(_ref7) {
+      var _ref7$id = _ref7.id,
+        id = _ref7$id === void 0 ? null : _ref7$id;
       return id !== null ? "media://".concat(id) : null;
     }
   }, {
@@ -1451,9 +1495,9 @@ var MediasParser = /*#__PURE__*/function () {
       var keyPrefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
       var dataIsArray = isArray(data);
       var dataKeys = MediasParser.keys(data);
-      return dataKeys.reduce(function (_ref9, key) {
-        var currentData = _ref9.data,
-          currentMedias = _ref9.medias;
+      return dataKeys.reduce(function (_ref8, key) {
+        var currentData = _ref8.data,
+          currentMedias = _ref8.medias;
         var path = [keyPrefix, key].filter(function (it) {
           return it !== null;
         }).join('.');
@@ -1588,9 +1632,7 @@ var FontsParser = /*#__PURE__*/function () {
     key: "getFieldsPatternByScreen",
     value: function getFieldsPatternByScreen(type) {
       if (typeof this.fieldsPatternCache[type] === 'undefined') {
-        var _ref2 = this.screensManager.getDefinition(type) || {},
-          _ref2$fields = _ref2.fields,
-          fields = _ref2$fields === void 0 ? [] : _ref2$fields;
+        var fields = getScreenFieldsWithStates(this.screensManager.getDefinition(type) || {});
         this.fieldsPatternCache[type] = this.getFieldsPattern(fields);
       }
       return this.fieldsPatternCache[type];
@@ -1606,11 +1648,11 @@ var FontsParser = /*#__PURE__*/function () {
       }
 
       // Extract fonts from screen
-      var _ref3 = story || {},
-        _ref3$theme = _ref3.theme,
-        theme = _ref3$theme === void 0 ? null : _ref3$theme,
-        _ref3$components = _ref3.components,
-        components = _ref3$components === void 0 ? [] : _ref3$components;
+      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 fieldsPattern = _this.getFieldsPatternByScreen(type);
@@ -1660,16 +1702,16 @@ var FontsParser = /*#__PURE__*/function () {
     }
   }], [{
     key: "fieldIsFontFamily",
-    value: function fieldIsFontFamily(_ref4) {
-      var _ref4$id = _ref4.id,
-        id = _ref4$id === void 0 ? null : _ref4$id;
+    value: function fieldIsFontFamily(_ref3) {
+      var _ref3$id = _ref3.id,
+        id = _ref3$id === void 0 ? null : _ref3$id;
       return id === 'font-family';
     }
   }, {
     key: "valueIsFont",
-    value: function valueIsFont(_ref5) {
-      var _ref5$type = _ref5.type,
-        type = _ref5$type === void 0 ? null : _ref5$type;
+    value: function valueIsFont(_ref4) {
+      var _ref4$type = _ref4.type,
+        type = _ref4$type === void 0 ? null : _ref4$type;
       return type === 'custom' || type === 'google';
     }
   }, {

package/lib/utils.js

@@ -2,14 +2,14 @@
 
 var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var tslib = require('tslib');
 var isNumber = require('lodash/isNumber');
 var isObject = require('lodash/isObject');
 var react = require('react');
 var isString = require('lodash/isString');
 var tinycolor = require('tinycolor2');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var isArray = require('lodash/isArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
@@ -741,6 +741,52 @@ var getScreenExtraField = function getScreenExtraField(intl) {
 };
 var getScreenExtraField$1 = getScreenExtraField;
 
+function getScreenFieldsWithStates(definition) {
+  var _ref = definition || {},
+    _ref$fields = _ref.fields,
+    screenFields = _ref$fields === void 0 ? null : _ref$fields,
+    _ref$states = _ref.states,
+    states = _ref$states === void 0 ? null : _ref$states;
+  if (states === null) {
+    return screenFields;
+  }
+  var extraFields = states.reduce(function (statesFields, current) {
+    var _ref2 = current || {},
+      id = _ref2.id,
+      _ref2$fields = _ref2.fields,
+      fields = _ref2$fields === void 0 ? [] : _ref2$fields,
+      _ref2$repeatable = _ref2.repeatable,
+      repeatable = _ref2$repeatable === void 0 ? false : _ref2$repeatable,
+      _ref2$fieldName = _ref2.fieldName,
+      fieldName = _ref2$fieldName === void 0 ? null : _ref2$fieldName,
+      label = _ref2.label,
+      _ref2$defaultValue = _ref2.defaultValue,
+      defaultValue = _ref2$defaultValue === void 0 ? null : _ref2$defaultValue;
+    return [].concat(_toConsumableArray(statesFields), _toConsumableArray(repeatable ? [{
+      type: 'items',
+      name: fieldName || id,
+      label: label,
+      defaultValue: defaultValue,
+      stateId: id,
+      itemsField: {
+        label: label,
+        type: 'fields',
+        fields: fields
+      }
+    }] : []), _toConsumableArray(!repeatable && fieldName !== null ? [{
+      type: 'fields',
+      name: fieldName,
+      stateId: id,
+      fields: fields
+    }] : []), _toConsumableArray(!repeatable && fieldName === null ? fields.map(function (it) {
+      return _objectSpread(_objectSpread({}, it), {}, {
+        stateId: id
+      });
+    }) : []));
+  }, []);
+  return [].concat(_toConsumableArray(extraFields), _toConsumableArray(screenFields));
+}
+
 function getShadowCoords(angle, distance) {
   var x = (Math.cos(angle) * distance).toFixed(3);
   var y = (Math.sin(angle) * distance).toFixed(3);
@@ -1294,6 +1340,7 @@ exports.getLayoutParts = getLayoutParts$1;
 exports.getMediaFilesAsArray = getMediaFilesAsArray$1;
 exports.getOptimalImageUrl = getOptimalImageUrl$1;
 exports.getScreenExtraField = getScreenExtraField$1;
+exports.getScreenFieldsWithStates = getScreenFieldsWithStates;
 exports.getSecondsFromTime = getSecondsFromTime$1;
 exports.getShadowCoords = getShadowCoords;
 exports.getStyleFromAlignment = getStyleFromAlignment$1;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.506",
+    "version": "0.3.507",
     "private": false,
     "description": "",
     "keywords": [
@@ -155,5 +155,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "b3bc0905b6e926384f26f5807551c772ccc55452"
+    "gitHead": "117b7fb2035672f22c544f6ad2d002ccae35f03a"
 }