@panneau/core 1.0.0-alpha.97 → 1.0.3-alpha.0

package/es/contexts.js

@@ -13,7 +13,7 @@ import { loadGoogleApi, loadGoogleMaps } from '@folklore/services';
 import { useIntl } from 'react-intl';
 import { getDisplayName } from '@panneau/core/utils';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { generatePath, useHistory } from 'react-router';
+import { generatePath, useNavigate } from 'react-router';
 import { TrackingContext, TrackingContainer } from '@folklore/tracking';
 export { TrackingContext } from '@folklore/tracking';
 import { v1 } from 'uuid';
@@ -233,6 +233,14 @@ var toggle = PropTypes.shape({
   label: PropTypes.string
 });
 PropTypes.arrayOf(toggle);
+var tableColumn = PropTypes.shape({
+  id: PropTypes.string,
+  component: PropTypes.string,
+  path: PropTypes.string,
+  field: PropTypes.string,
+  columnClassName: PropTypes.string
+});
+PropTypes.arrayOf(tableColumn);
 /**
  * Panneau Definitions
  */
@@ -257,8 +265,7 @@ var page = PropTypes.shape({
 });
 var pages = PropTypes.objectOf(page);
 var field = PropTypes.shape({
-  // type: PropTypes.string.isRequired,
-  name: PropTypes.isRequired,
+  name: PropTypes.string.isRequired,
   type: PropTypes.string,
   component: PropTypes.string,
   label: PropTypes.node
@@ -316,6 +323,8 @@ PropTypes.shape({
   tus: PropTypes.object
 }); // eslint-disable-line
 
+PropTypes.string;
+
 /* eslint-disable react/jsx-props-no-spreading */
 var DefinitionContext = /*#__PURE__*/React.createContext(null);
 var useDefinitionContext = function useDefinitionContext() {
@@ -932,6 +941,7 @@ var PanelsProvider = function PanelsProvider(_ref2) {
 PanelsProvider.propTypes = propTypes$5;
 PanelsProvider.defaultProps = defaultProps$5;
 
+var _excluded$3 = ["component"];
 var PanneauContext = /*#__PURE__*/React.createContext(null);
 var usePanneau = function usePanneau() {
   return useContext(PanneauContext);
@@ -988,7 +998,7 @@ var usePanneauComponent = function usePanneauComponent(namespace, name) {
   if (isObject(component) && isString(component === null || component === void 0 ? void 0 : component.componnent)) {
     // eslint-disable-next-line no-unused-vars
     component.component;
-        _objectWithoutProperties(component, ["component"]);
+        _objectWithoutProperties(component, _excluded$3);
 
     return component.component;
   }
@@ -1066,14 +1076,16 @@ var useUrlGenerator = function useUrlGenerator() {
 };
 var useRoutePush = function useRoutePush() {
   var url = useUrlGenerator();
-  var history = useHistory();
+  var navigate = useNavigate();
   var push = useCallback(function (route, data) {
     for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
       args[_key - 2] = arguments[_key];
     }
 
     if (isString(route)) {
-      history.push.apply(history, [url(route, data)].concat(args));
+      var _history;
+
+      (_history = history).push.apply(_history, [url(route, data)].concat(args));
     } else {
       var _ref = route || {},
           _ref$pathname = _ref.pathname,
@@ -1081,20 +1093,20 @@ var useRoutePush = function useRoutePush() {
           _ref$search = _ref.search,
           search = _ref$search === void 0 ? null : _ref$search;
 
-      history.push.apply(history, [{
+      navigate.apply(void 0, [{
         pathname: url(pathname, data),
         search: search
       }].concat(args));
     }
-  }, [history, url]);
+  }, [navigate, url]);
   return push;
 };
 var useRouteBack = function useRouteBack() {
   var url = useUrlGenerator();
-  var history = useHistory();
+  var navigate = useNavigate();
   var back = useCallback(function () {
-    return history.goBack();
-  }, [history, url]);
+    return navigate(-1);
+  }, [navigate, url]);
   return back;
 };
 var propTypes$2 = {
@@ -1178,7 +1190,7 @@ var useUppyCore = function useUppyCore() {
     }
 
     import('@uppy/core').then(function (_ref) {
-      var Uppy = _ref.Uppy;
+      var Uppy = _ref["default"];
       packageCache = Uppy;
 
       if (!canceled) {
@@ -1247,6 +1259,7 @@ var useUppyLocale = function useUppyLocale(locale) {
   return loadedPackage;
 };
 
+var _excluded$2 = ["default"];
 /**
  * Locale loader
  */
@@ -1320,7 +1333,7 @@ var useUppySources = function useUppySources(sources) {
       var newLoadedPackages = sourcesToLoad.reduce(function (map, source, index) {
         var _packagesLoaded$index = packagesLoaded[index],
             pack = _packagesLoaded$index["default"],
-            others = _objectWithoutProperties(_packagesLoaded$index, ["default"]);
+            others = _objectWithoutProperties(_packagesLoaded$index, _excluded$2);
 
         return _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, source, Object.keys(others).reduce(function (otherMap, key) {
           otherMap[key] = others[key]; // eslint-disable-line no-param-reassign
@@ -1343,6 +1356,7 @@ var useUppySources = function useUppySources(sources) {
   return sourcesToLoad.length === 0 ? loadedPackages : null;
 };
 
+var _excluded$1 = ["default"];
 /**
  * Locale loader
  */
@@ -1385,7 +1399,7 @@ var useUppyTransport = function useUppyTransport(transport) {
 
     packageLoader().then(function (_ref2) {
       var pack = _ref2["default"],
-          others = _objectWithoutProperties(_ref2, ["default"]);
+          others = _objectWithoutProperties(_ref2, _excluded$1);
 
       var dep = Object.keys(others).reduce(function (map, key) {
         map[key] = others[key]; // eslint-disable-line no-param-reassign
@@ -1450,6 +1464,8 @@ var getTransloaditMediasFromResponse = function getTransloaditMediasFromResponse
   });
 };
 
+var _excluded = ["sources"],
+    _excluded2 = ["key", "templateId", "waitForEncoding"];
 var UppyContext = /*#__PURE__*/React.createContext(null);
 var useUppy = function useUppy() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
@@ -1553,6 +1569,7 @@ var useUppy = function useUppy() {
   return uppy;
 };
 var propTypes = {
+  id: PropTypes.string,
   children: PropTypes.node.isRequired,
   transport: PropTypes.oneOf(['xhr', 'transloadit', 'tus']),
   locale: PropTypes.string,
@@ -1574,6 +1591,7 @@ var propTypes = {
   })])
 };
 var defaultProps = {
+  id: 'uppy',
   transport: null,
   locale: null,
   sources: null,
@@ -1583,7 +1601,8 @@ var defaultProps = {
   xhr: null
 };
 var UppyProvider = function UppyProvider(_ref5) {
-  var children = _ref5.children,
+  var id = _ref5.id,
+      children = _ref5.children,
       providedTransport = _ref5.transport,
       providedLocale = _ref5.locale,
       providedSources = _ref5.sources,
@@ -1633,9 +1652,10 @@ var UppyProvider = function UppyProvider(_ref5) {
       var _ref7 = opts || {},
           _ref7$sources = _ref7.sources,
           customSources = _ref7$sources === void 0 ? sources : _ref7$sources,
-          uppyOpts = _objectWithoutProperties(_ref7, ["sources"]);
+          uppyOpts = _objectWithoutProperties(_ref7, _excluded);
 
       var newUppy = new Uppy(_objectSpread({
+        id: id,
         locale: uppyLocale
       }, uppyOpts));
 
@@ -1644,7 +1664,7 @@ var UppyProvider = function UppyProvider(_ref5) {
             templateId = transloadit.templateId,
             _transloadit$waitForE = transloadit.waitForEncoding,
             waitForEncoding = _transloadit$waitForE === void 0 ? true : _transloadit$waitForE,
-            transloaditOpts = _objectWithoutProperties(transloadit, ["key", "templateId", "waitForEncoding"]);
+            transloaditOpts = _objectWithoutProperties(transloadit, _excluded2);
 
         newUppy.use(uppyTransport, {
           params: _objectSpread({
@@ -1692,9 +1712,10 @@ var UppyProvider = function UppyProvider(_ref5) {
 
       return newUppy;
     };
-  }, [Uppy, uppyLocale, uppyTransport, uppySources, transport, sources, transloadit, companion, tus, xhr]);
-  return /*#__PURE__*/React.createElement(UppyContext.Provider, {
-    value: {
+  }, [id, Uppy, uppyLocale, uppyTransport, uppySources, transport, sources, transloadit, companion, tus, xhr]);
+  var value = useMemo(function () {
+    return {
+      id: id,
       transport: transport,
       locale: locale,
       sources: sources,
@@ -1707,7 +1728,10 @@ var UppyProvider = function UppyProvider(_ref5) {
       uppySources: uppySources,
       uppyLocale: uppyLocale,
       buildUppy: buildUppy
-    }
+    };
+  }, [id, transport, locale, sources, transloadit, companion, tus, xhr, Uppy, uppyTransport, uppySources, uppyLocale, buildUppy]);
+  return /*#__PURE__*/React.createElement(UppyContext.Provider, {
+    value: value
   }, children);
 };
 UppyProvider.propTypes = propTypes;

package/es/hooks.js

@@ -10,6 +10,8 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { getCsrfToken, postJSON, getCSRFHeaders } from '@folklore/fetch';
+import get from 'lodash/get';
+import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
 import { useFieldsManager, usePanneauResources, useResource, useUrlGenerator } from '@panneau/core/contexts';
 import { match } from 'css-mediaquery';
@@ -108,12 +110,15 @@ var useFormattedTime = function useFormattedTime() {
 var eventsManager$1 = typeof document !== 'undefined' ? new EventsManager(document) : null;
 var useDocumentEvent = createUseEvent(eventsManager$1);
 
+var _excluded$1 = ["value", "errors", "onChange"];
+
 var getFieldsPropsFromFields = function getFieldsPropsFromFields(fields, _ref) {
   var value = _ref.value,
       errors = _ref.errors,
       _onChange = _ref.onChange,
-      props = _objectWithoutProperties(_ref, ["value", "errors", "onChange"]);
+      props = _objectWithoutProperties(_ref, _excluded$1);
 
+  var locales = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   return fields.reduce(function (allFields, field) {
     var _ref2 = isObject(field) ? field : {},
         _ref2$name = _ref2.name,
@@ -121,11 +126,18 @@ var getFieldsPropsFromFields = function getFieldsPropsFromFields(fields, _ref) {
         _ref2$component = _ref2.component,
         component = _ref2$component === void 0 ? null : _ref2$component;
 
+    var fieldErrors = errors !== null ? errors[name] || [] : [];
+    var localizedErrors = component === 'localized' ? (locales || []).reduce(function (previousErrors, locale) {
+      var items = errors !== null ? get(errors, "".concat(name, ".").concat(locale), []) || [] : [];
+      var finalItems = isArray(items) ? items : [items];
+      var finalPrevious = isArray(previousErrors) ? previousErrors : [];
+      return [].concat(_toConsumableArray(finalPrevious), _toConsumableArray(finalItems));
+    }, fieldErrors) : fieldErrors;
     return [].concat(_toConsumableArray(allFields), [_objectSpread(_objectSpread({}, isObject(field) ? field : null), {}, {
       name: name,
       component: component,
       value: value !== null ? value[name] || null : null,
-      errors: errors !== null ? errors[name] || null : null,
+      errors: localizedErrors.length > 0 ? localizedErrors : null,
       onChange: function onChange(fieldValue) {
         return _onChange(name, fieldValue);
       }
@@ -160,7 +172,9 @@ var useForm = function useForm() {
       _opts$setValue = opts.setValue,
       setProvidedValue = _opts$setValue === void 0 ? null : _opts$setValue,
       _opts$onComplete = opts.onComplete,
-      onComplete = _opts$onComplete === void 0 ? null : _opts$onComplete;
+      onComplete = _opts$onComplete === void 0 ? null : _opts$onComplete,
+      _opts$locales = opts.locales,
+      locales = _opts$locales === void 0 ? [] : _opts$locales;
 
   var _useState = useState(initialValue || providedValue),
       _useState2 = _slicedToArray(_useState, 2),
@@ -200,7 +214,7 @@ var useForm = function useForm() {
   var hasProvidedGeneralError = setProvidedGeneralError !== null;
   var generalError = hasProvidedGeneralError ? providedGeneralError : stateGeneralError;
   var setGeneralError = hasProvidedGeneralError ? setProvidedGeneralError : setStateGeneralError;
-  var fieldsKey = [value, errors].concat(fields);
+  var fieldsKey = [value, errors, locales].concat(fields);
   var onFieldChange = useCallback(function (fieldName, fieldValue) {
     var fieldErrors = errors !== null ? errors[fieldName] || null : null;
 
@@ -215,7 +229,7 @@ var useForm = function useForm() {
       value: value,
       errors: errors,
       onChange: onFieldChange
-    });
+    }, locales);
   }, fieldsKey);
   var csrfToken = useMemo(function () {
     return getCsrfToken();
@@ -246,7 +260,10 @@ var useForm = function useForm() {
       error: false
     });
     setResponse(resp);
-    onComplete(resp);
+
+    if (onComplete !== null) {
+      onComplete(resp);
+    }
   };
 
   var finalPostForm = useCallback(function (postAction, postData) {
@@ -974,6 +991,8 @@ var useResourceUrlGenerator = function useResourceUrlGenerator() {
   };
 };
 
+var _excluded = ["width", "height"];
+
 var useScreenSize = function useScreenSize(_ref) {
   var _ref$width = _ref.width,
       width = _ref$width === void 0 ? null : _ref$width,
@@ -1021,7 +1040,7 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
       width = _ref4$width === void 0 ? null : _ref4$width,
       _ref4$height = _ref4.height,
       height = _ref4$height === void 0 ? null : _ref4$height,
-      opts = _objectWithoutProperties(_ref4, ["width", "height"]);
+      opts = _objectWithoutProperties(_ref4, _excluded);
 
   var _useResizeObserver = useResizeObserver(),
       ref = _useResizeObserver.ref,

package/es/index.js

@@ -16,6 +16,8 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import 'lodash/isString';
 import isArray from 'lodash/isArray';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import 'lodash/get';
+import 'lodash/capitalize';
 import 'slugify';
 import uniqBy from 'lodash/uniqBy';
 import uniq from 'lodash/uniq';
@@ -61,6 +63,14 @@ var toggle = PropTypes$1.shape({
   label: PropTypes$1.string
 });
 var toggles = PropTypes$1.arrayOf(toggle);
+var tableColumn = PropTypes$1.shape({
+  id: PropTypes$1.string,
+  component: PropTypes$1.string,
+  path: PropTypes$1.string,
+  field: PropTypes$1.string,
+  columnClassName: PropTypes$1.string
+});
+var tableColumns = PropTypes$1.arrayOf(tableColumn);
 /**
  * Panneau Definitions
  */
@@ -85,8 +95,7 @@ var page = PropTypes$1.shape({
 });
 var pages = PropTypes$1.objectOf(page);
 var field = PropTypes$1.shape({
-  // type: PropTypes.string.isRequired,
-  name: PropTypes$1.isRequired,
+  name: PropTypes$1.string.isRequired,
   type: PropTypes$1.string,
   component: PropTypes$1.string,
   label: PropTypes$1.node
@@ -144,6 +153,8 @@ var uppy = PropTypes$1.shape({
   tus: PropTypes$1.object
 }); // eslint-disable-line
 
+var triggerUpdate = PropTypes$1.string;
+
 var PropTypes = /*#__PURE__*/Object.freeze({
     __proto__: null,
     message: message,
@@ -163,6 +174,8 @@ var PropTypes = /*#__PURE__*/Object.freeze({
     fieldOptions: fieldOptions,
     toggle: toggle,
     toggles: toggles,
+    tableColumn: tableColumn,
+    tableColumns: tableColumns,
     routes: routes,
     intl: intl,
     page: page,
@@ -184,7 +197,8 @@ var PropTypes = /*#__PURE__*/Object.freeze({
     feedback: feedback,
     formError: formError,
     formErrors: formErrors,
-    uppy: uppy
+    uppy: uppy,
+    triggerUpdate: triggerUpdate
 });
 
 var flattenComponents = function flattenComponents(components) {
@@ -471,9 +485,11 @@ var FieldsManager$1 = /*#__PURE__*/function (_DefinitionsManager) {
     return _super.apply(this, arguments);
   }
 
-  return FieldsManager;
+  return _createClass(FieldsManager);
 }(DefinitionsManager);
 
+var _excluded$2 = ["fonts"];
+
 var FontsParser = /*#__PURE__*/function () {
   function FontsParser(_ref) {
     var fieldsManager = _ref.fieldsManager,
@@ -519,7 +535,7 @@ var FontsParser = /*#__PURE__*/function () {
         var _this$parse = this.parse(theme),
             _this$parse$fonts = _this$parse.fonts,
             themeFonts = _this$parse$fonts === void 0 ? [] : _this$parse$fonts,
-            newTheme = _objectWithoutProperties(_this$parse, ["fonts"]);
+            newTheme = _objectWithoutProperties(_this$parse, _excluded$2);
 
         return fonts.length > 0 || themeFonts.length > 0 ? _objectSpread(_objectSpread({}, story), {}, {
           theme: newTheme,
@@ -614,9 +630,11 @@ var FieldsManager = /*#__PURE__*/function (_ComponentsManager) {
     return _super.apply(this, arguments);
   }
 
-  return FieldsManager;
+  return _createClass(FieldsManager);
 }(ComponentsManager);
 
+var _excluded$1 = ["medias"];
+
 var MediasParser = /*#__PURE__*/function () {
   function MediasParser(_ref) {
     var fieldsManager = _ref.fieldsManager,
@@ -673,7 +691,7 @@ var MediasParser = /*#__PURE__*/function () {
       if (theme !== null) {
         var _this$toPath = this.toPath(theme),
             themeMedias = _this$toPath.medias,
-            newTheme = _objectWithoutProperties(_this$toPath, ["medias"]);
+            newTheme = _objectWithoutProperties(_this$toPath, _excluded$1);
 
         return medias !== null || themeMedias !== null ? _objectSpread(_objectSpread({}, story), {}, {
           theme: newTheme,
@@ -856,6 +874,9 @@ var MediasParser = /*#__PURE__*/function () {
   return MediasParser;
 }();
 
+var _excluded = ["value"],
+    _excluded2 = ["value"];
+
 var Tracking = /*#__PURE__*/function (_BaseTracking) {
   _inherits(Tracking, _BaseTracking);
 
@@ -917,7 +938,7 @@ var Tracking = /*#__PURE__*/function (_BaseTracking) {
       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, ["value"]);
+          opts = _objectWithoutProperties(_ref2, _excluded);
 
       var data = _objectSpread(_objectSpread({}, opts), {}, {
         event: 'eventInteraction',
@@ -935,7 +956,7 @@ var Tracking = /*#__PURE__*/function (_BaseTracking) {
       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, ["value"]);
+          opts = _objectWithoutProperties(_ref3, _excluded2);
 
       var _ref4 = media || {},
           _ref4$id = _ref4.id,

package/es/utils.js

@@ -11,6 +11,8 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import isString from 'lodash/isString';
 import isArray from 'lodash/isArray';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import get from 'lodash/get';
+import capitalize from 'lodash/capitalize';
 import slugify from 'slugify';
 
 var convertStyleToString = function convertStyleToString(style) {
@@ -69,12 +71,14 @@ var flattenComponents = function flattenComponents(components) {
   }, {});
 };
 
+var _excluded$1 = ["component"];
+
 var getComponent = function getComponent(component) {
   var _ref = isObject(component) ? component : {
     component: component
   };
       _ref.component;
-      var props = _objectWithoutProperties(_ref, ["component"]);
+      var props = _objectWithoutProperties(_ref, _excluded$1);
 
   return {
     name: component,
@@ -82,6 +86,7 @@ var getComponent = function getComponent(component) {
   };
 };
 
+var _excluded = ["field"];
 var getColumnFromField = function getColumnFromField(field) {
   if (field === null) {
     return null;
@@ -117,7 +122,7 @@ var getColumnsWithFields = function getColumnsWithFields(resource, columns) {
     } : column,
         _ref$field = _ref.field,
         fieldName = _ref$field === void 0 ? null : _ref$field,
-        otherProps = _objectWithoutProperties(_ref, ["field"]);
+        otherProps = _objectWithoutProperties(_ref, _excluded);
 
     return _objectSpread(_objectSpread({}, fieldName !== null ? getColumnFromField(fields.find(function (it) {
       return it.name === fieldName;
@@ -236,11 +241,36 @@ var getFileName = function getFileName() {
   return url.match(/([^/]+)(\?.*)?$/)[1] || url;
 };
 
+var getPathValue = function getPathValue(it, path) {
+  var value = get(it, path, null);
+  return value !== null && isObject(value) ? Object.values(value).reduce(function (foundValue, value) {
+    return foundValue !== null ? foundValue : value;
+  }, null) : value;
+};
+
 var getSelectOptions = function getSelectOptions(options) {
   return options.map(function (it) {
-    return isObject(it) ? it : {
+    if (isObject(it)) {
+      var _it$label = it.label,
+          label = _it$label === void 0 ? null : _it$label,
+          value = it.value;
+
+      if (label === null) {
+        return {
+          value: value,
+          label: capitalize("".concat(value))
+        };
+      }
+
+      return {
+        value: value,
+        label: "".concat(label)
+      };
+    }
+
+    return {
       value: it,
-      label: it
+      label: capitalize("".concat(it))
     };
   });
 };
@@ -296,4 +326,4 @@ var validateFields = function validateFields(fields, value) {
   }, true);
 };
 
-export { convertStyleToString, createNullableOnChange, createUseEvent, flattenComponents, getColumnsWithFields, getComponent, getComponentFromName, getDefinitionFromId, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getSelectOptions, isMessage, setValue as setFieldValue, slug, validateFields };
+export { convertStyleToString, createNullableOnChange, createUseEvent, flattenComponents, getColumnsWithFields, getComponent, getComponentFromName, getDefinitionFromId, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getPathValue, getSelectOptions, isMessage, setValue as setFieldValue, slug, validateFields };